Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#2139 Applying user defined classes properly when calculating shape width #4722

Merged
merged 1 commit into from
Aug 11, 2023
Merged

#2139 Applying user defined classes properly when calculating shape width #4722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 15 additions & 6 deletions cypress/platform/knsv2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,21 @@
</head>
<body>
<pre id="diagram" class="mermaid">
---
title: Simple flowchart with invisible edges
---
flowchart TD
A ~~~ B
</pre
flowchart
classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
CS(Customer Awareness Journey):::mainCategories
</pre
>
<pre id="diagram" class="mermaid">
flowchart
Node1:::class1 --> Node2:::class2
Node1:::class1 --> Node3:::class2
Node3 --> Node4((I am a circle)):::larger

classDef class1 fill:lightblue
classDef class2 fill:pink
classDef larger font-size:30px,fill:yellow
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
Expand Down
102 changes: 87 additions & 15 deletions packages/mermaid/src/dagre-wrapper/nodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,25 @@
import { parseMember } from '../diagrams/class/svgDraw.js';
import { evaluate } from '../diagrams/common/common.js';

const formatClass = (str) => {
if (str) {
return ' ' + str;
}
return '';
};
const getClassesFromNode = (node, otherClasses) => {
return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
node.class
)}`;
};

const question = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand Down Expand Up @@ -70,7 +87,12 @@
};

const hexagon = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 90 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L90 

Added line #L90 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const f = 4;
const h = bbox.height + node.padding;
Expand All @@ -97,7 +119,12 @@
};

const rect_left_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 122 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L122 

Added line #L122 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -123,7 +150,7 @@
};

const lean_right = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -146,7 +173,12 @@
};

const lean_left = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 176 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L176 

Added line #L176 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -169,7 +201,12 @@
};

const trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 204 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L204 

Added line #L204 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -192,7 +229,12 @@
};

const inv_trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 232 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L232 

Added line #L232 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -215,7 +257,12 @@
};

const rect_right_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 260 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L260 

Added line #L260 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand All @@ -239,7 +286,12 @@
};

const cylinder = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 289 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L289 

Added line #L289 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const rx = w / 2;
Expand Down Expand Up @@ -314,7 +366,7 @@
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
'node ' + node.classes,
'node ' + node.classes + ' ' + node.class,
true
);

Expand Down Expand Up @@ -360,7 +412,7 @@
const labelRect = async (parent, node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true);

log.trace('Classes = ', node.classes);
log.trace('Classes = ', node.class);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');

Expand Down Expand Up @@ -545,7 +597,12 @@
};

const stadium = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(

Check warning on line 600 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L600 

Added line #L600 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);

const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding;
Expand All @@ -571,7 +628,12 @@
};

const circle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox, halfPadding } = await labelHelper(

Check warning on line 631 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L631 

Added line #L631 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);
const circle = shapeSvg.insert('circle', ':first-child');

// center the circle around its coordinate
Expand All @@ -596,7 +658,12 @@
};

const doublecircle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox, halfPadding } = await labelHelper(

Check warning on line 661 in packages/mermaid/src/dagre-wrapper/nodes.js

View check run for this annotation

Codecov / codecov/patch

packages/mermaid/src/dagre-wrapper/nodes.js#L661 

Added line #L661 was not covered by tests
parent,
node,
getClassesFromNode(node, undefined),
true
);
const gap = 5;
const circleGroup = shapeSvg.insert('g', ':first-child');
const outerCircle = circleGroup.insert('circle');
Expand Down Expand Up @@ -634,7 +701,12 @@
};

const subroutine = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);

const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/dagre-wrapper/shapes/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
} else {
classes = _classes;
}

// Add outer g element
const shapeSvg = parent
.insert('g')
Expand Down Expand Up @@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
)
);
}

// Get the size of the label
let bbox = text.getBBox();
const halfPadding = node.padding / 2;
Expand Down