From 6e3c37c98bf498e64baea3c8c0c6dbf08edcf012 Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 15 Jan 2025 20:49:53 +0530 Subject: [PATCH] Draft of second set of shapes [Card, Cylinder, Reversed Trapezoid, Odd, Tagged Rect] --- cypress/platform/omkarht-new-padding.html | 248 ++++++++++++++++++ .../rendering-elements/shapes/card.ts | 11 +- .../rendering-elements/shapes/cylinder.ts | 4 +- .../shapes/invertedTrapezoid.ts | 5 +- .../shapes/rectLeftInvArrow.ts | 5 +- .../rendering-elements/shapes/taggedRect.ts | 4 +- 6 files changed, 264 insertions(+), 13 deletions(-) create mode 100644 cypress/platform/omkarht-new-padding.html diff --git a/cypress/platform/omkarht-new-padding.html b/cypress/platform/omkarht-new-padding.html new file mode 100644 index 000000000..86a501b67 --- /dev/null +++ b/cypress/platform/omkarht-new-padding.html @@ -0,0 +1,248 @@ + + + + + + + + + + + + + + + + + + + +

Test Diagram

+
+ 
+---
+config:
+  theme: neo
+  layout: dagre
+---
+flowchart TD
+    A{"Cylinder"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
+    n1 --x n4["Rounded"]
+    n2 --o n5["Hexagon"]
+    n3 --> n6["Parallelogram"]
+    n5 o--o n7["Trapezoid"]
+    n4 x--x n8["Lean Right"]
+    n6 <--> n9(("Circle"))
+    n8 --> n10["Rose"]
+    n7 --> n11["Pine"]
+    n9 --> n12["Peach"]
+    n2@{ shape: rounded}
+    n4@{ shape: rounded}
+    n5@{ shape: hex}
+    n6@{ shape: lean-l}
+    n7@{ shape: trap-b}
+    n8@{ shape: lean-r}
+
+     n10:::Rose
+     n11:::Pine
+     n12:::Peach
+    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
+    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
+    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
+    n10 --x End
+    n11 --x End
+    n12 --x End
+
+
+ + 
+        ---
+        config:
+          theme: neo
+          layout: dagre
+        ---
+        flowchart TD
+        n1["Cylinder"]
+        n1@{ shape: database}
+        
+
+
+ + + + diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts index 6a8597402..52ca4f817 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts @@ -25,15 +25,18 @@ export async function card(parent: D3Selection, // as labelHelper does not take padding into account // also check if the width or height is less than minimum default values (50), // if so set it to min value + const nodePadding = node.padding ?? 0; + const labelPaddingX = node.look === 'neo' ? 25 : 0; + const labelPaddingY = node.look === 'neo' ? 24 : nodePadding; if (node.width || node.height) { - node.width = Math.max((node?.width ?? 0) - (node.padding ?? 0), 10); - node.height = Math.max((node?.height ?? 0) - (node.padding ?? 0), 10); + node.width = Math.max((node?.width ?? 0) - (labelPaddingX ?? 0), 10); + node.height = Math.max((node?.height ?? 0) - (labelPaddingY ?? 0), 10); } const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const totalWidth = (node?.width ? node?.width : bbox.width) + (node.padding ?? 0); - const totalHeight = (node?.height ? node?.height : bbox.height) + (node.padding ?? 0); + const totalWidth = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0); + const totalHeight = (node?.height ? node?.height : bbox.height) + (labelPaddingY ?? 0); const h = totalHeight; const w = totalWidth; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index 76fa7b388..b0270c8b5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -61,8 +61,8 @@ export async function cylinder(parent: D3Selection node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 24 : nodePadding; + const labelPaddingY = node.look === 'neo' ? 16 : nodePadding; if (node.width || node.height) { const originalWidth = node.width ?? 0; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts index 1ca28e824..fd5d5c41f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts @@ -29,7 +29,8 @@ export async function inv_trapezoid( node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2; + const labelPaddingY = node.look === 'neo' ? 24 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 19 : 0; if (node.width || node.height) { node.width = node?.width ?? 0; if (node.width < 10) { @@ -46,7 +47,7 @@ export async function inv_trapezoid( } const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const h = (node?.height ? node?.height : bbox.height) + labelPaddingY; - const w = node?.width ? node?.width : bbox.width; + const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2; const points = [ { x: 0, 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 57b739c67..b776734b2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -12,9 +12,8 @@ export async function rect_left_inv_arrow( const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : (node.padding ?? 0); - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : (node.padding ?? 0); - + const labelPaddingX = node.look === 'neo' ? 21 : (nodePadding ?? 0); + const labelPaddingY = node.look === 'neo' ? 12 : (nodePadding ?? 0); if (node.width || node.height) { node.width = (node?.width ?? 10) - labelPaddingX * 2; node.height = (node?.height ?? 10) - labelPaddingY * 2; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts index 86cf87de0..eda74779f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts @@ -13,8 +13,8 @@ export async function taggedRect(parent: D3Selecti node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 16 : nodePadding; + const labelPaddingY = node.look === 'neo' ? 12 : nodePadding; // If incoming height & width are present, subtract the padding from them // as labelHelper does not take padding into account