From 1c8c95367d7b319ec6dc3372ca6270c66c2c7cde Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Tue, 24 Sep 2024 13:29:12 +0530 Subject: [PATCH 1/2] updated check to avoid _ in shape syntax. updated readme path --- docs/{adding-new-shape/Readme.md => adding-new-shape.md} | 6 ++++-- packages/mermaid/src/diagrams/flowchart/flowDb.ts | 2 +- .../{adding-new-shape/Readme.md => adding-new-shape.md} | 4 +++- 3 files changed, 8 insertions(+), 4 deletions(-) rename docs/{adding-new-shape/Readme.md => adding-new-shape.md} (97%) rename packages/mermaid/src/docs/{adding-new-shape/Readme.md => adding-new-shape.md} (98%) 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 4785b2779..c94dffa49 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.`); } 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 }; ``` From fd372941c729e17f0f602933a8681a67e6bbe6ba Mon Sep 17 00:00:00 2001 From: omkarht Date: Tue, 24 Sep 2024 13:42:54 +0530 Subject: [PATCH 2/2] updated constraint property for node shape --- packages/mermaid/src/diagrams/flowchart/flowDb.ts | 10 ++++++---- packages/mermaid/src/diagrams/flowchart/types.ts | 2 +- .../rendering-elements/shapes/imageSquare.ts | 7 ++++--- packages/mermaid/src/rendering-util/types.ts | 2 +- packages/mermaid/src/types.ts | 2 +- 5 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index c94dffa49..db43ecaae 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -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); @@ -900,9 +904,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/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 25a616fb7..ec4e49b2a 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 37590fa2b..fe8f71375 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -7,7 +7,7 @@ export interface NodeMetaData { img?: string; w?: string; h?: string; - constrainedImage?: boolean; + constraint?: 'on' | 'off'; } import type { MermaidConfig } from './config.type.js';