diff --git a/packages/mermaid/scripts/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts index bc8be7be9..4d179bb8d 100644 --- a/packages/mermaid/scripts/docs.spec.ts +++ b/packages/mermaid/scripts/docs.spec.ts @@ -183,7 +183,6 @@ This Markdown should be kept. | Data Input/Output | Lean Left | \`lean-l\` | Represents output or input | \`lean-left\`, \`out-in\` | | Database | Cylinder | \`cyl\` | Database storage | \`cylinder\`, \`database\`, \`db\` | | Decision | Diamond | \`diam\` | Decision-making step | \`decision\`, \`diamond\`, \`question\` | - | Default Mindmap Node | defaultMindmapNode | \`default-mindmap\` | defaultMindmapNode | \`default-mindmap\`, \`defaultMindmapNode\` | | Delay | Half-Rounded Rectangle | \`delay\` | Represents a delay | \`half-rounded-rectangle\` | | Direct Access Storage | Horizontal Cylinder | \`h-cyl\` | Direct access storage | \`das\`, \`horizontal-cylinder\` | | Disk Storage | Lined Cylinder | \`lin-cyl\` | Disk storage | \`disk\`, \`lined-cylinder\` | diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 79fadd195..69b315aa1 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -214,6 +214,8 @@ export interface MermaidConfig { wrap?: boolean; fontSize?: number; markdownAutoWrap?: boolean; + padding?: number; + useMaxWidth?: boolean; /** * Suppresses inserting 'Syntax error' diagram in the DOM. * This is useful when you want to control how to handle syntax errors in your application. diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts index bffa4138b..2802ecbc0 100644 --- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts +++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts @@ -1,4 +1,3 @@ -import { getConfig } from '../../diagram-api/diagramAPI.js'; import type { DrawDefinition } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js'; @@ -32,7 +31,6 @@ function _updateNodeDimensions(data4Layout: LayoutData, mindmapRoot: FilledMindM export const draw: DrawDefinition = async (text, id, _version, diagObj) => { log.debug('Rendering mindmap diagram\n' + text); - const { securityLevel, mindmap: conf } = getConfig(); // Draw the nodes first to get their dimensions, then update the layout data const db = diagObj.db as MindmapDB; @@ -42,7 +40,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => { const data4Layout = db.getData(); // Create the root SVG - the element is the div containing the SVG element - const svg = getDiagramElement(id, securityLevel); + const svg = getDiagramElement(id, data4Layout.config.securityLevel); data4Layout.type = diagObj.type; data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(data4Layout.config.layout, { @@ -55,6 +53,7 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => { if (!mm) { return; } + data4Layout.nodes.forEach((node) => { if (node.shape === 'rounded') { node.radius = 15; @@ -69,14 +68,16 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => { node.padding = 10; } }); + // Use the unified rendering system await render(data4Layout, svg); - // Setup the view box and size of the svg element + + // Setup the view box and size of the svg element using config from data4Layout setupViewPortForSVG( svg, - conf?.padding ?? defaultConfig.mindmap.padding, + data4Layout.config.padding ?? defaultConfig.mindmap.padding, 'mindmapDiagram', - conf?.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth + data4Layout.config.useMaxWidth ?? defaultConfig.mindmap.useMaxWidth ); }; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.test.ts b/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.test.ts index faf83af89..707b031f4 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.test.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/cytoscape-setup.test.ts @@ -22,10 +22,6 @@ vi.mock('cytoscape', () => { }; }); -vi.mock('cytoscape-cose-bilkent', () => ({ - default: vi.fn(), -})); - describe('Cytoscape Setup', () => { let mockNodes: Node[]; let mockEdges: Edge[]; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.test.ts b/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.test.ts index 66ee311c3..f5650d3e8 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.test.ts +++ b/packages/mermaid/src/rendering-util/layout-algorithms/cose-bilkent/layout.test.ts @@ -6,6 +6,7 @@ import type { MermaidConfig } from '../../../config.type.js'; import type { LayoutData } from '../../types.js'; // Mock cytoscape and cytoscape-cose-bilkent before importing the modules + vi.mock('cytoscape', () => { const mockCy = { add: vi.fn(), @@ -63,22 +64,6 @@ vi.mock('cytoscape', () => { }; }); -vi.mock('cytoscape-cose-bilkent', () => ({ - default: vi.fn(), -})); - -vi.mock('d3', () => ({ - select: vi.fn(() => ({ - append: vi.fn(() => ({ - attr: vi.fn(() => ({ - attr: vi.fn(() => ({ - remove: vi.fn(), - })), - })), - })), - })), -})); - describe('Cose-Bilkent Layout Algorithm', () => { let mockConfig: MermaidConfig; let mockRootNode: MindmapNode; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index 2d8caf9e9..2509dead4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -147,14 +147,6 @@ export const shapesDefs = [ aliases: ['bang'], handler: bang, }, - { - semanticName: 'Default Mindmap Node', - name: 'defaultMindmapNode', - shortName: 'default-mindmap', - description: 'defaultMindmapNode', - aliases: ['default-mindmap', 'defaultMindmapNode'], - handler: defaultMindmapNode, - }, { semanticName: 'Cloud', name: 'Cloud', @@ -506,7 +498,7 @@ const generateShapeMap = () => { //Mindmap diagram mindmapCircle, - + defaultMindmapNode, // class diagram classBox,