Merge branch 'knsv/new-shapes' of github.com:mermaid-js/mermaid into neo-new-shapes

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
   };
   ```
 

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,
     });
   }
 };

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 {

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
   };
   ```
 

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');
 

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

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 {