From 991d403d7f149e6421f9eb3c8a73d6aa26d9c735 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 10 Oct 2024 09:47:52 -0700 Subject: [PATCH] Typescript fixes --- cypress/platform/knsv2.html | 4 +- .../setup/interfaces/mermaid.MermaidConfig.md | 30 ++++++---- .../setup/interfaces/mermaid.ParseOptions.md | 2 +- .../setup/interfaces/mermaid.ParseResult.md | 4 +- .../setup/interfaces/mermaid.RenderResult.md | 6 +- packages/mermaid/src/defaultConfig.ts | 6 -- .../mermaid/src/diagrams/kanban/kanbanDb.ts | 59 +++++++++---------- .../src/diagrams/kanban/kanbanRenderer.ts | 1 - .../rendering-elements/shapes/kanbanItem.ts | 11 +++- packages/mermaid/src/rendering-util/types.ts | 1 + .../mermaid/src/schemas/config.schema.yaml | 1 + packages/mermaid/src/types.ts | 2 + 12 files changed, 69 insertions(+), 58 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 62a48855a..af9ca4041 100644 --- a/cypress/platform/knsv2.html +++ b/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' } diff --git a/docs/config/setup/interfaces/mermaid.MermaidConfig.md b/docs/config/setup/interfaces/mermaid.MermaidConfig.md index ad078653a..14c348145 100644 --- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md +++ b/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 #### 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) --- diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md index 52b4af49e..717e35565 100644 --- a/docs/config/setup/interfaces/mermaid.ParseOptions.md +++ b/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) diff --git a/docs/config/setup/interfaces/mermaid.ParseResult.md b/docs/config/setup/interfaces/mermaid.ParseResult.md index ef371d094..9f90b6dd4 100644 --- a/docs/config/setup/interfaces/mermaid.ParseResult.md +++ b/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) diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md index 4c5604022..79209daf0 100644 --- a/docs/config/setup/interfaces/mermaid.RenderResult.md +++ b/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) diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index ec8a8fd8c..feae37f52 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -58,12 +58,6 @@ const config: RequiredDeep = { 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, diff --git a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts b/packages/mermaid/src/diagrams/kanban/kanbanDb.ts index 275d39ea9..ecd45043f 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanDb.ts +++ b/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 { Node, Edge, KanbanNode } from '../../rendering-util/types.js'; +import type { 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 sections: KanbanInternalNode[] = []; +let nodes: KanbanNode[] = []; +let sections: KanbanNode[] = []; let cnt = 0; let elements: Record = {}; @@ -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, - label: sanitizeText(section.descr, conf), + id: section.id, + label: sanitizeText(section.label ?? '', conf), isGroup: true, ticket: section.ticket, shape: 'kanbanSection', + level: section.level, } satisfies KanbanNode; - nodes.push(node); - for (const item of section.children) { + _nodes.push(node); + const children = nodes.filter((n) => n.parentId === section.id); + + for (const item of children) { const childNode = { - id: item.nodeId, - parentId: section.nodeId, - label: sanitizeText(item.descr, conf), + id: item.id, + parentId: section.id, + 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 = { - id: cnt++, - nodeId: sanitizeText(id, conf), + const node: KanbanNode = { + id: sanitizeText(id, conf) || 'kbn' + cnt++, level, - descr: sanitizeText(descr, conf), - type, - children: [], + label: sanitizeText(descr, conf), 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); - // Keep all nodes in the list - nodes.push(node); + // @ts-ignore false positive for section.id + node.parentId = section.id || 'kbn' + cnt++; } 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); } }; diff --git a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts b/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts index db75a280c..e9a8d88e5 100644 --- a/packages/mermaid/src/diagrams/kanban/kanbanRenderer.ts +++ b/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'; 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 93de8aa09..39ab2e767 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/kanbanItem.ts +++ b/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) { - ticketUrl = config.kanban.ticketBaseUrl.replace('#TICKET#', node.ticket); + if (node.ticket && config?.kanban?.ticketBaseUrl) { + ticketUrl = config?.kanban?.ticketBaseUrl.replace('#TICKET#', node.ticket); link = shapeSvg .insert('svg:a', ':first-child') .attr('class', 'kanban-ticket-link') diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index 2f68c2fca..c2138db5c 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -155,4 +155,5 @@ export interface KanbanNode extends Node { ticket?: string; assigned?: string; icon?: string; + level: number; } diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 273d8e40a..0146d309e 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -48,6 +48,7 @@ required: - requirement - architecture - mindmap + - kanban - gitGraph - c4 - sankey diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index dacffecce..35125f998 100644 --- a/packages/mermaid/src/types.ts +++ b/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';