Fix issues with incorrect canvas sizing, label font size
76
grawkit
|
@ -94,16 +94,16 @@ function label(idx, class, name, _, buf, w, h, hspc, vspc) {
|
||||||
h = style["label/spacing"] * 2.5
|
h = style["label/spacing"] * 2.5
|
||||||
|
|
||||||
# Calculate label offsets.
|
# 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"]
|
vspc = idx * style["commit/spacing"]
|
||||||
|
|
||||||
# Store width of labels in relation to their commit index.
|
# 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.
|
# Draw label elements.
|
||||||
buf = buf "\n\t" sprintf(svg["gg"], "label-" class, hspc, vspc)
|
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["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"] / 2, name)
|
buf = buf "\n\t\t" sprintf(svg["text"], style["label/spacing"], style["label/spacing"] / 4, name)
|
||||||
buf = buf "\n\t" svg["/g"]
|
buf = buf "\n\t" svg["/g"]
|
||||||
|
|
||||||
return buf
|
return buf
|
||||||
|
@ -184,16 +184,18 @@ BEGIN {
|
||||||
style["commit/stroke-width"] = style["branch/stroke-width"] / 2
|
style["commit/stroke-width"] = style["branch/stroke-width"] / 2
|
||||||
style["commit/radius"] = style["commit/stroke-width"] * 1.5
|
style["commit/radius"] = style["commit/stroke-width"] * 1.5
|
||||||
|
|
||||||
style["label/spacing"] = "10"
|
style["label/spacing"] = "10"
|
||||||
style["label/round"] = "3"
|
style["label/round"] = "3"
|
||||||
style["label/fill"] = "#333"
|
style["label/fill"] = "#333"
|
||||||
style["label/text"] = "#fff"
|
style["label/text"] = "#fff"
|
||||||
|
style["label/font"] = "Inconsolata, Consolas, monospace"
|
||||||
|
style["label/font-size"] = "18px"
|
||||||
|
|
||||||
# Color scheme, based on `base16-solarized-dark`
|
# Color scheme, based on `base16-solarized-dark`
|
||||||
style["pallete"] = "#002b36,#268bd2,#859900,#cb4b16,#2aa198,#dc322f,#d33682,#6c71c4,#b58900"
|
style["pallete"] = "#002b36,#268bd2,#859900,#cb4b16,#2aa198,#dc322f,#d33682,#6c71c4,#b58900"
|
||||||
|
|
||||||
# Static SVG templates.
|
# 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["/svg"] = "</svg>"
|
||||||
svg["g"] = "<g class=\"%s\">"
|
svg["g"] = "<g class=\"%s\">"
|
||||||
svg["gg"] = "<g class=\"%s\" transform=\"translate(%d,%d)\">"
|
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.
|
# internal state, as defined in the command-line provided.
|
||||||
|
|
||||||
END {
|
END {
|
||||||
buf = ""
|
# Pre-build SVG body.
|
||||||
split(style["pallete"], pallete, ",")
|
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.
|
# Print SVG header.
|
||||||
printf svg["svg"], style["branch/stroke-width"], style["branch/stroke-width"]
|
printf svg["svg"], xy, xy, w, h
|
||||||
printf "\n"
|
printf "\n"
|
||||||
|
|
||||||
# Print inline style definitions.
|
# Print inline style definitions.
|
||||||
|
@ -372,12 +402,14 @@ END {
|
||||||
print "\tstroke: none;"
|
print "\tstroke: none;"
|
||||||
print "}"
|
print "}"
|
||||||
print ".label-text {"
|
print ".label-text {"
|
||||||
print "\tfont-family: Inconsolata, Consolas, monospace;"
|
print "\tfont-family: " style["label/font"] ";"
|
||||||
print "\tfont-size: 1.5em;"
|
print "\tfont-size: " style["label/font-size"] ";"
|
||||||
print "\tfill: " style["label/text"] ";"
|
print "\tfill: " style["label/text"] ";"
|
||||||
print "\tstroke: none;"
|
print "\tstroke: none;"
|
||||||
print "}"
|
print "}"
|
||||||
|
|
||||||
|
split(style["pallete"], pallete, ",")
|
||||||
|
|
||||||
# Print color scheme definitions for branches.
|
# Print color scheme definitions for branches.
|
||||||
for (i = 0; i < len["branches"]; i++) {
|
for (i = 0; i < len["branches"]; i++) {
|
||||||
print ".branch-" branches[i,"name"] " {stroke: " pallete[i + 1] "; fill: " pallete[i + 1] "}"
|
print ".branch-" branches[i,"name"] " {stroke: " pallete[i + 1] "; fill: " pallete[i + 1] "}"
|
||||||
|
@ -385,20 +417,8 @@ END {
|
||||||
|
|
||||||
print "]]></style>"
|
print "]]></style>"
|
||||||
|
|
||||||
# Print merge paths for branches.
|
# Print SVG body.
|
||||||
for (i = len["branches"] - 1; i >= 0; i--) {
|
print body
|
||||||
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 footer.
|
# Print SVG footer.
|
||||||
print svg["/svg"]
|
print svg["/svg"]
|
||||||
|
|
|
@ -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[
|
<style type="text/css"><![CDATA[
|
||||||
.branch {
|
.branch {
|
||||||
fill: none;
|
fill: none;
|
||||||
|
@ -22,18 +22,19 @@
|
||||||
}
|
}
|
||||||
.label-text {
|
.label-text {
|
||||||
font-family: Inconsolata, Consolas, monospace;
|
font-family: Inconsolata, Consolas, monospace;
|
||||||
font-size: 1.5em;
|
font-size: 18px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
.branch-master {stroke: #002b36; fill: #002b36}
|
.branch-master {stroke: #002b36; fill: #002b36}
|
||||||
]]></style>
|
]]></style>
|
||||||
|
|
||||||
<g class="branch-master">
|
<g class="branch-master">
|
||||||
<path class="branch" d="M0,0 L0,0" />
|
<path class="branch" d="M0,0 L0,0" />
|
||||||
<circle class="commit" cx="0" cy="0" r="7.5" />
|
<circle class="commit" cx="0" cy="0" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(50,0)">
|
<g class="label-branch" transform="translate(50,0)">
|
||||||
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">master</text>
|
<text x="10" y="2" class="label-text">master</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 786 B After Width: | Height: | Size: 782 B |
|
@ -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[
|
<style type="text/css"><![CDATA[
|
||||||
.branch {
|
.branch {
|
||||||
fill: none;
|
fill: none;
|
||||||
|
@ -25,20 +25,21 @@ git commit
|
||||||
}
|
}
|
||||||
.label-text {
|
.label-text {
|
||||||
font-family: Inconsolata, Consolas, monospace;
|
font-family: Inconsolata, Consolas, monospace;
|
||||||
font-size: 1.5em;
|
font-size: 18px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
.branch-master {stroke: #002b36; fill: #002b36}
|
.branch-master {stroke: #002b36; fill: #002b36}
|
||||||
]]></style>
|
]]></style>
|
||||||
|
|
||||||
<g class="branch-master">
|
<g class="branch-master">
|
||||||
<path class="branch" d="M0,0 L0,100" />
|
<path class="branch" d="M0,0 L0,100" />
|
||||||
<circle class="commit" cx="0" cy="0" r="7.5" />
|
<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="50" r="7.5" />
|
||||||
<circle class="commit" cx="0" cy="100" r="7.5" />
|
<circle class="commit" cx="0" cy="100" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(50,100)">
|
<g class="label-branch" transform="translate(50,100)">
|
||||||
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">master</text>
|
<text x="10" y="2" class="label-text">master</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 961 B After Width: | Height: | Size: 958 B |
|
@ -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[
|
<style type="text/css"><![CDATA[
|
||||||
.branch {
|
.branch {
|
||||||
fill: none;
|
fill: none;
|
||||||
|
@ -36,7 +36,7 @@ git commit
|
||||||
}
|
}
|
||||||
.label-text {
|
.label-text {
|
||||||
font-family: Inconsolata, Consolas, monospace;
|
font-family: Inconsolata, Consolas, monospace;
|
||||||
font-size: 1.5em;
|
font-size: 18px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
@ -53,8 +53,8 @@ git commit
|
||||||
<circle class="commit" cx="50" cy="150" r="7.5" />
|
<circle class="commit" cx="50" cy="150" r="7.5" />
|
||||||
<circle class="commit" cx="50" cy="200" r="7.5" />
|
<circle class="commit" cx="50" cy="200" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(100,200)">
|
<g class="label-branch" transform="translate(100,200)">
|
||||||
<rect x="0" y="-12" width="110" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">test-stuff</text>
|
<text x="10" y="2" class="label-text">test-stuff</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g class="branch-master">
|
<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="100" r="7.5" />
|
||||||
<circle class="commit" cx="0" cy="250" r="7.5" />
|
<circle class="commit" cx="0" cy="250" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(100,250)">
|
<g class="label-branch" transform="translate(100,250)">
|
||||||
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">master</text>
|
<text x="10" y="2" class="label-text">master</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
@ -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[
|
<style type="text/css"><![CDATA[
|
||||||
.branch {
|
.branch {
|
||||||
fill: none;
|
fill: none;
|
||||||
|
@ -36,7 +36,7 @@ git merge test-merging
|
||||||
}
|
}
|
||||||
.label-text {
|
.label-text {
|
||||||
font-family: Inconsolata, Consolas, monospace;
|
font-family: Inconsolata, Consolas, monospace;
|
||||||
font-size: 1.5em;
|
font-size: 18px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
@ -53,8 +53,8 @@ git merge test-merging
|
||||||
<path class="branch" d="M50,150 L50,150" />
|
<path class="branch" d="M50,150 L50,150" />
|
||||||
<circle class="commit" cx="50" cy="150" r="7.5" />
|
<circle class="commit" cx="50" cy="150" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(100,150)">
|
<g class="label-branch" transform="translate(100,150)">
|
||||||
<rect x="0" y="-12" width="130" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="130" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">test-merging</text>
|
<text x="10" y="2" class="label-text">test-merging</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g class="branch-master">
|
<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="200" r="7.5" />
|
||||||
<circle class="commit" cx="0" cy="250" r="7.5" />
|
<circle class="commit" cx="0" cy="250" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(100,250)">
|
<g class="label-branch" transform="translate(100,250)">
|
||||||
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">master</text>
|
<text x="10" y="2" class="label-text">master</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
@ -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[
|
<style type="text/css"><![CDATA[
|
||||||
.branch {
|
.branch {
|
||||||
fill: none;
|
fill: none;
|
||||||
|
@ -41,7 +41,7 @@ git merge test-second
|
||||||
}
|
}
|
||||||
.label-text {
|
.label-text {
|
||||||
font-family: Inconsolata, Consolas, monospace;
|
font-family: Inconsolata, Consolas, monospace;
|
||||||
font-size: 1.5em;
|
font-size: 18px;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: none;
|
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="200" r="7.5" />
|
||||||
<circle class="commit" cx="100" cy="250" r="7.5" />
|
<circle class="commit" cx="100" cy="250" r="7.5" />
|
||||||
<g class="label-tag" transform="translate(150,250)">
|
<g class="label-tag" transform="translate(150,250)">
|
||||||
<rect x="0" y="-12" width="120" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">v.2.0.0-rc1</text>
|
<text x="10" y="2" class="label-text">v.2.0.0-rc1</text>
|
||||||
</g>
|
</g>
|
||||||
<g class="label-branch" transform="translate(280,250)">
|
<g class="label-branch" transform="translate(280,250)">
|
||||||
<rect x="0" y="-12" width="120" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">test-second</text>
|
<text x="10" y="2" class="label-text">test-second</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g class="branch-test-first">
|
<g class="branch-test-first">
|
||||||
<path class="branch" d="M50,150 L50,150" />
|
<path class="branch" d="M50,150 L50,150" />
|
||||||
<circle class="commit" cx="50" cy="150" r="7.5" />
|
<circle class="commit" cx="50" cy="150" r="7.5" />
|
||||||
<g class="label-branch" transform="translate(150,150)">
|
<g class="label-branch" transform="translate(150,150)">
|
||||||
<rect x="0" y="-12" width="110" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">test-first</text>
|
<text x="10" y="2" class="label-text">test-first</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g class="branch-master">
|
<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="100" r="7.5" />
|
||||||
<circle class="commit" cx="0" cy="300" r="7.5" />
|
<circle class="commit" cx="0" cy="300" r="7.5" />
|
||||||
<g class="label-tag" transform="translate(150,100)">
|
<g class="label-tag" transform="translate(150,100)">
|
||||||
<rect x="0" y="-12" width="80" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="80" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">v.1.0.0</text>
|
<text x="10" y="2" class="label-text">v.1.0.0</text>
|
||||||
</g>
|
</g>
|
||||||
<g class="label-branch" transform="translate(150,300)">
|
<g class="label-branch" transform="translate(150,300)">
|
||||||
<rect x="0" y="-12" width="70" height="25" rx="3" class="label-rect" />
|
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" />
|
||||||
<text x="10" y="5" class="label-text">master</text>
|
<text x="10" y="2" class="label-text">master</text>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |