From e7d9e1b2232ab10725ddfdd88eac9fcf4e594763 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 18 Jun 2024 15:10:47 +0200 Subject: [PATCH 1/3] MC-1730 Putting shadows back --- packages/mermaid/src/diagrams/state/styles.js | 2 +- packages/mermaid/src/styles.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js index 371b56b02..a9b6cc088 100644 --- a/packages/mermaid/src/diagrams/state/styles.js +++ b/packages/mermaid/src/diagrams/state/styles.js @@ -174,7 +174,7 @@ g.stateGroup line { .state-shadow-neo { - filter: ${options.dropShadow} ); + filter: ${options.dropShadow}; } diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts index f50fdff99..e91b4815f 100644 --- a/packages/mermaid/src/styles.ts +++ b/packages/mermaid/src/styles.ts @@ -76,19 +76,19 @@ const getStyles = ( [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon { stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; - filter: ${options.dropShadow} ); + filter: ${options.dropShadow}; } [data-look="neo"].node rect, [data-look="neo"].node circle, [data-look="neo"].node polygon { stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; - filter: ${options.dropShadow} ); + filter: ${options.dropShadow}; } [data-look="neo"].node circle{ stroke: $(options.nodeBorder); stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder}; - filter: ${options.dropShadow} ); + filter: ${options.dropShadow}; } [data-look="neo"].node circle .state-start{ From 1c1dbe0eb76a8ef68f4f047b4a7f332fa2cf8114 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 18 Jun 2024 15:33:28 +0200 Subject: [PATCH 2/3] 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 }, From 416a9fa06914f9d64aa328a9a609dcc02bf8774e Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 18 Jun 2024 15:35:16 +0200 Subject: [PATCH 3/3] Fix different shapes neo look for flowchart --- cypress/platform/ash.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/cypress/platform/ash.html b/cypress/platform/ash.html index 57d743485..b15733d52 100644 --- a/cypress/platform/ash.html +++ b/cypress/platform/ash.html @@ -78,6 +78,7 @@ 
 flowchart
    node
+   rounded(rounded)
    id1([This is the text in the box])
    id2((circle))
    id3(((double circle)))
@@ -87,7 +88,9 @@ flowchart
    id7[/This is the text in the box/]
    id8[\This is the text in the box\]
    A[/Christmas\]
-       B[\Christmas/]
+   B[\Christmas/]
+   sub[[subroutine]]
+   db[(Database)]