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

#5237 Adjustment for different sematics between dagre and elk positioning

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-05-06 16:21:25 +02:00
parent 323737f3a6
commit d497a5c4ac
4 changed files with 106 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
cypress/platform/knsv2.html
View File

@ -74,13 +74,44 @@
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2 stateDiagram-v2
Chimp --> A state ProActive {
Chimp --> B state Active {
Chimp --> C APA
}
}
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
</pre
>
<pre id="diagram" class="mermaid">
stateDiagram-v2
state ProActive {
state Active {
Chimp --> A
Chimp --> B
Chimp --> C
}
}
</pre
>
<pre id="diagram" class="mermaid2">
--- ---
handdrawn: false handdrawn: false
--- ---

25
packages/mermaid/src/rendering-util/layout-algorithms/elk/find-common-ancestor.ts Normal file
View File

@ -0,0 +1,25 @@
export interface TreeData {
parentById: Record<string, string>;
childrenById: Record<string, string[]>;
}
export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
const { parentById } = treeData;
const visited = new Set();
let currentId = id1;
while (currentId) {
visited.add(currentId);
if (currentId === id2) {
return currentId;
}
currentId = parentById[currentId];
}
currentId = id2;
while (currentId) {
if (visited.has(currentId)) {
return currentId;
}
currentId = parentById[currentId];
}
return 'root';
};

63
packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js
View File

@ -1,6 +1,7 @@
import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import insertMarkers from '../../rendering-elements/markers.js'; import insertMarkers from '../../rendering-elements/markers.js';
import { findCommonAncestor } from './find-common-ancestor.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
import { import {
insertNode, insertNode,
@ -129,30 +130,14 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
if (node.type === 'group') { if (node.type === 'group') {
log.debug('Id abc88 subgraph (DAGA)= ', node.id, node.x, node.y, node.labelData); log.debug('Id abc88 subgraph (DAGA)= ', node.id, node.x, node.y, node.labelData);
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph'); const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
const useOrg = false; const clusterNode = JSON.parse(JSON.stringify(node));
if (useOrg) { clusterNode.x = node.offset.posX + node.width / 2;
subgraphEl clusterNode.y = node.offset.posY + node.height / 2;
.insert('rect') // clusterNode.y = node.y + node.height / 2;
.attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node') const cluster = insertCluster(subgraphEl, clusterNode);
.attr('x', node.x + relX) // const bbox = cluster.node().getBBox();
.attr('y', node.y + relY) // node.x -= bbox.width / 2 - 2; // Magic number 2... why??? WHY???
.attr('width', node.width) // node.y -= bbox.height / 2;
.attr('height', node.height);
const label = subgraphEl.insert('g').attr('class', 'label');
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
label.attr(
'transform',
`translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
node.labels[0].y + relY + node.y + 3
})`
);
label.node().appendChild(node.labelData.labelNode);
} else {
const cluster = insertCluster(subgraphEl, node);
const bbox = cluster.node().getBBox();
node.x -= bbox.width / 2 - 2; // Magic number 2... why??? WHY???
node.y -= bbox.height / 2;
}
log.info('Id (UGH)= ', node.shape, node.labels); log.info('Id (UGH)= ', node.shape, node.labels);
} else { } else {
log.info( log.info(
@ -298,6 +283,17 @@ const getEdgeStartEndPoint = (edge, dir) => {
return { source, target, sourceId, targetId }; return { source, target, sourceId, targetId };
}; };
const calcOffset = function (src, dest, parentLookupDb) {
console.log('DAGA src dest', src, dest, parentLookupDb);
const ancestor = findCommonAncestor(src, dest, parentLookupDb);
if (ancestor === undefined || ancestor === 'root') {
return { x: 0, y: 0 };
}
const ancestorOffset = nodeDb[ancestor].offset;
return { x: ancestorOffset.posX, y: ancestorOffset.posY };
};
/** /**
* Add edges to graph based on parsed graph definition * Add edges to graph based on parsed graph definition
* *
@ -552,12 +548,19 @@ export const render = async (data4Layout, svg, element) => {
log.info('before layout abc88', JSON.stringify(elkGraph, null, 2)); log.info('before layout abc88', JSON.stringify(elkGraph, null, 2));
const g = await elk.layout(elkGraph); const g = await elk.layout(elkGraph);
log.info('after layout abc88 DAGA', g); log.info('after layout abc88 DAGA', g);
// debugger;
drawNodes(0, 0, g.children, svg, subGraphsEl, 0); drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map((edge) => { g.edges?.map((edge) => {
// (elem, edge, clusterDb, diagramType, graph, id) // (elem, edge, clusterDb, diagramType, graph, id)
edge.start = nodeDb[edge.sources[0]]; edge.start = nodeDb[edge.sources[0]];
edge.end = nodeDb[edge.targets[0]]; edge.end = nodeDb[edge.targets[0]];
const offset = { x: 0, y: 0 }; const sourceId = edge.start.id;
const targetId = edge.end.id;
const offset = calcOffset(sourceId, targetId, parentLookupDb);
// const offset = { x: 50, y: 25 };
const src = edge.sections[0].startPoint; const src = edge.sections[0].startPoint;
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 : [];
@ -570,6 +573,16 @@ export const render = async (data4Layout, svg, element) => {
...segPoints, ...segPoints,
{ x: dest.x + offset.x, y: dest.y + offset.y }, { x: dest.x + offset.x, y: dest.y + offset.y },
]; ];
console.log(
'DAGA org points: ',
[
{ x: src.x, y: src.y },
{ x: dest.x, y: dest.y },
],
'points: ',
edge.points
);
insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId); insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
}); });
}; };

10
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@ -375,6 +375,16 @@ const cutPathAtIntersect = (_points, boundryNode) => {
return points; return points;
}; };
const calcOffset = function (src, dest, parentLookupDb) {
const ancestor = findCommonAncestor(src, dest, parentLookupDb);
if (ancestor === undefined || ancestor === 'root') {
return { x: 0, y: 0 };
}
const ancestorOffset = nodeDb[ancestor].offset;
return { x: ancestorOffset.posX, y: ancestorOffset.posY };
};
export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) { export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) {
console.log('abc88 InsertEdge - edge: ', edge); console.log('abc88 InsertEdge - edge: ', edge);
let points = edge.points; let points = edge.points;