How to use @gitgraph/core - 10 common examples

private renderCommit(commit: Commit) {
    const { x, y } = this.getWithCommitOffset(commit);

    const shouldRenderTooltip =
      this.state.currentCommitOver === commit &&
      (this.gitgraph.isHorizontal ||
        (this.gitgraph.mode === Mode.Compact &&
          commit.style.hasTooltipInCompactMode));

    if (shouldRenderTooltip) {
      this.$tooltip = (
        
      );
    }

    return (

private computeOffsets(
    commits: Element[],
  ): GitgraphState["commitYWithOffsets"] {
    let totalOffsetY = 0;

    // In VerticalReverse orientation, commits are in the same order in the DOM.
    const orientedCommits =
      this.gitgraph.orientation === Orientation.VerticalReverse
        ? commits
        : commits.reverse();

    return orientedCommits.reduce(
      (newOffsets, commit) => {
        const commitY = parseInt(
          commit
            .getAttribute("transform")!
            .split(",")[1]
            .slice(0, -1),
          10,
        );

        const firstForeignObject = commit.getElementsByTagName(
          "foreignObject",
        )[0];

function computeOffsets(): void {
      const commits: Element[] = Array.from($commits.children);
      let totalOffsetY = 0;

      // In VerticalReverse orientation, commits are in the same order in the DOM.
      const orientedCommits =
        gitgraph.orientation === Orientation.VerticalReverse
          ? commits
          : commits.reverse();

      commitYWithOffsets = orientedCommits.reduce(
        (newOffsets, commit) => {
          const commitY = parseInt(
            commit
              .getAttribute("transform")!
              .split(",")[1]
              .slice(0, -1),
            10,
          );

          const firstForeignObject = commit.getElementsByTagName(
            "foreignObject",
          )[0];

// E.g. {20: 30} means for commit: y=20 -> y=30
  // Offset should be computed when graph is rendered (componentDidUpdate).
  let commitYWithOffsets: CommitYWithOffsets = {};
  let shouldRecomputeOffsets = false;
  let lastData: RenderedData;
  let $commits: SVGElement;
  let commitMessagesX = 0;
  let $tooltip: SVGElement | null = null;

  // Create an `svg` context in which we'll render the graph.
  const svg = createSvg();
  adaptSvgOnUpdate();
  graphContainer.appendChild(svg);

  // React on gitgraph updates to re-render the graph.
  const gitgraph = new GitgraphCore(options);
  gitgraph.subscribe((data) => {
    shouldRecomputeOffsets = true;
    render(data);
  });

  // Return usable API for end-user.
  return gitgraph.getUserApi();

  function render(data: RenderedData): void {
    // Reset before new rendering to flush previous state.
    commitsElements = {};

    const { commits, branchesPaths } = data;
    commitMessagesX = data.commitMessagesX;

    // Store data so we can re-render after offsets are computed.

return commit.parents.map((parentHash) => {
      const parent = this.state.commits.find(({ hash }) => hash === parentHash);
      if (!parent) return null;

      // Starting point, relative to commit
      const origin = this.gitgraph.reverseArrow
        ? {
            x: commitRadius + (parent.x - commit.x),
            y: commitRadius + (parent.y - commit.y),
          }
        : { x: commitRadius, y: commitRadius };

      return (
        
      );
    });
  }

return commit.parents.map((parentHash) => {
        const parent = commits.find(({ hash }) => hash === parentHash);
        if (!parent) return null;

        // Starting point, relative to commit
        const origin = gitgraph.reverseArrow
          ? {
              x: commitRadius + (parent.x - commit.x),
              y: commitRadius + (parent.y - commit.y),
            }
          : { x: commitRadius, y: commitRadius };

        const path = createPath({
          d: arrowSvgPath(gitgraph, parent, commit),
          fill: gitgraph.template.arrow.color || "",
        });

        return createG({ translate: origin, children: [path] });
      });
    }

.add("pass graph instance as a prop", () => {
    const graph = new GitgraphCore>({
      generateCommitHash: createFixedHashGenerator(),
    });

    const gitgraph = graph.getUserApi();
    const master = gitgraph
      .branch("master")
      .commit("Initial commit (from graph props)");
    const develop = gitgraph.branch("develop");
    develop.commit("one");
    master.commit("two");
    develop.commit("three");
    master.merge(develop);

    return ;
  })
  .add("stop on last commit", () => (

constructor(props: GitgraphProps) {
    super(props);
    this.state = {
      commits: [],
      branchesPaths: new Map(),
      commitMessagesX: 0,
      commitYWithOffsets: {},
      shouldRecomputeOffsets: true,
      currentCommitOver: null,
    };
    this.gitgraph = isPropsWithGraph(props)
      ? props.graph
      : new GitgraphCore(props.options);
    this.gitgraph.subscribe((data) => {
      const { commits, branchesPaths, commitMessagesX } = data;
      this.setState({
        commits,
        branchesPaths,
        commitMessagesX,
        shouldRecomputeOffsets: true,
      });
    });
  }

function renderBranchesPaths(
    branchesPaths: RenderedData["branchesPaths"],
  ): SVGElement {
    const offset = gitgraph.template.commit.dot.size;
    const isBezier = gitgraph.template.branch.mergeStyle === MergeStyle.Bezier;

    const paths = Array.from(branchesPaths).map(([branch, coordinates]) => {
      return createPath({
        d: toSvgPath(
          coordinates.map((coordinate) => coordinate.map(getWithCommitOffset)),
          isBezier,
          gitgraph.isVertical,
        ),
        fill: "transparent",
        stroke: branch.computedColor || "",
        strokeWidth: branch.style.lineWidth,
        translate: {
          x: offset,
          y: offset,
        },
      });

private renderBranchesPaths() {
    const offset = this.gitgraph.template.commit.dot.size;
    const isBezier =
      this.gitgraph.template.branch.mergeStyle === MergeStyle.Bezier;
    return Array.from(this.state.branchesPaths).map(([branch, coordinates]) => (