diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md index afe0af456..d41da484c 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 0fa7dec02..bc82d83db 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 f11788126..8d4968d39 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 2a55a9f7b..1cead9cfd 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 c0c7485ba..af748e164 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 cf435a721..fffa6e4d9 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 a7d4679bc..3c7da8615 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);