Added tagged rect

mermaid-js · Aug 12, 2024 · 251b946 · 251b946
1 parent 4aeb2ae
commit 251b946
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 5 deletions.
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
@@ -63,11 +63,15 @@
   <body>
     <pre id="diagram4" class="mermaid">
 flowchart
-      A@{ shape: titledCylinder, label: "title"  }@ --> B@{ shape: titledCylinder, label: "title B"  }@
-
-      C@{ shape: titledCylinder, label: "title with very long text but on single line"  }@ -->  D@{ shape: titledCylinder, label: "title \n with \n multiple \n lines \n of n text"  }@
-     A --> D
-
+      A@{ shape: taggedRect, label: "title wit \n test \n free \n adsdbab \n duawgdu \n awdb \n wdgawud \n and with verry long single line textdauwdbuawydvuawvdyawvdhavdyawv"  }@
+     B 
+     C 
+     D 
+     E 
+     A --> B
+     A --> C 
+     D --> A
+     E --> A
 
   </pre
     >

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -38,6 +38,7 @@ import { titledCylinder } from './shapes/tiltedCylinder.js';
 import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
 import { flippedTriangle } from './shapes/flippedTriangle.js';
 import { hourglass } from './shapes/hourglass.js';
+import { taggedRect } from './shapes/taggedRect.js';
 
 const shapes = {
   state,
@@ -79,6 +80,7 @@ const shapes = {
   trapezoidalPentagon,
   flippedTriangle,
   hourglass,
+  taggedRect,
 };
 
 const nodeElems = new Map();

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
@@ -0,0 +1,73 @@
+import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+
+export const taggedRect = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = bbox.height + node.padding;
+  const w = bbox.width + node.padding;
+  const x = -w / 2;
+  const y = -h / 2;
+  const tagWidth = 0.2 * w;
+  const tagHeight = 0.2 * h;
+  const { cssStyles } = node;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  const rectPoints = [
+    { x, y },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h },
+  ];
+
+  const tagPoints = [
+    { x: x + w - tagWidth, y: y + h },
+    { x: x + w, y: y + h },
+    { x: x + w, y: y + h - tagHeight },
+  ];
+
+  if (node.look !== 'handdrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const rectPath = createPathFromPoints(rectPoints);
+  const rectNode = rc.path(rectPath, options);
+
+  const tagPath = createPathFromPoints(tagPoints);
+  const tagNode = rc.path(tagPath, options);
+
+  const taggedRect = shapeSvg.insert('g', ':first-child');
+  taggedRect.insert(() => rectNode, ':first-child');
+  taggedRect.insert(() => tagNode);
+
+  taggedRect.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    taggedRect.attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    taggedRect.attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, taggedRect);
+
+  node.intersect = function (point) {
+    const pos = intersect.rect(node, point);
+
+    return pos;
+  };
+
+  return shapeSvg;
+};