marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-07 06:14:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Draft of first set of shapes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-12-20 12:38:49 +01:00
parent bf20e0615a
commit 35aa869adc
6 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
cypress/platform/knsv-recursive.html
View File

@@ -95,7 +95,7 @@
} }
.mermaid svg { .mermaid svg {
/* font-size: 18px !important; */ font-size: 16px !important;
font-family: 'Recursive', serif; font-family: 'Recursive', serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 500; font-weight: 500;
@@ -128,10 +128,10 @@ flowchart TD
A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"]) A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
n1 --x n4["Diamond"] n1 --x n4["Diamond"]
n2 --o n5["Hexagon"] n2 --o n5["Hexagon"]
n3 --> n6["Lean Left"] n3 --> n6["Parallelogram"]
n5 o--o n7["Trapezoid"] n5 o--o n7["Trapezoid"]
n4 x--x n8["Lean Right"] n4 x--x n8["Lean Right"]
n6 <--> n9["Lined Doc"] n6 <--> n9(("Circle"))
n8 --> n10["Rose"] n8 --> n10["Rose"]
n7 --> n11["Pine"] n7 --> n11["Pine"]
n9 --> n12["Peach"] n9 --> n12["Peach"]
@@ -141,7 +141,6 @@ flowchart TD
n6@{ shape: lean-l} n6@{ shape: lean-l}
n7@{ shape: trap-b} n7@{ shape: trap-b}
n8@{ shape: lean-r} n8@{ shape: lean-r}
n9@{ shape: lin-doc}
n10:::Rose n10:::Rose
n11:::Pine n11:::Pine
n12:::Peach n12:::Peach
@@ -217,7 +216,7 @@ flowchart TD
kanban: { kanban: {
htmlLabels: false, htmlLabels: false,
}, },
fontSize: 12, fontSize: 16,
logLevel: 0, logLevel: 0,
securityLevel: 'loose', securityLevel: 'loose',
callback, callback,

15
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@@ -26,11 +26,14 @@ export const createHexagonPathD = (
export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) { export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
const f = 4; const f = node.look === 'neo' ? 3.5 : 4;
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; const wa = 70;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; const ha = 32;
const labelPaddingX = node.look === 'neo' ? wa : nodePadding;
const labelPaddingY = node.look === 'neo' ? ha : nodePadding;
if (node.width || node.height) { if (node.width || node.height) {
const originalHeight = node.height ?? 0; const originalHeight = node.height ?? 0;
const m = originalHeight / f; const m = originalHeight / f;
@@ -43,7 +46,11 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
const h = (node?.height ? node?.height : bbox.height) + labelPaddingX; const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
const m = h / f; 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 = [ const points = [
{ x: m, y: 0 }, { x: m, y: 0 },
{ x: w - m, y: 0 }, { x: w - m, y: 0 },

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@@ -10,7 +10,8 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; 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) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
@@ -29,7 +30,7 @@ export async function lean_left<T extends SVGGraphicsElement>(parent: D3Selectio
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY; 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 = [ const points = [
{ x: 0, y: 0 }, { x: 0, y: 0 },
{ x: w + (3 * h) / 6, y: 0 }, { x: w + (3 * h) / 6, y: 0 },

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@@ -10,7 +10,8 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; 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) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
@@ -30,7 +31,7 @@ export async function lean_right<T extends SVGGraphicsElement>(parent: D3Selecti
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY; 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 = [ const points = [
{ x: (-3 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@@ -56,8 +56,8 @@ export async function stadium<T extends SVGGraphicsElement>(parent: D3Selection<
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; const labelPaddingX = node.look === 'neo' ? 20 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; const labelPaddingY = node.look === 'neo' ? 12 : nodePadding;
// If incoming height & width are present, subtract the padding from them // If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account // as labelHelper does not take padding into account
// also check if the width or height is less than minimum default values (50), // also check if the width or height is less than minimum default values (50),

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@@ -25,7 +25,8 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; 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) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
@@ -43,7 +44,7 @@ export async function trapezoid<T extends SVGGraphicsElement>(parent: D3Selectio
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY; 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 = [ const points = [
{ x: (-3 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },