From 1c1dbe0eb76a8ef68f4f047b4a7f332fa2cf8114 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 18 Jun 2024 15:33:28 +0200 Subject: [PATCH] Fix different shapes neo look for flowchart --- cypress/platform/ash.html | 11 ++++++++++- .../rendering-elements/shapes/hexagon.ts | 5 +++-- .../rendering-elements/shapes/invertedTrapezoid.ts | 7 ++++--- .../rendering-elements/shapes/leanLeft.ts | 7 ++++--- .../rendering-elements/shapes/leanRight.ts | 6 ++++-- .../rendering-elements/shapes/rectLeftInvArrow.ts | 7 ++++--- .../rendering-elements/shapes/stadium.ts | 8 ++------ .../rendering-elements/shapes/subroutine.ts | 10 ++++++---- .../rendering-elements/shapes/trapezoid.ts | 7 ++++--- 9 files changed, 41 insertions(+), 27 deletions(-) diff --git a/cypress/platform/ash.html b/cypress/platform/ash.html index bcad21c95..57d743485 100644 --- a/cypress/platform/ash.html +++ b/cypress/platform/ash.html @@ -84,7 +84,11 @@ flowchart id4>Asymetrical] id5{This is the text in the box} id6{{This is the text in the box}} - + id7[/This is the text in the box/] + id8[\This is the text in the box\] + A[/Christmas\] + B[\Christmas/] + @@ -102,6 +106,11 @@ flowchart id4>Asymetrical] id5{This is the text in the box} id6{{This is the text in the box}} + id7[/This is the text in the box/] + id8[\This is the text in the box\] + B[/Christmas\] + + => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - - const w = bbox.width + node.padding; - const h = bbox.height + node.padding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; const points = [ { x: h / 6, y: 0 }, { x: w - h / 6, y: 0 }, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts index 78b36ddb8..8a3f3ebd4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts @@ -22,9 +22,10 @@ export const createLeanLeftPathD = ( export const lean_left = async (parent: SVGAElement, node: Node): Promise => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - - const w = bbox.width + node.padding; - const h = bbox.height + node.padding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; const points = [ { x: (2 * h) / 6, y: 0 }, { x: w + h / 6, y: 0 }, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts index 3b3a0b465..53e34a0aa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts @@ -23,8 +23,10 @@ export const createLeanRightPathD = ( export const lean_right = async (parent: SVGAElement, node: Node): Promise => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const w = bbox.width + node.padding; - const h = bbox.height + node.padding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; const points = [ { x: (-2 * h) / 6, y: 0 }, { x: w - h / 6, y: 0 }, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index 8a3750cd3..7acdb261c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -21,9 +21,10 @@ export const rect_left_inv_arrow = async ( node: Node ): Promise => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const labelPadding = node.look === 'neo' ? node.padding * 2 : node.padding; - const w = bbox.width + labelPadding; - const h = bbox.height + labelPadding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; const points = [ { x: -h / 2, y: 0 }, { x: w, y: 0 }, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts index c3f852193..ea9a702e0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts @@ -53,12 +53,8 @@ export const createStadiumPathD = ( export const stadium = async (parent: SVGAElement, node: Node) => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - let labelPaddingX = node.padding; - const labelPaddingY = node.padding; - - if (node.look === 'neo') { - labelPaddingX = node.padding ? node.padding * 2 : 0; - } + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; const h = bbox.height + labelPaddingX; const w = bbox.width + h / 4 + labelPaddingY; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index f004c4ff5..378c93883 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts @@ -34,10 +34,12 @@ export const createSubroutinePathD = ( export const subroutine = async (parent: SVGAElement, node: Node) => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const halfPadding = (node?.padding || 0) / 2; - const w = bbox.width + node.padding; - const h = bbox.height + node.padding; - const x = -bbox.width / 2 - halfPadding; - const y = -bbox.height / 2 - halfPadding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; + const x = -bbox.width / 2 - labelPaddingX / 2; + const y = -bbox.height / 2 - labelPaddingY / 2; let rect; const { cssStyles } = node; const points = [ diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index 5fcd76d70..3baabe2ec 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -22,9 +22,10 @@ export const createTrapezoidPathD = ( export const trapezoid = async (parent: SVGAElement, node: Node): Promise => { const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - - const w = bbox.width + node.padding; - const h = bbox.height + node.padding; + const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; + const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; + const w = bbox.width + labelPaddingY; + const h = bbox.height + labelPaddingX; const points = [ { x: (-2 * h) / 6, y: 0 }, { x: w + (2 * h) / 6, y: 0 },