mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-27 11:19:38 +02:00
Merge remote-tracking branch 'origin/develop' into bug/4358_suppress_error_rendering
I ran `pnpm run --filter mermaid docs:build` to fix merge conflicts in docs/config/setup/modules/mermaidAPI.md
This commit is contained in:
Alois Klink
@@ -26,18 +26,18 @@
|
||||
"clean": "rimraf dist",
|
||||
"dev": "pnpm -w dev",
|
||||
"docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
|
||||
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
|
||||
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
|
||||
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
||||
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
|
||||
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
|
||||
"docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
|
||||
"docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
|
||||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
|
||||
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
|
||||
"docs:release-version": "ts-node-esm scripts/update-release-version.mts",
|
||||
"docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify",
|
||||
"types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
|
||||
"types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
|
||||
"docs:release-version": "tsx scripts/update-release-version.mts",
|
||||
"docs:verify-version": "tsx scripts/update-release-version.mts --verify",
|
||||
"types:build-config": "tsx scripts/create-types-from-json-schema.mts",
|
||||
"types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
|
||||
"checkCircle": "npx madge --circular ./src",
|
||||
"release": "pnpm build",
|
||||
"prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
|
||||
|
||||
@@ -1417,6 +1417,14 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
|
||||
* Margin top for the text over the diagram
|
||||
*/
|
||||
titleTopMargin?: number;
|
||||
/**
|
||||
* Defines a top/bottom margin for subgraph titles
|
||||
*
|
||||
*/
|
||||
subGraphTitleMargin?: {
|
||||
top?: number;
|
||||
bottom?: number;
|
||||
};
|
||||
arrowMarkerAbsolute?: boolean;
|
||||
/**
|
||||
* The amount of padding around the diagram as a whole so that embedded
|
||||
|
||||
@@ -5,9 +5,11 @@ import { createText } from '../rendering-util/createText.js';
|
||||
import { select } from 'd3';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
|
||||
const rect = (parent, node) => {
|
||||
log.info('Creating subgraph rect for ', node.id, node);
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent
|
||||
@@ -18,7 +20,7 @@ const rect = (parent, node) => {
|
||||
// add the rect
|
||||
const rect = shapeSvg.insert('rect', ':first-child');
|
||||
|
||||
const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
||||
const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
|
||||
|
||||
// Create the label and insert it after the rect
|
||||
const label = shapeSvg.insert('g').attr('class', 'cluster-label');
|
||||
@@ -34,7 +36,7 @@ const rect = (parent, node) => {
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
@@ -63,17 +65,18 @@ const rect = (parent, node) => {
|
||||
.attr('width', width)
|
||||
.attr('height', node.height + padding);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (useHtmlLabels) {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
|
||||
`translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
} else {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
|
||||
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
}
|
||||
// Center the label
|
||||
@@ -127,6 +130,8 @@ const noteGroup = (parent, node) => {
|
||||
return shapeSvg;
|
||||
};
|
||||
const roundedWithTitle = (parent, node) => {
|
||||
const siteConfig = getConfig();
|
||||
|
||||
// Add outer g element
|
||||
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
||||
|
||||
@@ -143,7 +148,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
if (evaluate(getConfig().flowchart.htmlLabels)) {
|
||||
if (evaluate(siteConfig.flowchart.htmlLabels)) {
|
||||
const div = text.children[0];
|
||||
const dv = select(text);
|
||||
bbox = div.getBoundingClientRect();
|
||||
@@ -175,6 +180,7 @@ const roundedWithTitle = (parent, node) => {
|
||||
.attr('width', width + padding)
|
||||
.attr('height', node.height + padding - bbox.height - 3);
|
||||
|
||||
const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
// Center the label
|
||||
label.attr(
|
||||
'transform',
|
||||
@@ -184,7 +190,8 @@ const roundedWithTitle = (parent, node) => {
|
||||
(node.y -
|
||||
node.height / 2 -
|
||||
node.padding / 3 +
|
||||
(evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
|
||||
(evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
|
||||
subGraphTitleTopMargin +
|
||||
')'
|
||||
);
|
||||
|
||||
|
||||
79
packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
Normal file
79
packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import type { Mocked } from 'vitest';
|
||||
import type { SVG } from '../diagram-api/types.js';
|
||||
import { addEdgeMarkers } from './edgeMarker.js';
|
||||
|
||||
describe('addEdgeMarker', () => {
|
||||
const svgPath = {
|
||||
attr: vitest.fn(),
|
||||
} as unknown as Mocked<SVG>;
|
||||
const url = 'http://example.com';
|
||||
const id = 'test';
|
||||
const diagramType = 'test';
|
||||
|
||||
beforeEach(() => {
|
||||
svgPath.attr.mockReset();
|
||||
});
|
||||
|
||||
it('should add markers for arrow_cross:arrow_point', () => {
|
||||
const arrowTypeStart = 'arrow_cross';
|
||||
const arrowTypeEnd = 'arrow_point';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-crossStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-pointEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for aggregation:arrow_point', () => {
|
||||
const arrowTypeStart = 'aggregation';
|
||||
const arrowTypeEnd = 'arrow_point';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-aggregationStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-pointEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for arrow_point:aggregation', () => {
|
||||
const arrowTypeStart = 'arrow_point';
|
||||
const arrowTypeEnd = 'aggregation';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-pointStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-aggregationEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should add markers for aggregation:composition', () => {
|
||||
const arrowTypeStart = 'aggregation';
|
||||
const arrowTypeEnd = 'composition';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-start',
|
||||
`url(${url}#${id}_${diagramType}-aggregationStart)`
|
||||
);
|
||||
expect(svgPath.attr).toHaveBeenCalledWith(
|
||||
'marker-end',
|
||||
`url(${url}#${id}_${diagramType}-compositionEnd)`
|
||||
);
|
||||
});
|
||||
|
||||
it('should not add invalid markers', () => {
|
||||
const arrowTypeStart = 'this is an invalid marker';
|
||||
const arrowTypeEnd = ') url(https://my-malicious-site.example)';
|
||||
addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
|
||||
expect(svgPath.attr).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
57
packages/mermaid/src/dagre-wrapper/edgeMarker.ts
Normal file
57
packages/mermaid/src/dagre-wrapper/edgeMarker.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import type { SVG } from '../diagram-api/types.js';
|
||||
import { log } from '../logger.js';
|
||||
import type { EdgeData } from '../types.js';
|
||||
/**
|
||||
* Adds SVG markers to a path element based on the arrow types specified in the edge.
|
||||
*
|
||||
* @param svgPath - The SVG path element to add markers to.
|
||||
* @param edge - The edge data object containing the arrow types.
|
||||
* @param url - The URL of the SVG marker definitions.
|
||||
* @param id - The ID prefix for the SVG marker definitions.
|
||||
* @param diagramType - The type of diagram being rendered.
|
||||
*/
|
||||
export const addEdgeMarkers = (
|
||||
svgPath: SVG,
|
||||
edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,
|
||||
url: string,
|
||||
id: string,
|
||||
diagramType: string
|
||||
) => {
|
||||
if (edge.arrowTypeStart) {
|
||||
addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType);
|
||||
}
|
||||
if (edge.arrowTypeEnd) {
|
||||
addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType);
|
||||
}
|
||||
};
|
||||
|
||||
const arrowTypesMap = {
|
||||
arrow_cross: 'cross',
|
||||
arrow_point: 'point',
|
||||
arrow_barb: 'barb',
|
||||
arrow_circle: 'circle',
|
||||
aggregation: 'aggregation',
|
||||
extension: 'extension',
|
||||
composition: 'composition',
|
||||
dependency: 'dependency',
|
||||
lollipop: 'lollipop',
|
||||
} as const;
|
||||
|
||||
const addEdgeMarker = (
|
||||
svgPath: SVG,
|
||||
position: 'start' | 'end',
|
||||
arrowType: string,
|
||||
url: string,
|
||||
id: string,
|
||||
diagramType: string
|
||||
) => {
|
||||
const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
|
||||
|
||||
if (!endMarkerType) {
|
||||
log.warn(`Unknown arrow type: ${arrowType}`);
|
||||
return; // unknown arrow type, ignore
|
||||
}
|
||||
|
||||
const suffix = position === 'start' ? 'Start' : 'End';
|
||||
svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
|
||||
};
|
||||
@@ -6,6 +6,8 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
import utils from '../utils.js';
|
||||
import { evaluate } from '../diagrams/common/common.js';
|
||||
import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { addEdgeMarkers } from './edgeMarker.js';
|
||||
|
||||
let edgeLabels = {};
|
||||
let terminalLabels = {};
|
||||
@@ -135,6 +137,8 @@ function setTerminalWidth(fo, value) {
|
||||
export const positionEdgeLabel = (edge, paths) => {
|
||||
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
|
||||
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
const siteConfig = getConfig();
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
if (edge.label) {
|
||||
const el = edgeLabels[edge.id];
|
||||
let x = edge.x;
|
||||
@@ -158,7 +162,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
y = pos.y;
|
||||
}
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
|
||||
}
|
||||
|
||||
//let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
||||
@@ -172,7 +176,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.startLabelRight) {
|
||||
const el = terminalLabels[edge.id].startRight;
|
||||
@@ -188,7 +192,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.endLabelLeft) {
|
||||
const el = terminalLabels[edge.id].endLeft;
|
||||
@@ -200,7 +204,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
if (edge.endLabelRight) {
|
||||
const el = terminalLabels[edge.id].endRight;
|
||||
@@ -212,7 +216,7 @@ export const positionEdgeLabel = (edge, paths) => {
|
||||
x = pos.x;
|
||||
y = pos.y;
|
||||
}
|
||||
el.attr('transform', 'translate(' + x + ', ' + y + ')');
|
||||
el.attr('transform', `translate(${x}, ${y})`);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -506,108 +510,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
|
||||
log.info('arrowTypeStart', edge.arrowTypeStart);
|
||||
log.info('arrowTypeEnd', edge.arrowTypeEnd);
|
||||
|
||||
switch (edge.arrowTypeStart) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (edge.arrowTypeEnd) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
addEdgeMarkers(svgPath, edge, url, id, diagramType);
|
||||
|
||||
let paths = {};
|
||||
if (pointsHasChanged) {
|
||||
paths.updatedPath = points;
|
||||
|
||||
@@ -13,8 +13,10 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
|
||||
import { insertCluster, clear as clearClusters } from './clusters.js';
|
||||
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
|
||||
import { log } from '../logger.js';
|
||||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
|
||||
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
@@ -52,7 +54,14 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
if (node && node.clusterNode) {
|
||||
// const children = graph.children(v);
|
||||
log.info('Cluster identified', v, node.width, graph.node(v));
|
||||
const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
|
||||
const o = await recursiveRender(
|
||||
nodes,
|
||||
node.graph,
|
||||
diagramtype,
|
||||
id,
|
||||
graph.node(v),
|
||||
siteConfig
|
||||
);
|
||||
const newEl = o.elem;
|
||||
updateNodeBounds(node, newEl);
|
||||
node.diff = o.diff || 0;
|
||||
@@ -101,6 +110,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
log.info('Graph after layout:', graphlibJson.write(graph));
|
||||
// Move the nodes to the correct place
|
||||
let diff = 0;
|
||||
const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
||||
sortNodesByHierarchy(graph).forEach(function (v) {
|
||||
const node = graph.node(v);
|
||||
log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
|
||||
@@ -114,16 +124,18 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
);
|
||||
if (node && node.clusterNode) {
|
||||
// clusterDb[node.id].node = node;
|
||||
|
||||
node.y += subGraphTitleTotalMargin;
|
||||
positionNode(node);
|
||||
} else {
|
||||
// Non cluster node
|
||||
if (graph.children(v).length > 0) {
|
||||
// A cluster in the non-recursive way
|
||||
// positionCluster(node);
|
||||
node.height += subGraphTitleTotalMargin;
|
||||
insertCluster(clusters, node);
|
||||
clusterDb[node.id].node = node;
|
||||
} else {
|
||||
node.y += subGraphTitleTotalMargin / 2;
|
||||
positionNode(node);
|
||||
}
|
||||
}
|
||||
@@ -134,6 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
|
||||
const edge = graph.edge(e);
|
||||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
|
||||
|
||||
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
|
||||
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
|
||||
positionEdgeLabel(edge, paths);
|
||||
});
|
||||
@@ -159,7 +172,8 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
|
||||
adjustClustersAndEdges(graph);
|
||||
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
await recursiveRender(elem, graph, diagramtype, id);
|
||||
const siteConfig = getConfig();
|
||||
await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
||||
@@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
|
||||
? getConfig().fontSize
|
||||
: window.getComputedStyle(document.body).fontSize;
|
||||
const enlargingFactor = 5;
|
||||
img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
|
||||
img.style.minWidth = width;
|
||||
img.style.maxWidth = width;
|
||||
} else {
|
||||
img.style.width = '100%';
|
||||
}
|
||||
|
||||
@@ -446,11 +446,13 @@ const getNamespaces = function (): NamespaceMap {
|
||||
* @public
|
||||
*/
|
||||
export const addClassesToNamespace = function (id: string, classNames: string[]) {
|
||||
if (namespaces[id] !== undefined) {
|
||||
classNames.map((className) => {
|
||||
classes[className].parent = id;
|
||||
namespaces[id].classes[className] = classes[className];
|
||||
});
|
||||
if (namespaces[id] === undefined) {
|
||||
return;
|
||||
}
|
||||
for (const name of classNames) {
|
||||
const { className } = splitClassNameAndType(name);
|
||||
classes[className].parent = id;
|
||||
namespaces[id].classes[className] = classes[className];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1043,6 +1043,19 @@ foo()
|
||||
`;
|
||||
parser.parse(str);
|
||||
});
|
||||
|
||||
it('should handle namespace with generic types', () => {
|
||||
parser.parse(`classDiagram
|
||||
|
||||
namespace space {
|
||||
class Square~Shape~{
|
||||
int id
|
||||
List~int~ position
|
||||
setPoints(List~int~ points)
|
||||
getPoints() List~int~
|
||||
}
|
||||
}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -231,7 +231,7 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
|
||||
//Set relationship style and line type
|
||||
classes: 'relation',
|
||||
pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
|
||||
id: 'id' + cnt,
|
||||
id: `id_${edge.id1}_${edge.id2}_${cnt}`,
|
||||
// Set link type for rendering
|
||||
arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
|
||||
//Set edge extra labels
|
||||
|
||||
@@ -681,3 +681,82 @@ describe('given text representing a method, ', function () {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('given text representing an attribute', () => {
|
||||
describe('when the attribute has no modifiers', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = 'name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has public "+" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '+name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('+name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has protected "#" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '#name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('#name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has private "-" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '-name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('-name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has internal "~" modifier', () => {
|
||||
it('should parse the display text correctly', () => {
|
||||
const str = '~name String';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('~name String');
|
||||
expect(displayDetails.cssStyle).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has static "$" modifier', () => {
|
||||
it('should parse the display text correctly and apply static css style', () => {
|
||||
const str = 'name String$';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe(staticCssStyle);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the attribute has abstract "*" modifier', () => {
|
||||
it('should parse the display text correctly and apply abstract css style', () => {
|
||||
const str = 'name String*';
|
||||
|
||||
const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
|
||||
|
||||
expect(displayDetails.displayText).toBe('name String');
|
||||
expect(displayDetails.cssStyle).toBe(abstractCssStyle);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -106,7 +106,7 @@ export class ClassMember {
|
||||
this.visibility = firstChar as Visibility;
|
||||
}
|
||||
|
||||
if (lastChar.match(/[*?]/)) {
|
||||
if (lastChar.match(/[$*]/)) {
|
||||
potentialClassifier = lastChar;
|
||||
}
|
||||
|
||||
|
||||
@@ -145,6 +145,7 @@ g.classGroup line {
|
||||
|
||||
.edgeTerminals {
|
||||
font-size: 11px;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.classTitleText {
|
||||
|
||||
@@ -38,6 +38,20 @@ describe('when securityLevel is antiscript, all script must be removed', () => {
|
||||
compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
|
||||
});
|
||||
|
||||
it('should detect unsecured target attribute, if value is _blank then generate a secured link', () => {
|
||||
compareRemoveScript(
|
||||
`<a href="https://mermaid.js.org/" target="_blank">note about mermaid</a>`,
|
||||
`<a href="https://mermaid.js.org/" target="_blank" rel="noopener">note about mermaid</a>`
|
||||
);
|
||||
});
|
||||
|
||||
it('should detect unsecured target attribute from links', () => {
|
||||
compareRemoveScript(
|
||||
`<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`,
|
||||
`<a href="https://mermaid.js.org/" target="_self">note about mermaid</a>`
|
||||
);
|
||||
});
|
||||
|
||||
it('should detect iframes', () => {
|
||||
compareRemoveScript(
|
||||
`<iframe src="http://abc.com/script1.js"></iframe>
|
||||
|
||||
@@ -25,7 +25,27 @@ export const getRows = (s?: string): string[] => {
|
||||
* @returns The safer text
|
||||
*/
|
||||
export const removeScript = (txt: string): string => {
|
||||
return DOMPurify.sanitize(txt);
|
||||
const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
|
||||
|
||||
DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
|
||||
if (node.tagName === 'A' && node.hasAttribute('target')) {
|
||||
node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
|
||||
}
|
||||
});
|
||||
|
||||
const sanitizedText = DOMPurify.sanitize(txt);
|
||||
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
|
||||
if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
|
||||
node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
|
||||
node.removeAttribute(TEMPORARY_ATTRIBUTE);
|
||||
if (node.getAttribute('target') === '_blank') {
|
||||
node.setAttribute('rel', 'noopener');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return sanitizedText;
|
||||
};
|
||||
|
||||
const sanitizeMore = (text: string, config: MermaidConfig) => {
|
||||
|
||||
@@ -11,6 +11,7 @@ import common from '../../common/common.js';
|
||||
import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
|
||||
import ELK from 'elkjs/lib/elk.bundled.js';
|
||||
import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js';
|
||||
import { addEdgeMarkers } from '../../../dagre-wrapper/edgeMarker.js';
|
||||
|
||||
const elk = new ELK();
|
||||
|
||||
@@ -586,108 +587,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
|
||||
}
|
||||
|
||||
// look in edge data and decide which marker to use
|
||||
switch (edgeData.arrowTypeStart) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-start',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (edgeData.arrowTypeEnd) {
|
||||
case 'arrow_cross':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
|
||||
break;
|
||||
case 'arrow_point':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
|
||||
break;
|
||||
case 'arrow_barb':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
|
||||
break;
|
||||
case 'arrow_circle':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
|
||||
break;
|
||||
case 'aggregation':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'extension':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'composition':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'dependency':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
|
||||
);
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr(
|
||||
'marker-end',
|
||||
'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -201,6 +201,13 @@ export const updateLinkInterpolate = function (positions, interp) {
|
||||
*/
|
||||
export const updateLink = function (positions, style) {
|
||||
positions.forEach(function (pos) {
|
||||
if (pos >= edges.length) {
|
||||
throw new Error(
|
||||
`The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
|
||||
edges.length - 1
|
||||
}. (Help: Ensure that the index is within the range of existing edges.)`
|
||||
);
|
||||
}
|
||||
if (pos === 'default') {
|
||||
edges.defaultStyle = style;
|
||||
} else {
|
||||
@@ -425,7 +432,7 @@ const setupToolTips = function (element) {
|
||||
tooltipElem
|
||||
.text(el.attr('title'))
|
||||
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
|
||||
.style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
|
||||
.style('top', window.scrollY + rect.bottom + 'px');
|
||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||
el.classed('hover', true);
|
||||
})
|
||||
|
||||
@@ -286,6 +286,30 @@ describe('[Style] when parsing', () => {
|
||||
expect(edges[0].type).toBe('arrow_point');
|
||||
});
|
||||
|
||||
it('should handle style definitions within number of edges', function () {
|
||||
expect(() =>
|
||||
flow.parser
|
||||
.parse(
|
||||
`graph TD
|
||||
A-->B
|
||||
linkStyle 1 stroke-width:1px;`
|
||||
)
|
||||
.toThrow(
|
||||
'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle style definitions within number of edges', function () {
|
||||
const res = flow.parser.parse(`graph TD
|
||||
A-->B
|
||||
linkStyle 0 stroke-width:1px;`);
|
||||
|
||||
const edges = flow.parser.yy.getEdges();
|
||||
|
||||
expect(edges[0].style[0]).toBe('stroke-width:1px');
|
||||
});
|
||||
|
||||
it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
|
||||
const res = flow.parser.parse(
|
||||
'graph TD\n' +
|
||||
|
||||
@@ -255,11 +255,12 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
|
||||
log.debug('in mergeBranch');
|
||||
};
|
||||
|
||||
export const cherryPick = function (sourceId, targetId, tag) {
|
||||
export const cherryPick = function (sourceId, targetId, tag, parentCommitId) {
|
||||
log.debug('Entering cherryPick:', sourceId, targetId, tag);
|
||||
sourceId = common.sanitizeText(sourceId, getConfig());
|
||||
targetId = common.sanitizeText(targetId, getConfig());
|
||||
tag = common.sanitizeText(tag, getConfig());
|
||||
parentCommitId = common.sanitizeText(parentCommitId, getConfig());
|
||||
|
||||
if (!sourceId || commits[sourceId] === undefined) {
|
||||
let error = new Error(
|
||||
@@ -274,20 +275,21 @@ export const cherryPick = function (sourceId, targetId, tag) {
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
|
||||
let sourceCommit = commits[sourceId];
|
||||
let sourceCommitBranch = sourceCommit.branch;
|
||||
if (sourceCommit.type === commitType.MERGE) {
|
||||
if (
|
||||
parentCommitId &&
|
||||
!(Array.isArray(sourceCommit.parents) && sourceCommit.parents.includes(parentCommitId))
|
||||
) {
|
||||
let error = new Error(
|
||||
'Incorrect usage of "cherryPick". Source commit should not be a merge commit'
|
||||
'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
if (sourceCommit.type === commitType.MERGE && !parentCommitId) {
|
||||
let error = new Error(
|
||||
'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
|
||||
);
|
||||
error.hash = {
|
||||
text: 'cherryPick ' + sourceId + ' ' + targetId,
|
||||
token: 'cherryPick ' + sourceId + ' ' + targetId,
|
||||
line: '1',
|
||||
loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
|
||||
expected: ['cherry-pick abc'],
|
||||
};
|
||||
throw error;
|
||||
}
|
||||
if (!targetId || commits[targetId] === undefined) {
|
||||
@@ -327,7 +329,11 @@ export const cherryPick = function (sourceId, targetId, tag) {
|
||||
parents: [head == null ? null : head.id, sourceCommit.id],
|
||||
branch: curBranch,
|
||||
type: commitType.CHERRY_PICK,
|
||||
tag: tag ?? 'cherry-pick:' + sourceCommit.id,
|
||||
tag:
|
||||
tag ??
|
||||
`cherry-pick:${sourceCommit.id}${
|
||||
sourceCommit.type === commitType.MERGE ? `|parent:${parentCommitId}` : ''
|
||||
}`,
|
||||
};
|
||||
head = commit;
|
||||
commits[commit.id] = commit;
|
||||
|
||||
@@ -673,6 +673,145 @@ describe('when parsing a gitGraph', function () {
|
||||
expect(commits[cherryPickCommitID].branch).toBe('main');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
cherry-pick id: "M" parent:"B"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[4];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('cherry-pick:M|parent:B');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with tag', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
cherry-pick id: "M" parent:"ZERO" tag: "v1.0"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[4];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('v1.0');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with additional commit', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id: "M" tag: "v2.1:ZERO" parent:"ZERO"
|
||||
commit id: "D"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[5];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('v2.1:ZERO');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should support cherry-picking of merge commits with empty tag', function () {
|
||||
const str = `gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M" parent: "ZERO" tag:""
|
||||
commit id: "D"
|
||||
cherry-pick id:"M" tag:"" parent: "B"
|
||||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const commits = parser.yy.getCommits();
|
||||
const cherryPickCommitID = Object.keys(commits)[5];
|
||||
const cherryPickCommitID2 = Object.keys(commits)[7];
|
||||
expect(commits[cherryPickCommitID].tag).toBe('');
|
||||
expect(commits[cherryPickCommitID2].tag).toBe('');
|
||||
expect(commits[cherryPickCommitID].branch).toBe('release');
|
||||
});
|
||||
|
||||
it('should fail cherry-picking of merge commits if the parent of merge commits is not specified', function () {
|
||||
expect(() =>
|
||||
parser
|
||||
.parse(
|
||||
`gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M"
|
||||
`
|
||||
)
|
||||
.toThrow(
|
||||
'Incorrect usage of cherry-pick: If the source commit is a merge commit, an immediate parent commit must be specified.'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should fail cherry-picking of merge commits when the parent provided is not an immediate parent of cherry picked commit', function () {
|
||||
expect(() =>
|
||||
parser
|
||||
.parse(
|
||||
`gitGraph
|
||||
commit id: "ZERO"
|
||||
branch feature
|
||||
branch release
|
||||
checkout feature
|
||||
commit id: "A"
|
||||
commit id: "B"
|
||||
checkout main
|
||||
merge feature id: "M"
|
||||
checkout release
|
||||
commit id: "C"
|
||||
cherry-pick id:"M" parent: "A"
|
||||
`
|
||||
)
|
||||
.toThrow(
|
||||
'Invalid operation: The specified parent commit is not an immediate parent of the cherry-picked commit.'
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw error when try to branch existing branch: main', function () {
|
||||
const str = `gitGraph
|
||||
commit
|
||||
|
||||
@@ -338,26 +338,34 @@ const drawCommits = (svg, commits, modifyGraph) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Detect if there are other commits between commit1's x-position and commit2's x-position on the
|
||||
* same branch as commit2.
|
||||
* Detect if there are commits
|
||||
* between commitA's x-position
|
||||
* and commitB's x-position on the
|
||||
* same branch as commitA, where
|
||||
* commitA isn't main
|
||||
*
|
||||
* @param {any} commit1
|
||||
* @param {any} commit2
|
||||
* @param {any} commitA
|
||||
* @param {any} commitB
|
||||
* @param branchToGetCurve
|
||||
* @param p1
|
||||
* @param p2
|
||||
* @param allCommits
|
||||
* @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
|
||||
* @returns {boolean}
|
||||
* If there are commits between
|
||||
* commitA's x-position
|
||||
* and commitB's x-position
|
||||
* on the source branch, where
|
||||
* source branch is not main
|
||||
* return true
|
||||
*/
|
||||
const hasOverlappingCommits = (commit1, commit2, allCommits) => {
|
||||
// Find commits on the same branch as commit2
|
||||
const keys = Object.keys(allCommits);
|
||||
const overlappingComits = keys.filter((key) => {
|
||||
return (
|
||||
allCommits[key].branch === commit2.branch &&
|
||||
allCommits[key].seq > commit1.seq &&
|
||||
allCommits[key].seq < commit2.seq
|
||||
);
|
||||
const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
|
||||
const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
|
||||
const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
|
||||
const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
|
||||
const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
|
||||
return Object.values(allCommits).some((commitX) => {
|
||||
return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
|
||||
});
|
||||
|
||||
return overlappingComits.length > 0;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -388,49 +396,61 @@ const findLane = (y1, y2, depth = 0) => {
|
||||
* Draw the lines between the commits. They were arrows initially.
|
||||
*
|
||||
* @param {any} svg
|
||||
* @param {any} commit1
|
||||
* @param {any} commit2
|
||||
* @param {any} commitA
|
||||
* @param {any} commitB
|
||||
* @param {any} allCommits
|
||||
*/
|
||||
const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
const p1 = commitPos[commit1.id];
|
||||
const p2 = commitPos[commit2.id];
|
||||
const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
|
||||
// log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
|
||||
const drawArrow = (svg, commitA, commitB, allCommits) => {
|
||||
const p1 = commitPos[commitA.id]; // arrowStart
|
||||
const p2 = commitPos[commitB.id]; // arrowEnd
|
||||
const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
|
||||
// log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
|
||||
|
||||
// Lower-right quadrant logic; top-left is 0,0
|
||||
|
||||
let arc = '';
|
||||
let arc2 = '';
|
||||
let radius = 0;
|
||||
let offset = 0;
|
||||
let colorClassNum = branchPos[commit2.branch].index;
|
||||
let colorClassNum = branchPos[commitB.branch].index;
|
||||
let lineDef;
|
||||
if (overlappingCommits) {
|
||||
if (arrowNeedsRerouting) {
|
||||
arc = 'A 10 10, 0, 0, 0,';
|
||||
arc2 = 'A 10 10, 0, 0, 1,';
|
||||
radius = 10;
|
||||
offset = 10;
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
|
||||
const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
|
||||
const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
|
||||
|
||||
if (dir === 'TB') {
|
||||
if (p1.x < p2.x) {
|
||||
// Source commit is on branch position left of destination commit
|
||||
// so render arrow rightward with colour of destination branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
|
||||
p1.y + offset
|
||||
} L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
// Source commit is on branch position right of destination commit
|
||||
// so render arrow leftward with colour of source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
|
||||
p1.y + offset
|
||||
} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
} else {
|
||||
if (p1.y < p2.y) {
|
||||
// Source commit is on branch positioned above destination commit
|
||||
// so render arrow downward with colour of destination branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
|
||||
p1.x + offset
|
||||
} ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
|
||||
} else {
|
||||
// Source commit is on branch positioned below destination commit
|
||||
// so render arrow upward with colour of source branch
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
|
||||
p1.x + offset
|
||||
} ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
|
||||
@@ -445,7 +465,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
offset = 20;
|
||||
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
|
||||
p1.y + offset
|
||||
@@ -458,14 +478,14 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
offset = 20;
|
||||
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
|
||||
p2.y
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
}
|
||||
|
||||
if (p1.x === p2.x) {
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
|
||||
p2.y + radius
|
||||
} L ${p2.x} ${p2.y}`;
|
||||
@@ -475,10 +495,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Figure out the color of the arrow,arrows going down take the color from the destination branch
|
||||
colorClassNum = branchPos[commit2.branch].index;
|
||||
|
||||
// Arrows going up take the color from the target branch
|
||||
colorClassNum = branchPos[commitB.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
@@ -487,16 +505,15 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
|
||||
arc = 'A 20 20, 0, 0, 0,';
|
||||
radius = 20;
|
||||
offset = 20;
|
||||
|
||||
// Arrows going up take the color from the source branch
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
}
|
||||
|
||||
if (p1.y === p2.y) {
|
||||
colorClassNum = branchPos[commit1.branch].index;
|
||||
colorClassNum = branchPos[commitA.branch].index;
|
||||
lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
|
||||
p2.x
|
||||
} ${p2.y}`;
|
||||
|
||||
@@ -39,6 +39,7 @@ branch(?=\s|$) return 'BRANCH';
|
||||
"order:" return 'ORDER';
|
||||
merge(?=\s|$) return 'MERGE';
|
||||
cherry\-pick(?=\s|$) return 'CHERRY_PICK';
|
||||
"parent:" return 'PARENT_COMMIT'
|
||||
// "reset" return 'RESET';
|
||||
checkout(?=\s|$) return 'CHECKOUT';
|
||||
"LR" return 'DIR';
|
||||
@@ -109,10 +110,17 @@ branchStatement
|
||||
|
||||
cherryPickStatement
|
||||
: CHERRY_PICK COMMIT_ID STR {yy.cherryPick($3, '', undefined)}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($3, '', undefined,$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR {yy.cherryPick($3, '', $5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG STR {yy.cherryPick($3, '', $7,$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG STR PARENT_COMMIT STR {yy.cherryPick($3, '', $5,$7)}
|
||||
| CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR {yy.cherryPick($5, '', $3)}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR {yy.cherryPick($5, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '')}
|
||||
| CHERRY_PICK COMMIT_ID STR PARENT_COMMIT STR COMMIT_TAG EMPTYSTR {yy.cherryPick($3, '', '',$5)}
|
||||
| CHERRY_PICK COMMIT_ID STR COMMIT_TAG EMPTYSTR PARENT_COMMIT STR {yy.cherryPick($3, '', '',$7)}
|
||||
| CHERRY_PICK COMMIT_TAG STR COMMIT_ID STR PARENT_COMMIT STR {yy.cherryPick($5, '', $3,$7)}
|
||||
| CHERRY_PICK COMMIT_TAG EMPTYSTR COMMIT_ID STR PARENT_COMMIT STR{yy.cherryPick($5, '', '',$7)}
|
||||
;
|
||||
|
||||
mergeStatement
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type d3 from 'd3';
|
||||
import { scaleOrdinal, pie as d3pie, arc } from 'd3';
|
||||
|
||||
import { log } from '../../logger.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
@@ -38,33 +37,25 @@ const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
|
||||
*/
|
||||
export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
log.debug('rendering pie chart\n' + text);
|
||||
|
||||
const db = diagObj.db as PieDB;
|
||||
const globalConfig: MermaidConfig = getConfig();
|
||||
const pieConfig: Required<PieDiagramConfig> = cleanAndMerge(db.getConfig(), globalConfig.pie);
|
||||
|
||||
const height = 450;
|
||||
// TODO: remove document width
|
||||
const width: number =
|
||||
document.getElementById(id)?.parentElement?.offsetWidth ?? pieConfig.useWidth;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
// Set viewBox
|
||||
svg.attr('viewBox', `0 0 ${width} ${height}`);
|
||||
configureSvgSize(svg, height, width, pieConfig.useMaxWidth);
|
||||
|
||||
const MARGIN = 40;
|
||||
const LEGEND_RECT_SIZE = 18;
|
||||
const LEGEND_SPACING = 4;
|
||||
|
||||
const height = 450;
|
||||
const pieWidth: number = height;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
const group: Group = svg.append('g');
|
||||
group.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
|
||||
const sections: Sections = db.getSections();
|
||||
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
|
||||
|
||||
const { themeVariables } = globalConfig;
|
||||
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
|
||||
outerStrokeWidth ??= 2;
|
||||
|
||||
const textPosition: number = pieConfig.textPosition;
|
||||
const radius: number = Math.min(width, height) / 2 - MARGIN;
|
||||
const radius: number = Math.min(pieWidth, height) / 2 - MARGIN;
|
||||
// Shape helper to build arcs:
|
||||
const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Sections>> = arc<
|
||||
d3.PieArcDatum<D3Sections>
|
||||
@@ -84,7 +75,6 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
.attr('r', radius + outerStrokeWidth / 2)
|
||||
.attr('class', 'pieOuterCircle');
|
||||
|
||||
const sections: Sections = db.getSections();
|
||||
const arcs: d3.PieArcDatum<D3Sections>[] = createPieArcs(sections);
|
||||
|
||||
const myGeneratedColors = [
|
||||
@@ -177,6 +167,19 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
}
|
||||
return label;
|
||||
});
|
||||
|
||||
const longestTextWidth = Math.max(
|
||||
...legend
|
||||
.selectAll('text')
|
||||
.nodes()
|
||||
.map((node) => (node as Element)?.getBoundingClientRect().width ?? 0)
|
||||
);
|
||||
|
||||
const totalWidth = pieWidth + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
|
||||
|
||||
// Set viewBox
|
||||
svg.attr('viewBox', `0 0 ${totalWidth} ${height}`);
|
||||
configureSvgSize(svg, height, totalWidth, pieConfig.useMaxWidth);
|
||||
};
|
||||
|
||||
export const renderer = { draw };
|
||||
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
sankeyCenter as d3SankeyCenter,
|
||||
sankeyJustify as d3SankeyJustify,
|
||||
} from 'd3-sankey';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { setupGraphViewbox } from '../../setupGraphViewbox.js';
|
||||
import { Uid } from '../../rendering-util/uid.js';
|
||||
import type { SankeyNodeAlignment } from '../../config.type.js';
|
||||
|
||||
@@ -70,12 +70,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
const suffix = conf?.suffix ?? defaultSankeyConfig.suffix!;
|
||||
const showValues = conf?.showValues ?? defaultSankeyConfig.showValues!;
|
||||
|
||||
// FIX: using max width prevents height from being set, is it intended?
|
||||
// to add height directly one can use `svg.attr('height', height)`
|
||||
//
|
||||
// @ts-ignore TODO: svg type vs selection mismatch
|
||||
configureSvgSize(svg, height, width, useMaxWidth);
|
||||
|
||||
// Prepare data for construction based on diagObj.db
|
||||
// This must be a mutable object with `nodes` and `links` properties:
|
||||
//
|
||||
@@ -208,6 +202,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
|
||||
.attr('d', d3SankeyLinkHorizontal())
|
||||
.attr('stroke', coloring)
|
||||
.attr('stroke-width', (d: any) => Math.max(1, d.width));
|
||||
|
||||
setupGraphViewbox(undefined, svg, 0, useMaxWidth);
|
||||
};
|
||||
|
||||
export default {
|
||||
|
||||
@@ -829,6 +829,11 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
||||
bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
|
||||
}
|
||||
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
|
||||
// Draw the messages/signals
|
||||
let sequenceIndex = 1;
|
||||
let sequenceIndexStep = 1;
|
||||
@@ -1028,14 +1033,12 @@ export const draw = function (_text: string, id: string, _version: string, diagO
|
||||
}
|
||||
});
|
||||
|
||||
log.debug('createdActors', createdActors);
|
||||
log.debug('destroyedActors', destroyedActors);
|
||||
|
||||
drawActors(diagram, actors, actorKeys, false);
|
||||
messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
|
||||
|
||||
if (conf.mirrorActors) {
|
||||
drawActors(diagram, actors, actorKeys, true);
|
||||
}
|
||||
|
||||
backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
|
||||
fixLifeLineHeights(diagram, actors, actorKeys, conf);
|
||||
|
||||
|
||||
@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
|
||||
const center = actor.x + actor.width / 2;
|
||||
const centerY = actorY + 5;
|
||||
|
||||
const boxpluslineGroup = elem.append('g').lower();
|
||||
const boxpluslineGroup = elem.append('g');
|
||||
var g = boxpluslineGroup;
|
||||
|
||||
if (!isFooter) {
|
||||
|
||||
@@ -4,7 +4,10 @@ import { defineConfig, MarkdownOptions } from 'vitepress';
|
||||
|
||||
const allMarkdownTransformers: MarkdownOptions = {
|
||||
// the shiki theme to highlight code blocks
|
||||
theme: 'github-dark',
|
||||
theme: {
|
||||
light: 'github-light',
|
||||
dark: 'github-dark',
|
||||
},
|
||||
config: async (md) => {
|
||||
await MermaidExample(md);
|
||||
},
|
||||
|
||||
@@ -4,9 +4,8 @@
|
||||
|
||||
## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
|
||||
|
||||
- Search in Discussions
|
||||
- Search in open Issues
|
||||
- Search in closed Issues
|
||||
- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
|
||||
- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
|
||||
|
||||
If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
|
||||
Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.
|
||||
|
||||
@@ -4,8 +4,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
|
||||
|
||||
- The default configuration
|
||||
- Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
|
||||
- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
|
||||
|
||||
**The render config** is configuration that is used when rendering by applying these configurations.
|
||||
|
||||
|
||||
@@ -40,6 +40,12 @@ Below are a list of community plugins and integrations created with Mermaid.
|
||||
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
|
||||
- [LiveBook](https://livebook.dev) ✅
|
||||
- [Atlassian Products](https://www.atlassian.com)
|
||||
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
|
||||
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
|
||||
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
|
||||
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
|
||||
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
|
||||
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
|
||||
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
|
||||
@@ -98,9 +104,13 @@ Communication tools and platforms
|
||||
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
|
||||
- [NodeBB](https://nodebb.org)
|
||||
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
|
||||
- [Slack](https://slack.com)
|
||||
- [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
|
||||
|
||||
### Wikis
|
||||
|
||||
- [PmWiki](https://www.pmwiki.org)
|
||||
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
|
||||
- [MediaWiki](https://www.mediawiki.org)
|
||||
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
|
||||
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
|
||||
@@ -169,7 +179,7 @@ Communication tools and platforms
|
||||
### Document Generation
|
||||
|
||||
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
|
||||
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
|
||||
- [Sphinx](https://www.sphinx-doc.org/en/master/)
|
||||
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
|
||||
- [remark](https://remark.js.org/)
|
||||
|
||||
@@ -97,7 +97,7 @@ To Deploy Mermaid:
|
||||
</script>
|
||||
```
|
||||
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
|
||||
**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
|
||||
|
||||
**Examples can be found in** [Other examples](../syntax/examples.md)
|
||||
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
# Announcements
|
||||
|
||||
<br />
|
||||
Check out our latest blog posts below. See more blog posts [here](blog.md).
|
||||
|
||||
<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid Chart - A smarter way to create diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
## Calling all fans of Mermaid and Mermaid Chart! 🎉
|
||||
14 November 2023 · 5 mins
|
||||
|
||||
We’ve officially made our Product Hunt debut, and would love any and all support from the community!
|
||||
|
||||
[Click here](https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid-chart) to check out our Product Hunt launch.
|
||||
|
||||
Feel free to drop us a comment and let us know what you think. All new sign ups will receive a 30-day free trial of our Pro subscription, plus 25% off your first year.
|
||||
|
||||
We’re on a mission to make text-based diagramming fun again. And we need your help to make that happen.
|
||||
|
||||
Your support means the world to us. Thank you for being part of the diagramming movement.
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
|
||||
@@ -1,5 +1,23 @@
|
||||
# Blog
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
|
||||
|
||||
1 November 2023 · 5 mins
|
||||
|
||||
Would an AI diagram generator make your life easier?
|
||||
|
||||
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
|
||||
|
||||
12 October 2023 · 4 mins
|
||||
|
||||
Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
|
||||
|
||||
## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
|
||||
|
||||
22 September 2023 · 7 mins
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
"preview-https": "pnpm build && serve .vitepress/dist",
|
||||
"preview-https-no-prefetch": "pnpm build-no-prefetch && serve .vitepress/dist",
|
||||
"prefetch": "pnpm fetch-contributors && pnpm fetch-avatars",
|
||||
"fetch-avatars": "ts-node-esm .vitepress/scripts/fetch-avatars.ts",
|
||||
"fetch-contributors": "ts-node-esm .vitepress/scripts/fetch-contributors.ts"
|
||||
"fetch-avatars": "tsx .vitepress/scripts/fetch-avatars.ts",
|
||||
"fetch-contributors": "tsx .vitepress/scripts/fetch-contributors.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^10.1.0",
|
||||
@@ -22,17 +22,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.1.16",
|
||||
"@unocss/reset": "^0.57.0",
|
||||
"@vite-pwa/vitepress": "^0.2.0",
|
||||
"@unocss/reset": "^0.58.0",
|
||||
"@vite-pwa/vitepress": "^0.3.0",
|
||||
"@vitejs/plugin-vue": "^4.2.1",
|
||||
"fast-glob": "^3.2.12",
|
||||
"https-localhost": "^4.7.1",
|
||||
"pathe": "^1.1.0",
|
||||
"unocss": "^0.57.0",
|
||||
"unplugin-vue-components": "^0.25.0",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-pwa": "^0.16.0",
|
||||
"vitepress": "1.0.0-rc.25",
|
||||
"unocss": "^0.58.0",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^4.4.12",
|
||||
"vite-plugin-pwa": "^0.17.0",
|
||||
"vitepress": "1.0.0-rc.31",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,7 +257,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
||||
title Component diagram for Internet Banking System - API Application
|
||||
|
||||
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
|
||||
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile mobile device.")
|
||||
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
|
||||
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
|
||||
|
||||
|
||||
@@ -281,8 +281,6 @@ And `Link` can be one of:
|
||||
|
||||
A namespace groups classes.
|
||||
|
||||
Code:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
namespace BaseShapes {
|
||||
|
||||
@@ -293,7 +293,7 @@ flowchart TB
|
||||
A & B--> C & D
|
||||
```
|
||||
|
||||
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
||||
If you describe the same diagram using the basic syntax, it will take four lines. A
|
||||
word of warning, one could go overboard with this making the flowchart harder to read in
|
||||
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
|
||||
This goes for expressive syntaxes as well.
|
||||
|
||||
@@ -244,24 +244,29 @@ A few important rules to note here are:
|
||||
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
|
||||
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
|
||||
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
|
||||
4. When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
|
||||
5. The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
|
||||
|
||||
Let see an example:
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
commit id:"TWO"
|
||||
cherry-pick id:"A"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
branch release
|
||||
commit id:"A"
|
||||
checkout main
|
||||
commit id:"ONE"
|
||||
checkout develop
|
||||
commit id:"B"
|
||||
checkout main
|
||||
merge develop id:"MERGE"
|
||||
commit id:"TWO"
|
||||
checkout release
|
||||
cherry-pick id:"MERGE" parent:"B"
|
||||
commit id:"THREE"
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
```
|
||||
|
||||
## Gitgraph specific configuration options
|
||||
|
||||
@@ -2,7 +2,7 @@ import mermaid from './mermaid.js';
|
||||
import { mermaidAPI } from './mermaidAPI.js';
|
||||
import './diagram-api/diagram-orchestration.js';
|
||||
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
|
||||
import { beforeAll, describe, it, expect, vi } from 'vitest';
|
||||
import { beforeAll, describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import type { DiagramDefinition } from './diagram-api/types.js';
|
||||
|
||||
beforeAll(async () => {
|
||||
@@ -89,7 +89,7 @@ describe('when using mermaid and ', () => {
|
||||
).resolves.not.toThrow();
|
||||
// should still render, even if lazyLoadedDiagrams fails
|
||||
expect(mermaidAPI.render).toHaveBeenCalled();
|
||||
});
|
||||
}, 20_000);
|
||||
|
||||
it('should defer diagram load based on parameter', async () => {
|
||||
let loaded = false;
|
||||
|
||||
@@ -67,6 +67,7 @@ vi.mock('stylis', () => {
|
||||
});
|
||||
import { compile, serialize } from 'stylis';
|
||||
import { decodeEntities, encodeEntities } from './utils.js';
|
||||
import { Diagram } from './Diagram.js';
|
||||
|
||||
/**
|
||||
* @see https://vitest.dev/guide/mocking.html Mock part of a module
|
||||
@@ -744,4 +745,16 @@ describe('mermaidAPI', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDiagramFromText', () => {
|
||||
it('should clean up comments when present in diagram definition', async () => {
|
||||
const diagram = await mermaidAPI.getDiagramFromText(
|
||||
`flowchart LR
|
||||
%% This is a comment A -- text --> B{node}
|
||||
A -- text --> B -- text2 --> C`
|
||||
);
|
||||
expect(diagram).toBeInstanceOf(Diagram);
|
||||
expect(diagram.type).toBe('flowchart-v2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -17,7 +17,7 @@ import { compile, serialize, stringify } from 'stylis';
|
||||
import { version } from '../package.json';
|
||||
import * as configApi from './config.js';
|
||||
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
|
||||
import { Diagram, getDiagramFromText } from './Diagram.js';
|
||||
import { Diagram, getDiagramFromText as getDiagramFromTextInternal } from './Diagram.js';
|
||||
import errorRenderer from './diagrams/error/errorRenderer.js';
|
||||
import { attachFunctions } from './interactionDb.js';
|
||||
import { log, setLogLevel } from './logger.js';
|
||||
@@ -28,7 +28,7 @@ import type { MermaidConfig } from './config.type.js';
|
||||
import { evaluate } from './diagrams/common/common.js';
|
||||
import isEmpty from 'lodash-es/isEmpty.js';
|
||||
import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
|
||||
import type { DiagramStyleClassDef } from './diagram-api/types.js';
|
||||
import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
|
||||
import { preprocessDiagram } from './preprocess.js';
|
||||
import { decodeEntities } from './utils.js';
|
||||
|
||||
@@ -531,6 +531,11 @@ function initialize(options: MermaidConfig = {}) {
|
||||
addDiagrams();
|
||||
}
|
||||
|
||||
const getDiagramFromText = (text: string, metadata: Pick<DiagramMetadata, 'title'> = {}) => {
|
||||
const { code } = preprocessDiagram(text);
|
||||
return getDiagramFromTextInternal(code, metadata);
|
||||
};
|
||||
|
||||
/**
|
||||
* Add accessibility (a11y) information to the diagram.
|
||||
*
|
||||
|
||||
@@ -1869,6 +1869,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
|
||||
unevaluatedProperties: false
|
||||
required:
|
||||
- titleTopMargin
|
||||
- subGraphTitleMargin
|
||||
- diagramPadding
|
||||
- htmlLabels
|
||||
- nodeSpacing
|
||||
@@ -1881,6 +1882,20 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
|
||||
titleTopMargin:
|
||||
$ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
|
||||
default: 25
|
||||
subGraphTitleMargin:
|
||||
description: |
|
||||
Defines a top/bottom margin for subgraph titles
|
||||
type: object
|
||||
properties:
|
||||
top:
|
||||
type: integer
|
||||
minimum: 0
|
||||
bottom:
|
||||
type: integer
|
||||
minimum: 0
|
||||
default:
|
||||
top: 0
|
||||
bottom: 0
|
||||
arrowMarkerAbsolute:
|
||||
type: boolean # TODO, is this actually used here (it has no default value but was in types)
|
||||
diagramPadding:
|
||||
|
||||
@@ -44,6 +44,8 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
|
||||
const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
|
||||
d3Attrs(svgElem, attrs);
|
||||
};
|
||||
|
||||
// TODO v11: Remove the graph parameter. It is not used.
|
||||
export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
|
||||
const svgBounds = svgElem.node().getBBox();
|
||||
const sWidth = svgBounds.width;
|
||||
@@ -55,26 +57,13 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
|
||||
let height = 0;
|
||||
log.info(`Graph bounds: ${width}x${height}`, graph);
|
||||
|
||||
// let tx = 0;
|
||||
// let ty = 0;
|
||||
// if (sWidth > width) {
|
||||
// tx = (sWidth - width) / 2 + padding;
|
||||
width = sWidth + padding * 2;
|
||||
// } else {
|
||||
// if (Math.abs(sWidth - width) >= 2 * padding + 1) {
|
||||
// width = width - padding;
|
||||
// }
|
||||
// }
|
||||
// if (sHeight > height) {
|
||||
// ty = (sHeight - height) / 2 + padding;
|
||||
height = sHeight + padding * 2;
|
||||
// }
|
||||
|
||||
log.info(`Calculated bounds: ${width}x${height}`);
|
||||
configureSvgSize(svgElem, height, width, useMaxWidth);
|
||||
|
||||
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
|
||||
// const vBox = `0 0 ${width} ${height}`;
|
||||
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
|
||||
svgBounds.width + 2 * padding
|
||||
} ${svgBounds.height + 2 * padding}`;
|
||||
|
||||
@@ -19,9 +19,12 @@ const markerOffsets = {
|
||||
* @returns The angle, deltaX and deltaY
|
||||
*/
|
||||
function calculateDeltaAndAngle(
|
||||
point1: Point | [number, number],
|
||||
point2: Point | [number, number]
|
||||
point1?: Point | [number, number],
|
||||
point2?: Point | [number, number]
|
||||
): { angle: number; deltaX: number; deltaY: number } {
|
||||
if (point1 === undefined || point2 === undefined) {
|
||||
return { angle: 0, deltaX: 0, deltaY: 0 };
|
||||
}
|
||||
point1 = pointTransformer(point1);
|
||||
point2 = pointTransformer(point2);
|
||||
const [x1, y1] = [point1.x, point1.y];
|
||||
@@ -90,3 +93,44 @@ export const getLineFunctionsWithOffset = (
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
if (import.meta.vitest) {
|
||||
const { it, expect, describe } = import.meta.vitest;
|
||||
describe('calculateDeltaAndAngle', () => {
|
||||
it('should calculate the angle and deltas between two points', () => {
|
||||
expect(calculateDeltaAndAngle([0, 0], [0, 1])).toStrictEqual({
|
||||
angle: 1.5707963267948966,
|
||||
deltaX: 0,
|
||||
deltaY: 1,
|
||||
});
|
||||
expect(calculateDeltaAndAngle([1, 0], [0, -1])).toStrictEqual({
|
||||
angle: 0.7853981633974483,
|
||||
deltaX: -1,
|
||||
deltaY: -1,
|
||||
});
|
||||
expect(calculateDeltaAndAngle({ x: 1, y: 0 }, [0, -1])).toStrictEqual({
|
||||
angle: 0.7853981633974483,
|
||||
deltaX: -1,
|
||||
deltaY: -1,
|
||||
});
|
||||
expect(calculateDeltaAndAngle({ x: 1, y: 0 }, { x: 1, y: 0 })).toStrictEqual({
|
||||
angle: NaN,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
});
|
||||
});
|
||||
|
||||
it('should calculate the angle and deltas if one point in undefined', () => {
|
||||
expect(calculateDeltaAndAngle(undefined, [0, 1])).toStrictEqual({
|
||||
angle: 0,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
});
|
||||
expect(calculateDeltaAndAngle([0, 1], undefined)).toStrictEqual({
|
||||
angle: 0,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
22
packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
Normal file
22
packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
|
||||
import * as configApi from '../config.js';
|
||||
|
||||
describe('getSubGraphTitleMargins', () => {
|
||||
it('should get subgraph title margins after config has been set', () => {
|
||||
const config_0 = {
|
||||
flowchart: {
|
||||
subGraphTitleMargin: {
|
||||
top: 10,
|
||||
bottom: 5,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
configApi.setSiteConfig(config_0);
|
||||
expect(getSubGraphTitleMargins(config_0)).toEqual({
|
||||
subGraphTitleTopMargin: 10,
|
||||
subGraphTitleBottomMargin: 5,
|
||||
subGraphTitleTotalMargin: 15,
|
||||
});
|
||||
});
|
||||
});
|
||||
21
packages/mermaid/src/utils/subGraphTitleMargins.ts
Normal file
21
packages/mermaid/src/utils/subGraphTitleMargins.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import type { FlowchartDiagramConfig } from '../config.type.js';
|
||||
|
||||
export const getSubGraphTitleMargins = ({
|
||||
flowchart,
|
||||
}: {
|
||||
flowchart: FlowchartDiagramConfig;
|
||||
}): {
|
||||
subGraphTitleTopMargin: number;
|
||||
subGraphTitleBottomMargin: number;
|
||||
subGraphTitleTotalMargin: number;
|
||||
} => {
|
||||
const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
|
||||
const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
|
||||
const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
|
||||
|
||||
return {
|
||||
subGraphTitleTopMargin,
|
||||
subGraphTitleBottomMargin,
|
||||
subGraphTitleTotalMargin,
|
||||
};
|
||||
};
|
||||
@@ -2,7 +2,8 @@
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
"outDir": "./dist",
|
||||
"types": ["vitest/importMeta", "vitest/globals"]
|
||||
},
|
||||
"include": ["./src/**/*.ts", "./package.json"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user