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

MC-2642 Removing code that makes class diagram arrows go wrong

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-01-29 16:54:44 +01:00
parent 7e9a29f486
commit c3b78a37a6
2 changed files with 99 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
cypress/platform/knsv2.html
View File

@@ -36,7 +36,7 @@
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background: #333; */ background: #333;
font-family: 'Arial'; font-family: 'Arial';
/* color: white; */ /* color: white; */
/* font-size: 18px !important; */ /* font-size: 18px !important; */
@@ -105,10 +105,9 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@-.-> B A e1@-.-> B & C e2@--> D
C e2@--> D
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
@@ -152,12 +151,12 @@ config:
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest look: neo
look: classic theme: redux
layout: elk
--- ---
flowchart LR flowchart LR
A e1@--> BB A e1@--> BB
e1@{ animation: fast}
</pre> </pre>
<hr /> <hr />
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
@@ -180,12 +179,12 @@ config:
<!-- Circle --> <!-- Circle -->
<hr /> <hr />
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
A e1@==o B A e1@==o B
e1@{ animate: true} e1@{ animate: true}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
theme: forest theme: forest
@@ -211,6 +210,93 @@ config:
A e1@==o BB A e1@==o BB
e1@{ animate: false} e1@{ animate: false}
</pre> </pre>
<pre id="diagram4" class="mermaid">
---
config:
theme: redux-dark
layout: dagre
---
classDiagram
direction TB
class Animal {
+int age
+String gender
+isMammal()
+mate()
}
class Duck {
+String beakColor
+swim()
+quack()
}
class Zebra {
+bool is_wild
+run()
}
class UntitledClass {
}
class Animal_copy_1["Animal"] {
+int age
+String gender
+isMammal()
+mate()
}
note for Animal "This is a sample note"
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal_copy_1 "*" --|> "1" Animal
Animal_copy_1 .. UntitledClass
</pre>
<pre id="diagram4" class="mermaid">
---
config:
theme: redux-dark
layout: dagre
---
flowchart LR
classDef redNode fill:#D50000,color:#000000;
classDef pinkNode fill:#E1BEE7,color:#000000;
classDef yellowNode fill:#FFF9C4,color:#000000;
classDef blackNode fill:#000000,stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,color:#FFFFFF;
classDef greenNode fill:#00F840,color:#000000;
classDef reminderNode stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,fill:#000000,color:#FFFFFF;
classDef blueSubgraph fill:#BBDEFB;
subgraph subgraph_zv2q8ucnp["Shape descriptions"]
customer((Customer)):::redNode
Support["Support"]:::pinkNode
Technician{{Technician}}:::yellowNode
Decision{"Decision"}:::blackNode
end
A((Reported issue)):::redNode --> B["Ticket is created"]
B --> C{"Working hours?"}:::blackNode
C -- Yes --> E{{"Tickets are sent to day team for response"}}:::yellowNode
C -- No --> F["Tickets are sent to on-call staff for response"]:::pinkNode
E --> Worked{"Ticket being worked on?"}:::reminderNode
F --> Worked
Worked -- Yes --> G["Work on the tickets based on priority"]:::pinkNode
Worked -- No --> Reminder["Reminder is sent"]
Reminder --> Worked
G --> H["Team fixes the issue"]:::pinkNode
H --> I{"Is the issue resolved?"}:::reminderNode
I -- Yes --> Done["Ticket is closed and follow-up email is sent"]:::greenNode
I -- No --> H
class subgraph_zv2q8ucnp blueSubgraph
linkStyle 2 stroke:#00C853,fill:none
linkStyle 3 stroke:#D50000,fill:none
linkStyle 6 stroke:#00C853,fill:none
linkStyle 7 stroke:#D50000,fill:none
linkStyle 11 stroke:#00C853,fill:none
linkStyle 12 stroke:#D50000,fill:none
</pre>
<!-- Next set of tests --> <!-- Next set of tests -->
<hr /> <hr />
@@ -356,7 +442,7 @@ config:
alert('It worked'); alert('It worked');
} }
await mermaid.initialize({ await mermaid.initialize({
// theme: 'base', theme: 'redux-dark',
// theme: 'default', // theme: 'default',
// theme: 'forest', // theme: 'forest',
// handDrawnSeed: 12, // handDrawnSeed: 12,
@@ -364,7 +450,7 @@ config:
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre', // layout: 'dagre',
// layout: 'elk', // layout: 'elk',
// layout: 'fixed', layout: 'sugiyama',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },

102
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -58,7 +58,6 @@ export const insertEdgeLabel = async (elem, edge) => {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')'); label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
// Make element accessible by id for positioning // Make element accessible by id for positioning
log.debug('Inserting edge label abc88', edge.id, edge.label, edgeLabels.get(edge.id));
edgeLabels.set(edge.id, edgeLabel); edgeLabels.set(edge.id, edgeLabel);
// Update the abstract data of the edge with the new information about its width and height // Update the abstract data of the edge with the new information about its width and height
@@ -341,94 +340,6 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
return points; return points;
}; };
// function extractCornerPoints(points) {
// const cornerPoints = [];
// const cornerPointPositions = [];
// for (let i = 1; i < points.length - 1; i++) {
// const prev = points[i - 1];
// const curr = points[i];
// const next = points[i + 1];
// if (
// prev.x === curr.x &&
// curr.y === next.y &&
// Math.abs(curr.x - next.x) > 5 &&
// Math.abs(curr.y - prev.y) > 5
// ) {
// cornerPoints.push(curr);
// cornerPointPositions.push(i);
// } else if (
// prev.y === curr.y &&
// curr.x === next.x &&
// Math.abs(curr.x - prev.x) > 5 &&
// Math.abs(curr.y - next.y) > 5
// ) {
// cornerPoints.push(curr);
// cornerPointPositions.push(i);
// }
// }
// return { cornerPoints, cornerPointPositions };
// }
// const findAdjacentPoint = function (pointA, pointB, distance) {
// const xDiff = pointB.x - pointA.x;
// const yDiff = pointB.y - pointA.y;
// const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
// const ratio = distance / length;
// return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };
// };
// const fixCorners = function (lineData) {
// const { cornerPointPositions } = extractCornerPoints(lineData);
// const newLineData = [];
// const r = 4;
// for (let i = 0; i < lineData.length; i++) {
// if (cornerPointPositions.includes(i)) {
// const prevPoint = lineData[i - 1];
// const nextPoint = lineData[i + 1];
// const cornerPoint = lineData[i];
// const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, r);
// const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, r);
// const xDiff = newNextPoint.x - newPrevPoint.x;
// const yDiff = newNextPoint.y - newPrevPoint.y;
// newLineData.push(newPrevPoint);
// const a = Math.sqrt(2) * 2;
// let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
// if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
// log.debug(
// 'Corner point fixing',
// Math.abs(nextPoint.x - prevPoint.x),
// Math.abs(nextPoint.y - prevPoint.y)
// );
// if (cornerPoint.x === newPrevPoint.x) {
// newCornerPoint = {
// x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,
// y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,
// };
// } else {
// newCornerPoint = {
// x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,
// y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,
// };
// }
// } else {
// log.debug(
// 'Corner point skipping fixing',
// Math.abs(nextPoint.x - prevPoint.x),
// Math.abs(nextPoint.y - prevPoint.y)
// );
// }
// newLineData.push(newCornerPoint, newNextPoint);
// } else {
// newLineData.push(lineData[i]);
// }
// }
// return newLineData;
// };
const generateDashArray = (len, oValueS, oValueE) => { const generateDashArray = (len, oValueS, oValueE) => {
const middleLength = len - oValueS - oValueE; const middleLength = len - oValueS - oValueE;
const dashLength = 2; // Length of each dash const dashLength = 2; // Length of each dash
@@ -446,7 +357,6 @@ const generateDashArray = (len, oValueS, oValueE) => {
return dashArray; return dashArray;
}; };
export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) { export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
const { handDrawnSeed } = getConfig(); const { handDrawnSeed } = getConfig();
let points = edge.points; let points = edge.points;
@@ -496,15 +406,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
let lineData = points.filter((p) => !Number.isNaN(p.y)); let lineData = points.filter((p) => !Number.isNaN(p.y));
//lineData = fixCorners(lineData); //lineData = fixCorners(lineData);
let lastPoint = lineData[lineData.length - 1];
if (lineData.length > 1) {
lastPoint = lineData[lineData.length - 1];
const secondLastPoint = lineData[lineData.length - 2];
const diffX = (lastPoint.x - secondLastPoint.x) / 2;
const diffY = (lastPoint.y - secondLastPoint.y) / 2;
const midPoint = { x: secondLastPoint.x + diffX, y: secondLastPoint.y + diffY };
lineData.splice(-1, 0, midPoint);
}
let curve = curveBasis; let curve = curveBasis;
curve = curveLinear; curve = curveLinear;
switch (edge.curve) { switch (edge.curve) {
@@ -527,8 +428,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
const { x, y } = getLineFunctionsWithOffset(edge); const { x, y } = getLineFunctionsWithOffset(edge);
const lineFunction = line().x(x).y(y).curve(curve); const lineFunction = line().x(x).y(y).curve(curve);
// const pointsStr = btoa(JSON.stringify(lineData));
// console.log('Line data', lineData);
let strokeClasses; let strokeClasses;
switch (edge.thickness) { switch (edge.thickness) {
case 'normal': case 'normal':