From 93f2c241b83813a8e220ece5558bd953af1dca36 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sun, 6 Oct 2024 19:22:07 +0200 Subject: [PATCH] 5432 WIP, rendering items --- cypress/platform/knsv2.html | 10 +++++++--- packages/mermaid/src/diagrams/kanban/kanbanDb.ts | 2 ++ .../mermaid/src/diagrams/kanban/kanbanRenderer.ts | 15 ++++++++------- packages/mermaid/src/diagrams/kanban/styles.ts | 2 +- .../rendering-util/rendering-elements/clusters.js | 2 +- .../rendering-elements/shapes/kanbanItem.ts | 8 ++++++-- 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 8d3065a5e..a22c81eba 100644 --- a/cypress/platform/knsv2.html +++ b/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] @@ -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', diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts index b68c0fdcc..af3f07a75 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts +++ b/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); } diff --git a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts index bd6620086..987ada715 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts +++ b/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; } } diff --git a/packages/mermaid/src/diagrams/kanban/styles.ts b/packages/mermaid/src/diagrams/kanban/styles.ts index 090c4ed67..416bb4d2b 100644 --- a/packages/mermaid/src/diagrams/kanban/styles.ts +++ b/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; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 8fa2bc896..f4ea875be 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts index 94995abdc..1d47b9573 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts +++ b/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;