marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Support for composit states WIP, rough

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-06 13:09:57 +02:00
parent 853948a93d
commit 16cd7bf649
2 changed files with 38 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,11 @@ import {
clear as clearNodes,
setNodeElem,
} from '../../rendering-elements/nodes.js';
import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
import {
insertCluster,
clear as clearClusters,
positionCluster,
} from '../../rendering-elements/clusters.js';
import {
insertEdgeLabel,
positionEdgeLabel,
@@ -26,7 +30,7 @@ let portPos = {};
let clusterDb = {};
export const addVertex = async (nodeEl, graph, nodeArr, node) => {
console.log('addVertex abc88', node.id);
console.log('addVertex DAGA', node.id);
// const node = vert[id];
// /**
@@ -112,15 +116,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
labelData.height = bbox.height;
labelData.labelNode = shapeSvg.node();
log.debug(
'addVertex abc88 setting labelData',
node.id,
labelData,
nodeEl,
node,
shapeSvg,
bbox
);
log.debug('addVertex DAGA setting labelData', node.id, labelData, nodeEl, node, shapeSvg, bbox);
child.labelData = labelData;
child.domId = nodeEl;
}
@@ -190,7 +186,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
// */
export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
const siblings = nodeArr.filter((node) => node.parentId === parentId);
log.info('addVertices', siblings, parentId);
log.info('addVertices DAGA', siblings, parentId);
// Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
await Promise.all(
siblings.map(async (node) => {
@@ -201,7 +197,6 @@ export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
};
const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
console.log('drawNodes abc88', relX, relY, nodeArray);
nodeArray.forEach(function (node) {
if (node) {
nodeDb[node.id] = node;
@@ -215,30 +210,36 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
height: node.height,
};
if (node.type === 'group') {
log.debug('Id abc88 subgraph (UGH)= ', 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');
subgraphEl
.insert('rect')
.attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node')
.attr('x', node.x + relX)
.attr('y', node.y + relY)
.attr('width', node.width)
.attr('height', node.height);
const label = subgraphEl.insert('g').attr('class', 'label');
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
console.log(node);
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);
const useOrg = false;
if (useOrg) {
subgraphEl
.insert('rect')
.attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node')
.attr('x', node.x + relX)
.attr('y', node.y + relY)
.attr('width', node.width)
.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);
} else {
log.info(
'Id (UGH)= ',
'Id NODE (DAGA)= ',
node.id,
node.x,
node.y,
@@ -617,7 +618,6 @@ export const render = async (data4Layout, svg, element) => {
// Iterate through all nodes and add the top level nodes to the graph
const nodes = data4Layout.nodes;
// const nodes = Object.keys(nodeDb);
nodes.forEach((n) => {
const node = nodeDb[n.id];
@@ -631,8 +631,6 @@ export const render = async (data4Layout, svg, element) => {
},
width: node?.labelData?.width || 100,
height: node?.labelData?.height || 100,
// width: 100,
// height: 100,
},
];
delete node.x;
@@ -644,7 +642,7 @@ export const render = async (data4Layout, svg, element) => {
log.info('before layout abc88', JSON.stringify(elkGraph, null, 2));
const g = await elk.layout(elkGraph);
log.info('after layout abc88', g);
log.info('after layout abc88 DAGA', g);
drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map((edge) => {
// (elem, edge, clusterDb, diagramType, graph, id)
@@ -665,17 +663,6 @@ export const render = async (data4Layout, svg, element) => {
];
insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
});
// setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
// // Remove element after layout
// renderEl.remove();
};
// const shapeDefinitions = {};
// export const addShape = ({ shapeType: fun }) => {
// shapeDefinitions[shapeType] = fun;
// };
// const arrowDefinitions = {};
// export const addArrow = ({ arrowType: fun }) => {
// arrowDefinitions[arrowType] = fun;
// };

4
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@@ -267,7 +267,9 @@ let clusterElems = {};
export const insertCluster = (elem, node) => {
log.trace('Inserting cluster');
const shape = node.shape || 'rect';
clusterElems[node.id] = shapes[shape](elem, node);
const cluster = shapes[shape](elem, node);
clusterElems[node.id] = cluster;
return cluster;
};
export const getClusterTitleWidth = (elem, node) => {
const label = createLabel(node.labelText, node.labelStyle, undefined, true);