deuill
/
grawkit
mirror of https://github.com/deuill/grawkit.git
1
0
Fork 0
Code Actions Packages

Fix issues with incorrect canvas sizing, label font size

This commit is contained in:
Alex Palaistras 2016-12-28 22:18:50 +00:00
parent b956f428a6
commit b194ffae2a
6 changed files with 82 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
grawkit
View File

@ -94,16 +94,16 @@ function label(idx, class, name, _, buf, w, h, hspc, vspc) {
h = style["label/spacing"] * 2.5
# Calculate label offsets.
hspc = (len["branches"] * style["branch/spacing"]) + __label_offset[idx]
hspc = (len["branches"] * style["branch/spacing"]) + label_offset[idx]
vspc = idx * style["commit/spacing"]
# Store width of labels in relation to their commit index.
__label_offset[idx] = w + style["label/spacing"]
label_offset[idx] += w + style["label/spacing"]
# Draw label elements.
buf = buf "\n\t" sprintf(svg["gg"], "label-" class, hspc, vspc)
buf = buf "\n\t\t" sprintf(svg["rect"], 0, (h / 2) * -1, w, h, style["label/round"])
buf = buf "\n\t\t" sprintf(svg["text"], style["label/spacing"], style["label/spacing"] / 2, name)
buf = buf "\n\t\t" sprintf(svg["rect"], 0, style["label/spacing"] * -1.5, w, h, style["label/round"])
buf = buf "\n\t\t" sprintf(svg["text"], style["label/spacing"], style["label/spacing"] / 4, name)
buf = buf "\n\t" svg["/g"]
return buf
@ -184,16 +184,18 @@ BEGIN {
style["commit/stroke-width"] = style["branch/stroke-width"] / 2
style["commit/radius"] = style["commit/stroke-width"] * 1.5
style["label/spacing"] = "10"
style["label/round"] = "3"
style["label/fill"] = "#333"
style["label/text"] = "#fff"
style["label/spacing"] = "10"
style["label/round"] = "3"
style["label/fill"] = "#333"
style["label/text"] = "#fff"
style["label/font"] = "Inconsolata, Consolas, monospace"
style["label/font-size"] = "18px"
# Color scheme, based on `base16-solarized-dark`
style["pallete"] = "#002b36,#268bd2,#859900,#cb4b16,#2aa198,#dc322f,#d33682,#6c71c4,#b58900"
# Static SVG templates.
svg["svg"] = "<svg xmlns=\"http://www.w3.org/2000/svg\" transform=\"translate(%d,%d)\">"
svg["svg"] = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"%d %d %d %d\">"
svg["/svg"] = "</svg>"
svg["g"] = "<g class=\"%s\">"
svg["gg"] = "<g class=\"%s\" transform=\"translate(%d,%d)\">"
@ -348,11 +350,39 @@ $0 ~ rule["tag"] {
# internal state, as defined in the command-line provided.
END {
buf = ""
split(style["pallete"], pallete, ",")
# Pre-build SVG body.
body = ""
# Print merge paths for branches.
for (i = len["branches"] - 1; i >= 0; i--) {
body = body merge(i)
}
if (body != "") {
body = sprintf(svg["g"], "merge") body
body = body "\n" svg["/g"]
}
# Print each branch and corresponding commits in turn.
for (i = len["branches"] - 1; i >= 0; i--) {
body = body "\n" branch(i)
}
# Calculate SVG canvas dimensions.
h = (style["commit/spacing"] * (len["commits"] - 1)) + (style["commit/stroke-width"] * 4)
xy = style["branch/stroke-width"] * -1
# Calculate canvas width from largest combined label offset.
w = 0
for (i in label_offset) {
w = (label_offset[i] > w) ? label_offset[i] : w;
}
w += style["branch/spacing"] * len["branches"]
# Print SVG header.
printf svg["svg"], style["branch/stroke-width"], style["branch/stroke-width"]
printf svg["svg"], xy, xy, w, h
printf "\n"
# Print inline style definitions.
@ -372,12 +402,14 @@ END {
print "\tstroke: none;"
print "}"
print ".label-text {"
print "\tfont-family: Inconsolata, Consolas, monospace;"
print "\tfont-size: 1.5em;"
print "\tfont-family: " style["label/font"] ";"
print "\tfont-size: " style["label/font-size"] ";"
print "\tfill: " style["label/text"] ";"
print "\tstroke: none;"
print "}"
split(style["pallete"], pallete, ",")
# Print color scheme definitions for branches.
for (i = 0; i < len["branches"]; i++) {
print ".branch-" branches[i,"name"] " {stroke: " pallete[i + 1] "; fill: " pallete[i + 1] "}"
@ -385,20 +417,8 @@ END {
print "]]></style>"
# Print merge paths for branches.
for (i = len["branches"] - 1; i >= 0; i--) {
buf = buf merge(i)
}
if (buf != "") {
printf svg["g"], "merge"
print buf "\n" svg["/g"]
}
# Print each branch and corresponding commits in turn.
for (i = len["branches"] - 1; i >= 0; i--) {
print branch(i)
}
# Print SVG body.
print body
# Print SVG footer.
print svg["/svg"]

9
tests/01-initial.svg
View File

@ -4,7 +4,7 @@
-->
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(10,10)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 130 20">
<style type="text/css"><![CDATA[
.branch {
fill: none;
@ -22,18 +22,19 @@
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 1.5em;
font-size: 18px;
fill: #fff;
stroke: none;
}
.branch-master {stroke: #002b36; fill: #002b36}
]]></style>
<g class="branch-master">
<path class="branch" d="M0,0 L0,0" />
<circle class="commit" cx="0" cy="0" r="7.5" />
<g class="label-branch" transform="translate(50,0)">
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">master</text>
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 786 B

After

Width:  |  Height:  |  Size: 782 B

9
tests/02-master.svg
View File

@ -7,7 +7,7 @@ git commit
-->
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(10,10)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 130 120">
<style type="text/css"><![CDATA[
.branch {
fill: none;
@ -25,20 +25,21 @@ git commit
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 1.5em;
font-size: 18px;
fill: #fff;
stroke: none;
}
.branch-master {stroke: #002b36; fill: #002b36}
]]></style>
<g class="branch-master">
<path class="branch" d="M0,0 L0,100" />
<circle class="commit" cx="0" cy="0" r="7.5" />
<circle class="commit" cx="0" cy="50" r="7.5" />
<circle class="commit" cx="0" cy="100" r="7.5" />
<g class="label-branch" transform="translate(50,100)">
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">master</text>
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 961 B

After

Width:  |  Height:  |  Size: 958 B

12
tests/03-branch.svg
View File

@ -18,7 +18,7 @@ git commit
-->
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(10,10)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 220 270">
<style type="text/css"><![CDATA[
.branch {
fill: none;
@ -36,7 +36,7 @@ git commit
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 1.5em;
font-size: 18px;
fill: #fff;
stroke: none;
}
@ -53,8 +53,8 @@ git commit
<circle class="commit" cx="50" cy="150" r="7.5" />
<circle class="commit" cx="50" cy="200" r="7.5" />
<g class="label-branch" transform="translate(100,200)">
<rect x="0" y="-12" width="110" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">test-stuff</text>
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-stuff</text>
</g>
</g>
<g class="branch-master">
@ -64,8 +64,8 @@ git commit
<circle class="commit" cx="0" cy="100" r="7.5" />
<circle class="commit" cx="0" cy="250" r="7.5" />
<g class="label-branch" transform="translate(100,250)">
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">master</text>
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

12
tests/04-merge.svg
View File

@ -18,7 +18,7 @@ git merge test-merging
-->
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(10,10)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 240 270">
<style type="text/css"><![CDATA[
.branch {
fill: none;
@ -36,7 +36,7 @@ git merge test-merging
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 1.5em;
font-size: 18px;
fill: #fff;
stroke: none;
}
@ -53,8 +53,8 @@ git merge test-merging
<path class="branch" d="M50,150 L50,150" />
<circle class="commit" cx="50" cy="150" r="7.5" />
<g class="label-branch" transform="translate(100,150)">
<rect x="0" y="-12" width="130" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">test-merging</text>
<rect x="0" y="-15" width="130" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-merging</text>
</g>
</g>
<g class="branch-master">
@ -65,8 +65,8 @@ git merge test-merging
<circle class="commit" cx="0" cy="200" r="7.5" />
<circle class="commit" cx="0" cy="250" r="7.5" />
<g class="label-branch" transform="translate(100,250)">
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">master</text>
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

24
tests/05-multi-branch.svg
View File

@ -23,7 +23,7 @@ git merge test-second
-->
<svg xmlns="http://www.w3.org/2000/svg" transform="translate(10,10)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 410 320">
<style type="text/css"><![CDATA[
.branch {
fill: none;
@ -41,7 +41,7 @@ git merge test-second
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 1.5em;
font-size: 18px;
fill: #fff;
stroke: none;
}
@ -64,20 +64,20 @@ git merge test-second
<circle class="commit" cx="100" cy="200" r="7.5" />
<circle class="commit" cx="100" cy="250" r="7.5" />
<g class="label-tag" transform="translate(150,250)">
<rect x="0" y="-12" width="120" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">v.2.0.0-rc1</text>
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">v.2.0.0-rc1</text>
</g>
<g class="label-branch" transform="translate(280,250)">
<rect x="0" y="-12" width="120" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">test-second</text>
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-second</text>
</g>
</g>
<g class="branch-test-first">
<path class="branch" d="M50,150 L50,150" />
<circle class="commit" cx="50" cy="150" r="7.5" />
<g class="label-branch" transform="translate(150,150)">
<rect x="0" y="-12" width="110" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">test-first</text>
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-first</text>
</g>
</g>
<g class="branch-master">
@ -87,12 +87,12 @@ git merge test-second
<circle class="commit" cx="0" cy="100" r="7.5" />
<circle class="commit" cx="0" cy="300" r="7.5" />
<g class="label-tag" transform="translate(150,100)">
<rect x="0" y="-12" width="80" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">v.1.0.0</text>
<rect x="0" y="-15" width="80" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">v.1.0.0</text>
</g>
<g class="label-branch" transform="translate(150,300)">
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="5" class="label-text">master</text>
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB