diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts index d2f3a7111..4e382f829 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', 'handDrawn'] as const; -const directions = ['TB', 'BT', 'LR', 'RL'] as const; +const looks = ['classic'] as const; +const directions = ['TB'] as const; const newShapesSet1 = [ 'triangle', 'slopedRect', @@ -36,19 +36,13 @@ const newShapesSet4 = [ const newShapesSet5 = [ 'linedWaveEdgedRect', 'taggedWaveEdgedRectangle', - 'curlyBraces', + 'curlyBraceLeft', 'curvedTrapezoid', 'waveRectangle', ] as const; // Aggregate all shape sets into a single array -const newShapesSets = [ - newShapesSet1, - newShapesSet2, - newShapesSet3, - newShapesSet4, - newShapesSet5, -] as const; +const newShapesSets = [newShapesSet2] as const; looks.forEach((look) => { directions.forEach((direction) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index 2505bffc5..75e1f0ba7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -48,7 +48,7 @@ import { multiWaveEdgedRectangle } from './shapes/multiWaveEdgedRectangle.js'; import { windowPane } from './shapes/windowPane.js'; import { linedWaveEdgedRect } from './shapes/linedWaveEdgedRect.js'; import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js'; -import { curlyBraces } from './shapes/curlyBraces.js'; +import { curlyBraceLeft } from './shapes/curlyBraceLeft.js'; //Use these names as the left side to render shapes. const shapes = { @@ -213,9 +213,9 @@ const shapes = { lightningBolt, bolt: lightningBolt, 'com-link': lightningBolt, - curlyBraces, - brace: curlyBraces, - comment: curlyBraces, + curlyBraceLeft, + brace: curlyBraceLeft, + comment: curlyBraceLeft, hourglass, odd: rect_left_inv_arrow, labelRect, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts similarity index 86% rename from packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts rename to packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index ea294e862..d68afc91d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -31,13 +31,13 @@ function generateCirclePoints( const angle = startAngleRad + i * angleStep; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); - points.push({ x, y }); + points.push({ x: -x, y: -y }); } return points; } -export const curlyBraces = async (parent: SVGAElement, node: Node) => { +export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); @@ -48,25 +48,25 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { const { cssStyles } = node; const points = [ - ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0), - { x: w / 2 + radius, y: -radius }, + ...generateCirclePoints(w / 2, -h / 2, 10, 30, -90, 0), + { x: -w / 2 - radius, y: radius }, ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270), ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180), - { x: w / 2 + radius, y: h / 2 }, + { x: -w / 2 - radius, y: -h / 2 }, ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90), ]; const rectPoints = [ - { x: -w / 2, y: -h / 2 - radius }, { x: w / 2, y: -h / 2 - radius }, + { x: -w / 2, y: -h / 2 - radius }, ...generateCirclePoints(w / 2, -h / 2, radius, 20, -90, 0), - { x: w / 2 + radius, y: -radius }, + { x: -w / 2 - radius, y: -radius }, ...generateCirclePoints(w / 2 + w * 0.1, -radius, radius, 20, -180, -270), ...generateCirclePoints(w / 2 + w * 0.1, radius, radius, 20, -90, -180), - { x: w / 2 + radius, y: h / 2 }, + { x: -w / 2 - radius, y: h / 2 }, ...generateCirclePoints(w / 2, h / 2, radius, 20, 0, 90), - { x: w / 2, y: h / 2 + radius }, { x: -w / 2, y: h / 2 + radius }, + { x: w / 2, y: h / 2 + radius }, ]; // @ts-ignore - rough is not typed @@ -95,11 +95,11 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { bowTieRectShape.selectAll('path').attr('style', nodeStyles); } - bowTieRectShape.attr('transform', `translate(${-radius}, 0)`); + bowTieRectShape.attr('transform', `translate(${radius}, 0)`); label.attr( 'transform', - `translate(${-w / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, bowTieRectShape);