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

Fix bugs, styling, README.md

This commit is contained in:
Alex Palaistras 2016-12-31 18:19:50 +00:00
parent a38b7c0b67
commit 55cacf1c89
8 changed files with 300 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.md
View File

@ -20,7 +20,7 @@ Grawkit has basic support for common `git` commands such as `git branch`, `git t
<tr> <tr>
<th><pre><code>git commit -m "Adding a new commit" <th><pre><code>git commit -m "Adding a new commit"
git commit</code></pre></th> git commit</code></pre></th>
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/02-master.svg" alt="Master Branch"></th> <th><img src="https://rawgit.com/deuill/grawkit/master/tests/02-master.svg" alt=""></th>
</tr> </tr>
<tr> <tr>
<th><pre><code>git commit -m "Commit on master" <th><pre><code>git commit -m "Commit on master"
@ -34,13 +34,12 @@ git commit
git checkout master git checkout master
git commit</code></pre></th> git commit</code></pre></th>
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/03-branch.svg" alt="Simple Branching"></th> <th><img src="https://rawgit.com/deuill/grawkit/master/tests/03-branch.svg" alt=""></th>
</tr> </tr>
<tr> <tr>
<th><pre><code> <th><pre><code>git branch test-merging
git commit -m "Commit on master"
git branch test-merging git commit -m "Commit on master"
git commit -m "Still on master" git commit -m "Still on master"
git checkout test-merging git checkout test-merging
@ -50,7 +49,7 @@ git checkout master
git commit -m "Another master commit" git commit -m "Another master commit"
git merge test-merging</code></pre></th> git merge test-merging</code></pre></th>
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/04-merge.svg" alt="Simple Merging"></th> <th><img src="https://rawgit.com/deuill/grawkit/master/tests/04-merge.svg" alt=""></th>
</tr> </tr>
<tr> <tr>
<th><pre><code>git commit -m "Commit on master" <th><pre><code>git commit -m "Commit on master"
@ -64,14 +63,46 @@ git tag v.1.0.0
git checkout test-first git checkout test-first
git commit git commit
git branch test-third
git checkout test-second git checkout test-second
git commit git commit
git merge test-first git merge test-first
git tag v.2.0.0-rc1 git tag v.2.0.0-rc1
git checkout master git checkout master
git merge test-second</code></pre></th> git merge test-second
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/05-multi-branch.svg" alt="Merging and Tagging Multiple Branches"></th>
git checkout test-third
git commit</code></pre></th>
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/05-multi-branch.svg" alt=""></th>
</tr>
<tr>
<th><pre><code>git branch develop
git checkout develop
git commit
git branch feature/XYZ-12_fix-foo
git checkout feature/XYZ-12_fix-foo
git commit
git commit
git checkout develop
git branch feature/ZZ-704_take-it-to-the-limit
git checkout feature/ZZ-704_take-it-to-the-limit
git commit
git checkout develop
git merge feature/XYZ-12_fix-foo
git branch feature/ABC-66_make-bar
git checkout feature/ABC-66_make-bar
git commit
git commit
git checkout develop
git merge feature/ZZ-704_take-it-to-the-limit</code></pre></th>
<th><img src="https://rawgit.com/deuill/grawkit/master/tests/06-feature-branch.svg" alt=""></th>
</tr> </tr>
</table> </table>

98
grawkit
View File

@ -20,17 +20,25 @@
function addbranch(name) { function addbranch(name) {
branches[len["branches"],"name"] = name branches[len["branches"],"name"] = name
branches[len["branches"],"refs"] = "" branches[len["branches"],"refs"] = ""
branches[len["branches"],"merges"] = state["branch"] "|" state["HEAD"]
branches[len["branches"],"tags"] = "" branches[len["branches"],"tags"] = ""
# Branches created before the first commit is established extend to the
# beginning of time.
if (state["HEAD"] != "") {
branches[len["branches"],"merges"] = state["branch"] "|" state["HEAD"]
} else {
branches[len["branches"],"merges"] = len["branches"] "|0"
}
len["branches"] += 1 len["branches"] += 1
} }
# > Function `addcommit` adds a new commit, with a specific message, to the # > Function `addcommit` adds a new commit, with a specific type and message,
# > internal list of commits to render. # > to the internal list of commits to render.
function addcommit(message) { function addcommit(type, message) {
# Add commit information. # Add commit information.
commits[len["commits"],"message"] = msg commits[len["commits"],"type"] = type
commits[len["commits"],"message"] = message
# Update commit references. # Update commit references.
if (branches[state["branch"],"refs"] == "") { if (branches[state["branch"],"refs"] == "") {
@ -43,6 +51,12 @@ function addcommit(message) {
len["commits"] += 1 len["commits"] += 1
} }
# > Function `normalize` removes invalid characters and makes string lower-case.
function normalize(text) {
text = gensub("[/_. ]", "-", "g", tolower(text))
return text
}
# > Function `branch` renders pre-defined branch under a specific name to its # > Function `branch` renders pre-defined branch under a specific name to its
# > SVG representation. # > SVG representation.
function branch(idx, _, buf, tmp, refs, tags, t, i, hspc, vspc) { function branch(idx, _, buf, tmp, refs, tags, t, i, hspc, vspc) {
@ -56,7 +70,7 @@ function branch(idx, _, buf, tmp, refs, tags, t, i, hspc, vspc) {
hspc = idx * style["branch/spacing"] hspc = idx * style["branch/spacing"]
# Print branch root element. # Print branch root element.
buf = sprintf(svg["g"], "branch-" branches[idx,"name"]) buf = "\n" sprintf(svg["g"], "branch-" normalize(branches[idx,"name"]))
# Add path for branch. # Add path for branch.
tmp = "M" hspc "," refs[1] * style["commit/spacing"] tmp = "M" hspc "," refs[1] * style["commit/spacing"]
@ -89,9 +103,11 @@ function branch(idx, _, buf, tmp, refs, tags, t, i, hspc, vspc) {
# > Function `label` adds a sidebar label at commit index, with a specific class # > Function `label` adds a sidebar label at commit index, with a specific class
# > and label name. Multiple labels for the same index will be placed side-by-side. # > and label name. Multiple labels for the same index will be placed side-by-side.
function label(idx, class, name, _, buf, w, h, hspc, vspc) { function label(idx, class, name, _, buf, w, h, hspc, vspc) {
# Calculate width and height for label rectangle. # Calculate width and height for label rectangle. Pitch size is set to 0.525
w = (style["label/spacing"] * length(name)) + style["label/spacing"] # here, which is approximately right for 'Inconsolata', but may vary for other
h = style["label/spacing"] * 2.5 # fonts, as fixed width fonts are usually twice as tall as they are wide.
w = ((style["label/font-size"] * 0.525) * length(name)) + style["label/spacing"]
h = style["label/font-size"] + style["label/spacing"]
# Calculate label offsets. # Calculate label offsets.
hspc = (len["branches"] * style["branch/spacing"]) + label_offset[idx] hspc = (len["branches"] * style["branch/spacing"]) + label_offset[idx]
@ -102,8 +118,8 @@ function label(idx, class, name, _, buf, w, h, hspc, vspc) {
# 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, style["label/spacing"] * -1.5, w, h, style["label/round"]) buf = buf "\n\t\t" sprintf(svg["rect"], 0, style["label/font-size"] * -1, 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\t" sprintf(svg["text"], style["label/spacing"] / 2, style["label/spacing"] / 4, name)
buf = buf "\n\t" svg["/g"] buf = buf "\n\t" svg["/g"]
return buf return buf
@ -121,10 +137,11 @@ function merge(idx, _, buf, tmp, refs, fields, m, i, hspc) {
hspc = idx * style["branch/spacing"] hspc = idx * style["branch/spacing"]
# Print branch root element. # Print branch root element.
buf = "\n\t" sprintf(svg["g"], "branch-" branches[idx,"name"]) buf = "\n\t" sprintf(svg["g"], normalize("branch-" branches[idx,"name"]))
# Add merge paths for branch, if any. # Add merge paths for branch, if any.
split(branches[idx,"merges"], fields, ",") split(branches[idx,"merges"], fields, ",")
for (i in fields) { for (i in fields) {
split(fields[i], m, "|") split(fields[i], m, "|")
@ -150,15 +167,16 @@ function merge(idx, _, buf, tmp, refs, fields, m, i, hspc) {
BEGIN { BEGIN {
# Errors. # Errors.
error["branch/no-name"] = "Empty name for `git branch`, line %d\n" error["branch/no-name"] = "Empty name for `git branch`, line %d\n"
error["branch/duplicate"] = "Unable to create duplicate branch '%s', line %d\n" error["branch/duplicate"] = "Unable to create duplicate branch '%s', line %d\n"
error["checkout/no-branch"] = "No branch with name '%s', line %d\n" error["checkout/no-branch"] = "No branch with name '%s', line %d\n"
error["checkout/no-name"] = "Empty name for `git checkout`, line %d\n"
error["checkout/no-name"] = "Empty name for `git checkout`, line %d\n" error["merge/no-name"] = "Empty name for `git merge`, line %d\n"
error["merge/no-name"] = "Empty name for `git merge`, line %d\n" error["label/no-name"] = "Empty name for `git tag`, line %d\n"
error["label/no-name"] = "Empty name for `git tag`, line %d\n"
# rule matching. # Rule matching.
rule["commit"] = "^git commit" rule["commit"] = "^git commit"
rule["commit/message"] = "(--message|-m)[ ]+['|\"]([^'\"]+)['|\"]" rule["commit/message"] = "(--message|-m)[ ]+['|\"]([^'\"]+)['|\"]"
@ -189,7 +207,7 @@ BEGIN {
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"] = "Inconsolata, Consolas, monospace"
style["label/font-size"] = "18px" style["label/font-size"] = "14"
# 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"
@ -207,18 +225,19 @@ BEGIN {
# Branch definitions. # Branch definitions.
branches[0,"name"] = "master" branches[0,"name"] = "master"
branches[0,"refs"] = 0 branches[0,"refs"] = ""
branches[0,"merges"] = "" branches[0,"merges"] = ""
branches[0,"tags"] = "" branches[0,"tags"] = ""
len["branches"] = 1 len["branches"] = 1
# Commit definitions. # Commit definitions.
commits[0,"message"] = "Initial commit" commits[0,"type"] = ""
len["commits"] = 1 commits[0,"message"] = ""
len["commits"] = 0
# Tracks the state across calls. # Tracks the state across calls.
state["branch"] = 0 state["branch"] = 0
state["HEAD"] = 0 state["HEAD"] = ""
} }
# Rule Definitions # Rule Definitions
@ -234,7 +253,7 @@ $0 ~ rule["commit"] {
match($0, rule["commit/message"], m) match($0, rule["commit/message"], m)
# Add new commit. # Add new commit.
addcommit((2 in m) ? m[2] : "Empty message") addcommit("commit", (2 in m) ? m[2] : "Empty message")
next next
} }
@ -285,6 +304,10 @@ $0 ~ rule["checkout"] {
# Set internal state. # Set internal state.
state["branch"] = i state["branch"] = i
split(branches[i,"refs"], refs, ",")
state["HEAD"] = refs[length(refs)]
next next
} }
@ -312,7 +335,7 @@ $0 ~ rule["merge"] {
} }
# Add a merge commit to current branch. # Add a merge commit to current branch.
addcommit("Merge commit") addcommit("merge", "Merge commit")
# Add merge reference to target branch. # Add merge reference to target branch.
if (branches[i,"merges"] == "") { if (branches[i,"merges"] == "") {
@ -350,7 +373,7 @@ $0 ~ rule["tag"] {
# internal state, as defined in the command-line provided. # internal state, as defined in the command-line provided.
END { END {
# Pre-build SVG body. w = 0
body = "" body = ""
# Print merge paths for branches. # Print merge paths for branches.
@ -365,24 +388,27 @@ END {
# Print each branch and corresponding commits in turn. # Print each branch and corresponding commits in turn.
for (i = len["branches"] - 1; i >= 0; i--) { for (i = len["branches"] - 1; i >= 0; i--) {
body = body "\n" branch(i) body = body branch(i)
} }
# Calculate SVG canvas dimensions. # Calculate SVG canvas size, removing `master` branch from X offset if it
h = (style["commit/spacing"] * (len["commits"] - 1)) + (style["commit/stroke-width"] * 4) # contains no commits.
xy = style["branch/stroke-width"] * -1 x = style["branch/stroke-width"] * -1
x += (branches[0,"refs"] == "") ? style["branch/spacing"] : 0
y = style["branch/stroke-width"] * -1
# Calculate canvas width from largest combined label offset. # Calculate canvas width from largest combined label offset.
w = 0
for (i in label_offset) { for (i in label_offset) {
w = (label_offset[i] > w) ? label_offset[i] : w; w = (label_offset[i] > w) ? label_offset[i] : w;
} }
w += style["branch/spacing"] * len["branches"] w += style["branch/spacing"] * len["branches"]
w -= (branches[0,"refs"] == "") ? style["branch/spacing"] : 0
h = (style["commit/spacing"] * (len["commits"] - 1)) + (style["commit/stroke-width"] * 4)
# Print SVG header. # Print SVG header.
printf svg["svg"], xy, xy, w, h printf svg["svg"], x, y, w, h
printf "\n" printf "\n"
# Print inline style definitions. # Print inline style definitions.
@ -390,6 +416,7 @@ END {
print ".branch {" print ".branch {"
print "\tfill: " style["branch/fill"] ";" print "\tfill: " style["branch/fill"] ";"
print "\tstroke-width: " style["branch/stroke-width"] ";" print "\tstroke-width: " style["branch/stroke-width"] ";"
print "\tstroke-linecap: round;"
print "}" print "}"
print ".commit {" print ".commit {"
print "\tfill: " style["commit/fill"] ";" print "\tfill: " style["commit/fill"] ";"
@ -403,7 +430,7 @@ END {
print "}" print "}"
print ".label-text {" print ".label-text {"
print "\tfont-family: " style["label/font"] ";" print "\tfont-family: " style["label/font"] ";"
print "\tfont-size: " style["label/font-size"] ";" print "\tfont-size: " style["label/font-size"] "px;"
print "\tfill: " style["label/text"] ";" print "\tfill: " style["label/text"] ";"
print "\tstroke: none;" print "\tstroke: none;"
print "}" print "}"
@ -412,7 +439,8 @@ END {
# 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] "}" printf ".branch-" normalize(branches[i,"name"]) " {"
printf "stroke: " pallete[i + 1] "; fill: " pallete[i + 1] "}\n"
} }
print "]]></style>" print "]]></style>"

13
tests/01-initial.svg
View File

@ -4,11 +4,12 @@
--> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 130 20"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="40 -10 0 -30">
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
.branch { .branch {
fill: none; fill: none;
stroke-width: 10; stroke-width: 10;
stroke-linecap: round;
} }
.commit { .commit {
fill: #fff; fill: #fff;
@ -22,19 +23,11 @@
} }
.label-text { .label-text {
font-family: Inconsolata, Consolas, monospace; font-family: Inconsolata, Consolas, monospace;
font-size: 18px; font-size: 14px;
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">
<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="-15" width="70" height="25" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 782 B

After

Width:  |  Height:  |  Size: 497 B

14
tests/02-master.svg
View File

@ -7,11 +7,12 @@ git commit
--> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 130 120"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 114 70">
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
.branch { .branch {
fill: none; fill: none;
stroke-width: 10; stroke-width: 10;
stroke-linecap: round;
} }
.commit { .commit {
fill: #fff; fill: #fff;
@ -25,7 +26,7 @@ git commit
} }
.label-text { .label-text {
font-family: Inconsolata, Consolas, monospace; font-family: Inconsolata, Consolas, monospace;
font-size: 18px; font-size: 14px;
fill: #fff; fill: #fff;
stroke: none; stroke: none;
} }
@ -33,13 +34,12 @@ git commit
]]></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,50" />
<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" /> <g class="label-branch" transform="translate(50,50)">
<g class="label-branch" transform="translate(50,100)"> <rect x="0" y="-14" width="54" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" /> <text x="5" y="2" class="label-text">master</text>
<text x="10" y="2" class="label-text">master</text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 958 B

After

Width:  |  Height:  |  Size: 927 B

28
tests/03-branch.svg
View File

@ -18,11 +18,12 @@ git commit
--> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 220 270"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 193 220">
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
.branch { .branch {
fill: none; fill: none;
stroke-width: 10; stroke-width: 10;
stroke-linecap: round;
} }
.commit { .commit {
fill: #fff; fill: #fff;
@ -36,7 +37,7 @@ git commit
} }
.label-text { .label-text {
font-family: Inconsolata, Consolas, monospace; font-family: Inconsolata, Consolas, monospace;
font-size: 18px; font-size: 14px;
fill: #fff; fill: #fff;
stroke: none; stroke: none;
} }
@ -45,27 +46,26 @@ git commit
]]></style> ]]></style>
<g class="merge"> <g class="merge">
<g class="branch-test-stuff"> <g class="branch-test-stuff">
<path class="branch" d="M0,100 C50,100 50,100 50,150" /> <path class="branch" d="M0,50 C50,50 50,50 50,100" />
</g> </g>
</g> </g>
<g class="branch-test-stuff"> <g class="branch-test-stuff">
<path class="branch" d="M50,150 L50,200" /> <path class="branch" d="M50,100 L50,150" />
<circle class="commit" cx="50" cy="100" r="7.5" />
<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" /> <g class="label-branch" transform="translate(100,150)">
<g class="label-branch" transform="translate(100,200)"> <rect x="0" y="-14" width="83" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" /> <text x="5" y="2" 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">
<path class="branch" d="M0,0 L0,250" /> <path class="branch" d="M0,0 L0,200" />
<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="200" r="7.5" />
<circle class="commit" cx="0" cy="250" r="7.5" /> <g class="label-branch" transform="translate(100,200)">
<g class="label-branch" transform="translate(100,250)"> <rect x="0" y="-14" width="54" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" /> <text x="5" y="2" class="label-text">master</text>
<text x="10" y="2" class="label-text">master</text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

37
tests/04-merge.svg
View File

@ -1,11 +1,10 @@
<!-- <!--
# Test the scenario of a branch merging from and # Test the scenario of a branch merging back to master.
# back to master.
git commit -m "Commit on master"
git branch test-merging git branch test-merging
git commit -m "Commit on master"
git commit -m "Still on master" git commit -m "Still on master"
git checkout test-merging git checkout test-merging
@ -18,11 +17,12 @@ git merge test-merging
--> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 240 270"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 208 220">
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
.branch { .branch {
fill: none; fill: none;
stroke-width: 10; stroke-width: 10;
stroke-linecap: round;
} }
.commit { .commit {
fill: #fff; fill: #fff;
@ -36,7 +36,7 @@ git merge test-merging
} }
.label-text { .label-text {
font-family: Inconsolata, Consolas, monospace; font-family: Inconsolata, Consolas, monospace;
font-size: 18px; font-size: 14px;
fill: #fff; fill: #fff;
stroke: none; stroke: none;
} }
@ -45,28 +45,27 @@ git merge test-merging
]]></style> ]]></style>
<g class="merge"> <g class="merge">
<g class="branch-test-merging"> <g class="branch-test-merging">
<path class="branch" d="M0,50 C50,50 50,50 50,150" /> <path class="branch" d="M50,0 C50,0 50,0 50,100" />
<path class="branch" d="M0,250 C50,250 50,250 50,150" /> <path class="branch" d="M0,200 C50,200 50,200 50,100" />
</g> </g>
</g> </g>
<g class="branch-test-merging"> <g class="branch-test-merging">
<path class="branch" d="M50,150 L50,150" /> <path class="branch" d="M50,100 L50,100" />
<circle class="commit" cx="50" cy="150" r="7.5" /> <circle class="commit" cx="50" cy="100" r="7.5" />
<g class="label-branch" transform="translate(100,150)"> <g class="label-branch" transform="translate(100,100)">
<rect x="0" y="-15" width="130" height="25" rx="3" class="label-rect" /> <rect x="0" y="-14" width="98" height="24" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-merging</text> <text x="5" y="2" class="label-text">test-merging</text>
</g> </g>
</g> </g>
<g class="branch-master"> <g class="branch-master">
<path class="branch" d="M0,0 L0,250" /> <path class="branch" d="M0,0 L0,200" />
<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="150" r="7.5" />
<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" /> <g class="label-branch" transform="translate(100,200)">
<g class="label-branch" transform="translate(100,250)"> <rect x="0" y="-14" width="54" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" /> <text x="5" y="2" class="label-text">master</text>
<text x="10" y="2" class="label-text">master</text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@ -13,6 +13,8 @@ git tag v.1.0.0
git checkout test-first git checkout test-first
git commit git commit
git branch test-third
git checkout test-second git checkout test-second
git commit git commit
git merge test-first git merge test-first
@ -21,13 +23,17 @@ git tag v.2.0.0-rc1
git checkout master git checkout master
git merge test-second git merge test-second
git checkout test-third
git commit
--> -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 410 320"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 401 320">
<style type="text/css"><![CDATA[ <style type="text/css"><![CDATA[
.branch { .branch {
fill: none; fill: none;
stroke-width: 10; stroke-width: 10;
stroke-linecap: round;
} }
.commit { .commit {
fill: #fff; fill: #fff;
@ -41,58 +47,69 @@ git merge test-second
} }
.label-text { .label-text {
font-family: Inconsolata, Consolas, monospace; font-family: Inconsolata, Consolas, monospace;
font-size: 18px; font-size: 14px;
fill: #fff; fill: #fff;
stroke: none; stroke: none;
} }
.branch-master {stroke: #002b36; fill: #002b36} .branch-master {stroke: #002b36; fill: #002b36}
.branch-test-first {stroke: #268bd2; fill: #268bd2} .branch-test-first {stroke: #268bd2; fill: #268bd2}
.branch-test-second {stroke: #859900; fill: #859900} .branch-test-second {stroke: #859900; fill: #859900}
.branch-test-third {stroke: #cb4b16; fill: #cb4b16}
]]></style> ]]></style>
<g class="merge"> <g class="merge">
<g class="branch-test-third">
<path class="branch" d="M50,100 C150,100 150,100 150,300" />
</g>
<g class="branch-test-second"> <g class="branch-test-second">
<path class="branch" d="M0,50 C100,50 100,50 100,200" /> <path class="branch" d="M0,0 C100,0 100,0 100,150" />
<path class="branch" d="M0,300 C100,300 100,300 100,200" /> <path class="branch" d="M0,250 C100,250 100,250 100,150" />
</g> </g>
<g class="branch-test-first"> <g class="branch-test-first">
<path class="branch" d="M0,50 C50,50 50,50 50,150" /> <path class="branch" d="M0,0 C50,0 50,0 50,100" />
<path class="branch" d="M100,250 C50,250 50,250 50,150" /> <path class="branch" d="M100,200 C50,200 50,200 50,100" />
</g>
</g>
<g class="branch-test-third">
<path class="branch" d="M150,300 L150,300" />
<circle class="commit" cx="150" cy="300" r="7.5" />
<g class="label-branch" transform="translate(200,300)">
<rect x="0" y="-14" width="83" height="24" rx="3" class="label-rect" />
<text x="5" y="2" class="label-text">test-third</text>
</g> </g>
</g> </g>
<g class="branch-test-second"> <g class="branch-test-second">
<path class="branch" d="M100,200 L100,250" /> <path class="branch" d="M100,150 L100,200" />
<circle class="commit" cx="100" cy="150" r="7.5" />
<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" /> <g class="label-tag" transform="translate(200,200)">
<g class="label-tag" transform="translate(150,250)"> <rect x="0" y="-14" width="90" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" /> <text x="5" y="2" 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(300,200)">
<rect x="0" y="-15" width="120" height="25" rx="3" class="label-rect" /> <rect x="0" y="-14" width="90" height="24" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-second</text> <text x="5" 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,100 L50,100" />
<circle class="commit" cx="50" cy="150" r="7.5" /> <circle class="commit" cx="50" cy="100" r="7.5" />
<g class="label-branch" transform="translate(150,150)"> <g class="label-branch" transform="translate(200,100)">
<rect x="0" y="-15" width="110" height="25" rx="3" class="label-rect" /> <rect x="0" y="-14" width="83" height="24" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">test-first</text> <text x="5" y="2" class="label-text">test-first</text>
</g> </g>
</g> </g>
<g class="branch-master"> <g class="branch-master">
<path class="branch" d="M0,0 L0,300" /> <path class="branch" d="M0,0 L0,250" />
<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="250" r="7.5" />
<circle class="commit" cx="0" cy="300" r="7.5" /> <g class="label-tag" transform="translate(200,50)">
<g class="label-tag" transform="translate(150,100)"> <rect x="0" y="-14" width="61" height="24" rx="3" class="label-rect" />
<rect x="0" y="-15" width="80" height="25" rx="3" class="label-rect" /> <text x="5" y="2" 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(200,250)">
<rect x="0" y="-15" width="70" height="25" rx="3" class="label-rect" /> <rect x="0" y="-14" width="54" height="24" rx="3" class="label-rect" />
<text x="10" y="2" class="label-text">master</text> <text x="5" y="2" class="label-text">master</text>
</g> </g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

111
tests/06-feature-branch.svg Normal file
View File

@ -0,0 +1,111 @@
<!--
git branch develop
git checkout develop
git commit
git branch feature/XYZ-12_fix-foo
git checkout feature/XYZ-12_fix-foo
git commit
git commit
git checkout develop
git branch feature/ZZ-704_take-it-to-the-limit
git checkout feature/ZZ-704_take-it-to-the-limit
git commit
git checkout develop
git merge feature/XYZ-12_fix-foo
git branch feature/ABC-66_make-bar
git checkout feature/ABC-66_make-bar
git commit
git commit
git checkout develop
git merge feature/ZZ-704_take-it-to-the-limit
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="40 -10 477 370">
<style type="text/css"><![CDATA[
.branch {
fill: none;
stroke-width: 10;
stroke-linecap: round;
}
.commit {
fill: #fff;
stroke-width: 5;
}
.label-tag {
fill: #333;
}
.label-rect {
stroke: none;
}
.label-text {
font-family: Inconsolata, Consolas, monospace;
font-size: 14px;
fill: #fff;
stroke: none;
}
.branch-master {stroke: #002b36; fill: #002b36}
.branch-develop {stroke: #268bd2; fill: #268bd2}
.branch-feature-xyz-12-fix-foo {stroke: #859900; fill: #859900}
.branch-feature-zz-704-take-it-to-the-limit {stroke: #cb4b16; fill: #cb4b16}
.branch-feature-abc-66-make-bar {stroke: #2aa198; fill: #2aa198}
]]></style>
<g class="merge">
<g class="branch-feature-abc-66-make-bar">
<path class="branch" d="M50,200 C200,200 200,200 200,250" />
</g>
<g class="branch-feature-zz-704-take-it-to-the-limit">
<path class="branch" d="M50,0 C150,0 150,0 150,150" />
<path class="branch" d="M50,350 C150,350 150,350 150,150" />
</g>
<g class="branch-feature-xyz-12-fix-foo">
<path class="branch" d="M50,0 C100,0 100,0 100,50" />
<path class="branch" d="M50,200 C100,200 100,200 100,50" />
</g>
<g class="branch-develop">
<path class="branch" d="M50,0 C50,0 50,0 50,0" />
</g>
</g>
<g class="branch-feature-abc-66-make-bar">
<path class="branch" d="M200,250 L200,300" />
<circle class="commit" cx="200" cy="250" r="7.5" />
<circle class="commit" cx="200" cy="300" r="7.5" />
<g class="label-branch" transform="translate(250,300)">
<rect x="0" y="-14" width="179" height="24" rx="3" class="label-rect" />
<text x="5" y="2" class="label-text">feature/ABC-66_make-bar</text>
</g>
</g>
<g class="branch-feature-zz-704-take-it-to-the-limit">
<path class="branch" d="M150,150 L150,150" />
<circle class="commit" cx="150" cy="150" r="7.5" />
<g class="label-branch" transform="translate(250,150)">
<rect x="0" y="-14" width="267" height="24" rx="3" class="label-rect" />
<text x="5" y="2" class="label-text">feature/ZZ-704_take-it-to-the-limit</text>
</g>
</g>
<g class="branch-feature-xyz-12-fix-foo">
<path class="branch" d="M100,50 L100,100" />
<circle class="commit" cx="100" cy="50" r="7.5" />
<circle class="commit" cx="100" cy="100" r="7.5" />
<g class="label-branch" transform="translate(250,100)">
<rect x="0" y="-14" width="171" height="24" rx="3" class="label-rect" />
<text x="5" y="2" class="label-text">feature/XYZ-12_fix-foo</text>
</g>
</g>
<g class="branch-develop">
<path class="branch" d="M50,0 L50,350" />
<circle class="commit" cx="50" cy="0" r="7.5" />
<circle class="commit" cx="50" cy="200" r="7.5" />
<circle class="commit" cx="50" cy="350" r="7.5" />
<g class="label-branch" transform="translate(250,350)">
<rect x="0" y="-14" width="61" height="24" rx="3" class="label-rect" />
<text x="5" y="2" class="label-text">develop</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB