From 809fc1ce30eac634bf8679d03631a5a18aac217c Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Fri, 26 Jul 2024 11:14:54 +0200 Subject: [PATCH] fix: added triangle placeholder --- cypress/platform/knsv2.html | 14 +--- .../rendering-elements/nodes.js | 2 + .../rendering-elements/shapes/triangle.ts | 83 +++++++++++++++++++ 3 files changed, 89 insertions(+), 10 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 7ba9a8646..43dfbce63 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -49,16 +49,10 @@ 
 flowchart
-      A --> D@{ shape: roundedRect
-      }@
-
-      A --> D@{ shape: roundedRect, icon: car }@
-
-      D@{ shape: roundedRect }@ --> B
-      A@{
-        shape: hexagon,
-        icon: car
-      }@ --> B
+     
+      node_3@{ shape: triangle }@
+     
+      
   
 flowchart
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 664164fa3..1598f2f5e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -26,6 +26,7 @@ import { lean_left } from './shapes/leanLeft.js';
 import { trapezoid } from './shapes/trapezoid.js';
 import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
 import { labelRect } from './shapes/labelRect.js';
+import { triangle } from './shapes/triangle.js';
 
 const shapes = {
   state,
@@ -55,6 +56,7 @@ const shapes = {
   card,
   shadedProcess,
   anchor,
+  triangle,
 };
 
 const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
new file mode 100644
index 000000000..fbd58aeb3
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
@@ -0,0 +1,83 @@
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import intersect from '../intersect/index.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 { insertPolygonShape } from './insertPolygonShape.js';
+
+export const createHexagonPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  m: number
+): string => {
+  return [
+    `M${x + m},${y}`,
+    `L${x + width - m},${y}`,
+    `L${x + width},${y - height / 2}`,
+    `L${x + width - m},${y - height}`,
+    `L${x + m},${y - height}`,
+    `L${x},${y - height / 2}`,
+    'Z',
+  ].join(' ');
+};
+
+export const triangle = async (parent: SVGAElement, node: Node): Promise => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const f = 4;
+  const h = bbox.height + node.padding;
+  const m = h / f;
+  const w = bbox.width + 2 * m + node.padding;
+  const points = [
+    { x: m, y: 0 },
+    { x: w - m, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w - m, y: -h },
+    { x: m, y: -h },
+    { x: 0, y: -h / 2 },
+  ];
+
+  let polygon: d3.Selection;
+  const { cssStyles } = node;
+
+  if (node.look === 'handdrawn') {
+    // @ts-ignore - rough is not typed
+    const rc = rough.svg(shapeSvg);
+    const options = userNodeOverrides(node, {});
+    const pathData = createHexagonPathD(0, 0, w, h, m);
+    const roughNode = rc.path(pathData, options);
+
+    polygon = shapeSvg
+      .insert(() => roughNode, ':first-child')
+      .attr('transform', `translate(${-w / 2}, ${h / 2})`);
+
+    if (cssStyles) {
+      polygon.attr('style', cssStyles);
+    }
+  } else {
+    polygon = insertPolygonShape(shapeSvg, w, h, points);
+  }
+
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
+  }
+
+  node.width = w;
+  node.height = h;
+
+  updateNodeBounds(node, polygon);
+
+  node.intersect = function (point) {
+    return intersect.polygon(node, points, point);
+  };
+
+  return shapeSvg;
+};