gitgraph.js

Thanks to @yappynoppy, arrow color is now the expected one for the first commit of the branch (#216).

Before:

After:

Thanks to @srangos, you now have access to the Commit object in mouse event callbacks.

For example:

gitGraph.canvas.addEventListener("commit:mouseover", function (event) {
  // event.data.commit represents the commit being hovered
});

Thanks to @raul-benito you can now pass an HTMLElement in options.details for commit operations.

This way you can provide a workaround in contexts where document.getElementById is not working (e.g. shadow-dom in web components).

See https://github.com/nicoespeon/gitgraph.js/pull/211 for details.

Thanks to @prudy, you can now specify a font for the dot text. Font defaults to commit message font.

See #201.

Add the ability to put some text in the commit dot:

branch.commit({
  message: "Do something awesome",
  commitDotText: "A1"
});

See #196.

Thx @carlorivera 🎉

Fix #159 with #171, credits to @yodalee 🎉 👏

See #166 (fixed by #168).

Thanks @csombok for fixing this one 🎉 👍

See #164, thanks @moore3071 for this one 👍

Thanks also to @cardil for improving the gitflowsupport.html example − see #163.

See #140. Thanks to @yodalee for this one 👍

See #139.

Now you can define a line dash to your commits and branches:

var gitGraph = new GitGraph();

var master = gitGraph.branch({
  name: "master",
  color: "#F00",
  lineDash: [5]
});

master.commit({
  lineDash: [3, 2],
  dotStrokeWidth: 5,
  message: "This commit stroke is dashed"
});

The lineDash option expects a list of segments to pass to CanvasRenderingContext2D.setLineDash(). These segments are numbers that specifies distances to alternately draw a line and a gap.

Finally, you can specify a lineDash value to the branch and commit options of your custom template.

See #145.

Also includes:

• add types definition to package.json
• fix incorrect font height in labels and tags when graph is in a floating container (#155)

GitGraph's TypeScript definitions are produced in a gitgraph.d.ts file, along the build.

See #150.

You can specify a custom HTML element to contain tooltips displayed in compact mode:

var gitGraph = new GitGraph({
  template: "metro",
  tooltipContainer: document.querySelector("#tooltips"),
  mode: "compact"
});

If you don't provide a tooltipContainer, it will default to document.body.

See #147.

See #132.

See #81.

Little fixes to around edge cases for graph drawing (see #120).

#134 -> Thanks to @cgddrd, labels properly rotate in horizontal mode. You can provide a labelRotation configuration to your template too:

var graphConfig = new GitGraph.Template({
    branch: {
        color: "#000000",
        mergeStyle: "straight",
        labelRotation: 0 // -> can be configured
    },
});

var gitGraph = new GitGraph({
  template: graphConfig,
  mode: "extended",
  orientation: "horizontal"
});

#75 -> Now you can tag current HEAD with .tag( "my-tag" ). You can still pass tag options to the method:

var gitGraph = new GitGraph({ template: "metro" });

gitGraph
  .commit("Tag this commit")
  .tag("my-tag");

// alternatively
gitGraph
  .commit("Tag this commit")
  .tag({
    tag: "my-tag",
    tagColor: "green",
    tagFont: "normal 14pt Arial",
    displayTagBox: false
  });

#121 -> Fix rendering when parent branch has no commit.

Template blackarrow used to generate orphaned arrow head in some scenario (see #117).
Those are fixed now.

Now you can do things like:

var dev = master.branch({
  name: "dev",
  color: "cyan",
  commitDefaultOptions: { color: "cyan" }
});

This will make your commits be cyan by default on dev branch.
It works for others commit options too.