From 551b37f969a3de62725e40289159852f99400ff8 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 11 Oct 2022 12:29:39 +0200 Subject: [PATCH 01/15] #3252 Handling for trailing whitespaces in subgraph titles --- packages/mermaid/src/diagrams/flowchart/flowDb.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 5aa203225..4a3fd5e9c 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -456,8 +456,8 @@ export const defaultStyle = function () { export const addSubGraph = function (_id, list, _title) { // console.log('addSubGraph', _id, list, _title); let id = _id.trim(); - let title = _title; - if (_id === _title && _title.match(/\s/)) { + let title = _title.trim(); + if (id === title && title.match(/\s/)) { id = undefined; } /** @param a */ From eec97d10af2ba016f26fe0e772d2405689441e58 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Oct 2022 11:48:51 +0200 Subject: [PATCH 02/15] #3192 Adding the ability to create invisible links in flowcharts(v2) --- packages/mermaid/src/dagre-wrapper/edges.js | 3 +++ packages/mermaid/src/diagrams/flowchart/flowDb.js | 4 ++++ packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js | 5 +++++ packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 1 + 4 files changed, 13 insertions(+) diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js index 6ed08e924..6a75b8b28 100644 --- a/packages/mermaid/src/dagre-wrapper/edges.js +++ b/packages/mermaid/src/dagre-wrapper/edges.js @@ -438,6 +438,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph case 'thick': strokeClasses = 'edge-thickness-thick'; break; + case 'invisible': + strokeClasses = 'edge-thickness-thick'; + break; default: strokeClasses = ''; } diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js index 4a3fd5e9c..4712994d5 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.js +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js @@ -674,6 +674,10 @@ const destructEndLink = (_str) => { stroke = 'thick'; } + if (line[0] === '~') { + stroke = 'invisible'; + } + let dots = countChar('.', line); if (dots) { diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js index 6b7c4c1bf..ce206ce02 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js @@ -280,6 +280,11 @@ export const addEdges = function (edges, g, diagObj) { edgeData.pattern = 'solid'; edgeData.style = 'stroke-width: 3.5px;fill:none;'; break; + case 'invisible': + edgeData.thickness = 'invisible'; + edgeData.pattern = 'solid'; + edgeData.style = 'stroke-width: 0;fill:none;'; + break; } if (typeof edge.style !== 'undefined') { const styles = getStylesFromArray(edge.style); diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index fae7c6cf2..e461165c4 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -120,6 +120,7 @@ that id. \s*[xo<]?\-\-+[-xo>]\s* return 'LINK'; \s*[xo<]?\=\=+[=xo>]\s* return 'LINK'; \s*[xo<]?\-?\.+\-[xo>]?\s* return 'LINK'; +\s*\~\~[\~]+\s* return 'LINK'; \s*[xo<]?\-\-\s* return 'START_LINK'; \s*[xo<]?\=\=\s* return 'START_LINK'; \s*[xo<]?\-\.\s* return 'START_LINK'; From 4d46ea9801ad1d6e8eddf6e97f2e89e8fc993c26 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Oct 2022 11:53:02 +0200 Subject: [PATCH 03/15] #3192 Adding link type of the std docs --- docs/flowchart.md | 14 ++++++++++++++ packages/mermaid/src/docs/flowchart.md | 9 +++++++++ 2 files changed, 23 insertions(+) diff --git a/docs/flowchart.md b/docs/flowchart.md index 0ca87d975..fe4231ede 100644 --- a/docs/flowchart.md +++ b/docs/flowchart.md @@ -264,6 +264,20 @@ flowchart LR A --- B ``` +### An invisisble link + +This can be a usefull tool in some instances where you want to alter the default positining of a node. + +```mermaid-example +flowchart LR + A ~~~ B +``` + +```mermaid +flowchart LR + A ~~~ B +``` + ### Text on links ```mermaid-example diff --git a/packages/mermaid/src/docs/flowchart.md b/packages/mermaid/src/docs/flowchart.md index 3560334af..edeabb651 100644 --- a/packages/mermaid/src/docs/flowchart.md +++ b/packages/mermaid/src/docs/flowchart.md @@ -167,6 +167,15 @@ flowchart LR A --- B ``` +### An invisisble link + +This can be a usefull tool in some instances where you want to alter the default positining of a node. + +```mermaid-example +flowchart LR + A ~~~ B +``` + ### Text on links ```mermaid-example From bed95c77a982a247bee7a4e38c43cfd480e14f5b Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 14 Oct 2022 10:01:32 +0200 Subject: [PATCH 04/15] Some changes in the docs for mindmap --- .gitignore | 2 ++ docs/mindmap.md | 8 +++----- packages/mermaid/src/docs/mindmap.md | 7 +++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index 6e4fe723a..33718aaf7 100644 --- a/.gitignore +++ b/.gitignore @@ -32,3 +32,5 @@ cypress/snapshots/ .eslintcache .tsbuildinfo tsconfig.tsbuildinfo + +local*.html diff --git a/docs/mindmap.md b/docs/mindmap.md index 94baf43e0..32f1e099d 100644 --- a/docs/mindmap.md +++ b/docs/mindmap.md @@ -26,7 +26,6 @@ mindmap Tools Pen and paper Mermaid - ``` ```mermaid @@ -47,14 +46,13 @@ mindmap Tools Pen and paper Mermaid - ``` ## Syntax The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy. -In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C. +In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root. mindmap Root @@ -62,7 +60,7 @@ In the following example you can see how there are 3 different levels. One with B C -In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap. +In the diagram below you can see the example rendered as a mindmap. ```mermaid-example mindmap @@ -220,7 +218,7 @@ The actual indentation does not really matter only compared with the previous ro B C -This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. +This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. ```mermaid-example mindmap diff --git a/packages/mermaid/src/docs/mindmap.md b/packages/mermaid/src/docs/mindmap.md index af7a3df85..5aa6f4953 100644 --- a/packages/mermaid/src/docs/mindmap.md +++ b/packages/mermaid/src/docs/mindmap.md @@ -24,14 +24,13 @@ mindmap Tools Pen and paper Mermaid - ``` ## Syntax The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy. -In the following example you can see how there are 3 different levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the previous lines defining the nodes B and C. +In the following example you can see how there are 3 different levels of indentation. The leftmost indentation is the root of the mindmap. There can only be one root and if you by misstake add two of them on the same level there will be a syntax error. Rows with larger indentation will be connected as children to the previous row with lower indentation. Based on that you can see in the example how the nodes B and C both are children to node A whci in turn is a child of the node Root. ``` mindmap @@ -41,7 +40,7 @@ mindmap C ``` -In summary is a simple text outline where there are one node at the root level called `Root` which has one child `A`. `A` in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap. +In the diagram below you can see the example rendered as a mindmap. ```mermaid mindmap @@ -145,7 +144,7 @@ mindmap C ``` -This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. +This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Mermaid will rely on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings. ```mermaid mindmap From 59cf085af51c248ec9489207175170a21b1c4285 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 14 Oct 2022 15:11:29 +0200 Subject: [PATCH 05/15] #448 Fix for root nodes without children --- packages/mermaid-mindmap/package.json | 2 +- packages/mermaid-mindmap/src/mindmapRenderer.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index befe56016..847eeffef 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-mindmap", - "version": "9.2.0-rc2", + "version": "9.2.0-rc3", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "dist/mermaid-mindmap.core.mjs", "module": "dist/mermaid-mindmap.core.mjs", diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index acbb35048..f69b0b381 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -34,7 +34,7 @@ function drawNodes(svg, mindmap, section, conf) { * @param cy */ function drawEdges(edgesEl, cy) { - cy.edges().map((edge, id) => { + cy?.edges().map((edge, id) => { const data = edge.data(); if (edge[0]._private.bodyBounds) { const bounds = edge[0]._private.rscratch; @@ -100,9 +100,10 @@ function addNodes(mindmap, cy, conf, level) { */ function layoutMindmap(node, conf) { return new Promise((resolve) => { - if (node.children.length === 0) { - return node; - } + // if (node.children.length === 0) { + // resolve(node); + // return; + // } // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); From 16be835c9b8e583b022d342ccfdaba8e0549cd66 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 14 Oct 2022 15:12:22 +0200 Subject: [PATCH 06/15] Removing error thrown disrupting rendering --- packages/mermaid/src/diagram-api/diagramAPI.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 2bc8091ec..91c5ffe71 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -35,7 +35,12 @@ export const registerDiagram = ( ) => void ) => { if (diagrams[id]) { - throw new Error(`Diagram ${id} already registered.`); + log.warn(`Diagram ${id} already registered.`); + // The error throw is commented out to as it breaks pages where you have multiple diagrams, + // it can happen that rendering of the same type of diagram is initiated while the previous + // one is still being imported. import deals with this and only one diagram is imported in + // the end. + // throw new Error(`Diagram ${id} already registered.`); } diagrams[id] = diagram; if (detector) { From 58a53c0fa8999276360239754803a7a5c9007042 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 15 Oct 2022 00:28:21 +0530 Subject: [PATCH 07/15] fix: Diagram load issue --- .vite/build.ts | 12 +++++++++--- package.json | 1 + packages/mermaid/src/Diagram.ts | 8 ++++++-- packages/mermaid/src/diagram-api/diagramAPI.ts | 11 ++++++++++- packages/mermaid/src/logger.ts | 3 +++ 5 files changed, 29 insertions(+), 6 deletions(-) diff --git a/.vite/build.ts b/.vite/build.ts index 7398d30d5..360f878ba 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -6,6 +6,7 @@ import pkg from '../package.json' assert { type: 'json' }; const { dependencies } = pkg; const watch = process.argv.includes('--watch'); +const mermaidOnly = process.argv.includes('--mermaid'); const __dirname = fileURLToPath(new URL('.', import.meta.url)); type OutputOptions = Exclude< @@ -129,14 +130,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { const main = async () => { const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; for (const pkg of packageNames) { + if (mermaidOnly && pkg !== 'mermaid') { + continue; + } await buildPackage(pkg); } }; if (watch) { - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' })); - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' })); + if (!mermaidOnly) { + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + } } else { void main(); } diff --git a/package.json b/package.json index 25d614f95..dd436e615 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "git graph" ], "scripts": { + "build:mermaid": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts --mermaid", "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts", "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"", "build:watch": "pnpm build:vite --watch", diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 0aa741994..c471e0f5f 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -1,6 +1,6 @@ import * as configApi from './config'; import { log } from './logger'; -import { getDiagram, registerDiagram } from './diagram-api/diagramAPI'; +import { DiagramNotFoundError, getDiagram, registerDiagram } from './diagram-api/diagramAPI'; import { detectType, getDiagramLoader } from './diagram-api/detectType'; import { isDetailedError } from './utils'; export class Diagram { @@ -88,9 +88,13 @@ export const getDiagramFromText = async (txt: string, parseError?: Function): Pr // Trying to find the diagram getDiagram(type); } catch (error) { + if (!(error instanceof DiagramNotFoundError)) { + log.error(error); + throw error; + } const loader = getDiagramLoader(type); if (!loader) { - throw new Error(`Diagram ${type} not found.`); + throw new Error(`Loader for ${type} not found.`); } // Diagram not available, loading it const { diagram } = await loader(); diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 91c5ffe71..6eeff6df1 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -34,6 +34,7 @@ export const registerDiagram = ( _setupGraphViewbox: any ) => void ) => { + log.debug(`Registering diagram ${id}`); if (diagrams[id]) { log.warn(`Diagram ${id} already registered.`); // The error throw is commented out to as it breaks pages where you have multiple diagrams, @@ -50,11 +51,19 @@ export const registerDiagram = ( if (typeof callback !== 'undefined') { callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox); } + log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); }; export const getDiagram = (name: string): DiagramDefinition => { + log.debug(`Getting diagram ${name}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); if (name in diagrams) { return diagrams[name]; } - throw new Error(`Diagram ${name} not found.`); + throw new DiagramNotFoundError(name); }; + +export class DiagramNotFoundError extends Error { + constructor(message: string) { + super(`Diagram ${message} not found.`); + } +} diff --git a/packages/mermaid/src/logger.ts b/packages/mermaid/src/logger.ts index b01934e88..3eae56d8a 100644 --- a/packages/mermaid/src/logger.ts +++ b/packages/mermaid/src/logger.ts @@ -30,6 +30,8 @@ export const log: Record = { * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"` */ export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') { + // TODO: Even if we call initialize with loglevel 0, many initial logs are skipped as LL is set to 5 initially. + let numericLevel: number = LEVELS.fatal; if (typeof level === 'string') { level = level.toLowerCase(); @@ -39,6 +41,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin } else if (typeof level === 'number') { numericLevel = level; } + numericLevel = 0; log.trace = () => {}; log.debug = () => {}; log.info = () => {}; From aec1d809665b4b64d9b79e98c0284895fc744c9f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 15 Oct 2022 21:33:09 +0530 Subject: [PATCH 08/15] fix: Remove hardcoded numericLevel --- packages/mermaid/src/logger.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/logger.ts b/packages/mermaid/src/logger.ts index 3eae56d8a..a03d56914 100644 --- a/packages/mermaid/src/logger.ts +++ b/packages/mermaid/src/logger.ts @@ -41,7 +41,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin } else if (typeof level === 'number') { numericLevel = level; } - numericLevel = 0; + log.trace = () => {}; log.debug = () => {}; log.info = () => {}; From a4af3704ba27e484dc07453146bac52a9d44cdca Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 16 Oct 2022 10:05:11 +0530 Subject: [PATCH 09/15] fix: getElementById type issue. Converts mindmapDB to TS --- packages/mermaid-mindmap/package.json | 1 + packages/mermaid-mindmap/src/mermaidUtils.ts | 4 +- .../src/{mindmapDb.js => mindmapDb.ts} | 60 +++++++++++-------- pnpm-lock.yaml | 2 + 4 files changed, 41 insertions(+), 26 deletions(-) rename packages/mermaid-mindmap/src/{mindmapDb.js => mindmapDb.ts} (64%) diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index 847eeffef..dfbe5b88e 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -58,6 +58,7 @@ }, "devDependencies": { "concurrently": "^7.4.0", + "mermaid": "workspace:*", "rimraf": "^3.0.2" }, "resolutions": { diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts index 7d8ac38bf..c3d70be13 100644 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ b/packages/mermaid-mindmap/src/mermaidUtils.ts @@ -1,3 +1,5 @@ +import type { MermaidConfig } from 'mermaid/dist/config.type'; + const warning = (s: string) => { // Todo remove debug code console.error('Log function was called before initialization', s); // eslint-disable-line @@ -24,7 +26,7 @@ export const log: Record = { }; export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; -export let getConfig: () => object; +export let getConfig: () => MermaidConfig; export let sanitizeText: (str: string) => string; // eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.ts similarity index 64% rename from packages/mermaid-mindmap/src/mindmapDb.js rename to packages/mermaid-mindmap/src/mindmapDb.ts index 2ae98c223..3f35d9209 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid-mindmap/src/mindmapDb.ts @@ -1,16 +1,30 @@ /** Created by knut on 15-01-14. */ import { sanitizeText, getConfig, log } from './mermaidUtils'; +import type { DetailedError } from 'mermaid/dist/utils'; -let nodes = []; +interface Node { + id: number; + nodeId: string; + level: number; + descr: string; + type: number; + children: Node[]; + width: number; + padding: number; + icon?: string; + class?: string; +} + +let nodes: Node[] = []; let cnt = 0; -let elements = {}; +let elements: Record = {}; export const clear = () => { nodes = []; cnt = 0; elements = {}; }; -const getParent = function (level) { +const getParent = function (level: number) { for (let i = nodes.length - 1; i >= 0; i--) { if (nodes[i].level < level) { return nodes[i]; @@ -23,28 +37,21 @@ const getParent = function (level) { export const getMindmap = () => { return nodes.length > 0 ? nodes[0] : null; }; -export const addNode = (level, id, descr, type) => { + +export const addNode = (level: number, id: string, descr: string, type: number) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); - const node = { + const padding = conf.mindmap?.padding ?? 15; + const node: Node = { id: cnt++, nodeId: sanitizeText(id), level, descr: sanitizeText(descr), type, children: [], - width: getConfig().mindmap.maxNodeWidth, + width: getConfig().mindmap?.maxNodeWidth ?? 200, + padding: type === nodeType.ROUNDED_RECT || type === nodeType.RECT ? 2 * padding : padding, }; - switch (node.type) { - case nodeType.ROUNDED_RECT: - node.padding = 2 * conf.mindmap.padding; - break; - case nodeType.RECT: - node.padding = 2 * conf.mindmap.padding; - break; - default: - node.padding = conf.mindmap.padding; - } const parent = getParent(level); if (parent) { parent.children.push(node); @@ -56,9 +63,10 @@ export const addNode = (level, id, descr, type) => { nodes.push(node); } else { // Syntax error ... there can only bee one root - let error = new Error( + const error = new Error( 'There can be only one root. No parent could be found for ("' + node.descr + '")' ); + // @ts-ignore TODO: Add mermaid error error.hash = { text: 'branch ' + name, token: 'branch ' + name, @@ -81,7 +89,7 @@ export const nodeType = { BANG: 5, }; -export const getType = (startStr, endStr) => { +export const getType = (startStr: string, endStr: string): number => { log.debug('In get type', startStr, endStr); switch (startStr) { case '[': @@ -99,11 +107,11 @@ export const getType = (startStr, endStr) => { } }; -export const setElementForId = (id, element) => { +export const setElementForId = (id: number, element: HTMLElement) => { elements[id] = element; }; -export const decorateNode = (decoration) => { +export const decorateNode = (decoration: { icon: string; class: string }) => { const node = nodes[nodes.length - 1]; if (decoration && decoration.icon) { node.icon = sanitizeText(decoration.icon); @@ -113,7 +121,7 @@ export const decorateNode = (decoration) => { } }; -export const type2Str = (type) => { +export const type2Str = (type: number) => { switch (type) { case nodeType.DEFAULT: return 'no-border'; @@ -132,13 +140,15 @@ export const type2Str = (type) => { } }; -export let parseError; -export const setErrorHandler = (handler) => { +export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void; +export let parseError: ParseErrorFunction; +export const setErrorHandler = (handler: ParseErrorFunction) => { parseError = handler; }; // Expose logger to grammar export const getLogger = () => log; -export const getNodeById = (id) => nodes[id]; -export const getElementById = (id) => elements[id]; +export const getNodeById = (id: number): Node => nodes[id]; +export const getElementById = (id: number | string): HTMLElement => + elements[typeof id === 'string' ? parseInt(id) : id]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b2f88060c..8e3d73948 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -285,6 +285,7 @@ importers: cytoscape-cose-bilkent: ^4.1.0 cytoscape-fcose: ^2.1.0 d3: ^7.0.0 + mermaid: workspace:* non-layered-tidy-tree-layout: ^2.0.2 rimraf: ^3.0.2 dependencies: @@ -296,6 +297,7 @@ importers: non-layered-tidy-tree-layout: 2.0.2 devDependencies: concurrently: 7.4.0 + mermaid: link:../mermaid rimraf: 3.0.2 packages: From c83e29c6e3f552f625c36a9e08876ffb3385615b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 16 Oct 2022 10:11:19 +0530 Subject: [PATCH 10/15] chore: Update creation date --- packages/mermaid-mindmap/src/mindmapDb.ts | 2 +- packages/mermaid-mindmap/src/mindmapRenderer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid-mindmap/src/mindmapDb.ts b/packages/mermaid-mindmap/src/mindmapDb.ts index 3f35d9209..3b07bd882 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.ts +++ b/packages/mermaid-mindmap/src/mindmapDb.ts @@ -1,4 +1,4 @@ -/** Created by knut on 15-01-14. */ +/** Created by knut on 23-07-2022. */ import { sanitizeText, getConfig, log } from './mermaidUtils'; import type { DetailedError } from 'mermaid/dist/utils'; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index f69b0b381..c4f71588f 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -1,4 +1,4 @@ -/** Created by knut on 14-12-11. */ +/** Created by knut on 23-07-2022. */ import { select } from 'd3'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; import svgDraw from './svgDraw'; From 97a842e651b3569322f837b85aaf98da77bc69d4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 17 Oct 2022 11:45:19 +0530 Subject: [PATCH 11/15] fix: Build types --- package.json | 2 +- packages/mermaid-mindmap/src/mermaidUtils.ts | 2 +- packages/mermaid-mindmap/src/mindmapDb.ts | 2 +- packages/mermaid/src/mermaid.ts | 5 +++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index dd436e615..c0c908e8a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "scripts": { "build:mermaid": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts --mermaid", "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts", - "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"", + "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly", "build:watch": "pnpm build:vite --watch", "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"", "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"", diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts index c3d70be13..51f545c75 100644 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ b/packages/mermaid-mindmap/src/mermaidUtils.ts @@ -1,4 +1,4 @@ -import type { MermaidConfig } from 'mermaid/dist/config.type'; +import type { MermaidConfig } from 'mermaid'; const warning = (s: string) => { // Todo remove debug code diff --git a/packages/mermaid-mindmap/src/mindmapDb.ts b/packages/mermaid-mindmap/src/mindmapDb.ts index 3b07bd882..890a76b7e 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.ts +++ b/packages/mermaid-mindmap/src/mindmapDb.ts @@ -1,6 +1,6 @@ /** Created by knut on 23-07-2022. */ import { sanitizeText, getConfig, log } from './mermaidUtils'; -import type { DetailedError } from 'mermaid/dist/utils'; +import type { DetailedError } from 'mermaid'; interface Node { id: number; diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index ae6c62547..925e1e2db 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -2,13 +2,14 @@ * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid * functionality and to render the diagrams to svg code! */ -import { MermaidConfig } from './config.type'; +import type { MermaidConfig } from './config.type'; import { log } from './logger'; import utils from './utils'; import { mermaidAPI } from './mermaidAPI'; import { addDetector } from './diagram-api/detectType'; -import { isDetailedError } from './utils'; +import { isDetailedError, DetailedError } from './utils'; +export type { MermaidConfig, DetailedError }; /** * ## init * From 752a6b2cb0950baa4636a3e7f4fa7f7e486934f0 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 17 Oct 2022 10:46:46 +0200 Subject: [PATCH 12/15] #3687 Separating the render specific data from the data related to parsing --- packages/mermaid-mindmap/package.json | 2 +- packages/mermaid-mindmap/src/mindmapDb.js | 10 ++-------- .../mermaid-mindmap/src/mindmapRenderer.js | 5 +++-- packages/mermaid-mindmap/src/svgDraw.js | 18 ++++++++++++++++-- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index 847eeffef..f13ed0cbc 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-mindmap", - "version": "9.2.0-rc3", + "version": "9.2.0-rc4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "main": "dist/mermaid-mindmap.core.mjs", "module": "dist/mermaid-mindmap.core.mjs", diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.js index 2ae98c223..4785051a4 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid-mindmap/src/mindmapDb.js @@ -3,11 +3,10 @@ import { sanitizeText, getConfig, log } from './mermaidUtils'; let nodes = []; let cnt = 0; -let elements = {}; + export const clear = () => { nodes = []; cnt = 0; - elements = {}; }; const getParent = function (level) { @@ -27,7 +26,7 @@ export const addNode = (level, id, descr, type) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); const node = { - id: cnt++, + id: `id-${cnt++}`, nodeId: sanitizeText(id), level, descr: sanitizeText(descr), @@ -99,10 +98,6 @@ export const getType = (startStr, endStr) => { } }; -export const setElementForId = (id, element) => { - elements[id] = element; -}; - export const decorateNode = (decoration) => { const node = nodes[nodes.length - 1]; if (decoration && decoration.icon) { @@ -141,4 +136,3 @@ export const setErrorHandler = (handler) => { export const getLogger = () => log; export const getNodeById = (id) => nodes[id]; -export const getElementById = (id) => elements[id]; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index f69b0b381..c2ac07574 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -1,7 +1,7 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; -import svgDraw from './svgDraw'; +import svgDraw, { getElementById, clearElementRefs } from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb'; @@ -155,7 +155,7 @@ function positionNodes(cy) { data.x = node.position().x; data.y = node.position().y; svgDraw.positionNode(data); - const el = db.getElementById(data.nodeId); + const el = getElementById(data.nodeId); log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data); el.attr( 'transform', @@ -179,6 +179,7 @@ export const draw = async (text, id, version, diagObj) => { // This is done only for throwing the error if the text is not valid. diagObj.db.clear(); + clearElementRefs(); // Parse the graph definition diagObj.parser.parse(text); diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js index 1246b1cb9..782875a6b 100644 --- a/packages/mermaid-mindmap/src/svgDraw.js +++ b/packages/mermaid-mindmap/src/svgDraw.js @@ -259,7 +259,7 @@ export const drawNode = function (elem, node, fullSection, conf) { // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') { // nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')'); // } - db.setElementForId(node.id, nodeElem); + setElementById(node.id, nodeElem); return node.height; }; @@ -286,7 +286,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, ful }; export const positionNode = function (node) { - const nodeElem = db.getElementById(node.id); + const nodeElem = getElementById(node.id); const x = node.x || 0; const y = node.y || 0; @@ -295,3 +295,17 @@ export const positionNode = function (node) { }; export default { drawNode, positionNode, drawEdge }; + +let elements = {}; + +export const setElementById = (id, element) => { + elements[id] = element; +}; + +export const getElementById = (id) => { + return elements[id]; +}; + +export const clearElementRefs = () => { + elements = {}; +}; From e86d7894f525bc4c3989dec8b8a84ec589078120 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 17 Oct 2022 10:51:41 +0200 Subject: [PATCH 13/15] #3680 Add font familiy in a way that does remove other configuration --- packages/mermaid/src/mermaidAPI.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 7c967e5fd..df6ab1a2b 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -455,10 +455,11 @@ const handleDirective = function (p: any, directive: any, type: string): void { /** @param {MermaidConfig} options */ async function initialize(options: MermaidConfig) { // Handle legacy location of font-family configuration - if (options?.fontFamily) { - if (!options.themeVariables?.fontFamily) { - options.themeVariables = { fontFamily: options.fontFamily }; + if (options.fontFamily) { + if (!options.themeVariables) { + options.themeVariables = {}; } + options.themeVariables.fontFamily = options.fontFamily; } // Set default options From 2ae8bf29877a447aa0e62c845446681369525391 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 18 Oct 2022 16:04:14 +0200 Subject: [PATCH 14/15] Color fix for default nodes in mindmap, line uses inv color --- packages/mermaid-mindmap/src/styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js index 95674e8f8..241938b62 100644 --- a/packages/mermaid-mindmap/src/styles.js +++ b/packages/mermaid-mindmap/src/styles.js @@ -27,6 +27,7 @@ const genSections = (options) => { .node-icon-${i - 1} { font-size: 40px; color: ${options['cScaleLabel' + i]}; + // fill: ${options['cScaleLabel' + i]}; // color: ${options['gitInv' + i]}; } .section-edge-${i - 1}{ @@ -36,7 +37,7 @@ const genSections = (options) => { stroke-width: ${sw}; } .section-${i - 1} line { - stroke: ${options['lineColor' + i]} ; + stroke: ${options['cScaleInv' + i]} ; stroke-width: 3; } From 77f5e0d5f3fa50f71dd79eadda2068ca4720a6e6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 19 Oct 2022 19:13:05 +0530 Subject: [PATCH 15/15] fix: Add default arg to options --- packages/mermaid/src/mermaidAPI.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index df6ab1a2b..13366f41d 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -453,7 +453,7 @@ const handleDirective = function (p: any, directive: any, type: string): void { }; /** @param {MermaidConfig} options */ -async function initialize(options: MermaidConfig) { +async function initialize(options: MermaidConfig = {}) { // Handle legacy location of font-family configuration if (options.fontFamily) { if (!options.themeVariables) {