From d01e180caf790d6703d72236eedf1e7a68d46913 Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Sat, 21 Sep 2024 16:44:19 +0530 Subject: [PATCH] Updated shapes --- .../integration/rendering/newShapes.spec.ts | 18 ++++++------ cypress/platform/saurabh.html | 23 +++++++-------- .../rendering-elements/shapes/dividedRect.ts | 29 +++++++++---------- .../shapes/linedWaveEdgedRect.ts | 25 ++++++---------- .../rendering-elements/shapes/windowPane.ts | 25 ++++------------ 5 files changed, 48 insertions(+), 72 deletions(-) diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts index 67d862ea4..823cc5a95 100644 --- a/cypress/integration/rendering/newShapes.spec.ts +++ b/cypress/integration/rendering/newShapes.spec.ts @@ -1,7 +1,7 @@ import { imgSnapshotTest } from '../../helpers/util.ts'; -const looks = ['classic'] as const; -const directions = ['TB'] as const; +const looks = ['classic', 'handDrawn'] as const; +const directions = ['TB', 'BT', 'LR', 'RL'] as const; const newShapesSet1 = [ 'triangle', 'sloped-rectangle', @@ -68,7 +68,7 @@ looks.forEach((look) => { it(`with label`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`; }); imgSnapshotTest(flowchartCode, { look }); }); @@ -76,7 +76,7 @@ looks.forEach((look) => { it(`connect all shapes with each other`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`; + flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`; }); for (let i = 0; i < newShapesSet.length; i++) { for (let j = i + 1; j < newShapesSet.length; j++) { @@ -89,7 +89,7 @@ looks.forEach((look) => { it(`with very long label`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`; }); imgSnapshotTest(flowchartCode, { look }); }); @@ -97,7 +97,7 @@ looks.forEach((look) => { it(`with markdown htmlLabels:true`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }\n`; }); imgSnapshotTest(flowchartCode, { look }); }); @@ -105,7 +105,7 @@ looks.forEach((look) => { it(`with markdown htmlLabels:false`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold**
and strong for ${newShape} shape' }\n`; }); imgSnapshotTest(flowchartCode, { look, @@ -117,7 +117,7 @@ looks.forEach((look) => { it(`with styles`, () => { let flowchartCode = `flowchart ${direction}\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`; flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`; }); imgSnapshotTest(flowchartCode, { look }); @@ -127,7 +127,7 @@ looks.forEach((look) => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`; newShapesSet.forEach((newShape, index) => { - flowchartCode += ` n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`; + flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`; flowchartCode += ` n${index}${index}:::customClazz\n`; }); imgSnapshotTest(flowchartCode, { look }); diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html index ecf3463c1..3c3bdff4e 100644 --- a/cypress/platform/saurabh.html +++ b/cypress/platform/saurabh.html @@ -63,16 +63,10 @@ 
       flowchart LR
-       B2@{ icon: "fa:address-book",  form: "square", pos: "b", h: 80 }
-
-
-       W --> B2 --> x1
-       X --> B2 --> x2
-       Y --> B2 --> x3
-       Z --> B2 --> x4 
-       B2 --sas--> C
-
-       A --> B2
+      n21@{ shape: subproc,label: "Untitled Node"}
+      n52@{ shape: internal-storage,label: "Untitled Node"}
+      n53@{ shape: div-rect,label: "Untitled Node"}
+      n54@{ shape: lin-doc,label: "Untitled Node"}
@@ -150,14 +144,17 @@ // htmlLabels: false, flowchart: { titleTopMargin: 10, htmlLabels: true }, // fontFamily: 'Caveat', - fontFamily: 'Kalam', - // fontFamily: 'courier', + // fontFamily: 'Kalam', + fontFamily: 'courier', sequence: { actorFontFamily: 'courier', noteFontFamily: 'courier', messageFontFamily: 'courier', }, - fontSize: 12, + themeVariables: { + fontSize: 50, + fontFamily: 'courier', + }, logLevel: 0, securityLevel: 'loose', }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index a9f80d009..8083a6611 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -1,4 +1,4 @@ -import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js'; +import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '../../types.d.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; @@ -25,23 +25,22 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { options.fillStyle = 'solid'; } - const outerPathPoints = [ - { x, y: y }, - { x, y: -y }, + const pts = [ + { x, y: y + rectOffset }, + { x: -x, y: y + rectOffset }, { x: -x, y: -y }, - { x: -x, y: y }, - ]; - const innerPathPoints = [ - { x: x, y: y + rectOffset }, + { x, y: -y }, + { x, y }, + { x: -x, y }, { x: -x, y: y + rectOffset }, ]; - const outerPathData = createPathFromPoints(outerPathPoints); - const outerNode = rc.path(outerPathData, options); - const innerPathData = createPathFromPoints(innerPathPoints); - const innerNode = rc.path(innerPathData, options); - const polygon = shapeSvg.insert(() => outerNode, ':first-child'); - polygon.insert(() => innerNode); + const poly = rc.polygon( + pts.map((p) => [p.x, p.y]), + options + ); + + const polygon = shapeSvg.insert(() => poly, ':first-child'); polygon.attr('class', 'basic label-container'); if (cssStyles && node.look !== 'handDrawn') { @@ -60,7 +59,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { updateNodeBounds(node, polygon); node.intersect = function (point) { - const pos = intersect.polygon(node, outerPathPoints, point); + const pos = intersect.rect(node, point); return pos; }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index d1f23c492..6e4d485d3 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -3,7 +3,6 @@ import { updateNodeBounds, getNodeClasses, generateFullSineWavePoints, - createPathFromPoints, } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '../../types.d.ts'; @@ -30,6 +29,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { } const points = [ + { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 }, { x: -w / 2 - (w / 2) * 0.1, y: finalH / 2 }, ...generateFullSineWavePoints( -w / 2 - (w / 2) * 0.1, @@ -41,24 +41,17 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { ), { x: w / 2 + (w / 2) * 0.1, y: -finalH / 2 }, { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 }, + { x: -w / 2, y: -finalH / 2 }, + { x: -w / 2, y: (finalH / 2) * 1.1 }, + { x: -w / 2, y: -finalH / 2 }, ]; - const x = -w / 2; - const y = -finalH / 2; + const poly = rc.polygon( + points.map((p) => [p.x, p.y]), + options + ); - const innerPathPoints = [ - { x: x, y: y }, - { x: x, y: -y * 1.1 }, - ]; - - const waveEdgeRectPath = createPathFromPoints(points); - const waveEdgeRectNode = rc.path(waveEdgeRectPath, options); - - const innerSecondPath = createPathFromPoints(innerPathPoints); - const innerSecondNode = rc.path(innerSecondPath, options); - - const waveEdgeRect = shapeSvg.insert(() => innerSecondNode, ':first-child'); - waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child'); + const waveEdgeRect = shapeSvg.insert(() => poly, ':first-child'); waveEdgeRect.attr('class', 'basic label-container'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index fa21c3a93..59aa208ef 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -1,4 +1,4 @@ -import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js'; +import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; import type { Node } from '../../types.d.ts'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; @@ -26,31 +26,18 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { { x: x + w, y: y - rectOffset }, ]; - const innerPathPoints = [ - { x: x - rectOffset, y }, - { x: x + w, y }, - ]; - - const innerSecondPathPoints = [ - { x, y: y - rectOffset }, - { x, y: y + h }, - ]; + const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} + M${x - rectOffset},${y} L${x + w},${y} + M${x},${y - rectOffset} L${x},${y + h}`; if (node.look !== 'handDrawn') { options.roughness = 0; options.fillStyle = 'solid'; } - const outerPath = createPathFromPoints(outerPathPoints); - const outerNode = rc.path(outerPath, options); - const innerPath = createPathFromPoints(innerPathPoints); - const innerNode = rc.path(innerPath, options); - const innerSecondPath = createPathFromPoints(innerSecondPathPoints); - const innerSecondNode = rc.path(innerSecondPath, options); + const no = rc.path(path, options); - const windowPane = shapeSvg.insert(() => innerNode, ':first-child'); - windowPane.insert(() => innerSecondNode, ':first-child'); - windowPane.insert(() => outerNode, ':first-child'); + const windowPane = shapeSvg.insert(() => no, ':first-child'); windowPane.attr('transform', `translate(${rectOffset / 2}, ${rectOffset / 2})`); windowPane.attr('class', 'basic label-container');