diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 99a94e949..5a5ec6e40 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -43,6 +43,16 @@ journey
Sit down: 5: Mee
+mindmap
+ root[
+ The root where the things
+ hap
+ hap
+ pen!
+ ]
+ Child1
+
+
mindmap
root[
The root where the things
diff --git a/src/diagrams/mindmap/mindmapRenderer.js b/src/diagrams/mindmap/mindmapRenderer.js
index f0e4ec304..f963537cb 100644
--- a/src/diagrams/mindmap/mindmapRenderer.js
+++ b/src/diagrams/mindmap/mindmapRenderer.js
@@ -19,8 +19,25 @@ function drawNodes(svg, mindmap, conf) {
}
}
-/** @param {any} svg The svg element to draw the diagram onto */
-function drawEdges() {}
+/**
+ * @param {any} svg The svg element to draw the diagram onto
+ * @param edgesElem
+ * @param mindmap
+ * @param parent
+ * @param depth
+ * @param section
+ * @param conf
+ */
+function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
+ if (parent) {
+ svgDraw.drawEdge(edgesElem, mindmap, parent, depth, conf);
+ }
+ if (mindmap.children) {
+ mindmap.children.forEach((child, index) => {
+ drawEdges(edgesElem, child, mindmap, depth + 1, section < 0 ? index : section, conf);
+ });
+ }
+}
/**
* @param mindmap
@@ -232,6 +249,8 @@ export const draw = (text, id, version, diagObj) => {
// Draw the graph and start with drawing the nodes without proper position
// this gives us the size of the nodes and we can set the positions later
+ const edgesElem = svg.append('g');
+ edgesElem.attr('class', 'mindmap-edges');
const nodesElem = svg.append('g');
nodesElem.attr('class', 'mindmap-nodes');
drawNodes(nodesElem, mm, conf);
@@ -243,8 +262,7 @@ export const draw = (text, id, version, diagObj) => {
console.log(positionedMindmap);
// After this we can draw, first the edges and the then nodes with the correct position
- // drawEdges(svg, mm, conf);
-
+ drawEdges(edgesElem, positionedMindmap, null, 0, conf);
positionNodes(positionedMindmap, conf);
// Setup the view box and size of the svg element
diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js
index 1853327e9..cb869c801 100644
--- a/src/diagrams/mindmap/svgDraw.js
+++ b/src/diagrams/mindmap/svgDraw.js
@@ -99,6 +99,19 @@ export const drawNode = function (elem, node, conf) {
db.setElementForId(node.id, nodeElem);
return node.height;
};
+
+export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, conf) {
+ edgesElem
+ .append('line')
+ .attr('x1', parent.x)
+ .attr('y1', parent.y + parent.height / 2)
+ .attr('x2', mindmap.x)
+ .attr('y2', mindmap.y + mindmap.height / 2)
+ .attr('stroke', '#88f')
+ .attr('stroke-width', 15 - depth * 3)
+ .attr('class', 'edge ');
+};
+
export const positionNode = function (node, conf) {
const nodeElem = db.getElementById(node.id);
@@ -107,4 +120,5 @@ export const positionNode = function (node, conf) {
// Position the node to its coordinate
nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
};
-export default { drawNode, positionNode };
+
+export default { drawNode, positionNode, drawEdge };