From 12dc3d8373259f2caaacb7cea7c300c2c7ee8599 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 15:52:37 +0530 Subject: [PATCH 01/21] Rename files to TS --- .../src/diagrams/mindmap/{mindmap.spec.js => mindmap.spec.ts} | 0 .../mermaid/src/diagrams/mindmap/{mindmapDb.js => mindmapDb.ts} | 0 .../diagrams/mindmap/{mindmapRenderer.js => mindmapRenderer.ts} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/diagrams/mindmap/{mindmap.spec.js => mindmap.spec.ts} (100%) rename packages/mermaid/src/diagrams/mindmap/{mindmapDb.js => mindmapDb.ts} (100%) rename packages/mermaid/src/diagrams/mindmap/{mindmapRenderer.js => mindmapRenderer.ts} (100%) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts similarity index 100% rename from packages/mermaid/src/diagrams/mindmap/mindmap.spec.js rename to packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts similarity index 100% rename from packages/mermaid/src/diagrams/mindmap/mindmapDb.js rename to packages/mermaid/src/diagrams/mindmap/mindmapDb.ts diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts similarity index 100% rename from packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js rename to packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts From e046da10c2913938435c05370bc4729e69184726 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 15:55:22 +0530 Subject: [PATCH 02/21] Convert mindmap.spec.js --- .../src/diagrams/mindmap/mindmap.spec.ts | 78 ++++++++----------- 1 file changed, 33 insertions(+), 45 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts index c0b72060d9..f6cc4304f8 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts @@ -1,3 +1,4 @@ +// @ts-expect-error No types available for JISON import { parser as mindmap } from './parser/mindmap.jison'; import * as mindmapDB from './mindmapDb.js'; // Todo fix utils functions for tests @@ -11,7 +12,7 @@ describe('when parsing a mindmap ', function () { }); describe('hiearchy', function () { it('MMP-1 should handle a simple root definition abc122', function () { - let str = `mindmap + const str = `mindmap root`; mindmap.parse(str); @@ -19,7 +20,7 @@ describe('when parsing a mindmap ', function () { expect(mindmap.yy.getMindmap().descr).toEqual('root'); }); it('MMP-2 should handle a hierachial mindmap definition', function () { - let str = `mindmap + const str = `mindmap root child1 child2 @@ -34,7 +35,7 @@ describe('when parsing a mindmap ', function () { }); it('3 should handle a simple root definition with a shape and without an id abc123', function () { - let str = `mindmap + const str = `mindmap (root)`; mindmap.parse(str); @@ -43,7 +44,7 @@ describe('when parsing a mindmap ', function () { }); it('MMP-4 should handle a deeper hierachial mindmap definition', function () { - let str = `mindmap + const str = `mindmap root child1 leaf1 @@ -58,40 +59,27 @@ describe('when parsing a mindmap ', function () { expect(mm.children[1].descr).toEqual('child2'); }); it('5 Multiple roots are illegal', function () { - let str = `mindmap + const str = `mindmap root fakeRoot`; - try { - mindmap.parse(str); - // Fail test if above expression doesn't throw anything. - expect(true).toBe(false); - } catch (e) { - expect(e.message).toBe( - 'There can be only one root. No parent could be found for ("fakeRoot")' - ); - } + expect(() => mindmap.parse(str)).toThrow( + 'There can be only one root. No parent could be found for ("fakeRoot")' + ); }); it('MMP-6 real root in wrong place', function () { - let str = `mindmap + const str = `mindmap root fakeRoot realRootWrongPlace`; - - try { - mindmap.parse(str); - // Fail test if above expression doesn't throw anything. - expect(true).toBe(false); - } catch (e) { - expect(e.message).toBe( - 'There can be only one root. No parent could be found for ("fakeRoot")' - ); - } + expect(() => mindmap.parse(str)).toThrow( + 'There can be only one root. No parent could be found for ("fakeRoot")' + ); }); }); describe('nodes', function () { it('MMP-7 should handle an id and type for a node definition', function () { - let str = `mindmap + const str = `mindmap root[The root] `; @@ -102,7 +90,7 @@ describe('when parsing a mindmap ', function () { expect(mm.type).toEqual(mindmap.yy.nodeType.RECT); }); it('MMP-8 should handle an id and type for a node definition', function () { - let str = `mindmap + const str = `mindmap root theId(child1)`; @@ -116,7 +104,7 @@ describe('when parsing a mindmap ', function () { expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); }); it('MMP-9 should handle an id and type for a node definition', function () { - let str = `mindmap + const str = `mindmap root theId(child1)`; @@ -130,7 +118,7 @@ root expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); }); it('MMP-10 multiple types (circle)', function () { - let str = `mindmap + const str = `mindmap root((the root)) `; @@ -142,7 +130,7 @@ root }); it('MMP-11 multiple types (cloud)', function () { - let str = `mindmap + const str = `mindmap root)the root( `; @@ -153,7 +141,7 @@ root expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD); }); it('MMP-12 multiple types (bang)', function () { - let str = `mindmap + const str = `mindmap root))the root(( `; @@ -165,7 +153,7 @@ root }); it('MMP-12-a multiple types (hexagon)', function () { - let str = `mindmap + const str = `mindmap root{{the root}} `; @@ -178,7 +166,7 @@ root }); describe('decorations', function () { it('MMP-13 should be possible to set an icon for the node', function () { - let str = `mindmap + const str = `mindmap root[The root] ::icon(bomb) `; @@ -192,7 +180,7 @@ root expect(mm.icon).toEqual('bomb'); }); it('MMP-14 should be possible to set classes for the node', function () { - let str = `mindmap + const str = `mindmap root[The root] :::m-4 p-8 `; @@ -206,7 +194,7 @@ root expect(mm.class).toEqual('m-4 p-8'); }); it('MMP-15 should be possible to set both classes and icon for the node', function () { - let str = `mindmap + const str = `mindmap root[The root] :::m-4 p-8 ::icon(bomb) @@ -222,7 +210,7 @@ root expect(mm.icon).toEqual('bomb'); }); it('MMP-16 should be possible to set both classes and icon for the node', function () { - let str = `mindmap + const str = `mindmap root[The root] ::icon(bomb) :::m-4 p-8 @@ -240,7 +228,7 @@ root }); describe('descriptions', function () { it('MMP-17 should be possible to use node syntax in the descriptions', function () { - let str = `mindmap + const str = `mindmap root["String containing []"] `; mindmap.parse(str); @@ -249,7 +237,7 @@ root expect(mm.descr).toEqual('String containing []'); }); it('MMP-18 should be possible to use node syntax in the descriptions in children', function () { - let str = `mindmap + const str = `mindmap root["String containing []"] child1["String containing ()"] `; @@ -261,7 +249,7 @@ root expect(mm.children[0].descr).toEqual('String containing ()'); }); it('MMP-19 should be possible to have a child after a class assignment', function () { - let str = `mindmap + const str = `mindmap root(Root) Child(Child) :::hot @@ -281,7 +269,7 @@ root }); }); it('MMP-20 should be possible to have meaningless empty rows in a mindmap abc124', function () { - let str = `mindmap + const str = `mindmap root(Root) Child(Child) a(a) @@ -300,7 +288,7 @@ root expect(child.children[1].nodeId).toEqual('b'); }); it('MMP-21 should be possible to have comments in a mindmap', function () { - let str = `mindmap + const str = `mindmap root(Root) Child(Child) a(a) @@ -321,7 +309,7 @@ root }); it('MMP-22 should be possible to have comments at the end of a line', function () { - let str = `mindmap + const str = `mindmap root(Root) Child(Child) a(a) %% This is a comment @@ -339,7 +327,7 @@ root expect(child.children[1].nodeId).toEqual('b'); }); it('MMP-23 Rows with only spaces should not interfere', function () { - let str = 'mindmap\nroot\n A\n \n\n B'; + const str = 'mindmap\nroot\n A\n \n\n B'; mindmap.parse(str); const mm = mindmap.yy.getMindmap(); expect(mm.nodeId).toEqual('root'); @@ -351,7 +339,7 @@ root expect(child2.nodeId).toEqual('B'); }); it('MMP-24 Handle rows above the mindmap declarations', function () { - let str = '\n \nmindmap\nroot\n A\n \n\n B'; + const str = '\n \nmindmap\nroot\n A\n \n\n B'; mindmap.parse(str); const mm = mindmap.yy.getMindmap(); expect(mm.nodeId).toEqual('root'); @@ -363,7 +351,7 @@ root expect(child2.nodeId).toEqual('B'); }); it('MMP-25 Handle rows above the mindmap declarations, no space', function () { - let str = '\n\n\nmindmap\nroot\n A\n \n\n B'; + const str = '\n\n\nmindmap\nroot\n A\n \n\n B'; mindmap.parse(str); const mm = mindmap.yy.getMindmap(); expect(mm.nodeId).toEqual('root'); From b71f4c7e5446b0512a56455f695349779e9123f3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 15:56:30 +0530 Subject: [PATCH 03/21] Add MindmapDB type --- packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts | 3 ++- packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts index b352144359..c5c7303c30 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts @@ -3,8 +3,9 @@ import mindmapParser from './parser/mindmap.jison'; import * as mindmapDb from './mindmapDb.js'; import mindmapRenderer from './mindmapRenderer.js'; import mindmapStyles from './styles.js'; +import type { DiagramDefinition } from '../../diagram-api/types.js'; -export const diagram = { +export const diagram: DiagramDefinition = { db: mindmapDb, renderer: mindmapRenderer, parser: mindmapParser, diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts new file mode 100644 index 0000000000..caec37d2c0 --- /dev/null +++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts @@ -0,0 +1,3 @@ +import type * as mindmapDb from './mindmapDb.js'; + +export type MindmapDB = typeof mindmapDb; From f30c26485e02cbd697e2c8ac21967a57cece768d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 15:58:07 +0530 Subject: [PATCH 04/21] Cleanup svgDraw.js --- .../mermaid/src/diagrams/mindmap/svgDraw.js | 51 ------------------- 1 file changed, 51 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js index 2a4fc4b671..b065e8010f 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js @@ -1,54 +1,7 @@ -import { select } from 'd3'; import * as db from './mindmapDb.js'; import { createText } from '../../rendering-util/createText.js'; const MAX_SECTIONS = 12; -/** - * @param {string} text The text to be wrapped - * @param {number} width The max width of the text - */ -function wrap(text, width) { - text.each(function () { - var text = select(this), - words = text - .text() - .split(/(\s+|)/) - .reverse(), - word, - line = [], - lineHeight = 1.1, // ems - y = text.attr('y'), - dy = parseFloat(text.attr('dy')), - tspan = text - .text(null) - .append('tspan') - .attr('x', 0) - .attr('y', y) - .attr('dy', dy + 'em'); - for (let j = 0; j < words.length; j++) { - word = words[words.length - 1 - j]; - line.push(word); - tspan.text(line.join(' ').trim()); - if (tspan.node().getComputedTextLength() > width || word === '
') { - line.pop(); - tspan.text(line.join(' ').trim()); - if (word === '
') { - line = ['']; - } else { - line = [word]; - } - - tspan = text - .append('tspan') - .attr('x', 0) - .attr('y', y) - .attr('dy', lineHeight + 'em') - .text(word); - } - } - }); -} - const defaultBkg = function (elem, node, section) { const rd = 5; elem @@ -317,10 +270,6 @@ export const drawNode = function (elem, node, fullSection, conf) { break; } - // Position the node to its coordinate - // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') { - // nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')'); - // } db.setElementForId(node.id, nodeElem); return node.height; }; From ba0bddf4178e1d48de5cc3c73ac52db5a23f05e8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 16:02:28 +0530 Subject: [PATCH 05/21] Add MermaidConfigWithDefaults --- packages/mermaid/src/config.ts | 4 ++-- packages/mermaid/src/config.type.ts | 5 +++++ packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 1 - 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index ede3a568df..f1dccd251d 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -2,7 +2,7 @@ import assignWithDepth from './assignWithDepth.js'; import { log } from './logger.js'; import theme from './themes/index.js'; import config from './defaultConfig.js'; -import type { MermaidConfig } from './config.type.js'; +import type { MermaidConfig, MermaidConfigWithDefaults } from './config.type.js'; import { sanitizeDirective } from './utils/sanitizeDirective.js'; export const defaultConfig: MermaidConfig = Object.freeze(config); @@ -128,7 +128,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => { * * @returns The currentConfig */ -export const getConfig = (): MermaidConfig => { +export const getConfig = (): MermaidConfigWithDefaults => { return assignWithDepth({}, currentConfig); }; /** diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 575f428ddd..7ca4b89d67 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -5,6 +5,8 @@ * and run json-schema-to-typescript to regenerate this file. */ +import { RequiredDeep } from 'type-fest'; + /** * Configuration options to pass to the `dompurify` library. */ @@ -165,6 +167,9 @@ export interface MermaidConfig { wrap?: boolean; fontSize?: number; } + +// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name. +export type MermaidConfigWithDefaults = RequiredDeep; /** * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "BaseDiagramConfig". diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts index 7433f2b9ce..51f808ff44 100644 --- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts +++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts @@ -1,6 +1,5 @@ import type { Diagram } from '../../Diagram.js'; import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js'; - import { select as d3select, scaleOrdinal as d3scaleOrdinal, From f069de54878637762a99bb4e787220e287e23940 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 16:03:20 +0530 Subject: [PATCH 06/21] Convert MindmapDB.ts --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 99 ++++++++++--------- 1 file changed, 52 insertions(+), 47 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index 4206a4a260..72c9968b62 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -1,19 +1,36 @@ import { getConfig } from '../../diagram-api/diagramAPI.js'; -import { sanitizeText as _sanitizeText } from '../../diagrams/common/common.js'; +import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; +import type { D3Element } from '../../mermaidAPI.js'; -export const sanitizeText = (text) => _sanitizeText(text, getConfig()); +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; +} -let nodes = []; +let nodes: MindMapNode[] = []; let cnt = 0; -let elements = {}; +let elements: Record = {}; + 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]; @@ -26,31 +43,29 @@ 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(); + let padding: number = conf.mindmap?.padding ?? 10; + switch (type) { + case nodeType.ROUNDED_RECT: + case nodeType.RECT: + case nodeType.HEXAGON: + padding *= 2; + } + const node = { id: cnt++, - nodeId: sanitizeText(id), + nodeId: sanitizeText(id, conf), level, - descr: sanitizeText(descr), + descr: sanitizeText(descr, conf), type, children: [], - width: getConfig().mindmap.maxNodeWidth, - }; - switch (node.type) { - case nodeType.ROUNDED_RECT: - node.padding = 2 * conf.mindmap.padding; - break; - case nodeType.RECT: - node.padding = 2 * conf.mindmap.padding; - break; - case nodeType.HEXAGON: - node.padding = 2 * conf.mindmap.padding; - break; - default: - node.padding = conf.mindmap.padding; - } + width: conf.mindmap?.maxNodeWidth ?? 200, + padding, + } satisfies MindMapNode; + const parent = getParent(level); if (parent) { parent.children.push(node); @@ -62,16 +77,9 @@ 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 + '")' ); - error.hash = { - text: 'branch ' + name, - token: 'branch ' + name, - line: '1', - loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 }, - expected: ['"checkout ' + name + '"'], - }; throw error; } } @@ -88,7 +96,7 @@ export const nodeType = { HEXAGON: 6, }; -export const getType = (startStr, endStr) => { +export const getType = (startStr: string, endStr: string): number => { log.debug('In get type', startStr, endStr); switch (startStr) { case '[': @@ -108,21 +116,25 @@ export const getType = (startStr, endStr) => { } }; -export const setElementForId = (id, element) => { +export const setElementForId = (id: string, element: D3Element) => { elements[id] = element; }; -export const decorateNode = (decoration) => { +export const decorateNode = (decoration?: { class?: string; icon?: string }) => { + if (!decoration) { + return; + } + const config = getConfig(); const node = nodes[nodes.length - 1]; - if (decoration && decoration.icon) { - node.icon = sanitizeText(decoration.icon); + if (decoration.icon) { + node.icon = sanitizeText(decoration.icon, config); } - if (decoration && decoration.class) { - node.class = sanitizeText(decoration.class); + if (decoration.class) { + node.class = sanitizeText(decoration.class, config); } }; -export const type2Str = (type) => { +export const type2Str = (type: number) => { switch (type) { case nodeType.DEFAULT: return 'no-border'; @@ -143,13 +155,6 @@ export const type2Str = (type) => { } }; -export let parseError; -export const setErrorHandler = (handler) => { - parseError = handler; -}; - // Expose logger to grammar export const getLogger = () => log; - -export const getNodeById = (id) => nodes[id]; -export const getElementById = (id) => elements[id]; +export const getElementById = (id: string) => elements[id]; From d346a77e3c72e36a441bf271700744a0e381bedf Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 16:03:37 +0530 Subject: [PATCH 07/21] Convert MindmapRenderer.ts --- .../src/diagrams/mindmap/mindmapRenderer.ts | 104 ++++++++---------- 1 file changed, 48 insertions(+), 56 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 3fe9e1d510..6d0dc6067e 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -1,23 +1,21 @@ -/** Created by knut on 14-12-11. */ import { select } from 'd3'; import { log } from '../../logger.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import svgDraw from './svgDraw.js'; -import cytoscape from 'cytoscape/dist/cytoscape.umd.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 { MermaidConfig, MermaidConfigWithDefaults } from '../../config.type.js'; +import type { Diagram } from '../../Diagram.js'; +import type { MindmapDB } from './mindmapTypes.js'; +import type { D3Element } from '../../mermaidAPI.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); -/** - * @param {any} svg The svg element to draw the diagram onto - * @param {object} mindmap The mindmap data and hierarchy - * @param section - * @param {object} conf The configuration object - */ -function drawNodes(svg, mindmap, section, conf) { +function drawNodes(svg: D3Element, mindmap: db.MindMapNode, section: number, conf: MermaidConfig) { svgDraw.drawNode(svg, mindmap, section, conf); if (mindmap.children) { mindmap.children.forEach((child, index) => { @@ -26,11 +24,23 @@ function drawNodes(svg, mindmap, section, conf) { } } -/** - * @param edgesEl - * @param cy - */ -function drawEdges(edgesEl, cy) { +declare module 'cytoscape' { + interface EdgeSingular { + _private: { + bodyBounds: unknown; + rscratch: { + startX: number; + startY: number; + midX: number; + midY: number; + endX: number; + endY: number; + }; + }; + } +} + +function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) { cy.edges().map((edge, id) => { const data = edge.data(); if (edge[0]._private.bodyBounds) { @@ -47,17 +57,11 @@ function drawEdges(edgesEl, cy) { }); } -/** - * @param mindmap The mindmap data and hierarchy - * @param cy - * @param conf The configuration object - * @param level - */ -function addNodes(mindmap, cy, conf, level) { +function addNodes(mindmap: db.MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { cy.add({ group: 'nodes', data: { - id: mindmap.id, + id: mindmap.id.toString(), labelText: mindmap.descr, height: mindmap.height, width: mindmap.width, @@ -67,8 +71,8 @@ function addNodes(mindmap, cy, conf, level) { type: mindmap.type, }, position: { - x: mindmap.x, - y: mindmap.y, + x: mindmap.x!, + y: mindmap.y!, }, }); if (mindmap.children) { @@ -88,12 +92,10 @@ function addNodes(mindmap, cy, conf, level) { } } -/** - * @param node - * @param conf - * @param cy - */ -function layoutMindmap(node, conf) { +function layoutMindmap( + node: db.MindMapNode, + conf: MermaidConfigWithDefaults +): Promise { return new Promise((resolve) => { // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); @@ -122,8 +124,8 @@ function layoutMindmap(node, conf) { cy.layout({ name: 'cose-bilkent', + // @ts-ignore Types for cose-bilkent are not correct? quality: 'proof', - // headless: true, styleEnabled: false, animate: false, }).run(); @@ -133,13 +135,8 @@ function layoutMindmap(node, conf) { }); }); } -/** - * @param node - * @param cy - * @param positionedMindmap - * @param conf - */ -function positionNodes(cy) { + +function positionNodes(cy: cytoscape.Core) { cy.nodes().map((node, id) => { const data = node.data(); data.x = node.position().x; @@ -155,38 +152,33 @@ function positionNodes(cy) { }); } -/** - * Draws a an info picture in the tag with id: id based on the graph definition in text. - * - * @param {any} text - * @param {any} id - * @param {any} version - * @param diagObj - */ - -export const draw = async (text, id, version, diagObj) => { +export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => { const conf = getConfig(); conf.htmlLabels = false; log.debug('Rendering mindmap diagram\n' + text, diagObj.parser); - const securityLevel = getConfig().securityLevel; + const securityLevel = conf.securityLevel; // Handle root and Document for when rendering in sandbox mode - let sandboxElement; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + let sandboxElement: any; if (securityLevel === 'sandbox') { sandboxElement = select('#i' + id); } - const root = + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const root: any = securityLevel === 'sandbox' ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); - // Parse the graph definition const svg = root.select('#' + id); svg.append('g'); - const mm = diagObj.db.getMindmap(); + const mm = (diagObj.db as MindmapDB).getMindmap(); + if (!mm) { + return; + } // Draw the graph and start with drawing the nodes without proper position // this gives us the size of the nodes and we can set the positions later @@ -201,9 +193,9 @@ export const draw = async (text, id, version, diagObj) => { const cy = await layoutMindmap(mm, conf); - // // After this we can draw, first the edges and the then nodes with the correct position - drawEdges(edgesElem, cy, conf); - positionNodes(cy, conf); + // After this we can draw, first the edges and the then nodes with the correct position + drawEdges(edgesElem, cy); + positionNodes(cy); // Setup the view box and size of the svg element setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth); From e1a23f10df548a13844c600540d4ae9d0e9df7d5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sun, 28 Jan 2024 21:43:03 +0530 Subject: [PATCH 08/21] chore: Fix config type --- docs/config/setup/modules/config.md | 36 ++++++++++++------- docs/config/setup/modules/mermaidAPI.md | 2 +- packages/mermaid/src/config.ts | 6 +++- packages/mermaid/src/config.type.ts | 5 --- .../src/diagrams/mindmap/mindmapRenderer.ts | 3 +- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index f1de64e2df..afe0af4567 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -6,6 +6,16 @@ # Module: config +## Type Aliases + +### MermaidConfigWithDefaults + +Ƭ **MermaidConfigWithDefaults**: `RequiredDeep`<`MermaidConfig`> + +#### Defined in + +[config.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L10) + ## Variables ### defaultConfig @@ -14,7 +24,7 @@ #### Defined in -[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8) +[config.ts:12](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L12) ## Functions @@ -36,13 +46,13 @@ Pushes in a directive to the configuration #### Defined in -[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188) +[config.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L192) --- ### getConfig -▸ **getConfig**(): `MermaidConfig` +▸ **getConfig**(): `RequiredObjectDeep`<`MermaidConfig`> ## getConfig @@ -54,13 +64,13 @@ Pushes in a directive to the configuration #### Returns -`MermaidConfig` +`RequiredObjectDeep`<`MermaidConfig`> The currentConfig #### Defined in -[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131) +[config.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L135) --- @@ -84,7 +94,7 @@ The siteConfig #### Defined in -[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) +[config.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L100) --- @@ -118,7 +128,7 @@ The siteConfig #### Defined in -[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218) +[config.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L222) --- @@ -147,7 +157,7 @@ options in-place #### Defined in -[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146) +[config.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L150) --- @@ -167,7 +177,7 @@ options in-place #### Defined in -[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) +[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) --- @@ -199,7 +209,7 @@ The currentConfig merged with the sanitized conf #### Defined in -[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113) +[config.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L117) --- @@ -232,7 +242,7 @@ The new siteConfig #### Defined in -[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) +[config.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L65) --- @@ -253,7 +263,7 @@ The new siteConfig #### Defined in -[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15) +[config.ts:19](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L19) --- @@ -273,4 +283,4 @@ The new siteConfig #### Defined in -[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) +[config.ts:83](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L83) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index a1992c2254..0fa7dec02c 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) ### mermaidAPI -• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> +• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `RequiredObjectDeep`<`MermaidConfig`> = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> ## mermaidAPI configuration defaults diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index f1dccd251d..f117881265 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -2,8 +2,12 @@ import assignWithDepth from './assignWithDepth.js'; import { log } from './logger.js'; import theme from './themes/index.js'; import config from './defaultConfig.js'; -import type { MermaidConfig, MermaidConfigWithDefaults } from './config.type.js'; +import type { MermaidConfig } from './config.type.js'; import { sanitizeDirective } from './utils/sanitizeDirective.js'; +import type { RequiredDeep } from 'type-fest'; + +// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name. +export type MermaidConfigWithDefaults = RequiredDeep; export const defaultConfig: MermaidConfig = Object.freeze(config); diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 7ca4b89d67..575f428ddd 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -5,8 +5,6 @@ * and run json-schema-to-typescript to regenerate this file. */ -import { RequiredDeep } from 'type-fest'; - /** * Configuration options to pass to the `dompurify` library. */ @@ -167,9 +165,6 @@ export interface MermaidConfig { wrap?: boolean; fontSize?: number; } - -// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name. -export type MermaidConfigWithDefaults = RequiredDeep; /** * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "BaseDiagramConfig". diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 6d0dc6067e..2a8fabd4f3 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -7,10 +7,11 @@ import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; import * as db from './mindmapDb.js'; -import type { MermaidConfig, MermaidConfigWithDefaults } from '../../config.type.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); From 9651d0c2da4799713fbbded20e34550cc9f2af44 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 10:45:47 +0530 Subject: [PATCH 09/21] refactor: Fix types and imports --- package.json | 5 ++ packages/mermaid-example-diagram/package.json | 7 +-- packages/mermaid/package.json | 3 +- .../diagrams/mindmap/mindmap-definition.ts | 16 +++--- .../src/diagrams/mindmap/mindmap.spec.ts | 2 +- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 32 +++++------ .../src/diagrams/mindmap/mindmapRenderer.ts | 17 +++--- .../src/diagrams/mindmap/mindmapTypes.ts | 19 ++++++- patches/cytoscape@3.28.1.patch | 20 +++++++ pnpm-lock.yaml | 57 +++++-------------- 10 files changed, 90 insertions(+), 88 deletions(-) create mode 100644 patches/cytoscape@3.28.1.patch diff --git a/package.json b/package.json index 441484218d..4a5a56aaef 100644 --- a/package.json +++ b/package.json @@ -127,5 +127,10 @@ }, "nyc": { "report-dir": "coverage/cypress" + }, + "pnpm": { + "patchedDependencies": { + "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch" + } } } diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json index dc468a6c73..63e8aadea9 100644 --- a/packages/mermaid-example-diagram/package.json +++ b/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:*" diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 4557506afd..471a11fd32 100644 --- a/packages/mermaid/package.json +++ b/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", diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts index c5c7303c30..66b44b4f9f 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts +++ b/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, }; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts index f6cc4304f8..2d67fc600a 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.ts +++ b/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'; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index 72c9968b62..eceabc52b9 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/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; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 2a8fabd4f3..f4471b01da 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/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 { 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); diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts index caec37d2c0..28ec37c391 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts +++ b/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; diff --git a/patches/cytoscape@3.28.1.patch b/patches/cytoscape@3.28.1.patch new file mode 100644 index 0000000000..d92163a318 --- /dev/null +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5d950edefc..1312ff7c52 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,11 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +patchedDependencies: + cytoscape@3.28.1: + hash: claipxynndhyqyu2csninuoh5e + path: patches/cytoscape@3.28.1.patch + importers: .: @@ -201,14 +206,11 @@ importers: specifier: ^3.0.0 version: 3.0.0 cytoscape: - specifier: ^3.23.0 - version: 3.23.0 + specifier: ^3.28.1 + version: 3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e) 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) + version: 4.1.0(cytoscape@3.28.1) d3: specifier: ^7.4.0 version: 7.4.0 @@ -384,28 +386,13 @@ importers: '@braintree/sanitize-url': specifier: ^6.0.1 version: 6.0.2 - 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.0.0 khroma: specifier: ^2.0.0 version: 2.0.0 - non-layered-tidy-tree-layout: - specifier: ^2.0.2 - version: 2.0.2 devDependencies: - '@types/cytoscape': - specifier: ^3.19.9 - version: 3.19.9 concurrently: specifier: ^8.0.0 version: 8.0.0 @@ -7739,12 +7726,6 @@ packages: layout-base: 1.0.2 dev: false - /cose-base@2.2.0: - resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==} - dependencies: - layout-base: 2.0.1 - dev: false - /cosmiconfig-typescript-loader@4.4.0(@types/node@20.4.7)(cosmiconfig@8.2.0)(ts-node@10.9.1)(typescript@5.1.6): resolution: {integrity: sha512-BabizFdC3wBHhbI4kJh0VkQP9GkBfoHPydD0COMce1nJ1kJAB3F2TmJ/I7diULBKtmEWSwEbuN/KDtgnmUUVmw==} engines: {node: '>=v14.21.3'} @@ -8135,31 +8116,23 @@ packages: yauzl: 2.10.0 dev: true - /cytoscape-cose-bilkent@4.1.0(cytoscape@3.23.0): + /cytoscape-cose-bilkent@4.1.0(cytoscape@3.28.1): resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==} peerDependencies: cytoscape: ^3.2.0 dependencies: cose-base: 1.0.3 - cytoscape: 3.23.0 - dev: false - - /cytoscape-fcose@2.1.0(cytoscape@3.23.0): - resolution: {integrity: sha512-Q3apPl66jf8/2sMsrCjNP247nbDkyIPjA9g5iPMMWNLZgP3/mn9aryF7EFY/oRPEpv7bKJ4jYmCoU5r5/qAc1Q==} - peerDependencies: - cytoscape: ^3.2.0 - dependencies: - cose-base: 2.2.0 - cytoscape: 3.23.0 + cytoscape: 3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e) dev: false - /cytoscape@3.23.0: - resolution: {integrity: sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==} + /cytoscape@3.28.1(patch_hash=claipxynndhyqyu2csninuoh5e): + resolution: {integrity: sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==} engines: {node: '>=0.10'} dependencies: heap: 0.2.7 lodash: 4.17.21 dev: false + patched: true /d3-array@2.12.1: resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==} @@ -12000,10 +11973,6 @@ packages: resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==} dev: false - /layout-base@2.0.1: - resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==} - dev: false - /lazy-ass@1.6.0: resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==} engines: {node: '> 0.8'} From cffac848ead7cc3250db2f79cd09bce7a99739c1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 10:52:58 +0530 Subject: [PATCH 10/21] chore: Fix mindmapDb exports --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index eceabc52b9..f5303ac29c 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -8,7 +8,7 @@ let nodes: MindMapNode[] = []; let cnt = 0; let elements: Record = {}; -export const clear = () => { +const clear = () => { nodes = []; cnt = 0; elements = {}; @@ -24,11 +24,11 @@ const getParent = function (level: number) { return null; }; -export const getMindmap = () => { +const getMindmap = () => { return nodes.length > 0 ? nodes[0] : null; }; -export const addNode = (level: number, id: string, descr: string, type: number) => { +const addNode = (level: number, id: string, descr: string, type: number) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); let padding: number = conf.mindmap?.padding ?? 10; @@ -69,7 +69,7 @@ export const addNode = (level: number, id: string, descr: string, type: number) } }; -export const nodeType = { +const nodeType = { DEFAULT: 0, NO_BORDER: 0, ROUNDED_RECT: 1, @@ -80,7 +80,7 @@ export const nodeType = { HEXAGON: 6, }; -export const getType = (startStr: string, endStr: string): number => { +const getType = (startStr: string, endStr: string): number => { log.debug('In get type', startStr, endStr); switch (startStr) { case '[': @@ -100,11 +100,11 @@ export const getType = (startStr: string, endStr: string): number => { } }; -export const setElementForId = (id: string, element: D3Element) => { +const setElementForId = (id: string, element: D3Element) => { elements[id] = element; }; -export const decorateNode = (decoration?: { class?: string; icon?: string }) => { +const decorateNode = (decoration?: { class?: string; icon?: string }) => { if (!decoration) { return; } @@ -118,7 +118,7 @@ export const decorateNode = (decoration?: { class?: string; icon?: string }) => } }; -export const type2Str = (type: number) => { +const type2Str = (type: number) => { switch (type) { case nodeType.DEFAULT: return 'no-border'; @@ -140,14 +140,15 @@ export const type2Str = (type: number) => { }; // Expose logger to grammar -export const getLogger = () => log; -export const getElementById = (id: string) => elements[id]; +const getLogger = () => log; +const getElementById = (id: string) => elements[id]; const db = { clear, addNode, getMindmap, nodeType, + getType, setElementForId, decorateNode, type2Str, From 23d843b6d381aa42caf1ebb7f5f908e2c187608d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 11:21:12 +0530 Subject: [PATCH 11/21] refactor: Remove db import from svgDraw --- .../src/diagrams/mindmap/mindmapRenderer.ts | 18 ++++-- .../mermaid/src/diagrams/mindmap/svgDraw.js | 58 ++++++------------- 2 files changed, 29 insertions(+), 47 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index f4471b01da..04eed6b5a1 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -2,7 +2,7 @@ import { select } from 'd3'; import { log } from '../../logger.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; -import svgDraw from './svgDraw.js'; +import { drawNode, positionNode } from './svgDraw.js'; import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; @@ -15,11 +15,17 @@ import type { MermaidConfigWithDefaults } from '../../config.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); -function drawNodes(svg: D3Element, mindmap: MindMapNode, section: number, conf: MermaidConfig) { - svgDraw.drawNode(svg, mindmap, section, conf); +function drawNodes( + db: MindmapDB, + svg: D3Element, + mindmap: MindMapNode, + section: number, + conf: MermaidConfig +) { + drawNode(db, svg, mindmap, section, conf); if (mindmap.children) { mindmap.children.forEach((child, index) => { - drawNodes(svg, child, section < 0 ? index : section, conf); + drawNodes(db, svg, child, section < 0 ? index : section, conf); }); } } @@ -141,7 +147,7 @@ function positionNodes(db: MindmapDB, cy: cytoscape.Core) { const data = node.data(); data.x = node.position().x; data.y = node.position().y; - svgDraw.positionNode(data); + positionNode(db, data); const el = db.getElementById(data.nodeId); log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data); el.attr( @@ -187,7 +193,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D edgesElem.attr('class', 'mindmap-edges'); const nodesElem = svg.append('g'); nodesElem.attr('class', 'mindmap-nodes'); - drawNodes(nodesElem, mm, -1, conf); + drawNodes(db, nodesElem, mm, -1, conf); // Next step is to layout the mindmap, giving each node a position diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js index b065e8010f..8d3340c6e6 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js @@ -1,8 +1,7 @@ -import * as db from './mindmapDb.js'; import { createText } from '../../rendering-util/createText.js'; const MAX_SECTIONS = 12; -const defaultBkg = function (elem, node, section) { +const defaultBkg = function (db, elem, node, section) { const rd = 5; elem .append('path') @@ -24,7 +23,7 @@ const defaultBkg = function (elem, node, section) { .attr('y2', node.height); }; -const rectBkg = function (elem, node) { +const rectBkg = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -33,7 +32,7 @@ const rectBkg = function (elem, node) { .attr('width', node.width); }; -const cloudBkg = function (elem, node) { +const cloudBkg = function (db, elem, node) { const w = node.width; const h = node.height; const r1 = 0.15 * w; @@ -64,7 +63,7 @@ const cloudBkg = function (elem, node) { ); }; -const bangBkg = function (elem, node) { +const bangBkg = function (db, elem, node) { const w = node.width; const h = node.height; const r = 0.15 * w; @@ -96,7 +95,7 @@ const bangBkg = function (elem, node) { ); }; -const circleBkg = function (elem, node) { +const circleBkg = function (db, elem, node) { elem .append('circle') .attr('id', 'node-' + node.id) @@ -126,7 +125,7 @@ function insertPolygonShape(parent, w, h, points, node) { .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); } -const hexagonBkg = function (elem, node) { +const hexagonBkg = function (db, elem, node) { const h = node.height; const f = 4; const m = h / f; @@ -142,7 +141,7 @@ const hexagonBkg = function (elem, node) { const shapeSvg = insertPolygonShape(elem, w, h, points, node); }; -const roundedRectBkg = function (elem, node) { +const roundedRectBkg = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -154,13 +153,14 @@ const roundedRectBkg = function (elem, node) { }; /** + * @param {import('./mindmapTypes.js').MindmapDB} db The database * @param {object} elem The D3 dom element in which the node is to be added * @param {object} node The node to be added * @param fullSection * @param {object} conf The configuration object * @returns {number} The height nodes dom element */ -export const drawNode = function (elem, node, fullSection, conf) { +export const drawNode = function (db, elem, node, fullSection, conf) { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); const nodeElem = elem.append('g'); @@ -247,26 +247,26 @@ export const drawNode = function (elem, node, fullSection, conf) { switch (node.type) { case db.nodeType.DEFAULT: - defaultBkg(bkgElem, node, section, conf); + defaultBkg(db, bkgElem, node, section, conf); break; case db.nodeType.ROUNDED_RECT: - roundedRectBkg(bkgElem, node, section, conf); + roundedRectBkg(db, bkgElem, node, section, conf); break; case db.nodeType.RECT: - rectBkg(bkgElem, node, section, conf); + rectBkg(db, bkgElem, node, section, conf); break; case db.nodeType.CIRCLE: bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')'); - circleBkg(bkgElem, node, section, conf); + circleBkg(db, bkgElem, node, section, conf); break; case db.nodeType.CLOUD: - cloudBkg(bkgElem, node, section, conf); + cloudBkg(db, bkgElem, node, section, conf); break; case db.nodeType.BANG: - bangBkg(bkgElem, node, section, conf); + bangBkg(db, bkgElem, node, section, conf); break; case db.nodeType.HEXAGON: - hexagonBkg(bkgElem, node, section, conf); + hexagonBkg(db, bkgElem, node, section, conf); break; } @@ -274,29 +274,7 @@ export const drawNode = function (elem, node, fullSection, conf) { return node.height; }; -export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) { - const section = fullSection % (MAX_SECTIONS - 1); - const sx = parent.x + parent.width / 2; - const sy = parent.y + parent.height / 2; - const ex = mindmap.x + mindmap.width / 2; - const ey = mindmap.y + mindmap.height / 2; - const mx = ex > sx ? sx + Math.abs(sx - ex) / 2 : sx - Math.abs(sx - ex) / 2; - const my = ey > sy ? sy + Math.abs(sy - ey) / 2 : sy - Math.abs(sy - ey) / 2; - const qx = ex > sx ? Math.abs(sx - mx) / 2 + sx : -Math.abs(sx - mx) / 2 + sx; - const qy = ey > sy ? Math.abs(sy - my) / 2 + sy : -Math.abs(sy - my) / 2 + sy; - - edgesElem - .append('path') - .attr( - 'd', - parent.direction === 'TB' || parent.direction === 'BT' - ? `M${sx},${sy} Q${sx},${qy} ${mx},${my} T${ex},${ey}` - : `M${sx},${sy} Q${qx},${sy} ${mx},${my} T${ex},${ey}` - ) - .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth); -}; - -export const positionNode = function (node) { +export const positionNode = function (db, node) { const nodeElem = db.getElementById(node.id); const x = node.x || 0; @@ -304,5 +282,3 @@ export const positionNode = function (node) { // Position the node to its coordinate nodeElem.attr('transform', 'translate(' + x + ',' + y + ')'); }; - -export default { drawNode, positionNode, drawEdge }; From bde6a9ff4f3fc636d2ad0df7e9076b6b1b7eedc5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 11:21:42 +0530 Subject: [PATCH 12/21] Rename styles.js --- packages/mermaid/src/diagrams/mindmap/{styles.js => styles.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/diagrams/mindmap/{styles.js => styles.ts} (100%) diff --git a/packages/mermaid/src/diagrams/mindmap/styles.js b/packages/mermaid/src/diagrams/mindmap/styles.ts similarity index 100% rename from packages/mermaid/src/diagrams/mindmap/styles.js rename to packages/mermaid/src/diagrams/mindmap/styles.ts From 13e052ff8175bb8a10899b77e6b246846f0f9284 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 11:26:10 +0530 Subject: [PATCH 13/21] Fix styles.ts --- packages/mermaid/src/diagrams/mindmap/styles.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/styles.ts b/packages/mermaid/src/diagrams/mindmap/styles.ts index 863522fdf7..cf435a721a 100644 --- a/packages/mermaid/src/diagrams/mindmap/styles.ts +++ b/packages/mermaid/src/diagrams/mindmap/styles.ts @@ -1,6 +1,7 @@ +// @ts-expect-error Incorrect khroma types import { darken, lighten, isDark } from 'khroma'; -const genSections = (options) => { +const genSections = (options: any) => { let sections = ''; for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) { @@ -49,7 +50,8 @@ const genSections = (options) => { return sections; }; -const getStyles = (options) => +// TODO: These options seem incorrect. +const getStyles = (options: any) => ` .edge { stroke-width: 3; From 75ec719257b58f930b7ae33138fff94501608638 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 11:31:22 +0530 Subject: [PATCH 14/21] Rename svgDraw.js --- packages/mermaid/src/diagrams/mindmap/{svgDraw.js => svgDraw.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/mermaid/src/diagrams/mindmap/{svgDraw.js => svgDraw.ts} (100%) diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts similarity index 100% rename from packages/mermaid/src/diagrams/mindmap/svgDraw.js rename to packages/mermaid/src/diagrams/mindmap/svgDraw.ts From b51d8ff7ba4cf9714903a60d8c703b10b0f6ca59 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 12:16:21 +0530 Subject: [PATCH 15/21] Convert svgDraw.ts --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 16 ++--- .../src/diagrams/mindmap/mindmapRenderer.ts | 12 ++-- .../src/diagrams/mindmap/mindmapTypes.ts | 6 +- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 60 ++++++++++--------- 4 files changed, 51 insertions(+), 43 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index f5303ac29c..c0fdd12574 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -1,12 +1,12 @@ import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { D3Element } from '../../mermaidAPI.js'; import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; -import type { D3Element } from '../../mermaidAPI.js'; -import type { MindMapNode } from './mindmapTypes.js'; +import type { MindmapNode } from './mindmapTypes.js'; -let nodes: MindMapNode[] = []; +let nodes: MindmapNode[] = []; let cnt = 0; -let elements: Record = {}; +let elements: Record = {}; const clear = () => { nodes = []; @@ -14,7 +14,7 @@ const clear = () => { elements = {}; }; -const getParent = function (level: number) { +const getParent = function(level: number) { for (let i = nodes.length - 1; i >= 0; i--) { if (nodes[i].level < level) { return nodes[i]; @@ -48,7 +48,7 @@ const addNode = (level: number, id: string, descr: string, type: number) => { children: [], width: conf.mindmap?.maxNodeWidth ?? 200, padding, - } satisfies MindMapNode; + } satisfies MindmapNode; const parent = getParent(level); if (parent) { @@ -100,7 +100,7 @@ const getType = (startStr: string, endStr: string): number => { } }; -const setElementForId = (id: string, element: D3Element) => { +const setElementForId = (id: number, element: D3Element) => { elements[id] = element; }; @@ -141,7 +141,7 @@ const type2Str = (type: number) => { // Expose logger to grammar const getLogger = () => log; -const getElementById = (id: string) => elements[id]; +const getElementById = (id: number) => elements[id]; const db = { clear, diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 04eed6b5a1..6b98715675 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -6,7 +6,7 @@ import { drawNode, positionNode } from './svgDraw.js'; import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; -import type { MindMapNode, MindmapDB } from './mindmapTypes.js'; +import type { MindmapNode, MindmapDB, FilledMindMapNode } from './mindmapTypes.js'; import type { MermaidConfig } from '../../config.type.js'; import type { Diagram } from '../../Diagram.js'; import type { D3Element } from '../../mermaidAPI.js'; @@ -18,9 +18,9 @@ cytoscape.use(coseBilkent); function drawNodes( db: MindmapDB, svg: D3Element, - mindmap: MindMapNode, + mindmap: FilledMindMapNode, section: number, - conf: MermaidConfig + conf: MermaidConfigWithDefaults ) { drawNode(db, svg, mindmap, section, conf); if (mindmap.children) { @@ -63,7 +63,7 @@ function drawEdges(edgesEl: D3Element, cy: cytoscape.Core) { }); } -function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { +function addNodes(mindmap: MindmapNode, cy: cytoscape.Core, conf: MermaidConfig, level: number) { cy.add({ group: 'nodes', data: { @@ -99,7 +99,7 @@ function addNodes(mindmap: MindMapNode, cy: cytoscape.Core, conf: MermaidConfig, } function layoutMindmap( - node: MindMapNode, + node: MindmapNode, conf: MermaidConfigWithDefaults ): Promise { return new Promise((resolve) => { @@ -193,7 +193,7 @@ export const draw = async (text: string, id: string, version: string, diagObj: D edgesElem.attr('class', 'mindmap-edges'); const nodesElem = svg.append('g'); nodesElem.attr('class', 'mindmap-nodes'); - drawNodes(db, nodesElem, mm, -1, conf); + drawNodes(db, nodesElem, mm as FilledMindMapNode, -1, conf); // Next step is to layout the mindmap, giving each node a position diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts index 28ec37c391..ced93ecacb 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts @@ -1,12 +1,13 @@ +import { RequiredDeep } from 'type-fest'; import type mindmapDb from './mindmapDb.js'; -export interface MindMapNode { +export interface MindmapNode { id: number; nodeId: string; level: number; descr: string; type: number; - children: MindMapNode[]; + children: MindmapNode[]; width: number; padding: number; section?: number; @@ -17,4 +18,5 @@ export interface MindMapNode { y?: number; } +export type FilledMindMapNode = RequiredDeep; export type MindmapDB = typeof mindmapDb; diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 8d3340c6e6..5670a8f6c5 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -1,7 +1,13 @@ +import type { D3Element } from '../../mermaidAPI.js'; import { createText } from '../../rendering-util/createText.js'; +import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; +import { MermaidConfigWithDefaults } from '../../config.js'; +import { Point } from '../../types.js'; const MAX_SECTIONS = 12; -const defaultBkg = function (db, elem, node, section) { +type ShapeFunction = (db: MindmapDB, elem: D3Element, node: FilledMindMapNode, section?: number) => void; + +const defaultBkg: ShapeFunction = function(db, elem, node, section) { const rd = 5; elem .append('path') @@ -9,8 +15,7 @@ const defaultBkg = function (db, elem, node, section) { .attr('class', 'node-bkg node-' + db.type2Str(node.type)) .attr( 'd', - `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${ - node.width - 2 * rd + `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd } q5,0 5,5 v${node.height - rd} H0 Z` ); @@ -23,7 +28,7 @@ const defaultBkg = function (db, elem, node, section) { .attr('y2', node.height); }; -const rectBkg = function (db, elem, node) { +const rectBkg: ShapeFunction = function(db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -32,7 +37,7 @@ const rectBkg = function (db, elem, node) { .attr('width', node.width); }; -const cloudBkg = function (db, elem, node) { +const cloudBkg: ShapeFunction = function(db, elem, node) { const w = node.width; const h = node.height; const r1 = 0.15 * w; @@ -63,7 +68,7 @@ const cloudBkg = function (db, elem, node) { ); }; -const bangBkg = function (db, elem, node) { +const bangBkg: ShapeFunction = function(db, elem, node) { const w = node.width; const h = node.height; const r = 0.15 * w; @@ -95,7 +100,7 @@ const bangBkg = function (db, elem, node) { ); }; -const circleBkg = function (db, elem, node) { +const circleBkg: ShapeFunction = function(db, elem, node) { elem .append('circle') .attr('id', 'node-' + node.id) @@ -111,13 +116,13 @@ const circleBkg = function (db, elem, node) { * @param points * @param node */ -function insertPolygonShape(parent, w, h, points, node) { +function insertPolygonShape(parent: D3Element, w: number, h: number, points: Point[], node: FilledMindMapNode) { return parent .insert('polygon', ':first-child') .attr( 'points', points - .map(function (d) { + .map(function(d) { return d.x + ',' + d.y; }) .join(' ') @@ -125,12 +130,12 @@ function insertPolygonShape(parent, w, h, points, node) { .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); } -const hexagonBkg = function (db, elem, node) { +const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node: FilledMindMapNode) { const h = node.height; const f = 4; const m = h / f; const w = node.width - node.padding + 2 * m; - const points = [ + const points: Point[] = [ { x: m, y: 0 }, { x: w - m, y: 0 }, { x: w, y: -h / 2 }, @@ -138,10 +143,10 @@ const hexagonBkg = function (db, elem, node) { { x: m, y: -h }, { x: 0, y: -h / 2 }, ]; - const shapeSvg = insertPolygonShape(elem, w, h, points, node); + insertPolygonShape(elem, w, h, points, node); }; -const roundedRectBkg = function (db, elem, node) { +const roundedRectBkg: ShapeFunction = function(db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -153,14 +158,14 @@ const roundedRectBkg = function (db, elem, node) { }; /** - * @param {import('./mindmapTypes.js').MindmapDB} db The database - * @param {object} elem The D3 dom element in which the node is to be added - * @param {object} node The node to be added + * @param db The database + * @param elem The D3 dom element in which the node is to be added + * @param node The node to be added * @param fullSection - * @param {object} conf The configuration object - * @returns {number} The height nodes dom element + * @param conf The configuration object + * @returns The height nodes dom element */ -export const drawNode = function (db, elem, node, fullSection, conf) { +export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMindMapNode, fullSection: number, conf: MermaidConfigWithDefaults): number { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); const nodeElem = elem.append('g'); @@ -190,6 +195,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) { } // .call(wrap, node.width); const bbox = textElem.node().getBBox(); + // @ts-expect-error TODO: Check if fontSize can be string? const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize; node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding; node.width = bbox.width + 2 * node.padding; @@ -247,26 +253,26 @@ export const drawNode = function (db, elem, node, fullSection, conf) { switch (node.type) { case db.nodeType.DEFAULT: - defaultBkg(db, bkgElem, node, section, conf); + defaultBkg(db, bkgElem, node, section); break; case db.nodeType.ROUNDED_RECT: - roundedRectBkg(db, bkgElem, node, section, conf); + roundedRectBkg(db, bkgElem, node, section); break; case db.nodeType.RECT: - rectBkg(db, bkgElem, node, section, conf); + rectBkg(db, bkgElem, node, section); break; case db.nodeType.CIRCLE: bkgElem.attr('transform', 'translate(' + node.width / 2 + ', ' + +node.height / 2 + ')'); - circleBkg(db, bkgElem, node, section, conf); + circleBkg(db, bkgElem, node, section); break; case db.nodeType.CLOUD: - cloudBkg(db, bkgElem, node, section, conf); + cloudBkg(db, bkgElem, node, section); break; case db.nodeType.BANG: - bangBkg(db, bkgElem, node, section, conf); + bangBkg(db, bkgElem, node, section); break; case db.nodeType.HEXAGON: - hexagonBkg(db, bkgElem, node, section, conf); + hexagonBkg(db, bkgElem, node, section); break; } @@ -274,7 +280,7 @@ export const drawNode = function (db, elem, node, fullSection, conf) { return node.height; }; -export const positionNode = function (db, node) { +export const positionNode = function(db: MindmapDB, node: FilledMindMapNode) { const nodeElem = db.getElementById(node.id); const x = node.x || 0; From d21461fba03dcd01ec82d7b152b2bb1ac786d4b4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 12:27:17 +0530 Subject: [PATCH 16/21] Lint --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 2 +- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 48 ++++++++++++++----- 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index c0fdd12574..e2b453a0d5 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -14,7 +14,7 @@ const clear = () => { elements = {}; }; -const getParent = function(level: number) { +const getParent = function (level: number) { for (let i = nodes.length - 1; i >= 0; i--) { if (nodes[i].level < level) { return nodes[i]; diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 5670a8f6c5..8fe47468b0 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -5,9 +5,14 @@ import { MermaidConfigWithDefaults } from '../../config.js'; import { Point } from '../../types.js'; const MAX_SECTIONS = 12; -type ShapeFunction = (db: MindmapDB, elem: D3Element, node: FilledMindMapNode, section?: number) => void; +type ShapeFunction = ( + db: MindmapDB, + elem: D3Element, + node: FilledMindMapNode, + section?: number +) => void; -const defaultBkg: ShapeFunction = function(db, elem, node, section) { +const defaultBkg: ShapeFunction = function (db, elem, node, section) { const rd = 5; elem .append('path') @@ -15,7 +20,8 @@ const defaultBkg: ShapeFunction = function(db, elem, node, section) { .attr('class', 'node-bkg node-' + db.type2Str(node.type)) .attr( 'd', - `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${node.width - 2 * rd + `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${ + node.width - 2 * rd } q5,0 5,5 v${node.height - rd} H0 Z` ); @@ -28,7 +34,7 @@ const defaultBkg: ShapeFunction = function(db, elem, node, section) { .attr('y2', node.height); }; -const rectBkg: ShapeFunction = function(db, elem, node) { +const rectBkg: ShapeFunction = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -37,7 +43,7 @@ const rectBkg: ShapeFunction = function(db, elem, node) { .attr('width', node.width); }; -const cloudBkg: ShapeFunction = function(db, elem, node) { +const cloudBkg: ShapeFunction = function (db, elem, node) { const w = node.width; const h = node.height; const r1 = 0.15 * w; @@ -68,7 +74,7 @@ const cloudBkg: ShapeFunction = function(db, elem, node) { ); }; -const bangBkg: ShapeFunction = function(db, elem, node) { +const bangBkg: ShapeFunction = function (db, elem, node) { const w = node.width; const h = node.height; const r = 0.15 * w; @@ -100,7 +106,7 @@ const bangBkg: ShapeFunction = function(db, elem, node) { ); }; -const circleBkg: ShapeFunction = function(db, elem, node) { +const circleBkg: ShapeFunction = function (db, elem, node) { elem .append('circle') .attr('id', 'node-' + node.id) @@ -116,13 +122,19 @@ const circleBkg: ShapeFunction = function(db, elem, node) { * @param points * @param node */ -function insertPolygonShape(parent: D3Element, w: number, h: number, points: Point[], node: FilledMindMapNode) { +function insertPolygonShape( + parent: D3Element, + w: number, + h: number, + points: Point[], + node: FilledMindMapNode +) { return parent .insert('polygon', ':first-child') .attr( 'points', points - .map(function(d) { + .map(function (d) { return d.x + ',' + d.y; }) .join(' ') @@ -130,7 +142,11 @@ function insertPolygonShape(parent: D3Element, w: number, h: number, points: Poi .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')'); } -const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node: FilledMindMapNode) { +const hexagonBkg: ShapeFunction = function ( + _db: MindmapDB, + elem: D3Element, + node: FilledMindMapNode +) { const h = node.height; const f = 4; const m = h / f; @@ -146,7 +162,7 @@ const hexagonBkg: ShapeFunction = function(_db: MindmapDB, elem: D3Element, node insertPolygonShape(elem, w, h, points, node); }; -const roundedRectBkg: ShapeFunction = function(db, elem, node) { +const roundedRectBkg: ShapeFunction = function (db, elem, node) { elem .append('rect') .attr('id', 'node-' + node.id) @@ -165,7 +181,13 @@ const roundedRectBkg: ShapeFunction = function(db, elem, node) { * @param conf The configuration object * @returns The height nodes dom element */ -export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMindMapNode, fullSection: number, conf: MermaidConfigWithDefaults): number { +export const drawNode = function ( + db: MindmapDB, + elem: D3Element, + node: FilledMindMapNode, + fullSection: number, + conf: MermaidConfigWithDefaults +): number { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); const nodeElem = elem.append('g'); @@ -280,7 +302,7 @@ export const drawNode = function(db: MindmapDB, elem: D3Element, node: FilledMin return node.height; }; -export const positionNode = function(db: MindmapDB, node: FilledMindMapNode) { +export const positionNode = function (db: MindmapDB, node: FilledMindMapNode) { const nodeElem = db.getElementById(node.id); const x = node.x || 0; From 4c551b2acacff1648c1cf982b79edc7d72bc589e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 29 Jan 2024 12:35:39 +0530 Subject: [PATCH 17/21] Lint --- .../src/diagrams/mindmap/mindmapTypes.ts | 2 +- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 22 ++++++------------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts index ced93ecacb..e8350477a9 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts @@ -1,4 +1,4 @@ -import { RequiredDeep } from 'type-fest'; +import type { RequiredDeep } from 'type-fest'; import type mindmapDb from './mindmapDb.js'; export interface MindmapNode { diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 8fe47468b0..797a3fd990 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -1,8 +1,8 @@ import type { D3Element } from '../../mermaidAPI.js'; import { createText } from '../../rendering-util/createText.js'; import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; -import { MermaidConfigWithDefaults } from '../../config.js'; -import { Point } from '../../types.js'; +import type { MermaidConfigWithDefaults } from '../../config.js'; +import type { Point } from '../../types.js'; const MAX_SECTIONS = 12; type ShapeFunction = ( @@ -114,14 +114,6 @@ const circleBkg: ShapeFunction = function (db, elem, node) { .attr('r', node.width / 2); }; -/** - * - * @param parent - * @param w - * @param h - * @param points - * @param node - */ function insertPolygonShape( parent: D3Element, w: number, @@ -174,11 +166,11 @@ const roundedRectBkg: ShapeFunction = function (db, elem, node) { }; /** - * @param db The database - * @param elem The D3 dom element in which the node is to be added - * @param node The node to be added - * @param fullSection - * @param conf The configuration object + * @param db - The database + * @param elem - The D3 dom element in which the node is to be added + * @param node - The node to be added + * @param fullSection - ? + * @param conf - The configuration object * @returns The height nodes dom element */ export const drawNode = function ( From ff6988e875dbc96e5a4b726a33ad58fdb8822e5f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 30 Jan 2024 09:51:40 +0530 Subject: [PATCH 18/21] chore: Address review comments Co-authored-by: Reda Al Sulais --- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 5 ++-- .../src/diagrams/mindmap/mindmapRenderer.ts | 24 +++++-------------- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 8 +++---- packages/mermaid/src/utils.ts | 4 ++++ 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index e2b453a0d5..2a55a9f7bb 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -31,7 +31,7 @@ const getMindmap = () => { const addNode = (level: number, id: string, descr: string, type: number) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); - let padding: number = conf.mindmap?.padding ?? 10; + let padding: number = conf.mindmap.padding; switch (type) { case nodeType.ROUNDED_RECT: case nodeType.RECT: @@ -61,10 +61,9 @@ const addNode = (level: number, id: string, descr: string, type: number) => { nodes.push(node); } else { // Syntax error ... there can only bee one root - const error = new Error( + throw new Error( 'There can be only one root. No parent could be found for ("' + node.descr + '")' ); - throw error; } } }; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 6b98715675..72136fdb4b 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -11,6 +11,8 @@ import type { MermaidConfig } from '../../config.type.js'; import type { Diagram } from '../../Diagram.js'; import type { D3Element } from '../../mermaidAPI.js'; import type { MermaidConfigWithDefaults } from '../../config.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { DiagramRenderer, DrawDefinition } from '../../diagram-api/types.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); @@ -158,34 +160,20 @@ function positionNodes(db: MindmapDB, cy: cytoscape.Core) { }); } -export const draw = async (text: string, id: string, version: string, diagObj: Diagram) => { +export const draw: DrawDefinition = async (text, id, _version, diagObj) => { const conf = getConfig(); const db = diagObj.db as MindmapDB; conf.htmlLabels = false; - log.debug('Rendering mindmap diagram\n' + text, diagObj.parser); + log.debug('Rendering mindmap diagram\n' + text); - const securityLevel = conf.securityLevel; - // Handle root and Document for when rendering in sandbox mode - // eslint-disable-next-line @typescript-eslint/no-explicit-any - let sandboxElement: any; - if (securityLevel === 'sandbox') { - sandboxElement = select('#i' + id); - } - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const root: any = - securityLevel === 'sandbox' - ? select(sandboxElement.nodes()[0].contentDocument.body) - : select('body'); - - const svg = root.select('#' + id); - - svg.append('g'); const mm = db.getMindmap(); if (!mm) { return; } + const svg = selectSvgElement(id); + // Draw the graph and start with drawing the nodes without proper position // this gives us the size of the nodes and we can set the positions later diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index 797a3fd990..a7d4679bc0 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -3,6 +3,8 @@ import { createText } from '../../rendering-util/createText.js'; import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; import type { MermaidConfigWithDefaults } from '../../config.js'; import type { Point } from '../../types.js'; +import { parseFontSize } from '../../utils.js'; + const MAX_SECTIONS = 12; type ShapeFunction = ( @@ -207,11 +209,9 @@ export const drawNode = function ( .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle'); } - // .call(wrap, node.width); const bbox = textElem.node().getBBox(); - // @ts-expect-error TODO: Check if fontSize can be string? - const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize; - node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding; + const [fontSize] = parseFontSize(conf.fontSize); + node.height = bbox.height + fontSize! * 1.1 * 0.5 + node.padding; node.width = bbox.width + 2 * node.padding; if (node.icon) { if (node.type === db.nodeType.CIRCLE) { diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index b90d33f473..06aca5ab27 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -925,3 +925,7 @@ export const encodeEntities = function (text: string): string { export const decodeEntities = function (text: string): string { return text.replace(/fl°°/g, '&#').replace(/fl°/g, '&').replace(/¶ß/g, ';'); }; + +export const isString = (value: unknown): value is string => { + return typeof value === 'string'; +}; From 78f1631c8fbe686cf5f4d12e2523e867b652d3ea Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 30 Jan 2024 10:04:42 +0530 Subject: [PATCH 19/21] Organize imports --- .../src/diagrams/mindmap/mindmapRenderer.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index 72136fdb4b..c0c7485ba0 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -1,18 +1,17 @@ -import { select } from 'd3'; -import { log } from '../../logger.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; -import { setupGraphViewbox } from '../../setupGraphViewbox.js'; -import { drawNode, positionNode } from './svgDraw.js'; import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; -import type { MindmapNode, MindmapDB, FilledMindMapNode } from './mindmapTypes.js'; +import { select } from 'd3'; +import type { MermaidConfigWithDefaults } from '../../config.js'; import type { MermaidConfig } from '../../config.type.js'; -import type { Diagram } from '../../Diagram.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { DrawDefinition } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; import type { D3Element } from '../../mermaidAPI.js'; -import type { MermaidConfigWithDefaults } from '../../config.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -import { DiagramRenderer, DrawDefinition } from '../../diagram-api/types.js'; +import { setupGraphViewbox } from '../../setupGraphViewbox.js'; +import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js'; +import { drawNode, positionNode } from './svgDraw.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); From 80c20a72b2c5cc486a817a3ae0e7c61cc948e87a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 30 Jan 2024 14:25:44 +0530 Subject: [PATCH 20/21] Remove MermaidConfigWithDefaults --- docs/config/setup/modules/config.md | 38 +++++++------------ docs/config/setup/modules/mermaidAPI.md | 2 +- packages/mermaid/src/config.ts | 7 +--- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 5 ++- .../src/diagrams/mindmap/mindmapRenderer.ts | 24 ++++++------ .../mermaid/src/diagrams/mindmap/styles.ts | 5 ++- .../mermaid/src/diagrams/mindmap/svgDraw.ts | 4 +- 7 files changed, 38 insertions(+), 47 deletions(-) diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index afe0af4567..d41da484cc 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -6,25 +6,15 @@ # Module: config -## Type Aliases - -### MermaidConfigWithDefaults - -Ƭ **MermaidConfigWithDefaults**: `RequiredDeep`<`MermaidConfig`> - -#### Defined in - -[config.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L10) - ## Variables ### defaultConfig -• `Const` **defaultConfig**: `MermaidConfig` +• `Const` **defaultConfig**: `RequiredDeep`<`MermaidConfig`> #### Defined in -[config.ts:12](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L12) +[config.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L9) ## Functions @@ -46,13 +36,13 @@ Pushes in a directive to the configuration #### Defined in -[config.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L192) +[config.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L189) --- ### getConfig -▸ **getConfig**(): `RequiredObjectDeep`<`MermaidConfig`> +▸ **getConfig**(): `MermaidConfig` ## getConfig @@ -64,13 +54,13 @@ Pushes in a directive to the configuration #### Returns -`RequiredObjectDeep`<`MermaidConfig`> +`MermaidConfig` The currentConfig #### Defined in -[config.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L135) +[config.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L132) --- @@ -94,7 +84,7 @@ The siteConfig #### Defined in -[config.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L100) +[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97) --- @@ -128,7 +118,7 @@ The siteConfig #### Defined in -[config.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L222) +[config.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L219) --- @@ -157,7 +147,7 @@ options in-place #### Defined in -[config.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L150) +[config.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L147) --- @@ -177,7 +167,7 @@ options in-place #### Defined in -[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) +[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76) --- @@ -209,7 +199,7 @@ The currentConfig merged with the sanitized conf #### Defined in -[config.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L117) +[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114) --- @@ -242,7 +232,7 @@ The new siteConfig #### Defined in -[config.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L65) +[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62) --- @@ -263,7 +253,7 @@ The new siteConfig #### Defined in -[config.ts:19](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L19) +[config.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L16) --- @@ -283,4 +273,4 @@ The new siteConfig #### Defined in -[config.ts:83](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L83) +[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 0fa7dec02c..bc82d83db5 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) ### mermaidAPI -• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `RequiredObjectDeep`<`MermaidConfig`> = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> +• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `RequiredObjectDeep`<`MermaidConfig`> = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> ## mermaidAPI configuration defaults diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index f117881265..8d4968d39f 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -6,10 +6,7 @@ import type { MermaidConfig } from './config.type.js'; import { sanitizeDirective } from './utils/sanitizeDirective.js'; import type { RequiredDeep } from 'type-fest'; -// I'd prefer this to be named MermaidConfig, so all the functions can use the shorter name. -export type MermaidConfigWithDefaults = RequiredDeep; - -export const defaultConfig: MermaidConfig = Object.freeze(config); +export const defaultConfig: RequiredDeep = Object.freeze(config); let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig); let configFromInitialize: MermaidConfig; @@ -132,7 +129,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => { * * @returns The currentConfig */ -export const getConfig = (): MermaidConfigWithDefaults => { +export const getConfig = (): MermaidConfig => { return assignWithDepth({}, currentConfig); }; /** diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index 2a55a9f7bb..1cead9cfdd 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -3,6 +3,7 @@ import type { D3Element } from '../../mermaidAPI.js'; import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; import type { MindmapNode } from './mindmapTypes.js'; +import { defaultConfig } from '../../config.js'; let nodes: MindmapNode[] = []; let cnt = 0; @@ -31,7 +32,7 @@ const getMindmap = () => { const addNode = (level: number, id: string, descr: string, type: number) => { log.info('addNode', level, id, descr, type); const conf = getConfig(); - let padding: number = conf.mindmap.padding; + let padding: number = conf.mindmap?.padding ?? defaultConfig.mindmap.padding; switch (type) { case nodeType.ROUNDED_RECT: case nodeType.RECT: @@ -46,7 +47,7 @@ const addNode = (level: number, id: string, descr: string, type: number) => { descr: sanitizeText(descr, conf), type, children: [], - width: conf.mindmap?.maxNodeWidth ?? 200, + width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth, padding, } satisfies MindmapNode; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index c0c7485ba0..af748e164b 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -2,7 +2,6 @@ import cytoscape from 'cytoscape'; // @ts-expect-error No types available import coseBilkent from 'cytoscape-cose-bilkent'; import { select } from 'd3'; -import type { MermaidConfigWithDefaults } from '../../config.js'; import type { MermaidConfig } from '../../config.type.js'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import type { DrawDefinition } from '../../diagram-api/types.js'; @@ -12,6 +11,7 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js'; import { drawNode, positionNode } from './svgDraw.js'; +import { defaultConfig } from '../../config.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent); @@ -21,7 +21,7 @@ function drawNodes( svg: D3Element, mindmap: FilledMindMapNode, section: number, - conf: MermaidConfigWithDefaults + conf: MermaidConfig ) { drawNode(db, svg, mindmap, section, conf); if (mindmap.children) { @@ -99,10 +99,7 @@ function addNodes(mindmap: MindmapNode, cy: cytoscape.Core, conf: MermaidConfig, } } -function layoutMindmap( - node: MindmapNode, - conf: MermaidConfigWithDefaults -): Promise { +function layoutMindmap(node: MindmapNode, conf: MermaidConfig): Promise { return new Promise((resolve) => { // Add temporary render element const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none'); @@ -160,17 +157,17 @@ function positionNodes(db: MindmapDB, cy: cytoscape.Core) { } export const draw: DrawDefinition = async (text, id, _version, diagObj) => { - const conf = getConfig(); - const db = diagObj.db as MindmapDB; - conf.htmlLabels = false; - log.debug('Rendering mindmap diagram\n' + text); + const db = diagObj.db as MindmapDB; const mm = db.getMindmap(); if (!mm) { return; } + const conf = getConfig(); + conf.htmlLabels = false; + const svg = selectSvgElement(id); // Draw the graph and start with drawing the nodes without proper position @@ -191,7 +188,12 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => { positionNodes(db, cy); // Setup the view box and size of the svg element - setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth); + setupGraphViewbox( + undefined, + svg, + conf.mindmap?.padding ?? defaultConfig.mindmap.padding, + conf.mindmap?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth + ); }; export default { diff --git a/packages/mermaid/src/diagrams/mindmap/styles.ts b/packages/mermaid/src/diagrams/mindmap/styles.ts index cf435a721a..fffa6e4d9d 100644 --- a/packages/mermaid/src/diagrams/mindmap/styles.ts +++ b/packages/mermaid/src/diagrams/mindmap/styles.ts @@ -1,7 +1,8 @@ // @ts-expect-error Incorrect khroma types import { darken, lighten, isDark } from 'khroma'; +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; -const genSections = (options: any) => { +const genSections: DiagramStylesProvider = (options) => { let sections = ''; for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) { @@ -51,7 +52,7 @@ const genSections = (options: any) => { }; // TODO: These options seem incorrect. -const getStyles = (options: any) => +const getStyles: DiagramStylesProvider = (options) => ` .edge { stroke-width: 3; diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts index a7d4679bc0..3c7da86156 100644 --- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts +++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts @@ -1,9 +1,9 @@ import type { D3Element } from '../../mermaidAPI.js'; import { createText } from '../../rendering-util/createText.js'; import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js'; -import type { MermaidConfigWithDefaults } from '../../config.js'; import type { Point } from '../../types.js'; import { parseFontSize } from '../../utils.js'; +import type { MermaidConfig } from '../../config.type.js'; const MAX_SECTIONS = 12; @@ -180,7 +180,7 @@ export const drawNode = function ( elem: D3Element, node: FilledMindMapNode, fullSection: number, - conf: MermaidConfigWithDefaults + conf: MermaidConfig ): number { const htmlLabels = conf.htmlLabels; const section = fullSection % (MAX_SECTIONS - 1); From 726d633dd3a192d7c351fc0a3a5e3ec7b23a3d31 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 30 Jan 2024 20:00:54 +0530 Subject: [PATCH 21/21] Use config from defaultConfig Co-authored-by: Reda Al Sulais --- cSpell.json | 1 + docs/config/setup/modules/config.md | 24 +++++++++---------- docs/config/setup/modules/mermaidAPI.md | 2 +- packages/mermaid/src/config.ts | 3 +-- .../mermaid/src/diagrams/mindmap/mindmapDb.ts | 2 +- .../src/diagrams/mindmap/mindmapRenderer.ts | 2 +- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/cSpell.json b/cSpell.json index 4b8772347e..fc5eb6f9dc 100644 --- a/cSpell.json +++ b/cSpell.json @@ -28,6 +28,7 @@ "codedoc", "codemia", "colour", + "colours", "commitlint", "cpettitt", "customizability", diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index d41da484cc..f1de64e2df 100644 --- a/docs/config/setup/modules/config.md +++ b/docs/config/setup/modules/config.md @@ -10,11 +10,11 @@ ### defaultConfig -• `Const` **defaultConfig**: `RequiredDeep`<`MermaidConfig`> +• `Const` **defaultConfig**: `MermaidConfig` #### Defined in -[config.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L9) +[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8) ## Functions @@ -36,7 +36,7 @@ Pushes in a directive to the configuration #### Defined in -[config.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L189) +[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188) --- @@ -60,7 +60,7 @@ The currentConfig #### Defined in -[config.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L132) +[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131) --- @@ -84,7 +84,7 @@ The siteConfig #### Defined in -[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97) +[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96) --- @@ -118,7 +118,7 @@ The siteConfig #### Defined in -[config.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L219) +[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218) --- @@ -147,7 +147,7 @@ options in-place #### Defined in -[config.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L147) +[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146) --- @@ -167,7 +167,7 @@ options in-place #### Defined in -[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76) +[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75) --- @@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf #### Defined in -[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114) +[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113) --- @@ -232,7 +232,7 @@ The new siteConfig #### Defined in -[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62) +[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61) --- @@ -253,7 +253,7 @@ The new siteConfig #### Defined in -[config.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L16) +[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15) --- @@ -273,4 +273,4 @@ The new siteConfig #### Defined in -[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80) +[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index bc82d83db5..a1992c2254 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi) ### mermaidAPI -• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `RequiredObjectDeep`<`MermaidConfig`> = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> +• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }> ## mermaidAPI configuration defaults diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 8d4968d39f..ede3a568df 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -4,9 +4,8 @@ import theme from './themes/index.js'; import config from './defaultConfig.js'; import type { MermaidConfig } from './config.type.js'; import { sanitizeDirective } from './utils/sanitizeDirective.js'; -import type { RequiredDeep } from 'type-fest'; -export const defaultConfig: RequiredDeep = Object.freeze(config); +export const defaultConfig: MermaidConfig = Object.freeze(config); let siteConfig: MermaidConfig = assignWithDepth({}, defaultConfig); let configFromInitialize: MermaidConfig; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts index 1cead9cfdd..1bb2e63375 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts @@ -3,7 +3,7 @@ import type { D3Element } from '../../mermaidAPI.js'; import { sanitizeText } from '../../diagrams/common/common.js'; import { log } from '../../logger.js'; import type { MindmapNode } from './mindmapTypes.js'; -import { defaultConfig } from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; let nodes: MindmapNode[] = []; let cnt = 0; diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index af748e164b..9786479943 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -11,7 +11,7 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js'; import { drawNode, positionNode } from './svgDraw.js'; -import { defaultConfig } from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; // Inject the layout algorithm into cytoscape cytoscape.use(coseBilkent);