mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-10 02:49:40 +02:00
Compare commits
9 Commits
@mermaid-j
...
6088-fix-f
| Author | SHA1 | Date | |
|---|---|---|---|
|
8314554eb5 | ||
|
|
b7c03dc27e | ||
|
|
c7f2f609a9 | ||
|
|
4c3de3a1ec | ||
|
|
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
|
||||||
@@ -106,50 +106,95 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
layout: elk
|
||||||
|
flowchart:
|
||||||
|
curve: linear
|
||||||
|
---
|
||||||
flowchart LR
|
flowchart LR
|
||||||
AB["apa@apa@"] --> B(("`apa@apa`"))
|
A[A] -- Mermaid js --> B[B]
|
||||||
</pre>
|
A[A] -- Mermaid js --- B[B]
|
||||||
<pre id="diagram4" class="mermaid">
|
A@{ shape: diamond}
|
||||||
flowchart
|
B@{ shape: diamond}
|
||||||
D(("for D"))
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
|
---
|
||||||
|
config:
|
||||||
|
layout: elk
|
||||||
|
flowchart:
|
||||||
|
curve: rounded
|
||||||
|
---
|
||||||
flowchart LR
|
flowchart LR
|
||||||
A e1@==> B
|
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
|
||||||
e1@{ animate: true}
|
I --> D & D
|
||||||
|
D@{ shape: question}
|
||||||
|
I@{ shape: question}
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
---
|
||||||
A e1@--> B
|
config:
|
||||||
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
|
layout: elk
|
||||||
class e1 animate
|
flowchart:
|
||||||
</pre>
|
curve: rounded
|
||||||
<h2>infinite</h2>
|
elk:
|
||||||
<pre id="diagram4" class="mermaid2">
|
nodePlacementStrategy: NETWORK_SIMPLEX
|
||||||
flowchart LR
|
---
|
||||||
A e1@--> B
|
flowchart LR
|
||||||
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
|
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
|
||||||
class e1 animate
|
D --> I & I
|
||||||
</pre>
|
a["a"]
|
||||||
<h2>Mermaid - edge-animation-slow</h2>
|
D@{ shape: trap-b}
|
||||||
<pre id="diagram4" class="mermaid2">
|
I@{ shape: lean-l}
|
||||||
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
|
|
||||||
</pre>
|
</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
|
B --> C
|
||||||
>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<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:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -174,7 +219,7 @@ config:
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -187,7 +232,7 @@ config:
|
|||||||
D-->I
|
D-->I
|
||||||
D-->I
|
D-->I
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -226,7 +271,7 @@ flowchart LR
|
|||||||
n8@{ shape: rect}
|
n8@{ shape: rect}
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -242,7 +287,7 @@ flowchart LR
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -251,7 +296,7 @@ flowchart LR
|
|||||||
A{A} --> B & C
|
A{A} --> B & C
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -263,7 +308,7 @@ flowchart LR
|
|||||||
end
|
end
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
layout: elk
|
layout: elk
|
||||||
@@ -281,7 +326,7 @@ flowchart LR
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
kanban:
|
kanban:
|
||||||
@@ -300,81 +345,81 @@ kanban
|
|||||||
task3[💻 Develop login feature]@{ ticket: 103 }
|
task3[💻 Develop login feature]@{ ticket: 103 }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
|
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
|
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||||
A:::AClass
|
A:::AClass
|
||||||
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
|
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
|
||||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
kanban
|
kanban
|
||||||
id2[In progress]
|
id2[In progress]
|
||||||
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
|
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
|
||||||
</pre>
|
</pre>
|
||||||
<pre id="diagram4" class="mermaid2">
|
<pre id="diagram4" class="mermaid">
|
||||||
---
|
---
|
||||||
config:
|
config:
|
||||||
kanban:
|
kanban:
|
||||||
@@ -445,7 +490,7 @@ kanban
|
|||||||
// look: 'handDrawn',
|
// look: 'handDrawn',
|
||||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||||
// layout: 'dagre',
|
// layout: 'dagre',
|
||||||
// layout: 'elk',
|
layout: 'elk',
|
||||||
// layout: 'fixed',
|
// layout: 'fixed',
|
||||||
// htmlLabels: false,
|
// htmlLabels: false,
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
|
|||||||
@@ -83,7 +83,7 @@
|
|||||||
"@vitest/spy": "^3.0.6",
|
"@vitest/spy": "^3.0.6",
|
||||||
"@vitest/ui": "^3.0.6",
|
"@vitest/ui": "^3.0.6",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"chokidar": "^4.0.3",
|
"chokidar": "3.6.0",
|
||||||
"concurrently": "^9.1.2",
|
"concurrently": "^9.1.2",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"cpy-cli": "^5.0.0",
|
"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.
|
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 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.
|
> 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.mrtree`: Multi-root tree layout
|
||||||
- `elk.sporeOverlap`: Spore overlap layout
|
- `elk.sporeOverlap`: Spore overlap layout
|
||||||
|
|
||||||
<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->
|
<!-- TODO: Add images for these layouts, as GitHub doesn't support natively. -->
|
||||||
|
|||||||
@@ -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 { curveLinear } from 'd3';
|
||||||
import ELK from 'elkjs/lib/elk.bundled.js';
|
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';
|
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
|
||||||
|
|
||||||
type Node = LayoutData['nodes'][number];
|
type Node = LayoutData['nodes'][number];
|
||||||
@@ -51,11 +58,9 @@ export const render = async (
|
|||||||
|
|
||||||
// Add the element to the DOM
|
// Add the element to the DOM
|
||||||
if (!node.isGroup) {
|
if (!node.isGroup) {
|
||||||
const child: NodeWithVertex = {
|
const child = node as NodeWithVertex;
|
||||||
...node,
|
|
||||||
};
|
|
||||||
graph.children.push(child);
|
graph.children.push(child);
|
||||||
nodeDb[node.id] = child;
|
nodeDb[node.id] = node;
|
||||||
|
|
||||||
const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
|
const childNodeEl = await insertNode(nodeEl, node, { config, dir: node.dir });
|
||||||
const boundingBox = childNodeEl.node()!.getBBox();
|
const boundingBox = childNodeEl.node()!.getBBox();
|
||||||
@@ -68,7 +73,9 @@ export const render = async (
|
|||||||
...node,
|
...node,
|
||||||
children: [],
|
children: [],
|
||||||
};
|
};
|
||||||
|
// Let elk render with the copy
|
||||||
graph.children.push(child);
|
graph.children.push(child);
|
||||||
|
// Save the original containing the intersection function
|
||||||
nodeDb[node.id] = child;
|
nodeDb[node.id] = child;
|
||||||
await addVertices(nodeEl, nodeArr, child, node.id);
|
await addVertices(nodeEl, nodeArr, child, node.id);
|
||||||
|
|
||||||
@@ -143,7 +150,7 @@ export const render = async (
|
|||||||
height: node.height,
|
height: node.height,
|
||||||
};
|
};
|
||||||
if (node.isGroup) {
|
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');
|
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
|
||||||
// TODO use faster way of cloning
|
// TODO use faster way of cloning
|
||||||
const clusterNode = JSON.parse(JSON.stringify(node));
|
const clusterNode = JSON.parse(JSON.stringify(node));
|
||||||
@@ -152,10 +159,10 @@ export const render = async (
|
|||||||
clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
|
clusterNode.width = Math.max(clusterNode.width, node.labelData.width);
|
||||||
await insertCluster(subgraphEl, clusterNode);
|
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 {
|
} else {
|
||||||
log.info(
|
log.info(
|
||||||
'id NODE = ',
|
'Id NODE = ',
|
||||||
node.id,
|
node.id,
|
||||||
node.x,
|
node.x,
|
||||||
node.y,
|
node.y,
|
||||||
@@ -259,7 +266,6 @@ export const render = async (
|
|||||||
const edges = dataForLayout.edges;
|
const edges = dataForLayout.edges;
|
||||||
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
|
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
|
||||||
const linkIdCnt: any = {};
|
const linkIdCnt: any = {};
|
||||||
const dir = dataForLayout.direction || 'DOWN';
|
|
||||||
let defaultStyle: string | undefined;
|
let defaultStyle: string | undefined;
|
||||||
let defaultLabelStyle: string | undefined;
|
let defaultLabelStyle: string | undefined;
|
||||||
|
|
||||||
@@ -289,7 +295,7 @@ export const render = async (
|
|||||||
linkIdCnt[linkIdBase]++;
|
linkIdCnt[linkIdBase]++;
|
||||||
log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
|
log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
|
||||||
}
|
}
|
||||||
const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
|
const linkId = linkIdBase; // + '_' + linkIdCnt[linkIdBase];
|
||||||
edge.id = linkId;
|
edge.id = linkId;
|
||||||
log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
|
log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
|
||||||
const linkNameStart = 'LS_' + edge.start;
|
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
|
// calculate start and end points of the edge, note that the source and target
|
||||||
// can be modified for shapes that have ports
|
// 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);
|
log.debug('abc78 source and target', source, target);
|
||||||
// Add the edge to the graph
|
// Add the edge to the graph
|
||||||
graph.edges.push({
|
graph.edges.push({
|
||||||
// @ts-ignore TODO: fix this
|
|
||||||
id: 'e' + edge.start + edge.end,
|
|
||||||
...edge,
|
...edge,
|
||||||
sources: [source],
|
sources: [source],
|
||||||
targets: [target],
|
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 = (
|
const intersection = (
|
||||||
node: { x: any; y: any; width: number; height: number },
|
node: { x: any; y: any; width: number; height: number },
|
||||||
outsidePoint: { x: number; y: number },
|
outsidePoint: { x: number; y: number },
|
||||||
@@ -653,7 +508,7 @@ export const render = async (
|
|||||||
|
|
||||||
return res;
|
return res;
|
||||||
} else {
|
} else {
|
||||||
// Intersection on sides of rect
|
// Intersection onn sides of rect
|
||||||
if (insidePoint.x < outsidePoint.x) {
|
if (insidePoint.x < outsidePoint.x) {
|
||||||
r = outsidePoint.x - w - x;
|
r = outsidePoint.x - w - x;
|
||||||
} else {
|
} else {
|
||||||
@@ -696,62 +551,300 @@ export const render = async (
|
|||||||
}
|
}
|
||||||
return false;
|
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 cutter2 = (startNode: any, endNode: any, _points: any[]) => {
|
||||||
const inter2 = diamondIntersection(bounds, lastPointOutside, point);
|
const startBounds = {
|
||||||
const distance = Math.sqrt(
|
x: startNode.offset.posX + startNode.width / 2,
|
||||||
(lastPointOutside.x - inter2.x) ** 2 + (lastPointOutside.y - inter2.y) ** 2
|
y: startNode.offset.posY + startNode.height / 2,
|
||||||
);
|
width: startNode.width,
|
||||||
if (distance > 1) {
|
height: startNode.height,
|
||||||
inter = inter2;
|
padding: startNode.padding,
|
||||||
}
|
};
|
||||||
}
|
const endBounds = {
|
||||||
if (!inter) {
|
x: endNode.offset.posX + endNode.width / 2,
|
||||||
inter = intersection(bounds, lastPointOutside, point);
|
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
|
if (_points.length === 0) {
|
||||||
let pointPresent = false;
|
return [];
|
||||||
points.forEach((p) => {
|
}
|
||||||
pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
|
|
||||||
});
|
// Copy the original points array
|
||||||
// if (!pointPresent) {
|
const points = [..._points];
|
||||||
if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
|
|
||||||
points.push(inter);
|
// The first point is the center of sNode, the last point is the center of eNode
|
||||||
} else {
|
const startCenter = points[0];
|
||||||
log.debug('abc88 no intersect', inter, points);
|
const endCenter = points[points.length - 1];
|
||||||
}
|
|
||||||
// points.push(inter);
|
log.debug('UIO cutter2: startCenter:', startCenter);
|
||||||
isInside = true;
|
log.debug('UIO cutter2: endCenter:', endCenter);
|
||||||
} else {
|
|
||||||
// Outside
|
let firstOutsideStartIndex = -1;
|
||||||
log.debug('abc88 outside', point, lastPointOutside, points);
|
let lastOutsideEndIndex = -1;
|
||||||
lastPointOutside = point;
|
|
||||||
// points.push(point);
|
// Single iteration through the array
|
||||||
if (!isInside) {
|
for (let i = 0; i < points.length; i++) {
|
||||||
points.push(point);
|
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;
|
return points;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -766,7 +859,6 @@ export const render = async (
|
|||||||
id: 'root',
|
id: 'root',
|
||||||
layoutOptions: {
|
layoutOptions: {
|
||||||
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
|
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
|
||||||
'elk.layered.crossingMinimization.forceNodeModelOrder': true,
|
|
||||||
'elk.algorithm': algorithm,
|
'elk.algorithm': algorithm,
|
||||||
'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
|
'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
|
||||||
'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
|
'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
|
||||||
@@ -781,6 +873,7 @@ export const render = async (
|
|||||||
// 'spacing.edgeEdge': 10,
|
// 'spacing.edgeEdge': 10,
|
||||||
// 'spacing.edgeEdgeBetweenLayers': 20,
|
// 'spacing.edgeEdgeBetweenLayers': 20,
|
||||||
// 'spacing.nodeSelfLoop': 20,
|
// 'spacing.nodeSelfLoop': 20,
|
||||||
|
|
||||||
// Tweaking options
|
// Tweaking options
|
||||||
// 'elk.layered.nodePlacement.favorStraightEdges': true,
|
// 'elk.layered.nodePlacement.favorStraightEdges': true,
|
||||||
// 'nodePlacement.feedbackEdges': true,
|
// 'nodePlacement.feedbackEdges': true,
|
||||||
@@ -966,43 +1059,26 @@ export const render = async (
|
|||||||
startNode.innerHTML
|
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({
|
edge.points.unshift({
|
||||||
x: startNode.offset.posX + startNode.width / 2,
|
x: startNode.x,
|
||||||
y: startNode.offset.posY + startNode.height / 2,
|
y: startNode.y,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (endNode.shape === 'diamond' || endNode.shape === 'diam') {
|
if (endNode.shape !== 'rect33') {
|
||||||
edge.points.push({
|
edge.points.push({
|
||||||
x: endNode.offset.posX + endNode.width / 2,
|
x: endNode.x,
|
||||||
y: endNode.offset.posY + endNode.height / 2,
|
y: endNode.y,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
edge.points = cutPathAtIntersect(
|
log.debug('UIO cutter2: Points before cutter2:', edge.points);
|
||||||
edge.points.reverse(),
|
edge.points = cutter2(startNode, endNode, edge.points);
|
||||||
{
|
log.debug('UIO cutter2: Points after cutter2:', edge.points);
|
||||||
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'
|
|
||||||
);
|
|
||||||
|
|
||||||
const paths = insertEdge(
|
const paths = insertEdge(
|
||||||
edgesEl,
|
edgesEl,
|
||||||
edge,
|
edge,
|
||||||
@@ -1010,7 +1086,8 @@ export const render = async (
|
|||||||
data4Layout.type,
|
data4Layout.type,
|
||||||
startNode,
|
startNode,
|
||||||
endNode,
|
endNode,
|
||||||
data4Layout.diagramId
|
data4Layout.diagramId,
|
||||||
|
true
|
||||||
);
|
);
|
||||||
log.info('APA12 edge points after insert', JSON.stringify(edge.points));
|
log.info('APA12 edge points after insert', JSON.stringify(edge.points));
|
||||||
|
|
||||||
|
|||||||
@@ -105,7 +105,7 @@
|
|||||||
"@types/stylis": "^4.2.7",
|
"@types/stylis": "^4.2.7",
|
||||||
"@types/uuid": "^10.0.0",
|
"@types/uuid": "^10.0.0",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"chokidar": "^4.0.3",
|
"chokidar": "3.6.0",
|
||||||
"concurrently": "^9.1.2",
|
"concurrently": "^9.1.2",
|
||||||
"csstree-validator": "^4.0.1",
|
"csstree-validator": "^4.0.1",
|
||||||
"globby": "^14.0.2",
|
"globby": "^14.0.2",
|
||||||
|
|||||||
@@ -1,9 +1,13 @@
|
|||||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
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 { log } from '../../logger.js';
|
||||||
import { createText } from '../createText.js';
|
import { createText } from '../createText.js';
|
||||||
import utils from '../../utils.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 { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -27,8 +31,8 @@ import createLabel from './createLabel.js';
|
|||||||
import { addEdgeMarkers } from './edgeMarker.ts';
|
import { addEdgeMarkers } from './edgeMarker.ts';
|
||||||
import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
|
import { isLabelStyle } from './shapes/handDrawnShapeStyles.js';
|
||||||
|
|
||||||
const edgeLabels = new Map();
|
export const edgeLabels = new Map();
|
||||||
const terminalLabels = new Map();
|
export const terminalLabels = new Map();
|
||||||
|
|
||||||
export const clear = () => {
|
export const clear = () => {
|
||||||
edgeLabels.clear();
|
edgeLabels.clear();
|
||||||
@@ -55,7 +59,7 @@ export const insertEdgeLabel = async (elem, edge) => {
|
|||||||
const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
|
const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
|
||||||
|
|
||||||
// Create inner g, label, this will be positioned now for centering the text
|
// 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);
|
label.node().appendChild(labelElement);
|
||||||
|
|
||||||
// Center the label
|
// Center the label
|
||||||
@@ -352,94 +356,33 @@ const cutPathAtIntersect = (_points, boundaryNode) => {
|
|||||||
return points;
|
return points;
|
||||||
};
|
};
|
||||||
|
|
||||||
function extractCornerPoints(points) {
|
const generateDashArray = (len, oValueS, oValueE) => {
|
||||||
const cornerPoints = [];
|
const middleLength = len - oValueS - oValueE;
|
||||||
const cornerPointPositions = [];
|
const dashLength = 2; // Length of each dash
|
||||||
for (let i = 1; i < points.length - 1; i++) {
|
const gapLength = 2; // Length of each gap
|
||||||
const prev = points[i - 1];
|
const dashGapPairLength = dashLength + gapLength;
|
||||||
const curr = points[i];
|
|
||||||
const next = points[i + 1];
|
|
||||||
if (
|
|
||||||
prev.x === curr.x &&
|
|
||||||
curr.y === next.y &&
|
|
||||||
Math.abs(curr.x - next.x) > 5 &&
|
|
||||||
Math.abs(curr.y - prev.y) > 5
|
|
||||||
) {
|
|
||||||
cornerPoints.push(curr);
|
|
||||||
cornerPointPositions.push(i);
|
|
||||||
} else if (
|
|
||||||
prev.y === curr.y &&
|
|
||||||
curr.x === next.x &&
|
|
||||||
Math.abs(curr.x - prev.x) > 5 &&
|
|
||||||
Math.abs(curr.y - next.y) > 5
|
|
||||||
) {
|
|
||||||
cornerPoints.push(curr);
|
|
||||||
cornerPointPositions.push(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { cornerPoints, cornerPointPositions };
|
|
||||||
}
|
|
||||||
|
|
||||||
const findAdjacentPoint = function (pointA, pointB, distance) {
|
// Calculate number of complete dash-gap pairs that can fit
|
||||||
const xDiff = pointB.x - pointA.x;
|
const numberOfPairs = Math.floor(middleLength / dashGapPairLength);
|
||||||
const yDiff = pointB.y - pointA.y;
|
|
||||||
const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
|
// Generate the middle pattern array
|
||||||
const ratio = distance / length;
|
const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');
|
||||||
return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };
|
|
||||||
|
// Combine all parts
|
||||||
|
const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;
|
||||||
|
|
||||||
|
return dashArray;
|
||||||
};
|
};
|
||||||
|
export const insertEdge = function (
|
||||||
const fixCorners = function (lineData) {
|
elem,
|
||||||
const { cornerPointPositions } = extractCornerPoints(lineData);
|
edge,
|
||||||
const newLineData = [];
|
clusterDb,
|
||||||
for (let i = 0; i < lineData.length; i++) {
|
diagramType,
|
||||||
if (cornerPointPositions.includes(i)) {
|
startNode,
|
||||||
const prevPoint = lineData[i - 1];
|
endNode,
|
||||||
const nextPoint = lineData[i + 1];
|
id,
|
||||||
const cornerPoint = lineData[i];
|
skipIntersect = false
|
||||||
|
) {
|
||||||
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) {
|
|
||||||
const { handDrawnSeed } = getConfig();
|
const { handDrawnSeed } = getConfig();
|
||||||
let points = edge.points;
|
let points = edge.points;
|
||||||
let pointsHasChanged = false;
|
let pointsHasChanged = false;
|
||||||
@@ -453,11 +396,12 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
edgeClassStyles.push(edge.cssCompiledStyles[key]);
|
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 = points.slice(1, edge.points.length - 1);
|
||||||
points.unshift(tail.intersect(points[0]));
|
points.unshift(tail.intersect(points[0]));
|
||||||
log.debug(
|
log.debug(
|
||||||
'Last point APA12',
|
'Last point UIO',
|
||||||
edge.start,
|
edge.start,
|
||||||
'-->',
|
'-->',
|
||||||
edge.end,
|
edge.end,
|
||||||
@@ -467,6 +411,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
);
|
);
|
||||||
points.push(head.intersect(points[points.length - 1]));
|
points.push(head.intersect(points[points.length - 1]));
|
||||||
}
|
}
|
||||||
|
const pointsStr = btoa(JSON.stringify(points));
|
||||||
if (edge.toCluster) {
|
if (edge.toCluster) {
|
||||||
log.info('to cluster abc88', clusterDb.get(edge.toCluster));
|
log.info('to cluster abc88', clusterDb.get(edge.toCluster));
|
||||||
points = cutPathAtIntersect(edge.points, clusterDb.get(edge.toCluster).node);
|
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));
|
let lineData = points.filter((p) => !Number.isNaN(p.y));
|
||||||
lineData = fixCorners(lineData);
|
//lineData = fixCorners(lineData);
|
||||||
let curve = curveBasis;
|
let curve = curveBasis;
|
||||||
curve = curveLinear;
|
curve = curveLinear;
|
||||||
switch (edge.curve) {
|
switch (edge.curve) {
|
||||||
@@ -530,6 +475,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
curve = curveBasis;
|
curve = curveBasis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (edge.curve) {
|
||||||
|
// curve = edge.curve;
|
||||||
|
// }
|
||||||
|
|
||||||
const { x, y } = getLineFunctionsWithOffset(edge);
|
const { x, y } = getLineFunctionsWithOffset(edge);
|
||||||
const lineFunction = line().x(x).y(y).curve(curve);
|
const lineFunction = line().x(x).y(y).curve(curve);
|
||||||
|
|
||||||
@@ -561,10 +510,14 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
strokeClasses += ' edge-pattern-solid';
|
strokeClasses += ' edge-pattern-solid';
|
||||||
}
|
}
|
||||||
let svgPath;
|
let svgPath;
|
||||||
let linePath = lineFunction(lineData);
|
let linePath =
|
||||||
const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
|
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 strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
|
||||||
|
|
||||||
|
let animatedEdge = false;
|
||||||
if (edge.look === 'handDrawn') {
|
if (edge.look === 'handDrawn') {
|
||||||
const rc = rough.svg(elem);
|
const rc = rough.svg(elem);
|
||||||
Object.assign([], lineData);
|
Object.assign([], lineData);
|
||||||
@@ -595,7 +548,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
animationClass = ' edge-animation-' + edge.animation;
|
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
|
svgPath = elem
|
||||||
.append('path')
|
.append('path')
|
||||||
.attr('d', linePath)
|
.attr('d', linePath)
|
||||||
@@ -605,11 +561,38 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
|
' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '') + (animationClass ?? '')
|
||||||
)
|
)
|
||||||
.attr('style', pathStyle);
|
.attr('style', pathStyle);
|
||||||
|
|
||||||
|
//eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
|
||||||
strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];
|
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
|
// MC Special
|
||||||
// adds a red circle at each edge coordinate
|
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) => {
|
// cornerPoints.forEach((point) => {
|
||||||
// elem
|
// elem
|
||||||
// .append('circle')
|
// .append('circle')
|
||||||
@@ -619,24 +602,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
// .attr('cx', point.x)
|
// .attr('cx', point.x)
|
||||||
// .attr('cy', point.y);
|
// .attr('cy', point.y);
|
||||||
// });
|
// });
|
||||||
// lineData.forEach((point) => {
|
if (edge.showPoints) {
|
||||||
// elem
|
lineData.forEach((point) => {
|
||||||
// .append('circle')
|
elem
|
||||||
// .style('stroke', 'blue')
|
.append('circle')
|
||||||
// .style('fill', 'blue')
|
.style('stroke', 'red')
|
||||||
// .attr('r', 3)
|
.style('fill', 'red')
|
||||||
// .attr('cx', point.x)
|
.attr('r', 1)
|
||||||
// .attr('cy', point.y);
|
.attr('cx', point.x)
|
||||||
// });
|
.attr('cy', point.y);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
let url = '';
|
let url = '';
|
||||||
if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
|
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('arrowTypeStart', edge.arrowTypeStart);
|
||||||
log.info('arrowTypeEnd', edge.arrowTypeEnd);
|
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 = {};
|
let paths = {};
|
||||||
if (pointsHasChanged) {
|
if (pointsHasChanged) {
|
||||||
@@ -645,3 +637,134 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
|||||||
paths.originalPath = edge.points;
|
paths.originalPath = edge.points;
|
||||||
return paths;
|
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.
|
* Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.
|
||||||
*/
|
*/
|
||||||
function intersectLine(p1, p2, q1, q2) {
|
function intersectLine(p1, p2, q1, q2) {
|
||||||
// Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,
|
{
|
||||||
// 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;
|
// Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +
|
||||||
var r1, r2, r3, r4;
|
// b1 y + c1 = 0.
|
||||||
var denom, offset, num;
|
const a1 = p2.y - p1.y;
|
||||||
var x, 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 +
|
// Compute r3 and r4.
|
||||||
// b1 y + c1 = 0.
|
const r3 = a1 * q1.x + b1 * q1.y + c1;
|
||||||
a1 = p2.y - p1.y;
|
const r4 = a1 * q2.x + b1 * q2.y + c1;
|
||||||
b1 = p1.x - p2.x;
|
|
||||||
c1 = p2.x * p1.y - p1.x * p2.y;
|
|
||||||
|
|
||||||
// Compute r3 and r4.
|
const epsilon = 1e-6;
|
||||||
r3 = a1 * q1.x + b1 * q1.y + c1;
|
|
||||||
r4 = a1 * q2.x + b1 * q2.y + c1;
|
|
||||||
|
|
||||||
// Check signs of r3 and r4. If both point 3 and point 4 lie on
|
// Check signs of r3 and r4. If both point 3 and point 4 lie on
|
||||||
// same side of line 1, the line segments do not intersect.
|
// same side of line 1, the line segments do not intersect.
|
||||||
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
|
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
|
||||||
return /*DON'T_INTERSECT*/;
|
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) {
|
function sameSign(r1, r2) {
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
|||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import type { D3Selection } from '../../../types.js';
|
import type { D3Selection } from '../../../types.js';
|
||||||
import { handleUndefinedAttr } from '../../../utils.js';
|
import { handleUndefinedAttr } from '../../../utils.js';
|
||||||
|
import type { Bounds, Point } from '../../../types.js';
|
||||||
|
|
||||||
export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
|
export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
|
||||||
const { labelStyles, nodeStyles } = styles2String(node);
|
const { labelStyles, nodeStyles } = styles2String(node);
|
||||||
@@ -35,7 +36,10 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateNodeBounds(node, circleElem);
|
updateNodeBounds(node, circleElem);
|
||||||
|
node.calcIntersect = function (bounds: Bounds, point: Point) {
|
||||||
|
const radius = bounds.width / 2;
|
||||||
|
return intersect.circle(bounds, radius, point);
|
||||||
|
};
|
||||||
node.intersect = function (point) {
|
node.intersect = function (point) {
|
||||||
log.info('Circle intersect', node, radius, point);
|
log.info('Circle intersect', node, radius, point);
|
||||||
return intersect.circle(node, radius, point);
|
return intersect.circle(node, radius, point);
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
|
|||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import type { D3Selection } from '../../../types.js';
|
import type { D3Selection } from '../../../types.js';
|
||||||
import { handleUndefinedAttr } from '../../../utils.js';
|
import { handleUndefinedAttr } from '../../../utils.js';
|
||||||
|
import type { Bounds, Point } from '../../../types.js';
|
||||||
|
|
||||||
export async function drawRect<T extends SVGGraphicsElement>(
|
export async function drawRect<T extends SVGGraphicsElement>(
|
||||||
parent: D3Selection<T>,
|
parent: D3Selection<T>,
|
||||||
@@ -62,6 +63,10 @@ export async function drawRect<T extends SVGGraphicsElement>(
|
|||||||
|
|
||||||
updateNodeBounds(node, rect);
|
updateNodeBounds(node, rect);
|
||||||
|
|
||||||
|
node.calcIntersect = function (bounds: Bounds, point: Point) {
|
||||||
|
return intersect.rect(bounds, point);
|
||||||
|
};
|
||||||
|
|
||||||
node.intersect = function (point) {
|
node.intersect = function (point) {
|
||||||
return intersect.rect(node, point);
|
return intersect.rect(node, point);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { log } from '../../../logger.js';
|
|
||||||
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
|
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
|
||||||
import intersect from '../intersect/index.js';
|
import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '../../types.js';
|
import type { Node } from '../../types.js';
|
||||||
@@ -6,6 +5,7 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
|||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||||
import type { D3Selection } from '../../../types.js';
|
import type { D3Selection } from '../../../types.js';
|
||||||
|
import type { Bounds, Point } from '../../../types.js';
|
||||||
|
|
||||||
export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
|
export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
|
||||||
return [
|
return [
|
||||||
@@ -59,17 +59,42 @@ export async function question<T extends SVGGraphicsElement>(parent: D3Selection
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateNodeBounds(node, polygon);
|
updateNodeBounds(node, polygon);
|
||||||
|
node.calcIntersect = function (bounds: Bounds, point: Point) {
|
||||||
|
const s = bounds.width;
|
||||||
|
|
||||||
|
// console.log(
|
||||||
|
// 'APA10\nbounds width:',
|
||||||
|
// bounds.width,
|
||||||
|
// '\nbounds height:',
|
||||||
|
// bounds.height,
|
||||||
|
// 'point:',
|
||||||
|
// point.x,
|
||||||
|
// point.y,
|
||||||
|
// '\nw:',
|
||||||
|
// w,
|
||||||
|
// '\nh',
|
||||||
|
// h,
|
||||||
|
// '\ns',
|
||||||
|
// s
|
||||||
|
// );
|
||||||
|
|
||||||
|
// Define polygon points
|
||||||
|
const points = [
|
||||||
|
{ x: s / 2, y: 0 },
|
||||||
|
{ x: s, y: -s / 2 },
|
||||||
|
{ x: s / 2, y: -s },
|
||||||
|
{ x: 0, y: -s / 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Calculate the intersection point
|
||||||
|
const res = intersect.polygon(bounds, points, point);
|
||||||
|
|
||||||
|
return { x: res.x - 0.5, y: res.y - 0.5 }; // Adjusted result
|
||||||
|
};
|
||||||
|
|
||||||
node.intersect = function (point) {
|
node.intersect = function (point) {
|
||||||
log.debug(
|
// @ts-ignore TODO fix this (KNSV)
|
||||||
'APA12 Intersect called SPLIT\npoint:',
|
return this.calcIntersect(node as Bounds, point);
|
||||||
point,
|
|
||||||
'\nnode:\n',
|
|
||||||
node,
|
|
||||||
'\nres:',
|
|
||||||
intersect.polygon(node, points, point)
|
|
||||||
);
|
|
||||||
return intersect.polygon(node, points, point);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em';
|
|||||||
import type { MermaidConfig } from '../config.type.js';
|
import type { MermaidConfig } from '../config.type.js';
|
||||||
import type { ClusterShapeID } from './rendering-elements/clusters.js';
|
import type { ClusterShapeID } from './rendering-elements/clusters.js';
|
||||||
import type { ShapeID } from './rendering-elements/shapes.js';
|
import type { ShapeID } from './rendering-elements/shapes.js';
|
||||||
|
import type { Bounds, Point } from '../types.js';
|
||||||
export interface MarkdownWord {
|
export interface MarkdownWord {
|
||||||
content: string;
|
content: string;
|
||||||
type: MarkdownWordType;
|
type: MarkdownWordType;
|
||||||
@@ -43,6 +44,7 @@ interface BaseNode {
|
|||||||
height?: number;
|
height?: number;
|
||||||
// Specific properties for State Diagram nodes TODO remove and use generic properties
|
// Specific properties for State Diagram nodes TODO remove and use generic properties
|
||||||
intersect?: (point: any) => any;
|
intersect?: (point: any) => any;
|
||||||
|
calcIntersect?: (bounds: Bounds, point: Point) => any;
|
||||||
|
|
||||||
// Non-generic properties
|
// Non-generic properties
|
||||||
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
|
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
|
||||||
|
|||||||
@@ -23,6 +23,12 @@ export interface Point {
|
|||||||
x: number;
|
x: number;
|
||||||
y: number;
|
y: number;
|
||||||
}
|
}
|
||||||
|
export interface Bounds {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
export interface TextDimensionConfig {
|
export interface TextDimensionConfig {
|
||||||
fontSize?: number;
|
fontSize?: number;
|
||||||
|
|||||||
@@ -3,13 +3,23 @@ import type { EdgeData, Point } from '../types.js';
|
|||||||
// We need to draw the lines a bit shorter to avoid drawing
|
// We need to draw the lines a bit shorter to avoid drawing
|
||||||
// under any transparent markers.
|
// under any transparent markers.
|
||||||
// The offsets are calculated from the markers' dimensions.
|
// The offsets are calculated from the markers' dimensions.
|
||||||
const markerOffsets = {
|
export const markerOffsets = {
|
||||||
aggregation: 18,
|
aggregation: 17.25,
|
||||||
extension: 18,
|
extension: 17.25,
|
||||||
composition: 18,
|
composition: 17.25,
|
||||||
dependency: 6,
|
dependency: 6,
|
||||||
lollipop: 13.5,
|
lollipop: 13.5,
|
||||||
arrow_point: 4,
|
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;
|
} as const;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
243
pnpm-lock.yaml
generated
243
pnpm-lock.yaml
generated
@@ -74,8 +74,8 @@ importers:
|
|||||||
specifier: ^8.17.1
|
specifier: ^8.17.1
|
||||||
version: 8.17.1
|
version: 8.17.1
|
||||||
chokidar:
|
chokidar:
|
||||||
specifier: ^4.0.3
|
specifier: 3.6.0
|
||||||
version: 4.0.3
|
version: 3.6.0
|
||||||
concurrently:
|
concurrently:
|
||||||
specifier: ^9.1.2
|
specifier: ^9.1.2
|
||||||
version: 9.1.2
|
version: 9.1.2
|
||||||
@@ -327,8 +327,8 @@ importers:
|
|||||||
specifier: ^8.17.1
|
specifier: ^8.17.1
|
||||||
version: 8.17.1
|
version: 8.17.1
|
||||||
chokidar:
|
chokidar:
|
||||||
specifier: ^4.0.3
|
specifier: 3.6.0
|
||||||
version: 4.0.3
|
version: 3.6.0
|
||||||
concurrently:
|
concurrently:
|
||||||
specifier: ^9.1.2
|
specifier: ^9.1.2
|
||||||
version: 9.1.2
|
version: 9.1.2
|
||||||
@@ -508,6 +508,67 @@ importers:
|
|||||||
specifier: ^7.3.0
|
specifier: ^7.3.0
|
||||||
version: 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:
|
packages/parser:
|
||||||
dependencies:
|
dependencies:
|
||||||
langium:
|
langium:
|
||||||
@@ -912,10 +973,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
|
resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
|
||||||
engines: {node: '>=6.9.0'}
|
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':
|
'@babel/helper-string-parser@7.27.1':
|
||||||
resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
|
resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
@@ -3627,6 +3684,15 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
|
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':
|
'@vite-pwa/vitepress@1.0.0':
|
||||||
resolution: {integrity: sha512-i5RFah4urA6tZycYlGyBslVx8cVzbZBcARJLDg5rWMfAkRmyLtpRU6usGfVOwyN9kjJ2Bkm+gBHXF1hhr7HptQ==}
|
resolution: {integrity: sha512-i5RFah4urA6tZycYlGyBslVx8cVzbZBcARJLDg5rWMfAkRmyLtpRU6usGfVOwyN9kjJ2Bkm+gBHXF1hhr7HptQ==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@@ -4485,10 +4551,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
|
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
|
||||||
engines: {node: '>= 8.10.0'}
|
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:
|
chrome-trace-event@1.0.4:
|
||||||
resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
|
resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
|
||||||
engines: {node: '>=6.0'}
|
engines: {node: '>=6.0'}
|
||||||
@@ -8357,10 +8419,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||||
engines: {node: '>=8.10.0'}
|
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:
|
real-require@0.2.0:
|
||||||
resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
|
resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
|
||||||
engines: {node: '>= 12.13.0'}
|
engines: {node: '>= 12.13.0'}
|
||||||
@@ -9594,6 +9652,18 @@ packages:
|
|||||||
peerDependencies:
|
peerDependencies:
|
||||||
vite: '>=4 <=6'
|
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:
|
vite-plugin-pwa@1.0.0:
|
||||||
resolution: {integrity: sha512-X77jo0AOd5OcxmWj3WnVti8n7Kw2tBgV1c8MCXFclrSlDV23ePzv2eTDIALXI2Qo6nJ5pZJeZAuX0AawvRfoeA==}
|
resolution: {integrity: sha512-X77jo0AOd5OcxmWj3WnVti8n7Kw2tBgV1c8MCXFclrSlDV23ePzv2eTDIALXI2Qo6nJ5pZJeZAuX0AawvRfoeA==}
|
||||||
engines: {node: '>=16.0.0'}
|
engines: {node: '>=16.0.0'}
|
||||||
@@ -10648,7 +10718,7 @@ snapshots:
|
|||||||
|
|
||||||
'@babel/code-frame@7.26.2':
|
'@babel/code-frame@7.26.2':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/helper-validator-identifier': 7.25.9
|
'@babel/helper-validator-identifier': 7.27.1
|
||||||
js-tokens: 4.0.0
|
js-tokens: 4.0.0
|
||||||
picocolors: 1.1.1
|
picocolors: 1.1.1
|
||||||
|
|
||||||
@@ -10670,10 +10740,10 @@ snapshots:
|
|||||||
'@babel/helper-compilation-targets': 7.26.5
|
'@babel/helper-compilation-targets': 7.26.5
|
||||||
'@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
|
'@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
|
||||||
'@babel/helpers': 7.26.9
|
'@babel/helpers': 7.26.9
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/template': 7.26.9
|
'@babel/template': 7.26.9
|
||||||
'@babel/traverse': 7.26.9
|
'@babel/traverse': 7.26.9
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
convert-source-map: 2.0.0
|
convert-source-map: 2.0.0
|
||||||
debug: 4.4.0(supports-color@8.1.1)
|
debug: 4.4.0(supports-color@8.1.1)
|
||||||
gensync: 1.0.0-beta.2
|
gensync: 1.0.0-beta.2
|
||||||
@@ -10704,8 +10774,8 @@ snapshots:
|
|||||||
|
|
||||||
'@babel/generator@7.26.9':
|
'@babel/generator@7.26.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
'@jridgewell/gen-mapping': 0.3.8
|
'@jridgewell/gen-mapping': 0.3.8
|
||||||
'@jridgewell/trace-mapping': 0.3.25
|
'@jridgewell/trace-mapping': 0.3.25
|
||||||
jsesc: 3.1.0
|
jsesc: 3.1.0
|
||||||
@@ -10810,7 +10880,7 @@ snapshots:
|
|||||||
'@babel/helper-module-imports@7.25.9':
|
'@babel/helper-module-imports@7.25.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/traverse': 7.26.9
|
'@babel/traverse': 7.26.9
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
@@ -10825,7 +10895,7 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@babel/core': 7.26.9
|
'@babel/core': 7.26.9
|
||||||
'@babel/helper-module-imports': 7.25.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
|
'@babel/traverse': 7.26.9
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
@@ -10901,8 +10971,6 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- supports-color
|
||||||
|
|
||||||
'@babel/helper-string-parser@7.25.9': {}
|
|
||||||
|
|
||||||
'@babel/helper-string-parser@7.27.1': {}
|
'@babel/helper-string-parser@7.27.1': {}
|
||||||
|
|
||||||
'@babel/helper-validator-identifier@7.25.9': {}
|
'@babel/helper-validator-identifier@7.25.9': {}
|
||||||
@@ -10924,7 +10992,7 @@ snapshots:
|
|||||||
'@babel/helpers@7.26.9':
|
'@babel/helpers@7.26.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/template': 7.26.9
|
'@babel/template': 7.26.9
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@babel/helpers@7.27.1':
|
'@babel/helpers@7.27.1':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -10933,7 +11001,7 @@ snapshots:
|
|||||||
|
|
||||||
'@babel/parser@7.26.9':
|
'@babel/parser@7.26.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@babel/parser@7.27.2':
|
'@babel/parser@7.27.2':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -11945,8 +12013,8 @@ snapshots:
|
|||||||
'@babel/template@7.26.9':
|
'@babel/template@7.26.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.26.2
|
'@babel/code-frame': 7.26.2
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@babel/template@7.27.2':
|
'@babel/template@7.27.2':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -11958,9 +12026,9 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
'@babel/code-frame': 7.26.2
|
'@babel/code-frame': 7.26.2
|
||||||
'@babel/generator': 7.26.9
|
'@babel/generator': 7.26.9
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/template': 7.26.9
|
'@babel/template': 7.26.9
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
debug: 4.4.0(supports-color@8.1.1)
|
debug: 4.4.0(supports-color@8.1.1)
|
||||||
globals: 11.12.0
|
globals: 11.12.0
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
@@ -11980,8 +12048,8 @@ snapshots:
|
|||||||
|
|
||||||
'@babel/types@7.26.9':
|
'@babel/types@7.26.9':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/helper-string-parser': 7.25.9
|
'@babel/helper-string-parser': 7.27.1
|
||||||
'@babel/helper-validator-identifier': 7.25.9
|
'@babel/helper-validator-identifier': 7.27.1
|
||||||
|
|
||||||
'@babel/types@7.27.1':
|
'@babel/types@7.27.1':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -13634,24 +13702,24 @@ snapshots:
|
|||||||
|
|
||||||
'@types/babel__core@7.20.5':
|
'@types/babel__core@7.20.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
'@types/babel__generator': 7.6.8
|
'@types/babel__generator': 7.6.8
|
||||||
'@types/babel__template': 7.4.4
|
'@types/babel__template': 7.4.4
|
||||||
'@types/babel__traverse': 7.20.6
|
'@types/babel__traverse': 7.20.6
|
||||||
|
|
||||||
'@types/babel__generator@7.6.8':
|
'@types/babel__generator@7.6.8':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@types/babel__template@7.4.4':
|
'@types/babel__template@7.4.4':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@types/babel__traverse@7.20.6':
|
'@types/babel__traverse@7.20.6':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
|
|
||||||
'@types/body-parser@1.19.5':
|
'@types/body-parser@1.19.5':
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -14191,6 +14259,16 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- vue
|
- 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':
|
'@unocss/cli@66.0.0':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@ampproject/remapping': 2.3.0
|
'@ampproject/remapping': 2.3.0
|
||||||
@@ -14326,6 +14404,24 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- vue
|
- 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))':
|
'@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:
|
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)
|
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)
|
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)
|
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)':
|
'@vitest/coverage-v8@3.0.6(vitest@3.0.6)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@ampproject/remapping': 2.3.0
|
'@ampproject/remapping': 2.3.0
|
||||||
@@ -14418,7 +14519,7 @@ snapshots:
|
|||||||
|
|
||||||
'@vue/compiler-core@3.5.13':
|
'@vue/compiler-core@3.5.13':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@vue/shared': 3.5.13
|
'@vue/shared': 3.5.13
|
||||||
entities: 4.5.0
|
entities: 4.5.0
|
||||||
estree-walker: 2.0.2
|
estree-walker: 2.0.2
|
||||||
@@ -14431,7 +14532,7 @@ snapshots:
|
|||||||
|
|
||||||
'@vue/compiler-sfc@3.5.13':
|
'@vue/compiler-sfc@3.5.13':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@vue/compiler-core': 3.5.13
|
'@vue/compiler-core': 3.5.13
|
||||||
'@vue/compiler-dom': 3.5.13
|
'@vue/compiler-dom': 3.5.13
|
||||||
'@vue/compiler-ssr': 3.5.13
|
'@vue/compiler-ssr': 3.5.13
|
||||||
@@ -14989,7 +15090,7 @@ snapshots:
|
|||||||
babel-plugin-jest-hoist@29.6.3:
|
babel-plugin-jest-hoist@29.6.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/template': 7.26.9
|
'@babel/template': 7.26.9
|
||||||
'@babel/types': 7.26.9
|
'@babel/types': 7.27.1
|
||||||
'@types/babel__core': 7.20.5
|
'@types/babel__core': 7.20.5
|
||||||
'@types/babel__traverse': 7.20.6
|
'@types/babel__traverse': 7.20.6
|
||||||
|
|
||||||
@@ -15350,10 +15451,6 @@ snapshots:
|
|||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
fsevents: 2.3.3
|
fsevents: 2.3.3
|
||||||
|
|
||||||
chokidar@4.0.3:
|
|
||||||
dependencies:
|
|
||||||
readdirp: 4.1.2
|
|
||||||
|
|
||||||
chrome-trace-event@1.0.4: {}
|
chrome-trace-event@1.0.4: {}
|
||||||
|
|
||||||
ci-info@3.9.0: {}
|
ci-info@3.9.0: {}
|
||||||
@@ -17214,7 +17311,7 @@ snapshots:
|
|||||||
|
|
||||||
find-test-names@1.29.5(@babel/core@7.26.9):
|
find-test-names@1.29.5(@babel/core@7.26.9):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
|
'@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
|
||||||
acorn-walk: 8.3.4
|
acorn-walk: 8.3.4
|
||||||
debug: 4.4.0(supports-color@8.1.1)
|
debug: 4.4.0(supports-color@8.1.1)
|
||||||
@@ -18053,7 +18150,7 @@ snapshots:
|
|||||||
istanbul-lib-instrument@5.2.1:
|
istanbul-lib-instrument@5.2.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/core': 7.26.9
|
'@babel/core': 7.26.9
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@istanbuljs/schema': 0.1.3
|
'@istanbuljs/schema': 0.1.3
|
||||||
istanbul-lib-coverage: 3.2.2
|
istanbul-lib-coverage: 3.2.2
|
||||||
semver: 6.3.1
|
semver: 6.3.1
|
||||||
@@ -18063,7 +18160,7 @@ snapshots:
|
|||||||
istanbul-lib-instrument@6.0.3:
|
istanbul-lib-instrument@6.0.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/core': 7.26.9
|
'@babel/core': 7.26.9
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
'@istanbuljs/schema': 0.1.3
|
'@istanbuljs/schema': 0.1.3
|
||||||
istanbul-lib-coverage: 3.2.2
|
istanbul-lib-coverage: 3.2.2
|
||||||
semver: 7.7.1
|
semver: 7.7.1
|
||||||
@@ -18382,7 +18479,7 @@ snapshots:
|
|||||||
'@babel/generator': 7.26.9
|
'@babel/generator': 7.26.9
|
||||||
'@babel/plugin-syntax-jsx': 7.25.7(@babel/core@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/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/expect-utils': 29.7.0
|
||||||
'@jest/transform': 29.7.0
|
'@jest/transform': 29.7.0
|
||||||
'@jest/types': 29.6.3
|
'@jest/types': 29.6.3
|
||||||
@@ -19392,7 +19489,7 @@ snapshots:
|
|||||||
|
|
||||||
node-source-walk@7.0.0:
|
node-source-walk@7.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@babel/parser': 7.26.9
|
'@babel/parser': 7.27.2
|
||||||
|
|
||||||
nomnom@1.5.2:
|
nomnom@1.5.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
@@ -20075,8 +20172,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
picomatch: 2.3.1
|
picomatch: 2.3.1
|
||||||
|
|
||||||
readdirp@4.1.2: {}
|
|
||||||
|
|
||||||
real-require@0.2.0: {}
|
real-require@0.2.0: {}
|
||||||
|
|
||||||
rechoir@0.6.2:
|
rechoir@0.6.2:
|
||||||
@@ -21085,7 +21180,7 @@ snapshots:
|
|||||||
terser@5.34.1:
|
terser@5.34.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/source-map': 0.3.6
|
'@jridgewell/source-map': 0.3.6
|
||||||
acorn: 8.14.0
|
acorn: 8.14.1
|
||||||
commander: 2.20.3
|
commander: 2.20.3
|
||||||
source-map-support: 0.5.21
|
source-map-support: 0.5.21
|
||||||
|
|
||||||
@@ -21455,6 +21550,33 @@ snapshots:
|
|||||||
- supports-color
|
- supports-color
|
||||||
- vue
|
- 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: {}
|
unpipe@1.0.0: {}
|
||||||
|
|
||||||
unplugin-utils@0.2.4:
|
unplugin-utils@0.2.4:
|
||||||
@@ -21480,7 +21602,7 @@ snapshots:
|
|||||||
|
|
||||||
unplugin@2.2.0:
|
unplugin@2.2.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
acorn: 8.14.0
|
acorn: 8.14.1
|
||||||
webpack-virtual-modules: 0.6.2
|
webpack-virtual-modules: 0.6.2
|
||||||
|
|
||||||
untildify@4.0.0: {}
|
untildify@4.0.0: {}
|
||||||
@@ -21570,6 +21692,17 @@ snapshots:
|
|||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- supports-color
|
- 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):
|
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:
|
dependencies:
|
||||||
debug: 4.4.0(supports-color@8.1.1)
|
debug: 4.4.0(supports-color@8.1.1)
|
||||||
|
|||||||
Reference in New Issue
Block a user