diff --git a/.vite/build.ts b/.vite/build.ts index 7398d30d5..360f878ba 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -6,6 +6,7 @@ import pkg from '../package.json' assert { type: 'json' }; const { dependencies } = pkg; const watch = process.argv.includes('--watch'); +const mermaidOnly = process.argv.includes('--mermaid'); const __dirname = fileURLToPath(new URL('.', import.meta.url)); type OutputOptions = Exclude< @@ -129,14 +130,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => { const main = async () => { const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; for (const pkg of packageNames) { + if (mermaidOnly && pkg !== 'mermaid') { + continue; + } await buildPackage(pkg); } }; if (watch) { - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' })); - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' })); + if (!mermaidOnly) { + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); + build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + } } else { void main(); } diff --git a/package.json b/package.json index 15adccd64..5dc6792a1 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "git graph" ], "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:watch": "pnpm build:vite --watch", diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json index 847eeffef..f13ed0cbc 100644 --- a/packages/mermaid-mindmap/package.json +++ b/packages/mermaid-mindmap/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-mindmap", - "version": "9.2.0-rc3", + "version": "9.2.0-rc4", "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", diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.js index 2ae98c223..4785051a4 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/packages/mermaid-mindmap/src/mindmapDb.js @@ -3,11 +3,10 @@ import { sanitizeText, getConfig, log } from './mermaidUtils'; let nodes = []; let cnt = 0; -let elements = {}; + export const clear = () => { nodes = []; cnt = 0; - elements = {}; }; const getParent = function (level) { @@ -27,7 +26,7 @@ export const addNode = (level, id, descr, type) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); const node = { - id: cnt++, + id: `id-${cnt++}`, nodeId: sanitizeText(id), level, descr: sanitizeText(descr), @@ -99,10 +98,6 @@ export const getType = (startStr, endStr) => { } }; -export const setElementForId = (id, element) => { - elements[id] = element; -}; - export const decorateNode = (decoration) => { const node = nodes[nodes.length - 1]; if (decoration && decoration.icon) { @@ -141,4 +136,3 @@ export const setErrorHandler = (handler) => { export const getLogger = () => log; export const getNodeById = (id) => nodes[id]; -export const getElementById = (id) => elements[id]; diff --git a/packages/mermaid-mindmap/src/mindmapRenderer.js b/packages/mermaid-mindmap/src/mindmapRenderer.js index f69b0b381..c2ac07574 100644 --- a/packages/mermaid-mindmap/src/mindmapRenderer.js +++ b/packages/mermaid-mindmap/src/mindmapRenderer.js @@ -1,7 +1,7 @@ /** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils'; -import svgDraw from './svgDraw'; +import svgDraw, { getElementById, clearElementRefs } from './svgDraw'; import cytoscape from 'cytoscape'; import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb'; @@ -155,7 +155,7 @@ function positionNodes(cy) { data.x = node.position().x; data.y = node.position().y; svgDraw.positionNode(data); - const el = db.getElementById(data.nodeId); + const el = getElementById(data.nodeId); log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data); el.attr( 'transform', @@ -179,6 +179,7 @@ export const draw = async (text, id, version, diagObj) => { // This is done only for throwing the error if the text is not valid. diagObj.db.clear(); + clearElementRefs(); // Parse the graph definition diagObj.parser.parse(text); diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js index 95674e8f8..241938b62 100644 --- a/packages/mermaid-mindmap/src/styles.js +++ b/packages/mermaid-mindmap/src/styles.js @@ -27,6 +27,7 @@ const genSections = (options) => { .node-icon-${i - 1} { font-size: 40px; color: ${options['cScaleLabel' + i]}; + // fill: ${options['cScaleLabel' + i]}; // color: ${options['gitInv' + i]}; } .section-edge-${i - 1}{ @@ -36,7 +37,7 @@ const genSections = (options) => { stroke-width: ${sw}; } .section-${i - 1} line { - stroke: ${options['lineColor' + i]} ; + stroke: ${options['cScaleInv' + i]} ; stroke-width: 3; } diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js index 1246b1cb9..782875a6b 100644 --- a/packages/mermaid-mindmap/src/svgDraw.js +++ b/packages/mermaid-mindmap/src/svgDraw.js @@ -259,7 +259,7 @@ export const drawNode = function (elem, node, fullSection, conf) { // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') { // nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')'); // } - db.setElementForId(node.id, nodeElem); + setElementById(node.id, nodeElem); return node.height; }; @@ -286,7 +286,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, ful }; export const positionNode = function (node) { - const nodeElem = db.getElementById(node.id); + const nodeElem = getElementById(node.id); const x = node.x || 0; const y = node.y || 0; @@ -295,3 +295,17 @@ export const positionNode = function (node) { }; export default { drawNode, positionNode, drawEdge }; + +let elements = {}; + +export const setElementById = (id, element) => { + elements[id] = element; +}; + +export const getElementById = (id) => { + return elements[id]; +}; + +export const clearElementRefs = () => { + elements = {}; +}; diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index e4f1d2645..cdd771e4d 100644 --- a/packages/mermaid/src/Diagram.ts +++ b/packages/mermaid/src/Diagram.ts @@ -1,6 +1,6 @@ import * as configApi from './config'; import { log } from './logger'; -import { getDiagram, registerDiagram } from './diagram-api/diagramAPI'; +import { DiagramNotFoundError, getDiagram, registerDiagram } from './diagram-api/diagramAPI'; import { detectType, getDiagramLoader } from './diagram-api/detectType'; import { isDetailedError } from './utils'; export class Diagram { @@ -92,9 +92,13 @@ export const getDiagramFromText = ( getDiagram(type); return new Diagram(txt, parseError); } catch (error) { + if (!(error instanceof DiagramNotFoundError)) { + log.error(error); + throw error; + } const loader = getDiagramLoader(type); if (!loader) { - throw new Error(`Diagram ${type} not found.`); + throw new Error(`Loader for ${type} not found.`); } // TODO: Uncomment for v10 // // Diagram not available, loading it diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts index 91c5ffe71..6eeff6df1 100644 --- a/packages/mermaid/src/diagram-api/diagramAPI.ts +++ b/packages/mermaid/src/diagram-api/diagramAPI.ts @@ -34,6 +34,7 @@ export const registerDiagram = ( _setupGraphViewbox: any ) => void ) => { + log.debug(`Registering diagram ${id}`); if (diagrams[id]) { log.warn(`Diagram ${id} already registered.`); // The error throw is commented out to as it breaks pages where you have multiple diagrams, @@ -50,11 +51,19 @@ export const registerDiagram = ( if (typeof callback !== 'undefined') { callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox); } + log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); }; export const getDiagram = (name: string): DiagramDefinition => { + log.debug(`Getting diagram ${name}. ${Object.keys(diagrams).join(', ')} diagrams registered.`); if (name in diagrams) { return diagrams[name]; } - throw new Error(`Diagram ${name} not found.`); + throw new DiagramNotFoundError(name); }; + +export class DiagramNotFoundError extends Error { + constructor(message: string) { + super(`Diagram ${message} not found.`); + } +} diff --git a/packages/mermaid/src/logger.ts b/packages/mermaid/src/logger.ts index b01934e88..a03d56914 100644 --- a/packages/mermaid/src/logger.ts +++ b/packages/mermaid/src/logger.ts @@ -30,6 +30,8 @@ export const log: Record = { * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"` */ export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') { + // TODO: Even if we call initialize with loglevel 0, many initial logs are skipped as LL is set to 5 initially. + let numericLevel: number = LEVELS.fatal; if (typeof level === 'string') { level = level.toLowerCase(); @@ -39,6 +41,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin } else if (typeof level === 'number') { numericLevel = level; } + log.trace = () => {}; log.debug = () => {}; log.info = () => {}; diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 68b7c5200..9ca4461d3 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -743,10 +743,11 @@ const handleDirective = function (p: any, directive: any, type: string): void { /** @param {MermaidConfig} options */ function initialize(options: MermaidConfig) { // Handle legacy location of font-family configuration - if (options?.fontFamily) { - if (!options.themeVariables?.fontFamily) { - options.themeVariables = { fontFamily: options.fontFamily }; + if (options.fontFamily) { + if (!options.themeVariables) { + options.themeVariables = {}; } + options.themeVariables.fontFamily = options.fontFamily; } // Set default options