From 58a53c0fa8999276360239754803a7a5c9007042 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 15 Oct 2022 00:28:21 +0530 Subject: [PATCH 1/5] fix: Diagram load issue --- .vite/build.ts | 12 +++++++++--- package.json | 1 + packages/mermaid/src/Diagram.ts | 8 ++++++-- packages/mermaid/src/diagram-api/diagramAPI.ts | 11 ++++++++++- packages/mermaid/src/logger.ts | 3 +++ 5 files changed, 29 insertions(+), 6 deletions(-) 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 25d614f95..dd436e615 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/src/Diagram.ts b/packages/mermaid/src/Diagram.ts index 0aa741994..c471e0f5f 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 { @@ -88,9 +88,13 @@ export const getDiagramFromText = async (txt: string, parseError?: Function): Pr // Trying to find the diagram getDiagram(type); } 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.`); } // Diagram not available, loading it const { diagram } = await loader(); 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..3eae56d8a 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; } + numericLevel = 0; log.trace = () => {}; log.debug = () => {}; log.info = () => {}; From aec1d809665b4b64d9b79e98c0284895fc744c9f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 15 Oct 2022 21:33:09 +0530 Subject: [PATCH 2/5] fix: Remove hardcoded numericLevel --- packages/mermaid/src/logger.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/logger.ts b/packages/mermaid/src/logger.ts index 3eae56d8a..a03d56914 100644 --- a/packages/mermaid/src/logger.ts +++ b/packages/mermaid/src/logger.ts @@ -41,7 +41,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin } else if (typeof level === 'number') { numericLevel = level; } - numericLevel = 0; + log.trace = () => {}; log.debug = () => {}; log.info = () => {}; From 752a6b2cb0950baa4636a3e7f4fa7f7e486934f0 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 17 Oct 2022 10:46:46 +0200 Subject: [PATCH 3/5] #3687 Separating the render specific data from the data related to parsing --- packages/mermaid-mindmap/package.json | 2 +- packages/mermaid-mindmap/src/mindmapDb.js | 10 ++-------- .../mermaid-mindmap/src/mindmapRenderer.js | 5 +++-- packages/mermaid-mindmap/src/svgDraw.js | 18 ++++++++++++++++-- 4 files changed, 22 insertions(+), 13 deletions(-) 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/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 = {}; +}; From e86d7894f525bc4c3989dec8b8a84ec589078120 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Mon, 17 Oct 2022 10:51:41 +0200 Subject: [PATCH 4/5] #3680 Add font familiy in a way that does remove other configuration --- packages/mermaid/src/mermaidAPI.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index 7c967e5fd..df6ab1a2b 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -455,10 +455,11 @@ const handleDirective = function (p: any, directive: any, type: string): void { /** @param {MermaidConfig} options */ async 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 From 2ae8bf29877a447aa0e62c845446681369525391 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 18 Oct 2022 16:04:14 +0200 Subject: [PATCH 5/5] Color fix for default nodes in mindmap, line uses inv color --- packages/mermaid-mindmap/src/styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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; }