diff --git a/cypress/platform/knsv-pos.html b/cypress/platform/knsv-pos.html index 5785b2bd7..e3789f8c0 100644 --- a/cypress/platform/knsv-pos.html +++ b/cypress/platform/knsv-pos.html @@ -102,9 +102,9 @@ }; let code = ` stateDiagram - S:Stillas - T:Tiger - U:Ulv + S:S + T:T + U:U state Z { state X { Y:Ypsilon @@ -115,13 +115,21 @@ S --> T: angrepp T --> U: Apa T --> V: Varg + + B + C + D + `; + code = ` + stateDiagram + A --> B: Hello `; - const positions = { + let positions = { nodes: { S: { x: 0, y: 0 }, T: { x: 100, y: 100, width: 100, height: 100 }, - U: { x: 200, y: 200 }, + U: { x: 250, y: 160 }, V: { x: 300, y: 120 }, Z: { x: 300, y: 10, width: 160, height: 100 }, X: { x: 300, y: 20, width: 80, height: 60 }, @@ -137,9 +145,17 @@ ], }, edge1: { + // points: [ + // { x: 100, y: 100 }, + // { x: 200, y: 200 }, + // ], points: [ { x: 100, y: 100 }, - { x: 200, y: 200 }, + { x: 150, y: 120 }, + { x: 190.19453144073486, y: 120 }, + { x: 190.19453144073486, y: 152.1556251525879 }, + { x: 230.38906288146973, y: 152.1556251525879 }, + { x: 250, y: 160 }, ], }, edge2: { @@ -153,13 +169,18 @@ }, }; + positions = { + nodes: {}, + edges: {}, + }; + const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions); - if (window?.calcIntersections) { - console.log('Intersections', window.calcIntersections(positions, 'S', 'T')); - } else { - console.error('calcIntersections not found'); - } - // console.log(svg); + // if (window?.calcIntersections) { + // console.log('Intersections', window.calcIntersections(positions, 'T', 'U')); + // } else { + // console.error('calcIntersections not found'); + // } + console.log(JSON.stringify(positions)); const elem = document.querySelector('#diagram'); elem.innerHTML = svg; diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 623f7bc7b..eca33f76e 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/mermaid", - "version": "11.0.0-b.67", + "version": "11.0.0-b.72", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js index 269c37d01..f2d84c9ba 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js @@ -45,9 +45,21 @@ const calcIntersectionPoint = (node, point) => { return { x: intersection.x, y: intersection.y, pos }; }; -const calcIntersections = (points, startNodeId, endNodeId) => { +const calcIntersections = (points, startNodeId, endNodeId, startNodeSize, endNodeSize) => { const startNode = nodeDB.get(startNodeId); + if (startNodeSize) { + startNode.x = startNodeSize.width; + startNode.y = startNodeSize.width; + startNode.width = startNodeSize.width; + startNode.height = startNodeSize.height; + } const endNode = nodeDB.get(endNodeId); + if (endNodeSize) { + endNode.x = endNodeSize.width; + endNode.y = endNodeSize.width; + endNode.width = endNodeSize.width; + endNode.height = endNodeSize.height; + } // Get the intersections const startIntersection = calcIntersectionPoint(startNode, { x: endNode.x, y: endNode.y }); const endIntersection = calcIntersectionPoint(endNode, { x: startNode.x, y: startNode.y }); @@ -62,6 +74,15 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => { const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); const nodes = elem.insert('g').attr('class', 'nodes'); + if (!positions?.nodes || !positions?.edges) { + positions = {}; + if (!positions?.nodes) { + positions.nodes = {}; + } + if (!positions?.edges) { + positions.edges = {}; + } + } // Add positions for nodes that lack them let maxY = 0; data4Layout.nodes.map(function (node) {