diff --git a/package.json b/package.json index dd436e6158..c0c908e8a7 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/package.json b/packages/mermaid-mindmap/package.json index f13ed0cbc4..7c1f5967db 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 7d8ac38bf5..51f545c757 100644 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ b/packages/mermaid-mindmap/src/mermaidUtils.ts @@ -1,3 +1,5 @@ +import type { MermaidConfig } from 'mermaid'; + 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 67% rename from packages/mermaid-mindmap/src/mindmapDb.js rename to packages/mermaid-mindmap/src/mindmapDb.ts index 4785051a46..c73019cfa8 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid-mindmap/src/mindmapDb.ts @@ -1,15 +1,28 @@ -/** 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'; -let nodes = []; -let cnt = 0; +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; export const clear = () => { nodes = []; cnt = 0; }; -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]; @@ -22,28 +35,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 = { - id: `id-${cnt++}`, + 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); @@ -55,9 +61,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, @@ -80,7 +87,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 '[': @@ -98,7 +105,7 @@ export const getType = (startStr, endStr) => { } }; -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); @@ -108,7 +115,7 @@ export const decorateNode = (decoration) => { } }; -export const type2Str = (type) => { +export const type2Str = (type: number) => { switch (type) { case nodeType.DEFAULT: return 'no-border'; @@ -127,12 +134,13 @@ 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 getNodeById = (id: number): Node => nodes[id]; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index c2ac075744..1c3add3793 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -1,10 +1,9 @@ -/** 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, { getElementById, clearElementRefs } from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; -import * as db from './mindmapDb'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js index 782875a6b2..176f8e61a6 100644 --- a/packages/mermaid-mindmap/src/svgDraw.js +++ b/packages/mermaid-mindmap/src/svgDraw.js @@ -294,11 +294,9 @@ export const positionNode = function (node) { nodeElem.attr('transform', 'translate(' + x + ',' + y + ')'); }; -export default { drawNode, positionNode, drawEdge }; - let elements = {}; -export const setElementById = (id, element) => { +const setElementById = (id, element) => { elements[id] = element; }; @@ -309,3 +307,5 @@ export const getElementById = (id) => { export const clearElementRefs = () => { elements = {}; }; + +export default { drawNode, positionNode, drawEdge }; diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index ae6c62547c..925e1e2db9 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 * diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b2f88060c6..8e3d73948e 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: