refactor: Fix types and imports

package.json

@@ -127,5 +127,10 @@
   },
   "nyc": {
     "report-dir": "coverage/cypress"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }

packages/mermaid-example-diagram/package.json

@@ -39,15 +39,10 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.1",
-    "cytoscape": "^3.23.0",
-    "cytoscape-cose-bilkent": "^4.1.0",
-    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.0.0",
-    "khroma": "^2.0.0",
-    "non-layered-tidy-tree-layout": "^2.0.2"
+    "khroma": "^2.0.0"
   },
   "devDependencies": {
-    "@types/cytoscape": "^3.19.9",
     "concurrently": "^8.0.0",
     "rimraf": "^5.0.0",
     "mermaid": "workspace:*"

packages/mermaid/package.json

@@ -62,9 +62,8 @@
     "@braintree/sanitize-url": "^6.0.1",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
-    "cytoscape": "^3.23.0",
+    "cytoscape": "^3.28.1",
     "cytoscape-cose-bilkent": "^4.1.0",
-    "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",

packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts

@@ -1,13 +1,13 @@
 // @ts-ignore: JISON doesn't support types
-import mindmapParser from './parser/mindmap.jison';
-import * as mindmapDb from './mindmapDb.js';
-import mindmapRenderer from './mindmapRenderer.js';
-import mindmapStyles from './styles.js';
+import parser from './parser/mindmap.jison';
+import db from './mindmapDb.js';
+import renderer from './mindmapRenderer.js';
+import styles from './styles.js';
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 
 export const diagram: DiagramDefinition = {
-  db: mindmapDb,
-  renderer: mindmapRenderer,
-  parser: mindmapParser,
-  styles: mindmapStyles,
+  db,
+  renderer,
+  parser,
+  styles,
 };

packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts

@@ -1,6 +1,6 @@
 // @ts-expect-error No types available for JISON
 import { parser as mindmap } from './parser/mindmap.jison';
-import * as mindmapDB from './mindmapDb.js';
+import mindmapDB from './mindmapDb.js';
 // Todo fix utils functions for tests
 import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -2,23 +2,7 @@ import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import type { D3Element } from '../../mermaidAPI.js';
-
-export interface MindMapNode {
-  id: number;
-  nodeId: string;
-  level: number;
-  descr: string;
-  type: number;
-  children: MindMapNode[];
-  width: number;
-  padding: number;
-  section?: number;
-  height?: number;
-  class?: string;
-  icon?: string;
-  x?: number;
-  y?: number;
-}
+import type { MindMapNode } from './mindmapTypes.js';
 
 let nodes: MindMapNode[] = [];
 let cnt = 0;
@@ -158,3 +142,17 @@ export const type2Str = (type: number) => {
 // Expose logger to grammar
 export const getLogger = () => log;
 export const getElementById = (id: string) => elements[id];
+
+const db = {
+  clear,
+  addNode,
+  getMindmap,
+  nodeType,
+  setElementForId,
+  decorateNode,
+  type2Str,
+  getLogger,
+  getElementById,
+} as const;
+
+export default db;

packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts

@@ -6,17 +6,16 @@ import svgDraw from './svgDraw.js';
 import cytoscape from 'cytoscape';
 // @ts-expect-error No types available
 import coseBilkent from 'cytoscape-cose-bilkent';
-import * as db from './mindmapDb.js';
+import type { MindMapNode, MindmapDB } from './mindmapTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type { Diagram } from '../../Diagram.js';
-import type { MindmapDB } from './mindmapTypes.js';
 import type { D3Element } from '../../mermaidAPI.js';
 import type { MermaidConfigWithDefaults } from '../../config.js';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
 
-function drawNodes(svg: D3Element, mindmap: db.MindMapNode, section: number, conf: MermaidConfig) {
+function drawNodes(svg: D3Element, mindmap: MindMapNode, section: number, conf: MermaidConfig) {
   svgDraw.drawNode(svg, mindmap, section, conf);
   if (mindmap.children) {
     mindmap.children.forEach((child, index) => {
@@ -58,7 +57,7 @@ function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) {
   });
 }
 
-function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
+function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) {
   cy.add({
     group: 'nodes',
     data: {
@@ -94,7 +93,7 @@ function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConf
 }
 
 function layoutMindmap(
-  node: db.MindMapNode,
+  node: MindMapNode,
   conf: MermaidConfigWithDefaults
 ): Promise<cytoscape.Core> {
   return new Promise((resolve) => {
@@ -137,7 +136,7 @@ function layoutMindmap(
   });
 }
 
-function positionNodes(cy: cytoscape.Core) {
+function positionNodes(db: MindmapDB, cy: cytoscape.Core) {
   cy.nodes().map((node, id) => {
     const data = node.data();
     data.x = node.position().x;
@@ -155,7 +154,7 @@ function positionNodes(cy: cytoscape.Core) {
 
 export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => {
   const conf = getConfig();
-
+  const db = diagObj.db as MindmapDB;
   conf.htmlLabels = false;
 
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
@@ -176,7 +175,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
   const svg = root.select('#' + id);
 
   svg.append('g');
-  const mm = (diagObj.db as MindmapDB).getMindmap();
+  const mm = db.getMindmap();
   if (!mm) {
     return;
   }
@@ -196,7 +195,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D
 
   // After this we can draw, first the edges and the then nodes with the correct position
   drawEdges(edgesElem, cy);
-  positionNodes(cy);
+  positionNodes(db, cy);
 
   // Setup the view box and size of the svg element
   setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);

packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts

@@ -1,3 +1,20 @@
-import type * as mindmapDb from './mindmapDb.js';
+import type mindmapDb from './mindmapDb.js';
+
+export interface MindMapNode {
+  id: number;
+  nodeId: string;
+  level: number;
+  descr: string;
+  type: number;
+  children: MindMapNode[];
+  width: number;
+  padding: number;
+  section?: number;
+  height?: number;
+  class?: string;
+  icon?: string;
+  x?: number;
+  y?: number;
+}
 
 export type MindmapDB = typeof mindmapDb;

patches/cytoscape@3.28.1.patch

@@ -0,0 +1,20 @@
+diff --git a/package.json b/package.json
+index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
+--- a/package.json
++++ b/package.json
+@@ -30,7 +30,15 @@
+   "engines": {
+     "node": ">=0.10"
+   },
++  "exports": {
++    ".": {
++      "import": "./dist/cytoscape.umd.js",
++      "default": "./dist/cytoscape.cjs.js"
++    },
++    "./*": "./*"
++  },
+   "main": "dist/cytoscape.cjs.js",
++  "module": "dist/cytoscape.umd.js",
+   "unpkg": "dist/cytoscape.min.js",
+   "jsdelivr": "dist/cytoscape.min.js",
+   "scripts": {