Skip to content

Commit

Permalink
Merge pull request #34 from Mermaid-Chart/mc-2642-fix-for-class-diagr…
Browse files Browse the repository at this point in the history 
…am-markers

Mc 2642 fix for class diagram markers
  • Loading branch information
@ashishjain0512
ashishjain0512 authored Jan 30, 2025
2 parents 7e9a29f + c3b78a3 commit 0101046
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 113 deletions.
108 changes: 97 additions & 11 deletions cypress/platform/knsv2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<style>
body {
/* background: rgb(221, 208, 208); */
/* background: #333; */
background: #333;
font-family: 'Arial';
/* color: white; */
/* font-size: 18px !important; */
Expand Down Expand Up @@ -105,10 +105,9 @@
</head>

<body>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@-.-> B
C e2@--> D
A e1@-.-> B & C e2@--> D
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
Expand Down Expand Up @@ -152,12 +151,12 @@
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
look: neo
theme: redux
layout: elk
---
flowchart LR
A e1@--> BB
e1@{ animation: fast}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
Expand All @@ -180,12 +179,12 @@
<!-- Circle -->
<hr />

<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==o B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid">
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
Expand All @@ -211,6 +210,93 @@
A e1@==o BB
e1@{ animate: false}
</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 -->
<hr />
Expand Down Expand Up @@ -356,15 +442,15 @@
alert('It worked');
}
await mermaid.initialize({
// theme: 'base',
theme: 'redux-dark',
// theme: 'default',
// theme: 'forest',
// handDrawnSeed: 12,
// look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
layout: 'sugiyama',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },

Expand Down
104 changes: 2 additions & 102 deletions packages/mermaid/src/rendering-util/rendering-elements/edges.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export const insertEdgeLabel = async (elem, edge) => {
label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');

// 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);

// Update the abstract data of the edge with the new information about its width and height
Expand Down Expand Up @@ -341,94 +340,6 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
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 middleLength = len - oValueS - oValueE;
const dashLength = 2; // Length of each dash
Expand All @@ -446,7 +357,6 @@ const generateDashArray = (len, oValueS, oValueE) => {

return dashArray;
};

export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
const { handDrawnSeed } = getConfig();
let points = edge.points;
Expand Down Expand Up @@ -495,16 +405,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
}

let lineData = points.filter((p) => !Number.isNaN(p.y));
// 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);
}
//lineData = fixCorners(lineData);
let curve = curveBasis;
curve = curveLinear;
switch (edge.curve) {
Expand All @@ -527,8 +428,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod

const { x, y } = getLineFunctionsWithOffset(edge);
const lineFunction = line().x(x).y(y).curve(curve);
// const pointsStr = btoa(JSON.stringify(lineData));
// console.log('Line data', lineData);

let strokeClasses;
switch (edge.thickness) {
case 'normal':
Expand Down

0 comments on commit 0101046

Please sign in to comment.