From 74df4a7a68364428e17b8332aff09e8e9a0f07dc Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 8 Feb 2023 17:42:58 +0100 Subject: [PATCH] Mind map coming in from the cold. A lazy loaded diagram in the same way as timeline. --- .vite/build.ts | 10 +- .vite/server.ts | 2 +- .../other/external-diagrams.spec.js | 4 +- ...=> external-diagrams-example-diagram.html} | 32 +--- cypress/platform/knsv2.html | 12 +- cypress/platform/knsv3.html | 142 +++++++++--------- cypress/platform/viewer.js | 4 +- package.json | 2 +- packages/mermaid-example-diagram/Readme.md | 3 - packages/mermaid-example-diagram/package.json | 39 +++-- .../mermaid-example-diagram/src/detector.ts | 22 +-- .../src/diagram-definition.ts | 2 - .../src/exampleDiagram.spec.js | 14 +- .../src/mermaidUtils.ts | 32 ++-- .../mermaid-example-diagram/tsconfig.json | 1 + packages/mermaid-mindmap/package.json | 65 -------- packages/mermaid-mindmap/src/mermaidUtils.ts | 59 -------- packages/mermaid-mindmap/tsconfig.json | 10 -- packages/mermaid/package.json | 4 + .../mermaid/src/diagram-api/detectType.ts | 5 +- .../src/diagram-api/diagram-orchestration.ts | 5 +- .../src/diagrams/mindmap}/detector.ts | 3 +- .../diagrams/mindmap}/diagram-definition.ts | 2 - .../src/diagrams/mindmap}/mindmap.spec.js | 14 +- .../src/diagrams/mindmap}/mindmapDb.js | 7 +- .../src/diagrams/mindmap}/mindmapRenderer.js | 4 +- .../diagrams/mindmap}/parser/mindmap.jison | 0 .../src/diagrams/mindmap}/styles.js | 0 .../src/diagrams/mindmap}/svgDraw.js | 0 .../src/diagrams/mindmap}/types/index.d.ts | 0 .../src/docs/.vitepress/theme/mermaid.ts | 4 +- packages/mermaid/src/docs/vite.config.ts | 4 +- pnpm-lock.yaml | 41 +++-- tests/webpack/package.json | 2 +- 34 files changed, 206 insertions(+), 344 deletions(-) rename cypress/platform/{external-diagrams-mindmap.html => external-diagrams-example-diagram.html} (60%) delete mode 100644 packages/mermaid-example-diagram/Readme.md delete mode 100644 packages/mermaid-mindmap/package.json delete mode 100644 packages/mermaid-mindmap/src/mermaidUtils.ts delete mode 100644 packages/mermaid-mindmap/tsconfig.json rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/detector.ts (81%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/diagram-definition.ts (84%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmap.spec.js (98%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmapDb.js (93%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/mindmapRenderer.js (97%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/parser/mindmap.jison (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/styles.js (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/svgDraw.js (100%) rename packages/{mermaid-mindmap/src => mermaid/src/diagrams/mindmap}/types/index.d.ts (100%) diff --git a/.vite/build.ts b/.vite/build.ts index 019461c49..c9d44219f 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -36,9 +36,9 @@ const packageOptions = { packageName: 'mermaid', file: 'mermaid.ts', }, - 'mermaid-mindmap': { - name: 'mermaid-mindmap', - packageName: 'mermaid-mindmap', + 'mermaid-example-diagram': { + name: 'mermaid-example-diagram', + packageName: 'mermaid-example-diagram', file: 'detector.ts', }, }; @@ -114,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) if (watch && config.build) { config.build.watch = { - include: ['packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**'], + include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'], }; } @@ -139,7 +139,7 @@ const main = async () => { if (watch) { build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' })); if (!mermaidOnly) { - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } } else if (visualize) { await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' })); diff --git a/.vite/server.ts b/.vite/server.ts index aced396ec..0f1fef91d 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -22,7 +22,7 @@ async function createServer() { app.use(cors); app.use(express.static('./packages/mermaid/dist')); // app.use(express.static('./packages/mermaid-example-diagram/dist')); - app.use(express.static('./packages/mermaid-mindmap/dist')); + app.use(express.static('./packages/mermaid-example-diagram/dist')); app.use(vite.middlewares); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js index be69dfc98..c94235162 100644 --- a/cypress/integration/other/external-diagrams.spec.js +++ b/cypress/integration/other/external-diagrams.spec.js @@ -2,8 +2,8 @@ import { urlSnapshotTest } from '../../helpers/util'; describe('mermaid', () => { describe('registerDiagram', () => { - it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { - const url = 'http://localhost:9000/external-diagrams-mindmap.html'; + it('should work on @mermaid-js/mermaid-example-diagram', () => { + const url = 'http://localhost:9000/external-diagrams-example-diagram.html'; urlSnapshotTest(url, {}, false, false); }); }); diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-example-diagram.html similarity index 60% rename from cypress/platform/external-diagrams-mindmap.html rename to cypress/platform/external-diagrams-example-diagram.html index e445a7627..9d2cad778 100644 --- a/cypress/platform/external-diagrams-mindmap.html +++ b/cypress/platform/external-diagrams-example-diagram.html @@ -2,34 +2,8 @@

Should correctly load a third-party diagram using registerDiagram

-mindmap
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand
child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand
grand
child 8))
+example-diagram
- @@ -37,11 +11,11 @@ mindmap diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index 01b49435f..4d7db84f7 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,5 +1,5 @@ import mermaid2 from '../../packages/mermaid/src/mermaid'; -import mindmap from '../../packages/mermaid-mindmap/src/detector'; +import externalExample from '../../packages/mermaid-example-diagram/src/detector'; function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); @@ -44,7 +44,7 @@ const contentLoaded = async function () { document.getElementsByTagName('body')[0].appendChild(div); } - await mermaid2.registerExternalDiagrams([mindmap]); + await mermaid2.registerExternalDiagrams([externalExample]); mermaid2.initialize(graphObj.mermaid); await mermaid2.init(); markRendered(); diff --git a/package.json b/package.json index e7cb9bdf0..c96f2c8d7 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "build:vite": "ts-node-esm --transpileOnly .vite/build.ts", "build:mermaid": "pnpm build:vite --mermaid", "build:viz": "pnpm build:mermaid --visualize", - "build:types": "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-example-diagran/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-example-diagram/Readme.md b/packages/mermaid-example-diagram/Readme.md deleted file mode 100644 index 38056e3c7..000000000 --- a/packages/mermaid-example-diagram/Readme.md +++ /dev/null @@ -1,3 +0,0 @@ -### Do not refer this package. It is not ready. - -### Refer mermaid-mindmap instead. diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json index 8e958806a..c4d3a57cc 100644 --- a/packages/mermaid-example-diagram/package.json +++ b/packages/mermaid-example-diagram/package.json @@ -1,36 +1,25 @@ { "name": "@mermaid-js/mermaid-example-diagram", - "version": "9.2.0-rc2", - "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", + "version": "9.3.0", + "description": "Example of external diagram module for MermaidJS.", + "module": "dist/mermaid-example-diagram.core.mjs", + "types": "dist/detector.d.ts", "type": "module", "exports": { ".": { - "require": "./dist/mermaid-example-diagram.min.js", - "import": "./dist/mermaid-example-diagram.core.mjs" + "import": "./dist/mermaid-example-diagram.core.mjs", + "types": "./dist/detector.d.ts" }, "./*": "./*" }, "keywords": [ "diagram", "markdown", - "mindmap", + "example", "mermaid" ], "scripts": { - "clean": "rimraf dist", - "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly", - "build:watch": "yarn build:code --watch", - "build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"", - "build": "yarn clean; yarn build:esbuild", - "dev": "node .esbuild/serve.cjs", - "release": "yarn build", - "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .", - "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .", - "lint:jison": "ts-node-esm src/jison/lint.mts", - "todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"", - "todo-pre-commit": "lint-staged" + "prepublishOnly": "pnpm -w run build" }, "repository": { "type": "git", @@ -48,9 +37,19 @@ "page" ] }, - "dependencies": {}, + "dependencies": { + "@braintree/sanitize-url": "^6.0.0", + "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" + }, "devDependencies": { + "@types/cytoscape": "^3.19.9", "concurrently": "^7.5.0", + "mermaid": "workspace:*", "rimraf": "^3.0.2" }, "resolutions": { diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts index d30b99fba..fdf7345bb 100644 --- a/packages/mermaid-example-diagram/src/detector.ts +++ b/packages/mermaid-example-diagram/src/detector.ts @@ -1,18 +1,20 @@ -// @ts-ignore: TODO Fix ts errors -export const id = 'example-diagram'; +import type { ExternalDiagramDefinition } from 'mermaid'; -/** - * Detector function that will be called by mermaid to determine if the diagram is this type of diagram. - * - * @param txt - The diagram text will be passed to the detector - * @returns True if the diagram text matches a diagram of this type - */ +const id = 'example-diagram'; -export const detector = (txt: string) => { +const detector = (txt: string) => { return txt.match(/^\s*example-diagram/) !== null; }; -export const loadDiagram = async () => { +const loader = async () => { const { diagram } = await import('./diagram-definition'); return { id, diagram }; }; + +const plugin: ExternalDiagramDefinition = { + id, + detector, + loader, +}; + +export default plugin; diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts index 95f7cc11d..c31b3d6e7 100644 --- a/packages/mermaid-example-diagram/src/diagram-definition.ts +++ b/packages/mermaid-example-diagram/src/diagram-definition.ts @@ -12,5 +12,3 @@ export const diagram = { styles, injectUtils, }; - -export { detector, id } from './detector'; diff --git a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js index db539aac0..96c8cd5b2 100644 --- a/packages/mermaid-example-diagram/src/exampleDiagram.spec.js +++ b/packages/mermaid-example-diagram/src/exampleDiagram.spec.js @@ -1,5 +1,17 @@ import { parser } from './parser/exampleDiagram'; -import db from './exampleDiagramDb'; +import * as db from './exampleDiagramDb'; +import { injectUtils } from './mermaidUtils'; +// Todo fix utils functions for tests +import { + log, + setLogLevel, + getConfig, + sanitizeText, + setupGraphViewBox, +} from '../../mermaid/src/diagram-api/diagramAPI'; + +injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); + describe('when parsing an info graph it', function () { let ex; beforeEach(function () { diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts index 9ba66be5a..44cc85f73 100644 --- a/packages/mermaid-example-diagram/src/mermaidUtils.ts +++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts @@ -1,4 +1,8 @@ -const warning = () => null; +const warning = (s: string) => { + // Todo remove debug code + // eslint-disable-next-line no-console + console.error('Log function was called before initialization', s); +}; export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; @@ -19,13 +23,11 @@ export const log: Record = { error: warning, fatal: warning, }; + export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; export let getConfig: () => object; export let sanitizeText: (str: string) => string; -export let commonDb: any; -/** - * Placeholder for the real function that will be injected by mermaid. - */ +export let commonDb: () => object; // eslint-disable @typescript-eslint/no-explicit-any export let setupGraphViewbox: ( graph: any, @@ -34,25 +36,15 @@ export let setupGraphViewbox: ( useMaxWidth: boolean ) => void; -/** - * Function called by mermaid that injects utility functions that help the diagram to be a good citizen. - * - * @param _log - log from mermaid/src/diagramAPI.ts - * @param _setLogLevel - setLogLevel from mermaid/src/diagramAPI.ts - * @param _getConfig - getConfig from mermaid/src/diagramAPI.ts - * @param _sanitizeText - sanitizeText from mermaid/src/diagramAPI.ts - * @param _setupGraphViewbox - setupGraphViewbox from mermaid/src/diagramAPI.ts - * @param _commonDb -`commonDb` from mermaid/src/diagramAPI.ts - */ export const injectUtils = ( _log: Record, - _setLogLevel: typeof setLogLevel, - _getConfig: typeof getConfig, - _sanitizeText: typeof sanitizeText, - _setupGraphViewbox: typeof setupGraphViewbox, + _setLogLevel: any, + _getConfig: any, + _sanitizeText: any, + _setupGraphViewbox: any, _commonDb: any ) => { - _log.info('Mermaid utils injected into timeline-diagram'); + _log.info('Mermaid utils injected'); log.trace = _log.trace; log.debug = _log.debug; log.info = _log.info; diff --git a/packages/mermaid-example-diagram/tsconfig.json b/packages/mermaid-example-diagram/tsconfig.json index 45076b7b5..310137cc0 100644 --- a/packages/mermaid-example-diagram/tsconfig.json +++ b/packages/mermaid-example-diagram/tsconfig.json @@ -1,5 +1,6 @@ { "extends": "../../tsconfig.json", + "module": "esnext", "compilerOptions": { "rootDir": "./src", "outDir": "./dist" diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json deleted file mode 100644 index e79e2df4f..000000000 --- a/packages/mermaid-mindmap/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "@mermaid-js/mermaid-mindmap", - "version": "9.3.0", - "description": "Mindmap diagram module for MermaidJS.", - "module": "dist/mermaid-mindmap.core.mjs", - "types": "dist/detector.d.ts", - "type": "module", - "exports": { - ".": { - "import": "./dist/mermaid-mindmap.core.mjs", - "types": "./dist/detector.d.ts" - }, - "./*": "./*" - }, - "keywords": [ - "diagram", - "markdown", - "mindmap", - "mermaid" - ], - "scripts": { - "prepublishOnly": "pnpm -w run build" - }, - "repository": { - "type": "git", - "url": "https://github.com/mermaid-js/mermaid" - }, - "author": "Knut Sveidqvist", - "license": "MIT", - "standard": { - "ignore": [ - "**/parser/*.js", - "dist/**/*.js", - "cypress/**/*.js" - ], - "globals": [ - "page" - ] - }, - "dependencies": { - "@braintree/sanitize-url": "^6.0.0", - "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" - }, - "devDependencies": { - "@types/cytoscape": "^3.19.9", - "concurrently": "^7.5.0", - "mermaid": "workspace:*", - "rimraf": "^3.0.2" - }, - "resolutions": { - "d3": "^7.0.0" - }, - "files": [ - "dist" - ], - "sideEffects": [ - "**/*.css", - "**/*.scss" - ] -} diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts deleted file mode 100644 index 44cc85f73..000000000 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ /dev/null @@ -1,59 +0,0 @@ -const warning = (s: string) => { - // Todo remove debug code - // eslint-disable-next-line no-console - console.error('Log function was called before initialization', s); -}; - -export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal'; - -export const LEVELS: Record = { - trace: 0, - debug: 1, - info: 2, - warn: 3, - error: 4, - fatal: 5, -}; - -export const log: Record = { - trace: warning, - debug: warning, - info: warning, - warn: warning, - error: warning, - fatal: warning, -}; - -export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void; -export let getConfig: () => object; -export let sanitizeText: (str: string) => string; -export let commonDb: () => object; -// eslint-disable @typescript-eslint/no-explicit-any -export let setupGraphViewbox: ( - graph: any, - svgElem: any, - padding: any, - useMaxWidth: boolean -) => void; - -export const injectUtils = ( - _log: Record, - _setLogLevel: any, - _getConfig: any, - _sanitizeText: any, - _setupGraphViewbox: any, - _commonDb: any -) => { - _log.info('Mermaid utils injected'); - log.trace = _log.trace; - log.debug = _log.debug; - log.info = _log.info; - log.warn = _log.warn; - log.error = _log.error; - log.fatal = _log.fatal; - setLogLevel = _setLogLevel; - getConfig = _getConfig; - sanitizeText = _sanitizeText; - setupGraphViewbox = _setupGraphViewbox; - commonDb = _commonDb; -}; diff --git a/packages/mermaid-mindmap/tsconfig.json b/packages/mermaid-mindmap/tsconfig.json deleted file mode 100644 index 310137cc0..000000000 --- a/packages/mermaid-mindmap/tsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "module": "esnext", - "compilerOptions": { - "rootDir": "./src", - "outDir": "./dist" - }, - "include": ["./src/**/*.ts"], - "typeRoots": ["./src/types"] -} diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 3dd6c5af0..cae7d43a8 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -53,6 +53,9 @@ }, "dependencies": { "@braintree/sanitize-url": "^6.0.0", + "cytoscape": "^3.23.0", + "cytoscape-cose-bilkent": "^4.1.0", + "cytoscape-fcose": "^2.1.0", "d3": "^7.0.0", "dagre-d3-es": "7.0.8", "dompurify": "2.4.3", @@ -66,6 +69,7 @@ "uuid": "^9.0.0" }, "devDependencies": { + "@types/cytoscape": "^3.19.9", "@types/d3": "^7.4.0", "@types/dompurify": "^2.4.0", "@types/jsdom": "^20.0.1", diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts index 92291e282..b75e914fb 100644 --- a/packages/mermaid/src/diagram-api/detectType.ts +++ b/packages/mermaid/src/diagram-api/detectType.ts @@ -55,9 +55,10 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => { if (detectors[key]) { - throw new Error(`Detector with key ${key} already exists`); + log.error(`Detector with key ${key} already exists`); + } else { + detectors[key] = { detector, loader }; } - detectors[key] = { detector, loader }; log.debug(`Detector with key ${key} added${loader ? ' with loader' : ''}`); }; diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 81ddb6163..a68e99dd0 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -96,7 +96,10 @@ import errorStyles from '../diagrams/error/styles'; import flowchartElk from '../diagrams/flowchart/elk/detector'; import { registerLazyLoadedDiagrams } from './detectType'; +// Lazy loaded diagrams import timelineDetector from '../diagrams/timeline/detector'; +import mindmapDetector from '../diagrams/mindmap/detector'; + let hasLoadedDiagrams = false; export const addDiagrams = () => { if (hasLoadedDiagrams) { @@ -105,7 +108,7 @@ export const addDiagrams = () => { // This is added here to avoid race-conditions. // We could optimize the loading logic somehow. hasLoadedDiagrams = true; - registerLazyLoadedDiagrams(flowchartElk, timelineDetector); + registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector); registerDiagram( 'error', diff --git a/packages/mermaid-mindmap/src/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts similarity index 81% rename from packages/mermaid-mindmap/src/detector.ts rename to packages/mermaid/src/diagrams/mindmap/detector.ts index da3caf51e..82664225b 100644 --- a/packages/mermaid-mindmap/src/detector.ts +++ b/packages/mermaid/src/diagrams/mindmap/detector.ts @@ -1,5 +1,4 @@ -import type { ExternalDiagramDefinition } from 'mermaid'; - +import type { ExternalDiagramDefinition } from '../../diagram-api/types'; const id = 'mindmap'; const detector = (txt: string) => { diff --git a/packages/mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts similarity index 84% rename from packages/mermaid-mindmap/src/diagram-definition.ts rename to packages/mermaid/src/diagrams/mindmap/diagram-definition.ts index e7856289d..61b41d347 100644 --- a/packages/mermaid-mindmap/src/diagram-definition.ts +++ b/packages/mermaid/src/diagrams/mindmap/diagram-definition.ts @@ -3,12 +3,10 @@ import mindmapParser from './parser/mindmap'; import * as mindmapDb from './mindmapDb'; import mindmapRenderer from './mindmapRenderer'; import mindmapStyles from './styles'; -import { injectUtils } from './mermaidUtils'; export const diagram = { db: mindmapDb, renderer: mindmapRenderer, parser: mindmapParser, styles: mindmapStyles, - injectUtils, }; diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js similarity index 98% rename from packages/mermaid-mindmap/src/mindmap.spec.js rename to packages/mermaid/src/diagrams/mindmap/mindmap.spec.js index 753804a5d..8c90f774f 100644 --- a/packages/mermaid-mindmap/src/mindmap.spec.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js @@ -1,16 +1,16 @@ import { parser as mindmap } from './parser/mindmap'; import * as mindmapDB from './mindmapDb'; -import { injectUtils } from './mermaidUtils'; +// import { injectUtils } from './mermaidUtils'; // Todo fix utils functions for tests import { - log, + // log, setLogLevel, - getConfig, - sanitizeText, - setupGraphViewBox, -} from '../../mermaid/src/diagram-api/diagramAPI'; + // getConfig, + // sanitizeText, + // setupGraphViewBox, +} from '../../diagram-api/diagramAPI'; -injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); +// injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox); describe('when parsing a mindmap ', function () { beforeEach(function () { diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js similarity index 93% rename from packages/mermaid-mindmap/src/mindmapDb.js rename to packages/mermaid/src/diagrams/mindmap/mindmapDb.js index 16861cd23..71aa449d9 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js @@ -1,5 +1,8 @@ -/** Created by knut on 15-01-14. */ -import { sanitizeText, getConfig, log } from './mermaidUtils'; +import { getConfig } from '../../config'; +import { sanitizeText as _sanitizeText } from '../../diagrams/common/common'; +import { log } from '../../logger'; + +export const sanitizeText = (text) => _sanitizeText(text, getConfig()); let nodes = []; let cnt = 0; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js similarity index 97% rename from packages/mermaid-mindmap/src/mindmapRenderer.js rename to packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js index 6ffe80f5e..0e68a1015 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js @@ -1,6 +1,8 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; -import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; +import { log } from '../../logger'; +import { getConfig } from '../../config'; +import { setupGraphViewbox } from '../../setupGraphViewbox'; import svgDraw from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison similarity index 100% rename from packages/mermaid-mindmap/src/parser/mindmap.jison rename to packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid/src/diagrams/mindmap/styles.js similarity index 100% rename from packages/mermaid-mindmap/src/styles.js rename to packages/mermaid/src/diagrams/mindmap/styles.js diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js similarity index 100% rename from packages/mermaid-mindmap/src/svgDraw.js rename to packages/mermaid/src/diagrams/mindmap/svgDraw.js diff --git a/packages/mermaid-mindmap/src/types/index.d.ts b/packages/mermaid/src/diagrams/mindmap/types/index.d.ts similarity index 100% rename from packages/mermaid-mindmap/src/types/index.d.ts rename to packages/mermaid/src/diagrams/mindmap/types/index.d.ts diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index dd55d6782..52c9e88f2 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -1,10 +1,10 @@ import mermaid, { type MermaidConfig } from 'mermaid'; -import mindmap from '@mermaid-js/mermaid-mindmap'; +// import mindmap from '@mermaid-js/mermaid-mindmap'; // import timeline from '@mermaid-js/mermaid-timeline'; const init = (async () => { try { - await mermaid.registerExternalDiagrams([mindmap, timeline]); + await mermaid.registerExternalDiagrams([]); } catch (e) { console.error(e); } diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts index 356e9398c..3f29b497d 100644 --- a/packages/mermaid/src/docs/vite.config.ts +++ b/packages/mermaid/src/docs/vite.config.ts @@ -32,9 +32,9 @@ export default defineConfig({ alias: { mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build - '@mermaid-js/mermaid-mindmap': path.join( + '@mermaid-js/mermaid-example-diagram': path.join( __dirname, - '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs' + '../../../mermaid-example-diagram/dist/mermaid-example-diagram.esm.min.mjs' ), // Use this one to build // '@mermaid-js/mermaid-timeline': path.join( // __dirname, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 961304828..eee2aea41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -169,6 +169,15 @@ importers: '@braintree/sanitize-url': specifier: ^6.0.0 version: 6.0.0 + cytoscape: + specifier: ^3.23.0 + version: 3.23.0 + cytoscape-cose-bilkent: + specifier: ^4.1.0 + version: 4.1.0_cytoscape@3.23.0 + cytoscape-fcose: + specifier: ^2.1.0 + version: 2.1.0_cytoscape@3.23.0 d3: specifier: ^7.0.0 version: 7.6.1 @@ -203,6 +212,9 @@ importers: specifier: ^9.0.0 version: 9.0.0 devDependencies: + '@types/cytoscape': + specifier: ^3.19.9 + version: 3.19.9 '@types/d3': specifier: ^7.4.0 version: 7.4.0 @@ -304,15 +316,6 @@ importers: version: 1.0.4-alpha.16_ifjhkyx3os4sbm7zdnvthc52am packages/mermaid-example-diagram: - devDependencies: - concurrently: - specifier: ^7.5.0 - version: 7.5.0 - rimraf: - specifier: ^3.0.2 - version: 3.0.2 - - packages/mermaid-mindmap: dependencies: '@braintree/sanitize-url': specifier: ^6.0.0 @@ -328,7 +331,7 @@ importers: version: 2.1.0_cytoscape@3.23.0 d3: specifier: ^7.0.0 - version: 7.6.1 + version: 7.8.2 khroma: specifier: ^2.0.0 version: 2.0.0 @@ -349,27 +352,23 @@ importers: specifier: ^3.0.2 version: 3.0.2 - packages/mermaid-timeline: - dependencies: - d3: - specifier: ^7.0.0 - version: 7.6.1 - khroma: - specifier: ^2.0.0 - version: 2.0.0 + packages/mermaid-example-diagram-new: devDependencies: concurrently: - specifier: ^7.4.0 + specifier: ^7.5.0 version: 7.5.0 + mermaid: + specifier: workspace:* + version: link:../mermaid rimraf: specifier: ^3.0.2 version: 3.0.2 tests/webpack: dependencies: - '@mermaid-js/mermaid-mindmap': + '@mermaid-js/mermaid-example-diagram': specifier: workspace:* - version: link:../../packages/mermaid-mindmap + version: link:../../packages/mermaid-example-diagram-new mermaid: specifier: workspace:* version: link:../../packages/mermaid diff --git a/tests/webpack/package.json b/tests/webpack/package.json index c58f456a6..e51845399 100644 --- a/tests/webpack/package.json +++ b/tests/webpack/package.json @@ -18,6 +18,6 @@ }, "dependencies": { "mermaid": "workspace:*", - "@mermaid-js/mermaid-mindmap": "workspace:*" + "@mermaid-js/mermaid-example-diagram": "workspace:*" } }