marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-29 21:26:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '6088-fix-for-diamond-intersections

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-06-06 20:14:02 +02:00
parent 34027bc589 fbae611406
commit e7208622f7
12 changed files with 268 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hungry-guests-drive.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@mermaid-js/layout-elk': patch
---
fix: Updated offset calculations for diamond shape when handling intersections

76
cypress/platform/knsv2.html
View File

@@ -246,6 +246,44 @@ config:
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
--- ---
config:
layout: elk
---
flowchart LR
a
subgraph s0["APA"]
subgraph s8["APA"]
subgraph s1["APA"]
D{"X"}
E[Q]
end
subgraph s3["BAPA"]
F[Q]
I
end
D --> I
D --> I
D --> I
I{"X"}
end
end
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart LR
a
D{"Use the editor"}
D -- Mermaid js --> I{"fa:fa-code Text"}
D-->I
D-->I
</pre>
<pre id="diagram4" class="mermaid">
---
config: config:
layout: elk layout: elk
--- ---
@@ -283,7 +321,7 @@ flowchart LR
n8@{ shape: rect} n8@{ shape: rect}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -299,7 +337,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -308,7 +346,7 @@ flowchart LR
A{A} --> B & C A{A} --> B & C
</pre </pre
> >
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -338,7 +376,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
kanban: kanban:
@@ -357,81 +395,81 @@ kanban
task3[💻 Develop login feature]@{ ticket: 103 } task3[💻 Develop login feature]@{ ticket: 103 }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' } nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' } nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' } nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' } nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' } nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
kanban kanban
id2[In progress] id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' } docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
kanban: kanban:

2
packages/mermaid-layout-elk/README.md
View File

@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
- `elk.mrtree`: Multi-root tree layout - `elk.mrtree`: Multi-root tree layout
- `elk.sporeOverlap`: Spore overlap layout - `elk.sporeOverlap`: Spore overlap layout
<!-- TODO: Add images for these layouts, as GitHub doesn't support natively --> <!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->

353
packages/mermaid-layout-elk/src/render.ts
View File

@@ -4,7 +4,8 @@ import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from '
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js'; import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
type Node = LayoutData['nodes'][number]; type Node = LayoutData['nodes'][number];
// Used to calculate distances in order to avoid floating number rounding issues when comparing floating numbers
const epsilon = 0.0001;
interface LabelData { interface LabelData {
width: number; width: number;
height: number; height: number;
@@ -17,7 +18,16 @@ interface NodeWithVertex extends Omit<Node, 'domId'> {
labelData?: LabelData; labelData?: LabelData;
domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>; domId?: Node['domId'] | SVGGroup | d3.Selection<SVGAElement, unknown, Element | null, unknown>;
} }
interface Point {
x: number;
y: number;
}
function distance(p1?: Point, p2?: Point): number {
if (!p1 || !p2) {
return 0;
}
return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
export const render = async ( export const render = async (
data4Layout: LayoutData, data4Layout: LayoutData,
svg: SVG, svg: SVG,
@@ -74,6 +84,7 @@ export const render = async (
const boundingBox = childNodeEl.node()!.getBBox(); const boundingBox = childNodeEl.node()!.getBBox();
// Store the domId separately for rendering, not in the ELK graph // Store the domId separately for rendering, not in the ELK graph
child.domId = childNodeEl; child.domId = childNodeEl;
child.calcIntersect = node.calcIntersect;
child.width = boundingBox.width; child.width = boundingBox.width;
child.height = boundingBox.height; child.height = boundingBox.height;
} else { } else {
@@ -473,302 +484,6 @@ export const render = async (
} }
} }
function intersectLine(
p1: { y: number; x: number },
p2: { y: number; x: number },
q1: { x: any; y: any },
q2: { x: any; y: any }
) {
log.debug('UIO intersectLine', p1, p2, q1, q2);
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
// p7 and p473.
// let a1, a2, b1, b2, c1, c2;
// let r1, r2, r3, r4;
// let denom, offset, num;
// let x, y;
// Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
// b1 y + c1 = 0.
const a1 = p2.y - p1.y;
const b1 = p1.x - p2.x;
const c1 = p2.x * p1.y - p1.x * p2.y;
// Compute r3 and r4.
const r3 = a1 * q1.x + b1 * q1.y + c1;
const r4 = a1 * q2.x + b1 * q2.y + c1;
const epsilon = 1e-6;
// Check signs of r3 and r4. If both point 3 and point 4 lie on
// same side of line 1, the line segments do not intersect.
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
return /*DON'T_INTERSECT*/;
}
// Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
const a2 = q2.y - q1.y;
const b2 = q1.x - q2.x;
const c2 = q2.x * q1.y - q1.x * q2.y;
// Compute r1 and r2
const r1 = a2 * p1.x + b2 * p1.y + c2;
const r2 = a2 * p2.x + b2 * p2.y + c2;
// Check signs of r1 and r2. If both point 1 and point 2 lie
// on same side of second line segment, the line segments do
// not intersect.
if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
return /*DON'T_INTERSECT*/;
}
// Line segments intersect: compute intersection point.
const denom = a1 * b2 - a2 * b1;
if (denom === 0) {
return /*COLLINEAR*/;
}
const offset = Math.abs(denom / 2);
// The denom/2 is to get rounding instead of truncating. It
// is added or subtracted to the numerator, depending upon the
// sign of the numerator.
let num = b1 * c2 - b2 * c1;
const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
num = a2 * c1 - a1 * c2;
const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
return { x: x, y: y };
}
function sameSign(r1: number, r2: number) {
return r1 * r2 > 0;
}
const diamondIntersection = (
bounds: { x: any; y: any; width: any; height: any },
outsidePoint: { x: number; y: number },
insidePoint: any
) => {
const x1 = bounds.x;
const y1 = bounds.y;
const w = bounds.width; //+ bounds.padding;
const h = bounds.height; // + bounds.padding;
const polyPoints = [
{ x: x1, y: y1 - h / 2 },
{ x: x1 + w / 2, y: y1 },
{ x: x1, y: y1 + h / 2 },
{ x: x1 - w / 2, y: y1 },
];
log.debug(
`APA16 diamondIntersection calc abc89:
outsidePoint: ${JSON.stringify(outsidePoint)}
insidePoint : ${JSON.stringify(insidePoint)}
node-bounds : x:${bounds.x} y:${bounds.y} w:${bounds.width} h:${bounds.height}`,
JSON.stringify(polyPoints)
);
const intersections = [];
let minX = Number.POSITIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
polyPoints.forEach(function (entry) {
minX = Math.min(minX, entry.x);
minY = Math.min(minY, entry.y);
});
const left = x1 - w / 2 - minX;
const top = y1 - h / 2 - minY;
for (let i = 0; i < polyPoints.length; i++) {
const p1 = polyPoints[i];
const p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
const intersect = intersectLine(
bounds,
outsidePoint,
{ x: left + p1.x, y: top + p1.y },
{ x: left + p2.x, y: top + p2.y }
);
if (intersect) {
intersections.push(intersect);
}
}
if (!intersections.length) {
return bounds;
}
log.debug('UIO intersections', intersections);
if (intersections.length > 1) {
// More intersections, find the one nearest to edge end point
intersections.sort(function (p, q) {
const pdx = p.x - outsidePoint.x;
const pdy = p.y - outsidePoint.y;
const distp = Math.sqrt(pdx * pdx + pdy * pdy);
const qdx = q.x - outsidePoint.x;
const qdy = q.y - outsidePoint.y;
const distq = Math.sqrt(qdx * qdx + qdy * qdy);
return distp < distq ? -1 : distp === distq ? 0 : 1;
});
}
return intersections[0];
};
const intersection = (
node: { x: any; y: any; width: number; height: number },
outsidePoint: { x: number; y: number },
insidePoint: { x: number; y: number }
) => {
log.debug(`intersection calc abc89:
outsidePoint: ${JSON.stringify(outsidePoint)}
insidePoint : ${JSON.stringify(insidePoint)}
node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
const x = node.x;
const y = node.y;
const dx = Math.abs(x - insidePoint.x);
// const dy = Math.abs(y - insidePoint.y);
const w = node.width / 2;
let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
const h = node.height / 2;
const Q = Math.abs(outsidePoint.y - insidePoint.y);
const R = Math.abs(outsidePoint.x - insidePoint.x);
if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
// Intersection is top or bottom of rect.
const q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
r = (R * q) / Q;
const res = {
x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,
};
if (r === 0) {
res.x = outsidePoint.x;
res.y = outsidePoint.y;
}
if (R === 0) {
res.x = outsidePoint.x;
}
if (Q === 0) {
res.y = outsidePoint.y;
}
log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
return res;
} else {
// Intersection on sides of rect
if (insidePoint.x < outsidePoint.x) {
r = outsidePoint.x - w - x;
} else {
// r = outsidePoint.x - w - x;
r = x - w - outsidePoint.x;
}
const q = (Q * r) / R;
// OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w;
// OK let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
// let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : outsidePoint.x + r;
let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
if (r === 0) {
_x = outsidePoint.x;
_y = outsidePoint.y;
}
if (R === 0) {
_x = outsidePoint.x;
}
if (Q === 0) {
_y = outsidePoint.y;
}
return { x: _x, y: _y };
}
};
const outsideNode = (
node: { x: any; y: any; width: number; height: number },
point: { x: number; y: number }
) => {
const x = node.x;
const y = node.y;
const dx = Math.abs(point.x - x);
const dy = Math.abs(point.y - y);
const w = node.width / 2;
const h = node.height / 2;
if (dx >= w || dy >= h) {
return true;
}
return false;
};
/**
* This function will page a path and node where the last point(s) in the path is inside the node
* and return an update path ending by the border of the node.
*/
const cutPathAtIntersect = (
_points: any[],
bounds: { x: any; y: any; width: any; height: any; padding: any },
isDiamond: boolean
) => {
log.debug('APA18 cutPathAtIntersect Points:', _points, 'node:', bounds, 'isDiamond', isDiamond);
const points: any[] = [];
let lastPointOutside = _points[0];
let isInside = false;
_points.forEach((point: any) => {
// check if point is inside the boundary rect
if (!outsideNode(bounds, point) && !isInside) {
// First point inside the rect found
// Calc the intersection coord between the point and the last point outside the rect
let inter;
if (isDiamond) {
const inter2 = diamondIntersection(bounds, lastPointOutside, point);
const distance = Math.sqrt(
(lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
);
if (distance > 1) {
inter = inter2;
}
}
if (!inter) {
inter = intersection(bounds, lastPointOutside, point);
}
// Check case where the intersection is the same as the last point
let pointPresent = false;
points.forEach((p) => {
pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
});
// if (!pointPresent) {
if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
points.push(inter);
} else {
log.debug('abc88 no intersect', inter, points);
}
// points.push(inter);
isInside = true;
} else {
// Outside
log.debug('abc88 outside', point, lastPointOutside, points);
lastPointOutside = point;
// points.push(point);
if (!isInside) {
points.push(point);
}
}
});
return points;
};
// @ts-ignore - ELK is not typed // @ts-ignore - ELK is not typed
const elk = new ELK(); const elk = new ELK();
const element = svg.select('g'); const element = svg.select('g');
@@ -1015,43 +730,38 @@ export const render = async (
startNode.innerHTML startNode.innerHTML
); );
} }
if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
edge.points.unshift({
x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2,
});
}
if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
edge.points.push({
x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2,
});
}
edge.points = cutPathAtIntersect( if (startNode.calcIntersect) {
edge.points.reverse(), const intersection = startNode.calcIntersect(
{ {
x: startNode.offset.posX + startNode.width / 2, x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2, y: startNode.offset.posY + startNode.height / 2,
width: sw, width: startNode.width,
height: startNode.height, height: startNode.height,
padding: startNode.padding,
}, },
startNode.shape === 'diamond' || startNode.shape === 'diam' edge.points[0]
).reverse(); );
edge.points = cutPathAtIntersect( if (distance(intersection, edge.points[0]) > epsilon) {
edge.points, edge.points.unshift(intersection);
}
}
if (endNode.calcIntersect) {
const intersection = endNode.calcIntersect(
{ {
x: endNode.offset.posX + endNode.width / 2, x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2, y: endNode.offset.posY + endNode.height / 2,
width: ew, width: endNode.width,
height: endNode.height, height: endNode.height,
padding: endNode.padding,
}, },
endNode.shape === 'diamond' || endNode.shape === 'diam' edge.points[edge.points.length - 1]
); );
if (distance(intersection, edge.points[edge.points.length - 1]) > epsilon) {
edge.points.push(intersection);
}
}
const paths = insertEdge( const paths = insertEdge(
edgesEl, edgesEl,
edge, edge,
@@ -1061,7 +771,6 @@ export const render = async (
endNode, endNode,
data4Layout.diagramId data4Layout.diagramId
); );
log.info('APA12 edge points after insert', JSON.stringify(edge.points));
edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2; edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2; edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;

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

@@ -352,90 +352,35 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
return points; return points;
}; };
function extractCornerPoints(points) { const adjustForArrowHeads = function (lineData, size = 5) {
const cornerPoints = []; const newLineData = [...lineData];
const cornerPointPositions = []; const lastPoint = lineData[lineData.length - 1];
for (let i = 1; i < points.length - 1; i++) { const secondLastPoint = lineData[lineData.length - 2];
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 distanceBetweenLastPoints = Math.sqrt(
const xDiff = pointB.x - pointA.x; (lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
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 = [];
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, 5);
const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);
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)
); );
const r = 5;
if (cornerPoint.x === newPrevPoint.x) { if (distanceBetweenLastPoints < size) {
newCornerPoint = { // Calculate the direction vector from the last point to the second last point
x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a, const directionX = secondLastPoint.x - lastPoint.x;
y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a, const directionY = secondLastPoint.y - lastPoint.y;
};
} else { // Normalize the direction vector
newCornerPoint = { const magnitude = Math.sqrt(directionX ** 2 + directionY ** 2);
x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a, const normalizedX = directionX / magnitude;
y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a, const normalizedY = directionY / magnitude;
// Calculate the new position for the second last point
const adjustedSecondLastPoint = {
x: lastPoint.x + normalizedX * size,
y: lastPoint.y + normalizedY * size,
}; };
// Replace the second last point in the new line data
newLineData[newLineData.length - 2] = adjustedSecondLastPoint;
} }
} 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; return newLineData;
}; };
@@ -486,7 +431,8 @@ 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 = adjustForArrowHeads(lineData);
// lineData = fixCorners(lineData);
let curve = curveBasis; let curve = curveBasis;
curve = curveLinear; curve = curveLinear;
switch (edge.curve) { switch (edge.curve) {
@@ -622,9 +568,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
// lineData.forEach((point) => { // lineData.forEach((point) => {
// elem // elem
// .append('circle') // .append('circle')
// .style('stroke', 'blue') // .style('stroke', 'red')
// .style('fill', 'blue') // .style('fill', 'red')
// .attr('r', 3) // .attr('r', 1)
// .attr('cx', point.x) // .attr('cx', point.x)
// .attr('cy', point.y); // .attr('cy', point.y);
// }); // });

67
packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-line.js
View File

@@ -2,23 +2,21 @@
* Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect. * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.
*/ */
function intersectLine(p1, p2, q1, q2) { function intersectLine(p1, p2, q1, q2) {
{
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994, // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
// p7 and p473. // p7 and p473.
var a1, a2, b1, b2, c1, c2;
var r1, r2, r3, r4;
var denom, offset, num;
var x, y;
// Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x + // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
// b1 y + c1 = 0. // b1 y + c1 = 0.
a1 = p2.y - p1.y; const a1 = p2.y - p1.y;
b1 = p1.x - p2.x; const b1 = p1.x - p2.x;
c1 = p2.x * p1.y - p1.x * p2.y; const c1 = p2.x * p1.y - p1.x * p2.y;
// Compute r3 and r4. // Compute r3 and r4.
r3 = a1 * q1.x + b1 * q1.y + c1; const r3 = a1 * q1.x + b1 * q1.y + c1;
r4 = a1 * q2.x + b1 * q2.y + c1; const r4 = a1 * q2.x + b1 * q2.y + c1;
const epsilon = 1e-6;
// Check signs of r3 and r4. If both point 3 and point 4 lie on // Check signs of r3 and r4. If both point 3 and point 4 lie on
// same side of line 1, the line segments do not intersect. // same side of line 1, the line segments do not intersect.
@@ -27,39 +25,64 @@ function intersectLine(p1, p2, q1, q2) {
} }
// Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0 // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
a2 = q2.y - q1.y; const a2 = q2.y - q1.y;
b2 = q1.x - q2.x; const b2 = q1.x - q2.x;
c2 = q2.x * q1.y - q1.x * q2.y; const c2 = q2.x * q1.y - q1.x * q2.y;
// Compute r1 and r2 // Compute r1 and r2
r1 = a2 * p1.x + b2 * p1.y + c2; const r1 = a2 * p1.x + b2 * p1.y + c2;
r2 = a2 * p2.x + b2 * p2.y + c2; const r2 = a2 * p2.x + b2 * p2.y + c2;
// Check signs of r1 and r2. If both point 1 and point 2 lie // Check signs of r1 and r2. If both point 1 and point 2 lie
// on same side of second line segment, the line segments do // on same side of second line segment, the line segments do
// not intersect. // not intersect.
if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) { if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {
return /*DON'T_INTERSECT*/; return /*DON'T_INTERSECT*/;
} }
// Line segments intersect: compute intersection point. // Line segments intersect: compute intersection point.
denom = a1 * b2 - a2 * b1; const denom = a1 * b2 - a2 * b1;
if (denom === 0) { if (denom === 0) {
return /*COLLINEAR*/; return /*COLLINEAR*/;
} }
offset = Math.abs(denom / 2); const offset = Math.abs(denom / 2);
// The denom/2 is to get rounding instead of truncating. It // The denom/2 is to get rounding instead of truncating. It
// is added or subtracted to the numerator, depending upon the // is added or subtracted to the numerator, depending upon the
// sign of the numerator. // sign of the numerator.
num = b1 * c2 - b2 * c1; let num = b1 * c2 - b2 * c1;
x = num < 0 ? (num - offset) / denom : (num + offset) / denom; const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
num = a2 * c1 - a1 * c2; num = a2 * c1 - a1 * c2;
y = num < 0 ? (num - offset) / denom : (num + offset) / denom; const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
// console.log(
// 'APA30 intersectLine intersection',
// '\np1: (',
// p1.x,
// p1.y,
// ')',
// '\np2: (',
// p2.x,
// p2.y,
// ')',
// '\nq1: (',
// q1.x,
// q1.y,
// ')',
// '\np1: (',
// q2.x,
// q2.y,
// ')',
// 'offset:',
// offset,
// '\nintersection: (',
// x,
// y,
// ')'
// );
return { x: x, y: y }; return { x: x, y: y };
}
} }
function sameSign(r1, r2) { function sameSign(r1, r2) {

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@@ -6,6 +6,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js'; import { handleUndefinedAttr } from '../../../utils.js';
import type { Bounds, Point } from '../../../types.js';
export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) { export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
@@ -35,7 +36,10 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
} }
updateNodeBounds(node, circleElem); updateNodeBounds(node, circleElem);
node.calcIntersect = function (bounds: Bounds, point: Point) {
const radius = bounds.width / 2;
return intersect.circle(bounds, radius, point);
};
node.intersect = function (point) { node.intersect = function (point) {
log.info('Circle intersect', node, radius, point); log.info('Circle intersect', node, radius, point);
return intersect.circle(node, radius, point); return intersect.circle(node, radius, point);

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

@@ -6,6 +6,7 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js'; import { handleUndefinedAttr } from '../../../utils.js';
import type { Bounds, Point } from '../../../types.js';
export async function drawRect<T extends SVGGraphicsElement>( export async function drawRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>, parent: D3Selection<T>,
@@ -62,6 +63,10 @@ export async function drawRect<T extends SVGGraphicsElement>(
updateNodeBounds(node, rect); updateNodeBounds(node, rect);
node.calcIntersect = function (bounds: Bounds, point: Point) {
return intersect.rect(bounds, point);
};
node.intersect = function (point) { node.intersect = function (point) {
return intersect.rect(node, point); return intersect.rect(node, point);
}; };

45
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@@ -1,4 +1,3 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '../../types.js'; import type { Node } from '../../types.js';
@@ -6,6 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js'; import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
import type { Bounds, Point } from '../../../types.js';
export const createDecisionBoxPathD = (x: number, y: number, size: number): string => { export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
return [ return [
@@ -59,17 +59,42 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
} }
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);
node.calcIntersect = function (bounds: Bounds, point: Point) {
const s = bounds.width;
// console.log(
// 'APA10\nbounds width:',
// bounds.width,
// '\nbounds height:',
// bounds.height,
// 'point:',
// point.x,
// point.y,
// '\nw:',
// w,
// '\nh',
// h,
// '\ns',
// s
// );
// Define polygon points
const points = [
{ x: s / 2, y: 0 },
{ x: s, y: -s / 2 },
{ x: s / 2, y: -s },
{ x: 0, y: -s / 2 },
];
// Calculate the intersection point
const res = intersect.polygon(bounds, points, point);
return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
};
node.intersect = function (point) { node.intersect = function (point) {
log.debug( // @ts-ignore TODO fix this (KNSV)
'APA12 Intersect called SPLIT\npoint:', return this.calcIntersect(node as Bounds, point);
point,
'\nnode:\n',
node,
'\nres:',
intersect.polygon(node, points, point)
);
return intersect.polygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;

2
packages/mermaid/src/rendering-util/types.ts
View File

@@ -2,6 +2,7 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em';
import type { MermaidConfig } from '../config.type.js'; import type { MermaidConfig } from '../config.type.js';
import type { ClusterShapeID } from './rendering-elements/clusters.js'; import type { ClusterShapeID } from './rendering-elements/clusters.js';
import type { ShapeID } from './rendering-elements/shapes.js'; import type { ShapeID } from './rendering-elements/shapes.js';
import type { Bounds, Point } from '../types.js';
export interface MarkdownWord { export interface MarkdownWord {
content: string; content: string;
type: MarkdownWordType; type: MarkdownWordType;
@@ -43,6 +44,7 @@ interface BaseNode {
height?: number; height?: number;
// Specific properties for State Diagram nodes TODO remove and use generic properties // Specific properties for State Diagram nodes TODO remove and use generic properties
intersect?: (point: any) => any; intersect?: (point: any) => any;
calcIntersect?: (bounds: Bounds, point: Point) => any;
// Non-generic properties // Non-generic properties
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc. rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.

6
packages/mermaid/src/types.ts
View File

@@ -23,6 +23,12 @@ export interface Point {
x: number; x: number;
y: number; y: number;
} }
export interface Bounds {
x: number;
y: number;
width: number;
height: number;
}
export interface TextDimensionConfig { export interface TextDimensionConfig {
fontSize?: number; fontSize?: number;

3
packages/mermaid/src/utils/lineWithOffset.ts
View File

@@ -3,7 +3,7 @@ import type { EdgeData, Point } from '../types.js';
// We need to draw the lines a bit shorter to avoid drawing // We need to draw the lines a bit shorter to avoid drawing
// under any transparent markers. // under any transparent markers.
// The offsets are calculated from the markers' dimensions. // The offsets are calculated from the markers' dimensions.
const markerOffsets = { export const markerOffsets = {
aggregation: 18, aggregation: 18,
extension: 18, extension: 18,
composition: 18, composition: 18,
@@ -104,7 +104,6 @@ export const getLineFunctionsWithOffset = (
adjustment *= DIRECTION === 'right' ? -1 : 1; adjustment *= DIRECTION === 'right' ? -1 : 1;
offset += adjustment; offset += adjustment;
} }
return pointTransformer(d).x + offset; return pointTransformer(d).x + offset;
}, },
y: function ( y: function (