Adding default node form

cypress/platform/knsv.html

@@ -79,7 +79,7 @@ mindmap
           sc3
         GrandChild2
 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid" style="width: 100%;">
 mindmap
     root[
       The root where the things
@@ -365,7 +365,7 @@ flowchart TD
       };
       mermaid.initialize({
         // theme: 'dark',
-        theme: 'neutral',
+        // theme: 'base',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         flowchart: {

src/Diagram.js

@@ -32,6 +32,7 @@ class Diagram {
       const error = { str, hash };
       throw error;
     };
+    this.db.clear();
     this.parser.parse(this.txt);
   }
   parse(text) {

src/diagrams/mindmap/mindmapDb.js

@@ -98,6 +98,22 @@ export const decorateNode = (decoration) => {
     node.class = sanitizeText(decoration.class);
   }
 };
+
+const type2Str = (type) => {
+  switch (type) {
+    case nodeType.DEFAULT:
+      return 'no-border';
+    case nodeType.RECT:
+      return 'rect';
+    case nodeType.ROUNDED_RECT:
+      return 'rounded-rect';
+    case nodeType.CIRCLE:
+      return 'circle';
+    default:
+      return 'no-border';
+  }
+};
+
 export default {
   getMindmap,
   addNode,
@@ -109,5 +125,6 @@ export default {
   getElementById: (id) => elements[id],
   // getNodeById: (id) => nodes.find((node) => node.id === id),
   getNodeById: (id) => nodes[id],
+  type2Str,
   // parseError
 };

src/diagrams/mindmap/styles.js

@@ -1,9 +1,21 @@
+import { darken, lighten, adjust, invert, isDark } from 'khroma';
+
 const genSections = (options) => {
   let sections = '';
+
+  for (let i = 0; i < 8; i++) {
+    options['lineColor' + i] = options['lineColor' + i] || options['gitBranchLabel' + i];
+    if (isDark(options['lineColor' + i])) {
+      options['lineColor' + i] = lighten(options['lineColor' + i], 30);
+    } else {
+      options['lineColor' + i] = darken(options['lineColor' + i], 30);
+    }
+  }
+
   for (let i = 1; i < 8; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
-    .section-${i - 1} rect {
+    .section-${i - 1} rect, .section-${i - 1} path {
       fill: ${options['git' + i]};
     }
     .section-${i - 1} text {
@@ -15,6 +27,10 @@ const genSections = (options) => {
     .edge-depth-${i - 1}{
       stroke-width: ${sw};
     }
+    .section-${i - 1} line {
+      stroke: ${options['lineColor' + i]} ;
+      stroke-width: 3;
+    }
     `;
   }
   return sections;
@@ -26,7 +42,7 @@ const getStyles = (options) =>
     stroke-width: 3;
   }
   ${genSections(options)}
-  .section-root rect {
+  .section-root rect, .section-root path {
     fill: ${options.git0};
   }
   .section-root text {

src/diagrams/mindmap/svgDraw.js

@@ -48,6 +48,37 @@ function wrap(text, width) {
     }
   });
 }
+
+const defaultBkg = function (elem, node, section, conf) {
+  const rd = 5;
+  const r = elem
+    .append('path')
+    .attr('id', 'node-' + node.id)
+    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
+    .attr(
+      'd',
+      `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${
+        node.width - 2 * rd
+      } q5,0 5,5 v${node.height - rd} H0 Z`
+    );
+
+  elem
+    .append('line')
+    .attr('class', 'node-line-' + section)
+    .attr('x1', 0)
+    .attr('y1', node.height)
+    .attr('x2', node.width)
+    .attr('y2', node.height);
+};
+const rectBkg = function (elem, node, section, conf) {
+  const r = elem
+    .append('rect')
+    .attr('id', 'node-' + node.id)
+    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
+    .attr('height', node.height)
+    .attr('width', node.width);
+};
+
 /**
  * @param {object} elem The D3 dom element in which the node is to be added
  * @param {object} node The node to be added
@@ -61,29 +92,10 @@ export const drawNode = function (elem, node, section, conf) {
     'class',
     'mindmap-node ' + (section === -1 ? 'section-root' : 'section-' + section)
   );
+  const bkgElem = nodeElem.append('g');
 
-  const rect = {
-    fill: '#EDF2AE',
-    stroke: '#666',
-    width: node.width,
-    anchor: 'start',
-    height: 100,
-    rx: 3,
-    ry: 3,
-  };
-
-  const r = nodeElem
-    .append('rect')
-    // .attr('width', node.width)
-    // .attr('fill', section === -1 ? rect.fill : section2Color(section))
-    // .attr('stroke', section === -1 ? rect.stroke : 0)
-    .attr('rx', rect.rx)
-    .attr('ry', rect.ry)
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg ');
-
+  // Create the wrapped text element
   const textElem = nodeElem.append('g');
-
   const txt = textElem
     .append('text')
     .text(node.descr)
@@ -95,10 +107,28 @@ export const drawNode = function (elem, node, section, conf) {
   const bbox = txt.node().getBBox();
   node.height = bbox.height + conf.fontSize * 1.1 * 0.5;
   node.width = bbox.width + conf.fontSize * 1.1 * 0.5;
-  r.attr('height', node.height).attr('width', node.width);
+
   textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + 0 + ')');
+
+  switch (node.type) {
+    case db.nodeType.DEFAULT:
+      defaultBkg(bkgElem, node, section, conf);
+      break;
+    case db.nodeType.ROUNDED_RECT:
+      rectBkg(bkgElem, node, section, conf);
+      break;
+    case db.nodeType.RECT:
+      rectBkg(bkgElem, node, section, conf);
+      break;
+    case db.nodeType.CIRCLE:
+      rectBkg(bkgElem, node, section, conf);
+      break;
+    default:
+    // defaultBkg(bkgElem, node, section, conf);
+  }
+
   // Position the node to its coordinate
-  if (node.x || node.y) {
+  if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
     nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
   }
   db.setElementForId(node.id, nodeElem);