#5342 Handing of wide section texts

docs/syntax/kanban.md

@@ -69,7 +69,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met
 ```
 •	assigned: Specifies who is responsible for the task.
 •	ticket: Links the task to a ticket or issue number.
-•	priority: Indicates the urgency of the task (e.g., ‘Very High’,‘High’, ‘Low’, ‘Very Low’).
+•	priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
 ```
 
 ```mermaid-example
@@ -109,21 +109,23 @@ config:
     ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
 ---
 kanban
-  id1[Todo]
-    docs[Create Documentation]
-    blog[Write Blog Post About New Diagram]
-  id7[In Progress]
-    renderer[Develop Universal Renderer]
-    grammar[Design Grammar]@{ assigned: 'knsv' }
-  id9[Ready for Deploy]
-  id10[Ready for Test]
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
   id11[Done]
-    getData[Define getData Function]
-    longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
-    dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
-    parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
-    lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't Reproduce]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
 ```
 
 ```mermaid
@@ -133,21 +135,23 @@ config:
     ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
 ---
 kanban
-  id1[Todo]
-    docs[Create Documentation]
-    blog[Write Blog Post About New Diagram]
-  id7[In Progress]
-    renderer[Develop Universal Renderer]
-    grammar[Design Grammar]@{ assigned: 'knsv' }
-  id9[Ready for Deploy]
-  id10[Ready for Test]
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
   id11[Done]
-    getData[Define getData Function]
-    longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
-    dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
-    parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
-    lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't Reproduce]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
 ```
 
 In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.

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

@@ -9,7 +9,7 @@ import { insertCluster } from '../../rendering-util/rendering-elements/clusters.
 import { insertNode, positionNode } from '../../rendering-util/rendering-elements/nodes.js';
 
 export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
-  log.debug('Rendering mindmap diagram\n' + text);
+  log.debug('Rendering kanban diagram\n' + text);
 
   const db = diagObj.db as KanbanDB;
   const data4Layout = db.getData();
@@ -31,10 +31,12 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   // TODO set padding
   const padding = 10;
 
+  const sectionObjects = [];
+  let maxLabelHeight = 25;
   for (const section of sections) {
     const WIDTH = conf?.kanban?.sectionWidth || 200;
-    const top = (-WIDTH * 3) / 2 + 25;
-    let y = top;
+    // const top = (-WIDTH * 3) / 2 + 25;
+    // let y = top;
     cnt = cnt + 1;
     section.x = WIDTH * cnt + ((cnt - 1) * padding) / 2;
     section.width = WIDTH;
@@ -46,8 +48,17 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
     // Todo, use theme variable THEME_COLOR_LIMIT instead of 10
     section.cssClasses = section.cssClasses + ' section-' + cnt;
     const sectionObj = await insertCluster(sectionsElem, section);
+    maxLabelHeight = Math.max(maxLabelHeight, sectionObj?.labelBBox?.height);
+    sectionObjects.push(sectionObj);
+  }
+  let i = 0;
+  for (const section of sections) {
+    const sectionObj = sectionObjects[i];
+    i = i + 1;
+    const WIDTH = conf?.kanban?.sectionWidth || 200;
+    const top = (-WIDTH * 3) / 2 + maxLabelHeight;
+    let y = top;
     const sectionItems = data4Layout.nodes.filter((node) => node.parentId === section.id);
-
     for (const item of sectionItems) {
       item.x = section.x;
       item.width = WIDTH - 1.5 * padding;
@@ -58,7 +69,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
       y = item.y + bbox.height / 2 + padding / 2;
     }
     const rect = sectionObj.cluster.select('rect');
-    const height = Math.max(y - top + 3 * padding, 50);
+    const height = Math.max(y - top + 3 * padding, 50) + (maxLabelHeight - 25);
     rect.attr('height', height);
   }
 
@@ -66,8 +77,8 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
   setupGraphViewbox(
     undefined,
     svg,
-    conf.mindmap?.padding ?? defaultConfig.mindmap.padding,
-    conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth
+    conf.mindmap?.padding ?? defaultConfig.kanban.padding,
+    conf.mindmap?.useMaxWidth ?? defaultConfig.kanban.useMaxWidth
   );
 };
 

packages/mermaid/src/docs/syntax/kanban.md

@@ -54,7 +54,7 @@ You can include additional metadata for each task using the @{ ... } syntax. Met
 
     •	assigned: Specifies who is responsible for the task.
     •	ticket: Links the task to a ticket or issue number.
-    •	priority: Indicates the urgency of the task (e.g., ‘Very High’,‘High’, ‘Low’, ‘Very Low’).
+    •	priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
 
 ```mermaid-example
 kanban
@@ -87,21 +87,23 @@ config:
     ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
 ---
 kanban
-  id1[Todo]
-    docs[Create Documentation]
-    blog[Write Blog Post About New Diagram]
-  id7[In Progress]
-    renderer[Develop Universal Renderer]
-    grammar[Design Grammar]@{ assigned: 'knsv' }
-  id9[Ready for Deploy]
-  id10[Ready for Test]
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
   id11[Done]
-    getData[Define getData Function]
-    longTitle[Handle Long Diagram Titles]@{ ticket: MC-2036, priority: 'Very High' }
-    dbUpdate[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
-    parsingTests[Create Parsing Tests]@{ ticket: MC-2038, assigned: 'K. Sveidqvist', priority: 'High' }
-    lastItem[Finalize Last Item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't Reproduce]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
 ```
 
 In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.

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

@@ -304,6 +304,7 @@ const kanbanSection = async (parent, node) => {
     style: node.labelStyle,
     useHtmlLabels,
     isNode: true,
+    width: node.width,
   });
 
   // Get the size of the label