GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

chore: Cleanup layoutelk

Browse Source
This commit is contained in:
Sidharth Vinod 2024-08-21 14:17:06 +05:30
parent 44875691db
commit 4e126e174b
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
3 changed files with 10288 additions and 8112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/mermaid-layout-elk/package.json
View File

@ -31,13 +31,16 @@
], ],
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"elkjs": "^0.9.3", "d3": "^7.9.0",
"d3": "^7.9.0" "elkjs": "^0.9.3"
}, },
"peerDependencies": { "peerDependencies": {
"mermaid": "workspace:^" "mermaid": "workspace:^"
}, },
"files": [ "files": [
"dist" "dist"
] ],
"devDependencies": {
"@types/d3": "^7.4.3"
}
} }

99
packages/mermaid-layout-elk/src/render.ts
View File

@ -1,4 +1,3 @@
// @ts-nocheck File not ready to check types
import { curveLinear } from 'd3'; import { curveLinear } from 'd3';
import ELK from 'elkjs/lib/elk.bundled.js'; import ELK from 'elkjs/lib/elk.bundled.js';
import mermaid, { type LayoutData } from 'mermaid'; import mermaid, { type LayoutData } from 'mermaid';
@ -18,12 +17,12 @@ const {
positionEdgeLabel, positionEdgeLabel,
} = mermaid.internalHelpers; } = mermaid.internalHelpers;
// import { insertEdge } from '../../mermaid/src/rendering-util/rendering-elements/edges.js'; // import { insertEdge } from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
const nodeDb = {}; const nodeDb: Record<string, any> = {};
const portPos = {}; const portPos: Record<string, any> = {};
const clusterDb = {}; const clusterDb: Record<string, any> = {};
export const addVertex = async (nodeEl, graph, nodeArr, node) => { const addVertex = async (nodeEl: any, graph: { children: any[]; }, nodeArr: any, node: any) => {
const labelData = { width: 0, height: 0 }; const labelData: any = { width: 0, height: 0 };
// const ports = [ // const ports = [
// { // {
// id: node.id + '-west', // id: node.id + '-west',
@ -74,7 +73,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
if (node.label) { if (node.label) {
const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true); const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
labelData.width = bbox.width; labelData.width = bbox.width;
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth; labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth;
// Give some padding for elk // Give some padding for elk
labelData.height = bbox.height - 2; labelData.height = bbox.height - 2;
labelData.labelNode = shapeSvg.node(); labelData.labelNode = shapeSvg.node();
@ -90,21 +89,21 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
} }
}; };
export const addVertices = async function (nodeEl, nodeArr, graph, parentId) { const addVertices = async function (nodeEl: any, nodeArr: any[], graph: { id: string; layoutOptions: { 'elk.hierarchyHandling': string; 'elk.algorithm': any; 'nodePlacement.strategy': any; 'elk.layered.mergeEdges': any; 'elk.direction': string; 'spacing.baseValue': number; }; children: never[]; edges: never[]; }, parentId?: undefined) {
const siblings = nodeArr.filter((node) => node.parentId === parentId); const siblings = nodeArr.filter((node: { parentId: any; }) => node.parentId === parentId);
log.info('addVertices APA12', siblings, parentId); log.info('addVertices APA12', siblings, parentId);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
await Promise.all( await Promise.all(
siblings.map(async (node) => { siblings.map(async (node: any) => {
await addVertex(nodeEl, graph, nodeArr, node); await addVertex(nodeEl, graph, nodeArr, node);
}) })
); );
return graph; return graph;
}; };
const drawNodes = async (relX, relY, nodeArray, svg, subgraphsEl, depth) => { const drawNodes = async (relX: number, relY: number, nodeArray: any[], svg: any, subgraphsEl: { insert: (arg0: string) => { (): any; new(): any; attr: { (arg0: string, arg1: string): any; new(): any; }; }; }, depth: number) => {
await Promise.all( await Promise.all(
nodeArray.map(async function (node) { nodeArray.map(async function (node: { id: string | number; x: any; y: any; width: number; labels: { width: any; }[]; height: number; isGroup: any; labelData: any; offset: { posX: number; posY: number; }; shape: any; domId: { node: () => any; attr: (arg0: string, arg1: string) => void; }; }) {
if (node) { if (node) {
nodeDb[node.id] = node; nodeDb[node.id] = node;
nodeDb[node.id].offset = { nodeDb[node.id].offset = {
@ -147,7 +146,7 @@ const drawNodes = async (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
); );
await Promise.all( await Promise.all(
nodeArray.map(async function (node) { nodeArray.map(async function (node: { isGroup: any; x: any; y: any; children: any; }) {
if (node?.isGroup) { if (node?.isGroup) {
await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1); await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1);
} }
@ -155,7 +154,7 @@ const drawNodes = async (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
); );
}; };
const getNextPort = (node, edgeDirection, graphDirection) => { const getNextPort = (node: string | number, edgeDirection: string, graphDirection: any) => {
log.info('getNextPort abc88', { node, edgeDirection, graphDirection }); log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
if (!portPos[node]) { if (!portPos[node]) {
switch (graphDirection) { switch (graphDirection) {
@ -204,13 +203,13 @@ const getNextPort = (node, edgeDirection, graphDirection) => {
return result; return result;
}; };
const addSubGraphs = (nodeArr): TreeData => { const addSubGraphs = (nodeArr: any[]): TreeData => {
const parentLookupDb: TreeData = { parentById: {}, childrenById: {} }; const parentLookupDb: TreeData = { parentById: {}, childrenById: {} };
const subgraphs = nodeArr.filter((node) => node.isGroup); const subgraphs = nodeArr.filter((node: { isGroup: any; }) => node.isGroup);
log.info('Subgraphs - ', subgraphs); log.info('Subgraphs - ', subgraphs);
subgraphs.forEach((subgraph) => { subgraphs.forEach((subgraph: { id: string; }) => {
const children = nodeArr.filter((node) => node.parentId === subgraph.id); const children = nodeArr.filter((node: { parentId: any; }) => node.parentId === subgraph.id);
children.forEach((node) => { children.forEach((node: any) => {
parentLookupDb.parentById[node.id] = subgraph.id; parentLookupDb.parentById[node.id] = subgraph.id;
if (parentLookupDb.childrenById[subgraph.id] === undefined) { if (parentLookupDb.childrenById[subgraph.id] === undefined) {
parentLookupDb.childrenById[subgraph.id] = []; parentLookupDb.childrenById[subgraph.id] = [];
@ -219,8 +218,8 @@ const addSubGraphs = (nodeArr): TreeData => {
}); });
}); });
subgraphs.forEach(function (subgraph) { subgraphs.forEach(function (subgraph: { id: string | number; }) {
const data = { id: subgraph.id }; const data: any = { id: subgraph.id };
if (parentLookupDb.parentById[subgraph.id] !== undefined) { if (parentLookupDb.parentById[subgraph.id] !== undefined) {
data.parent = parentLookupDb.parentById[subgraph.id]; data.parent = parentLookupDb.parentById[subgraph.id];
} }
@ -228,9 +227,9 @@ const addSubGraphs = (nodeArr): TreeData => {
return parentLookupDb; return parentLookupDb;
}; };
const getEdgeStartEndPoint = (edge, dir) => { const getEdgeStartEndPoint = (edge: any, dir: any) => {
let source = edge.start; let source: any = edge.start;
let target = edge.end; let target: any = edge.end;
// Save the original source and target // Save the original source and target
const sourceId = source; const sourceId = source;
@ -268,17 +267,17 @@ const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData
/** /**
* Add edges to graph based on parsed graph definition * Add edges to graph based on parsed graph definition
*/ */
export const addEdges = async function (dataForLayout, graph, svg) { const addEdges = async function (dataForLayout: { edges: any; direction: string; }, graph: { id?: string; layoutOptions?: { 'elk.hierarchyHandling': string; 'elk.algorithm': any; 'nodePlacement.strategy': any; 'elk.layered.mergeEdges': any; 'elk.direction': string; 'spacing.baseValue': number; }; children?: never[]; edges: any; }, svg: { insert: (arg0: string) => { (): any; new(): any; attr: { (arg0: string, arg1: string): any; new(): any; }; }; }) {
log.info('abc78 DAGA edges = ', dataForLayout); log.info('abc78 DAGA edges = ', dataForLayout);
const edges = dataForLayout.edges; const edges = dataForLayout.edges;
const labelsEl = svg.insert('g').attr('class', 'edgeLabels'); const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
const linkIdCnt = {}; const linkIdCnt: any = {};
const dir = dataForLayout.direction || 'DOWN'; const dir = dataForLayout.direction || 'DOWN';
let defaultStyle; let defaultStyle: string | undefined;
let defaultLabelStyle; let defaultLabelStyle: string | undefined;
await Promise.all( await Promise.all(
edges.map(async function (edge) { edges.map(async function (edge: { id: string; start: string; end: string; length: number; text: undefined; label: any; type: string; stroke: any; interpolate: undefined; style: undefined; labelType: any; }) {
// Identify Link // Identify Link
const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end; const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
// count the links from+to the same node to give unique id // count the links from+to the same node to give unique id
@ -295,7 +294,7 @@ export const addEdges = async function (dataForLayout, graph, svg) {
const linkNameStart = 'LS_' + edge.start; const linkNameStart = 'LS_' + edge.start;
const linkNameEnd = 'LE_' + edge.end; const linkNameEnd = 'LE_' + edge.end;
const edgeData = { style: '', labelStyle: '' }; const edgeData: any = { style: '', labelStyle: '' };
edgeData.minlen = edge.length || 1; edgeData.minlen = edge.length || 1;
edge.text = edge.label; edge.text = edge.label;
// Set link type for rendering // Set link type for rendering
@ -423,7 +422,7 @@ export const addEdges = async function (dataForLayout, graph, svg) {
return graph; return graph;
}; };
function dir2ElkDirection(dir) { function dir2ElkDirection(dir: any) {
switch (dir) { switch (dir) {
case 'LR': case 'LR':
return 'RIGHT'; return 'RIGHT';
@ -453,14 +452,15 @@ function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
} }
} }
export const render = async (data4Layout: LayoutData, svg, element, algorithm) => { export const render = async (data4Layout: LayoutData, svg: { insert: (arg0: string) => { (): any; new(): any; attr: { (arg0: string, arg1: string): any; new(): any; }; }; }, element: any, algorithm: any) => {
// @ts-ignore - ELK is not typed
const elk = new ELK(); const elk = new ELK();
// Add the arrowheads to the svg // Add the arrowheads to the svg
insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId); insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
// Setup the graph with the layout options and the data for the layout // Setup the graph with the layout options and the data for the layout
let elkGraph = { let elkGraph: any = {
id: 'root', id: 'root',
layoutOptions: { layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
@ -489,7 +489,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
// Create the lookup db for the subgraphs and their children to used when creating // Create the lookup db for the subgraphs and their children to used when creating
// the tree structured graph // the tree structured graph
const parentLookupDb = addSubGraphs(data4Layout.nodes); const parentLookupDb: any = addSubGraphs(data4Layout.nodes);
// Add elements in the svg to be used to hold the subgraphs container // Add elements in the svg to be used to hold the subgraphs container
// elements and the nodes // elements and the nodes
@ -510,7 +510,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
// Iterate through all nodes and add the top level nodes to the graph // Iterate through all nodes and add the top level nodes to the graph
const nodes = data4Layout.nodes; const nodes = data4Layout.nodes;
nodes.forEach((n) => { nodes.forEach((n: { id: string | number; }) => {
const node = nodeDb[n.id]; const node = nodeDb[n.id];
// Subgraph // Subgraph
@ -544,7 +544,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
delete node.height; delete node.height;
} }
}); });
elkGraph.edges.forEach((edge) => { elkGraph.edges.forEach((edge: any) => {
const source = edge.sources[0]; const source = edge.sources[0];
const target = edge.targets[0]; const target = edge.targets[0];
@ -560,7 +560,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
// debugger; // debugger;
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0); await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map((edge) => { g.edges?.map((edge: { sources: (string | number)[]; targets: (string | number)[]; start: any; end: any; sections: { startPoint: any, endPoint: any, bendPoints: any; }[]; points: any[]; x: any; labels: { height: number; width: number, x: number, y: number }[]; y: any; }) => {
// (elem, edge, clusterDb, diagramType, graph, id) // (elem, edge, clusterDb, diagramType, graph, id)
const startNode = nodeDb[edge.sources[0]]; const startNode = nodeDb[edge.sources[0]];
const startCluster = parentLookupDb[edge.sources[0]]; const startCluster = parentLookupDb[edge.sources[0]];
@ -586,7 +586,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
const dest = edge.sections[0].endPoint; const dest = edge.sections[0].endPoint;
const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : []; const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
const segPoints = segments.map((segment) => { const segPoints = segments.map((segment: { x: any; y: any; }) => {
return { x: segment.x + offset.x, y: segment.y + offset.y }; return { x: segment.x + offset.x, y: segment.y + offset.y };
}); });
edge.points = [ edge.points = [
@ -714,7 +714,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) =
}); });
}; };
function intersectLine(p1, p2, q1, q2) { function intersectLine(p1: { y: number; x: number; }, p2: { y: number; x: number; }, q1: { x: any; y: any; }, q2: { x: any; y: any; }) {
log.debug('UIO intersectLine', p1, p2, q1, q2); log.debug('UIO intersectLine', p1, p2, q1, q2);
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994, // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
// p7 and p473. // p7 and p473.
@ -776,10 +776,10 @@ function intersectLine(p1, p2, q1, q2) {
return { x: x, y: y }; return { x: x, y: y };
} }
function sameSign(r1, r2) { function sameSign(r1: number, r2: number) {
return r1 * r2 > 0; return r1 * r2 > 0;
} }
const diamondIntersection = (bounds, outsidePoint, insidePoint) => { const diamondIntersection = (bounds: { x: any; y: any; width: any; height: any; }, outsidePoint: { x: number; y: number; }, insidePoint: any) => {
const x1 = bounds.x; const x1 = bounds.x;
const y1 = bounds.y; const y1 = bounds.y;
@ -804,15 +804,12 @@ const diamondIntersection = (bounds, outsidePoint, insidePoint) => {
let minX = Number.POSITIVE_INFINITY; let minX = Number.POSITIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY; let minY = Number.POSITIVE_INFINITY;
if (typeof polyPoints.forEach === 'function') {
polyPoints.forEach(function (entry) { polyPoints.forEach(function (entry) {
minX = Math.min(minX, entry.x); minX = Math.min(minX, entry.x);
minY = Math.min(minY, entry.y); minY = Math.min(minY, entry.y);
}); });
} else {
minX = Math.min(minX, polyPoints.x);
minY = Math.min(minY, polyPoints.y);
}
// const left = x1 - w / 2; // const left = x1 - w / 2;
// const top = y1 + h / 2; // const top = y1 + h / 2;
@ -856,7 +853,7 @@ const diamondIntersection = (bounds, outsidePoint, insidePoint) => {
return intersections[0]; return intersections[0];
}; };
export const intersection = (node, outsidePoint, insidePoint) => { const intersection = (node: { x: any; y: any; width: number; height: number; }, outsidePoint: { x: number; y: number; }, insidePoint: { x: number; y: number; }) => {
log.debug(`intersection calc abc89: log.debug(`intersection calc abc89:
outsidePoint: ${JSON.stringify(outsidePoint)} outsidePoint: ${JSON.stringify(outsidePoint)}
insidePoint : ${JSON.stringify(insidePoint)} insidePoint : ${JSON.stringify(insidePoint)}
@ -925,7 +922,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
return { x: _x, y: _y }; return { x: _x, y: _y };
} }
}; };
const outsideNode = (node, point) => { const outsideNode = (node: { x: any; y: any; width: number; height: number; }, point: { x: number; y: number; }) => {
const x = node.x; const x = node.x;
const y = node.y; const y = node.y;
const dx = Math.abs(point.x - x); const dx = Math.abs(point.x - x);
@ -941,12 +938,12 @@ const outsideNode = (node, point) => {
* This function will page a path and node where the last point(s) in the path is inside the node * This function will page a path and node where the last point(s) in the path is inside the node
* and return an update path ending by the border of the node. * and return an update path ending by the border of the node.
*/ */
const cutPathAtIntersect = (_points, bounds, isDiamond: boolean) => { const cutPathAtIntersect = (_points: any[], bounds: { x: any; y: any; width: any; height: any; padding: any; }, isDiamond: boolean) => {
log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond); log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
const points = []; const points: any[] = [];
let lastPointOutside = _points[0]; let lastPointOutside = _points[0];
let isInside = false; let isInside = false;
_points.forEach((point) => { _points.forEach((point: any) => {
// const node = clusterDb[edge.toCluster].node; // const node = clusterDb[edge.toCluster].node;
log.debug(' checking point', point, bounds); log.debug(' checking point', point, bounds);

18292
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff