diff --git a/cypress/platform/knsv-recursive.html b/cypress/platform/knsv-recursive.html index 40081024d..ee98c9651 100644 --- a/cypress/platform/knsv-recursive.html +++ b/cypress/platform/knsv-recursive.html @@ -95,7 +95,7 @@ } .mermaid svg { - /* font-size: 18px !important; */ + font-size: 16px !important; font-family: 'Recursive', serif; font-optical-sizing: auto; font-weight: 500; @@ -128,10 +128,10 @@ flowchart TD A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"]) n1 --x n4["Diamond"] n2 --o n5["Hexagon"] - n3 --> n6["Lean Left"] + n3 --> n6["Parallelogram"] n5 o--o n7["Trapezoid"] n4 x--x n8["Lean Right"] - n6 <--> n9["Lined Doc"] + n6 <--> n9(("Circle")) n8 --> n10["Rose"] n7 --> n11["Pine"] n9 --> n12["Peach"] @@ -141,7 +141,6 @@ flowchart TD n6@{ shape: lean-l} n7@{ shape: trap-b} n8@{ shape: lean-r} - n9@{ shape: lin-doc} n10:::Rose n11:::Pine n12:::Peach @@ -217,7 +216,7 @@ flowchart TD kanban: { htmlLabels: false, }, - fontSize: 12, + fontSize: 16, logLevel: 0, securityLevel: 'loose', callback, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts index f752e5000..3ed09bf2b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts @@ -26,11 +26,14 @@ export const createHexagonPathD = ( export async function hexagon(parent: D3Selection, node: Node) { const { labelStyles, nodeStyles } = styles2String(node); - const f = 4; + const f = node.look === 'neo' ? 3.5 : 4; node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const wa = 70; + const ha = 32; + + const labelPaddingX = node.look === 'neo' ? wa : nodePadding; + const labelPaddingY = node.look === 'neo' ? ha : nodePadding; if (node.width || node.height) { const originalHeight = node.height ?? 0; const m = originalHeight / f; @@ -43,7 +46,11 @@ export async function hexagon(parent: D3Selection< const h = (node?.height ? node?.height : bbox.height) + labelPaddingX; const m = h / f; - const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY; + const w = + (node?.width ? node?.width : bbox.width) + + 2 * m + + labelPaddingY - + (node.look === 'neo' ? 20 : 0); const points = [ { x: m, y: 0 }, { x: w - m, 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 03c8b8d3c..db8fb8f18 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts @@ -10,7 +10,8 @@ export async function lean_left(parent: D3Selectio const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const labelPaddingY = node.look === 'neo' ? 24 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 9 : 0; if (node.width || node.height) { node.width = node?.width ?? 0; @@ -29,7 +30,7 @@ export async function lean_left(parent: D3Selectio 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 }, { x: w + (3 * 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 b7e7c1409..851666e8d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts @@ -10,7 +10,8 @@ export async function lean_right(parent: D3Selecti const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const labelPaddingY = node.look === 'neo' ? 24 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 9 : 0; if (node.width || node.height) { node.width = node?.width ?? 0; @@ -30,7 +31,7 @@ export async function lean_right(parent: D3Selecti 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: (-3 * h) / 6, 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 84546c737..837f3cb3a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts @@ -56,8 +56,8 @@ export async function stadium(parent: D3Selection< const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 20 : 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 // also check if the width or height is less than minimum default values (50), 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 eee46096c..25409441e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -25,7 +25,8 @@ export async function trapezoid(parent: D3Selectio const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const nodePadding = node.padding ?? 0; - const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const labelPaddingY = node.look === 'neo' ? 24 : nodePadding; + const labelPaddingX = node.look === 'neo' ? 9 : 0; if (node.width || node.height) { node.width = node?.width ?? 0; @@ -43,7 +44,7 @@ export async function trapezoid(parent: D3Selectio } 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: (-3 * h) / 6, y: 0 },