Typescript fixes

cypress/platform/knsv2.html

@@ -94,11 +94,11 @@ kanban
     docs[Create Documentation]
     docs[Create Blog about the new diagram]
   id7[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.]
+    id8[Design grammar]@{ assigned: 'knsv' }
   id9[Ready for deploy]
   id10[Ready for test]
   id11[Done]
-    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.]
-    id8[Design grammar]@{ assigned: 'knsv' }
     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' }

docs/config/setup/interfaces/mermaid.MermaidConfig.md

@@ -49,7 +49,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -59,7 +59,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -121,7 +121,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -183,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -217,7 +217,7 @@ If set to true, ignores legacyMathML.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -253,6 +253,16 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 ---
 
+### kanban
+
+• `Optional` **kanban**: `KanbanDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+
+---
+
 ### layout
 
 • `Optional` **layout**: `string`
@@ -310,7 +320,7 @@ Defines which main look to use for the diagram.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -354,7 +364,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -394,7 +404,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -465,7 +475,7 @@ This is useful when you want to control how to handle syntax errors in your appl
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
+[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
 
 ---
 
@@ -518,7 +528,7 @@ You may also use `themeCSS` to override this value.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 

docs/config/setup/interfaces/mermaid.ParseOptions.md

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
+[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)

docs/config/setup/interfaces/mermaid.ParseResult.md

@@ -18,7 +18,7 @@ The config passed as YAML frontmatter or directives
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
+[packages/mermaid/src/types.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L70)
 
 ---
 
@@ -30,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
+[packages/mermaid/src/types.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66)

docs/config/setup/interfaces/mermaid.RenderResult.md

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
+[packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
+[packages/mermaid/src/types.ts:83](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L83)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
+[packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79)

packages/mermaid/src/defaultConfig.ts

@@ -58,12 +58,6 @@ const config: RequiredDeep<MermaidConfig> = {
     tickInterval: undefined,
     useWidth: undefined, // can probably be removed since `configKeys` already includes this
   },
-  kanban: {
-    ticketBaseUrl: '', // can probably be removed since `configKeys` already includes this
-    padding: 8,
-    sectionWidth: 200,
-    ...defaultConfigJson.kanban,
-  },
   c4: {
     ...defaultConfigJson.c4,
     useWidth: undefined,

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

@@ -2,14 +2,13 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { D3Element } from '../../types.js';
 import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
-import type { KanbanInternalNode } from './kanbanTypes.js';
+import type { Edge, KanbanNode } from '../../rendering-util/types.js';
-import type { Node, Edge, KanbanNode } from '../../rendering-util/types.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { NodeMetaData } from '../../types.js';
 import * as yaml from 'js-yaml';
 
-let nodes: KanbanInternalNode[] = [];
+let nodes: KanbanNode[] = [];
-let sections: KanbanInternalNode[] = [];
+let sections: KanbanNode[] = [];
 let cnt = 0;
 let elements: Record<number, D3Element> = {};
 
@@ -23,7 +22,7 @@ const clear = () => {
  * if your level is the section level return null - then you do not belong to a level
  * otherwise return the current section
  */
-const getSection = function (level: number) {
+const getSection = (level: number) => {
   if (nodes.length === 0) {
     // console.log('No nodes');
     return null;
@@ -37,7 +36,7 @@ const getSection = function (level: number) {
     }
     // console.log('HERE', nodes[i].id, level, nodes[i].level, sectionLevel);
     if (nodes[i].level < sectionLevel) {
-      throw new Error('Items without section detected, found section ("' + nodes[i].descr + '")');
+      throw new Error('Items without section detected, found section ("' + nodes[i].label + '")');
     }
   }
   if (level === lastSection?.level) {
@@ -54,43 +53,46 @@ const getSections = function () {
 
 const getData = function () {
   const edges = [] as Edge[];
-  const nodes: Node[] = [];
+  const _nodes: KanbanNode[] = [];
 
   const sections = getSections();
   const conf = getConfig();
 
   for (const section of sections) {
     const node = {
-      id: section.nodeId,
+      id: section.id,
-      label: sanitizeText(section.descr, conf),
+      label: sanitizeText(section.label ?? '', conf),
       isGroup: true,
       ticket: section.ticket,
       shape: 'kanbanSection',
+      level: section.level,
     } satisfies KanbanNode;
-    nodes.push(node);
+    _nodes.push(node);
-    for (const item of section.children) {
+    const children = nodes.filter((n) => n.parentId === section.id);
+
+    for (const item of children) {
       const childNode = {
-        id: item.nodeId,
+        id: item.id,
-        parentId: section.nodeId,
+        parentId: section.id,
-        label: sanitizeText(item.descr, conf),
+        label: sanitizeText(item.label ?? '', conf),
         isGroup: false,
         ticket: item?.ticket,
         priority: item?.priority,
         assigned: item?.assigned,
         icon: item?.icon,
         shape: 'kanbanItem',
+        level: item.level,
         rx: 5,
         cssStyles: ['text-align: left'],
       } satisfies KanbanNode;
-      nodes.push(childNode);
+      _nodes.push(childNode);
     }
   }
 
-  return { nodes, edges, other: {}, config: getConfig() };
+  return { nodes: _nodes, edges, other: {}, config: getConfig() };
 };
 
 const addNode = (level: number, id: string, descr: string, type: number, shapeData: string) => {
-  // log.info('addNode level=', level, 'id=', id, 'descr=', descr, 'type=', type);
   const conf = getConfig();
   let padding: number = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
   switch (type) {
@@ -100,16 +102,14 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
       padding *= 2;
   }
 
-  const node = {
+  const node: KanbanNode = {
-    id: cnt++,
+    id: sanitizeText(id, conf) || 'kbn' + cnt++,
-    nodeId: sanitizeText(id, conf),
     level,
-    descr: sanitizeText(descr, conf),
+    label: sanitizeText(descr, conf),
-    type,
-    children: [],
     width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
     padding,
-  } satisfies KanbanInternalNode;
+    isGroup: false,
+  } satisfies KanbanNode;
 
   if (shapeData !== undefined) {
     let yamlData;
@@ -129,10 +129,10 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
     }
 
     if (doc?.shape) {
-      node.type = doc?.shape;
+      node.shape = doc?.shape;
     }
     if (doc?.label) {
-      node.descr = doc?.label;
+      node.label = doc?.label;
     }
     if (doc?.icon) {
       node.icon = doc?.icon;
@@ -151,9 +151,8 @@ const addNode = (level: number, id: string, descr: string, type: number, shapeDa
 
   const section = getSection(level);
   if (section) {
-    section.children.push(node);
+    // @ts-ignore false positive for section.id
-    // Keep all nodes in the list
+    node.parentId = section.id || 'kbn' + cnt++;
-    nodes.push(node);
   } else {
     sections.push(node);
   }
@@ -205,7 +204,7 @@ const decorateNode = (decoration?: { class?: string; icon?: string }) => {
     node.icon = sanitizeText(decoration.icon, config);
   }
   if (decoration.class) {
-    node.class = sanitizeText(decoration.class, config);
+    node.cssClasses = sanitizeText(decoration.class, config);
   }
 };
 

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

@@ -1,4 +1,3 @@
-// @ts-expect-error No types available
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DrawDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';

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

@@ -4,6 +4,7 @@ import type { KanbanNode } from '../../types.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
+import type { MermaidConfig } from '../../../config.type.js';
 const colorFromPriority = (priority: KanbanNode['priority']) => {
   switch (priority) {
     case 'Very High':
@@ -16,7 +17,11 @@ const colorFromPriority = (priority: KanbanNode['priority']) => {
       return 'lightblue';
   }
 };
-export const kanbanItem = async (parent: SVGAElement, node: KanbanNode, { config }) => {
+export const kanbanItem = async (
+  parent: SVGAElement,
+  node: KanbanNode,
+  { config }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   // console.log('IPI labelStyles:', labelStyles);
@@ -37,8 +42,8 @@ export const kanbanItem = async (parent: SVGAElement, node: KanbanNode, { config
   let ticketUrl = '';
   let link;
   // console.log('STO ticket:', node.ticket);
-  if (node.ticket && config.kanban.ticketBaseUrl) {
+  if (node.ticket && config?.kanban?.ticketBaseUrl) {
-    ticketUrl = config.kanban.ticketBaseUrl.replace('#TICKET#', node.ticket);
+    ticketUrl = config?.kanban?.ticketBaseUrl.replace('#TICKET#', node.ticket);
     link = shapeSvg
       .insert('svg:a', ':first-child')
       .attr('class', 'kanban-ticket-link')

packages/mermaid/src/rendering-util/types.ts

@@ -155,4 +155,5 @@ export interface KanbanNode extends Node {
   ticket?: string;
   assigned?: string;
   icon?: string;
+  level: number;
 }

packages/mermaid/src/schemas/config.schema.yaml

@@ -48,6 +48,7 @@ required:
   - requirement
   - architecture
   - mindmap
+  - kanban
   - gitGraph
   - c4
   - sankey

packages/mermaid/src/types.ts

@@ -9,6 +9,8 @@ export interface NodeMetaData {
   h?: string;
   constraint?: 'on' | 'off';
   priority: 'Very High' | 'High' | 'Medium' | 'Low' | 'Very Low';
+  assigned?: string;
+  ticket?: string;
 }
 import type { MermaidConfig } from './config.type.js';