Theme support for mindmaps

cypress/platform/knsv.html

@@ -365,7 +365,7 @@ flowchart TD
       };
       mermaid.initialize({
         // theme: 'dark',
-        // theme: 'forest',
+        theme: 'neutral',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         flowchart: {

src/diagrams/mindmap/mindmapRenderer.js

@@ -8,13 +8,14 @@ import db from './mindmapDb';
 /**
  * @param {any} svg The svg element to draw the diagram onto
  * @param {object} mindmap The maindmap data and hierarchy
+ * @param section
  * @param {object} conf The configuration object
  */
-function drawNodes(svg, mindmap, conf) {
-  svgDraw.drawNode(svg, mindmap, conf);
+function drawNodes(svg, mindmap, section, conf) {
+  svgDraw.drawNode(svg, mindmap, section, conf);
   if (mindmap.children) {
-    mindmap.children.forEach((child) => {
-      drawNodes(svg, child, conf);
+    mindmap.children.forEach((child, index) => {
+      drawNodes(svg, child, section < 0 ? index : section, conf);
     });
   }
 }
@@ -253,7 +254,7 @@ export const draw = (text, id, version, diagObj) => {
     edgesElem.attr('class', 'mindmap-edges');
     const nodesElem = svg.append('g');
     nodesElem.attr('class', 'mindmap-nodes');
-    drawNodes(nodesElem, mm, conf);
+    drawNodes(nodesElem, mm, -1, conf);
 
     // Next step is to layout the mindmap, giving each node a position
 

src/diagrams/mindmap/styles.js

@@ -1,9 +1,37 @@
-const getStyles = (options) =>
-  `
-  .node{
-    stroke: ${options.pieStrokeColor};
-    stroke-width : ${options.pieStrokeWidth};
-    opacity : ${options.pieOpacity};
+const genSections = (options) => {
+  let sections = '';
+  for (let i = 1; i < 8; i++) {
+    const sw = '' + (17 - 3 * i);
+    sections += `
+    .section-${i - 1} rect {
+      fill: ${options['git' + i]};
+    }
+    .section-${i - 1} text {
+     fill: ${options['gitBranchLabel' + i]};
+    }
+    .section-edge-${i - 1}{
+      stroke: ${options['git' + i]};
+    }
+    .edge-depth-${i - 1}{
+      stroke-width: ${sw};
     }
     `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  .edge {
+    stroke-width: 3;
+  }
+  ${genSections(options)}
+  .section-root rect {
+    fill: ${options.git0};
+  }
+  .section-root text {
+    fill: ${options.gitBranchLabel0};
+  }
+
+`;
 export default getStyles;

src/diagrams/mindmap/svgDraw.js

@@ -51,12 +51,16 @@ function wrap(text, width) {
 /**
  * @param {object} elem The D3 dom element in which the node is to be added
  * @param {object} node The node to be added
+ * @param section
  * @param {object} conf The configuration object
  * @returns {number} The height nodes dom element
  */
-export const drawNode = function (elem, node, conf) {
+export const drawNode = function (elem, node, section, conf) {
   const nodeElem = elem.append('g');
-  nodeElem.attr('class', 'mindmap-node');
+  nodeElem.attr(
+    'class',
+    'mindmap-node ' + (section === -1 ? 'section-root' : 'section-' + section)
+  );
 
   const rect = {
     fill: '#EDF2AE',
@@ -70,12 +74,13 @@ export const drawNode = function (elem, node, conf) {
 
   const r = nodeElem
     .append('rect')
-
     // .attr('width', node.width)
-    .attr('fill', rect.fill)
-    .attr('stroke', rect.stroke)
+    // .attr('fill', section === -1 ? rect.fill : section2Color(section))
+    // .attr('stroke', section === -1 ? rect.stroke : 0)
     .attr('rx', rect.rx)
-    .attr('ry', rect.ry);
+    .attr('ry', rect.ry)
+    .attr('id', 'node-' + node.id)
+    .attr('class', 'node-bkg ');
 
   const textElem = nodeElem.append('g');
 
@@ -99,35 +104,17 @@ export const drawNode = function (elem, node, conf) {
   db.setElementForId(node.id, nodeElem);
   return node.height;
 };
-const section2Color = function (section) {
-  switch (section) {
-    case 0:
-      return '#88f';
-    case 1:
-      return '#f88';
-    case 2:
-      return '#8f8';
-    case 3:
-      return '#f8f';
-    case 4:
-      return '#ff8';
-    case 5:
-      return '#8ff';
-    default:
-      return '#88f';
-  }
-};
+
 export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section, conf) {
-  const color = section2Color(section);
   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)
-    .attr('class', 'edge ');
+    // .attr('stroke', color)
+    // .attr('stroke-width', 15 - depth * 3)
+    .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
 };
 
 export const positionNode = function (node, conf) {