From c83fc753a10e681a086a04d6c40c8d1dc25475b1 Mon Sep 17 00:00:00 2001 From: omkarht Date: Fri, 20 Sep 2024 15:43:04 +0530 Subject: [PATCH 1/2] implemented additional Image-node shape properties --- packages/mermaid/src/diagrams/flowchart/flowDb.ts | 4 ++++ packages/mermaid/src/diagrams/flowchart/types.ts | 3 +++ .../rendering-util/rendering-elements/shapes/imageSquare.ts | 6 +++++- packages/mermaid/src/rendering-util/types.ts | 3 +++ packages/mermaid/src/types.ts | 1 + 5 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 149dec92c..4785b2779 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -161,6 +161,7 @@ export const addVertex = function ( if (!doc.label?.trim() && vertex.text === id) { vertex.text = ''; } + vertex.constrainedImage = !!doc.constrainedImage; } if (doc.w) { vertex.assetWidth = Number(doc.w); @@ -899,6 +900,9 @@ const addNodeFromVertex = ( img: vertex.img, assetWidth: vertex.assetWidth, assetHeight: vertex.assetHeight, + imageAspectRatio: vertex.imageAspectRatio, + defaultWidth: vertex.defaultWidth, + constrainedImage: vertex.constrainedImage, }); } }; diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts index 97dc54fa7..c60b1e8c1 100644 --- a/packages/mermaid/src/diagrams/flowchart/types.ts +++ b/packages/mermaid/src/diagrams/flowchart/types.ts @@ -17,6 +17,9 @@ export interface FlowVertex { img?: string; assetWidth?: number; assetHeight?: number; + defaultWidth?: number; + imageAspectRatio?: number; + constrainedImage?: boolean; } export interface FlowText { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts index 551223ef4..0a9932f06 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts @@ -17,18 +17,22 @@ export const imageSquare = async ( const imageNaturalWidth = Number(img.naturalWidth.toString().replace('px', '')); const imageNaturalHeight = Number(img.naturalHeight.toString().replace('px', '')); + node.imageAspectRatio = imageNaturalWidth / imageNaturalHeight; const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const defaultWidth = flowchart?.wrappingWidth; + node.defaultWidth = flowchart?.wrappingWidth; const imageWidth = Math.max( node.label ? (defaultWidth ?? 0) : 0, node?.assetWidth ?? imageNaturalWidth ); - const imageHeight = node?.assetHeight ?? imageNaturalHeight; + const imageHeight = node.constrainedImage + ? imageWidth / node.imageAspectRatio + : (node?.assetHeight ?? imageNaturalHeight); node.width = Math.max(imageWidth, defaultWidth ?? 0); const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default'); diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index 510e94b94..25a616fb7 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -69,6 +69,9 @@ export interface Node { img?: string; assetWidth?: number; assetHeight?: number; + defaultWidth?: number; + imageAspectRatio?: number; + constrainedImage?: boolean; } // Common properties for any edge in the system diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 7aa085047..37590fa2b 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -7,6 +7,7 @@ export interface NodeMetaData { img?: string; w?: string; h?: string; + constrainedImage?: boolean; } import type { MermaidConfig } from './config.type.js'; From f849c369421db5d6299709c977279f8dfe3dbdee Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 20 Sep 2024 10:18:15 +0000 Subject: [PATCH 2/2] [autofix.ci] apply automated fixes --- docs/config/setup/interfaces/mermaid.LayoutData.md | 6 +++--- docs/config/setup/interfaces/mermaid.ParseOptions.md | 2 +- docs/config/setup/interfaces/mermaid.ParseResult.md | 4 ++-- docs/config/setup/interfaces/mermaid.RenderResult.md | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.LayoutData.md b/docs/config/setup/interfaces/mermaid.LayoutData.md index 7a8a302d8..4e5b631ff 100644 --- a/docs/config/setup/interfaces/mermaid.LayoutData.md +++ b/docs/config/setup/interfaces/mermaid.LayoutData.md @@ -20,7 +20,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L122) +[packages/mermaid/src/rendering-util/types.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L125) --- @@ -30,7 +30,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L121) +[packages/mermaid/src/rendering-util/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L124) --- @@ -40,4 +40,4 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L120) +[packages/mermaid/src/rendering-util/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L123) diff --git a/docs/config/setup/interfaces/mermaid.ParseOptions.md b/docs/config/setup/interfaces/mermaid.ParseOptions.md index 528e7ec35..52b4af49e 100644 --- a/docs/config/setup/interfaces/mermaid.ParseOptions.md +++ b/docs/config/setup/interfaces/mermaid.ParseOptions.md @@ -19,4 +19,4 @@ The `parseError` function will not be called. #### Defined in -[packages/mermaid/src/types.ts:55](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L55) +[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56) diff --git a/docs/config/setup/interfaces/mermaid.ParseResult.md b/docs/config/setup/interfaces/mermaid.ParseResult.md index c09445909..ef371d094 100644 --- a/docs/config/setup/interfaces/mermaid.ParseResult.md +++ b/docs/config/setup/interfaces/mermaid.ParseResult.md @@ -18,7 +18,7 @@ The config passed as YAML frontmatter or directives #### Defined in -[packages/mermaid/src/types.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66) +[packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67) --- @@ -30,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. #### Defined in -[packages/mermaid/src/types.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L62) +[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63) diff --git a/docs/config/setup/interfaces/mermaid.RenderResult.md b/docs/config/setup/interfaces/mermaid.RenderResult.md index 6f297848c..4c5604022 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:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89) +[packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90) --- @@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc. #### Defined in -[packages/mermaid/src/types.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L79) +[packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80) --- @@ -63,4 +63,4 @@ The svg code for the rendered graph. #### Defined in -[packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75) +[packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)