mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-08 18:16:44 +02:00
Compare commits
28 Commits
@mermaid-j
...
6088-fix-f
Author | SHA1 | Date | |
---|---|---|---|
![]() |
8314554eb5 | ||
![]() |
b7c03dc27e | ||
![]() |
c7f2f609a9 | ||
![]() |
4c3de3a1ec | ||
![]() |
e7970c66ee | ||
![]() |
c7b96be683 | ||
![]() |
0623a87d70 | ||
![]() |
c5f89eaa9a | ||
![]() |
1fbe550285 | ||
![]() |
b3724f04c4 | ||
![]() |
2f58a0e188 | ||
![]() |
6f1e0e4d17 | ||
![]() |
7dd8ddc3eb | ||
![]() |
222d7170f7 | ||
![]() |
3137cff4a5 | ||
![]() |
b45b1d7795 | ||
![]() |
e1030b186e | ||
![]() |
334c8c2962 | ||
![]() |
bdaa3f693a | ||
![]() |
be13fb0391 | ||
![]() |
c120901744 | ||
![]() |
badb019d38 | ||
![]() |
d85a393bcd | ||
![]() |
fbae611406 | ||
![]() |
1e3ea13323 | ||
![]() |
4c8c48cde9 | ||
![]() |
c8e50276e8 | ||
![]() |
1e6419a63f |
5
.changeset/hungry-guests-drive.md
Normal file
5
.changeset/hungry-guests-drive.md
Normal 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
68
.github/workflows/validate-lockfile.yml
vendored
Normal 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_
|
@@ -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).**
|
||||
|
@@ -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 },
|
||||
|
@@ -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 --->
|
||||
|
@@ -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",
|
||||
|
@@ -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. -->
|
||||
|
@@ -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));
|
||||
|
||||
|
@@ -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",
|
||||
|
@@ -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 --->
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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) {
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
};
|
||||
|
@@ -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;
|
||||
|
@@ -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.
|
||||
|
@@ -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;
|
||||
|
@@ -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
243
pnpm-lock.yaml
generated
@@ -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)
|
||||
|
Reference in New Issue
Block a user