From dffaf9fa8ff523fa4d30b9c73c54175cfe36d423 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 29 Oct 2024 13:41:20 +0100 Subject: [PATCH 1/4] fix for kanban section shape --- packages/mermaid/src/diagrams/kanban/kanbanDb.ts | 3 ++- .../mermaid/src/rendering-util/rendering-elements/clusters.js | 2 +- .../mermaid/src/rendering-util/rendering-elements/shapes.ts | 2 ++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts index e6f57ef79..f27799f1e 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts +++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts @@ -129,7 +129,8 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`); } - if (doc?.shape) { + // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem or kanbanSection + if (doc?.shape && (doc.shape === 'kanbanItem' || doc.shape === 'kanbanSection')) { node.shape = doc?.shape; } if (doc?.label) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 3bd9c9dc7..12ba15f39 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -280,7 +280,7 @@ const roundedWithTitle = async (parent, node) => { return { cluster: shapeSvg, labelBBox: bbox }; }; -const kanbanSection = async (parent, node) => { +export const kanbanSection = async (parent, node) => { log.info('Creating subgraph rect for ', node.id, node); const siteConfig = getConfig(); const { themeVariables, handDrawnSeed } = siteConfig; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index 4f6459d85..0dd22b113 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -59,6 +59,7 @@ import { waveRectangle } from './shapes/waveRectangle.js'; import { windowPane } from './shapes/windowPane.js'; import { classBox } from './shapes/classBox.js'; import { kanbanItem } from './shapes/kanbanItem.js'; +import { kanbanSection } from './clusters.js'; type ShapeHandler = ( parent: D3Selection, @@ -478,6 +479,7 @@ const generateShapeMap = () => { iconRounded, imageSquare, kanbanItem, + kanbanSection, anchor, } as const; From ef30283fe90481b1c9d45a5bcec18362ee2377f6 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Tue, 29 Oct 2024 21:39:34 +0900 Subject: [PATCH 2/4] refactor: fix more type errors in kanbanItem Fixes: 7401cb8f6aec0c7dccae820824eb2bb3e6a3e12d --- .../rendering-elements/shapes/kanbanItem.ts | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) 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 4dc6324a7..d19ada7c4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts @@ -6,12 +6,14 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; import type { D3Selection } from '../../../types.js'; -const colorFromPriority = (priority: KanbanNode['priority']) => { +const colorFromPriority = (priority: NonNullable) => { switch (priority) { case 'Very High': return 'red'; case 'High': return 'orange'; + case 'Medium': + return null; // no stroke case 'Low': return 'blue'; case 'Very Low': @@ -20,11 +22,9 @@ const colorFromPriority = (priority: KanbanNode['priority']) => { }; export const kanbanItem = async ( parent: D3Selection, - node: Node, + kanbanNode: Node | Omit, { config }: ShapeRenderOptions ) => { - const unknownNode = node as unknown; - const kanbanNode = unknownNode as KanbanNode; const { labelStyles, nodeStyles } = styles2String(kanbanNode); kanbanNode.labelStyle = labelStyles; @@ -42,7 +42,7 @@ export const kanbanItem = async ( let ticketUrl = ''; let link; - if (kanbanNode.ticket && config?.kanban?.ticketBaseUrl) { + if ('ticket' in kanbanNode && kanbanNode.ticket && config?.kanban?.ticketBaseUrl) { ticketUrl = config?.kanban?.ticketBaseUrl.replace('#TICKET#', kanbanNode.ticket); link = shapeSvg .insert('svg:a', ':first-child') @@ -62,17 +62,21 @@ export const kanbanItem = async ( }; let labelEl, bbox2; if (link) { - ({ label: labelEl, bbox: bbox2 } = await insertLabel(link, kanbanNode.ticket || '', options)); + ({ label: labelEl, bbox: bbox2 } = await insertLabel( + link, + ('ticket' in kanbanNode && kanbanNode.ticket) || '', + options + )); } else { ({ label: labelEl, bbox: bbox2 } = await insertLabel( shapeSvg, - kanbanNode.ticket || '', + ('ticket' in kanbanNode && kanbanNode.ticket) || '', options )); } const { label: labelElAssigned, bbox: bboxAssigned } = await insertLabel( shapeSvg, - kanbanNode.assigned || '', + ('assigned' in kanbanNode && kanbanNode.assigned) || '', options ); kanbanNode.width = orgWidth; @@ -129,7 +133,9 @@ export const kanbanItem = async ( .attr('y', y) .attr('width', totalWidth) .attr('height', totalHeight); - if (kanbanNode.priority) { + + const priority = 'priority' in kanbanNode && kanbanNode.priority; + if (priority) { const line = shapeSvg.append('line', ':first-child'); const lineX = x + 2; @@ -142,7 +148,7 @@ export const kanbanItem = async ( .attr('y2', y2) .attr('stroke-width', '4') - .attr('stroke', colorFromPriority(kanbanNode.priority)); + .attr('stroke', colorFromPriority(priority)); } } From 0197c089169cfe28a476f73c2b216dc537bbf818 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 29 Oct 2024 14:04:57 +0100 Subject: [PATCH 3/4] revert adding kanban section to shape --- packages/mermaid/src/diagrams/kanban/kanbanDb.ts | 4 ++-- .../mermaid/src/rendering-util/rendering-elements/clusters.js | 2 +- .../mermaid/src/rendering-util/rendering-elements/shapes.ts | 2 -- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts index f27799f1e..5d6fc68f9 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts +++ b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts @@ -129,8 +129,8 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`); } - // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem or kanbanSection - if (doc?.shape && (doc.shape === 'kanbanItem' || doc.shape === 'kanbanSection')) { + // if shape is defined in the yaml data, use it if it is a valid shape kanbanItem + if (doc?.shape && doc.shape === 'kanbanItem') { node.shape = doc?.shape; } if (doc?.label) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 12ba15f39..3bd9c9dc7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -280,7 +280,7 @@ const roundedWithTitle = async (parent, node) => { return { cluster: shapeSvg, labelBBox: bbox }; }; -export const kanbanSection = async (parent, node) => { +const kanbanSection = async (parent, node) => { log.info('Creating subgraph rect for ', node.id, node); const siteConfig = getConfig(); const { themeVariables, handDrawnSeed } = siteConfig; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index 0dd22b113..4f6459d85 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -59,7 +59,6 @@ import { waveRectangle } from './shapes/waveRectangle.js'; import { windowPane } from './shapes/windowPane.js'; import { classBox } from './shapes/classBox.js'; import { kanbanItem } from './shapes/kanbanItem.js'; -import { kanbanSection } from './clusters.js'; type ShapeHandler = ( parent: D3Selection, @@ -479,7 +478,6 @@ const generateShapeMap = () => { iconRounded, imageSquare, kanbanItem, - kanbanSection, anchor, } as const; From 34e8946c585ac039e0c2b02947d110df1d295c25 Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Tue, 29 Oct 2024 22:17:24 +0900 Subject: [PATCH 4/4] refactor(types): fix kanbanItem circular types Exclude the `node.shape` type from `kanbanItem()`, as otherwise it causes a circular dependency in the types. --- .../rendering-elements/shapes/kanbanItem.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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 d19ada7c4..34ba7873d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts @@ -20,11 +20,12 @@ const colorFromPriority = (priority: NonNullable) => { return 'lightblue'; } }; -export const kanbanItem = async ( +export async function kanbanItem( parent: D3Selection, - kanbanNode: Node | Omit, + // Omit the 'shape' prop since otherwise, it causes a TypeScript circular dependency error + kanbanNode: Omit | Omit, { config }: ShapeRenderOptions -) => { +) { const { labelStyles, nodeStyles } = styles2String(kanbanNode); kanbanNode.labelStyle = labelStyles; @@ -160,4 +161,4 @@ export const kanbanItem = async ( }; return shapeSvg; -}; +}