added tilted cylinder

mermaid-js · Aug 9, 2024 · 89e4de1 · 89e4de1
1 parent ac48f01
commit 89e4de1
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 9 deletions.
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
@@ -63,14 +63,10 @@
   <body>
     <pre id="diagram4" class="mermaid">
 flowchart
-
-      A@{ shape: stateStart }@
-      B@{ shape: crossedCircle, label: "This is crossed circle"  }@
-      C
-      D
-      A ---> B
-      C --> B
-      B --> D
+      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
 
 
   </pre
@@ -91,7 +87,7 @@
         // handdrawnSeed: 12,
         look: 'classic',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        'elk.nodePlacement.strategy': 'SIMPLE',
+        // 'elk.nodePlacement.strategy': 'SIMPLE',
         // 'elk.nodePlacement.strategy': 'LAYERED',
         // 'elk.mergeEdges': true,
         // layout: 'dagre',

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -34,6 +34,7 @@ import { bowTieRect } from './shapes/bowTieRect.js';
 import { dividedRect } from './shapes/dividedRect.js';
 import { crossedCircle } from './shapes/crossedCircle.js';
 import { waveRectangle } from './shapes/waveRectangle.js';
+import { titledCylinder } from './shapes/tiltedCylinder.js';
 
 const shapes = {
   state,
@@ -71,6 +72,7 @@ const shapes = {
   dividedRect,
   crossedCircle,
   waveRectangle,
+  titledCylinder,
 };
 
 const nodeElems = new Map();

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
@@ -0,0 +1,82 @@
+import { labelHelper, getNodeClasses, updateNodeBounds } 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';
+
+function createCylinderPathD(rx: number, ry: number, w: number, h: number) {
+  return `M ${w / 2} ${-h / 2}
+            L ${-w / 2} ${-h / 2}
+            A ${rx} ${ry} 0 0 0 ${-w / 2} ${h / 2}
+            L ${w / 2} ${h / 2}
+            A ${rx} ${ry} 0 0 0 ${w / 2} ${-h / 2}
+            A ${rx} ${ry} 0 0 0 ${w / 2} ${h / 2}`;
+}
+
+export const titledCylinder = 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 ry = h / 2;
+  const rx = ry / (2.5 + h / 50);
+  const w = bbox.width + rx + node.padding;
+  const { cssStyles } = node;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handdrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const linePath = createCylinderPathD(rx, ry, w, h);
+  const lineNode = rc.path(linePath, options);
+
+  const crossedCircle = shapeSvg.insert('g', ':first-child');
+  crossedCircle.insert(() => lineNode, ':first-child');
+
+  crossedCircle.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    crossedCircle.attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    crossedCircle.attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, crossedCircle);
+
+  node.intersect = function (point) {
+    const pos = intersect.rect(node, point);
+    const y = pos.y - (node.y ?? 0);
+
+    if (
+      ry != 0 &&
+      (Math.abs(y) < (node.height ?? 0) / 2 ||
+        (Math.abs(y) == (node.height ?? 0) / 2 &&
+          Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx))
+    ) {
+      let x = rx * rx * (1 - (y * y) / (ry * ry));
+      if (x != 0) {
+        x = Math.sqrt(x);
+      }
+      x = rx - x;
+      if (point.x - (node.x ?? 0) > 0) {
+        x = -x;
+      }
+
+      pos.x += x;
+    }
+
+    return pos;
+  };
+
+  return shapeSvg;
+};