From 0b2ca29ae859ee45bfe977027a8b48364fb0328a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 25 Jul 2022 17:03:18 +0200
Subject: [PATCH] Theme support for mindmaps

---
 cypress/platform/knsv.html              |  2 +-
 src/diagrams/mindmap/mindmapRenderer.js | 11 ++++---
 src/diagrams/mindmap/styles.js          | 36 ++++++++++++++++++---
 src/diagrams/mindmap/svgDraw.js         | 43 +++++++++----------------
 4 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index bbf0479e8..0cfb1f6e3 100644
--- a/cypress/platform/knsv.html
+++ b/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: {
diff --git a/src/diagrams/mindmap/mindmapRenderer.js b/src/diagrams/mindmap/mindmapRenderer.js
index 2ff6dc2d1..8aa03aed9 100644
--- a/src/diagrams/mindmap/mindmapRenderer.js
+++ b/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
 
diff --git a/src/diagrams/mindmap/styles.js b/src/diagrams/mindmap/styles.js
index eba4ed284..51436d6d7 100644
--- a/src/diagrams/mindmap/styles.js
+++ b/src/diagrams/mindmap/styles.js
@@ -1,9 +1,37 @@
+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) =>
   `
-  .node{
-    stroke: ${options.pieStrokeColor};
-    stroke-width : ${options.pieStrokeWidth};
-    opacity : ${options.pieOpacity};
+  .edge {
+    stroke-width: 3;
   }
+  ${genSections(options)}
+  .section-root rect {
+    fill: ${options.git0};
+  }
+  .section-root text {
+    fill: ${options.gitBranchLabel0};
+  }
+
 `;
 export default getStyles;
diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js
index b153019c1..6182348df 100644
--- a/src/diagrams/mindmap/svgDraw.js
+++ b/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) {