From 82a480d924446fd1773d782a48b60b96b7a0e360 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 27 Jul 2022 17:25:20 +0200
Subject: [PATCH] Adding circle node type and class handling

---
 cypress/platform/knsv.html        | 10 +++++++---
 src/defaultConfig.js              |  2 +-
 src/diagrams/mindmap/mindmapDb.js | 11 +++++++++++
 src/diagrams/mindmap/styles.js    |  9 ++++++++-
 src/diagrams/mindmap/svgDraw.js   | 29 +++++++++++++++++++++--------
 5 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 49a16d82e..72df620e6 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -7,6 +7,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -93,8 +94,9 @@ mindmap
       Child3(Child 3 has a long wrapped text as well)
         GrandChild3
         GrandChild4
-      Child4
-        GrandChild5
+      Child4((Child Num 4<br>with<br>wrap text))
+        GrandChild5[With icon]
+        :::(mdi mdi-numeric-8-circle)
         GrandChild6
       Child1
         GrandChild1
@@ -102,7 +104,9 @@ mindmap
           sc2
           sc3
         GrandChild2
-      Child5
+      Child5((Child5))
+      :::disabled
+
         GrandChild7
           sc1
           sc2
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index 5b0185595..312159497 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -1820,7 +1820,7 @@ const config = {
   },
   mindmap: {
     useMaxWidth: true,
-    padding: 50,
+    padding: 10,
     maxNodeWidth: 200,
   },
 };
diff --git a/src/diagrams/mindmap/mindmapDb.js b/src/diagrams/mindmap/mindmapDb.js
index 54fee3cdd..846a9651c 100644
--- a/src/diagrams/mindmap/mindmapDb.js
+++ b/src/diagrams/mindmap/mindmapDb.js
@@ -28,6 +28,7 @@ export const getMindmap = () => {
   return nodes.length > 0 ? nodes[0] : null;
 };
 export const addNode = (level, id, descr, type) => {
+  const conf = getConfig();
   const node = {
     id: cnt++,
     nodeId: sanitizeText(id),
@@ -37,6 +38,16 @@ export const addNode = (level, id, descr, type) => {
     children: [],
     width: getConfig().mindmap.maxNodeWidth,
   };
+  switch (node.type) {
+    case nodeType.ROUNDED_RECT:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
+    case nodeType.RECT:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
+    default:
+      node.padding = conf.mindmap.padding;
+  }
   const parent = getParent(level);
   if (parent) {
     parent.children.push(node);
diff --git a/src/diagrams/mindmap/styles.js b/src/diagrams/mindmap/styles.js
index bda463c32..86d9fe621 100644
--- a/src/diagrams/mindmap/styles.js
+++ b/src/diagrams/mindmap/styles.js
@@ -15,7 +15,7 @@ const genSections = (options) => {
   for (let i = 1; i < 8; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
-    .section-${i - 1} rect, .section-${i - 1} path {
+    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle  {
       fill: ${options['git' + i]};
     }
     .section-${i - 1} text {
@@ -31,6 +31,13 @@ const genSections = (options) => {
       stroke: ${options['lineColor' + i]} ;
       stroke-width: 3;
     }
+
+    .disabled, .disabled circle, .disabled text {
+      fill: lightgray;
+    }
+    .disabled text {
+      fill: #efefef;
+    }
     `;
   }
   return sections;
diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js
index 3fcc744dd..a4ce77b82 100644
--- a/src/diagrams/mindmap/svgDraw.js
+++ b/src/diagrams/mindmap/svgDraw.js
@@ -78,14 +78,22 @@ const rectBkg = function (elem, node, section, conf) {
     .attr('height', node.height)
     .attr('width', node.width);
 };
+const circleBkg = function (elem, node, section, conf) {
+  const r = elem
+    .append('circle')
+    .attr('id', 'node-' + node.id)
+    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
+    .attr('r', node.width / 2);
+  // .attr('width', node.width);
+};
 const roundedRectBkg = 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('rx', conf.mindmap.padding)
-    .attr('ry', conf.mindmap.padding)
+    .attr('rx', node.padding)
+    .attr('ry', node.padding)
     .attr('width', node.width);
 };
 
@@ -100,7 +108,9 @@ export const drawNode = function (elem, node, section, conf) {
   const nodeElem = elem.append('g');
   nodeElem.attr(
     'class',
-    'mindmap-node ' + (section === -1 ? 'section-root' : 'section-' + section)
+    (node.class ? node.class + ' ' : '') +
+      'mindmap-node ' +
+      (section === -1 ? 'section-root' : 'section-' + section)
   );
   const bkgElem = nodeElem.append('g');
 
@@ -116,12 +126,14 @@ export const drawNode = function (elem, node, section, conf) {
     .attr('text-anchor', 'middle')
     .call(wrap, node.width);
   const bbox = txt.node().getBBox();
-  node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + conf.mindmap.padding;
-  node.width = bbox.width + 2 * conf.mindmap.padding;
+  node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding;
+  node.width = bbox.width + 2 * node.padding;
 
   // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.height / 2 + ')');
-  textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + conf.mindmap.padding / 2 + ')');
-
+  textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+  {
+    /* <i class="mdi mdi-arrange-bring-to-front"></i> */
+  }
   switch (node.type) {
     case db.nodeType.DEFAULT:
       defaultBkg(bkgElem, node, section, conf);
@@ -133,7 +145,8 @@ export const drawNode = function (elem, node, section, conf) {
       rectBkg(bkgElem, node, section, conf);
       break;
     case db.nodeType.CIRCLE:
-      rectBkg(bkgElem, node, section, conf);
+      bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
+      circleBkg(bkgElem, node, section, conf);
       break;
     default:
     // defaultBkg(bkgElem, node, section, conf);