diff --git a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md index 498aee75d..441eb9209 100644 --- a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md +++ b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md @@ -16,7 +16,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11) +[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25) --- @@ -26,7 +26,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10) +[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24) --- @@ -36,4 +36,4 @@ #### Defined in -[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9) +[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23) diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index c139125f9..09fab149c 100644 --- a/docs/config/setup/interfaces/mermaid.Mermaid.md +++ b/docs/config/setup/interfaces/mermaid.Mermaid.md @@ -28,7 +28,7 @@ page. #### Defined in -[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) +[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) --- @@ -59,7 +59,7 @@ A graph definition key #### Defined in -[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) +[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) --- @@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run #### Defined in -[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427) +[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) --- @@ -116,50 +116,7 @@ This function should be called before the run function. #### Defined in -[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) - ---- - -### internalHelpers - -• **internalHelpers**: `Object` - -Internal helpers for mermaid - -**`Deprecated`** - -- This should not be used by external packages, as the definitions will change without notice. - -#### Type declaration - -| Name | Type | -| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `common` | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } | -| `common.evaluate` | (`val?`: `string` \| `boolean`) => `boolean` | -| `common.getMax` | (...`values`: `number`\[]) => `number` | -| `common.getMin` | (...`values`: `number`\[]) => `number` | -| `common.getRows` | (`s?`: `string`) => `string`\[] | -| `common.getUrl` | (`useAbsolute`: `boolean`) => `string` | -| `common.hasBreaks` | (`text`: `string`) => `boolean` | -| `common.lineBreakRegex` | `RegExp` | -| `common.removeScript` | (`txt`: `string`) => `string` | -| `common.sanitizeText` | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` | -| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] | -| `common.splitBreaks` | (`text`: `string`) => `string`\[] | -| `getConfig` | () => [`MermaidConfig`](mermaid.MermaidConfig.md) | -| `insertCluster` | (`elem`: `any`, `node`: `any`) => `Promise`<`any`> | -| `insertEdge` | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` } | -| `insertEdgeLabel` | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`> | -| `insertMarkers` | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void` | -| `insertNode` | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`> | -| `interpolateToCurve` | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory` | -| `labelHelper` | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }> | -| `log` | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`> | -| `positionEdgeLabel` | (`edge`: `any`, `paths`: `any`) => `void` | - -#### Defined in - -[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439) +[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) --- @@ -173,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in #### Defined in -[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421) +[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424) --- @@ -223,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422) +[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) --- @@ -233,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416) +[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) --- @@ -261,7 +218,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) +[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) --- @@ -285,7 +242,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429) +[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) --- @@ -311,7 +268,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423) +[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) --- @@ -359,7 +316,7 @@ Renders the mermaid diagrams #### Defined in -[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428) +[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) --- @@ -394,7 +351,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) +[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) --- @@ -404,4 +361,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415) +[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418) diff --git a/docs/config/setup/interfaces/mermaid.RenderOptions.md b/docs/config/setup/interfaces/mermaid.RenderOptions.md new file mode 100644 index 000000000..9319cb3b1 --- /dev/null +++ b/docs/config/setup/interfaces/mermaid.RenderOptions.md @@ -0,0 +1,19 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md). + +# Interface: RenderOptions + +[mermaid](../modules/mermaid.md).RenderOptions + +## Properties + +### algorithm + +• `Optional` **algorithm**: `string` + +#### Defined in + +[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8) diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md index 6fccdc454..aae004d6d 100644 --- a/docs/config/setup/interfaces/mermaid.RunOptions.md +++ b/docs/config/setup/interfaces/mermaid.RunOptions.md @@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored. #### Defined in -[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45) +[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48) --- @@ -44,7 +44,7 @@ A callback to call after each diagram is rendered. #### Defined in -[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49) +[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52) --- @@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"` #### Defined in -[packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41) +[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44) --- @@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false #### Defined in -[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53) +[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56) diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md index ac1bbece0..bdaeb05e1 100644 --- a/docs/config/setup/modules/mermaid.md +++ b/docs/config/setup/modules/mermaid.md @@ -20,11 +20,22 @@ - [MermaidConfig](../interfaces/mermaid.MermaidConfig.md) - [ParseOptions](../interfaces/mermaid.ParseOptions.md) - [ParseResult](../interfaces/mermaid.ParseResult.md) +- [RenderOptions](../interfaces/mermaid.RenderOptions.md) - [RenderResult](../interfaces/mermaid.RenderResult.md) - [RunOptions](../interfaces/mermaid.RunOptions.md) ## Type Aliases +### InternalHelpers + +Ƭ **InternalHelpers**: typeof `internalHelpers` + +#### Defined in + +[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33) + +--- + ### ParseErrorFunction Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void` @@ -48,6 +59,26 @@ [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10) +--- + +### SVG + +Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`> + +#### Defined in + +[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130) + +--- + +### SVGGroup + +Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`> + +#### Defined in + +[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132) + ## Variables ### default @@ -56,4 +87,4 @@ #### Defined in -[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) +[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440) diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index 7e61d5be0..fcd5f4e8a 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -31,13 +31,16 @@ ], "license": "MIT", "dependencies": { - "elkjs": "^0.9.3", - "d3": "^7.9.0" + "d3": "^7.9.0", + "elkjs": "^0.9.3" }, "peerDependencies": { "@mermaid-chart/mermaid": "workspace:^" }, "files": [ "dist" - ] + ], + "devDependencies": { + "@types/d3": "^7.4.3" + } } diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 5e2ce10a5..0fac3d867 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -1,287 +1,268 @@ -// @ts-nocheck File not ready to check types import { curveLinear } from 'd3'; import ELK from 'elkjs/lib/elk.bundled.js'; -import mermaid from '@mermaid-chart/mermaid'; -import { type LayoutData } from '@mermaid-chart/mermaid'; +import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid'; import { type TreeData, findCommonAncestor } from './find-common-ancestor.js'; -const { - common, - getConfig, - insertCluster, - insertEdge, - insertEdgeLabel, - insertMarkers, - insertNode, - interpolateToCurve, - labelHelper, - log, - positionEdgeLabel, -} = mermaid.internalHelpers; -// import { insertEdge } from '../../mermaid/src/rendering-util/rendering-elements/edges.js'; -const nodeDb = {}; -const portPos = {}; -const clusterDb = {}; +export const render = async ( + data4Layout: LayoutData, + svg: SVG, + element: any, + { + common, + getConfig, + insertCluster, + insertEdge, + insertEdgeLabel, + insertMarkers, + insertNode, + interpolateToCurve, + labelHelper, + log, + positionEdgeLabel, + }: InternalHelpers, + { algorithm }: RenderOptions +) => { + const nodeDb: Record = {}; + const clusterDb: Record = {}; -export const addVertex = async (nodeEl, graph, nodeArr, node) => { - const labelData = { width: 0, height: 0 }; - // const ports = [ - // { - // id: node.id + '-west', - // layoutOptions: { - // 'port.side': 'WEST', - // }, - // }, - // { - // id: node.id + '-east', - // layoutOptions: { - // 'port.side': 'EAST', - // }, - // }, - // { - // id: node.id + '-south', - // layoutOptions: { - // 'port.side': 'SOUTH', - // }, - // }, - // { - // id: node.id + '-north', - // layoutOptions: { - // 'port.side': 'NORTH', - // }, - // }, - // ]; + const addVertex = async (nodeEl: any, graph: { children: any[] }, nodeArr: any, node: any) => { + const labelData: any = { width: 0, height: 0 }; - let boundingBox; - const child = { - ...node, - // ports: node.shape === 'diamond' ? ports : [], - }; - graph.children.push(child); - nodeDb[node.id] = child; + let boundingBox; + const child = { + ...node, + }; + graph.children.push(child); + nodeDb[node.id] = child; - // Add the element to the DOM - if (!node.isGroup) { - const childNodeEl = await insertNode(nodeEl, node, node.dir); - boundingBox = childNodeEl.node().getBBox(); - child.domId = childNodeEl; - child.width = boundingBox.width; - child.height = boundingBox.height; - } else { - // A subgraph - child.children = []; - await addVertices(nodeEl, nodeArr, child, node.id); - - if (node.label) { - const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true); - labelData.width = bbox.width; - labelData.wrappingWidth = getConfig().flowchart.wrappingWidth; - // Give some padding for elk - labelData.height = bbox.height - 2; - labelData.labelNode = shapeSvg.node(); - // We need the label hight to be able to size the subgraph; - shapeSvg.remove(); + // Add the element to the DOM + if (!node.isGroup) { + const childNodeEl = await insertNode(nodeEl, node, node.dir); + boundingBox = childNodeEl.node().getBBox(); + child.domId = childNodeEl; + child.width = boundingBox.width; + child.height = boundingBox.height; } else { - // Subgraph without label - labelData.width = 0; - labelData.height = 0; + // A subgraph + child.children = []; + await addVertices(nodeEl, nodeArr, child, node.id); + + if (node.label) { + // @ts-ignore TODO: fix this + const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true); + labelData.width = bbox.width; + labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth; + // Give some padding for elk + labelData.height = bbox.height - 2; + labelData.labelNode = shapeSvg.node(); + // We need the label hight to be able to size the subgraph; + shapeSvg.remove(); + } else { + // Subgraph without label + labelData.width = 0; + labelData.height = 0; + } + child.labelData = labelData; + child.domId = nodeEl; } - child.labelData = labelData; - child.domId = nodeEl; - } -}; + }; -export const addVertices = async function (nodeEl, nodeArr, graph, parentId) { - const siblings = nodeArr.filter((node) => node.parentId === parentId); - log.info('addVertices APA12', siblings, parentId); - // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition - await Promise.all( - siblings.map(async (node) => { - await addVertex(nodeEl, graph, nodeArr, node); - }) - ); - return graph; -}; + const addVertices = async function ( + nodeEl: any, + nodeArr: any[], + graph: { + id: string; + layoutOptions: { + 'elk.hierarchyHandling': string; + 'elk.algorithm': any; + 'nodePlacement.strategy': any; + 'elk.layered.mergeEdges': any; + 'elk.direction': string; + 'spacing.baseValue': number; + }; + children: never[]; + edges: never[]; + }, + parentId?: undefined + ) { + const siblings = nodeArr.filter((node: { parentId: any }) => node.parentId === parentId); + log.info('addVertices APA12', siblings, parentId); + // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition + await Promise.all( + siblings.map(async (node: any) => { + await addVertex(nodeEl, graph, nodeArr, node); + }) + ); + return graph; + }; -const drawNodes = async (relX, relY, nodeArray, svg, subgraphsEl, depth) => { - await Promise.all( - nodeArray.map(async function (node) { - if (node) { - nodeDb[node.id] = node; - nodeDb[node.id].offset = { - posX: node.x + relX, - posY: node.y + relY, - x: relX, - y: relY, - depth, - width: Math.max(node.width, node.labels ? node.labels[0]?.width || 0 : 0), - height: node.height, - }; - if (node.isGroup) { - log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData); - const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph'); - // TODO use faster way of cloning - const clusterNode = JSON.parse(JSON.stringify(node)); - clusterNode.x = node.offset.posX + node.width / 2; - clusterNode.y = node.offset.posY + node.height / 2; - await insertCluster(subgraphEl, clusterNode); + const drawNodes = async ( + relX: number, + relY: number, + nodeArray: any[], + svg: any, + subgraphsEl: SVGGroup, + depth: number + ) => { + await Promise.all( + nodeArray.map(async function (node: { + id: string | number; + x: any; + y: any; + width: number; + labels: { width: any }[]; + height: number; + isGroup: any; + labelData: any; + offset: { posX: number; posY: number }; + shape: any; + domId: { node: () => any; attr: (arg0: string, arg1: string) => void }; + }) { + if (node) { + nodeDb[node.id] = node; + nodeDb[node.id].offset = { + posX: node.x + relX, + posY: node.y + relY, + x: relX, + y: relY, + depth, + width: Math.max(node.width, node.labels ? node.labels[0]?.width || 0 : 0), + height: node.height, + }; + if (node.isGroup) { + log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData); + const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph'); + // TODO use faster way of cloning + const clusterNode = JSON.parse(JSON.stringify(node)); + clusterNode.x = node.offset.posX + node.width / 2; + clusterNode.y = node.offset.posY + node.height / 2; + await insertCluster(subgraphEl, clusterNode); - log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels); - } else { - log.info( - 'Id NODE = ', - node.id, - node.x, - node.y, - relX, - relY, - node.domId.node(), - `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})` - ); - node.domId.attr( - 'transform', - `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})` - ); + log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels); + } else { + log.info( + 'Id NODE = ', + node.id, + node.x, + node.y, + relX, + relY, + node.domId.node(), + `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})` + ); + node.domId.attr( + 'transform', + `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})` + ); + } } - } - }) - ); - - await Promise.all( - nodeArray.map(async function (node) { - if (node?.isGroup) { - await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1); - } - }) - ); -}; - -const getNextPort = (node, edgeDirection, graphDirection) => { - log.info('getNextPort abc88', { node, edgeDirection, graphDirection }); - if (!portPos[node]) { - switch (graphDirection) { - case 'TB': - case 'TD': - portPos[node] = { - inPosition: 'north', - outPosition: 'south', - }; - break; - case 'BT': - portPos[node] = { - inPosition: 'south', - outPosition: 'north', - }; - break; - case 'RL': - portPos[node] = { - inPosition: 'east', - outPosition: 'west', - }; - break; - case 'LR': - portPos[node] = { - inPosition: 'west', - outPosition: 'east', - }; - break; - } - } - const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition; - - if (edgeDirection === 'in') { - portPos[node].inPosition = getNextPosition( - portPos[node].inPosition, - edgeDirection, - graphDirection + }) ); - } else { - portPos[node].outPosition = getNextPosition( - portPos[node].outPosition, - edgeDirection, - graphDirection - ); - } - return result; -}; -const addSubGraphs = (nodeArr): TreeData => { - const parentLookupDb: TreeData = { parentById: {}, childrenById: {} }; - const subgraphs = nodeArr.filter((node) => node.isGroup); - log.info('Subgraphs - ', subgraphs); - subgraphs.forEach((subgraph) => { - const children = nodeArr.filter((node) => node.parentId === subgraph.id); - children.forEach((node) => { - parentLookupDb.parentById[node.id] = subgraph.id; - if (parentLookupDb.childrenById[subgraph.id] === undefined) { - parentLookupDb.childrenById[subgraph.id] = []; - } - parentLookupDb.childrenById[subgraph.id].push(node); + await Promise.all( + nodeArray.map(async function (node: { isGroup: any; x: any; y: any; children: any }) { + if (node?.isGroup) { + await drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1); + } + }) + ); + }; + + const addSubGraphs = (nodeArr: any[]): TreeData => { + const parentLookupDb: TreeData = { parentById: {}, childrenById: {} }; + const subgraphs = nodeArr.filter((node: { isGroup: any }) => node.isGroup); + log.info('Subgraphs - ', subgraphs); + subgraphs.forEach((subgraph: { id: string }) => { + const children = nodeArr.filter((node: { parentId: any }) => node.parentId === subgraph.id); + children.forEach((node: any) => { + parentLookupDb.parentById[node.id] = subgraph.id; + if (parentLookupDb.childrenById[subgraph.id] === undefined) { + parentLookupDb.childrenById[subgraph.id] = []; + } + parentLookupDb.childrenById[subgraph.id].push(node); + }); }); - }); - subgraphs.forEach(function (subgraph) { - const data = { id: subgraph.id }; - if (parentLookupDb.parentById[subgraph.id] !== undefined) { - data.parent = parentLookupDb.parentById[subgraph.id]; + subgraphs.forEach(function (subgraph: { id: string | number }) { + const data: any = { id: subgraph.id }; + if (parentLookupDb.parentById[subgraph.id] !== undefined) { + data.parent = parentLookupDb.parentById[subgraph.id]; + } + }); + return parentLookupDb; + }; + + const getEdgeStartEndPoint = (edge: any) => { + const source: any = edge.start; + const target: any = edge.end; + + // Save the original source and target + const sourceId = source; + const targetId = target; + + const startNode = nodeDb[edge.start.id]; + const endNode = nodeDb[edge.end.id]; + + if (!startNode || !endNode) { + return { source, target }; } - }); - return parentLookupDb; -}; -const getEdgeStartEndPoint = (edge, dir) => { - let source = edge.start; - let target = edge.end; + // Add the edge to the graph + return { source, target, sourceId, targetId }; + }; - // Save the original source and target - const sourceId = source; - const targetId = target; + const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData) { + const ancestor = findCommonAncestor(src, dest, parentLookupDb); + if (ancestor === undefined || ancestor === 'root') { + return { x: 0, y: 0 }; + } - const startNode = nodeDb[edge.start.id]; - const endNode = nodeDb[edge.end.id]; + const ancestorOffset = nodeDb[ancestor].offset; + return { x: ancestorOffset.posX, y: ancestorOffset.posY }; + }; - if (!startNode || !endNode) { - return { source, target }; - } + /** + * Add edges to graph based on parsed graph definition + */ + const addEdges = async function ( + dataForLayout: { edges: any; direction: string }, + graph: { + id?: string; + layoutOptions?: { + 'elk.hierarchyHandling': string; + 'elk.algorithm': any; + 'nodePlacement.strategy': any; + 'elk.layered.mergeEdges': any; + 'elk.direction': string; + 'spacing.baseValue': number; + }; + children?: never[]; + edges: any; + }, + svg: SVG + ) { + log.info('abc78 DAGA edges = ', dataForLayout); + const edges = dataForLayout.edges; + const labelsEl = svg.insert('g').attr('class', 'edgeLabels'); + const linkIdCnt: any = {}; + const dir = dataForLayout.direction || 'DOWN'; + let defaultStyle: string | undefined; + let defaultLabelStyle: string | undefined; - if (startNode.shape === 'diamond') { - source = `${source}-${getNextPort(source, 'out', dir)}`; - } - - if (endNode.shape === 'diamond') { - target = `${target}-${getNextPort(target, 'in', dir)}`; - } - - // Add the edge to the graph - return { source, target, sourceId, targetId }; -}; - -const calcOffset = function (src: string, dest: string, parentLookupDb: TreeData) { - const ancestor = findCommonAncestor(src, dest, parentLookupDb); - if (ancestor === undefined || ancestor === 'root') { - return { x: 0, y: 0 }; - } - - const ancestorOffset = nodeDb[ancestor].offset; - return { x: ancestorOffset.posX, y: ancestorOffset.posY }; -}; - -/** - * Add edges to graph based on parsed graph definition - */ -export const addEdges = async function (dataForLayout, graph, svg) { - log.info('abc78 DAGA edges = ', dataForLayout); - const edges = dataForLayout.edges; - const labelsEl = svg.insert('g').attr('class', 'edgeLabels'); - const linkIdCnt = {}; - const dir = dataForLayout.direction || 'DOWN'; - let defaultStyle; - let defaultLabelStyle; - - await Promise.all( - edges.map(async function (edge) { - const linkId = edge.id; - if (!edge.id) { + await Promise.all( + edges.map(async function (edge: { + id: string; + start: string; + end: string; + length: number; + text: undefined; + label: any; + type: string; + stroke: any; + interpolate: undefined; + style: undefined; + labelType: any; + }) { // Identify Link const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end; // count the links from+to the same node to give unique id @@ -294,178 +275,476 @@ export const addEdges = async function (dataForLayout, graph, svg) { } const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase]; edge.id = linkId; - // log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]); - } + log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]); + const linkNameStart = 'LS_' + edge.start; + const linkNameEnd = 'LE_' + edge.end; - const linkNameStart = 'LS_' + edge.start; - const linkNameEnd = 'LE_' + edge.end; - - const edgeData = { style: '', labelStyle: '' }; - edgeData.minlen = edge.length || 1; - edge.text = edge.label; - // Set link type for rendering - if (edge.type === 'arrow_open') { - edgeData.arrowhead = 'none'; - } else { - edgeData.arrowhead = 'normal'; - } - - // Check of arrow types, placed here in order not to break old rendering - edgeData.arrowTypeStart = 'arrow_open'; - edgeData.arrowTypeEnd = 'arrow_open'; - - /* eslint-disable no-fallthrough */ - switch (edge.type) { - case 'double_arrow_cross': - edgeData.arrowTypeStart = 'arrow_cross'; - case 'arrow_cross': - edgeData.arrowTypeEnd = 'arrow_cross'; - break; - case 'double_arrow_point': - edgeData.arrowTypeStart = 'arrow_point'; - case 'arrow_point': - edgeData.arrowTypeEnd = 'arrow_point'; - break; - case 'double_arrow_circle': - edgeData.arrowTypeStart = 'arrow_circle'; - case 'arrow_circle': - edgeData.arrowTypeEnd = 'arrow_circle'; - break; - } - - let style = ''; - let labelStyle = ''; - - switch (edge.stroke) { - case 'normal': - style = 'fill:none;'; - if (defaultStyle !== undefined) { - style = defaultStyle; - } - if (defaultLabelStyle !== undefined) { - labelStyle = defaultLabelStyle; - } - edgeData.thickness = 'normal'; - edgeData.pattern = 'solid'; - break; - case 'dotted': - edgeData.thickness = 'normal'; - edgeData.pattern = 'dotted'; - edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;'; - break; - case 'thick': - edgeData.thickness = 'thick'; - edgeData.pattern = 'solid'; - edgeData.style = 'stroke-width: 3.5px;fill:none;'; - break; - } - - edgeData.style = edgeData.style += style; - edgeData.labelStyle = edgeData.labelStyle += labelStyle; - - const conf = getConfig(); - if (edge.interpolate !== undefined) { - edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); - } else if (edges.defaultInterpolate !== undefined) { - edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); - } else { - edgeData.curve = interpolateToCurve(conf.curve, curveLinear); - } - - if (edge.text === undefined) { - if (edge.style !== undefined) { - edgeData.arrowheadStyle = 'fill: #333'; + const edgeData: any = { style: '', labelStyle: '' }; + edgeData.minlen = edge.length || 1; + edge.text = edge.label; + // Set link type for rendering + if (edge.type === 'arrow_open') { + edgeData.arrowhead = 'none'; + } else { + edgeData.arrowhead = 'normal'; } - } else { - edgeData.arrowheadStyle = 'fill: #333'; - edgeData.labelpos = 'c'; - } - edgeData.labelType = edge.labelType; - edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n'); + // Check of arrow types, placed here in order not to break old rendering + edgeData.arrowTypeStart = 'arrow_open'; + edgeData.arrowTypeEnd = 'arrow_open'; - if (edge.style === undefined) { - edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; - } + /* eslint-disable no-fallthrough */ + switch (edge.type) { + case 'double_arrow_cross': + edgeData.arrowTypeStart = 'arrow_cross'; + case 'arrow_cross': + edgeData.arrowTypeEnd = 'arrow_cross'; + break; + case 'double_arrow_point': + edgeData.arrowTypeStart = 'arrow_point'; + case 'arrow_point': + edgeData.arrowTypeEnd = 'arrow_point'; + break; + case 'double_arrow_circle': + edgeData.arrowTypeStart = 'arrow_circle'; + case 'arrow_circle': + edgeData.arrowTypeEnd = 'arrow_circle'; + break; + } - edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); + let style = ''; + let labelStyle = ''; - edgeData.id = linkId; - edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; + switch (edge.stroke) { + case 'normal': + style = 'fill:none;'; + if (defaultStyle !== undefined) { + style = defaultStyle; + } + if (defaultLabelStyle !== undefined) { + labelStyle = defaultLabelStyle; + } + edgeData.thickness = 'normal'; + edgeData.pattern = 'solid'; + break; + case 'dotted': + edgeData.thickness = 'normal'; + edgeData.pattern = 'dotted'; + edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;'; + break; + case 'thick': + edgeData.thickness = 'thick'; + edgeData.pattern = 'solid'; + edgeData.style = 'stroke-width: 3.5px;fill:none;'; + break; + } - const labelEl = await insertEdgeLabel(labelsEl, edgeData); + edgeData.style = edgeData.style += style; + edgeData.labelStyle = edgeData.labelStyle += labelStyle; - // calculate start and end points of the edge, note that the source and target - // can be modified for shapes that have ports - const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir); - log.debug('abc78 source and target', source, target); - // Add the edge to the graph - graph.edges.push({ - id: 'e' + edge.start + edge.end, - ...edge, - sources: [source], - targets: [target], - sourceId, - targetId, - labelEl: labelEl, - labels: [ - { - width: edgeData.width, - height: edgeData.height, - orgWidth: edgeData.width, - orgHeight: edgeData.height, - text: edgeData.label, - layoutOptions: { - 'edgeLabels.inline': 'true', - 'edgeLabels.placement': 'CENTER', + const conf = getConfig(); + if (edge.interpolate !== undefined) { + edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); + } else if (edges.defaultInterpolate !== undefined) { + edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); + } else { + // @ts-ignore TODO: fix this + edgeData.curve = interpolateToCurve(conf.curve, curveLinear); + } + + if (edge.text === undefined) { + if (edge.style !== undefined) { + edgeData.arrowheadStyle = 'fill: #333'; + } + } else { + edgeData.arrowheadStyle = 'fill: #333'; + edgeData.labelpos = 'c'; + } + + edgeData.labelType = edge.labelType; + edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n'); + + if (edge.style === undefined) { + edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;'; + } + + edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:'); + + edgeData.id = linkId; + edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd; + + const labelEl = await insertEdgeLabel(labelsEl, edgeData); + + // calculate start and end points of the edge, note that the source and target + // can be modified for shapes that have ports + const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir); + log.debug('abc78 source and target', source, target); + // Add the edge to the graph + graph.edges.push({ + // @ts-ignore TODO: fix this + id: 'e' + edge.start + edge.end, + ...edge, + sources: [source], + targets: [target], + sourceId, + targetId, + labelEl: labelEl, + labels: [ + { + width: edgeData.width, + height: edgeData.height, + orgWidth: edgeData.width, + orgHeight: edgeData.height, + text: edgeData.label, + layoutOptions: { + 'edgeLabels.inline': 'true', + 'edgeLabels.placement': 'CENTER', + }, }, - }, - ], - edgeData, + ], + edgeData, + }); + }) + ); + return graph; + }; + + function dir2ElkDirection(dir: any) { + switch (dir) { + case 'LR': + return 'RIGHT'; + case 'RL': + return 'LEFT'; + case 'TB': + return 'DOWN'; + case 'BT': + return 'UP'; + default: + return 'DOWN'; + } + } + + function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) { + const node = nodeDb[nodeId]; + + if (!node) { + return; + } + if (node?.layoutOptions === undefined) { + node.layoutOptions = {}; + } + node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN'; + if (node.id !== ancestorId) { + setIncludeChildrenPolicy(node.parentId, ancestorId); + } + } + + function intersectLine( + p1: { y: number; x: number }, + p2: { y: number; x: number }, + q1: { x: any; y: any }, + q2: { x: any; y: any } + ) { + log.debug('UIO intersectLine', p1, p2, q1, q2); + // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994, + // p7 and p473. + + // let a1, a2, b1, b2, c1, c2; + // let r1, r2, r3, r4; + // let denom, offset, num; + // let x, y; + + // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x + + // b1 y + c1 = 0. + const a1 = p2.y - p1.y; + const b1 = p1.x - p2.x; + const c1 = p2.x * p1.y - p1.x * p2.y; + + // Compute r3 and r4. + const r3 = a1 * q1.x + b1 * q1.y + c1; + const r4 = a1 * q2.x + b1 * q2.y + c1; + + // Check signs of r3 and r4. If both point 3 and point 4 lie on + // same side of line 1, the line segments do not intersect. + if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { + return /*DON'T_INTERSECT*/; + } + + // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0 + const a2 = q2.y - q1.y; + const b2 = q1.x - q2.x; + const c2 = q2.x * q1.y - q1.x * q2.y; + + // Compute r1 and r2 + const r1 = a2 * p1.x + b2 * p1.y + c2; + const r2 = a2 * p2.x + b2 * p2.y + c2; + + // Check signs of r1 and r2. If both point 1 and point 2 lie + // on same side of second line segment, the line segments do + // not intersect. + if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { + return /*DON'T_INTERSECT*/; + } + + // Line segments intersect: compute intersection point. + const denom = a1 * b2 - a2 * b1; + if (denom === 0) { + return /*COLLINEAR*/; + } + + const offset = Math.abs(denom / 2); + + // The denom/2 is to get rounding instead of truncating. It + // is added or subtracted to the numerator, depending upon the + // sign of the numerator. + let num = b1 * c2 - b2 * c1; + const x = num < 0 ? (num - offset) / denom : (num + offset) / denom; + + num = a2 * c1 - a1 * c2; + const y = num < 0 ? (num - offset) / denom : (num + offset) / denom; + + return { x: x, y: y }; + } + + function sameSign(r1: number, r2: number) { + return r1 * r2 > 0; + } + const diamondIntersection = ( + bounds: { x: any; y: any; width: any; height: any }, + outsidePoint: { x: number; y: number }, + insidePoint: any + ) => { + const x1 = bounds.x; + const y1 = bounds.y; + + const w = bounds.width; //+ bounds.padding; + const h = bounds.height; // + bounds.padding; + + const polyPoints = [ + { x: x1, y: y1 - h / 2 }, + { x: x1 + w / 2, y: y1 }, + { x: x1, y: y1 + h / 2 }, + { x: x1 - w / 2, y: y1 }, + ]; + log.debug( + `UIO diamondIntersection calc abc89: + outsidePoint: ${JSON.stringify(outsidePoint)} + insidePoint : ${JSON.stringify(insidePoint)} + node : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`, + polyPoints + ); + + const intersections = []; + + let minX = Number.POSITIVE_INFINITY; + let minY = Number.POSITIVE_INFINITY; + + polyPoints.forEach(function (entry) { + minX = Math.min(minX, entry.x); + minY = Math.min(minY, entry.y); + }); + + // const left = x1 - w / 2; + // const top = y1 + h / 2; + + for (let i = 0; i < polyPoints.length; i++) { + const p1 = polyPoints[i]; + const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0]; + const intersect = intersectLine( + bounds, + outsidePoint, + { x: p1.x, y: p1.y }, + { x: p2.x, y: p2.y } + ); + + if (intersect) { + intersections.push(intersect); + } + } + + if (!intersections.length) { + return bounds; + } + + log.debug('UIO intersections', intersections); + + if (intersections.length > 1) { + // More intersections, find the one nearest to edge end point + intersections.sort(function (p, q) { + const pdx = p.x - outsidePoint.x; + const pdy = p.y - outsidePoint.y; + const distp = Math.sqrt(pdx * pdx + pdy * pdy); + + const qdx = q.x - outsidePoint.x; + const qdy = q.y - outsidePoint.y; + const distq = Math.sqrt(qdx * qdx + qdy * qdy); + + return distp < distq ? -1 : distp === distq ? 0 : 1; }); - }) - ); - return graph; -}; + } -function dir2ElkDirection(dir) { - switch (dir) { - case 'LR': - return 'RIGHT'; - case 'RL': - return 'LEFT'; - case 'TB': - return 'DOWN'; - case 'BT': - return 'UP'; - default: - return 'DOWN'; - } -} + return intersections[0]; + }; -function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) { - const node = nodeDb[nodeId]; + const intersection = ( + node: { x: any; y: any; width: number; height: number }, + outsidePoint: { x: number; y: number }, + insidePoint: { x: number; y: number } + ) => { + log.debug(`intersection calc abc89: + outsidePoint: ${JSON.stringify(outsidePoint)} + insidePoint : ${JSON.stringify(insidePoint)} + node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`); + const x = node.x; + const y = node.y; - if (!node) { - return; - } - if (node?.layoutOptions === undefined) { - node.layoutOptions = {}; - } - node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN'; - if (node.id !== ancestorId) { - setIncludeChildrenPolicy(node.parentId, ancestorId); - } -} + const dx = Math.abs(x - insidePoint.x); + // const dy = Math.abs(y - insidePoint.y); + const w = node.width / 2; + let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx; + const h = node.height / 2; -export const render = async (data4Layout: LayoutData, svg, element, algorithm) => { + const Q = Math.abs(outsidePoint.y - insidePoint.y); + const R = Math.abs(outsidePoint.x - insidePoint.x); + + if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { + // Intersection is top or bottom of rect. + const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; + r = (R * q) / Q; + const res = { + x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r, + y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q, + }; + + if (r === 0) { + res.x = outsidePoint.x; + res.y = outsidePoint.y; + } + if (R === 0) { + res.x = outsidePoint.x; + } + if (Q === 0) { + res.y = outsidePoint.y; + } + + log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line + + return res; + } else { + // Intersection onn sides of rect + if (insidePoint.x < outsidePoint.x) { + r = outsidePoint.x - w - x; + } else { + // r = outsidePoint.x - w - x; + r = x - w - outsidePoint.x; + } + const q = (Q * r) / R; + // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w; + // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; + let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r; + // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; + let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q; + log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y }); + if (r === 0) { + _x = outsidePoint.x; + _y = outsidePoint.y; + } + if (R === 0) { + _x = outsidePoint.x; + } + if (Q === 0) { + _y = outsidePoint.y; + } + + return { x: _x, y: _y }; + } + }; + const outsideNode = ( + node: { x: any; y: any; width: number; height: number }, + point: { x: number; y: number } + ) => { + const x = node.x; + const y = node.y; + const dx = Math.abs(point.x - x); + const dy = Math.abs(point.y - y); + const w = node.width / 2; + const h = node.height / 2; + if (dx >= w || dy >= h) { + return true; + } + return false; + }; + /** + * This function will page a path and node where the last point(s) in the path is inside the node + * and return an update path ending by the border of the node. + */ + const cutPathAtIntersect = ( + _points: any[], + bounds: { x: any; y: any; width: any; height: any; padding: any }, + isDiamond: boolean + ) => { + log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond); + const points: any[] = []; + let lastPointOutside = _points[0]; + let isInside = false; + _points.forEach((point: any) => { + // const node = clusterDb[edge.toCluster].node; + log.debug(' checking point', point, bounds); + + // check if point is inside the boundary rect + if (!outsideNode(bounds, point) && !isInside) { + // First point inside the rect found + // Calc the intersection coord between the point anf the last point outside the rect + let inter; + + if (isDiamond) { + const inter2 = diamondIntersection(bounds, lastPointOutside, point); + const distance = Math.sqrt( + (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2 + ); + if (distance > 1) { + inter = inter2; + } + } + if (!inter) { + inter = intersection(bounds, lastPointOutside, point); + } + + // Check case where the intersection is the same as the last point + let pointPresent = false; + points.forEach((p) => { + pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y); + }); + // if (!pointPresent) { + if (!points.some((e) => e.x === inter.x && e.y === inter.y)) { + points.push(inter); + } else { + log.debug('abc88 no intersect', inter, points); + } + // points.push(inter); + isInside = true; + } else { + // Outside + log.debug('abc88 outside', point, lastPointOutside, points); + lastPointOutside = point; + // points.push(point); + if (!isInside) { + points.push(point); + } + } + }); + log.debug('returning points', points); + return points; + }; + + // @ts-ignore - ELK is not typed const elk = new ELK(); // Add the arrowheads to the svg insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId); // Setup the graph with the layout options and the data for the layout - let elkGraph = { + let elkGraph: any = { id: 'root', layoutOptions: { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', @@ -494,7 +773,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) = // Create the lookup db for the subgraphs and their children to used when creating // the tree structured graph - const parentLookupDb = addSubGraphs(data4Layout.nodes); + const parentLookupDb: any = addSubGraphs(data4Layout.nodes); // Add elements in the svg to be used to hold the subgraphs container // elements and the nodes @@ -515,7 +794,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) = // Iterate through all nodes and add the top level nodes to the graph const nodes = data4Layout.nodes; - nodes.forEach((n) => { + nodes.forEach((n: { id: string | number }) => { const node = nodeDb[n.id]; // Subgraph @@ -549,7 +828,7 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) = delete node.height; } }); - elkGraph.edges.forEach((edge) => { + elkGraph.edges.forEach((edge: any) => { const source = edge.sources[0]; const target = edge.targets[0]; @@ -565,438 +844,149 @@ export const render = async (data4Layout: LayoutData, svg, element, algorithm) = // debugger; await drawNodes(0, 0, g.children, svg, subGraphsEl, 0); - g.edges?.map((edge) => { - // (elem, edge, clusterDb, diagramType, graph, id) - const startNode = nodeDb[edge.sources[0]]; - const startCluster = parentLookupDb[edge.sources[0]]; - const endNode = nodeDb[edge.targets[0]]; - const sourceId = edge.start; - const targetId = edge.end; + g.edges?.map( + (edge: { + sources: (string | number)[]; + targets: (string | number)[]; + start: any; + end: any; + sections: { startPoint: any; endPoint: any; bendPoints: any }[]; + points: any[]; + x: any; + labels: { height: number; width: number; x: number; y: number }[]; + y: any; + }) => { + // (elem, edge, clusterDb, diagramType, graph, id) + const startNode = nodeDb[edge.sources[0]]; + const startCluster = parentLookupDb[edge.sources[0]]; + const endNode = nodeDb[edge.targets[0]]; + const sourceId = edge.start; + const targetId = edge.end; - const offset = calcOffset(sourceId, targetId, parentLookupDb); - log.debug( - 'offset', - offset, - sourceId, - ' ==> ', - targetId, - 'edge:', - edge, - 'cluster:', - startCluster, - startNode - ); - if (edge.sections) { - const src = edge.sections[0].startPoint; - const dest = edge.sections[0].endPoint; - const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : []; - - const segPoints = segments.map((segment) => { - return { x: segment.x + offset.x, y: segment.y + offset.y }; - }); - edge.points = [ - { x: src.x + offset.x, y: src.y + offset.y }, - ...segPoints, - { x: dest.x + offset.x, y: dest.y + offset.y }, - ]; - - let sw = startNode.width; - let ew = endNode.width; - if (startNode.isGroup) { - const bbox = startNode.domId.node().getBBox(); - // sw = Math.max(bbox.width, startNode.width, startNode.labels[0].width); - sw = Math.max(startNode.width, startNode.labels[0].width + startNode.padding); - // sw = startNode.width; - log.debug( - 'UIO width', - startNode.id, - startNode.with, - 'bbox.width=', - bbox.width, - 'lw=', - startNode.labels[0].width, - 'node:', - startNode.width, - 'SW = ', - sw - // 'HTML:', - // startNode.domId.node().innerHTML - ); - } - if (endNode.isGroup) { - const bbox = endNode.domId.node().getBBox(); - ew = Math.max(endNode.width, endNode.labels[0].width + endNode.padding); - - log.debug( - 'UIO width', - startNode.id, - startNode.with, - bbox.width, - 'EW = ', - ew, - 'HTML:', - startNode.innerHTML - ); - } - if (startNode.shape === 'diamond') { - edge.points.unshift({ - x: startNode.x + startNode.width / 2 + offset.x, - y: startNode.y + startNode.height / 2 + offset.y, - }); - } - if (endNode.shape === 'diamond') { - edge.points.push({ - x: endNode.x + endNode.width / 2 + offset.x, - y: endNode.y + endNode.height / 2 + offset.y, - }); - } - - edge.points = cutPathAtIntersect( - edge.points.reverse(), - { - x: startNode.x + startNode.width / 2 + offset.x, - y: startNode.y + startNode.height / 2 + offset.y, - width: sw, - height: startNode.height, - padding: startNode.padding, - }, - startNode.shape === 'diamond' - ).reverse(); - - edge.points = cutPathAtIntersect( - edge.points, - { - x: endNode.x + ew / 2 + endNode.offset.x, - y: endNode.y + endNode.height / 2 + endNode.offset.y, - width: ew, - height: endNode.height, - padding: endNode.padding, - }, - endNode.shape === 'diamond' - ); - - const paths = insertEdge( - edgesEl, + const offset = calcOffset(sourceId, targetId, parentLookupDb); + log.debug( + 'offset', + offset, + sourceId, + ' ==> ', + targetId, + 'edge:', edge, - clusterDb, - data4Layout.type, - startNode, - endNode, - data4Layout.diagramId + 'cluster:', + startCluster, + startNode ); - log.info('APA12 edge points after insert', JSON.stringify(edge.points)); + if (edge.sections) { + const src = edge.sections[0].startPoint; + const dest = edge.sections[0].endPoint; + const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : []; - edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; - edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; - positionEdgeLabel(edge, paths); - } - // const src = edge.sections[0].startPoint; - // const dest = edge.sections[0].endPoint; - // const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : []; + const segPoints = segments.map((segment: { x: any; y: any }) => { + return { x: segment.x + offset.x, y: segment.y + offset.y }; + }); + edge.points = [ + { x: src.x + offset.x, y: src.y + offset.y }, + ...segPoints, + { x: dest.x + offset.x, y: dest.y + offset.y }, + ]; - // const segPoints = segments.map((segment) => { - // return { x: segment.x + offset.x, y: segment.y + offset.y }; - // }); - // edge.points = [ - // { x: src.x + offset.x, y: src.y + offset.y }, - // ...segPoints, - // { x: dest.x + offset.x, y: dest.y + offset.y }, - // ]; - // const paths = insertEdge( - // edgesEl, - // edge, - // clusterDb, - // data4Layout.type, - // startNode, - // endNode, - // data4Layout.diagramId - // ); - // log.info('APA12 edge points after insert', JSON.stringify(edge.points)); - - // edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; - // edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; - // positionEdgeLabel(edge, paths); - }); -}; - -function intersectLine(p1, p2, q1, q2) { - log.debug('UIO intersectLine', p1, p2, q1, q2); - // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994, - // p7 and p473. - - // let a1, a2, b1, b2, c1, c2; - // let r1, r2, r3, r4; - // let denom, offset, num; - // let x, y; - - // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x + - // b1 y + c1 = 0. - const a1 = p2.y - p1.y; - const b1 = p1.x - p2.x; - const c1 = p2.x * p1.y - p1.x * p2.y; - - // Compute r3 and r4. - const r3 = a1 * q1.x + b1 * q1.y + c1; - const r4 = a1 * q2.x + b1 * q2.y + c1; - - // Check signs of r3 and r4. If both point 3 and point 4 lie on - // same side of line 1, the line segments do not intersect. - if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { - return /*DON'T_INTERSECT*/; - } - - // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0 - const a2 = q2.y - q1.y; - const b2 = q1.x - q2.x; - const c2 = q2.x * q1.y - q1.x * q2.y; - - // Compute r1 and r2 - const r1 = a2 * p1.x + b2 * p1.y + c2; - const r2 = a2 * p2.x + b2 * p2.y + c2; - - // Check signs of r1 and r2. If both point 1 and point 2 lie - // on same side of second line segment, the line segments do - // not intersect. - if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { - return /*DON'T_INTERSECT*/; - } - - // Line segments intersect: compute intersection point. - const denom = a1 * b2 - a2 * b1; - if (denom === 0) { - return /*COLLINEAR*/; - } - - const offset = Math.abs(denom / 2); - - // The denom/2 is to get rounding instead of truncating. It - // is added or subtracted to the numerator, depending upon the - // sign of the numerator. - let num = b1 * c2 - b2 * c1; - const x = num < 0 ? (num - offset) / denom : (num + offset) / denom; - - num = a2 * c1 - a1 * c2; - const y = num < 0 ? (num - offset) / denom : (num + offset) / denom; - - return { x: x, y: y }; -} - -function sameSign(r1, r2) { - return r1 * r2 > 0; -} -const diamondIntersection = (bounds, outsidePoint, insidePoint) => { - const x1 = bounds.x; - const y1 = bounds.y; - - const w = bounds.width; //+ bounds.padding; - const h = bounds.height; // + bounds.padding; - - const polyPoints = [ - { x: x1, y: y1 - h / 2 }, - { x: x1 + w / 2, y: y1 }, - { x: x1, y: y1 + h / 2 }, - { x: x1 - w / 2, y: y1 }, - ]; - log.debug( - `UIO diamondIntersection calc abc89: - outsidePoint: ${JSON.stringify(outsidePoint)} - insidePoint : ${JSON.stringify(insidePoint)} - node : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`, - polyPoints - ); - - const intersections = []; - - let minX = Number.POSITIVE_INFINITY; - let minY = Number.POSITIVE_INFINITY; - if (typeof polyPoints.forEach === 'function') { - polyPoints.forEach(function (entry) { - minX = Math.min(minX, entry.x); - minY = Math.min(minY, entry.y); - }); - } else { - minX = Math.min(minX, polyPoints.x); - minY = Math.min(minY, polyPoints.y); - } - - // const left = x1 - w / 2; - // const top = y1 + h / 2; - - for (let i = 0; i < polyPoints.length; i++) { - const p1 = polyPoints[i]; - const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0]; - const intersect = intersectLine( - bounds, - outsidePoint, - { x: p1.x, y: p1.y }, - { x: p2.x, y: p2.y } - ); - - if (intersect) { - intersections.push(intersect); - } - } - - if (!intersections.length) { - return bounds; - } - - log.debug('UIO intersections', intersections); - - if (intersections.length > 1) { - // More intersections, find the one nearest to edge end point - intersections.sort(function (p, q) { - const pdx = p.x - outsidePoint.x; - const pdy = p.y - outsidePoint.y; - const distp = Math.sqrt(pdx * pdx + pdy * pdy); - - const qdx = q.x - outsidePoint.x; - const qdy = q.y - outsidePoint.y; - const distq = Math.sqrt(qdx * qdx + qdy * qdy); - - return distp < distq ? -1 : distp === distq ? 0 : 1; - }); - } - - return intersections[0]; -}; - -export const intersection = (node, outsidePoint, insidePoint) => { - log.debug(`intersection calc abc89: - outsidePoint: ${JSON.stringify(outsidePoint)} - insidePoint : ${JSON.stringify(insidePoint)} - node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`); - const x = node.x; - const y = node.y; - - const dx = Math.abs(x - insidePoint.x); - // const dy = Math.abs(y - insidePoint.y); - const w = node.width / 2; - let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx; - const h = node.height / 2; - - const Q = Math.abs(outsidePoint.y - insidePoint.y); - const R = Math.abs(outsidePoint.x - insidePoint.x); - - if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { - // Intersection is top or bottom of rect. - const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y; - r = (R * q) / Q; - const res = { - x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r, - y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q, - }; - - if (r === 0) { - res.x = outsidePoint.x; - res.y = outsidePoint.y; - } - if (R === 0) { - res.x = outsidePoint.x; - } - if (Q === 0) { - res.y = outsidePoint.y; - } - - log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line - - return res; - } else { - // Intersection onn sides of rect - if (insidePoint.x < outsidePoint.x) { - r = outsidePoint.x - w - x; - } else { - // r = outsidePoint.x - w - x; - r = x - w - outsidePoint.x; - } - const q = (Q * r) / R; - // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w; - // OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; - let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r; - // let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r; - let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q; - log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y }); - if (r === 0) { - _x = outsidePoint.x; - _y = outsidePoint.y; - } - if (R === 0) { - _x = outsidePoint.x; - } - if (Q === 0) { - _y = outsidePoint.y; - } - - return { x: _x, y: _y }; - } -}; -const outsideNode = (node, point) => { - const x = node.x; - const y = node.y; - const dx = Math.abs(point.x - x); - const dy = Math.abs(point.y - y); - const w = node.width / 2; - const h = node.height / 2; - if (dx >= w || dy >= h) { - return true; - } - return false; -}; -/** - * This function will page a path and node where the last point(s) in the path is inside the node - * and return an update path ending by the border of the node. - */ -const cutPathAtIntersect = (_points, bounds, isDiamond: boolean) => { - log.debug('UIO cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond); - const points = []; - let lastPointOutside = _points[0]; - let isInside = false; - _points.forEach((point) => { - // const node = clusterDb[edge.toCluster].node; - log.debug(' checking point', point, bounds); - - // check if point is inside the boundary rect - if (!outsideNode(bounds, point) && !isInside) { - // First point inside the rect found - // Calc the intersection coord between the point anf the last point outside the rect - let inter; - - if (isDiamond) { - const inter2 = diamondIntersection(bounds, lastPointOutside, point); - const distance = Math.sqrt( - (lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2 - ); - if (distance > 1) { - inter = inter2; + let sw = startNode.width; + let ew = endNode.width; + if (startNode.isGroup) { + const bbox = startNode.domId.node().getBBox(); + // sw = Math.max(bbox.width, startNode.width, startNode.labels[0].width); + sw = Math.max(startNode.width, startNode.labels[0].width + startNode.padding); + // sw = startNode.width; + log.debug( + 'UIO width', + startNode.id, + startNode.with, + 'bbox.width=', + bbox.width, + 'lw=', + startNode.labels[0].width, + 'node:', + startNode.width, + 'SW = ', + sw + // 'HTML:', + // startNode.domId.node().innerHTML + ); } - } - if (!inter) { - inter = intersection(bounds, lastPointOutside, point); - } + if (endNode.isGroup) { + const bbox = endNode.domId.node().getBBox(); + ew = Math.max(endNode.width, endNode.labels[0].width + endNode.padding); - // Check case where the intersection is the same as the last point - let pointPresent = false; - points.forEach((p) => { - pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y); - }); - // if (!pointPresent) { - if (!points.some((e) => e.x === inter.x && e.y === inter.y)) { - points.push(inter); - } else { - log.debug('abc88 no intersect', inter, points); - } - // points.push(inter); - isInside = true; - } else { - // Outside - log.debug('abc88 outside', point, lastPointOutside, points); - lastPointOutside = point; - // points.push(point); - if (!isInside) { - points.push(point); + log.debug( + 'UIO width', + startNode.id, + startNode.with, + bbox.width, + 'EW = ', + ew, + 'HTML:', + startNode.innerHTML + ); + } + if (startNode.shape === 'diamond') { + edge.points.unshift({ + x: startNode.x + startNode.width / 2 + offset.x, + y: startNode.y + startNode.height / 2 + offset.y, + }); + } + if (endNode.shape === 'diamond') { + const x = endNode.x + endNode.width / 2 + offset.x; + // Add a point at the center of the diamond + if ( + Math.abs(edge.points[edge.points.length - 1].y - endNode.y - offset.y) > 0.001 || + Math.abs(edge.points[edge.points.length - 1].x - x) > 0.001 + ) { + edge.points.push({ + x: endNode.x + endNode.width / 2 + offset.x, + y: endNode.y + endNode.height / 2 + offset.y, + }); + } + } + + edge.points = cutPathAtIntersect( + edge.points.reverse(), + { + x: startNode.x + startNode.width / 2 + offset.x, + y: startNode.y + startNode.height / 2 + offset.y, + width: sw, + height: startNode.height, + padding: startNode.padding, + }, + startNode.shape === 'diamond' + ).reverse(); + + edge.points = cutPathAtIntersect( + edge.points, + { + x: endNode.x + ew / 2 + endNode.offset.x, + y: endNode.y + endNode.height / 2 + endNode.offset.y, + width: ew, + height: endNode.height, + padding: endNode.padding, + }, + endNode.shape === 'diamond' + ); + + const paths = insertEdge( + edgesEl, + edge, + clusterDb, + data4Layout.type, + startNode, + endNode, + data4Layout.diagramId + ); + log.info('APA12 edge points after insert', JSON.stringify(edge.points)); + + edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; + edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; + positionEdgeLabel(edge, paths); } } - }); - log.debug('returning points', points); - return points; + ); }; diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index e2aba69ff..d75240374 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -132,6 +132,6 @@ export type HTML = d3.Selection; -export type Group = d3.Selection; +export type SVGGroup = d3.Selection; export type DiagramStylesProvider = (options?: any) => string; diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts index 8d5ba3b7c..59c6d43cf 100644 --- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts +++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts @@ -1,5 +1,6 @@ import { sanitizeUrl } from '@braintree/sanitize-url'; -import type { Group, SVG } from '../../diagram-api/types.js'; +import type { SVG, SVGGroup } from '../../diagram-api/types.js'; +import { lineBreakRegex } from './common.js'; import type { Bound, D3ImageElement, @@ -11,9 +12,8 @@ import type { TextData, TextObject, } from './commonTypes.js'; -import { lineBreakRegex } from './common.js'; -export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => { +export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => { const rectElement: D3RectElement = element.append('rect'); rectElement.attr('x', rectData.x); rectElement.attr('y', rectData.y); @@ -50,7 +50,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen * @param element - Diagram (reference for bounds) * @param bounds - Shape of the rectangle */ -export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => { +export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => { const rectData: RectData = { x: bounds.startx, y: bounds.starty, @@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => rectElement.lower(); }; -export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => { +export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => { const nText: string = textData.text.replace(lineBreakRegex, ' '); const textElem: D3TextElement = element.append('text'); @@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen return textElem; }; -export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => { +export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => { const imageElement: D3ImageElement = elem.append('image'); imageElement.attr('x', x); imageElement.attr('y', y); @@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string) }; export const drawEmbeddedImage = ( - element: SVG | Group, + element: SVG | SVGGroup, x: number, y: number, link: string diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts index 1b3622c6d..a5f10acef 100644 --- a/packages/mermaid/src/diagrams/error/errorRenderer.ts +++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts @@ -1,5 +1,5 @@ +import type { SVG, SVGGroup } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; -import type { Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; @@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; export const draw = (_text: string, id: string, version: string) => { log.debug('rendering svg for syntax error\n'); const svg: SVG = selectSvgElement(id); - const g: Group = svg.append('g'); + const g: SVGGroup = svg.append('g'); svg.attr('viewBox', '0 0 2412 512'); configureSvgSize(svg, 100, 512, true); diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index add5211e0..fff6aaa21 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -15,6 +15,7 @@ import { getDiagramTitle, } from '../common/commonDb.js'; import type { FlowVertex, FlowClass, FlowSubGraph, FlowText, FlowEdge, FlowLink } from './types.js'; +import type { NodeMetaData } from '$root/types.js'; const MERMAID_DOM_ID_PREFIX = 'flowchart-'; let vertexCounter = 0; @@ -135,7 +136,7 @@ export const addVertex = function ( yamlData = yamlData.substring(0, lastPos) + '\n'; } } - const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }); + const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData; // console.log('yamlData doc', doc); if (doc?.shape) { vertex.type = doc?.shape; diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts index 25ae72fce..a8314eb72 100644 --- a/packages/mermaid/src/diagrams/info/infoRenderer.ts +++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts @@ -1,7 +1,7 @@ +import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; -import { configureSvgSize } from '../../setupGraphViewbox.js'; -import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; /** * Draws a an info picture in the tag with id: id based on the graph definition in text. @@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => { const svg: SVG = selectSvgElement(id); configureSvgSize(svg, 100, 400, true); - const group: Group = svg.append('g'); + const group: SVGGroup = svg.append('g'); group .append('text') .attr('x', 100) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index c89e055cc..25445a228 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,6 +1,6 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; -import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; @@ -39,7 +39,7 @@ const drawWord = ( rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required ) => { - const group: Group = svg.append('g'); + const group: SVGGroup = svg.append('g'); const wordY = rowNumber * (rowHeight + paddingY) + paddingY; for (const block of word) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index 8f3b9cc5b..a0cdce3df 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -1,13 +1,13 @@ import type d3 from 'd3'; -import { scaleOrdinal, pie as d3pie, arc } from 'd3'; -import { log } from '../../logger.js'; -import { configureSvgSize } from '../../setupGraphViewbox.js'; -import { getConfig } from '../../diagram-api/diagramAPI.js'; -import { cleanAndMerge, parseFontSize } from '../../utils.js'; -import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; -import type { D3Section, PieDB, Sections } from './pieTypes.js'; +import { arc, pie as d3pie, scaleOrdinal } from 'd3'; import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; +import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js'; +import { log } from '../../logger.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import { cleanAndMerge, parseFontSize } from '../../utils.js'; +import type { D3Section, PieDB, Sections } from './pieTypes.js'; const createPieArcs = (sections: Sections): d3.PieArcDatum[] => { // Compute the position of each group on the pie: @@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const height = 450; const pieWidth: number = height; const svg: SVG = selectSvgElement(id); - const group: Group = svg.append('g'); + const group: SVGGroup = svg.append('g'); group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')'); const { themeVariables } = globalConfig; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts index cde0d6a93..a1ec492f6 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,4 +1,4 @@ -import type { Group } from '../../../../../diagram-api/types.js'; +import type { SVGGroup } from '../../../../../diagram-api/types.js'; import type { AxisDataType, ChartComponent, @@ -25,7 +25,7 @@ export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, axisThemeConfig: XYChartAxisThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): Axis { const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); if (isBandAxisData(data)) { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts index bbab56bdc..5512df988 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/chartTitle.ts @@ -1,13 +1,13 @@ -import type { Group } from '../../../../diagram-api/types.js'; +import type { SVGGroup } from '../../../../diagram-api/types.js'; import type { BoundingRect, ChartComponent, Dimension, DrawableElem, Point, + XYChartConfig, XYChartData, XYChartThemeConfig, - XYChartConfig, } from '../interfaces.js'; import type { TextDimensionCalculator } from '../textDimensionCalculator.js'; import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js'; @@ -84,7 +84,7 @@ export function getChartTitleComponent( chartConfig: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): ChartComponent { const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup); return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index 192eb47f6..6a1b6ec3a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,4 +1,4 @@ -import type { Group } from '../../../diagram-api/types.js'; +import type { SVGGroup } from '../../../diagram-api/types.js'; import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js'; import { Orchestrator } from './orchestrator.js'; @@ -7,7 +7,7 @@ export class XYChartBuilder { config: XYChartConfig, chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ): DrawableElem[] { const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup); return orchestrator.getDrawableElement(); diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts index 8160d1500..8809efe26 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/orchestrator.ts @@ -1,3 +1,9 @@ +import type { SVGGroup } from '../../../diagram-api/types.js'; +import type { Axis } from './components/axis/index.js'; +import { getAxis } from './components/axis/index.js'; +import { getChartTitleComponent } from './components/chartTitle.js'; +import type { Plot } from './components/plot/index.js'; +import { getPlotComponent } from './components/plot/index.js'; import type { ChartComponent, DrawableElem, @@ -6,12 +12,6 @@ import type { XYChartThemeConfig, } from './interfaces.js'; import { isBarPlot } from './interfaces.js'; -import type { Axis } from './components/axis/index.js'; -import { getAxis } from './components/axis/index.js'; -import { getChartTitleComponent } from './components/chartTitle.js'; -import type { Plot } from './components/plot/index.js'; -import { getPlotComponent } from './components/plot/index.js'; -import type { Group } from '../../../diagram-api/types.js'; export class Orchestrator { private componentStore: { @@ -24,7 +24,7 @@ export class Orchestrator { private chartConfig: XYChartConfig, private chartData: XYChartData, chartThemeConfig: XYChartThemeConfig, - tmpSVGGroup: Group + tmpSVGGroup: SVGGroup ) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup), diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts index 8049bf527..0f118fc92 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/textDimensionCalculator.ts @@ -1,13 +1,13 @@ -import type { Dimension } from './interfaces.js'; +import type { SVGGroup } from '../../../diagram-api/types.js'; import { computeDimensionOfText } from '../../../rendering-util/createText.js'; -import type { Group } from '../../../diagram-api/types.js'; +import type { Dimension } from './interfaces.js'; export interface TextDimensionCalculator { getMaxDimension(texts: string[], fontSize: number): Dimension; } export class TextDimensionCalculatorWithFont implements TextDimensionCalculator { - constructor(private parentGroup: Group) {} + constructor(private parentGroup: SVGGroup) {} getMaxDimension(texts: string[], fontSize: number): Dimension { if (!this.parentGroup) { return { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 23b90724c..fb2435df2 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -1,3 +1,9 @@ +import * as configApi from '../../config.js'; +import defaultConfig from '../../defaultConfig.js'; +import type { SVGGroup } from '../../diagram-api/types.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; +import { cleanAndMerge } from '../../utils.js'; +import { sanitizeText } from '../common/common.js'; import { clear as commonClear, getAccDescription, @@ -7,11 +13,6 @@ import { setAccTitle, setDiagramTitle, } from '../common/commonDb.js'; -import * as configApi from '../../config.js'; -import defaultConfig from '../../defaultConfig.js'; -import { getThemeVariables } from '../../themes/theme-default.js'; -import { cleanAndMerge } from '../../utils.js'; -import { sanitizeText } from '../common/common.js'; import { XYChartBuilder } from './chartBuilder/index.js'; import type { DrawableElem, @@ -21,11 +22,10 @@ import type { XYChartThemeConfig, } from './chartBuilder/interfaces.js'; import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js'; -import type { Group } from '../../diagram-api/types.js'; let plotIndex = 0; -let tmpSVGGroup: Group; +let tmpSVGGroup: SVGGroup; let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); @@ -75,7 +75,7 @@ function textSanitizer(text: string) { return sanitizeText(text.trim(), config); } -function setTmpSVGG(SVGG: Group) { +function setTmpSVGG(SVGG: SVGGroup) { tmpSVGGroup = SVGG; } function setOrientation(orientation: string) { diff --git a/packages/mermaid/src/internals.ts b/packages/mermaid/src/internals.ts index cebcd4ace..7cc058cb3 100644 --- a/packages/mermaid/src/internals.ts +++ b/packages/mermaid/src/internals.ts @@ -29,3 +29,5 @@ export const internalHelpers = { log, positionEdgeLabel, }; + +export type InternalHelpers = typeof internalHelpers; diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 14142f642..f9e71000f 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -4,38 +4,37 @@ */ import { dedent } from 'ts-dedent'; import type { MermaidConfig } from './config.type.js'; -import { log } from './logger.js'; -import utils from './utils.js'; -import type { ParseOptions, RenderResult } from './types.js'; -import { mermaidAPI } from './mermaidAPI.js'; -import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js'; -import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js'; -import type { Diagram } from './Diagram.js'; -import type { ParseErrorFunction } from './Diagram.js'; -import { isDetailedError } from './utils.js'; -import type { DetailedError } from './utils.js'; -import type { ExternalDiagramDefinition } from './diagram-api/types.js'; -import type { UnknownDiagramError } from './errors.js'; +import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js'; import { addDiagrams } from './diagram-api/diagram-orchestration.js'; +import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js'; +import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js'; +import type { Diagram, ParseErrorFunction } from './Diagram.js'; +import type { UnknownDiagramError } from './errors.js'; +import type { InternalHelpers } from './internals.js'; +import { log } from './logger.js'; +import { mermaidAPI } from './mermaidAPI.js'; +import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js'; import { registerLayoutLoaders } from './rendering-util/render.js'; -import type { LayoutLoaderDefinition } from './rendering-util/render.js'; -import { internalHelpers } from './internals.js'; import type { LayoutData } from './rendering-util/types.js'; -import type { Node } from './rendering-util/types.js'; -import type { Edge } from './rendering-util/types.js'; +import type { ParseOptions, ParseResult, RenderResult } from './types.js'; +import type { DetailedError } from './utils.js'; +import utils, { isDetailedError } from './utils.js'; export type { - MermaidConfig, DetailedError, ExternalDiagramDefinition, - ParseErrorFunction, - RenderResult, - ParseOptions, - UnknownDiagramError, - LayoutLoaderDefinition, + InternalHelpers, LayoutData, - Node, - Edge, + LayoutLoaderDefinition, + MermaidConfig, + ParseErrorFunction, + ParseOptions, + ParseResult, + RenderOptions, + RenderResult, + SVG, + SVGGroup, + UnknownDiagramError, }; export interface RunOptions { @@ -178,7 +177,7 @@ const runThrowsErrors = async function ( log.debug('Detected early reinit: ', init); } try { - const { svg, bindFunctions } = await render(id, txt, element); + const { svg, bindFunctions } = await render(id, txt, element, undefined); element.innerHTML = svg; if (postRenderCallback) { await postRenderCallback(id); @@ -446,11 +445,6 @@ export interface Mermaid { contentLoaded: typeof contentLoaded; setParseErrorHandler: typeof setParseErrorHandler; detectType: typeof detectType; - /** - * Internal helpers for mermaid - * @deprecated - This should not be used by external packages, as the definitions will change without notice. - */ - internalHelpers: typeof internalHelpers; } const mermaid: Mermaid = { @@ -467,7 +461,6 @@ const mermaid: Mermaid = { contentLoaded, setParseErrorHandler, detectType, - internalHelpers, }; export default mermaid; diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 12d81715f..c6ce204ba 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,16 +1,16 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types -import type { MermaidConfig } from '../config.type.js'; -import type { Group } from '../diagram-api/types.js'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js'; import { select } from 'd3'; +import type { MermaidConfig } from '../config.type.js'; +import type { SVGGroup } from '../diagram-api/types.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import { log } from '../logger.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; import { decodeEntities } from '../utils.js'; import { splitLineToFitWidth } from './splitText.js'; import type { MarkdownLine, MarkdownWord } from './types.js'; -import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; function applyStyle(dom, styleFn) { if (styleFn) { @@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL } export function computeDimensionOfText( - parentNode: Group, + parentNode: SVGGroup, lineHeight: number, text: string ): DOMRect | undefined { diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index 71bb5ca06..1c9d86c52 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -1,7 +1,22 @@ +import type { SVG } from '$root/diagram-api/types.js'; +import type { InternalHelpers } from '$root/internals.js'; +import { internalHelpers } from '$root/internals.js'; import { log } from '$root/logger.js'; +import type { LayoutData } from './types.js'; + +export interface RenderOptions { + algorithm?: string; +} export interface LayoutAlgorithm { - render(data4Layout: any, svg: any, element: any, algorithm?: string, positions: any): any; + render( + layoutData: LayoutData, + svg: SVG, + element: any, + helpers: InternalHelpers, + options?: RenderOptions, + positions: any + ): Promise; } export type LayoutLoader = () => Promise; @@ -69,7 +84,16 @@ export const render = async (data4Layout: any, svg: any, element: any, positions .attr('stop-color', gradientStop) .attr('stop-opacity', 1); } - return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions); + return layoutRenderer.render( + data4Layout, + svg, + element, + internalHelpers, + { + algorithm: layoutDefinition.algorithm, + }, + positions + ); }; /** diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index c07d4db50..67ce52352 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -122,7 +122,7 @@ properties: - NETWORK_SIMPLEX - LINEAR_SEGMENTS - BRANDES_KOEPF - default: SIMPLE + default: BRANDES_KOEPF darkMode: type: boolean default: false diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 9f4d77225..05c2defe2 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -1,3 +1,7 @@ +export interface NodeMetaData { + shape?: string; + label?: string; +} export interface Point { x: number; y: number; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 786ef5fd3..47ceeee83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -418,6 +418,10 @@ importers: elkjs: specifier: ^0.9.3 version: 0.9.3 + devDependencies: + '@types/d3': + specifier: ^7.4.3 + version: 7.4.3 packages/mermaid-zenuml: dependencies: