parent
4dbf3aa648
commit
577b0b5c24
@ -0,0 +1,21 @@ |
|||||||
|
The MIT License (MIT) |
||||||
|
|
||||||
|
Copyright (c) 2013 Nicolas CARLO and Fabien BERNARD |
||||||
|
Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of |
||||||
|
this software and associated documentation files (the "Software"), to deal in |
||||||
|
the Software without restriction, including without limitation the rights to |
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of |
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so, |
||||||
|
subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS |
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR |
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER |
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN |
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
import type { Commit, CommitRenderOptions } from "./commit"; |
||||||
|
import type { GitgraphCore } from "./gitgraph"; |
||||||
|
import type { TemplateOptions, BranchStyle } from "./template"; |
||||||
|
|
||||||
|
export { |
||||||
|
type BranchCommitDefaultOptions, |
||||||
|
type BranchRenderOptions, |
||||||
|
type BranchOptions, |
||||||
|
Branch, |
||||||
|
}; |
||||||
|
|
||||||
|
interface BranchCommitDefaultOptions<TNode> extends CommitRenderOptions<TNode> { |
||||||
|
author?: string; |
||||||
|
subject?: string; |
||||||
|
style?: TemplateOptions["commit"]; |
||||||
|
} |
||||||
|
|
||||||
|
interface BranchRenderOptions<TNode> { |
||||||
|
renderLabel?: (branch: Branch<TNode>) => TNode; |
||||||
|
} |
||||||
|
|
||||||
|
interface BranchOptions<TNode = SVGElement> extends BranchRenderOptions<TNode> { |
||||||
|
/** |
||||||
|
* Gitgraph constructor |
||||||
|
*/ |
||||||
|
gitgraph: GitgraphCore<TNode>; |
||||||
|
/** |
||||||
|
* Branch name |
||||||
|
*/ |
||||||
|
name: string; |
||||||
|
/** |
||||||
|
* Branch style |
||||||
|
*/ |
||||||
|
style: BranchStyle; |
||||||
|
/** |
||||||
|
* Parent commit |
||||||
|
*/ |
||||||
|
parentCommitHash?: Commit["hash"]; |
||||||
|
/** |
||||||
|
* Default options for commits |
||||||
|
*/ |
||||||
|
commitDefaultOptions?: BranchCommitDefaultOptions<TNode>; |
||||||
|
/** |
||||||
|
* On graph update. |
||||||
|
*/ |
||||||
|
onGraphUpdate: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
const DELETED_BRANCH_NAME = ""; |
||||||
|
|
||||||
|
class Branch<TNode = SVGElement> { |
||||||
|
public name: BranchOptions["name"]; |
||||||
|
public style: BranchStyle; |
||||||
|
public index: number = 0; |
||||||
|
public computedColor?: BranchStyle["color"]; |
||||||
|
public parentCommitHash: BranchOptions["parentCommitHash"]; |
||||||
|
public commitDefaultOptions: BranchCommitDefaultOptions<TNode>; |
||||||
|
public renderLabel: BranchOptions<TNode>["renderLabel"]; |
||||||
|
|
||||||
|
private gitgraph: GitgraphCore<TNode>; |
||||||
|
private onGraphUpdate: () => void; |
||||||
|
|
||||||
|
constructor(options: BranchOptions<TNode>) { |
||||||
|
this.gitgraph = options.gitgraph; |
||||||
|
this.name = options.name; |
||||||
|
this.style = options.style; |
||||||
|
this.parentCommitHash = options.parentCommitHash; |
||||||
|
this.commitDefaultOptions = options.commitDefaultOptions || { style: {} }; |
||||||
|
this.onGraphUpdate = options.onGraphUpdate; |
||||||
|
this.renderLabel = options.renderLabel; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,342 @@ |
|||||||
|
import type { Commit } from "./commit"; |
||||||
|
import type { Branch } from "./branch"; |
||||||
|
import type { CommitStyleBase } from "./template"; |
||||||
|
import { pick } from "./utils"; |
||||||
|
import type { GraphRows } from "./graph-rows"; |
||||||
|
|
||||||
|
export { type BranchesPaths, type Coordinate, BranchesPathsCalculator, toSvgPath }; |
||||||
|
|
||||||
|
type BranchesPaths<TNode> = Map<Branch<TNode>, Coordinate[][]>; |
||||||
|
|
||||||
|
interface Coordinate { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
} |
||||||
|
|
||||||
|
type InternalBranchesPaths<TNode> = Map<Branch<TNode>, InternalPaths>; |
||||||
|
|
||||||
|
class InternalPaths { |
||||||
|
forks: Coordinate[][]; |
||||||
|
branch: Coordinate[]; |
||||||
|
merges: Coordinate[][]; |
||||||
|
|
||||||
|
constructor( |
||||||
|
) { |
||||||
|
this.forks = []; |
||||||
|
this.branch = []; |
||||||
|
this.merges = []; |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Calculate branches paths of the graph. |
||||||
|
* |
||||||
|
* It follows the Command pattern: |
||||||
|
* => a class with a single `execute()` public method. |
||||||
|
* |
||||||
|
* Main benefit is we can split computation in smaller steps without |
||||||
|
* passing around parameters (we can rely on private data). |
||||||
|
*/ |
||||||
|
class BranchesPathsCalculator<TNode> { |
||||||
|
private commits: Array<Commit<TNode>>; |
||||||
|
private rows:GraphRows<TNode>; |
||||||
|
private branches: Map<Branch["name"], Branch<TNode>>; |
||||||
|
private isGraphReverse: boolean; |
||||||
|
private commitSpacing: CommitStyleBase["spacing"]; |
||||||
|
private branchesPaths: InternalBranchesPaths<TNode> = new Map< |
||||||
|
Branch<TNode>, |
||||||
|
InternalPaths |
||||||
|
>(); |
||||||
|
|
||||||
|
constructor( |
||||||
|
commits: Array<Commit<TNode>>, |
||||||
|
rows: GraphRows<TNode>, |
||||||
|
branches: Map<Branch["name"], Branch<TNode>>, |
||||||
|
isGraphReverse: boolean, |
||||||
|
commitSpacing: CommitStyleBase["spacing"], |
||||||
|
) { |
||||||
|
this.commits = commits; |
||||||
|
this.rows = rows; |
||||||
|
this.branches = branches; |
||||||
|
this.commitSpacing = commitSpacing; |
||||||
|
this.isGraphReverse = isGraphReverse; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Compute branches paths for graph. |
||||||
|
*/ |
||||||
|
public execute(): BranchesPaths<TNode> { |
||||||
|
return this.fromCommits(); |
||||||
|
// this.withMergeCommits();
|
||||||
|
// return this.smoothBranchesPaths();
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Initialize branches paths from calculator's commits. |
||||||
|
*/ |
||||||
|
private fromCommits() : BranchesPaths<TNode> { |
||||||
|
const direction = this.isGraphReverse ? -1 : 1 ; |
||||||
|
this.commits.forEach((commit) => { |
||||||
|
let branch = this.branches.get(commit.branch); |
||||||
|
|
||||||
|
let existingBranchPath = this.branchesPaths.get(branch); |
||||||
|
if (!existingBranchPath) { |
||||||
|
let internal = new InternalPaths(); |
||||||
|
commit.parents.forEach((parent) => { |
||||||
|
|
||||||
|
let rowOfParent = this.rows.getRowOf(parent); |
||||||
|
let parentCommit = this.commits[rowOfParent]; |
||||||
|
if (parentCommit.col <= commit.col) { |
||||||
|
// this is a fork
|
||||||
|
let path: Coordinate[] = []; |
||||||
|
path.push({ x: parentCommit.x, y: parentCommit.y }); |
||||||
|
// add the smoothing points towards the first commit of the branch
|
||||||
|
let distance = commit.row - rowOfParent; |
||||||
|
for (let d=0; d<distance; d++) { |
||||||
|
path.push({ x: commit.x, y: parentCommit.y + (1 + d)*this.commitSpacing * direction }); |
||||||
|
} |
||||||
|
internal.forks.push(path); |
||||||
|
} |
||||||
|
}); |
||||||
|
internal.branch.push({ x: commit.x, y: commit.y }); |
||||||
|
this.branchesPaths.set(branch, internal); |
||||||
|
} else { |
||||||
|
if (commit.parents.length == 1) { |
||||||
|
existingBranchPath.branch.push({ x: commit.x, y: commit.y }); |
||||||
|
} else { |
||||||
|
commit.parents.forEach((p) => { |
||||||
|
let rowOfParent = this.rows.getRowOf(p); |
||||||
|
let parentCommit = this.commits[rowOfParent]; |
||||||
|
if (parentCommit.col == commit.col) { |
||||||
|
existingBranchPath.branch.push({ x: commit.x, y: commit.y }); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
// doing the merges
|
||||||
|
if (commit.parents.length > 1) { |
||||||
|
commit.parents.forEach((parent) => { |
||||||
|
let rowOfParent = this.rows.getRowOf(parent); |
||||||
|
let parentCommit = this.commits[rowOfParent]; |
||||||
|
if (parentCommit.col > commit.col) { |
||||||
|
// this is a merge
|
||||||
|
let path: Coordinate[] = []; |
||||||
|
path.push({ x: parentCommit.x, y: parentCommit.y }); |
||||||
|
// add the smoothing points towards the merge commit
|
||||||
|
let distance = commit.row - rowOfParent - 1; |
||||||
|
for (let d=0; d<distance; d++) { |
||||||
|
path.push({ x: parentCommit.x, y: parentCommit.y + (1 + d)*this.commitSpacing * direction}); |
||||||
|
} |
||||||
|
path.push({ x: commit.x, y: commit.y }); |
||||||
|
// adding this path to the internal of the merged branch
|
||||||
|
let mergedBranchPath = this.branchesPaths.get(this.branches.get(parentCommit.branch)); |
||||||
|
mergedBranchPath.merges.push(path); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// const firstParentCommit = this.commits.find(
|
||||||
|
// ({ hash }) => hash === commit.parents[0],
|
||||||
|
// );
|
||||||
|
// if (existingBranchPath) {
|
||||||
|
// path.push(...existingBranchPath);
|
||||||
|
// } else if (firstParentCommit) {
|
||||||
|
// // Make branch path starts from parent branch (parent commit).
|
||||||
|
// path.push({ x: firstParentCommit.x, y: firstParentCommit.y });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.branchesPaths.set(branch, path);
|
||||||
|
}); |
||||||
|
|
||||||
|
const branchesPaths = new Map<Branch<TNode>, Coordinate[][]>(); |
||||||
|
|
||||||
|
this.branchesPaths.forEach((internal, branch) => { |
||||||
|
branchesPaths.set(branch, [ |
||||||
|
...internal.forks, |
||||||
|
internal.branch, |
||||||
|
...internal.merges, |
||||||
|
]); |
||||||
|
}); |
||||||
|
|
||||||
|
return branchesPaths; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Insert merge commits points into `branchesPaths`. |
||||||
|
* |
||||||
|
* @example |
||||||
|
* // Before
|
||||||
|
* [ |
||||||
|
* { x: 0, y: 640 }, |
||||||
|
* { x: 50, y: 560 } |
||||||
|
* ] |
||||||
|
* |
||||||
|
* // After
|
||||||
|
* [ |
||||||
|
* { x: 0, y: 640 }, |
||||||
|
* { x: 50, y: 560 }, |
||||||
|
* { x: 50, y: 560, mergeCommit: true } |
||||||
|
* ] |
||||||
|
*/ |
||||||
|
// private withMergeCommits() {
|
||||||
|
// const mergeCommits = this.commits.filter(
|
||||||
|
// ({ parents }) => parents.length > 1,
|
||||||
|
// );
|
||||||
|
|
||||||
|
// mergeCommits.forEach((mergeCommit) => {
|
||||||
|
|
||||||
|
// let branch = this.branches.get(mergeCommit.branch);
|
||||||
|
|
||||||
|
// const lastPoints = [...(this.branchesPaths.get(branch) || [])];
|
||||||
|
// this.branchesPaths.set(branch, [
|
||||||
|
// ...lastPoints,
|
||||||
|
// { x: mergeCommit.x, y: mergeCommit.y, mergeCommit: true },
|
||||||
|
// ]);
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Smooth all paths by putting points on each row. |
||||||
|
*/ |
||||||
|
// private smoothBranchesPaths(): BranchesPaths<TNode> {
|
||||||
|
// const branchesPaths = new Map<Branch<TNode>, Coordinate[][]>();
|
||||||
|
|
||||||
|
// this.branchesPaths.forEach((points, branch) => {
|
||||||
|
// if (points.length <= 1) {
|
||||||
|
// branchesPaths.set(branch, [points]);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Cut path on each merge commits
|
||||||
|
// // Coordinate[] -> Coordinate[][]
|
||||||
|
|
||||||
|
// points = points.sort((a, b) => (a.y > b.y ? -1 : 1));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// points = points.reverse();
|
||||||
|
|
||||||
|
|
||||||
|
// const paths = points.reduce<Coordinate[][]>(
|
||||||
|
// (mem, point, i) => {
|
||||||
|
// if (point.mergeCommit) {
|
||||||
|
// mem[mem.length - 1].push(pick(point, ["x", "y"]));
|
||||||
|
// let j = i - 1;
|
||||||
|
// let previousPoint = points[j];
|
||||||
|
|
||||||
|
// // Find the last point which is not a merge
|
||||||
|
// while (j >= 0 && previousPoint.mergeCommit) {
|
||||||
|
// j--;
|
||||||
|
// previousPoint = points[j];
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Start a new array with this point
|
||||||
|
// if (j >= 0) {
|
||||||
|
// mem.push([previousPoint]);
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// mem[mem.length - 1].push(point);
|
||||||
|
// }
|
||||||
|
// return mem;
|
||||||
|
// },
|
||||||
|
// [[]],
|
||||||
|
// );
|
||||||
|
|
||||||
|
|
||||||
|
// paths.forEach((path) => path.reverse());
|
||||||
|
|
||||||
|
|
||||||
|
// // Add intermediate points on each sub paths
|
||||||
|
// if (true) {
|
||||||
|
// paths.forEach((subPath) => {
|
||||||
|
// if (subPath.length <= 1) return;
|
||||||
|
// const firstPoint = subPath[0];
|
||||||
|
// const lastPoint = subPath[subPath.length - 1];
|
||||||
|
// const column = subPath[1].x;
|
||||||
|
// const branchSize =
|
||||||
|
// Math.round(
|
||||||
|
// Math.abs(firstPoint.y - lastPoint.y) / this.commitSpacing,
|
||||||
|
// ) - 1;
|
||||||
|
// const branchPoints =
|
||||||
|
// branchSize > 0
|
||||||
|
// ? new Array(branchSize).fill(0).map((_, i) => ({
|
||||||
|
// x: column,
|
||||||
|
// y: subPath[0].y - this.commitSpacing * (i + 1),
|
||||||
|
// }))
|
||||||
|
// : [];
|
||||||
|
// const lastSubPaths = branchesPaths.get(branch) || [];
|
||||||
|
// branchesPaths.set(branch, [
|
||||||
|
// ...lastSubPaths,
|
||||||
|
// [firstPoint, ...branchPoints, lastPoint],
|
||||||
|
// ]);
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// // paths.forEach((subPath) => {
|
||||||
|
// // if (subPath.length <= 1) return;
|
||||||
|
// // const firstPoint = subPath[0];
|
||||||
|
// // const lastPoint = subPath[subPath.length - 1];
|
||||||
|
// // const column = subPath[1].y;
|
||||||
|
// // const branchSize =
|
||||||
|
// // Math.round(
|
||||||
|
// // Math.abs(firstPoint.x - lastPoint.x) / this.commitSpacing,
|
||||||
|
// // ) - 1;
|
||||||
|
// // const branchPoints =
|
||||||
|
// // branchSize > 0
|
||||||
|
// // ? new Array(branchSize).fill(0).map((_, i) => ({
|
||||||
|
// // y: column,
|
||||||
|
// // x: subPath[0].x + this.commitSpacing * (i + 1),
|
||||||
|
// // }))
|
||||||
|
// // : [];
|
||||||
|
// // const lastSubPaths = branchesPaths.get(branch) || [];
|
||||||
|
// // branchesPaths.set(branch, [
|
||||||
|
// // ...lastSubPaths,
|
||||||
|
// // [firstPoint, ...branchPoints, lastPoint],
|
||||||
|
// // ]);
|
||||||
|
// // });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// return branchesPaths;
|
||||||
|
// }
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return a string ready to use in `svg.path.d` from coordinates |
||||||
|
* |
||||||
|
* @param coordinates Collection of coordinates |
||||||
|
*/ |
||||||
|
function toSvgPath( |
||||||
|
coordinates: Coordinate[][], |
||||||
|
isBezier: boolean, |
||||||
|
//isVertical: boolean,
|
||||||
|
): string { |
||||||
|
return coordinates |
||||||
|
.map( |
||||||
|
(path) => |
||||||
|
"M" + |
||||||
|
path |
||||||
|
.map(({ x, y }, i, points) => { |
||||||
|
if ( |
||||||
|
isBezier && |
||||||
|
points.length > 1 && |
||||||
|
(i === 1 || i === points.length - 1) |
||||||
|
) { |
||||||
|
const previous = points[i - 1]; |
||||||
|
//if (isVertical) {
|
||||||
|
const middleY = (previous.y + y) / 2; |
||||||
|
return `C ${previous.x} ${middleY} ${x} ${middleY} ${x} ${y}`; |
||||||
|
// } else {
|
||||||
|
// const middleX = (previous.x + x) / 2;
|
||||||
|
// return `C ${middleX} ${previous.y} ${middleX} ${y} ${x} ${y}`;
|
||||||
|
// }
|
||||||
|
} |
||||||
|
return `L ${x} ${y}`; |
||||||
|
}) |
||||||
|
.join(" ") |
||||||
|
.slice(1), |
||||||
|
) |
||||||
|
.join(" "); |
||||||
|
} |
||||||
@ -0,0 +1,275 @@ |
|||||||
|
import type { CommitStyle } from "./template"; |
||||||
|
import type { Branch } from "./branch"; |
||||||
|
|
||||||
|
export { type CommitRenderOptions, type CommitOptions, Commit }; |
||||||
|
|
||||||
|
interface CommitRenderOptions<TNode> { |
||||||
|
renderDot?: (commit: Commit<TNode>) => TNode; |
||||||
|
renderMessage?: (commit: Commit<TNode>) => TNode; |
||||||
|
renderTooltip?: (commit: Commit<TNode>) => TNode; |
||||||
|
} |
||||||
|
|
||||||
|
interface CommitOptions<TNode> extends CommitRenderOptions<TNode> { |
||||||
|
author: string; |
||||||
|
subject: string; |
||||||
|
style: CommitStyle; |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
body?: string; |
||||||
|
hash?: string; |
||||||
|
parents?: string[]; |
||||||
|
dotText?: string; |
||||||
|
branch?: Branch["name"]; |
||||||
|
onClick?: (commit: Commit<TNode>) => void; |
||||||
|
onMessageClick?: (commit: Commit<TNode>) => void; |
||||||
|
onMouseOver?: (commit: Commit<TNode>) => void; |
||||||
|
onMouseOut?: (commit: Commit<TNode>) => void; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Generate a random hash. |
||||||
|
* |
||||||
|
* @return hex string with 40 chars |
||||||
|
*/ |
||||||
|
const getRandomHash = () => |
||||||
|
( |
||||||
|
Math.random().toString(16).substring(3) + |
||||||
|
Math.random().toString(16).substring(3) + |
||||||
|
Math.random().toString(16).substring(3) + |
||||||
|
Math.random().toString(16).substring(3) |
||||||
|
).substring(0, 40); |
||||||
|
|
||||||
|
class Commit<TNode = SVGElement> { |
||||||
|
|
||||||
|
public branch?: Branch["name"]; |
||||||
|
/** |
||||||
|
* Commit x position |
||||||
|
*/ |
||||||
|
public x = 0; |
||||||
|
/** |
||||||
|
* Commit y position |
||||||
|
*/ |
||||||
|
public y = 0; |
||||||
|
/** |
||||||
|
* Commit hash |
||||||
|
*/ |
||||||
|
public row = 0; |
||||||
|
|
||||||
|
public col = 0; |
||||||
|
|
||||||
|
public hash: string; |
||||||
|
/** |
||||||
|
* Abbreviated commit hash |
||||||
|
*/ |
||||||
|
public hashAbbrev: string; |
||||||
|
/** |
||||||
|
* Parent hashes |
||||||
|
*/ |
||||||
|
public parents: Array<Commit<TNode>["hash"]>; |
||||||
|
/** |
||||||
|
* Abbreviated parent hashed |
||||||
|
*/ |
||||||
|
public parentsAbbrev: Array<Commit<TNode>["hashAbbrev"]>; |
||||||
|
/** |
||||||
|
* Author |
||||||
|
*/ |
||||||
|
public author: { |
||||||
|
/** |
||||||
|
* Author name |
||||||
|
*/ |
||||||
|
name: string; |
||||||
|
/** |
||||||
|
* Author email |
||||||
|
*/ |
||||||
|
email?: string; |
||||||
|
/** |
||||||
|
* Author date |
||||||
|
*/ |
||||||
|
timestamp?: number; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* Committer |
||||||
|
*/ |
||||||
|
public committer: { |
||||||
|
/** |
||||||
|
* Commiter name |
||||||
|
*/ |
||||||
|
name: string; |
||||||
|
/** |
||||||
|
* Commiter email |
||||||
|
*/ |
||||||
|
email?: string; |
||||||
|
/** |
||||||
|
* Commiter date |
||||||
|
*/ |
||||||
|
timestamp?: number; |
||||||
|
}; |
||||||
|
/** |
||||||
|
* Subject |
||||||
|
*/ |
||||||
|
public subject: string; |
||||||
|
/** |
||||||
|
* Body |
||||||
|
*/ |
||||||
|
public body: string; |
||||||
|
/** |
||||||
|
* Message |
||||||
|
*/ |
||||||
|
public get message() { |
||||||
|
let message = ""; |
||||||
|
|
||||||
|
if (this.style.message.displayHash) { |
||||||
|
message += `${this.hashAbbrev} `; |
||||||
|
} |
||||||
|
|
||||||
|
message += this.subject; |
||||||
|
|
||||||
|
if (this.style.message.displayAuthor) { |
||||||
|
message += ` - ${this.author.name} <${this.author.email}>`; |
||||||
|
} |
||||||
|
|
||||||
|
return message; |
||||||
|
} |
||||||
|
/** |
||||||
|
* Style |
||||||
|
*/ |
||||||
|
public style: CommitStyle; |
||||||
|
/** |
||||||
|
* Text inside commit dot |
||||||
|
*/ |
||||||
|
public dotText?: string; |
||||||
|
/** |
||||||
|
* List of branches attached |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* Callback to execute on click. |
||||||
|
*/ |
||||||
|
public onClick: () => void; |
||||||
|
/** |
||||||
|
* Callback to execute on click on the commit message. |
||||||
|
*/ |
||||||
|
public onMessageClick: () => void; |
||||||
|
/** |
||||||
|
* Callback to execute on mouse over. |
||||||
|
*/ |
||||||
|
public onMouseOver: () => void; |
||||||
|
/** |
||||||
|
* Callback to execute on mouse out. |
||||||
|
*/ |
||||||
|
public onMouseOut: () => void; |
||||||
|
/** |
||||||
|
* Custom dot render |
||||||
|
*/ |
||||||
|
public renderDot?: (commit: Commit<TNode>) => TNode; |
||||||
|
/** |
||||||
|
* Custom message render |
||||||
|
*/ |
||||||
|
public renderMessage?: (commit: Commit<TNode>) => TNode; |
||||||
|
/** |
||||||
|
* Custom tooltip render |
||||||
|
*/ |
||||||
|
public renderTooltip?: (commit: Commit<TNode>) => TNode; |
||||||
|
|
||||||
|
constructor(options: CommitOptions<TNode>) { |
||||||
|
// Set author & committer
|
||||||
|
let name = options.author; |
||||||
|
|
||||||
|
this.col = options.x; |
||||||
|
this.row = options.y; |
||||||
|
|
||||||
|
this.author = { name }; |
||||||
|
this.committer = { name }; |
||||||
|
this.branch = options.branch; |
||||||
|
|
||||||
|
// Set commit message
|
||||||
|
this.subject = options.subject; |
||||||
|
this.body = options.body || ""; |
||||||
|
|
||||||
|
// Set commit hash
|
||||||
|
this.hash = options.hash || getRandomHash(); |
||||||
|
this.hashAbbrev = this.hash.substring(0, 7); |
||||||
|
|
||||||
|
// Set parent hash
|
||||||
|
this.parents = options.parents ? options.parents : []; |
||||||
|
this.parentsAbbrev = this.parents.map((commit) => commit.substring(0, 7)); |
||||||
|
|
||||||
|
// Set style
|
||||||
|
this.style = { |
||||||
|
...options.style, |
||||||
|
message: { ...options.style.message }, |
||||||
|
dot: { ...options.style.dot }, |
||||||
|
}; |
||||||
|
|
||||||
|
this.dotText = options.dotText; |
||||||
|
|
||||||
|
// Set callbacks
|
||||||
|
this.onClick = () => (options.onClick ? options.onClick(this) : undefined); |
||||||
|
this.onMessageClick = () => |
||||||
|
options.onMessageClick ? options.onMessageClick(this) : undefined; |
||||||
|
this.onMouseOver = () => |
||||||
|
options.onMouseOver ? options.onMouseOver(this) : undefined; |
||||||
|
this.onMouseOut = () => |
||||||
|
options.onMouseOut ? options.onMouseOut(this) : undefined; |
||||||
|
|
||||||
|
// Set custom renders
|
||||||
|
this.renderDot = options.renderDot; |
||||||
|
this.renderMessage = options.renderMessage; |
||||||
|
this.renderTooltip = options.renderTooltip; |
||||||
|
} |
||||||
|
|
||||||
|
public setPosition({ x, y }: { x: number; y: number }): this { |
||||||
|
this.x = x; |
||||||
|
this.y = y; |
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
public withDefaultColor(color: string): Commit<TNode> { |
||||||
|
const newStyle = { |
||||||
|
...this.style, |
||||||
|
dot: { ...this.style.dot }, |
||||||
|
message: { ...this.style.message }, |
||||||
|
}; |
||||||
|
|
||||||
|
if (!newStyle.color) newStyle.color = color; |
||||||
|
if (!newStyle.dot.color) newStyle.dot.color = color; |
||||||
|
if (!newStyle.message.color) newStyle.message.color = color; |
||||||
|
|
||||||
|
const commit = this.cloneCommit(); |
||||||
|
commit.style = newStyle; |
||||||
|
|
||||||
|
return commit; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Ideally, we want Commit to be a [Value Object](https://martinfowler.com/bliki/ValueObject.html).
|
||||||
|
* We started with a mutable class. So we'll refactor that little by little. |
||||||
|
* This private function is a helper to create a new Commit from existing one. |
||||||
|
*/ |
||||||
|
private cloneCommit() { |
||||||
|
const commit = new Commit({ |
||||||
|
author: `${this.author.name} <${this.author.email}>`, |
||||||
|
subject: this.subject, |
||||||
|
branch: this.branch, |
||||||
|
style: this.style, |
||||||
|
body: this.body, |
||||||
|
y: this.row, |
||||||
|
x: this.col, |
||||||
|
hash: this.hash, |
||||||
|
parents: this.parents, |
||||||
|
dotText: this.dotText, |
||||||
|
onClick: this.onClick, |
||||||
|
onMessageClick: this.onMessageClick, |
||||||
|
onMouseOver: this.onMouseOver, |
||||||
|
onMouseOut: this.onMouseOut, |
||||||
|
renderDot: this.renderDot, |
||||||
|
renderMessage: this.renderMessage, |
||||||
|
renderTooltip: this.renderTooltip, |
||||||
|
}); |
||||||
|
|
||||||
|
commit.x = this.x; |
||||||
|
commit.y = this.y; |
||||||
|
|
||||||
|
return commit; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,229 @@ |
|||||||
|
import type { TemplateOptions } from "./template"; |
||||||
|
import { Commit, type CommitRenderOptions, type CommitOptions } from "./commit"; |
||||||
|
|
||||||
|
import type { GitgraphCore } from "./gitgraph"; |
||||||
|
|
||||||
|
|
||||||
|
export { |
||||||
|
type GitgraphCommitOptions, |
||||||
|
GitgraphUserApi, |
||||||
|
}; |
||||||
|
|
||||||
|
interface GitgraphCommitOptions<TNode> extends CommitRenderOptions<TNode> { |
||||||
|
author?: string; |
||||||
|
subject?: string; |
||||||
|
body?: string; |
||||||
|
hash?: string; |
||||||
|
style?: TemplateOptions["commit"]; |
||||||
|
dotText?: string; |
||||||
|
tag?: string; |
||||||
|
onClick?: (commit: Commit<TNode>) => void; |
||||||
|
onMessageClick?: (commit: Commit<TNode>) => void; |
||||||
|
onMouseOver?: (commit: Commit<TNode>) => void; |
||||||
|
onMouseOut?: (commit: Commit<TNode>) => void; |
||||||
|
} |
||||||
|
|
||||||
|
class GitgraphUserApi<TNode> { |
||||||
|
// tslint:disable:variable-name - Prefix `_` = explicitly private for JS users
|
||||||
|
private _graph: GitgraphCore<TNode>; |
||||||
|
private _onGraphUpdate: () => void; |
||||||
|
// tslint:enable:variable-name
|
||||||
|
|
||||||
|
constructor(graph: GitgraphCore<TNode>, onGraphUpdate: () => void) { |
||||||
|
this._graph = graph; |
||||||
|
this._onGraphUpdate = onGraphUpdate; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Clear everything (as `rm -rf .git && git init`). |
||||||
|
*/ |
||||||
|
public clear(): this { |
||||||
|
this._graph.commits = []; |
||||||
|
this._onGraphUpdate(); |
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
public swimlanes(data: unknown) { |
||||||
|
|
||||||
|
const invalidData = new Error( |
||||||
|
"list of swimlanes is invalid", |
||||||
|
); |
||||||
|
|
||||||
|
if (!Array.isArray(data)) { |
||||||
|
throw invalidData; |
||||||
|
} |
||||||
|
|
||||||
|
const areDataValid = data.every((options) => { |
||||||
|
return ( |
||||||
|
typeof options === "string" || typeof options === "boolean" |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
if (!areDataValid) { |
||||||
|
throw invalidData; |
||||||
|
} |
||||||
|
|
||||||
|
this._graph.swimlanes = data; |
||||||
|
this._graph.last_on_swimlanes = Array.apply(null, Array(data.length)).map(function () {}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
public commit(data: unknown) { |
||||||
|
|
||||||
|
const areDataValid = ( |
||||||
|
typeof data === "object" && |
||||||
|
Array.isArray(data["parents"]) |
||||||
|
); |
||||||
|
|
||||||
|
if (!areDataValid) { |
||||||
|
throw new Error( |
||||||
|
"invalid commit", |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
// let heads: string[];
|
||||||
|
// this._graph.swimlanes.forEach((branch, col) => {
|
||||||
|
// if (branch) {
|
||||||
|
// heads.push(this._graph.last_on_swimlanes[col]);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
let branch; |
||||||
|
let lane; |
||||||
|
if (data["parents"].every((parents) => { |
||||||
|
return this._graph.last_on_swimlanes.includes(parents); |
||||||
|
})) { |
||||||
|
lane = Number.MAX_VALUE; |
||||||
|
data["parents"].forEach((parent) => { |
||||||
|
let new_lane = this._graph.last_on_swimlanes.indexOf(parent); |
||||||
|
if ( new_lane < lane ) { |
||||||
|
lane = new_lane; |
||||||
|
} |
||||||
|
}); |
||||||
|
branch = this._graph.swimlanes[lane]; |
||||||
|
if (!branch) { |
||||||
|
branch = data["hash"]; |
||||||
|
this._graph.swimlanes[lane] = branch; |
||||||
|
} |
||||||
|
this._graph.last_on_swimlanes[lane] = data["hash"]; |
||||||
|
} else { |
||||||
|
branch = data["hash"]; |
||||||
|
// this._graph.swimlanes.some((b, col) => {
|
||||||
|
// console.log("is empty? ",col,!b);
|
||||||
|
// if (!b) {
|
||||||
|
// lane = col;
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// if (!lane) {
|
||||||
|
lane = this._graph.swimlanes.length; |
||||||
|
this._graph.swimlanes.push(branch); |
||||||
|
this._graph.last_on_swimlanes.push(branch); |
||||||
|
// } else {
|
||||||
|
// this._graph.swimlanes[lane] = branch;
|
||||||
|
// this._graph.last_on_swimlanes[lane] = branch;
|
||||||
|
// }
|
||||||
|
} |
||||||
|
|
||||||
|
data["parents"].forEach((parent) => { |
||||||
|
let r = this._graph.rows.getRowOf(parent); |
||||||
|
let c = this._graph.commits[r]; |
||||||
|
let b = c.branch; |
||||||
|
if (branch!=b) { |
||||||
|
this._graph.swimlanes.forEach((bb, col) => { |
||||||
|
if (bb == b) { |
||||||
|
this._graph.swimlanes[col] = undefined; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// if (!this._graph.branches.has(branch)) {
|
||||||
|
// this._graph.createBranch({name:branch});
|
||||||
|
// }
|
||||||
|
|
||||||
|
data["branch"] = branch; |
||||||
|
data["x"] = lane; |
||||||
|
data["y"] = this._graph.commits.length; |
||||||
|
|
||||||
|
let options:CommitOptions<TNode> = { |
||||||
|
x: data["x"], |
||||||
|
y: data["y"], |
||||||
|
...data, |
||||||
|
style: { |
||||||
|
...this._graph.template.commit, |
||||||
|
message: { |
||||||
|
...this._graph.template.commit.message, |
||||||
|
display: this._graph.shouldDisplayCommitMessage, |
||||||
|
}, |
||||||
|
}, |
||||||
|
author: data["author"], |
||||||
|
subject: data["subject"], |
||||||
|
} |
||||||
|
let n = new Commit(options); |
||||||
|
this._graph.commits.push(n); |
||||||
|
|
||||||
|
this._onGraphUpdate(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Import a JSON. |
||||||
|
* |
||||||
|
* Data can't be typed since it comes from a JSON. |
||||||
|
* We validate input format and throw early if something is invalid. |
||||||
|
* |
||||||
|
* @experimental |
||||||
|
* @param data JSON from `git2json` output |
||||||
|
*/ |
||||||
|
public import(data: unknown) { |
||||||
|
const invalidData = new Error( |
||||||
|
"invalid history", |
||||||
|
); |
||||||
|
|
||||||
|
// We manually validate input data instead of using a lib like yup.
|
||||||
|
// => this is to keep bundlesize small.
|
||||||
|
|
||||||
|
if (!Array.isArray(data)) { |
||||||
|
throw invalidData; |
||||||
|
} |
||||||
|
|
||||||
|
const areDataValid = data.every((options) => { |
||||||
|
return ( |
||||||
|
typeof options === "object" |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
if (!areDataValid) { |
||||||
|
throw invalidData; |
||||||
|
} |
||||||
|
|
||||||
|
const commitOptionsList: Array< |
||||||
|
CommitOptions<TNode> & { refs: string[] } |
||||||
|
> = data |
||||||
|
.map((options) => ({ |
||||||
|
...options, |
||||||
|
style: { |
||||||
|
...this._graph.template.commit, |
||||||
|
message: { |
||||||
|
...this._graph.template.commit.message, |
||||||
|
display: this._graph.shouldDisplayCommitMessage, |
||||||
|
}, |
||||||
|
}, |
||||||
|
author: options.author, |
||||||
|
})); |
||||||
|
|
||||||
|
// Use validated `value`.
|
||||||
|
this.clear(); |
||||||
|
|
||||||
|
this._graph.commits = commitOptionsList.map( |
||||||
|
(options) => new Commit(options), |
||||||
|
); |
||||||
|
|
||||||
|
this._onGraphUpdate(); |
||||||
|
|
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
// tslint:enable:variable-name
|
||||||
|
} |
||||||
@ -0,0 +1,375 @@ |
|||||||
|
import { Branch } from "./branch"; |
||||||
|
import type { Commit } from "./commit"; |
||||||
|
import { createGraphRows, GraphRows } from "./graph-rows"; |
||||||
|
//import { BranchesOrder, CompareBranchesOrder } from "./branches-order";
|
||||||
|
import { |
||||||
|
Template, |
||||||
|
type TemplateOptions, |
||||||
|
TemplateName, |
||||||
|
getTemplate, |
||||||
|
} from "./template"; |
||||||
|
import { BranchesPathsCalculator, type BranchesPaths } from "./branches-paths"; |
||||||
|
import { booleanOptionOr, numberOptionOr } from "./utils"; |
||||||
|
import { |
||||||
|
GitgraphUserApi, |
||||||
|
} from "./gitgraph-user-api"; |
||||||
|
|
||||||
|
export { type GitgraphOptions, type RenderedData, GitgraphCore }; |
||||||
|
|
||||||
|
type Color = string; |
||||||
|
|
||||||
|
class BranchesOrder<TNode> { |
||||||
|
private branches: Map<Branch["name"], Branch<TNode>>; |
||||||
|
private colors: Color[]; |
||||||
|
public constructor( |
||||||
|
branches: Map<Branch["name"], Branch<TNode>>, |
||||||
|
colors: Color[], |
||||||
|
) { |
||||||
|
this.colors = colors; |
||||||
|
this.branches = branches; |
||||||
|
} |
||||||
|
/** |
||||||
|
* Return the order of the given branch name. |
||||||
|
* |
||||||
|
* @param branchName Name of the branch |
||||||
|
*/ |
||||||
|
public get(branchName: Branch["name"]): number { |
||||||
|
return this.branches.get(branchName).index; |
||||||
|
} |
||||||
|
|
||||||
|
public getColorOf(branchName: Branch["name"]): Color { |
||||||
|
return this.colors[this.get(branchName) % this.colors.length]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
interface GitgraphOptions { |
||||||
|
template?: TemplateName | Template; |
||||||
|
initCommitOffsetX?: number; |
||||||
|
initCommitOffsetY?: number; |
||||||
|
author?: string; |
||||||
|
branchLabelOnEveryCommit?: boolean; |
||||||
|
commitMessage?: string; |
||||||
|
generateCommitHash?: () => Commit["hash"]; |
||||||
|
} |
||||||
|
|
||||||
|
interface RenderedData<TNode> { |
||||||
|
commits: Array<Commit<TNode>>; |
||||||
|
branchesPaths: BranchesPaths<TNode>; |
||||||
|
commitMessagesX: number; |
||||||
|
} |
||||||
|
|
||||||
|
class GitgraphCore<TNode = SVGElement> { |
||||||
|
public get isHorizontal(): boolean { |
||||||
|
return false; |
||||||
|
} |
||||||
|
// public get isVertical(): boolean {
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
public get isReverse(): boolean { |
||||||
|
return true; |
||||||
|
} |
||||||
|
public get shouldDisplayCommitMessage(): boolean { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
public initCommitOffsetX: number; |
||||||
|
public initCommitOffsetY: number; |
||||||
|
public author: string; |
||||||
|
public commitMessage: string; |
||||||
|
public template: Template; |
||||||
|
public rows: GraphRows<TNode>; |
||||||
|
|
||||||
|
public commits: Array<Commit<TNode>> = []; |
||||||
|
public swimlanes: Array<any> = []; |
||||||
|
public last_on_swimlanes: Array<string> = []; |
||||||
|
public branches: Map<Branch["name"], Branch<TNode>> = new Map(); |
||||||
|
|
||||||
|
private listeners: Array<(data: RenderedData<TNode>) => void> = []; |
||||||
|
private nextTimeoutId: number | null = null; |
||||||
|
|
||||||
|
constructor(options: GitgraphOptions = {}) { |
||||||
|
this.template = getTemplate(options.template); |
||||||
|
|
||||||
|
|
||||||
|
// Set all options with default values
|
||||||
|
this.initCommitOffsetX = numberOptionOr(options.initCommitOffsetX, 0); |
||||||
|
this.initCommitOffsetY = numberOptionOr(options.initCommitOffsetY, 0); |
||||||
|
this.author = options.author || ""; |
||||||
|
this.commitMessage = |
||||||
|
options.commitMessage || ""; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the API to manipulate Gitgraph as a user. |
||||||
|
* Rendering library should give that API to their consumer. |
||||||
|
*/ |
||||||
|
public getUserApi(): GitgraphUserApi<TNode> { |
||||||
|
return new GitgraphUserApi(this, () => this.next()); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add a change listener. |
||||||
|
* It will be called any time the graph have changed (commit, merge…). |
||||||
|
* |
||||||
|
* @param listener A callback to be invoked on every change. |
||||||
|
* @returns A function to remove this change listener. |
||||||
|
*/ |
||||||
|
public subscribe(listener: (data: RenderedData<TNode>) => void): () => void { |
||||||
|
this.listeners.push(listener); |
||||||
|
|
||||||
|
let isSubscribed = true; |
||||||
|
|
||||||
|
return () => { |
||||||
|
if (!isSubscribed) return; |
||||||
|
isSubscribed = false; |
||||||
|
const index = this.listeners.indexOf(listener); |
||||||
|
this.listeners.splice(index, 1); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return all data required for rendering. |
||||||
|
* Rendering libraries will use this to implement their rendering strategy. |
||||||
|
*/ |
||||||
|
public getRenderedData(): RenderedData<TNode> { |
||||||
|
const commits = this.computeRenderedCommits(); |
||||||
|
const branchesPaths = this.computeRenderedBranchesPaths(commits); |
||||||
|
const commitMessagesX = this.computeCommitMessagesX(branchesPaths); |
||||||
|
|
||||||
|
this.computeBranchesColor(branchesPaths); |
||||||
|
|
||||||
|
return { commits, branchesPaths, commitMessagesX }; |
||||||
|
} |
||||||
|
|
||||||
|
public createBranch(args: any): Branch<TNode> { |
||||||
|
|
||||||
|
let options = { |
||||||
|
gitgraph: this, |
||||||
|
name: "", |
||||||
|
parentCommitHash: "", |
||||||
|
style: this.template.branch, |
||||||
|
onGraphUpdate: () => this.next(), |
||||||
|
}; |
||||||
|
|
||||||
|
args.style = args.style || {}; |
||||||
|
options = { |
||||||
|
...options, |
||||||
|
...args, |
||||||
|
style: { |
||||||
|
...options.style, |
||||||
|
...args.style, |
||||||
|
label: { |
||||||
|
...options.style.label, |
||||||
|
...args.style.label, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
const branch = new Branch<TNode>(options); |
||||||
|
branch.index = this.branches.size; |
||||||
|
this.branches.set(branch.name, branch); |
||||||
|
return branch; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return commits with data for rendering. |
||||||
|
*/ |
||||||
|
private computeRenderedCommits(): Array<Commit<TNode>> { |
||||||
|
//const branches = this.getBranches();
|
||||||
|
// // Commits that are not associated to a branch in `branches`
|
||||||
|
// // were in a deleted branch. If the latter was merged beforehand
|
||||||
|
// // they are reachable and are rendered. Others are not
|
||||||
|
// const reachableUnassociatedCommits = (() => {
|
||||||
|
// const unassociatedCommits = new Set(
|
||||||
|
// this.commits.reduce(
|
||||||
|
// (commits: Commit["hash"][], { hash }: { hash: Commit["hash"] }) =>
|
||||||
|
// !branches.has(hash) ? [...commits, hash] : commits,
|
||||||
|
// [],
|
||||||
|
// ),
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const tipsOfMergedBranches = this.commits.reduce(
|
||||||
|
// (tipsOfMergedBranches: Commit<TNode>[], commit: Commit<TNode>) =>
|
||||||
|
// commit.parents.length > 1
|
||||||
|
// ? [
|
||||||
|
// ...tipsOfMergedBranches,
|
||||||
|
// ...commit.parents
|
||||||
|
// .slice(1)
|
||||||
|
// .map(
|
||||||
|
// (parentHash) =>
|
||||||
|
// this.commits.find(({ hash }) => parentHash === hash)!,
|
||||||
|
// ),
|
||||||
|
// ]
|
||||||
|
// : tipsOfMergedBranches,
|
||||||
|
// [],
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const reachableCommits = new Set();
|
||||||
|
|
||||||
|
// tipsOfMergedBranches.forEach((tip) => {
|
||||||
|
// let currentCommit: Commit<TNode> | undefined = tip;
|
||||||
|
|
||||||
|
// while (currentCommit && unassociatedCommits.has(currentCommit.hash)) {
|
||||||
|
// reachableCommits.add(currentCommit.hash);
|
||||||
|
|
||||||
|
// currentCommit =
|
||||||
|
// currentCommit.parents.length > 0
|
||||||
|
// ? this.commits.find(
|
||||||
|
// ({ hash }) => currentCommit!.parents[0] === hash,
|
||||||
|
// )
|
||||||
|
// : undefined;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// return reachableCommits;
|
||||||
|
// })();
|
||||||
|
|
||||||
|
this.commits.forEach( |
||||||
|
({ branch, col, hash }) => { |
||||||
|
if (!this.branches.has(branch)) { |
||||||
|
this.createBranch({name:branch}); |
||||||
|
} |
||||||
|
this.last_on_swimlanes[col] = hash; |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
this.rows = createGraphRows(this.commits); |
||||||
|
const branchesOrder = new BranchesOrder<TNode>( |
||||||
|
this.branches, |
||||||
|
this.template.colors, |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
this.commits |
||||||
|
.map((commit) => this.withPosition(commit)) |
||||||
|
// Fallback commit computed color on branch color.
|
||||||
|
.map((commit) => |
||||||
|
commit.withDefaultColor( |
||||||
|
this.getBranchDefaultColor(branchesOrder, commit.branch), |
||||||
|
), |
||||||
|
) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return the default color for given branch. |
||||||
|
* |
||||||
|
* @param branchesOrder Computed order of branches |
||||||
|
* @param branchName Name of the branch |
||||||
|
*/ |
||||||
|
private getBranchDefaultColor( |
||||||
|
branchesOrder: BranchesOrder<TNode>, |
||||||
|
branchName: Branch["name"], |
||||||
|
): string { |
||||||
|
return branchesOrder.getColorOf(branchName); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return branches paths with all data required for rendering. |
||||||
|
* |
||||||
|
* @param commits List of commits with rendering data computed |
||||||
|
*/ |
||||||
|
private computeRenderedBranchesPaths( |
||||||
|
commits: Array<Commit<TNode>>, |
||||||
|
): BranchesPaths<TNode> { |
||||||
|
return new BranchesPathsCalculator<TNode>( |
||||||
|
commits, |
||||||
|
this.rows, |
||||||
|
this.branches, |
||||||
|
this.isReverse, |
||||||
|
this.template.commit.spacing, |
||||||
|
).execute(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Set branches colors based on branches paths. |
||||||
|
* |
||||||
|
* @param commits List of graph commits |
||||||
|
* @param branchesPaths Branches paths to be rendered |
||||||
|
*/ |
||||||
|
private computeBranchesColor( |
||||||
|
branchesPaths: BranchesPaths<TNode>, |
||||||
|
): void { |
||||||
|
const branchesOrder = new BranchesOrder<TNode>( |
||||||
|
this.branches, |
||||||
|
this.template.colors, |
||||||
|
); |
||||||
|
Array.from(branchesPaths).forEach(([branch]) => { |
||||||
|
branch.computedColor = |
||||||
|
branch.style.color || |
||||||
|
this.getBranchDefaultColor(branchesOrder, branch.name); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Return commit messages X position for rendering. |
||||||
|
* |
||||||
|
* @param branchesPaths Branches paths to be rendered |
||||||
|
*/ |
||||||
|
private computeCommitMessagesX(branchesPaths: BranchesPaths<TNode>): number { |
||||||
|
return this.swimlanes.length * this.template.branch.spacing; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Get all branches from current commits. |
||||||
|
*/ |
||||||
|
// private getBranches(): Map<Commit["hash"], Set<Branch["name"]>> {
|
||||||
|
// const result = new Map<Commit["hash"], Set<Branch["name"]>>();
|
||||||
|
// this.commits.forEach((commit) => {
|
||||||
|
// let r = new Set<Branch["name"]>();
|
||||||
|
// r.add(commit.branch);
|
||||||
|
// result.set(commit.hash, r);
|
||||||
|
// });
|
||||||
|
// return result;
|
||||||
|
// }
|
||||||
|
|
||||||
|
/** |
||||||
|
* Add position to given commit. |
||||||
|
* |
||||||
|
* @param rows Graph rows |
||||||
|
* @param branchesOrder Computed order of branches |
||||||
|
* @param commit Commit to position |
||||||
|
*/ |
||||||
|
private withPosition( |
||||||
|
commit: Commit<TNode>, |
||||||
|
): Commit<TNode> { |
||||||
|
//const row = rows.getRowOf(commit.hash);
|
||||||
|
const maxRow = this.rows.getMaxRow(); |
||||||
|
|
||||||
|
//const order = branchesOrder.get(commit.branch);
|
||||||
|
|
||||||
|
if (this.isReverse) { |
||||||
|
return commit.setPosition({ |
||||||
|
x: this.initCommitOffsetX + this.template.branch.spacing * commit.col, |
||||||
|
y: this.initCommitOffsetY + this.template.commit.spacing * (maxRow - commit.row), |
||||||
|
}); |
||||||
|
} |
||||||
|
else { |
||||||
|
return commit.setPosition({ |
||||||
|
x: this.initCommitOffsetX + this.template.branch.spacing * commit.col, |
||||||
|
y: this.initCommitOffsetY + this.template.commit.spacing * commit.row, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* Tell each listener something new happened. |
||||||
|
* E.g. a rendering library will know it needs to re-render the graph. |
||||||
|
*/ |
||||||
|
private next() { |
||||||
|
if (this.nextTimeoutId) { |
||||||
|
window.clearTimeout(this.nextTimeoutId); |
||||||
|
} |
||||||
|
|
||||||
|
// Use setTimeout() with `0` to debounce call to next tick.
|
||||||
|
this.nextTimeoutId = window.setTimeout(() => { |
||||||
|
this.listeners.forEach((listener) => listener(this.getRenderedData())); |
||||||
|
}, 0); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import type { Commit } from "./commit"; |
||||||
|
|
||||||
|
import { RegularGraphRows } from "./regular-graph-rows"; |
||||||
|
|
||||||
|
export { createGraphRows, RegularGraphRows as GraphRows }; |
||||||
|
|
||||||
|
function createGraphRows<TNode>( |
||||||
|
commits: Array<Commit<TNode>>, |
||||||
|
) { |
||||||
|
return new RegularGraphRows(commits); |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
export { GitgraphCore, type GitgraphOptions, type RenderedData } from "./gitgraph"; |
||||||
|
export { |
||||||
|
GitgraphUserApi, |
||||||
|
type GitgraphCommitOptions, |
||||||
|
} from "./gitgraph-user-api"; |
||||||
|
|
||||||
|
export { Branch } from "./branch"; |
||||||
|
export { Commit } from "./commit"; |
||||||
|
export { MergeStyle, TemplateName, templateExtend } from "./template"; |
||||||
|
export { type BranchesPaths, type Coordinate, toSvgPath } from "./branches-paths"; |
||||||
|
export { arrowSvgPath } from "./utils"; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import type { Commit } from "./commit"; |
||||||
|
|
||||||
|
export class RegularGraphRows<TNode> { |
||||||
|
protected rows = new Map<Commit["hash"], number>(); |
||||||
|
|
||||||
|
private maxRowCache: number | undefined = undefined; |
||||||
|
|
||||||
|
public constructor(commits: Array<Commit<TNode>>) { |
||||||
|
this.computeRowsFromCommits(commits); |
||||||
|
} |
||||||
|
|
||||||
|
public getRowOf(commitHash: Commit["hash"]): number { |
||||||
|
return this.rows.get(commitHash) || 0; |
||||||
|
} |
||||||
|
|
||||||
|
public getMaxRow(): number { |
||||||
|
// if (this.maxRowCache === undefined) {
|
||||||
|
// this.maxRowCache = uniq(Array.from(this.rows.values())).length - 1;
|
||||||
|
// }
|
||||||
|
return this.maxRowCache; |
||||||
|
} |
||||||
|
|
||||||
|
protected computeRowsFromCommits(commits: Array<Commit<TNode>>): void { |
||||||
|
commits.forEach((commit, i) => { |
||||||
|
this.rows.set(commit.hash, i); |
||||||
|
}); |
||||||
|
this.maxRowCache = commits.length - 1; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Creates a duplicate-free version of an array. |
||||||
|
* |
||||||
|
* Don't use lodash's `uniq` as it increased bundlesize a lot for such a |
||||||
|
* simple function. |
||||||
|
* => The way we bundle for browser seems not to work with `lodash-es`. |
||||||
|
* => I didn't to get tree-shaking to work with `lodash` (the CommonJS version). |
||||||
|
* |
||||||
|
* @param array Array of values |
||||||
|
*/ |
||||||
|
// function uniq<T>(array: T[]): T[] {
|
||||||
|
// const set = new Set<T>();
|
||||||
|
// array.forEach((value) => set.add(value));
|
||||||
|
// return Array.from(set);
|
||||||
|
// }
|
||||||
@ -0,0 +1,464 @@ |
|||||||
|
import { booleanOptionOr, numberOptionOr } from "./utils"; |
||||||
|
|
||||||
|
export { |
||||||
|
MergeStyle, |
||||||
|
type ArrowStyle, |
||||||
|
type BranchStyle, |
||||||
|
type CommitDotStyle, |
||||||
|
type CommitMessageStyle, |
||||||
|
type CommitStyleBase, |
||||||
|
type CommitStyle, |
||||||
|
type TemplateOptions, |
||||||
|
Template, |
||||||
|
TemplateName, |
||||||
|
blackArrowTemplate, |
||||||
|
metroTemplate, |
||||||
|
templateExtend, |
||||||
|
getTemplate, |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Branch merge style enum |
||||||
|
*/ |
||||||
|
enum MergeStyle { |
||||||
|
Bezier = "bezier", |
||||||
|
Straight = "straight", |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Arrow style |
||||||
|
*/ |
||||||
|
interface ArrowStyle { |
||||||
|
/** |
||||||
|
* Arrow color |
||||||
|
*/ |
||||||
|
color: string | null; |
||||||
|
/** |
||||||
|
* Arrow size in pixel |
||||||
|
*/ |
||||||
|
size: number | null; |
||||||
|
/** |
||||||
|
* Arrow offset in pixel |
||||||
|
*/ |
||||||
|
offset: number; |
||||||
|
} |
||||||
|
|
||||||
|
type ArrowStyleOptions = Partial<ArrowStyle>; |
||||||
|
|
||||||
|
interface BranchStyle { |
||||||
|
/** |
||||||
|
* Branch color |
||||||
|
*/ |
||||||
|
color?: string; |
||||||
|
/** |
||||||
|
* Branch line width in pixel |
||||||
|
*/ |
||||||
|
lineWidth: number; |
||||||
|
/** |
||||||
|
* Branch merge style |
||||||
|
*/ |
||||||
|
mergeStyle: MergeStyle; |
||||||
|
/** |
||||||
|
* Space between branches |
||||||
|
*/ |
||||||
|
spacing: number; |
||||||
|
/** |
||||||
|
* Branch label style |
||||||
|
*/ |
||||||
|
label: BranchLabelStyleOptions; |
||||||
|
} |
||||||
|
|
||||||
|
type BranchStyleOptions = Partial<BranchStyle>; |
||||||
|
|
||||||
|
interface BranchLabelStyle { |
||||||
|
/** |
||||||
|
* Branch label visibility |
||||||
|
*/ |
||||||
|
display: boolean; |
||||||
|
/** |
||||||
|
* Branch label text color |
||||||
|
*/ |
||||||
|
color: string; |
||||||
|
/** |
||||||
|
* Branch label stroke color |
||||||
|
*/ |
||||||
|
strokeColor: string; |
||||||
|
/** |
||||||
|
* Branch label background color |
||||||
|
*/ |
||||||
|
bgColor: string; |
||||||
|
/** |
||||||
|
* Branch label font |
||||||
|
*/ |
||||||
|
font: string; |
||||||
|
/** |
||||||
|
* Branch label border radius |
||||||
|
*/ |
||||||
|
borderRadius: number; |
||||||
|
} |
||||||
|
|
||||||
|
type BranchLabelStyleOptions = Partial<BranchLabelStyle>; |
||||||
|
|
||||||
|
export interface TagStyle { |
||||||
|
/** |
||||||
|
* Tag text color |
||||||
|
*/ |
||||||
|
color: string; |
||||||
|
/** |
||||||
|
* Tag stroke color |
||||||
|
*/ |
||||||
|
strokeColor?: string; |
||||||
|
/** |
||||||
|
* Tag background color |
||||||
|
*/ |
||||||
|
bgColor?: string; |
||||||
|
/** |
||||||
|
* Tag font |
||||||
|
*/ |
||||||
|
font: string; |
||||||
|
/** |
||||||
|
* Tag border radius |
||||||
|
*/ |
||||||
|
borderRadius: number; |
||||||
|
/** |
||||||
|
* Width of the tag pointer |
||||||
|
*/ |
||||||
|
pointerWidth: number; |
||||||
|
} |
||||||
|
|
||||||
|
type TagStyleOptions = Partial<TagStyle>; |
||||||
|
|
||||||
|
interface CommitDotStyle { |
||||||
|
/** |
||||||
|
* Commit dot color |
||||||
|
*/ |
||||||
|
color?: string; |
||||||
|
/** |
||||||
|
* Commit dot size in pixel |
||||||
|
*/ |
||||||
|
size: number; |
||||||
|
/** |
||||||
|
* Commit dot stroke width |
||||||
|
*/ |
||||||
|
strokeWidth?: number; |
||||||
|
/** |
||||||
|
* Commit dot stroke color |
||||||
|
*/ |
||||||
|
strokeColor?: string; |
||||||
|
/** |
||||||
|
* Commit dot font |
||||||
|
*/ |
||||||
|
font: string; |
||||||
|
} |
||||||
|
|
||||||
|
type CommitDotStyleOptions = Partial<CommitDotStyle>; |
||||||
|
|
||||||
|
interface CommitMessageStyle { |
||||||
|
/** |
||||||
|
* Commit message color |
||||||
|
*/ |
||||||
|
color?: string; |
||||||
|
/** |
||||||
|
* Commit message display policy |
||||||
|
*/ |
||||||
|
display: boolean; |
||||||
|
/** |
||||||
|
* Commit message author display policy |
||||||
|
*/ |
||||||
|
displayAuthor: boolean; |
||||||
|
/** |
||||||
|
* Commit message hash display policy |
||||||
|
*/ |
||||||
|
displayHash: boolean; |
||||||
|
/** |
||||||
|
* Commit message font |
||||||
|
*/ |
||||||
|
font: string; |
||||||
|
} |
||||||
|
|
||||||
|
type CommitMessageStyleOptions = Partial<CommitMessageStyle>; |
||||||
|
|
||||||
|
interface CommitStyleBase { |
||||||
|
/** |
||||||
|
* Spacing between commits |
||||||
|
*/ |
||||||
|
spacing: number; |
||||||
|
/** |
||||||
|
* Commit color (dot & message) |
||||||
|
*/ |
||||||
|
color?: string; |
||||||
|
/** |
||||||
|
* Tooltips policy |
||||||
|
*/ |
||||||
|
hasTooltipInCompactMode: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
interface CommitStyle extends CommitStyleBase { |
||||||
|
/** |
||||||
|
* Commit message style |
||||||
|
*/ |
||||||
|
message: CommitMessageStyle; |
||||||
|
/** |
||||||
|
* Commit dot style |
||||||
|
*/ |
||||||
|
dot: CommitDotStyle; |
||||||
|
} |
||||||
|
|
||||||
|
interface CommitStyleOptions extends Partial<CommitStyleBase> { |
||||||
|
/** |
||||||
|
* Commit message style |
||||||
|
*/ |
||||||
|
message?: CommitMessageStyleOptions; |
||||||
|
/** |
||||||
|
* Commit dot style |
||||||
|
*/ |
||||||
|
dot?: CommitDotStyleOptions; |
||||||
|
} |
||||||
|
|
||||||
|
interface TemplateOptions { |
||||||
|
/** |
||||||
|
* Colors scheme: One color for each column |
||||||
|
*/ |
||||||
|
colors?: string[]; |
||||||
|
/** |
||||||
|
* Arrow style |
||||||
|
*/ |
||||||
|
arrow?: ArrowStyleOptions; |
||||||
|
/** |
||||||
|
* Branch style |
||||||
|
*/ |
||||||
|
branch?: BranchStyleOptions; |
||||||
|
/** |
||||||
|
* Commit style |
||||||
|
*/ |
||||||
|
commit?: CommitStyleOptions; |
||||||
|
/** |
||||||
|
* Tag style |
||||||
|
*/ |
||||||
|
tag?: TagStyleOptions; |
||||||
|
} |
||||||
|
|
||||||
|
export const DEFAULT_FONT = "normal 12pt Calibri"; |
||||||
|
|
||||||
|
/** |
||||||
|
* Gitgraph template |
||||||
|
* |
||||||
|
* Set of design rules for the rendering. |
||||||
|
*/ |
||||||
|
class Template { |
||||||
|
/** |
||||||
|
* Colors scheme: One color for each column |
||||||
|
*/ |
||||||
|
public colors: string[]; |
||||||
|
/** |
||||||
|
* Arrow style |
||||||
|
*/ |
||||||
|
public arrow: ArrowStyle; |
||||||
|
/** |
||||||
|
* Branch style |
||||||
|
*/ |
||||||
|
public branch: BranchStyle; |
||||||
|
/** |
||||||
|
* Commit style |
||||||
|
*/ |
||||||
|
public commit: CommitStyle; |
||||||
|
/** |
||||||
|
* Tag style |
||||||
|
*/ |
||||||
|
public tag: TagStyleOptions; |
||||||
|
|
||||||
|
constructor(options: TemplateOptions) { |
||||||
|
// Options
|
||||||
|
options.branch = options.branch || {}; |
||||||
|
options.branch.label = options.branch.label || {}; |
||||||
|
options.arrow = options.arrow || {}; |
||||||
|
options.commit = options.commit || {}; |
||||||
|
options.commit.dot = options.commit.dot || {}; |
||||||
|
options.commit.message = options.commit.message || {}; |
||||||
|
|
||||||
|
// One color per column
|
||||||
|
this.colors = options.colors || ["#000000"]; |
||||||
|
|
||||||
|
// Branch style
|
||||||
|
this.branch = { |
||||||
|
color: options.branch.color, |
||||||
|
lineWidth: options.branch.lineWidth || 2, |
||||||
|
mergeStyle: options.branch.mergeStyle || MergeStyle.Bezier, |
||||||
|
spacing: numberOptionOr(options.branch.spacing, 20), |
||||||
|
label: { |
||||||
|
display: booleanOptionOr(options.branch.label.display, true), |
||||||
|
color: options.branch.label.color || options.commit.color, |
||||||
|
strokeColor: options.branch.label.strokeColor || options.commit.color, |
||||||
|
bgColor: options.branch.label.bgColor || "white", |
||||||
|
font: |
||||||
|
options.branch.label.font || |
||||||
|
options.commit.message.font || |
||||||
|
DEFAULT_FONT, |
||||||
|
borderRadius: numberOptionOr(options.branch.label.borderRadius, 10), |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
// Arrow style
|
||||||
|
this.arrow = { |
||||||
|
size: options.arrow.size || null, |
||||||
|
color: options.arrow.color || null, |
||||||
|
offset: options.arrow.offset || 2, |
||||||
|
}; |
||||||
|
|
||||||
|
// Commit style
|
||||||
|
this.commit = { |
||||||
|
color: options.commit.color, |
||||||
|
spacing: numberOptionOr(options.commit.spacing, 25), |
||||||
|
hasTooltipInCompactMode: booleanOptionOr( |
||||||
|
options.commit.hasTooltipInCompactMode, |
||||||
|
true, |
||||||
|
), |
||||||
|
dot: { |
||||||
|
color: options.commit.dot.color || options.commit.color, |
||||||
|
size: options.commit.dot.size || 3, |
||||||
|
strokeWidth: numberOptionOr(options.commit.dot.strokeWidth, 0), |
||||||
|
strokeColor: options.commit.dot.strokeColor, |
||||||
|
font: |
||||||
|
options.commit.dot.font || |
||||||
|
options.commit.message.font || |
||||||
|
"normal 10pt Calibri", |
||||||
|
}, |
||||||
|
message: { |
||||||
|
display: booleanOptionOr(options.commit.message.display, true), |
||||||
|
displayAuthor: booleanOptionOr( |
||||||
|
options.commit.message.displayAuthor, |
||||||
|
true, |
||||||
|
), |
||||||
|
displayHash: booleanOptionOr(options.commit.message.displayHash, true), |
||||||
|
color: options.commit.message.color || options.commit.color, |
||||||
|
font: options.commit.message.font || DEFAULT_FONT, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
// Tag style
|
||||||
|
// This one is computed in the Tag instance. It needs Commit style
|
||||||
|
// that is partially computed at runtime (for colors).
|
||||||
|
this.tag = options.tag || {}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Black arrow template |
||||||
|
*/ |
||||||
|
const blackArrowTemplate = new Template({ |
||||||
|
colors: ["#6963FF", "#47E8D4", "#6BDB52", "#E84BA5", "#FFA657"], |
||||||
|
branch: { |
||||||
|
color: "#000000", |
||||||
|
lineWidth: 4, |
||||||
|
spacing: 50, |
||||||
|
mergeStyle: MergeStyle.Straight, |
||||||
|
}, |
||||||
|
commit: { |
||||||
|
spacing: 60, |
||||||
|
dot: { |
||||||
|
size: 16, |
||||||
|
strokeColor: "#000000", |
||||||
|
strokeWidth: 4, |
||||||
|
}, |
||||||
|
message: { |
||||||
|
color: "black", |
||||||
|
}, |
||||||
|
}, |
||||||
|
arrow: { |
||||||
|
size: 16, |
||||||
|
offset: -1.5, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
/** |
||||||
|
* Metro template |
||||||
|
*/ |
||||||
|
const metroTemplate = new Template({ |
||||||
|
colors: ["#4972A5","#00ACC1","#F06292","#D32F2F", "#FF5722", "#AB47BC", "#4CAF50", "#FFB300","#008fb5", "#f1c109","#00796B","#A1887F","#616161"], |
||||||
|
branch: { |
||||||
|
lineWidth: 10, |
||||||
|
spacing: 50, |
||||||
|
}, |
||||||
|
commit: { |
||||||
|
spacing: 80, |
||||||
|
dot: { |
||||||
|
size: 14, |
||||||
|
}, |
||||||
|
message: { |
||||||
|
font: "normal 14pt Arial", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
enum TemplateName { |
||||||
|
Metro = "metro", |
||||||
|
BlackArrow = "blackarrow", |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Extend an existing template with new options. |
||||||
|
* |
||||||
|
* @param selectedTemplate Template to extend |
||||||
|
* @param options Template options |
||||||
|
*/ |
||||||
|
function templateExtend( |
||||||
|
selectedTemplate: TemplateName, |
||||||
|
options: TemplateOptions, |
||||||
|
): Template { |
||||||
|
const template = getTemplate(selectedTemplate); |
||||||
|
|
||||||
|
if (!options.branch) options.branch = {}; |
||||||
|
if (!options.commit) options.commit = {}; |
||||||
|
|
||||||
|
// This is tedious, but it seems acceptable so we don't need lodash
|
||||||
|
// as we want to keep bundlesize small.
|
||||||
|
return { |
||||||
|
colors: options.colors || template.colors, |
||||||
|
arrow: { |
||||||
|
...template.arrow, |
||||||
|
...options.arrow, |
||||||
|
}, |
||||||
|
branch: { |
||||||
|
...template.branch, |
||||||
|
...options.branch, |
||||||
|
label: { |
||||||
|
...template.branch.label, |
||||||
|
...options.branch.label, |
||||||
|
}, |
||||||
|
}, |
||||||
|
commit: { |
||||||
|
...template.commit, |
||||||
|
...options.commit, |
||||||
|
dot: { |
||||||
|
...template.commit.dot, |
||||||
|
...options.commit.dot, |
||||||
|
}, |
||||||
|
message: { |
||||||
|
...template.commit.message, |
||||||
|
...options.commit.message, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tag: { |
||||||
|
...template.tag, |
||||||
|
...options.tag, |
||||||
|
}, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Resolve the template to use regarding given `template` value. |
||||||
|
* |
||||||
|
* @param template Selected template name, or instance. |
||||||
|
*/ |
||||||
|
function getTemplate(template?: TemplateName | Template): Template { |
||||||
|
if (!template) return metroTemplate; |
||||||
|
|
||||||
|
if (typeof template === "string") { |
||||||
|
return { |
||||||
|
[TemplateName.BlackArrow]: blackArrowTemplate, |
||||||
|
[TemplateName.Metro]: metroTemplate, |
||||||
|
}[template]; |
||||||
|
} |
||||||
|
|
||||||
|
return template as Template; |
||||||
|
} |
||||||
@ -0,0 +1,489 @@ |
|||||||
|
import { |
||||||
|
GitgraphCore, |
||||||
|
type GitgraphOptions, |
||||||
|
Commit, |
||||||
|
type GitgraphCommitOptions, |
||||||
|
type RenderedData, |
||||||
|
MergeStyle, |
||||||
|
arrowSvgPath, |
||||||
|
toSvgPath, |
||||||
|
type Coordinate, |
||||||
|
TemplateName, |
||||||
|
templateExtend, |
||||||
|
} from "../gitgraph-core"; |
||||||
|
|
||||||
|
import { |
||||||
|
createSvg, |
||||||
|
createG, |
||||||
|
createText, |
||||||
|
createCircle, |
||||||
|
createUse, |
||||||
|
createPath, |
||||||
|
createClipPath, |
||||||
|
createDefs, |
||||||
|
createForeignObject, |
||||||
|
} from "./svg-elements"; |
||||||
|
|
||||||
|
import { createTooltip, PADDING as TOOLTIP_PADDING } from "./tooltip"; |
||||||
|
|
||||||
|
type CommitOptions = GitgraphCommitOptions<SVGElement>; |
||||||
|
|
||||||
|
export { |
||||||
|
createGitgraph, |
||||||
|
TemplateName, |
||||||
|
templateExtend, |
||||||
|
MergeStyle, |
||||||
|
}; |
||||||
|
|
||||||
|
interface CommitYWithOffsets { |
||||||
|
[key: number]: number; |
||||||
|
} |
||||||
|
|
||||||
|
function createGitgraph( |
||||||
|
graphContainer: HTMLElement, |
||||||
|
options?: GitgraphOptions & { responsive?: boolean }, |
||||||
|
) { |
||||||
|
let commitsElements: { |
||||||
|
[commitHash: string]: { |
||||||
|
message: SVGGElement | null; |
||||||
|
}; |
||||||
|
} = {}; |
||||||
|
// Store a map to replace commits y with the correct value,
|
||||||
|
// including the message offset. Allows custom, flexible message height.
|
||||||
|
// 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<SVGElement>; |
||||||
|
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(Boolean(options && options.responsive)); |
||||||
|
graphContainer.appendChild(svg); |
||||||
|
|
||||||
|
if (options && options.responsive) { |
||||||
|
graphContainer.setAttribute( |
||||||
|
"style", |
||||||
|
"display:inline-block; position: relative; width:100%; padding-bottom:100%; vertical-align:middle; overflow:hidden;", |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
// 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<SVGElement>): 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.
|
||||||
|
lastData = data; |
||||||
|
|
||||||
|
// Store $commits so we can compute offsets from actual height.
|
||||||
|
$commits = renderCommits(commits); |
||||||
|
|
||||||
|
// Reset SVG with new content.
|
||||||
|
svg.innerHTML = ""; |
||||||
|
svg.appendChild( |
||||||
|
createG({ |
||||||
|
// Translate graph left => left-most branch label is not cropped (horizontal)
|
||||||
|
// Translate graph down => top-most commit tooltip is not cropped
|
||||||
|
translate: { x: 0, y: TOOLTIP_PADDING }, |
||||||
|
children: [renderBranchesPaths(branchesPaths), $commits], |
||||||
|
}), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function adaptSvgOnUpdate(adaptToContainer: boolean): void { |
||||||
|
const observer = new MutationObserver(() => { |
||||||
|
if (shouldRecomputeOffsets) { |
||||||
|
shouldRecomputeOffsets = false; |
||||||
|
computeOffsets(); |
||||||
|
render(lastData); |
||||||
|
} else { |
||||||
|
positionCommitsElements(); |
||||||
|
adaptGraphDimensions(adaptToContainer); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
observer.observe(svg, { |
||||||
|
attributes: false, |
||||||
|
// Listen to subtree changes to react when we append the tooltip.
|
||||||
|
subtree: true, |
||||||
|
childList: true, |
||||||
|
}); |
||||||
|
|
||||||
|
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 = commits; |
||||||
|
|
||||||
|
commitYWithOffsets = orientedCommits.reduce<CommitYWithOffsets>( |
||||||
|
(newOffsets, commit) => { |
||||||
|
const commitY = parseInt( |
||||||
|
commit.getAttribute("transform")!.split(",")[1].slice(0, -1), |
||||||
|
10, |
||||||
|
); |
||||||
|
|
||||||
|
const firstForeignObject = commit.getElementsByTagName( |
||||||
|
"foreignObject", |
||||||
|
)[0]; |
||||||
|
const customHtmlMessage = |
||||||
|
firstForeignObject && firstForeignObject.firstElementChild; |
||||||
|
|
||||||
|
newOffsets[commitY] = commitY + totalOffsetY; |
||||||
|
|
||||||
|
// Increment total offset after setting the offset
|
||||||
|
// => offset next commits accordingly.
|
||||||
|
totalOffsetY += getMessageHeight(customHtmlMessage); |
||||||
|
|
||||||
|
return newOffsets; |
||||||
|
}, |
||||||
|
{}, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function positionCommitsElements(): void { |
||||||
|
if (gitgraph.isHorizontal) { |
||||||
|
// Elements don't appear on horizontal mode, yet.
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const padding = 10; |
||||||
|
|
||||||
|
// Ensure commits elements (branch labels, message…) are well positionned.
|
||||||
|
// It can't be done at render time since elements size is dynamic.
|
||||||
|
Object.keys(commitsElements).forEach((commitHash) => { |
||||||
|
const { message } = commitsElements[commitHash]; |
||||||
|
|
||||||
|
// We'll store X position progressively and translate elements.
|
||||||
|
let x = commitMessagesX; |
||||||
|
|
||||||
|
if (message) { |
||||||
|
moveElement(message, x); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function adaptGraphDimensions(adaptToContainer: boolean): void { |
||||||
|
const { height, width } = svg.getBBox(); |
||||||
|
|
||||||
|
// FIXME: In horizontal mode, we mimic @gitgraph/react behavior
|
||||||
|
// => it gets re-rendered after offsets are computed
|
||||||
|
// => it applies paddings twice!
|
||||||
|
//
|
||||||
|
// It works… by chance. Technically, we should compute what would
|
||||||
|
// *actually* go beyond the computed limits of the graph.
|
||||||
|
const horizontalCustomOffset = 50; |
||||||
|
const verticalCustomOffset = 20; |
||||||
|
|
||||||
|
const widthOffset = // Add `TOOLTIP_PADDING` so we don't crop the tooltip text.
|
||||||
|
|
||||||
|
TOOLTIP_PADDING; |
||||||
|
|
||||||
|
const heightOffset =
|
||||||
|
// Add `TOOLTIP_PADDING` so we don't crop tooltip text
|
||||||
|
TOOLTIP_PADDING + verticalCustomOffset; |
||||||
|
|
||||||
|
if (adaptToContainer) { |
||||||
|
svg.setAttribute("preserveAspectRatio", "xMinYMin meet"); |
||||||
|
svg.setAttribute( |
||||||
|
"viewBox", |
||||||
|
`0 0 ${width + widthOffset} ${height + heightOffset}`, |
||||||
|
); |
||||||
|
} else { |
||||||
|
svg.setAttribute("width", (width + widthOffset).toString()); |
||||||
|
svg.setAttribute("height", (height + heightOffset).toString()); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function moveElement(target: Element, x: number): void { |
||||||
|
const transform = target.getAttribute("transform") || "translate(0, 0)"; |
||||||
|
target.setAttribute( |
||||||
|
"transform", |
||||||
|
transform.replace(/translate\(([\d\.]+),/, `translate(${x},`), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function renderBranchesPaths( |
||||||
|
branchesPaths: RenderedData<SVGElement>["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: "none", |
||||||
|
stroke: branch.computedColor || "", |
||||||
|
strokeWidth: branch.style.lineWidth, |
||||||
|
translate: { |
||||||
|
x: offset, |
||||||
|
y: offset, |
||||||
|
}, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
return createG({ children: paths }); |
||||||
|
} |
||||||
|
|
||||||
|
function renderCommits(commits: Commit[]): SVGGElement { |
||||||
|
return createG({ children: commits.map(renderCommit) }); |
||||||
|
|
||||||
|
function renderCommit(commit: Commit): SVGGElement { |
||||||
|
const { x, y } = getWithCommitOffset(commit); |
||||||
|
|
||||||
|
return createG({ |
||||||
|
translate: { x, y }, |
||||||
|
children: [ |
||||||
|
renderDot(commit), |
||||||
|
...renderArrows(commit), |
||||||
|
|
||||||
|
createG({ |
||||||
|
translate: { x: -x, y: 0 }, |
||||||
|
children: [ |
||||||
|
renderMessage(commit), |
||||||
|
], |
||||||
|
}), |
||||||
|
], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function renderArrows(commit: Commit): Array<SVGElement | null> { |
||||||
|
if (!gitgraph.template.arrow.size) { |
||||||
|
return [null]; |
||||||
|
} |
||||||
|
|
||||||
|
const commitRadius = commit.style.dot.size; |
||||||
|
|
||||||
|
return commit.parents.map((parentHash) => { |
||||||
|
const parent = commits.find(({ hash }) => hash === parentHash); |
||||||
|
if (!parent) return null; |
||||||
|
|
||||||
|
// Starting point, relative to commit
|
||||||
|
const origin = { x: commitRadius, y: commitRadius }; |
||||||
|
|
||||||
|
const path = createPath({ |
||||||
|
d: arrowSvgPath(gitgraph, parent, commit), |
||||||
|
fill: gitgraph.template.arrow.color || "", |
||||||
|
}); |
||||||
|
|
||||||
|
return createG({ translate: origin, children: [path] }); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function renderMessage(commit: Commit): SVGElement | null { |
||||||
|
if (!commit.style.message.display) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
let message; |
||||||
|
|
||||||
|
if (commit.renderMessage) { |
||||||
|
message = createG({ children: [] }); |
||||||
|
|
||||||
|
// Add message after observer is set up => react based on body height.
|
||||||
|
// We might refactor it by including `onChildrenUpdate()` to `createG()`.
|
||||||
|
adaptMessageBodyHeight(message); |
||||||
|
message.appendChild(commit.renderMessage(commit)); |
||||||
|
|
||||||
|
setMessageRef(commit, message); |
||||||
|
|
||||||
|
return message; |
||||||
|
} |
||||||
|
|
||||||
|
const text = createText({ |
||||||
|
content: commit.message, |
||||||
|
fill: commit.style.message.color || "", |
||||||
|
font: commit.style.message.font, |
||||||
|
onClick: commit.onMessageClick, |
||||||
|
}); |
||||||
|
|
||||||
|
message = createG({ |
||||||
|
translate: { x: 0, y: commit.style.dot.size }, |
||||||
|
children: [text], |
||||||
|
}); |
||||||
|
|
||||||
|
if (commit.body) { |
||||||
|
const body = createForeignObject({ |
||||||
|
width: 600, |
||||||
|
translate: { x: 10, y: 0 }, |
||||||
|
content: commit.body, |
||||||
|
}); |
||||||
|
|
||||||
|
// Add message after observer is set up => react based on body height.
|
||||||
|
// We might refactor it by including `onChildrenUpdate()` to `createG()`.
|
||||||
|
adaptMessageBodyHeight(message); |
||||||
|
message.appendChild(body); |
||||||
|
} |
||||||
|
|
||||||
|
setMessageRef(commit, message); |
||||||
|
|
||||||
|
return message; |
||||||
|
} |
||||||
|
|
||||||
|
function adaptMessageBodyHeight(message: SVGElement): void { |
||||||
|
const observer = new MutationObserver((mutations) => { |
||||||
|
mutations.forEach(({ target }) => setChildrenForeignObjectHeight(target)); |
||||||
|
}); |
||||||
|
|
||||||
|
observer.observe(message, { |
||||||
|
attributes: false, |
||||||
|
subtree: false, |
||||||
|
childList: true, |
||||||
|
}); |
||||||
|
|
||||||
|
function setChildrenForeignObjectHeight(node: Node): void { |
||||||
|
if (node.nodeName === "foreignObject") { |
||||||
|
// We have to access the first child's parentElement to retrieve
|
||||||
|
// the Element instead of the Node => we can compute dimensions.
|
||||||
|
const foreignObject = node.firstChild && node.firstChild.parentElement; |
||||||
|
if (!foreignObject) return; |
||||||
|
|
||||||
|
// Force the height of the foreignObject (browser issue)
|
||||||
|
foreignObject.setAttribute( |
||||||
|
"height", |
||||||
|
getMessageHeight(foreignObject.firstElementChild).toString(), |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
node.childNodes.forEach(setChildrenForeignObjectHeight); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function renderDot(commit: Commit): SVGElement { |
||||||
|
if (commit.renderDot) { |
||||||
|
return commit.renderDot(commit); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
In order to handle strokes, we need to do some complex stuff here… 😅 |
||||||
|
|
||||||
|
Problem: strokes are drawn inside & outside the circle. |
||||||
|
But we want the stroke to be drawn inside only! |
||||||
|
|
||||||
|
The outside overlaps with other elements, as we expect the dot to have a fixed size. So we want to crop the outside part. |
||||||
|
|
||||||
|
Solution: |
||||||
|
1. Create the circle in a <defs> |
||||||
|
2. Define a clip path that references the circle |
||||||
|
3. Use the clip path, adding the stroke. |
||||||
|
4. Double stroke width as half of it will be clipped (the outside part). |
||||||
|
|
||||||
|
Ref.: https://stackoverflow.com/a/32162431/3911841
|
||||||
|
|
||||||
|
P.S. there is a proposal for a stroke-alignment property, |
||||||
|
but it's still a W3C Draft ¯\_(ツ)_/¯ |
||||||
|
https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment
|
||||||
|
*/ |
||||||
|
const circleId = commit.hash; |
||||||
|
const circle = createCircle({ |
||||||
|
id: circleId, |
||||||
|
radius: commit.style.dot.size, |
||||||
|
fill: commit.style.dot.color || "", |
||||||
|
}); |
||||||
|
|
||||||
|
const clipPathId = `clip-${commit.hash}`; |
||||||
|
const circleClipPath = createClipPath(); |
||||||
|
circleClipPath.setAttribute("id", clipPathId); |
||||||
|
circleClipPath.appendChild(createUse(circleId)); |
||||||
|
|
||||||
|
const useCirclePath = createUse(circleId); |
||||||
|
useCirclePath.setAttribute("clip-path", `url(#${clipPathId})`); |
||||||
|
useCirclePath.setAttribute("stroke", commit.style.dot.strokeColor || ""); |
||||||
|
const strokeWidth = commit.style.dot.strokeWidth |
||||||
|
? commit.style.dot.strokeWidth * 2 |
||||||
|
: 0; |
||||||
|
useCirclePath.setAttribute("stroke-width", strokeWidth.toString()); |
||||||
|
|
||||||
|
const dotText = commit.dotText |
||||||
|
? createText({ |
||||||
|
content: commit.dotText, |
||||||
|
font: commit.style.dot.font, |
||||||
|
anchor: "middle", |
||||||
|
translate: { x: commit.style.dot.size, y: commit.style.dot.size }, |
||||||
|
}) |
||||||
|
: null; |
||||||
|
|
||||||
|
return createG({ |
||||||
|
onClick: commit.onClick, |
||||||
|
onMouseOver: () => { |
||||||
|
appendTooltipToGraph(commit); |
||||||
|
commit.onMouseOver(); |
||||||
|
}, |
||||||
|
onMouseOut: () => { |
||||||
|
if ($tooltip) $tooltip.remove(); |
||||||
|
commit.onMouseOut(); |
||||||
|
}, |
||||||
|
children: [createDefs([circle, circleClipPath]), useCirclePath, dotText], |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function appendTooltipToGraph(commit: Commit): void { |
||||||
|
if (!svg.firstChild) return; |
||||||
|
|
||||||
|
const tooltip = commit.renderTooltip |
||||||
|
? commit.renderTooltip(commit) |
||||||
|
: createTooltip(commit); |
||||||
|
|
||||||
|
$tooltip = createG({ |
||||||
|
translate: getWithCommitOffset(commit), |
||||||
|
children: [tooltip], |
||||||
|
}); |
||||||
|
|
||||||
|
svg.firstChild.appendChild($tooltip); |
||||||
|
} |
||||||
|
|
||||||
|
function getWithCommitOffset({ x, y }: Coordinate): Coordinate { |
||||||
|
return { x, y: commitYWithOffsets[y] || y }; |
||||||
|
} |
||||||
|
|
||||||
|
function setMessageRef(commit: Commit, message: SVGGElement | null): void { |
||||||
|
if (!commitsElements[commit.hashAbbrev]) { |
||||||
|
initCommitElements(commit); |
||||||
|
} |
||||||
|
|
||||||
|
commitsElements[commit.hashAbbrev].message = message; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function initCommitElements(commit: Commit): void { |
||||||
|
commitsElements[commit.hashAbbrev] = { |
||||||
|
message: null, |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getMessageHeight(message: Element | null): number { |
||||||
|
let messageHeight = 0; |
||||||
|
|
||||||
|
if (message) { |
||||||
|
const height = message.getBoundingClientRect().height; |
||||||
|
const marginTopInPx = window.getComputedStyle(message).marginTop || "0px"; |
||||||
|
const marginTop = parseInt(marginTopInPx.replace("px", ""), 10); |
||||||
|
|
||||||
|
messageHeight = height + marginTop; |
||||||
|
} |
||||||
|
|
||||||
|
return messageHeight; |
||||||
|
} |
||||||
@ -0,0 +1,274 @@ |
|||||||
|
export { |
||||||
|
createSvg, |
||||||
|
createG, |
||||||
|
createText, |
||||||
|
createCircle, |
||||||
|
createRect, |
||||||
|
createPath, |
||||||
|
createUse, |
||||||
|
createClipPath, |
||||||
|
createDefs, |
||||||
|
createForeignObject, |
||||||
|
}; |
||||||
|
|
||||||
|
const SVG_NAMESPACE = "http://www.w3.org/2000/svg"; |
||||||
|
|
||||||
|
interface SVGOptions { |
||||||
|
viewBox?: string; |
||||||
|
height?: number; |
||||||
|
width?: number; |
||||||
|
children?: SVGElement[]; |
||||||
|
} |
||||||
|
|
||||||
|
function createSvg(options?: SVGOptions): SVGSVGElement { |
||||||
|
const svg = document.createElementNS(SVG_NAMESPACE, "svg"); |
||||||
|
if (!options) return svg; |
||||||
|
|
||||||
|
if (options.children) { |
||||||
|
options.children.forEach((child) => svg.appendChild(child)); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.viewBox) { |
||||||
|
svg.setAttribute("viewBox", options.viewBox); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.height) { |
||||||
|
svg.setAttribute("height", options.height.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.width) { |
||||||
|
svg.setAttribute("width", options.width.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
return svg; |
||||||
|
} |
||||||
|
|
||||||
|
interface GOptions { |
||||||
|
children: Array<SVGElement | null>; |
||||||
|
translate?: { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
}; |
||||||
|
fill?: string; |
||||||
|
stroke?: string; |
||||||
|
strokeWidth?: number; |
||||||
|
onClick?: () => void; |
||||||
|
onMouseOver?: () => void; |
||||||
|
onMouseOut?: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
function createG(options: GOptions): SVGGElement { |
||||||
|
const g = document.createElementNS(SVG_NAMESPACE, "g"); |
||||||
|
options.children.forEach((child) => child && g.appendChild(child)); |
||||||
|
|
||||||
|
if (options.translate) { |
||||||
|
g.setAttribute( |
||||||
|
"transform", |
||||||
|
`translate(${options.translate.x}, ${options.translate.y})`, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.fill) { |
||||||
|
g.setAttribute("fill", options.fill); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.stroke) { |
||||||
|
g.setAttribute("stroke", options.stroke); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.strokeWidth) { |
||||||
|
g.setAttribute("stroke-width", options.strokeWidth.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.onClick) { |
||||||
|
g.addEventListener("click", options.onClick); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.onMouseOver) { |
||||||
|
g.addEventListener("mouseover", options.onMouseOver); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.onMouseOut) { |
||||||
|
g.addEventListener("mouseout", options.onMouseOut); |
||||||
|
} |
||||||
|
|
||||||
|
return g; |
||||||
|
} |
||||||
|
|
||||||
|
interface TextOptions { |
||||||
|
content: string; |
||||||
|
fill?: string; |
||||||
|
font?: string; |
||||||
|
anchor?: "start" | "middle" | "end"; |
||||||
|
translate?: { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
}; |
||||||
|
onClick?: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
function createText(options: TextOptions): SVGTextElement { |
||||||
|
const text = document.createElementNS(SVG_NAMESPACE, "text"); |
||||||
|
text.setAttribute("alignment-baseline", "central"); |
||||||
|
text.setAttribute("dominant-baseline", "central"); |
||||||
|
text.textContent = options.content; |
||||||
|
|
||||||
|
if (options.fill) { |
||||||
|
text.setAttribute("fill", options.fill); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.font) { |
||||||
|
text.setAttribute("style", `font: ${options.font}`); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.anchor) { |
||||||
|
text.setAttribute("text-anchor", options.anchor); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.translate) { |
||||||
|
text.setAttribute("x", options.translate.x.toString()); |
||||||
|
text.setAttribute("y", options.translate.y.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.onClick) { |
||||||
|
text.addEventListener("click", options.onClick); |
||||||
|
} |
||||||
|
|
||||||
|
return text; |
||||||
|
} |
||||||
|
|
||||||
|
interface CircleOptions { |
||||||
|
radius: number; |
||||||
|
id?: string; |
||||||
|
fill?: string; |
||||||
|
} |
||||||
|
|
||||||
|
function createCircle(options: CircleOptions): SVGCircleElement { |
||||||
|
const circle = document.createElementNS(SVG_NAMESPACE, "circle"); |
||||||
|
circle.setAttribute("cx", options.radius.toString()); |
||||||
|
circle.setAttribute("cy", options.radius.toString()); |
||||||
|
circle.setAttribute("r", options.radius.toString()); |
||||||
|
|
||||||
|
if (options.id) { |
||||||
|
circle.setAttribute("id", options.id); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.fill) { |
||||||
|
circle.setAttribute("fill", options.fill); |
||||||
|
} |
||||||
|
|
||||||
|
return circle; |
||||||
|
} |
||||||
|
|
||||||
|
interface RectOptions { |
||||||
|
width: number; |
||||||
|
height: number; |
||||||
|
borderRadius?: number; |
||||||
|
fill?: string; |
||||||
|
stroke?: string; |
||||||
|
} |
||||||
|
|
||||||
|
function createRect(options: RectOptions): SVGRectElement { |
||||||
|
const rect = document.createElementNS(SVG_NAMESPACE, "rect"); |
||||||
|
rect.setAttribute("width", options.width.toString()); |
||||||
|
rect.setAttribute("height", options.height.toString()); |
||||||
|
|
||||||
|
if (options.borderRadius) { |
||||||
|
rect.setAttribute("rx", options.borderRadius.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.fill) { |
||||||
|
rect.setAttribute("fill", options.fill || "none"); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.stroke) { |
||||||
|
rect.setAttribute("stroke", options.stroke); |
||||||
|
} |
||||||
|
|
||||||
|
return rect; |
||||||
|
} |
||||||
|
|
||||||
|
interface PathOptions { |
||||||
|
d: string; |
||||||
|
fill?: string; |
||||||
|
stroke?: string; |
||||||
|
strokeWidth?: number; |
||||||
|
translate?: { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function createPath(options: PathOptions): SVGPathElement { |
||||||
|
const path = document.createElementNS(SVG_NAMESPACE, "path"); |
||||||
|
path.setAttribute("d", options.d); |
||||||
|
|
||||||
|
if (options.fill) { |
||||||
|
path.setAttribute("fill", options.fill); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.stroke) { |
||||||
|
path.setAttribute("stroke", options.stroke); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.strokeWidth) { |
||||||
|
path.setAttribute("stroke-width", options.strokeWidth.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
if (options.translate) { |
||||||
|
path.setAttribute( |
||||||
|
"transform", |
||||||
|
`translate(${options.translate.x}, ${options.translate.y})`, |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return path; |
||||||
|
} |
||||||
|
|
||||||
|
function createUse(href: string): SVGUseElement { |
||||||
|
const use = document.createElementNS(SVG_NAMESPACE, "use"); |
||||||
|
use.setAttribute("href", `#${href}`); |
||||||
|
// xlink:href is deprecated in SVG2, but we keep it for retro-compatibility
|
||||||
|
// => https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use#Browser_compatibility
|
||||||
|
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${href}`); |
||||||
|
|
||||||
|
return use; |
||||||
|
} |
||||||
|
|
||||||
|
function createClipPath(): SVGClipPathElement { |
||||||
|
return document.createElementNS(SVG_NAMESPACE, "clipPath"); |
||||||
|
} |
||||||
|
|
||||||
|
function createDefs(children: SVGElement[]): SVGDefsElement { |
||||||
|
const defs = document.createElementNS(SVG_NAMESPACE, "defs"); |
||||||
|
children.forEach((child) => defs.appendChild(child)); |
||||||
|
|
||||||
|
return defs; |
||||||
|
} |
||||||
|
|
||||||
|
interface ForeignObjectOptions { |
||||||
|
content: string; |
||||||
|
width: number; |
||||||
|
translate?: { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function createForeignObject( |
||||||
|
options: ForeignObjectOptions, |
||||||
|
): SVGForeignObjectElement { |
||||||
|
const result = document.createElementNS(SVG_NAMESPACE, "foreignObject"); |
||||||
|
result.setAttribute("width", options.width.toString()); |
||||||
|
|
||||||
|
if (options.translate) { |
||||||
|
result.setAttribute("x", options.translate.x.toString()); |
||||||
|
result.setAttribute("y", options.translate.y.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
const p = document.createElement("p"); |
||||||
|
p.textContent = options.content; |
||||||
|
result.appendChild(p); |
||||||
|
|
||||||
|
return result; |
||||||
|
} |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
import type { Commit } from "../gitgraph-core"; |
||||||
|
|
||||||
|
import { createG, createPath, createText } from "./svg-elements"; |
||||||
|
|
||||||
|
export { createTooltip, PADDING }; |
||||||
|
|
||||||
|
const PADDING = 10; |
||||||
|
const OFFSET = 10; |
||||||
|
|
||||||
|
function createTooltip(commit: Commit): SVGElement { |
||||||
|
const path = createPath({ d: "", fill: "#EEE" }); |
||||||
|
const text = createText({ |
||||||
|
translate: { x: OFFSET + PADDING, y: 0 }, |
||||||
|
content: `${commit.hashAbbrev} - ${commit.subject}`, |
||||||
|
fill: "#333", |
||||||
|
}); |
||||||
|
|
||||||
|
const commitSize = commit.style.dot.size * 2; |
||||||
|
const tooltip = createG({ |
||||||
|
translate: { x: commitSize, y: commitSize / 2 }, |
||||||
|
children: [path], |
||||||
|
}); |
||||||
|
|
||||||
|
const observer = new MutationObserver(() => { |
||||||
|
const { width } = text.getBBox(); |
||||||
|
|
||||||
|
const radius = 5; |
||||||
|
const boxHeight = 50; |
||||||
|
const boxWidth = OFFSET + width + 2 * PADDING; |
||||||
|
|
||||||
|
const pathD = [ |
||||||
|
"M 0,0", |
||||||
|
`L ${OFFSET},${OFFSET}`, |
||||||
|
`V ${boxHeight / 2 - radius}`, |
||||||
|
`Q ${OFFSET},${boxHeight / 2} ${OFFSET + radius},${boxHeight / 2}`, |
||||||
|
`H ${boxWidth - radius}`, |
||||||
|
`Q ${boxWidth},${boxHeight / 2} ${boxWidth},${boxHeight / 2 - radius}`, |
||||||
|
`V -${boxHeight / 2 - radius}`, |
||||||
|
`Q ${boxWidth},-${boxHeight / 2} ${boxWidth - radius},-${boxHeight / 2}`, |
||||||
|
`H ${OFFSET + radius}`, |
||||||
|
`Q ${OFFSET},-${boxHeight / 2} ${OFFSET},-${boxHeight / 2 - radius}`, |
||||||
|
`V -${OFFSET}`, |
||||||
|
"z", |
||||||
|
].join(" "); |
||||||
|
|
||||||
|
// Ideally, it would be great to refactor these behavior into SVG elements.
|
||||||
|
// rect.setAttribute("width", boxWidth.toString());
|
||||||
|
path.setAttribute("d", pathD.toString()); |
||||||
|
}); |
||||||
|
|
||||||
|
observer.observe(tooltip, { |
||||||
|
attributes: false, |
||||||
|
subtree: false, |
||||||
|
childList: true, |
||||||
|
}); |
||||||
|
|
||||||
|
tooltip.appendChild(text); |
||||||
|
|
||||||
|
return tooltip; |
||||||
|
} |
||||||
Loading…
Reference in new issue