From 0f635ed3446bb9b5ab61fcdf62f4493b3744cd89 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Fri, 9 Aug 2024 19:39:01 +0530 Subject: [PATCH] Add shape flippedTriangle --- .../integration/rendering/newShapes.spec.js | 15 ++++- .../rendering-elements/nodes.js | 2 + .../shapes/flippedTriangle.ts | 62 +++++++++++++++++++ .../shapes/tiltedCylinder.ts | 16 ++--- 4 files changed, 85 insertions(+), 10 deletions(-) create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts diff --git a/cypress/integration/rendering/newShapes.spec.js b/cypress/integration/rendering/newShapes.spec.js index 223ce405f8..1d64866e59 100644 --- a/cypress/integration/rendering/newShapes.spec.js +++ b/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 diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index ee479ea0e1..a06c9e2c33 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/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(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts new file mode 100644 index 0000000000..8d2f14be85 --- /dev/null +++ b/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 => { + 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; +}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index 46f1332695..74da526124 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/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);