diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md index f4960e6d0..6fd67a2ac 100644 --- a/docs/config/setup/interfaces/mermaid.RenderResult.md +++ b/docs/config/setup/interfaces/mermaid.RenderResult.md @@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present. #### Defined in -[packages/mermaid/src/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L100) +[packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105) --- @@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. #### Defined in -[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90) +[packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95) --- @@ -63,4 +63,4 @@ The svg code for the rendered graph. #### Defined in -[packages/mermaid/src/types.ts:86](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L86) +[packages/mermaid/src/types.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L91) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 052fd3d14..9ddd81780 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -10,11 +10,18 @@ import { curveLinear } from 'd3'; import ELK from 'elkjs/lib/elk.bundled.js'; import { type TreeData, findCommonAncestor } from './find-common-ancestor.js'; -type Node = LayoutData['nodes'][0]; +type Node = LayoutData['nodes'][number]; + +interface LabelData { + width: number; + height: number; + wrappingWidth?: number; + labelNode?: SVGGElement | null; +} interface NodeWithVertex extends Omit { children?: unknown[]; - labelData?: any; + labelData?: LabelData; domId?: Node['domId'] | SVGGroup | d3.Selection; } @@ -45,7 +52,7 @@ export const render = async ( nodeArr: Node[], node: Node ) => { - const labelData: any = { width: 0, height: 0 }; + const labelData: LabelData = { width: 0, height: 0 }; const config = getConfig(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts b/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts index f394a4723..2deb9ec64 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.ts @@ -1,7 +1,7 @@ import { log } from '../../logger.js'; import { shapes } from './shapes.js'; -import type { Node } from '../types.js'; -import type { MermaidConfig, SVGGroup } from '../../mermaid.js'; +import type { Node, ShapeRenderOptions } from '../types.js'; +import type { SVGGroup } from '../../mermaid.js'; import type { D3Selection } from '../../types.js'; import { handleUndefinedAttr } from '../../utils.js'; import type { graphlib } from 'dagre-d3-es'; @@ -11,11 +11,7 @@ type NodeElement = D3Selection | Awaited>; const nodeElems = new Map(); -export async function insertNode( - elem: SVGGroup, - node: Node, - renderOptions: { config: MermaidConfig; dir: Node['dir'] } -) { +export async function insertNode(elem: SVGGroup, node: Node, renderOptions: ShapeRenderOptions) { let newEl: NodeElement | undefined; let el; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts index acda544e2..89beb85e0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts @@ -1,5 +1,5 @@ import type { Entries } from 'type-fest'; -import type { D3Selection } from '../../types.js'; +import type { D3Selection, MaybePromise } from '../../types.js'; import type { Node, ShapeRenderOptions } from '../types.js'; import { anchor } from './shapes/anchor.js'; import { bowTieRect } from './shapes/bowTieRect.js'; @@ -58,7 +58,6 @@ import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js'; import { waveRectangle } from './shapes/waveRectangle.js'; import { windowPane } from './shapes/windowPane.js'; -type MaybePromise = T | Promise; type ShapeHandler = ( parent: D3Selection, node: Node, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts index 1cdc72a70..92c9b2199 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts @@ -2,9 +2,10 @@ import { createText } from '../../createText.js'; import type { Node } from '../../types.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js'; import { select } from 'd3'; +import defaultConfig from '../../../defaultConfig.js'; import { evaluate, sanitizeText } from '../../../diagrams/common/common.js'; import { log } from '../../../logger.js'; -import { decodeEntities, handleUndefinedAttr } from '../../../utils.js'; +import { decodeEntities, handleUndefinedAttr, parseFontSize } from '../../../utils.js'; import type { D3Selection, Point } from '../../../types.js'; export const labelHelper = async ( @@ -78,10 +79,7 @@ export const labelHelper = async ( ? getConfig().fontSize : window.getComputedStyle(document.body).fontSize; const enlargingFactor = 5; - const parsedBodyFontSize = - typeof bodyFontSize === 'number' - ? bodyFontSize - : parseInt(bodyFontSize ?? '', 10); + const [parsedBodyFontSize = defaultConfig.fontSize] = parseFontSize(bodyFontSize); const width = parsedBodyFontSize * enlargingFactor + 'px'; img.style.minWidth = width; img.style.maxWidth = width; diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index da50aa7da..196773e6a 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -104,3 +104,10 @@ export interface RenderResult { */ bindFunctions?: (element: Element) => void; } + +/** + * Can be converted back to `T` by awaiting/`Awaited`. + * + * This is useful for function types that may be either synchronous or asynchronous. + */ +export type MaybePromise = T | Promise;