Merge pull request #286 from nicoespeon/custom-render-branch-labels

Customize how we render branches labels

Author: nicoespeon

packages/gitgraph-core/src/branch.ts

@@ -5,6 +5,7 @@ import { TemplateOptions, BranchStyle } from "./template";
 
 export {
   BranchCommitDefaultOptions,
+  BranchRenderOptions,
   BranchOptions,
   DELETED_BRANCH_NAME,
   createDeletedBranch,
@@ -17,7 +18,11 @@ interface BranchCommitDefaultOptions<TNode> extends CommitRenderOptions<TNode> {
   style?: TemplateOptions["commit"];
 }
 
-interface BranchOptions<TNode = SVGElement> {
+interface BranchRenderOptions<TNode> {
+  renderLabel?: (branch: Branch<TNode>) => TNode;
+}
+
+interface BranchOptions<TNode = SVGElement> extends BranchRenderOptions<TNode> {
   /**
    * Gitgraph constructor
    */
@@ -52,6 +57,7 @@ class Branch<TNode = SVGElement> {
   public computedColor?: BranchStyle["color"];
   public parentCommitHash: BranchOptions["parentCommitHash"];
   public commitDefaultOptions: BranchCommitDefaultOptions<TNode>;
+  public renderLabel: BranchOptions<TNode>["renderLabel"];
 
   private gitgraph: GitgraphCore<TNode>;
   private onGraphUpdate: () => void;
@@ -63,6 +69,7 @@ class Branch<TNode = SVGElement> {
     this.parentCommitHash = options.parentCommitHash;
     this.commitDefaultOptions = options.commitDefaultOptions || { style: {} };
     this.onGraphUpdate = options.onGraphUpdate;
+    this.renderLabel = options.renderLabel;
   }
 
   /**

packages/gitgraph-core/src/user-api/gitgraph-user-api.ts

@@ -3,6 +3,7 @@ import { Commit, CommitRenderOptions, CommitOptions } from "../commit";
 import {
   Branch,
   BranchCommitDefaultOptions,
+  BranchRenderOptions,
   DELETED_BRANCH_NAME,
 } from "../branch";
 import { GitgraphCore } from "../gitgraph";
@@ -31,7 +32,7 @@ interface GitgraphTagOptions {
   style?: TemplateOptions["tag"];
 }
 
-interface GitgraphBranchOptions<TNode> {
+interface GitgraphBranchOptions<TNode> extends BranchRenderOptions<TNode> {
   /**
    * Branch name
    */

packages/gitgraph-js/src/gitgraph.ts

@@ -429,24 +429,28 @@ function createGitgraph(
       // To do so, we'd need to reposition each of them appropriately.
       if (commit.branchToDisplay !== branch.name) return null;
 
-      let branchLabel;
+      const branchLabel = branch.renderLabel
+        ? branch.renderLabel(branch)
+        : createBranchLabel(branch, commit);
+
+      let branchLabelContainer;
       if (gitgraph.isVertical) {
-        branchLabel = createG({
-          children: [createBranchLabel(branch, commit)],
+        branchLabelContainer = createG({
+          children: [branchLabel],
         });
       } else {
         const commitDotSize = commit.style.dot.size * 2;
         const horizontalMarginTop = 10;
 
-        branchLabel = createG({
+        branchLabelContainer = createG({
           translate: { x: commit.x, y: commitDotSize + horizontalMarginTop },
-          children: [createBranchLabel(branch, commit)],
+          children: [branchLabel],
         });
       }
 
-      setBranchLabelRef(commit, branchLabel);
+      setBranchLabelRef(commit, branchLabelContainer);
 
-      return branchLabel;
+      return branchLabelContainer;
     });
   }
 

packages/gitgraph-react/src/Gitgraph.tsx

@@ -318,7 +318,11 @@ class Gitgraph extends React.Component<GitgraphProps, GitgraphState> {
       if (commit.branchToDisplay !== branch.name) return null;
 
       const ref = this.createBranchLabelRef(commit);
-      const branchLabel = <BranchLabel branch={branch} commit={commit} />;
+      const branchLabel = branch.renderLabel ? (
+        branch.renderLabel(branch)
+      ) : (
+        <BranchLabel branch={branch} commit={commit} />
+      );
 
       if (this.gitgraph.isVertical) {
         return (

packages/stories/src/gitgraph-js/6-custom-renders.stories.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react";
 import {
   createGitgraph,
   CommitOptions,
+  BranchOptions,
   Mode,
   Orientation,
   TemplateName,
@@ -239,4 +240,39 @@ storiesOf("gitgraph-js/6. Custom renders", module)
           });
       }}
     </GraphContainer>
-  ));
+  ))
+  .add("with render branch label", () => {
+    const renderLabel: BranchOptions["renderLabel"] = (branch) => {
+      return createText({
+        content: `🎷 ${branch.name}`,
+        fill: branch.style.label.color,
+        font: branch.style.label.font,
+        translate: {
+          x: 0,
+          y: 20,
+        },
+        rotate: -15,
+      });
+    };
+
+    return (
+      <GraphContainer>
+        {(graphContainer) => {
+          const gitgraph = createGitgraph(graphContainer, {
+            generateCommitHash: createFixedHashGenerator(),
+          });
+
+          gitgraph
+            .branch({ name: "master", renderLabel })
+            .commit("Initial commit")
+            .commit("Another commit")
+            .commit("Do something crazy");
+
+          gitgraph
+            .branch({ name: "dev", renderLabel })
+            .commit("Oh my god")
+            .commit("Last commit of the branch");
+        }}
+      </GraphContainer>
+    );
+  });

packages/stories/src/gitgraph-react/6-custom-renders.stories.tsx

@@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react";
 import {
   Gitgraph,
   CommitOptions,
+  BranchOptions,
   Mode,
   Orientation,
   templateExtend,
@@ -244,4 +245,37 @@ storiesOf("gitgraph-react/6. Custom renders", module)
         }}
       </Gitgraph>
     );
+  })
+  .add("with render branch label", () => {
+    const renderLabel: BranchOptions["renderLabel"] = (branch) => {
+      return (
+        <text
+          alignmentBaseline="middle"
+          dominantBaseline="middle"
+          fill={branch.style.label.color}
+          style={{ font: branch.style.label.font }}
+          y={20}
+          transform={"rotate(-15)"}
+        >
+          🎷 {branch.name}
+        </text>
+      );
+    };
+
+    return (
+      <Gitgraph options={{ generateCommitHash: createFixedHashGenerator() }}>
+        {(gitgraph) => {
+          gitgraph
+            .branch({ name: "master", renderLabel })
+            .commit("Initial commit")
+            .commit("Another commit")
+            .commit("Do something crazy");
+
+          gitgraph
+            .branch({ name: "dev", renderLabel })
+            .commit("Oh my god")
+            .commit("Last commit of the branch");
+        }}
+      </Gitgraph>
+    );
   });

packages/stories/src/helpers.tsx

@@ -130,6 +130,7 @@ interface TextOptions {
     x: number;
     y: number;
   };
+  rotate?: number;
   onClick?: () => void;
 }
 
@@ -156,6 +157,10 @@ function createText(options: TextOptions): SVGTextElement {
     text.setAttribute("y", options.translate.y.toString());
   }
 
+  if (options.rotate) {
+    text.setAttribute("transform", `rotate(${options.rotate})`);
+  }
+
   if (options.onClick) {
     text.addEventListener("click", options.onClick);
   }