Add shape flippedTriangle

cypress/integration/rendering/newShapes.spec.js

@@ -27,13 +27,23 @@ describe('newShapes', () => {
       {}
     );
   });
-  it('4: should render new FlowChart for New Shapes', () => {
+  it('4: should render new flippedTriangle shape', () => {
+    imgSnapshotTest(
+      `flowchart
+          KS --> AC@{ shape: flippedTriangle, label:"This is Final Label" }@
+          RE --> AC
+        `,
+      {}
+    );
+  });
+  it('5: should render new FlowChart for New Shapes', () => {
     renderGraph(
       `
     flowchart
     A@{ shape: stateStart }@
     B@{ shape: crossedCircle, label: "Start Defining Test Case" }@
     C@{ shape: tiltedCylinder, label: "write your Test Case"}@
+    D@{ shape: flippedTriangle, label: "new Test Case"}@
     E@{ shape: waveRectangle, label: "Execute Test Case" }@
     F@{ shape: slopedRect, label: "Test Passed?" }@
     G@{ shape: bowTieRect, label: "Pass" }@
@@ -42,7 +52,8 @@ describe('newShapes', () => {
     
     A --> B
     B --> C
-    C --> E
+    C --> D
+    D --> E
     E --> F
     F -->|Yes| G
     F -->|No| H

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -36,6 +36,7 @@ import { crossedCircle } from './shapes/crossedCircle.js';
 import { waveRectangle } from './shapes/waveRectangle.js';
 import { titledCylinder } from './shapes/tiltedCylinder.js';
 import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
+import { flippedTriangle } from './shapes/flippedTriangle.js';
 
 const shapes = {
   state,
@@ -75,6 +76,7 @@ const shapes = {
   waveRectangle,
   titledCylinder,
   trapezoidalPentagon,
+  flippedTriangle,
 };
 
 const nodeElems = new Map();

packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts

@@ -0,0 +1,62 @@
+import { log } from '$root/logger.js';
+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 { createPathFromPoints } from './util.js';
+
+export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = bbox.width + node.padding + 20;
+  const h = (Math.sqrt(3) / 2) * w + (node.padding ?? 0);
+  const points = [
+    { x: 0, y: -h },
+    { x: w, y: -h },
+    { x: w / 2, y: 0 },
+  ];
+
+  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 pathData = createPathFromPoints(points);
+  const roughNode = rc.path(pathData, options);
+
+  const polygon = shapeSvg
+    .insert(() => roughNode, ':first-child')
+    .attr('transform', `translate(${-w / 2}, ${h / 2})`);
+
+  if (cssStyles) {
+    polygon.attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
+  }
+
+  node.width = w;
+  node.height = h;
+
+  updateNodeBounds(node, polygon);
+
+  label.attr('transform', `translate(${-bbox.width / 2}, ${-h / 2})`);
+
+  node.intersect = function (point) {
+    log.info('Triangle intersect', node, points, point);
+    return intersect.polygon(node, points, point);
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts

@@ -35,23 +35,23 @@ export const titledCylinder = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const linePath = createCylinderPathD(rx, ry, w, h);
-  const lineNode = rc.path(linePath, options);
+  const cylinderPath = createCylinderPathD(rx, ry, w, h);
+  const cylinderNode = rc.path(cylinderPath, options);
 
-  const crossedCircle = shapeSvg.insert('g', ':first-child');
-  crossedCircle.insert(() => lineNode, ':first-child');
+  const titledCylinder = shapeSvg.insert('g', ':first-child');
+  titledCylinder.insert(() => cylinderNode, ':first-child');
 
-  crossedCircle.attr('class', 'basic label-container');
+  titledCylinder.attr('class', 'basic label-container');
 
   if (cssStyles) {
-    crossedCircle.attr('style', cssStyles);
+    titledCylinder.attr('style', cssStyles);
   }
 
   if (nodeStyles) {
-    crossedCircle.attr('style', nodeStyles);
+    titledCylinder.attr('style', nodeStyles);
   }
 
-  updateNodeBounds(node, crossedCircle);
+  updateNodeBounds(node, titledCylinder);
 
   node.intersect = function (point) {
     const pos = intersect.rect(node, point);