Adding circle node type and class handling

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

src/defaultConfig.js

@@ -1820,7 +1820,7 @@ const config = {
   },
   mindmap: {
     useMaxWidth: true,
-    padding: 50,
+    padding: 10,
     maxNodeWidth: 200,
   },
 };

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

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;

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