@weasel-js/diagram 1.9.4 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -4
- package/dist/{chunk-EDSBULQM.js → chunk-JZ4CVLAB.js} +13 -5
- package/dist/chunk-JZ4CVLAB.js.map +1 -0
- package/dist/index.d.ts +152 -153
- package/dist/index.js +183 -50
- package/dist/index.js.map +1 -1
- package/dist/layout.d.ts +2 -1
- package/dist/{layout.entry-DyKFfHG5.d.ts → layout.entry-BUkiRKuX.d.ts} +54 -95
- package/dist/layout.js +1 -1
- package/package.json +6 -4
- package/dist/chunk-EDSBULQM.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree, untilSettled } from './chunk-
|
|
1
|
+
import { layered, insetOf, portsOf, portOf, outlinePath, diagramNodeOf, expandGroupEdges, forceRelaxation, center, force, tree, DIAGRAM_TRAIT_KEY, axesFor, ranksOf, backEdges, DEFAULT_GROUP_INSET, sizeToBody, measureBody, buildBody, DEFAULT_NODE_GAP } from './chunk-JZ4CVLAB.js';
|
|
2
|
+
export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree, untilSettled } from './chunk-JZ4CVLAB.js';
|
|
3
3
|
import { dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, reconcileSpecs, SceneCanvas, fitViewToBounds, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, pointAlongPath, polylineFromPoints, registerNodeShape, effectivePose, usePoseRun, RECT_POSE_DESCRIPTOR, commandFill, commandStroke, composeAffordanceLayer } from '@weasel-js/core';
|
|
4
4
|
import { portCurvePoints } from '@weasel-js/geom';
|
|
5
5
|
import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1 } from '@weasel-js/core/math';
|
|
6
6
|
import { forwardRef, useEffect, useMemo, useRef, useState, useImperativeHandle, useCallback } from 'react';
|
|
7
|
+
import '@weasel-js/animator';
|
|
7
8
|
import { jsx } from 'react/jsx-runtime';
|
|
8
9
|
|
|
9
10
|
function traitOf(node) {
|
|
@@ -38,16 +39,18 @@ function groupDerivePose(opts = {}) {
|
|
|
38
39
|
y1 = Math.max(y1, b.y + b.height);
|
|
39
40
|
}
|
|
40
41
|
if (!Number.isFinite(x0)) return null;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
return geometry.fromBounds(boxAround({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }, group), node.pose);
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
function boxAround(union, group) {
|
|
46
|
+
const inset = insetOf(group.inset);
|
|
47
|
+
const width = union.width + inset.left + inset.right;
|
|
48
|
+
const grow = Math.max(0, (group.minWidth ?? 0) - width);
|
|
49
|
+
return {
|
|
50
|
+
x: union.x - inset.left - grow / 2,
|
|
51
|
+
y: union.y - inset.top,
|
|
52
|
+
width: width + grow,
|
|
53
|
+
height: union.height + inset.top + inset.bottom
|
|
51
54
|
};
|
|
52
55
|
}
|
|
53
56
|
function anchorDerivePose(opts = {}) {
|
|
@@ -88,10 +91,13 @@ function labelDerivePose(opts = {}) {
|
|
|
88
91
|
const t = typeof label.at === "number" ? label.at : NAMED[label.at] ?? 0.5;
|
|
89
92
|
const station = pointAlongPath(path, t);
|
|
90
93
|
if (station === null) return null;
|
|
91
|
-
const offset = label.offset ?? 0;
|
|
92
|
-
const x = station.point.x + station.tangent.y * offset;
|
|
93
|
-
const y = station.point.y - station.tangent.x * offset;
|
|
94
94
|
const bounds = geometry.getBounds(node.pose);
|
|
95
|
+
const nx = station.tangent.y;
|
|
96
|
+
const ny = -station.tangent.x;
|
|
97
|
+
const offset = label.offset ?? 0;
|
|
98
|
+
const reach = offset + Math.sign(offset) * (Math.abs(nx) * bounds.width + Math.abs(ny) * bounds.height) / 2;
|
|
99
|
+
const x = station.point.x + nx * reach;
|
|
100
|
+
const y = station.point.y + ny * reach;
|
|
95
101
|
return translatePoseViaDescriptor(
|
|
96
102
|
node.pose,
|
|
97
103
|
x - (bounds.x + bounds.width / 2),
|
|
@@ -162,8 +168,8 @@ var bezier = (req) => {
|
|
|
162
168
|
for (let i = 1; i < stops.length; i++) {
|
|
163
169
|
const a = stops[i - 1];
|
|
164
170
|
const b = stops[i];
|
|
165
|
-
const outN = i === 1 ? req.from.normal :
|
|
166
|
-
const inN = i === stops.length - 1 ? req.to.normal :
|
|
171
|
+
const outN = i === 1 ? req.from.normal : through(stops, i - 1);
|
|
172
|
+
const inN = i === stops.length - 1 ? req.to.normal : negated(through(stops, i));
|
|
167
173
|
const leg = portCurvePoints(
|
|
168
174
|
a.x,
|
|
169
175
|
a.y,
|
|
@@ -178,6 +184,13 @@ var bezier = (req) => {
|
|
|
178
184
|
return out;
|
|
179
185
|
};
|
|
180
186
|
var BEZIER_SAMPLES = 16;
|
|
187
|
+
function through(stops, i) {
|
|
188
|
+
const dx = stops[i + 1].x - stops[i - 1].x;
|
|
189
|
+
const dy = stops[i + 1].y - stops[i - 1].y;
|
|
190
|
+
const len = Math.hypot(dx, dy);
|
|
191
|
+
return len === 0 ? null : { x: dx / len, y: dy / len };
|
|
192
|
+
}
|
|
193
|
+
var negated = (v) => v === null ? null : { x: -v.x, y: -v.y };
|
|
181
194
|
var ROUTERS = Object.freeze({
|
|
182
195
|
straight,
|
|
183
196
|
orthogonal,
|
|
@@ -364,9 +377,6 @@ function commitEdgeToScene(edge, ctx) {
|
|
|
364
377
|
kind: "leaf",
|
|
365
378
|
layer: source?.layer ?? scene.layers[0].id,
|
|
366
379
|
pose: { x: 0, y: 0, width: 0, height: 0 },
|
|
367
|
-
// An edge runs *from* one node *to* another, and a plain line does not say
|
|
368
|
-
// so. The arrowhead is an ordinary stroke marker, which is why nothing in
|
|
369
|
-
// this package draws one.
|
|
370
380
|
data: { diagram: trait, stroke: DEFAULT_EDGE_STROKE },
|
|
371
381
|
dependsOn: [edge.from.nodeId, edge.to.nodeId],
|
|
372
382
|
// Without this the edge re-resolves on every dependency move and paints
|
|
@@ -562,7 +572,8 @@ function buildGraph(source, opts = {}) {
|
|
|
562
572
|
groupNodes.push({
|
|
563
573
|
id: node.id,
|
|
564
574
|
members: Array.isArray(deps) ? deps : [],
|
|
565
|
-
inset: insetOf(trait.group.inset)
|
|
575
|
+
inset: insetOf(trait.group.inset),
|
|
576
|
+
...trait.group.minWidth !== void 0 ? { minWidth: trait.group.minWidth } : {}
|
|
566
577
|
});
|
|
567
578
|
continue;
|
|
568
579
|
}
|
|
@@ -574,7 +585,7 @@ function buildGraph(source, opts = {}) {
|
|
|
574
585
|
nodes.push(entry);
|
|
575
586
|
byId.set(entry.id, entry);
|
|
576
587
|
}
|
|
577
|
-
const
|
|
588
|
+
const declared = new Map(groupNodes.map((g) => [g.id, g]));
|
|
578
589
|
const live = nestGroups(groupNodes, (id) => byId.has(id)).map((g) => {
|
|
579
590
|
for (const id of g.direct) {
|
|
580
591
|
const node = byId.get(id);
|
|
@@ -583,7 +594,8 @@ function buildGraph(source, opts = {}) {
|
|
|
583
594
|
return {
|
|
584
595
|
id: g.id,
|
|
585
596
|
members: g.members,
|
|
586
|
-
inset:
|
|
597
|
+
inset: declared.get(g.id).inset,
|
|
598
|
+
...declared.get(g.id).minWidth !== void 0 ? { minWidth: declared.get(g.id).minWidth } : {},
|
|
587
599
|
...g.parent !== void 0 ? { parent: g.parent } : {}
|
|
588
600
|
};
|
|
589
601
|
});
|
|
@@ -639,11 +651,12 @@ function resolveGroups(groups, ids, nodeIds, opts) {
|
|
|
639
651
|
inset,
|
|
640
652
|
pad,
|
|
641
653
|
title,
|
|
654
|
+
...title ? { minWidth: title.width + 2 * pad } : {},
|
|
642
655
|
...g.parent !== void 0 ? { parent: g.parent } : {}
|
|
643
656
|
};
|
|
644
657
|
});
|
|
645
658
|
}
|
|
646
|
-
function
|
|
659
|
+
function groupBoxes(groups, placedAt) {
|
|
647
660
|
const byId = new Map(groups.map((g) => [g.group.id, g]));
|
|
648
661
|
const boxes = /* @__PURE__ */ new Map();
|
|
649
662
|
const boxOf = (id) => {
|
|
@@ -651,29 +664,34 @@ function groupSpecs(groups, placedAt, styleOf) {
|
|
|
651
664
|
if (known !== void 0) return known;
|
|
652
665
|
const g = byId.get(id);
|
|
653
666
|
const rs = g.direct.map((m) => byId.has(m) ? boxOf(m) : placedAt.get(m));
|
|
654
|
-
const x = Math.min(...rs.map((r) => r.x))
|
|
655
|
-
const y = Math.min(...rs.map((r) => r.y))
|
|
656
|
-
const box = {
|
|
667
|
+
const x = Math.min(...rs.map((r) => r.x));
|
|
668
|
+
const y = Math.min(...rs.map((r) => r.y));
|
|
669
|
+
const box = boxAround({
|
|
657
670
|
x,
|
|
658
671
|
y,
|
|
659
|
-
width: Math.max(...rs.map((r) => r.x + r.width))
|
|
660
|
-
height: Math.max(...rs.map((r) => r.y + r.height))
|
|
661
|
-
};
|
|
672
|
+
width: Math.max(...rs.map((r) => r.x + r.width)) - x,
|
|
673
|
+
height: Math.max(...rs.map((r) => r.y + r.height)) - y
|
|
674
|
+
}, g);
|
|
662
675
|
boxes.set(id, box);
|
|
663
676
|
return box;
|
|
664
677
|
};
|
|
678
|
+
for (const g of groups) boxOf(g.group.id);
|
|
679
|
+
return boxes;
|
|
680
|
+
}
|
|
681
|
+
function groupSpecs(groups, placedAt, styleOf) {
|
|
682
|
+
const boxes = groupBoxes(groups, placedAt);
|
|
665
683
|
const specs = [];
|
|
666
684
|
for (const g of groups) {
|
|
667
685
|
const { style, text } = styleOf(g.group);
|
|
668
|
-
const { x, y, width, height } =
|
|
686
|
+
const { x, y, width, height } = boxes.get(g.group.id);
|
|
669
687
|
specs.push({
|
|
670
688
|
id: g.group.id,
|
|
671
689
|
kind: "leaf",
|
|
672
690
|
layer: "main",
|
|
673
691
|
pose: { x, y, width, height },
|
|
674
692
|
data: {
|
|
675
|
-
diagram: { outline: "rect", group: { inset: g.inset } },
|
|
676
|
-
fill: { color: style.fill },
|
|
693
|
+
diagram: { outline: "rect", group: { inset: g.inset, ...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {} } },
|
|
694
|
+
fill: { paint: { color: style.fill } },
|
|
677
695
|
stroke: {
|
|
678
696
|
paint: { color: style.stroke },
|
|
679
697
|
width: style.strokeWidth ?? 1,
|
|
@@ -691,7 +709,7 @@ function groupSpecs(groups, placedAt, styleOf) {
|
|
|
691
709
|
layer: "main",
|
|
692
710
|
pickable: false,
|
|
693
711
|
pose: { x: x + g.pad, y: y + g.pad, width: g.title.width, height: g.title.height },
|
|
694
|
-
data: { diagram: { anchor }, text: g.group.label, style: text, fill: { color: style.text } },
|
|
712
|
+
data: { diagram: { anchor }, text: g.group.label, style: text, fill: { paint: { color: style.text } } },
|
|
695
713
|
dependsOn: [g.group.id],
|
|
696
714
|
derivePose: ANCHOR_DERIVE_POSE
|
|
697
715
|
});
|
|
@@ -699,6 +717,102 @@ function groupSpecs(groups, placedAt, styleOf) {
|
|
|
699
717
|
return specs;
|
|
700
718
|
}
|
|
701
719
|
|
|
720
|
+
// src/route.ts
|
|
721
|
+
var FACES = {
|
|
722
|
+
down: { out: "s", in: "n" },
|
|
723
|
+
up: { out: "n", in: "s" },
|
|
724
|
+
right: { out: "e", in: "w" },
|
|
725
|
+
left: { out: "w", in: "e" }
|
|
726
|
+
};
|
|
727
|
+
function layeredRoutes(input) {
|
|
728
|
+
const { graph, boxes, members, compass, clearance } = input;
|
|
729
|
+
const direction = input.direction ?? "down";
|
|
730
|
+
const axes = axesFor(direction);
|
|
731
|
+
const faces = FACES[direction];
|
|
732
|
+
const ranks = ranksOf(graph, backEdges(graph));
|
|
733
|
+
const span = (id) => {
|
|
734
|
+
const ids = members.get(id) ?? [id];
|
|
735
|
+
const rs = ids.map((m) => ranks.get(m)).filter((r) => r !== void 0);
|
|
736
|
+
return rs.length === 0 ? null : [Math.min(...rs), Math.max(...rs)];
|
|
737
|
+
};
|
|
738
|
+
const lo = (r, axis) => axis === "x" ? r.x : r.y;
|
|
739
|
+
const hi = (r, axis) => axis === "x" ? r.x + r.width : r.y + r.height;
|
|
740
|
+
const mid = (r, axis) => (lo(r, axis) + hi(r, axis)) / 2;
|
|
741
|
+
const byRank = /* @__PURE__ */ new Map();
|
|
742
|
+
for (const node of graph.nodes) {
|
|
743
|
+
const rank = ranks.get(node.id);
|
|
744
|
+
const box = boxes.get(node.id);
|
|
745
|
+
if (rank === void 0 || box === void 0) continue;
|
|
746
|
+
byRank.set(rank, [...byRank.get(rank) ?? [], box]);
|
|
747
|
+
}
|
|
748
|
+
const routes = /* @__PURE__ */ new Map();
|
|
749
|
+
for (const edge of input.edges) {
|
|
750
|
+
const from = span(edge.from);
|
|
751
|
+
const to = span(edge.to);
|
|
752
|
+
const a = boxes.get(edge.from);
|
|
753
|
+
const b = boxes.get(edge.to);
|
|
754
|
+
if (from === null || to === null || a === void 0 || b === void 0 || from[1] >= to[0]) continue;
|
|
755
|
+
const route = {};
|
|
756
|
+
if (compass.has(edge.from)) route.fromPort = faces.out;
|
|
757
|
+
if (compass.has(edge.to)) route.toPort = faces.in;
|
|
758
|
+
const near = axes.sign === 1 ? hi : lo;
|
|
759
|
+
const far = axes.sign === 1 ? lo : hi;
|
|
760
|
+
const start = { cross: mid(a, axes.cross), rank: near(a, axes.rank) };
|
|
761
|
+
const end = { cross: mid(b, axes.cross), rank: far(b, axes.rank) };
|
|
762
|
+
const ends = /* @__PURE__ */ new Set([edge.from, edge.to, ...members.get(edge.from) ?? [], ...members.get(edge.to) ?? []]);
|
|
763
|
+
const groupsInWay = [...members].filter(([g, ms]) => !ends.has(g) && !ms.some((m) => ends.has(m)));
|
|
764
|
+
const stops = [];
|
|
765
|
+
let blocked = false;
|
|
766
|
+
for (let k = from[1] + 1; k < to[0]; k++) {
|
|
767
|
+
const row = byRank.get(k) ?? [];
|
|
768
|
+
if (row.length === 0) continue;
|
|
769
|
+
const bandLo = Math.min(...row.map((r) => lo(r, axes.rank)));
|
|
770
|
+
const bandHi = Math.max(...row.map((r) => hi(r, axes.rank)));
|
|
771
|
+
const obstacles = [...row];
|
|
772
|
+
for (const [g] of groupsInWay) {
|
|
773
|
+
const box = boxes.get(g);
|
|
774
|
+
if (box !== void 0 && lo(box, axes.rank) < bandHi && hi(box, axes.rank) > bandLo) obstacles.push(box);
|
|
775
|
+
}
|
|
776
|
+
const t = ((bandLo + bandHi) / 2 - start.rank) / (end.rank - start.rank);
|
|
777
|
+
const ideal = start.cross + (end.cross - start.cross) * t;
|
|
778
|
+
const cross = freeAt(ideal, obstacles.map((r) => [lo(r, axes.cross) - clearance, hi(r, axes.cross) + clearance]));
|
|
779
|
+
if (cross !== ideal) blocked = true;
|
|
780
|
+
const [first, last] = axes.sign === 1 ? [bandLo, bandHi] : [bandHi, bandLo];
|
|
781
|
+
stops.push({ cross, rank: first }, { cross, rank: last });
|
|
782
|
+
}
|
|
783
|
+
if (blocked) {
|
|
784
|
+
route.waypoints = stops.map((s) => axes.rank === "y" ? { x: s.cross, y: s.rank } : { x: s.rank, y: s.cross });
|
|
785
|
+
}
|
|
786
|
+
if (route.fromPort !== void 0 || route.toPort !== void 0 || route.waypoints !== void 0) {
|
|
787
|
+
routes.set(edge.id, route);
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
return routes;
|
|
791
|
+
}
|
|
792
|
+
function authoredOver(edges, input) {
|
|
793
|
+
const routes = layeredRoutes({ ...input, edges });
|
|
794
|
+
return new Map(edges.map((e) => {
|
|
795
|
+
const r = routes.get(e.id);
|
|
796
|
+
const fromPort = e.fromPort ?? r?.fromPort;
|
|
797
|
+
const toPort = e.toPort ?? r?.toPort;
|
|
798
|
+
const waypoints = e.waypoints ?? r?.waypoints;
|
|
799
|
+
return [e.id, { ...fromPort ? { fromPort } : {}, ...toPort ? { toPort } : {}, ...waypoints ? { waypoints } : {} }];
|
|
800
|
+
}));
|
|
801
|
+
}
|
|
802
|
+
function freeAt(at, spans) {
|
|
803
|
+
const sorted = [...spans].sort((p, q) => p[0] - q[0]);
|
|
804
|
+
const merged = [];
|
|
805
|
+
for (const [s, e] of sorted) {
|
|
806
|
+
const top = merged[merged.length - 1];
|
|
807
|
+
if (top !== void 0 && s < top[1]) top[1] = Math.max(top[1], e);
|
|
808
|
+
else merged.push([s, e]);
|
|
809
|
+
}
|
|
810
|
+
for (const [s, e] of merged) {
|
|
811
|
+
if (at > s && at < e) return at - s <= e - at ? s : e;
|
|
812
|
+
}
|
|
813
|
+
return at;
|
|
814
|
+
}
|
|
815
|
+
|
|
702
816
|
// src/fromData.ts
|
|
703
817
|
var FONT = { fontFamily: "sans-serif", fontSize: 12 };
|
|
704
818
|
var NODE = { fill: "#16222c", stroke: "#7ba7c7", text: "#dbe7f2" };
|
|
@@ -727,6 +841,23 @@ function graphOf(nodes, edges, groups = []) {
|
|
|
727
841
|
incoming: (id) => inc.get(id) ?? []
|
|
728
842
|
};
|
|
729
843
|
}
|
|
844
|
+
function routed(data, edges, graph, groups, placedAt, layoutOptions) {
|
|
845
|
+
return authoredOver(edges.map((e) => ({ ...e, id: edgeIdOf(e) })), {
|
|
846
|
+
graph,
|
|
847
|
+
boxes: new Map([...placedAt, ...groupBoxes(groups, placedAt)]),
|
|
848
|
+
members: new Map(groups.map((g) => [g.group.id, g.members])),
|
|
849
|
+
compass: /* @__PURE__ */ new Set([...data.nodes.filter((n) => n.ports === void 0).map((n) => n.id), ...groups.map((g) => g.group.id)]),
|
|
850
|
+
clearance: (layoutOptions.nodeGap ?? DEFAULT_NODE_GAP) / 2,
|
|
851
|
+
...layoutOptions.direction ? { direction: layoutOptions.direction } : {}
|
|
852
|
+
});
|
|
853
|
+
}
|
|
854
|
+
function placed(data, seeds, moved) {
|
|
855
|
+
return new Map(data.nodes.map((n, i) => {
|
|
856
|
+
const seed = seeds[i].bounds;
|
|
857
|
+
const at = moved.get(n.id) ?? seed;
|
|
858
|
+
return [n.id, { x: at.x, y: at.y, width: seed.width, height: seed.height }];
|
|
859
|
+
}));
|
|
860
|
+
}
|
|
730
861
|
function diagramScene(data, opts = {}) {
|
|
731
862
|
const font = opts.font ?? FONT;
|
|
732
863
|
const styleOf = (s) => ({
|
|
@@ -775,6 +906,7 @@ function diagramScene(data, opts = {}) {
|
|
|
775
906
|
id: g.group.id,
|
|
776
907
|
members: g.members,
|
|
777
908
|
inset: g.inset,
|
|
909
|
+
...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {},
|
|
778
910
|
...g.parent !== void 0 ? { parent: g.parent } : {}
|
|
779
911
|
}));
|
|
780
912
|
const seedOf = new Map(seeds.map((n) => [n.id, n]));
|
|
@@ -790,13 +922,11 @@ function diagramScene(data, opts = {}) {
|
|
|
790
922
|
graphGroups
|
|
791
923
|
);
|
|
792
924
|
const layout = typeof opts.layout === "function" ? opts.layout : opts.layout === "none" ? null : LAYOUTS[opts.layout ?? "layered"];
|
|
793
|
-
const
|
|
925
|
+
const layoutOptions = { order: "barycenter", ...opts.layoutOptions };
|
|
926
|
+
const moved = layout === null ? /* @__PURE__ */ new Map() : layout(graph, layoutOptions);
|
|
794
927
|
const specs = [];
|
|
795
|
-
const placedAt =
|
|
796
|
-
|
|
797
|
-
const at = moved.get(n.id) ?? seed;
|
|
798
|
-
return [n.id, { x: at.x, y: at.y, width: seed.width, height: seed.height }];
|
|
799
|
-
}));
|
|
928
|
+
const placedAt = placed(data, seeds, moved);
|
|
929
|
+
const routes = layout === layered ? routed(data, edges, graph, groups, placedAt, layoutOptions) : null;
|
|
800
930
|
specs.push(...groupSpecs(groups, placedAt, (g) => ({
|
|
801
931
|
style: opts.groupStyle?.(g) ?? GROUP,
|
|
802
932
|
text: styleOf(titleStyle)
|
|
@@ -805,7 +935,7 @@ function diagramScene(data, opts = {}) {
|
|
|
805
935
|
const seed = seeds[i].bounds;
|
|
806
936
|
const at = placedAt.get(n.id);
|
|
807
937
|
const style = opts.nodeStyle?.(n) ?? NODE;
|
|
808
|
-
const textData = (text, s) => ({ text, style: styleOf(s), fill: { color: style.text } });
|
|
938
|
+
const textData = (text, s) => ({ text, style: styleOf(s), fill: { paint: { color: style.text } } });
|
|
809
939
|
const built = buildBody(
|
|
810
940
|
bodies[i],
|
|
811
941
|
{ x: at.x, y: at.y, width: seed.width, height: seed.height },
|
|
@@ -815,7 +945,7 @@ function diagramScene(data, opts = {}) {
|
|
|
815
945
|
measure,
|
|
816
946
|
body: (trait) => ({
|
|
817
947
|
diagram: n.pinned === true ? { ...trait, pinned: true } : trait,
|
|
818
|
-
fill: { color: style.fill },
|
|
948
|
+
fill: { paint: { color: style.fill } },
|
|
819
949
|
stroke: {
|
|
820
950
|
paint: { color: style.stroke },
|
|
821
951
|
width: style.strokeWidth ?? 2,
|
|
@@ -832,6 +962,7 @@ function diagramScene(data, opts = {}) {
|
|
|
832
962
|
}
|
|
833
963
|
for (const e of edges) {
|
|
834
964
|
const id = edgeIdOf(e);
|
|
965
|
+
const { fromPort, toPort, waypoints } = routes?.get(id) ?? e;
|
|
835
966
|
const style = opts.edgeStyle?.(e) ?? EDGE;
|
|
836
967
|
const markerStart = style.markerStart ?? null;
|
|
837
968
|
const markerEnd = style.markerEnd === void 0 ? "arrow" : style.markerEnd;
|
|
@@ -843,10 +974,10 @@ function diagramScene(data, opts = {}) {
|
|
|
843
974
|
pose: { x: 0, y: 0, width: 0, height: 0 },
|
|
844
975
|
data: {
|
|
845
976
|
diagram: {
|
|
846
|
-
from:
|
|
847
|
-
to:
|
|
977
|
+
from: fromPort ? { port: fromPort } : {},
|
|
978
|
+
to: toPort ? { port: toPort } : {},
|
|
848
979
|
router: e.router ?? opts.router ?? "bezier",
|
|
849
|
-
...
|
|
980
|
+
...waypoints ? { waypoints } : {}
|
|
850
981
|
},
|
|
851
982
|
stroke: {
|
|
852
983
|
paint: { color: style.stroke },
|
|
@@ -871,7 +1002,7 @@ function diagramScene(data, opts = {}) {
|
|
|
871
1002
|
diagram: { label: e.labelPlacement ?? opts.labelPlacement ?? LABEL_PLACEMENT },
|
|
872
1003
|
text: e.label,
|
|
873
1004
|
style: labelStyle,
|
|
874
|
-
fill: { color: style.label ?? style.stroke }
|
|
1005
|
+
fill: { paint: { color: style.label ?? style.stroke } }
|
|
875
1006
|
},
|
|
876
1007
|
dependsOn: [id],
|
|
877
1008
|
derivePose: LABEL_DERIVE_POSE
|
|
@@ -1055,13 +1186,13 @@ function useLiveLayout(opts) {
|
|
|
1055
1186
|
pinned: ctx.pinned,
|
|
1056
1187
|
frame: producerFrame.current++
|
|
1057
1188
|
});
|
|
1058
|
-
let
|
|
1189
|
+
let placed2 = result;
|
|
1059
1190
|
if (ctx.pinned.size > 0) {
|
|
1060
1191
|
const held = new Map(result);
|
|
1061
1192
|
for (const id of ctx.pinned.keys()) held.delete(id);
|
|
1062
|
-
|
|
1193
|
+
placed2 = held;
|
|
1063
1194
|
}
|
|
1064
|
-
const poses = layoutPoses(o.scene,
|
|
1195
|
+
const poses = layoutPoses(o.scene, placed2, o.geometry);
|
|
1065
1196
|
return { poses: [...poses], done };
|
|
1066
1197
|
}, [optsRef]);
|
|
1067
1198
|
const run = usePoseRun({
|
|
@@ -1156,6 +1287,7 @@ function useMirroredSelection(selection, selected, onSelect) {
|
|
|
1156
1287
|
}, [selection, onSelectRef]);
|
|
1157
1288
|
}
|
|
1158
1289
|
var AMBIENT = [dragPanContribution()];
|
|
1290
|
+
var NO_MARQUEE = { areaSelect: null };
|
|
1159
1291
|
var DiagramView = forwardRef(function DiagramView2(props, ref) {
|
|
1160
1292
|
return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props, apiRef: ref }) });
|
|
1161
1293
|
});
|
|
@@ -1268,6 +1400,7 @@ function Inner({
|
|
|
1268
1400
|
features: onMove ? ["view", "pick", "move"] : ["view", "pick"],
|
|
1269
1401
|
enableKeybindings: enableKeybindings ?? (onMove !== void 0 || onConnect !== void 0),
|
|
1270
1402
|
ambient,
|
|
1403
|
+
actions: NO_MARQUEE,
|
|
1271
1404
|
onClick,
|
|
1272
1405
|
width,
|
|
1273
1406
|
height,
|
|
@@ -1298,6 +1431,6 @@ function fitDiagram(specs, size, fit = {}) {
|
|
|
1298
1431
|
});
|
|
1299
1432
|
}
|
|
1300
1433
|
|
|
1301
|
-
export { ANCHOR_DERIVE_POSE, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LAYOUTS2 as LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, anchorDerivePose, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, selfLoop, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
|
|
1434
|
+
export { ANCHOR_DERIVE_POSE, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LAYOUTS2 as LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, anchorDerivePose, applyLayout, bezier, boxAround, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layeredRoutes, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, selfLoop, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
|
|
1302
1435
|
//# sourceMappingURL=index.js.map
|
|
1303
1436
|
//# sourceMappingURL=index.js.map
|