5432 WIP, rendering items

cypress/platform/knsv2.html

@@ -89,12 +89,13 @@ kanban
     id2[Create JISON]
     id3[Update DB function]
     id4[Create parsing tests]
-    id5[define getData]
-    id6[Create renderer so that it works in all cases]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes.]
+    id66[last item]
   id7[In progress]
     id8[Design grammar]
   id9[Ready for deploy]
   id10[Ready for test]
+    id5[define getData]
   id11[Done]
   id12[Can't reproduce]
     </pre>
@@ -116,7 +117,7 @@ kanban
         // layout: 'dagre',
         // layout: 'elk',
         // layout: 'fixed',
-        // htmlLabels: false,
+        htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
@@ -126,6 +127,9 @@ kanban
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
+        kanban: {
+          htmlLabels: false,
+        },
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',

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

@@ -76,6 +76,8 @@ const getData = function () {
         label: sanitizeText(item.descr, conf),
         isGroup: false,
         shape: 'kanbanItem',
+        rx: 5,
+        cssStyles: ['text-align: left'],
       } satisfies Node;
       nodes.push(childNode);
     }

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

@@ -106,13 +106,13 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   const padding = 10;
 
   for (const section of sections) {
-    let y = 0;
+    const WIDTH = 200;
+    let y = (-WIDTH * 3) / 2 + 40;
     cnt = cnt + 1;
-    const WIDTH = 300;
     section.x = WIDTH * cnt + ((cnt - 1) * padding) / 2;
     section.width = WIDTH;
     section.y = 0;
-    section.height = WIDTH;
+    section.height = WIDTH * 3;
     section.rx = 5;
     section.ry = 5;
 
@@ -123,14 +123,15 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
     // positionCluster(section);
     for (const item of sectionItems) {
       item.x = section.x;
-      item.width = WIDTH - padding * 2;
+      item.width = WIDTH - 2 * padding;
       // item.height = 100;
       const nodeEl = await insertNode(nodesElem, item);
       console.log('ITEM', item, 'bbox=', nodeEl.node().getBBox());
-      item.y = y;
-      item.height = 150;
+      const bbox = nodeEl.node().getBBox();
+      item.y = y + bbox.height / 2;
+      // item.height = 150;
       await positionNode(item);
-      y = y + 1.5 * nodeEl.node().getBBox().height + padding / 2;
+      y = item.y + bbox.height / 2 + padding;
     }
   }
 

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

@@ -52,7 +52,7 @@ const genSections: DiagramStylesProvider = (options) => {
   .node ellipse,
   .node polygon,
   .node path {
-    fill: ${options.mainBkg};
+    fill: ${options.background};
     stroke: ${options.nodeBorder};
     stroke-width: 1px;
   }

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -326,7 +326,7 @@ const kanbanSection = async (parent, node) => {
 
   const height = node.height;
   const x = node.x - width / 2;
-  const y = node.y;
+  const y = node.y - height / 2;
 
   log.trace('Data ', node, JSON.stringify(node));
   let rect;

packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts

@@ -9,10 +9,14 @@ export const kanbanItem = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   // console.log('IPI labelStyles:', labelStyles);
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const labelPaddingX = 10;
+  const orgWidth = node.width;
+  node.width = (node.width ?? 200) - 2 * labelPaddingX;
+  console.log('APA123 kanbanItem', node.labelStyle);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  node.width = orgWidth;
   const labelPaddingY = 10;
-  const totalWidth = Math.max(bbox.width + labelPaddingX * 2, node?.width || 0);
+  const totalWidth = node?.width || 0;
   const totalHeight = Math.max(bbox.height + labelPaddingY * 2, node?.height || 0);
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;