diff --git a/docs/adding-new-shape/Readme.md b/docs/adding-new-shape.md similarity index 97% rename from docs/adding-new-shape/Readme.md rename to docs/adding-new-shape.md index 7d2c6eb81..b409d7c80 100644 --- a/docs/adding-new-shape/Readme.md +++ b/docs/adding-new-shape.md @@ -2,7 +2,7 @@ > > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. > -> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding-new-shape/Readme.md](../../packages/mermaid/src/docs/adding-new-shape/Readme.md). +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding-new-shape.md](../packages/mermaid/src/docs/adding-new-shape.md). # Custom SVG Shapes Library @@ -126,7 +126,9 @@ To add a new shape: const shapes = { ..., - myNewShape, + 'my-new-shape': myNewShape, + // Shortened alias (if any). + 'm-nsh': myNewShape }; ``` diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 9080f6c88..8061ea4e9 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -133,7 +133,7 @@ export const addVertex = function ( } // console.log('yamlData', yamlData); const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData; - if (doc.shape && doc.shape !== doc.shape.toLowerCase()) { + if (doc.shape && (doc.shape !== doc.shape.toLowerCase() || doc.shape.includes('_'))) { throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`); } @@ -161,7 +161,11 @@ export const addVertex = function ( if (!doc.label?.trim() && vertex.text === id) { vertex.text = ''; } - vertex.constrainedImage = !!doc.constrainedImage; + if (doc?.constraint) { + vertex.constraint = doc.constraint; + } else { + vertex.constraint = 'off'; + } } if (doc.w) { vertex.assetWidth = Number(doc.w); @@ -901,9 +905,7 @@ const addNodeFromVertex = ( img: vertex.img, assetWidth: vertex.assetWidth, assetHeight: vertex.assetHeight, - imageAspectRatio: vertex.imageAspectRatio, - defaultWidth: vertex.defaultWidth, - constrainedImage: vertex.constrainedImage, + constraint: vertex.constraint, }); } }; diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts index c60b1e8c1..770ee24b4 100644 --- a/packages/mermaid/src/diagrams/flowchart/types.ts +++ b/packages/mermaid/src/diagrams/flowchart/types.ts @@ -19,7 +19,7 @@ export interface FlowVertex { assetHeight?: number; defaultWidth?: number; imageAspectRatio?: number; - constrainedImage?: boolean; + constraint?: 'on' | 'off'; } export interface FlowText { diff --git a/packages/mermaid/src/docs/adding-new-shape/Readme.md b/packages/mermaid/src/docs/adding-new-shape.md similarity index 98% rename from packages/mermaid/src/docs/adding-new-shape/Readme.md rename to packages/mermaid/src/docs/adding-new-shape.md index cf8f9b3fe..b04d5f794 100644 --- a/packages/mermaid/src/docs/adding-new-shape/Readme.md +++ b/packages/mermaid/src/docs/adding-new-shape.md @@ -120,7 +120,9 @@ To add a new shape: const shapes = { ..., - myNewShape, + 'my-new-shape': myNewShape, + // Shortened alias (if any). + 'm-nsh': myNewShape }; ``` 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 0a9932f06..9cd5da007 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/imageSquare.ts @@ -30,9 +30,10 @@ export const imageSquare = async ( node.label ? (defaultWidth ?? 0) : 0, node?.assetWidth ?? imageNaturalWidth ); - const imageHeight = node.constrainedImage - ? imageWidth / node.imageAspectRatio - : (node?.assetHeight ?? imageNaturalHeight); + const imageHeight = + node.constraint === 'on' + ? 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 ff04af7b0..098705e8c 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -71,7 +71,7 @@ export interface Node { assetHeight?: number; defaultWidth?: number; imageAspectRatio?: number; - constrainedImage?: boolean; + constraint?: 'on' | 'off'; } // Common properties for any edge in the system diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 67640325e..c26130bf5 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -10,7 +10,7 @@ export interface NodeMetaData { img?: string; w?: string; h?: string; - constrainedImage?: boolean; + constraint?: 'on' | 'off'; } export interface Point {