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, clear as clearNodes,
setNodeElem, setNodeElem,
} from '../../rendering-elements/nodes.js'; } 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 { import {
insertEdgeLabel, insertEdgeLabel,
positionEdgeLabel, positionEdgeLabel,
@@ -26,7 +30,7 @@ let portPos = {};
let clusterDb = {}; let clusterDb = {};
export const addVertex = async (nodeEl, graph, nodeArr, node) => { export const addVertex = async (nodeEl, graph, nodeArr, node) => {
console.log('addVertex abc88', node.id); console.log('addVertex DAGA', node.id);
// const node = vert[id]; // const node = vert[id];
// /** // /**
@@ -112,15 +116,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
labelData.wrappingWidth = getConfig().flowchart.wrappingWidth; labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
labelData.height = bbox.height; labelData.height = bbox.height;
labelData.labelNode = shapeSvg.node(); labelData.labelNode = shapeSvg.node();
log.debug( log.debug('addVertex DAGA setting labelData', node.id, labelData, nodeEl, node, shapeSvg, bbox);
'addVertex abc88 setting labelData',
node.id,
labelData,
nodeEl,
node,
shapeSvg,
bbox
);
child.labelData = labelData; child.labelData = labelData;
child.domId = nodeEl; child.domId = nodeEl;
} }
@@ -190,7 +186,7 @@ export const addVertex = async (nodeEl, graph, nodeArr, node) => {
// */ // */
export const addVertices = async function (nodeEl, nodeArr, graph, parentId) { export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
const siblings = nodeArr.filter((node) => node.parentId === 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 // 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) => {
@@ -201,7 +197,6 @@ export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
}; };
const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => { const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
console.log('drawNodes abc88', relX, relY, nodeArray);
nodeArray.forEach(function (node) { nodeArray.forEach(function (node) {
if (node) { if (node) {
nodeDb[node.id] = node; nodeDb[node.id] = node;
@@ -215,30 +210,36 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
height: node.height, height: node.height,
}; };
if (node.type === 'group') { 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'); const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
subgraphEl const useOrg = false;
.insert('rect') if (useOrg) {
.attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node') subgraphEl
.attr('x', node.x + relX) .insert('rect')
.attr('y', node.y + relY) .attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node')
.attr('width', node.width) .attr('x', node.x + relX)
.attr('height', node.height); .attr('y', node.y + relY)
const label = subgraphEl.insert('g').attr('class', 'label'); .attr('width', node.width)
const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0; .attr('height', node.height);
console.log(node); const label = subgraphEl.insert('g').attr('class', 'label');
label.attr( const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
'transform', label.attr(
`translate(${node.labels[0].x + relX + node.x + labelCentering}, ${ 'transform',
node.labels[0].y + relY + node.y + 3 `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
})` node.labels[0].y + relY + node.y + 3
); })`
label.node().appendChild(node.labelData.labelNode); );
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(
'Id (UGH)= ', 'Id NODE (DAGA)= ',
node.id, node.id,
node.x, node.x,
node.y, 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 // Iterate through all nodes and add the top level nodes to the graph
const nodes = data4Layout.nodes; const nodes = data4Layout.nodes;
// const nodes = Object.keys(nodeDb);
nodes.forEach((n) => { nodes.forEach((n) => {
const node = nodeDb[n.id]; const node = nodeDb[n.id];
@@ -631,8 +631,6 @@ export const render = async (data4Layout, svg, element) => {
}, },
width: node?.labelData?.width || 100, width: node?.labelData?.width || 100,
height: node?.labelData?.height || 100, height: node?.labelData?.height || 100,
// width: 100,
// height: 100,
}, },
]; ];
delete node.x; delete node.x;
@@ -644,7 +642,7 @@ 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', g); log.info('after layout abc88 DAGA', g);
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)
@@ -665,17 +663,6 @@ export const render = async (data4Layout, svg, element) => {
]; ];
insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId); insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
}); });
// setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
// // Remove element after layout // // Remove element after layout
// renderEl.remove(); // 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) => { export const insertCluster = (elem, node) => {
log.trace('Inserting cluster'); log.trace('Inserting cluster');
const shape = node.shape || 'rect'; 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) => { export const getClusterTitleWidth = (elem, node) => {
const label = createLabel(node.labelText, node.labelStyle, undefined, true); const label = createLabel(node.labelText, node.labelStyle, undefined, true);