Draft of edge rendering

cypress/platform/knsv.html

@@ -43,6 +43,16 @@ journey
       Sit down: 5: Mee
 </div>
 <div class="mermaid2" style="width: 50%;">
+mindmap
+    root[
+      The root where the things
+      hap<br/>
+      hap<br/>
+      pen!
+    ]
+      Child1
+</div>
+<div class="mermaid2" style="width: 50%;">
 mindmap
     root[
       The root where the things

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

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 };