Compare commits

..

28 Commits

Author SHA1 Message Date
Knut Sveidqvist
8314554eb5 Merge branch 'test-merge' into 6088-fix-for-diamond-intersections 2025-06-25 13:00:03 +02:00
Knut Sveidqvist
b7c03dc27e Some cleanup 2025-06-25 12:58:54 +02:00
Knut Sveidqvist
c7f2f609a9 Intersections ok 2025-06-24 20:30:50 +02:00
Knut Sveidqvist
4c3de3a1ec Merge remote-tracking branch 'origin/develop' into test-merge 2025-06-24 10:58:28 +02:00
Sidharth Vinod
e7970c66ee Merge pull request #6670 from mermaid-js/#6669-pnpm-lock-validations
Added workflow file for validating pnpm-lock file
2025-06-23 09:11:05 +00:00
shubham-mermaid
c7b96be683 Merge branch 'develop' into #6669-pnpm-lock-validations 2025-06-23 12:43:35 +05:30
shubham-mermaid
0623a87d70 Removed js file check in paths 2025-06-23 12:43:13 +05:30
shubham-mermaid
c5f89eaa9a Update .github/workflows/validate-lockfile.yml
Co-authored-by: Sidharth Vinod <github@sidharth.dev>
2025-06-23 12:41:21 +05:30
Sidharth Vinod
1fbe550285 Merge pull request #6659 from sametcn99/patch-1
Add vitepress plugin link
2025-06-21 05:46:08 +00:00
Sidharth Vinod
b3724f04c4 Merge pull request #6673 from mermaid-js/kill-the-bird
Kill the bird
2025-06-21 05:41:04 +00:00
Nacho Orlandoni
2f58a0e188 Kill the bird
This seems like an abandoned product, where the author went on a rampage trying to get it included into as many repositories as he can as a publicity stunt and no longer even works...
2025-06-20 22:07:14 -04:00
shubham-mermaid
6f1e0e4d17 Updated message 2025-06-20 18:57:22 +05:30
shubham-mermaid
7dd8ddc3eb Added generic message. 2025-06-20 18:55:45 +05:30
shubham-mermaid
222d7170f7 Added changeset 2025-06-20 14:11:26 +05:30
shubham-mermaid
3137cff4a5 Added auto-comment 2025-06-20 14:07:37 +05:30
shubham-mermaid
b45b1d7795 Trigger Build 2025-06-20 13:54:18 +05:30
shubham-mermaid
e1030b186e Added validation for packages/mermaid/src/vitepress path 2025-06-20 13:18:50 +05:30
shubham-mermaid
334c8c2962 use depth 0 2025-06-20 13:12:56 +05:30
shubham-mermaid
bdaa3f693a Added PR based sha 2025-06-20 13:11:33 +05:30
shubham-mermaid
be13fb0391 Updated origin to event.pull_request.base.ref 2025-06-20 12:53:47 +05:30
shubham-mermaid
c120901744 Added workflow file for validating pnpm-lock file 2025-06-20 12:47:17 +05:30
autofix-ci[bot]
badb019d38 [autofix.ci] apply automated fixes 2025-06-17 11:17:51 +00:00
samet
d85a393bcd Add vitepress plugin link 2025-06-17 14:04:55 +03:00
Knut Sveidqvist
fbae611406 Refresh 2025-06-06 20:10:19 +02:00
Knut Sveidqvist
1e3ea13323 Fix for when last point is on the intersection 2024-11-29 09:07:47 +01:00
Knut Sveidqvist
4c8c48cde9 Generic solution for intersection of shapes with elk 2024-11-28 14:31:54 +01:00
Knut Sveidqvist
c8e50276e8 Added changeset 2024-11-27 15:54:05 +01:00
Knut Sveidqvist
1e6419a63f #6088 Updated offset calculations 2024-11-27 15:52:24 +01:00
19 changed files with 1071 additions and 547 deletions

View File

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

68
.github/workflows/validate-lockfile.yml vendored Normal file
View File

@@ -0,0 +1,68 @@
name: Validate pnpm-lock.yaml
on:
pull_request:
paths:
- 'pnpm-lock.yaml'
- '**/package.json'
- '.github/workflows/validate-lockfile.yml'
jobs:
validate-lockfile:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
- name: Validate pnpm-lock.yaml entries
id: validate # give this step an ID so we can reference its outputs
run: |
issues=()
# 1) No tarball references
if grep -qF 'tarball:' pnpm-lock.yaml; then
issues+=("• Tarball references found (forbidden)")
fi
# 2) No unwanted vitepress paths
if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run `rm -rf packages/mermaid/src/vitepress && pnpm install` to regenerate.")
fi
# 3) Lockfile only changes when package.json changes
git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
issues+=("• pnpm-lock.yaml changed without any package.json modification")
fi
# If any issues, output them and fail
if [ ${#issues[@]} -gt 0 ]; then
# Use the new GITHUB_OUTPUT approach to set a multiline output
{
echo "errors<<EOF"
printf '%s\n' "${issues[@]}"
echo "EOF"
} >> $GITHUB_OUTPUT
exit 1
fi
- name: Comment on PR if validation failed
if: failure()
uses: peter-evans/create-or-update-comment@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.pull_request.number }}
body: |
The following issue(s) were detected:
${{ steps.validate.outputs.errors }}
Please address these and push an update.
_Posted automatically by GitHub Actions_

View File

@@ -95,10 +95,6 @@ In our release process we rely heavily on visual regression tests using [applito
<!-- </Main description> -->
## Mermaid AI Bot
[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
## Examples
**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**

View File

@@ -106,50 +106,95 @@
<body>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
flowchart:
curve: linear
---
flowchart LR
AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D(("for D"))
A[A] -- Mermaid js --> B[B]
A[A] -- Mermaid js --- B[B]
A@{ shape: diamond}
B@{ shape: diamond}
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
flowchart:
curve: rounded
---
flowchart LR
A e1@==> B
e1@{ animate: true}
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
I --> D & D
D@{ shape: question}
I@{ shape: question}
</pre>
<pre id="diagram4" class="mermaid">
flowchart LR
A e1@--> B
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
class e1 animate
</pre>
<h2>infinite</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<h2>Mermaid - edge-animation-slow</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
e1@{ animation: fast}
</pre>
<h2>Mermaid - edge-animation-fast</h2>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
class e1 edge-animation-fast
---
config:
layout: elk
flowchart:
curve: rounded
elk:
nodePlacementStrategy: NETWORK_SIMPLEX
---
flowchart LR
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
D --> I & I
a["a"]
D@{ shape: trap-b}
I@{ shape: lean-l}
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
<pre id="diagram4" class="mermaid2">
---
flowchart LR
%% subgraph s1["Untitled subgraph"]
C["Evaluate"]
%% end
info </pre
>
<pre id="diagram4" class="mermaid2">
B --> C
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
flowchart:
//curve: linear
---
flowchart LR
%% A ==> B
%% A2 --> B2
A{A} --> B((Bo boo)) & B & B & B
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
theme: default
look: classic
---
flowchart LR
subgraph s1["APA"]
D{"Use the editor"}
end
subgraph S2["S2"]
s1
I>"fa:fa-code Text"]
E["E"]
end
D -- Mermaid js --> I
D --> I & E
E --> I
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -174,7 +219,7 @@ config:
end
end
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -187,7 +232,7 @@ config:
D-->I
D-->I
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -226,7 +271,7 @@ flowchart LR
n8@{ shape: rect}
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -242,7 +287,7 @@ flowchart LR
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -251,7 +296,7 @@ flowchart LR
A{A} --> B & C
</pre
>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -263,7 +308,7 @@ flowchart LR
end
</pre
>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
@@ -281,7 +326,7 @@ flowchart LR
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
kanban:
@@ -300,81 +345,81 @@ kanban
task3[💻 Develop login feature]@{ ticket: 103 }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
kanban
id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
</pre>
<pre id="diagram4" class="mermaid2">
<pre id="diagram4" class="mermaid">
---
config:
kanban:
@@ -445,7 +490,7 @@ kanban
// look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },

View File

@@ -270,5 +270,6 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -83,7 +83,7 @@
"@vitest/spy": "^3.0.6",
"@vitest/ui": "^3.0.6",
"ajv": "^8.17.1",
"chokidar": "^4.0.3",
"chokidar": "3.6.0",
"concurrently": "^9.1.2",
"cors": "^2.8.5",
"cpy-cli": "^5.0.0",

View File

@@ -2,7 +2,7 @@
This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
> [!NOTE]
> [!NOTE]
> The ELK Layout engine will not be available in all providers that support mermaid by default.
> The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
@@ -69,4 +69,4 @@ mermaid.registerLayoutLoaders(elkLayouts);
- `elk.mrtree`: Multi-root tree 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. -->

View File

@@ -1,6 +1,13 @@
import type {
InternalHelpers,
LayoutData,
RenderOptions,
SVG,
SVGGroup,
} from '@mermaid-chart/mermaid';
// @ts-ignore TODO: Investigate D3 issue
import { curveLinear } from 'd3';
import ELK from 'elkjs/lib/elk.bundled.js';
import type { InternalHelpers, LayoutData, RenderOptions, SVG, SVGGroup } from 'mermaid';
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
type Node = LayoutData['nodes'][number];
@@ -51,11 +58,9 @@ export const render = async (
// Add the element to the DOM
if (!node.isGroup) {
const child: NodeWithVertex = {
...node,
};
const child = node as NodeWithVertex;
graph.children.push(child);
nodeDb[node.id] = child;
nodeDb[node.id] = node;
const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
const boundingBox = childNodeEl.node()!.getBBox();
@@ -68,7 +73,9 @@ export const render = async (
...node,
children: [],
};
// Let elk render with the copy
graph.children.push(child);
// Save the original containing the intersection function
nodeDb[node.id] = child;
await addVertices(nodeEl, nodeArr, child, node.id);
@@ -143,7 +150,7 @@ export const render = async (
height: node.height,
};
if (node.isGroup) {
log.debug('id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
// TODO use faster way of cloning
const clusterNode = JSON.parse(JSON.stringify(node));
@@ -152,10 +159,10 @@ export const render = async (
clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
await insertCluster(subgraphEl, clusterNode);
log.debug('id (UIO)= ', node.id, node.width, node.shape, node.labels);
log.debug('Id (UIO)= ', node.id, node.width, node.shape, node.labels);
} else {
log.info(
'id NODE = ',
'Id NODE = ',
node.id,
node.x,
node.y,
@@ -259,7 +266,6 @@ export const render = async (
const edges = dataForLayout.edges;
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
const linkIdCnt: any = {};
const dir = dataForLayout.direction || 'DOWN';
let defaultStyle: string | undefined;
let defaultLabelStyle: string | undefined;
@@ -289,7 +295,7 @@ export const render = async (
linkIdCnt[linkIdBase]++;
log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
}
const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase];
edge.id = linkId;
log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
const linkNameStart = 'LS_' + edge.start;
@@ -396,13 +402,11 @@ export const render = async (
// calculate start and end points of the edge, note that the source and target
// can be modified for shapes that have ports
// @ts-ignore TODO: fix this
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
log.debug('abc78 source and target', source, target);
// Add the edge to the graph
graph.edges.push({
// @ts-ignore TODO: fix this
id: 'e' + edge.start + edge.end,
...edge,
sources: [source],
targets: [target],
@@ -459,155 +463,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 },
@@ -653,7 +508,7 @@ export const render = async (
return res;
} else {
// Intersection on sides of rect
// Intersection onn sides of rect
if (insidePoint.x < outsidePoint.x) {
r = outsidePoint.x - w - x;
} else {
@@ -696,62 +551,300 @@ export const render = async (
}
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);
}
const cutter2 = (startNode: any, endNode: any, _points: any[]) => {
const startBounds = {
x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2,
width: startNode.width,
height: startNode.height,
padding: startNode.padding,
};
const endBounds = {
x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2,
width: endNode.width,
height: endNode.height,
padding: endNode.padding,
};
// 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);
if (_points.length === 0) {
return [];
}
// Copy the original points array
const points = [..._points];
// The first point is the center of sNode, the last point is the center of eNode
const startCenter = points[0];
const endCenter = points[points.length - 1];
log.debug('UIO cutter2: startCenter:', startCenter);
log.debug('UIO cutter2: endCenter:', endCenter);
let firstOutsideStartIndex = -1;
let lastOutsideEndIndex = -1;
// Single iteration through the array
for (let i = 0; i < points.length; i++) {
const point = points[i];
// Check if this is the first point outside the start node
if (firstOutsideStartIndex === -1 && outsideNode(startBounds, point)) {
firstOutsideStartIndex = i;
log.debug('UIO cutter2: First point outside start node at index', i, point);
}
// Check if this point is outside the end node (keep updating to find the last one)
if (outsideNode(endBounds, point)) {
lastOutsideEndIndex = i;
log.debug('UIO cutter2: Point outside end node at index', i, point);
}
}
log.debug(
'UIO cutter2: firstOutsideStartIndex:',
firstOutsideStartIndex,
'lastOutsideEndIndex:',
lastOutsideEndIndex
);
log.debug('UIO cutter2: startBounds:', startBounds);
log.debug('UIO cutter2: endBounds:', endBounds);
log.debug('UIO cutter2: original points:', _points);
// Calculate intersection with start node if we found a point outside it
if (firstOutsideStartIndex !== -1) {
const outsidePoint = points[firstOutsideStartIndex];
let startIntersection;
// Try using the node's intersect method first
if (startNode.intersect) {
startIntersection = startNode.intersect(outsidePoint);
// Check if the intersection is valid (distance > 1)
const distance = Math.sqrt(
(startCenter.x - startIntersection.x) ** 2 + (startCenter.y - startIntersection.y) ** 2
);
if (distance <= 1) {
startIntersection = null;
}
}
});
// Fallback to intersection function
if (!startIntersection) {
startIntersection = intersection(startBounds, startCenter, outsidePoint);
}
// Replace the first point with the intersection
if (startIntersection) {
// Check if the intersection is the same as any existing point
const isDuplicate = points.some(
(p, index) =>
index > 0 &&
Math.abs(p.x - startIntersection.x) < 0.1 &&
Math.abs(p.y - startIntersection.y) < 0.1
);
if (isDuplicate) {
log.debug(
'UIO cutter2: Start intersection is duplicate of existing point, removing first point instead'
);
points.shift(); // Remove the first point instead of replacing it
} else {
log.debug(
'UIO cutter2: Replacing first point',
points[0],
'with intersection',
startIntersection
);
points[0] = startIntersection;
}
}
}
// Calculate intersection with end node
// Need to recalculate indices since we may have removed the first point
let outsidePointForEnd = null;
let outsideIndexForEnd = -1;
// Find the last point that's outside the end node in the current points array
for (let i = points.length - 1; i >= 0; i--) {
if (outsideNode(endBounds, points[i])) {
outsidePointForEnd = points[i];
outsideIndexForEnd = i;
log.debug('UIO cutter2: Found point outside end node at current index:', i, points[i]);
break;
}
}
if (!outsidePointForEnd && points.length > 1) {
// No points outside end node, try using the second-to-last point
log.debug('UIO cutter2: No points outside end node, trying second-to-last point');
outsidePointForEnd = points[points.length - 2];
outsideIndexForEnd = points.length - 2;
}
if (outsidePointForEnd) {
// Check if the outside point is actually on the boundary (distance = 0 from intersection)
// If so, we need to create a truly outside point
let actualOutsidePoint = outsidePointForEnd;
// Quick check: if the point is very close to the node boundary, move it further out
const dx = Math.abs(outsidePointForEnd.x - endBounds.x);
const dy = Math.abs(outsidePointForEnd.y - endBounds.y);
const w = endBounds.width / 2;
const h = endBounds.height / 2;
log.debug('UIO cutter2: Checking if outside point is truly outside:', {
outsidePoint: outsidePointForEnd,
dx,
dy,
w,
h,
isOnBoundary: Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1,
});
// If the point is on or very close to the boundary, move it further out
if (Math.abs(dx - w) < 1 || Math.abs(dy - h) < 1) {
log.debug('UIO cutter2: Outside point is on boundary, creating truly outside point');
// Move the point further away from the node center
const directionX = outsidePointForEnd.x - endBounds.x;
const directionY = outsidePointForEnd.y - endBounds.y;
const length = Math.sqrt(directionX * directionX + directionY * directionY);
if (length > 0) {
// Move the point 10 pixels further out in the same direction
actualOutsidePoint = {
x: endBounds.x + (directionX / length) * (length + 10),
y: endBounds.y + (directionY / length) * (length + 10),
};
log.debug('UIO cutter2: Created truly outside point:', actualOutsidePoint);
}
}
let endIntersection;
// Try using the node's intersect method first
if (endNode.intersect) {
endIntersection = endNode.intersect(actualOutsidePoint);
log.debug('UIO cutter2: endNode.intersect result:', endIntersection);
// Check if the intersection is on the wrong side of the node
const isWrongSide =
(actualOutsidePoint.x < endBounds.x && endIntersection.x > endBounds.x) ||
(actualOutsidePoint.x > endBounds.x && endIntersection.x < endBounds.x);
if (isWrongSide) {
log.debug('UIO cutter2: endNode.intersect returned wrong side, setting to null');
endIntersection = null;
} else {
// Check if the intersection is valid (distance > 1)
const distance = Math.sqrt(
(actualOutsidePoint.x - endIntersection.x) ** 2 +
(actualOutsidePoint.y - endIntersection.y) ** 2
);
log.debug('UIO cutter2: Distance from outside point to intersection:', distance);
if (distance <= 1) {
log.debug('UIO cutter2: endNode.intersect distance too small, setting to null');
endIntersection = null;
}
}
} else {
log.debug('UIO cutter2: endNode.intersect method not available');
}
// Fallback to intersection function
if (!endIntersection) {
// Create a proper inside point that's on the correct side of the node
// The inside point should be between the outside point and the far edge
const insidePoint = {
x:
actualOutsidePoint.x < endBounds.x
? endBounds.x - endBounds.width / 4
: endBounds.x + endBounds.width / 4,
y: endCenter.y,
};
log.debug('UIO cutter2: Using fallback intersection function with:', {
endBounds,
actualOutsidePoint,
insidePoint,
endCenter,
});
endIntersection = intersection(endBounds, actualOutsidePoint, insidePoint);
log.debug('UIO cutter2: Fallback intersection result:', endIntersection);
}
// Replace the last point with the intersection
if (endIntersection) {
// Check if the intersection is the same as any existing point
const isDuplicate = points.some(
(p, index) =>
index < points.length - 1 &&
Math.abs(p.x - endIntersection.x) < 0.1 &&
Math.abs(p.y - endIntersection.y) < 0.1
);
if (isDuplicate) {
log.debug(
'UIO cutter2: End intersection is duplicate of existing point, removing last point instead'
);
points.pop(); // Remove the last point instead of replacing it
} else {
log.debug(
'UIO cutter2: Replacing last point',
points[points.length - 1],
'with intersection',
endIntersection,
'using outside point at index',
outsideIndexForEnd
);
points[points.length - 1] = endIntersection;
}
}
} else {
log.debug('UIO cutter2: No suitable outside point found for end node intersection');
}
// Final cleanup: Check if the last point is too close to the previous point
if (points.length > 1) {
const lastPoint = points[points.length - 1];
const secondLastPoint = points[points.length - 2];
const distance = Math.sqrt(
(lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
);
// If the distance is very small (less than 2 pixels), remove the last point
if (distance < 2) {
log.debug(
'UIO cutter2: Last point too close to previous point, removing it. Distance:',
distance
);
log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
points.pop();
}
}
log.debug('UIO cutter2: Final points:', points);
// Debug: Check which side of the end node we're ending at
if (points.length > 0) {
const finalPoint = points[points.length - 1];
const endNodeCenter = endBounds.x;
const endNodeLeftEdge = endNodeCenter - endBounds.width / 2;
const endNodeRightEdge = endNodeCenter + endBounds.width / 2;
log.debug('UIO cutter2: End node analysis:', {
finalPoint,
endNodeCenter,
endNodeLeftEdge,
endNodeRightEdge,
endingSide: finalPoint.x < endNodeCenter ? 'LEFT' : 'RIGHT',
distanceFromLeftEdge: Math.abs(finalPoint.x - endNodeLeftEdge),
distanceFromRightEdge: Math.abs(finalPoint.x - endNodeRightEdge),
});
}
return points;
};
@@ -766,7 +859,6 @@ export const render = async (
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'elk.layered.crossingMinimization.forceNodeModelOrder': true,
'elk.algorithm': algorithm,
'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
@@ -781,6 +873,7 @@ export const render = async (
// 'spacing.edgeEdge': 10,
// 'spacing.edgeEdgeBetweenLayers': 20,
// 'spacing.nodeSelfLoop': 20,
// Tweaking options
// 'elk.layered.nodePlacement.favorStraightEdges': true,
// 'nodePlacement.feedbackEdges': true,
@@ -966,43 +1059,26 @@ export const render = async (
startNode.innerHTML
);
}
if (startNode.shape === 'diamond' || startNode.shape === 'diam') {
startNode.x = startNode.offset.posX + startNode.width / 2;
startNode.y = startNode.offset.posY + startNode.height / 2;
endNode.x = endNode.offset.posX + endNode.width / 2;
endNode.y = endNode.offset.posY + endNode.height / 2;
if (startNode.shape !== 'rect33') {
edge.points.unshift({
x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2,
x: startNode.x,
y: startNode.y,
});
}
if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
if (endNode.shape !== 'rect33') {
edge.points.push({
x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2,
x: endNode.x,
y: endNode.y,
});
}
edge.points = cutPathAtIntersect(
edge.points.reverse(),
{
x: startNode.offset.posX + startNode.width / 2,
y: startNode.offset.posY + startNode.height / 2,
width: sw,
height: startNode.height,
padding: startNode.padding,
},
startNode.shape === 'diamond' || startNode.shape === 'diam'
).reverse();
edge.points = cutPathAtIntersect(
edge.points,
{
x: endNode.offset.posX + endNode.width / 2,
y: endNode.offset.posY + endNode.height / 2,
width: ew,
height: endNode.height,
padding: endNode.padding,
},
endNode.shape === 'diamond' || endNode.shape === 'diam'
);
log.debug('UIO cutter2: Points before cutter2:', edge.points);
edge.points = cutter2(startNode, endNode, edge.points);
log.debug('UIO cutter2: Points after cutter2:', edge.points);
const paths = insertEdge(
edgesEl,
edge,
@@ -1010,7 +1086,8 @@ export const render = async (
data4Layout.type,
startNode,
endNode,
data4Layout.diagramId
data4Layout.diagramId,
true
);
log.info('APA12 edge points after insert', JSON.stringify(edge.points));

View File

@@ -105,7 +105,7 @@
"@types/stylis": "^4.2.7",
"@types/uuid": "^10.0.0",
"ajv": "^8.17.1",
"chokidar": "^4.0.3",
"chokidar": "3.6.0",
"concurrently": "^9.1.2",
"csstree-validator": "^4.0.1",
"globby": "^14.0.2",

View File

@@ -265,5 +265,6 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
<!--- cspell:ignore Blazorade HueHive --->

View File

@@ -1,9 +1,13 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { evaluate, getUrl } from '../../diagrams/common/common.js';
import { evaluate } from '../../diagrams/common/common.js';
import { log } from '../../logger.js';
import { createText } from '../createText.js';
import utils from '../../utils.js';
import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
import {
getLineFunctionsWithOffset,
markerOffsets,
markerOffsets2,
} from '../../utils/lineWithOffset.js';
import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
import {
@@ -27,8 +31,8 @@ import createLabel from './createLabel.js';
import { addEdgeMarkers } from './edgeMarker.ts';
import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
const edgeLabels = new Map();
const terminalLabels = new Map();
export const edgeLabels = new Map();
export const terminalLabels = new Map();
export const clear = () => {
edgeLabels.clear();
@@ -55,7 +59,7 @@ export const insertEdgeLabel = async (elem, edge) => {
const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
// Create inner g, label, this will be positioned now for centering the text
const label = edgeLabel.insert('g').attr('class', 'label');
const label = edgeLabel.insert('g').attr('class', 'label').attr('data-id', edge.id);
label.node().appendChild(labelElement);
// Center the label
@@ -352,94 +356,33 @@ 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 generateDashArray = (len, oValueS, oValueE) => {
const middleLength = len - oValueS - oValueE;
const dashLength = 2; // Length of each dash
const gapLength = 2; // Length of each gap
const dashGapPairLength = dashLength + gapLength;
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 };
// Calculate number of complete dash-gap pairs that can fit
const numberOfPairs = Math.floor(middleLength / dashGapPairLength);
// Generate the middle pattern array
const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');
// Combine all parts
const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;
return dashArray;
};
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) {
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;
};
export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
export const insertEdge = function (
elem,
edge,
clusterDb,
diagramType,
startNode,
endNode,
id,
skipIntersect = false
) {
const { handDrawnSeed } = getConfig();
let points = edge.points;
let pointsHasChanged = false;
@@ -453,11 +396,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
edgeClassStyles.push(edge.cssCompiledStyles[key]);
}
if (head.intersect && tail.intersect) {
log.debug('UIO intersect check', edge.points, head.x, tail.x);
if (head.intersect && tail.intersect && !skipIntersect) {
points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0]));
log.debug(
'Last point APA12',
'Last point UIO',
edge.start,
'-->',
edge.end,
@@ -467,6 +411,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
);
points.push(head.intersect(points[points.length - 1]));
}
const pointsStr = btoa(JSON.stringify(points));
if (edge.toCluster) {
log.info('to cluster abc88', clusterDb.get(edge.toCluster));
points = cutPathAtIntersect(edge.points, clusterDb.get(edge.toCluster).node);
@@ -486,7 +431,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
}
let lineData = points.filter((p) => !Number.isNaN(p.y));
lineData = fixCorners(lineData);
//lineData = fixCorners(lineData);
let curve = curveBasis;
curve = curveLinear;
switch (edge.curve) {
@@ -530,6 +475,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
curve = curveBasis;
}
// if (edge.curve) {
// curve = edge.curve;
// }
const { x, y } = getLineFunctionsWithOffset(edge);
const lineFunction = line().x(x).y(y).curve(curve);
@@ -561,10 +510,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
strokeClasses += ' edge-pattern-solid';
}
let svgPath;
let linePath = lineFunction(lineData);
const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
let linePath =
edge.curve === 'rounded'
? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)
: lineFunction(lineData);
const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
let animatedEdge = false;
if (edge.look === 'handDrawn') {
const rc = rough.svg(elem);
Object.assign([], lineData);
@@ -595,7 +548,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
animationClass = ' edge-animation-' + edge.animation;
}
const pathStyle = stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles;
const pathStyle =
(stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +
';' +
(edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
svgPath = elem
.append('path')
.attr('d', linePath)
@@ -605,11 +561,38 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
)
.attr('style', pathStyle);
//eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];
// Possible fix to remove eslint-disable-next-line
//strokeColor = /stroke:([^;]+)/.exec(pathStyle)?.[1];
animatedEdge =
edge.animate === true || !!edge.animation || stylesFromClasses.includes('animation');
const len = svgPath.node().getTotalLength();
const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;
const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;
if (edge.look === 'neo' && !animatedEdge) {
const dashArray =
edge.pattern === 'dotted' || edge.pattern === 'dashed'
? generateDashArray(len, oValueS, oValueE)
: `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;
// No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.
const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;
svgPath.attr('style', mOffset + svgPath.attr('style'));
}
}
// DEBUG code, DO NOT REMOVE
// adds a red circle at each edge coordinate
// MC Special
svgPath.attr('data-edge', true);
svgPath.attr('data-et', 'edge');
svgPath.attr('data-id', edge.id);
svgPath.attr('data-points', pointsStr);
// DEBUG code, adds a red circle at each edge coordinate
// cornerPoints.forEach((point) => {
// elem
// .append('circle')
@@ -619,24 +602,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
// .attr('cx', point.x)
// .attr('cy', point.y);
// });
// lineData.forEach((point) => {
// elem
// .append('circle')
// .style('stroke', 'blue')
// .style('fill', 'blue')
// .attr('r', 3)
// .attr('cx', point.x)
// .attr('cy', point.y);
// });
if (edge.showPoints) {
lineData.forEach((point) => {
elem
.append('circle')
.style('stroke', 'red')
.style('fill', 'red')
.attr('r', 1)
.attr('cx', point.x)
.attr('cy', point.y);
});
}
let url = '';
if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
url = getUrl(true);
url =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
window.location.search;
url = url.replace(/\(/g, '\\(').replace(/\)/g, '\\)');
}
log.info('arrowTypeStart', edge.arrowTypeStart);
log.info('arrowTypeEnd', edge.arrowTypeEnd);
addEdgeMarkers(svgPath, edge, url, id, diagramType, strokeColor);
const useMargin = !animatedEdge && edge?.look === 'neo';
addEdgeMarkers(svgPath, edge, url, id, diagramType, useMargin, strokeColor);
let paths = {};
if (pointsHasChanged) {
@@ -645,3 +637,134 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
paths.originalPath = edge.points;
return paths;
};
/**
* Generates SVG path data with rounded corners from an array of points.
* @param {Array} points - Array of points in the format [{x: Number, y: Number}, ...]
* @param {Number} radius - The radius of the rounded corners
* @returns {String} - SVG path data string
*/
function generateRoundedPath(points, radius) {
if (points.length < 2) {
return '';
}
let path = '';
const size = points.length;
const epsilon = 1e-5;
for (let i = 0; i < size; i++) {
const currPoint = points[i];
const prevPoint = points[i - 1];
const nextPoint = points[i + 1];
if (i === 0) {
// Move to the first point
path += `M${currPoint.x},${currPoint.y}`;
} else if (i === size - 1) {
// Last point, draw a straight line to the final point
path += `L${currPoint.x},${currPoint.y}`;
} else {
// Calculate vectors for incoming and outgoing segments
const dx1 = currPoint.x - prevPoint.x;
const dy1 = currPoint.y - prevPoint.y;
const dx2 = nextPoint.x - currPoint.x;
const dy2 = nextPoint.y - currPoint.y;
const len1 = Math.hypot(dx1, dy1);
const len2 = Math.hypot(dx2, dy2);
// Prevent division by zero
if (len1 < epsilon || len2 < epsilon) {
path += `L${currPoint.x},${currPoint.y}`;
continue;
}
// Normalize the vectors
const nx1 = dx1 / len1;
const ny1 = dy1 / len1;
const nx2 = dx2 / len2;
const ny2 = dy2 / len2;
// Calculate the angle between the vectors
const dot = nx1 * nx2 + ny1 * ny2;
// Clamp the dot product to avoid numerical issues with acos
const clampedDot = Math.max(-1, Math.min(1, dot));
const angle = Math.acos(clampedDot);
// Skip rounding if the angle is too small or too close to 180 degrees
if (angle < epsilon || Math.abs(Math.PI - angle) < epsilon) {
path += `L${currPoint.x},${currPoint.y}`;
continue;
}
// Calculate the distance to offset the control point
const cutLen = Math.min(radius / Math.sin(angle / 2), len1 / 2, len2 / 2);
// Calculate the start and end points of the curve
const startX = currPoint.x - nx1 * cutLen;
const startY = currPoint.y - ny1 * cutLen;
const endX = currPoint.x + nx2 * cutLen;
const endY = currPoint.y + ny2 * cutLen;
// Draw the line to the start of the curve
path += `L${startX},${startY}`;
// Draw the quadratic Bezier curve
path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;
}
}
return path;
}
// Helper function to calculate delta and angle between two points
function calculateDeltaAndAngle(point1, point2) {
if (!point1 || !point2) {
return { angle: 0, deltaX: 0, deltaY: 0 };
}
const deltaX = point2.x - point1.x;
const deltaY = point2.y - point1.y;
const angle = Math.atan2(deltaY, deltaX);
return { angle, deltaX, deltaY };
}
// Function to adjust the first and last points of the points array
function applyMarkerOffsetsToPoints(points, edge) {
// Copy the points array to avoid mutating the original data
const newPoints = points.map((point) => ({ ...point }));
// Handle the first point (start of the edge)
if (points.length >= 2 && markerOffsets[edge.arrowTypeStart]) {
const offsetValue = markerOffsets[edge.arrowTypeStart];
const point1 = points[0];
const point2 = points[1];
const { angle } = calculateDeltaAndAngle(point1, point2);
const offsetX = offsetValue * Math.cos(angle);
const offsetY = offsetValue * Math.sin(angle);
newPoints[0].x = point1.x + offsetX;
newPoints[0].y = point1.y + offsetY;
}
// Handle the last point (end of the edge)
const n = points.length;
if (n >= 2 && markerOffsets[edge.arrowTypeEnd]) {
const offsetValue = markerOffsets[edge.arrowTypeEnd];
const point1 = points[n - 1];
const point2 = points[n - 2];
const { angle } = calculateDeltaAndAngle(point2, point1);
const offsetX = offsetValue * Math.cos(angle);
const offsetY = offsetValue * Math.sin(angle);
newPoints[n - 1].x = point1.x - offsetX;
newPoints[n - 1].y = point1.y - offsetY;
}
return newPoints;
}

View File

@@ -2,64 +2,87 @@
* 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) {
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
// p7 and p473.
{
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
// 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 +
// 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 a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
// b1 y + c1 = 0.
a1 = p2.y - p1.y;
b1 = p1.x - p2.x;
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;
// Compute r3 and r4.
r3 = a1 * q1.x + b1 * q1.y + c1;
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*/;
// 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;
// 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 };
}
// 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;
b2 = q1.x - q2.x;
c2 = q2.x * q1.y - q1.x * q2.y;
// Compute r1 and r2
r1 = a2 * p1.x + b2 * p1.y + c2;
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 (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
return /*DON'T_INTERSECT*/;
}
// Line segments intersect: compute intersection point.
denom = a1 * b2 - a2 * b1;
if (denom === 0) {
return /*COLLINEAR*/;
}
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.
num = b1 * c2 - b2 * c1;
x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
num = a2 * c1 - a1 * c2;
y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
return { x: x, y: y };
}
function sameSign(r1, r2) {

View File

@@ -6,6 +6,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import type { D3Selection } from '../../../types.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) {
const { labelStyles, nodeStyles } = styles2String(node);
@@ -35,7 +36,10 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
}
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) {
log.info('Circle intersect', node, radius, point);
return intersect.circle(node, radius, point);

View File

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

View File

@@ -1,4 +1,3 @@
import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
@@ -6,6 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
import type { Bounds, Point } from '../../../types.js';
export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
return [
@@ -59,17 +59,42 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
}
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) {
log.debug(
'APA12 Intersect called SPLIT\npoint:',
point,
'\nnode:\n',
node,
'\nres:',
intersect.polygon(node, points, point)
);
return intersect.polygon(node, points, point);
// @ts-ignore TODO fix this (KNSV)
return this.calcIntersect(node as Bounds, point);
};
return shapeSvg;

View File

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

View File

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

View File

@@ -3,13 +3,23 @@ import type { EdgeData, Point } from '../types.js';
// We need to draw the lines a bit shorter to avoid drawing
// under any transparent markers.
// The offsets are calculated from the markers' dimensions.
const markerOffsets = {
aggregation: 18,
extension: 18,
composition: 18,
export const markerOffsets = {
aggregation: 17.25,
extension: 17.25,
composition: 17.25,
dependency: 6,
lollipop: 13.5,
arrow_point: 4,
//arrow_cross: 24,
} as const;
// We need to draw the lines a bit shorter to avoid drawing
// under any transparent markers.
// The offsets are calculated from the markers' dimensions.
export const markerOffsets2 = {
arrow_point: 9,
arrow_cross: 12.5,
arrow_circle: 12.5,
} as const;
/**

243
pnpm-lock.yaml generated
View File

@@ -74,8 +74,8 @@ importers:
specifier: ^8.17.1
version: 8.17.1
chokidar:
specifier: ^4.0.3
version: 4.0.3
specifier: 3.6.0
version: 3.6.0
concurrently:
specifier: ^9.1.2
version: 9.1.2
@@ -327,8 +327,8 @@ importers:
specifier: ^8.17.1
version: 8.17.1
chokidar:
specifier: ^4.0.3
version: 4.0.3
specifier: 3.6.0
version: 3.6.0
concurrently:
specifier: ^9.1.2
version: 9.1.2
@@ -508,6 +508,67 @@ importers:
specifier: ^7.3.0
version: 7.3.0
packages/mermaid/src/vitepress:
dependencies:
'@mdi/font':
specifier: ^7.4.47
version: 7.4.47
'@vueuse/core':
specifier: ^12.7.0
version: 12.7.0(typescript@5.7.3)
font-awesome:
specifier: ^4.7.0
version: 4.7.0
jiti:
specifier: ^2.4.2
version: 2.4.2
mermaid:
specifier: workspace:^
version: link:../..
vue:
specifier: ^3.4.38
version: 3.5.13(typescript@5.7.3)
devDependencies:
'@iconify-json/carbon':
specifier: ^1.1.37
version: 1.2.1
'@unocss/reset':
specifier: ^66.0.0
version: 66.0.0
'@vite-pwa/vitepress':
specifier: ^0.5.3
version: 0.5.4(vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))
'@vitejs/plugin-vue':
specifier: ^5.0.5
version: 5.2.1(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
fast-glob:
specifier: ^3.3.3
version: 3.3.3
https-localhost:
specifier: ^4.7.1
version: 4.7.1
pathe:
specifier: ^2.0.3
version: 2.0.3
unocss:
specifier: ^66.0.0
version: 66.0.0(postcss@8.5.3)(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
unplugin-vue-components:
specifier: ^28.4.0
version: 28.4.0(@babel/parser@7.27.2)(vue@3.5.13(typescript@5.7.3))
vite:
specifier: ^6.1.1
version: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
vite-plugin-pwa:
specifier: ^0.21.1
version: 0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
vitepress:
specifier: 1.6.3
version: 1.6.3(@algolia/client-search@5.20.3)(@types/node@22.13.5)(axios@1.8.4)(postcss@8.5.3)(search-insights@2.17.2)(terser@5.39.0)(typescript@5.7.3)
workbox-window:
specifier: ^7.3.0
version: 7.3.0
packages/parser:
dependencies:
langium:
@@ -912,10 +973,6 @@ packages:
resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.25.9':
resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
engines: {node: '>=6.9.0'}
'@babel/helper-string-parser@7.27.1':
resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
engines: {node: '>=6.9.0'}
@@ -3627,6 +3684,15 @@ packages:
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
'@vite-pwa/vitepress@0.5.4':
resolution: {integrity: sha512-g57qwG983WTyQNLnOcDVPQEIeN+QDgK/HdqghmygiUFp3a/MzVvmLXC/EVnPAXxWa8W2g9pZ9lE3EiDGs2HjsA==}
peerDependencies:
'@vite-pwa/assets-generator': ^0.2.6
vite-plugin-pwa: '>=0.21.2 <1'
peerDependenciesMeta:
'@vite-pwa/assets-generator':
optional: true
'@vite-pwa/vitepress@1.0.0':
resolution: {integrity: sha512-i5RFah4urA6tZycYlGyBslVx8cVzbZBcARJLDg5rWMfAkRmyLtpRU6usGfVOwyN9kjJ2Bkm+gBHXF1hhr7HptQ==}
peerDependencies:
@@ -4485,10 +4551,6 @@ packages:
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
engines: {node: '>= 8.10.0'}
chokidar@4.0.3:
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
engines: {node: '>= 14.16.0'}
chrome-trace-event@1.0.4:
resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
engines: {node: '>=6.0'}
@@ -8357,10 +8419,6 @@ packages:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
readdirp@4.1.2:
resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
engines: {node: '>= 14.18.0'}
real-require@0.2.0:
resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
engines: {node: '>= 12.13.0'}
@@ -9594,6 +9652,18 @@ packages:
peerDependencies:
vite: '>=4 <=6'
vite-plugin-pwa@0.21.2:
resolution: {integrity: sha512-vFhH6Waw8itNu37hWUJxL50q+CBbNcMVzsKaYHQVrfxTt3ihk3PeLO22SbiP1UNWzcEPaTQv+YVxe4G0KOjAkg==}
engines: {node: '>=16.0.0'}
peerDependencies:
'@vite-pwa/assets-generator': ^0.2.6
vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
workbox-build: ^7.3.0
workbox-window: ^7.3.0
peerDependenciesMeta:
'@vite-pwa/assets-generator':
optional: true
vite-plugin-pwa@1.0.0:
resolution: {integrity: sha512-X77jo0AOd5OcxmWj3WnVti8n7Kw2tBgV1c8MCXFclrSlDV23ePzv2eTDIALXI2Qo6nJ5pZJeZAuX0AawvRfoeA==}
engines: {node: '>=16.0.0'}
@@ -10648,7 +10718,7 @@ snapshots:
'@babel/code-frame@7.26.2':
dependencies:
'@babel/helper-validator-identifier': 7.25.9
'@babel/helper-validator-identifier': 7.27.1
js-tokens: 4.0.0
picocolors: 1.1.1
@@ -10670,10 +10740,10 @@ snapshots:
'@babel/helper-compilation-targets': 7.26.5
'@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
'@babel/helpers': 7.26.9
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@babel/template': 7.26.9
'@babel/traverse': 7.26.9
'@babel/types': 7.26.9
'@babel/types': 7.27.1
convert-source-map: 2.0.0
debug: 4.4.0(supports-color@8.1.1)
gensync: 1.0.0-beta.2
@@ -10704,8 +10774,8 @@ snapshots:
'@babel/generator@7.26.9':
dependencies:
'@babel/parser': 7.26.9
'@babel/types': 7.26.9
'@babel/parser': 7.27.2
'@babel/types': 7.27.1
'@jridgewell/gen-mapping': 0.3.8
'@jridgewell/trace-mapping': 0.3.25
jsesc: 3.1.0
@@ -10810,7 +10880,7 @@ snapshots:
'@babel/helper-module-imports@7.25.9':
dependencies:
'@babel/traverse': 7.26.9
'@babel/types': 7.26.9
'@babel/types': 7.27.1
transitivePeerDependencies:
- supports-color
@@ -10825,7 +10895,7 @@ snapshots:
dependencies:
'@babel/core': 7.26.9
'@babel/helper-module-imports': 7.25.9
'@babel/helper-validator-identifier': 7.25.9
'@babel/helper-validator-identifier': 7.27.1
'@babel/traverse': 7.26.9
transitivePeerDependencies:
- supports-color
@@ -10901,8 +10971,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@babel/helper-string-parser@7.25.9': {}
'@babel/helper-string-parser@7.27.1': {}
'@babel/helper-validator-identifier@7.25.9': {}
@@ -10924,7 +10992,7 @@ snapshots:
'@babel/helpers@7.26.9':
dependencies:
'@babel/template': 7.26.9
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@babel/helpers@7.27.1':
dependencies:
@@ -10933,7 +11001,7 @@ snapshots:
'@babel/parser@7.26.9':
dependencies:
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@babel/parser@7.27.2':
dependencies:
@@ -11945,8 +12013,8 @@ snapshots:
'@babel/template@7.26.9':
dependencies:
'@babel/code-frame': 7.26.2
'@babel/parser': 7.26.9
'@babel/types': 7.26.9
'@babel/parser': 7.27.2
'@babel/types': 7.27.1
'@babel/template@7.27.2':
dependencies:
@@ -11958,9 +12026,9 @@ snapshots:
dependencies:
'@babel/code-frame': 7.26.2
'@babel/generator': 7.26.9
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@babel/template': 7.26.9
'@babel/types': 7.26.9
'@babel/types': 7.27.1
debug: 4.4.0(supports-color@8.1.1)
globals: 11.12.0
transitivePeerDependencies:
@@ -11980,8 +12048,8 @@ snapshots:
'@babel/types@7.26.9':
dependencies:
'@babel/helper-string-parser': 7.25.9
'@babel/helper-validator-identifier': 7.25.9
'@babel/helper-string-parser': 7.27.1
'@babel/helper-validator-identifier': 7.27.1
'@babel/types@7.27.1':
dependencies:
@@ -13634,24 +13702,24 @@ snapshots:
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.26.9
'@babel/types': 7.26.9
'@babel/parser': 7.27.2
'@babel/types': 7.27.1
'@types/babel__generator': 7.6.8
'@types/babel__template': 7.4.4
'@types/babel__traverse': 7.20.6
'@types/babel__generator@7.6.8':
dependencies:
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@types/babel__template@7.4.4':
dependencies:
'@babel/parser': 7.26.9
'@babel/types': 7.26.9
'@babel/parser': 7.27.2
'@babel/types': 7.27.1
'@types/babel__traverse@7.20.6':
dependencies:
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@types/body-parser@1.19.5':
dependencies:
@@ -14191,6 +14259,16 @@ snapshots:
transitivePeerDependencies:
- vue
'@unocss/astro@66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
dependencies:
'@unocss/core': 66.0.0
'@unocss/reset': 66.0.0
'@unocss/vite': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
optionalDependencies:
vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
transitivePeerDependencies:
- vue
'@unocss/cli@66.0.0':
dependencies:
'@ampproject/remapping': 2.3.0
@@ -14326,6 +14404,24 @@ snapshots:
transitivePeerDependencies:
- vue
'@unocss/vite@66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
dependencies:
'@ampproject/remapping': 2.3.0
'@unocss/config': 66.0.0
'@unocss/core': 66.0.0
'@unocss/inspector': 66.0.0(vue@3.5.13(typescript@5.7.3))
chokidar: 3.6.0
magic-string: 0.30.17
tinyglobby: 0.2.12
unplugin-utils: 0.2.4
vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
transitivePeerDependencies:
- vue
'@vite-pwa/vitepress@0.5.4(vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))':
dependencies:
vite-plugin-pwa: 0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
'@vite-pwa/vitepress@1.0.0(vite-plugin-pwa@1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))':
dependencies:
vite-plugin-pwa: 1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
@@ -14340,6 +14436,11 @@ snapshots:
vite: 6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
vue: 3.5.13(typescript@5.7.3)
'@vitejs/plugin-vue@5.2.1(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
dependencies:
vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
vue: 3.5.13(typescript@5.7.3)
'@vitest/coverage-v8@3.0.6(vitest@3.0.6)':
dependencies:
'@ampproject/remapping': 2.3.0
@@ -14418,7 +14519,7 @@ snapshots:
'@vue/compiler-core@3.5.13':
dependencies:
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@vue/shared': 3.5.13
entities: 4.5.0
estree-walker: 2.0.2
@@ -14431,7 +14532,7 @@ snapshots:
'@vue/compiler-sfc@3.5.13':
dependencies:
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@vue/compiler-core': 3.5.13
'@vue/compiler-dom': 3.5.13
'@vue/compiler-ssr': 3.5.13
@@ -14989,7 +15090,7 @@ snapshots:
babel-plugin-jest-hoist@29.6.3:
dependencies:
'@babel/template': 7.26.9
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@types/babel__core': 7.20.5
'@types/babel__traverse': 7.20.6
@@ -15350,10 +15451,6 @@ snapshots:
optionalDependencies:
fsevents: 2.3.3
chokidar@4.0.3:
dependencies:
readdirp: 4.1.2
chrome-trace-event@1.0.4: {}
ci-info@3.9.0: {}
@@ -17214,7 +17311,7 @@ snapshots:
find-test-names@1.29.5(@babel/core@7.26.9):
dependencies:
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
acorn-walk: 8.3.4
debug: 4.4.0(supports-color@8.1.1)
@@ -18053,7 +18150,7 @@ snapshots:
istanbul-lib-instrument@5.2.1:
dependencies:
'@babel/core': 7.26.9
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@istanbuljs/schema': 0.1.3
istanbul-lib-coverage: 3.2.2
semver: 6.3.1
@@ -18063,7 +18160,7 @@ snapshots:
istanbul-lib-instrument@6.0.3:
dependencies:
'@babel/core': 7.26.9
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
'@istanbuljs/schema': 0.1.3
istanbul-lib-coverage: 3.2.2
semver: 7.7.1
@@ -18382,7 +18479,7 @@ snapshots:
'@babel/generator': 7.26.9
'@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
'@babel/plugin-syntax-typescript': 7.25.7(@babel/core@7.26.9)
'@babel/types': 7.26.9
'@babel/types': 7.27.1
'@jest/expect-utils': 29.7.0
'@jest/transform': 29.7.0
'@jest/types': 29.6.3
@@ -19392,7 +19489,7 @@ snapshots:
node-source-walk@7.0.0:
dependencies:
'@babel/parser': 7.26.9
'@babel/parser': 7.27.2
nomnom@1.5.2:
dependencies:
@@ -20075,8 +20172,6 @@ snapshots:
dependencies:
picomatch: 2.3.1
readdirp@4.1.2: {}
real-require@0.2.0: {}
rechoir@0.6.2:
@@ -21085,7 +21180,7 @@ snapshots:
terser@5.34.1:
dependencies:
'@jridgewell/source-map': 0.3.6
acorn: 8.14.0
acorn: 8.14.1
commander: 2.20.3
source-map-support: 0.5.21
@@ -21455,6 +21550,33 @@ snapshots:
- supports-color
- vue
unocss@66.0.0(postcss@8.5.3)(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3)):
dependencies:
'@unocss/astro': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
'@unocss/cli': 66.0.0
'@unocss/core': 66.0.0
'@unocss/postcss': 66.0.0(postcss@8.5.3)
'@unocss/preset-attributify': 66.0.0
'@unocss/preset-icons': 66.0.0
'@unocss/preset-mini': 66.0.0
'@unocss/preset-tagify': 66.0.0
'@unocss/preset-typography': 66.0.0
'@unocss/preset-uno': 66.0.0
'@unocss/preset-web-fonts': 66.0.0
'@unocss/preset-wind': 66.0.0
'@unocss/preset-wind3': 66.0.0
'@unocss/transformer-attributify-jsx': 66.0.0
'@unocss/transformer-compile-class': 66.0.0
'@unocss/transformer-directives': 66.0.0
'@unocss/transformer-variant-group': 66.0.0
'@unocss/vite': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
optionalDependencies:
vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
transitivePeerDependencies:
- postcss
- supports-color
- vue
unpipe@1.0.0: {}
unplugin-utils@0.2.4:
@@ -21480,7 +21602,7 @@ snapshots:
unplugin@2.2.0:
dependencies:
acorn: 8.14.0
acorn: 8.14.1
webpack-virtual-modules: 0.6.2
untildify@4.0.0: {}
@@ -21570,6 +21692,17 @@ snapshots:
transitivePeerDependencies:
- supports-color
vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0):
dependencies:
debug: 4.4.0(supports-color@8.1.1)
pretty-bytes: 6.1.1
tinyglobby: 0.2.12
vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
workbox-build: 7.1.1(@types/babel__core@7.20.5)
workbox-window: 7.3.0
transitivePeerDependencies:
- supports-color
vite-plugin-pwa@1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0):
dependencies:
debug: 4.4.0(supports-color@8.1.1)