Refactoring and cleanup including updated unit tests

packages/mermaid/src/diagrams/kanban/kanban.spec.ts

@@ -1,6 +1,7 @@
 // @ts-expect-error No types available for JISON
 import { parser as kanban } from './parser/kanban.jison';
 import kanbanDB from './kanbanDb.js';
+import type { KanbanNode } from '../../rendering-util/types.js';
 // Todo fix utils functions for tests
 import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 
@@ -18,7 +19,7 @@ describe('when parsing a kanban ', function () {
       kanban.parse(str);
       const sections = kanban.yy.getSections();
       expect(sections.length).toEqual(1);
-      expect(sections[0].descr).toEqual('root');
+      expect(sections[0].label).toEqual('root');
     });
     it('KNBN-2 should handle a hierachial kanban definition', function () {
       const str = `kanban
@@ -28,12 +29,16 @@ describe('when parsing a kanban ', function () {
  `;
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
+
       expect(sections.length).toEqual(1);
-      expect(sections[0].descr).toEqual('root');
+      expect(sections[0].label).toEqual('root');
-      expect(sections[0].children.length).toEqual(2);
+      expect(children.length).toEqual(2);
-      expect(sections[0].children[0].descr).toEqual('child1');
+      expect(children[0].label).toEqual('child1');
-      expect(sections[0].children[1].descr).toEqual('child2');
+      expect(children[1].label).toEqual('child2');
     });
 
     /** CATCH case when a lower level comes later, should throw
@@ -48,7 +53,7 @@ describe('when parsing a kanban ', function () {
 
       kanban.parse(str);
       const sections = kanban.yy.getSections();
-      expect(sections[0].descr).toEqual('root');
+      expect(sections[0].label).toEqual('root');
     });
 
     it('KNBN-4 should not dsitinguis between deeper hierachial levels in thr kanban definition', function () {
@@ -64,19 +69,27 @@ describe('when parsing a kanban ', function () {
       // );
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
+
       expect(sections.length).toBe(1);
-      expect(sections[0].children.length).toBe(3);
+      expect(children.length).toBe(3);
     });
     it('5 Multiple sections are ok', function () {
       const str = `kanban
     section1
     section2`;
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
+
       expect(sections.length).toBe(2);
-      expect(sections[0].descr).toBe('section1');
+      expect(sections[0].label).toBe('section1');
-      expect(sections[1].descr).toBe('section2');
+      expect(sections[1].label).toBe('section2');
 
       // expect(() => kanban.parse(str)).toThrow(
       //   'There can be only one root. No parent could be found for ("fakeRoot")'
@@ -99,10 +112,13 @@ describe('when parsing a kanban ', function () {
       `;
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('The root');
+
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.RECT);
+      expect(sections[0].id).toEqual('root');
+      expect(sections[0].label).toEqual('The root');
     });
     it('KNBN-8 should handle an id and type for a node definition', function () {
       const str = `kanban
@@ -110,13 +126,16 @@ describe('when parsing a kanban ', function () {
       theId(child1)`;
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].descr).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].children.length).toEqual(1);
+
-      const child = sections[0].children[0];
+      expect(sections[0].label).toEqual('root');
-      expect(child.descr).toEqual('child1');
+      expect(children.length).toEqual(1);
-      expect(child.nodeId).toEqual('theId');
+      const child = children[0];
-      expect(child.type).toEqual(kanban.yy.nodeType.ROUNDED_RECT);
+      expect(child.label).toEqual('child1');
+      expect(child.id).toEqual('theId');
     });
     it('KNBN-9 should handle an id and type for a node definition', function () {
       const str = `kanban
@@ -124,59 +143,16 @@ root
       theId(child1)`;
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].descr).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].children.length).toEqual(1);
-      const child = sections[0].children[0];
-      expect(child.descr).toEqual('child1');
-      expect(child.nodeId).toEqual('theId');
-      expect(child.type).toEqual(kanban.yy.nodeType.ROUNDED_RECT);
-    });
-    it('KNBN-10 multiple types (circle)', function () {
-      const str = `kanban
- root((the root))
- `;
 
-      kanban.parse(str);
+      expect(sections[0].label).toEqual('root');
-      const sections = kanban.yy.getSections();
+      expect(children.length).toEqual(1);
-      expect(sections[0].descr).toEqual('the root');
+      const child = children[0];
-      expect(sections[0].children.length).toEqual(0);
+      expect(child.label).toEqual('child1');
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.CIRCLE);
+      expect(child.id).toEqual('theId');
-    });
-
-    it('KNBN-11 multiple types (cloud)', function () {
-      const str = `kanban
- root)the root(
-`;
-
-      kanban.parse(str);
-      const sections = kanban.yy.getSections();
-      expect(sections[0].descr).toEqual('the root');
-      expect(sections[0].children.length).toEqual(0);
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.CLOUD);
-    });
-    it('KNBN-12 multiple types (bang)', function () {
-      const str = `kanban
- root))the root((
-`;
-
-      kanban.parse(str);
-      const sections = kanban.yy.getSections();
-      expect(sections[0].descr).toEqual('the root');
-      expect(sections[0].children.length).toEqual(0);
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.BANG);
-    });
-
-    it('KNBN-12-a multiple types (hexagon)', function () {
-      const str = `kanban
- root{{the root}}
-`;
-
-      kanban.parse(str);
-      const sections = kanban.yy.getSections();
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.HEXAGON);
-      expect(sections[0].descr).toEqual('the root');
-      expect(sections[0].children.length).toEqual(0);
     });
   });
   describe('decorations', function () {
@@ -188,10 +164,14 @@ root
       // ::class1 class2
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('The root');
+
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.RECT);
+      expect(sections[0].id).toEqual('root');
+      expect(sections[0].label).toEqual('The root');
+
       expect(sections[0].icon).toEqual('bomb');
     });
     it('KNBN-14 should be possible to set classes for the node', function () {
@@ -202,11 +182,14 @@ root
       // ::class1 class2
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('The root');
+
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.RECT);
+      expect(sections[0].id).toEqual('root');
-      expect(sections[0].class).toEqual('m-4 p-8');
+      expect(sections[0].label).toEqual('The root');
+      expect(sections[0].cssClasses).toEqual('m-4 p-8');
     });
     it('KNBN-15 should be possible to set both classes and icon for the node', function () {
       const str = `kanban
@@ -217,11 +200,14 @@ root
       // ::class1 class2
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('The root');
+
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.RECT);
+      expect(sections[0].id).toEqual('root');
-      expect(sections[0].class).toEqual('m-4 p-8');
+      expect(sections[0].label).toEqual('The root');
+      expect(sections[0].cssClasses).toEqual('m-4 p-8');
       expect(sections[0].icon).toEqual('bomb');
     });
     it('KNBN-16 should be possible to set both classes and icon for the node', function () {
@@ -233,11 +219,15 @@ root
       // ::class1 class2
 
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('The root');
+
-      expect(sections[0].type).toEqual(kanban.yy.nodeType.RECT);
+      expect(sections[0].id).toEqual('root');
-      expect(sections[0].class).toEqual('m-4 p-8');
+      expect(sections[0].label).toEqual('The root');
+      // expect(sections[0].type).toEqual('rect');
+      expect(sections[0].cssClasses).toEqual('m-4 p-8');
       expect(sections[0].icon).toEqual('bomb');
     });
   });
@@ -247,9 +237,13 @@ root
     root["String containing []"]
 `;
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('String containing []');
+
+      expect(sections[0].id).toEqual('root');
+      expect(sections[0].label).toEqual('String containing []');
     });
     it('KNBN-18 should be possible to use node syntax in the descriptions in children', function () {
       const str = `kanban
@@ -257,11 +251,15 @@ root
       child1["String containing ()"]
 `;
       kanban.parse(str);
+
+      const data = kanban.yy.getData();
       const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(sections[0].descr).toEqual('String containing []');
+
-      expect(sections[0].children.length).toEqual(1);
+      expect(sections[0].id).toEqual('root');
-      expect(sections[0].children[0].descr).toEqual('String containing ()');
+      expect(sections[0].label).toEqual('String containing []');
+      expect(children.length).toEqual(1);
+      expect(children[0].label).toEqual('String containing ()');
     });
     it('KNBN-19 should be possible to have a child after a class assignment', function () {
       const str = `kanban
@@ -271,17 +269,21 @@ root
       a(a)
       b[New Stuff]`;
       kanban.parse(str);
-      const sections = kanban.yy.getSections();
-      expect(sections[0].nodeId).toEqual('root');
-      expect(sections[0].descr).toEqual('Root');
-      expect(sections[0].children.length).toEqual(3);
 
-      const item1 = sections[0].children[0];
+      const data = kanban.yy.getData();
-      const item2 = sections[0].children[1];
+      const sections = kanban.yy.getSections();
-      const item3 = sections[0].children[2];
+      const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-      expect(item1.nodeId).toEqual('Child');
+
-      expect(item2.nodeId).toEqual('a');
+      expect(sections[0].id).toEqual('root');
-      expect(item3.nodeId).toEqual('b');
+      expect(sections[0].label).toEqual('Root');
+      expect(children.length).toEqual(3);
+
+      const item1 = children[0];
+      const item2 = children[1];
+      const item3 = children[2];
+      expect(item1.id).toEqual('Child');
+      expect(item2.id).toEqual('a');
+      expect(item3.id).toEqual('b');
     });
   });
   it('KNBN-20 should be possible to have meaningless empty rows in a kanban abc124', function () {
@@ -292,17 +294,21 @@ root
 
       b[New Stuff]`;
     kanban.parse(str);
-    const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
-    expect(sections[0].descr).toEqual('Root');
-    expect(sections[0].children.length).toEqual(3);
 
-    const item1 = sections[0].children[0];
+    const data = kanban.yy.getData();
-    const item2 = sections[0].children[1];
+    const sections = kanban.yy.getSections();
-    const item3 = sections[0].children[2];
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(item1.nodeId).toEqual('Child');
+
-    expect(item2.nodeId).toEqual('a');
+    expect(sections[0].id).toEqual('root');
-    expect(item3.nodeId).toEqual('b');
+    expect(sections[0].label).toEqual('Root');
+    expect(children.length).toEqual(3);
+
+    const item1 = children[0];
+    const item2 = children[1];
+    const item3 = children[2];
+    expect(item1.id).toEqual('Child');
+    expect(item2.id).toEqual('a');
+    expect(item3.id).toEqual('b');
   });
   it('KNBN-21 should be possible to have comments in a kanban', function () {
     const str = `kanban
@@ -313,15 +319,19 @@ root
       %% This is a comment
       b[New Stuff]`;
     kanban.parse(str);
-    const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
-    expect(sections[0].descr).toEqual('Root');
 
-    const child = sections[0].children[0];
+    const data = kanban.yy.getData();
-    expect(child.nodeId).toEqual('Child');
+    const sections = kanban.yy.getSections();
-    expect(sections[0].children[1].nodeId).toEqual('a');
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(sections[0].children[2].nodeId).toEqual('b');
+
-    expect(sections[0].children.length).toEqual(3);
+    expect(sections[0].id).toEqual('root');
+    expect(sections[0].label).toEqual('Root');
+
+    const child = children[0];
+    expect(child.id).toEqual('Child');
+    expect(children[1].id).toEqual('a');
+    expect(children[2].id).toEqual('b');
+    expect(children.length).toEqual(3);
   });
 
   it('KNBN-22 should be possible to have comments at the end of a line', function () {
@@ -331,53 +341,68 @@ root
       a(a) %% This is a comment
       b[New Stuff]`;
     kanban.parse(str);
-    const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
-    expect(sections[0].descr).toEqual('Root');
-    expect(sections[0].children.length).toEqual(3);
 
-    const child1 = sections[0].children[0];
+    const data = kanban.yy.getData();
-    expect(child1.nodeId).toEqual('Child');
+    const sections = kanban.yy.getSections();
-    const child2 = sections[0].children[1];
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(child2.nodeId).toEqual('a');
+
-    const child3 = sections[0].children[2];
+    expect(sections[0].id).toEqual('root');
-    expect(child3.nodeId).toEqual('b');
+    expect(sections[0].label).toEqual('Root');
+    expect(children.length).toEqual(3);
+
+    const child1 = children[0];
+    expect(child1.id).toEqual('Child');
+    const child2 = children[1];
+    expect(child2.id).toEqual('a');
+    const child3 = children[2];
+    expect(child3.id).toEqual('b');
   });
   it('KNBN-23 Rows with only spaces should not interfere', function () {
     const str = 'kanban\nroot\n A\n \n\n B';
     kanban.parse(str);
-    const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
-    expect(sections[0].children.length).toEqual(2);
 
-    const child = sections[0].children[0];
+    const data = kanban.yy.getData();
-    expect(child.nodeId).toEqual('A');
+    const sections = kanban.yy.getSections();
-    const child2 = sections[0].children[1];
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(child2.nodeId).toEqual('B');
+
+    expect(sections[0].id).toEqual('root');
+    expect(children.length).toEqual(2);
+
+    const child = children[0];
+    expect(child.id).toEqual('A');
+    const child2 = children[1];
+    expect(child2.id).toEqual('B');
   });
   it('KNBN-24 Handle rows above the kanban declarations', function () {
     const str = '\n \nkanban\nroot\n A\n \n\n B';
     kanban.parse(str);
-    const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
-    expect(sections[0].children.length).toEqual(2);
 
-    const child = sections[0].children[0];
+    const data = kanban.yy.getData();
-    expect(child.nodeId).toEqual('A');
+    const sections = kanban.yy.getSections();
-    const child2 = sections[0].children[1];
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(child2.nodeId).toEqual('B');
+
+    expect(sections[0].id).toEqual('root');
+    expect(children.length).toEqual(2);
+
+    const child = children[0];
+    expect(child.id).toEqual('A');
+    const child2 = children[1];
+    expect(child2.id).toEqual('B');
   });
   it('KNBN-25 Handle rows above the kanban declarations, no space', function () {
     const str = '\n\n\nkanban\nroot\n A\n \n\n B';
     kanban.parse(str);
+    const data = kanban.yy.getData();
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    const children = data.nodes.filter((n: KanbanNode) => n.parentId === sections[0].id);
-    expect(sections[0].children.length).toEqual(2);
 
-    const child = sections[0].children[0];
+    expect(sections[0].id).toEqual('root');
-    expect(child.nodeId).toEqual('A');
+    expect(children.length).toEqual(2);
-    const child2 = sections[0].children[1];
+
-    expect(child2.nodeId).toEqual('B');
+    const child = children[0];
+    expect(child.id).toEqual('A');
+    const child2 = children[1];
+    expect(child2.id).toEqual('B');
   });
 });
 describe('item data data', function () {
@@ -395,7 +420,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].priority).toEqual('high');
   });
   it('KNBN-31 should be possible to set the assignment', function () {
@@ -404,7 +429,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].assigned).toEqual('knsv');
   });
   it('KNBN-32 should be possible to set the icon', function () {
@@ -413,7 +438,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].icon).toEqual('star');
   });
   it('KNBN-33 should be possible to set the icon', function () {
@@ -422,7 +447,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].icon).toEqual('star');
   });
   it('KNBN-34 should be possible to set the metadata using multiple lines', function () {
@@ -434,7 +459,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].icon).toEqual('star');
     expect(sections[0].assigned).toEqual('knsv');
   });
@@ -444,7 +469,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].icon).toEqual('star');
     expect(sections[0].assigned).toEqual('knsv');
   });
@@ -454,7 +479,7 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].descr).toEqual('fix things');
+    expect(sections[0].label).toEqual('fix things');
   });
   it('KNBN-37 should be possible to set the external id', function () {
     const str = `kanban
@@ -462,7 +487,8 @@ describe('item data data', function () {
     `;
     kanban.parse(str);
     const sections = kanban.yy.getSections();
-    expect(sections[0].nodeId).toEqual('root');
+    const data = kanban.yy.getData();
+    expect(sections[0].id).toEqual('root');
     expect(sections[0].ticket).toEqual('MC-1234');
   });
 });

packages/mermaid/src/diagrams/kanban/kanbanTypes.ts

@@ -1,24 +1,3 @@
-import type { RequiredDeep } from 'type-fest';
 import type kanbanDb from './kanbanDb.js';
 
-export interface KanbanInternalNode {
-  id: number;
-  nodeId: string;
-  level: number;
-  descr: string;
-  type: number;
-  children: KanbanInternalNode[];
-  width: number;
-  padding: number;
-  section?: number;
-  height?: number;
-  class?: string;
-  icon?: string;
-  ticket?: string;
-  priority?: string;
-  x?: number;
-  y?: number;
-}
-
-export type FilledKanbanNode = RequiredDeep<KanbanInternalNode>;
 export type KanbanDB = typeof kanbanDb;

packages/mermaid/src/diagrams/kanban/svgDraw.ts

@@ -1,308 +0,0 @@
-import { createText } from '../../rendering-util/createText.js';
-import type { FilledKanbanNode, KanbanDB } from './kanbanTypes.js';
-import type { Point, D3Element } from '../../types.js';
-import { parseFontSize } from '../../utils.js';
-import type { MermaidConfig } from '../../config.type.js';
-
-const MAX_SECTIONS = 12;
-
-type ShapeFunction = (
-  db: KanbanDB,
-  elem: D3Element,
-  node: FilledKanbanNode,
-  section?: number
-) => void;
-
-const defaultBkg: ShapeFunction = function (db, elem, node, section) {
-  const rd = 5;
-  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: ShapeFunction = function (db, elem, node) {
-  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);
-};
-
-const cloudBkg: ShapeFunction = function (db, elem, node) {
-  const w = node.width;
-  const h = node.height;
-  const r1 = 0.15 * w;
-  const r2 = 0.25 * w;
-  const r3 = 0.35 * w;
-  const r4 = 0.2 * w;
-  elem
-    .append('path')
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr(
-      'd',
-      `M0 0 a${r1},${r1} 0 0,1 ${w * 0.25},${-1 * w * 0.1}
-      a${r3},${r3} 1 0,1 ${w * 0.4},${-1 * w * 0.1}
-      a${r2},${r2} 1 0,1 ${w * 0.35},${1 * w * 0.2}
-
-      a${r1},${r1} 1 0,1 ${w * 0.15},${1 * h * 0.35}
-      a${r4},${r4} 1 0,1 ${-1 * w * 0.15},${1 * h * 0.65}
-
-      a${r2},${r1} 1 0,1 ${-1 * w * 0.25},${w * 0.15}
-      a${r3},${r3} 1 0,1 ${-1 * w * 0.5},${0}
-      a${r1},${r1} 1 0,1 ${-1 * w * 0.25},${-1 * w * 0.15}
-
-      a${r1},${r1} 1 0,1 ${-1 * w * 0.1},${-1 * h * 0.35}
-      a${r4},${r4} 1 0,1 ${w * 0.1},${-1 * h * 0.65}
-
-    H0 V0 Z`
-    );
-};
-
-const bangBkg: ShapeFunction = function (db, elem, node) {
-  const w = node.width;
-  const h = node.height;
-  const r = 0.15 * w;
-  elem
-    .append('path')
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr(
-      'd',
-      `M0 0 a${r},${r} 1 0,0 ${w * 0.25},${-1 * h * 0.1}
-      a${r},${r} 1 0,0 ${w * 0.25},${0}
-      a${r},${r} 1 0,0 ${w * 0.25},${0}
-      a${r},${r} 1 0,0 ${w * 0.25},${1 * h * 0.1}
-
-      a${r},${r} 1 0,0 ${w * 0.15},${1 * h * 0.33}
-      a${r * 0.8},${r * 0.8} 1 0,0 ${0},${1 * h * 0.34}
-      a${r},${r} 1 0,0 ${-1 * w * 0.15},${1 * h * 0.33}
-
-      a${r},${r} 1 0,0 ${-1 * w * 0.25},${h * 0.15}
-      a${r},${r} 1 0,0 ${-1 * w * 0.25},${0}
-      a${r},${r} 1 0,0 ${-1 * w * 0.25},${0}
-      a${r},${r} 1 0,0 ${-1 * w * 0.25},${-1 * h * 0.15}
-
-      a${r},${r} 1 0,0 ${-1 * w * 0.1},${-1 * h * 0.33}
-      a${r * 0.8},${r * 0.8} 1 0,0 ${0},${-1 * h * 0.34}
-      a${r},${r} 1 0,0 ${w * 0.1},${-1 * h * 0.33}
-
-    H0 V0 Z`
-    );
-};
-
-const circleBkg: ShapeFunction = function (db, elem, node) {
-  elem
-    .append('circle')
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr('r', node.width / 2);
-};
-
-function insertPolygonShape(
-  parent: D3Element,
-  w: number,
-  h: number,
-  points: Point[],
-  node: FilledKanbanNode
-) {
-  return parent
-    .insert('polygon', ':first-child')
-    .attr(
-      'points',
-      points
-        .map(function (d) {
-          return d.x + ',' + d.y;
-        })
-        .join(' ')
-    )
-    .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
-}
-
-const hexagonBkg: ShapeFunction = function (
-  _db: KanbanDB,
-  elem: D3Element,
-  node: FilledKanbanNode
-) {
-  const h = node.height;
-  const f = 4;
-  const m = h / f;
-  const w = node.width - node.padding + 2 * m;
-  const points: Point[] = [
-    { x: m, y: 0 },
-    { x: w - m, y: 0 },
-    { x: w, y: -h / 2 },
-    { x: w - m, y: -h },
-    { x: m, y: -h },
-    { x: 0, y: -h / 2 },
-  ];
-  insertPolygonShape(elem, w, h, points, node);
-};
-
-const roundedRectBkg: ShapeFunction = function (db, elem, node) {
-  elem
-    .append('rect')
-    .attr('id', 'node-' + node.id)
-    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr('height', node.height)
-    .attr('rx', node.padding)
-    .attr('ry', node.padding)
-    .attr('width', node.width);
-};
-
-/**
- * @param db - The database
- * @param elem - The D3 dom element in which the node is to be added
- * @param node - The node to be added
- * @param fullSection - ?
- * @param conf - The configuration object
- * @returns The height nodes dom element
- */
-export const drawNode = async function (
-  db: KanbanDB,
-  elem: D3Element,
-  node: FilledKanbanNode,
-  fullSection: number,
-  conf: MermaidConfig
-): Promise<number> {
-  const htmlLabels = conf.htmlLabels;
-  const section = fullSection % (MAX_SECTIONS - 1);
-  const nodeElem = elem.append('g');
-  node.section = section;
-  let sectionClass = 'section-' + section;
-  if (section < 0) {
-    sectionClass += ' section-root';
-  }
-  nodeElem.attr('class', (node.class ? node.class + ' ' : '') + 'mindmap-node ' + sectionClass);
-  const bkgElem = nodeElem.append('g');
-
-  // Create the wrapped text element
-  const textElem = nodeElem.append('g');
-  const description = node.descr.replace(/(<br\/*>)/g, '\n');
-  await createText(
-    textElem,
-    description,
-    {
-      useHtmlLabels: htmlLabels,
-      width: node.width,
-      classes: 'mindmap-node-label',
-    },
-    conf
-  );
-
-  if (!htmlLabels) {
-    textElem
-      .attr('dy', '1em')
-      .attr('alignment-baseline', 'middle')
-      .attr('dominant-baseline', 'middle')
-      .attr('text-anchor', 'middle');
-  }
-  const bbox = textElem.node().getBBox();
-  const [fontSize] = parseFontSize(conf.fontSize);
-  node.height = bbox.height + fontSize! * 1.1 * 0.5 + node.padding;
-  node.width = bbox.width + 2 * node.padding;
-  if (node.icon) {
-    if (node.type === db.nodeType.CIRCLE) {
-      node.height += 50;
-      node.width += 50;
-      const icon = nodeElem
-        .append('foreignObject')
-        .attr('height', '50px')
-        .attr('width', node.width)
-        .attr('style', 'text-align: center;');
-      icon
-        .append('div')
-        .attr('class', 'icon-container')
-        .append('i')
-        .attr('class', 'node-icon-' + section + ' ' + node.icon);
-      textElem.attr(
-        'transform',
-        'translate(' + node.width / 2 + ', ' + (node.height / 2 - 1.5 * node.padding) + ')'
-      );
-    } else {
-      node.width += 50;
-      const orgHeight = node.height;
-      node.height = Math.max(orgHeight, 60);
-      const heightDiff = Math.abs(node.height - orgHeight);
-      const icon = nodeElem
-        .append('foreignObject')
-        .attr('width', '60px')
-        .attr('height', node.height)
-        .attr('style', 'text-align: center;margin-top:' + heightDiff / 2 + 'px;');
-
-      icon
-        .append('div')
-        .attr('class', 'icon-container')
-        .append('i')
-        .attr('class', 'node-icon-' + section + ' ' + node.icon);
-      textElem.attr(
-        'transform',
-        'translate(' + (25 + node.width / 2) + ', ' + (heightDiff / 2 + node.padding / 2) + ')'
-      );
-    }
-  } else {
-    if (!htmlLabels) {
-      const dx = node.width / 2;
-      const dy = node.padding / 2;
-      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
-      // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
-    } else {
-      const dx = (node.width - bbox.width) / 2;
-      const dy = (node.height - bbox.height) / 2;
-      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
-    }
-  }
-
-  switch (node.type) {
-    case db.nodeType.DEFAULT:
-      defaultBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.ROUNDED_RECT:
-      roundedRectBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.RECT:
-      rectBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.CIRCLE:
-      bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')');
-      circleBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.CLOUD:
-      cloudBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.BANG:
-      bangBkg(db, bkgElem, node, section);
-      break;
-    case db.nodeType.HEXAGON:
-      hexagonBkg(db, bkgElem, node, section);
-      break;
-  }
-
-  db.setElementForId(node.id, nodeElem);
-  return node.height;
-};
-
-export const positionNode = function (db: KanbanDB, node: FilledKanbanNode) {
-  const nodeElem = db.getElementById(node.id);
-
-  const x = node.x || 0;
-  const y = node.y || 0;
-  // Position the node to its coordinate
-  nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
-};