From ffe520db06eb5d996cdaecfd745c2ee5c73cb524 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 29 Jul 2022 15:06:21 +0200 Subject: [PATCH] Curved edges --- cypress/integration/rendering/mermaid.spec.js | 75 +++++++++++++++++++ cypress/platform/knsv.html | 16 ++++ src/diagrams/mindmap/mindmapRenderer.js | 12 ++- src/diagrams/mindmap/styles.js | 6 +- src/diagrams/mindmap/svgDraw.js | 36 +++++++-- 5 files changed, 134 insertions(+), 11 deletions(-) create mode 100644 cypress/integration/rendering/mermaid.spec.js diff --git a/cypress/integration/rendering/mermaid.spec.js b/cypress/integration/rendering/mermaid.spec.js new file mode 100644 index 000000000..4b7de3027 --- /dev/null +++ b/cypress/integration/rendering/mermaid.spec.js @@ -0,0 +1,75 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; + +describe('Mindmap', () => { + it('square shape', () => { + imgSnapshotTest( + ` +mindmap + root[ + The root + ] + `, + {} + ); + cy.get('svg'); + }); + it('rounded rect shape', () => { + imgSnapshotTest( + ` +mindmap + root(( + The root + )) + `, + {} + ); + cy.get('svg'); + }); + it('circle shape', () => { + imgSnapshotTest( + ` +mindmap + root( + The root + ) + `, + {} + ); + cy.get('svg'); + }); + it('default shape', () => { + imgSnapshotTest( + ` +mindmap + The root + `, + {} + ); + cy.get('svg'); + }); + it('adding children', () => { + imgSnapshotTest( + ` +mindmap + The root + child1 + child2 + `, + {} + ); + cy.get('svg'); + }); + it('adding grand children', () => { + imgSnapshotTest( + ` +mindmap + The root + child1 + child2 + child3 + `, + {} + ); + cy.get('svg'); + }); +}); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index d295f30ff..0a7c998cf 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -44,6 +44,22 @@ journey Sit down: 5: Mee
+mindmap + The root + C1 + c2 + c3 + C4 + c5 + c6 + C7 + c8 + c9 + C8 + c10 + c11 +
+
mindmap root[ The root where the things diff --git a/src/diagrams/mindmap/mindmapRenderer.js b/src/diagrams/mindmap/mindmapRenderer.js index a32e4d970..bafbcfddc 100644 --- a/src/diagrams/mindmap/mindmapRenderer.js +++ b/src/diagrams/mindmap/mindmapRenderer.js @@ -160,7 +160,9 @@ function layoutMindmap(node, conf) { // const bb = new BoundingBox(10, 10); // const layout = new Layout(bb); // // const layout = new HorizontalLayout(bb); - + if (node.children.length === 0) { + return node; + } const trees = []; // node.children.forEach((child, index) => { // const tree = clone(node); @@ -186,6 +188,13 @@ function layoutMindmap(node, conf) { trees.push(layout(tree, dirFromIndex(i), conf)); } } + // Let each node know the direct of its tree for when we draw the branches. + trees.forEach((tree, index) => { + tree.result.direction = dirFromIndex(index); + eachNode(tree.result, (node) => { + node.direction = dirFromIndex(index); + }); + }); // Merge the trees into a single tree const result = mergeTrees(node, trees); @@ -197,6 +206,7 @@ function layoutMindmap(node, conf) { // res.result.children.push(tree.result); // }); console.log('Trees', trees); + eachNode; return node; } /** diff --git a/src/diagrams/mindmap/styles.js b/src/diagrams/mindmap/styles.js index 1137c3923..63e52b7a6 100644 --- a/src/diagrams/mindmap/styles.js +++ b/src/diagrams/mindmap/styles.js @@ -53,7 +53,7 @@ const getStyles = (options) => stroke-width: 3; } ${genSections(options)} - .section-root rect, .section-root path { + .section-root rect, .section-root path, .section-root circle { fill: ${options.git0}; } .section-root text { @@ -65,6 +65,8 @@ const getStyles = (options) => justify-content: center; align-items: center; } - + .edge { + fill: none; + } `; export default getStyles; diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js index 0fabacb53..9eb7afd8e 100644 --- a/src/diagrams/mindmap/svgDraw.js +++ b/src/diagrams/mindmap/svgDraw.js @@ -126,7 +126,8 @@ export const drawNode = function (elem, node, section, conf) { .attr('text-anchor', 'middle') .call(wrap, node.width); const bbox = txt.node().getBBox(); - node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding; + const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize; + node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding; node.width = bbox.width + 2 * node.padding; if (node.icon) { if (node.type === db.nodeType.CIRCLE) { @@ -206,14 +207,33 @@ export const drawNode = function (elem, node, section, conf) { }; export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section, conf) { + // edgesElem + // .append('line') + // .attr('x1', parent.x + parent.width / 2) + // .attr('y1', parent.y + parent.height / 2) + // .attr('x2', mindmap.x + mindmap.width / 2) + // .attr('y2', mindmap.y + mindmap.height / 2) + // .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth); + + // + + const sx = parent.x + parent.width / 2; + const sy = parent.y + parent.height / 2; + const ex = mindmap.x + mindmap.width / 2; + const ey = mindmap.y + mindmap.height / 2; + const mx = ex > sx ? sx + Math.abs(sx - ex) / 2 : sx - Math.abs(sx - ex) / 2; + const my = ey > sy ? sy + Math.abs(sy - ey) / 2 : sy - Math.abs(sy - ey) / 2; + const qx = ex > sx ? Math.abs(sx - mx) / 2 + sx : -Math.abs(sx - mx) / 2 + sx; + const qy = ey > sy ? Math.abs(sy - my) / 2 + sy : -Math.abs(sy - my) / 2 + sy; + edgesElem - .append('line') - .attr('x1', parent.x + parent.width / 2) - .attr('y1', parent.y + parent.height / 2) - .attr('x2', mindmap.x + mindmap.width / 2) - .attr('y2', mindmap.y + mindmap.height / 2) - // .attr('stroke', color) - // .attr('stroke-width', 15 - depth * 3) + .append('path') + .attr( + 'd', + parent.direction === 'TB' || parent.direction === 'BT' + ? `M${sx},${sy} Q${sx},${qy} ${mx},${my} T${ex},${ey}` + : `M${sx},${sy} Q${qx},${sy} ${mx},${my} T${ex},${ey}` + ) .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth); };