fix: getElementById type issue.

Converts mindmapDB to TS

packages/mermaid-mindmap/package.json

@@ -58,6 +58,7 @@
   },
   "devDependencies": {
     "concurrently": "^7.4.0",
+    "mermaid": "workspace:*",
     "rimraf": "^3.0.2"
   },
   "resolutions": {

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<keyof typeof LEVELS, typeof console.log> = {
 };
 
 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: (

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<number, HTMLElement> = {};
 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 type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
-export const setErrorHandler = (handler) => {
+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];
-export const getElementById = (id) => elements[id];
+export const getElementById = (id: number | string): HTMLElement =>
+  elements[typeof id === 'string' ? parseInt(id) : id];

pnpm-lock.yaml

@@ -289,6 +289,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:
@@ -300,6 +301,7 @@ importers:
       non-layered-tidy-tree-layout: 2.0.2
     devDependencies:
       concurrently: 7.4.0
+      mermaid: link:../mermaid
       rimraf: 3.0.2
 
 packages: