From a4af3704ba27e484dc07453146bac52a9d44cdca Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 16 Oct 2022 10:05:11 +0530 Subject: [PATCH 1/3] 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 847eeffef2..dfbe5b88e5 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..c3d70be135 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 2ae98c223b..3f35d92092 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 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: From c83e29c6e3f552f625c36a9e08876ffb3385615b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 16 Oct 2022 10:11:19 +0530 Subject: [PATCH 2/3] 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 3f35d92092..3b07bd8826 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 f69b0b381a..c4f71588f4 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 3/3] 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 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/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts index c3d70be135..51f545c757 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 3b07bd8826..890a76b7e0 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 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 *