@weasel-js/diagram 1.9.3 → 1.10.0
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 +2 -2
- package/dist/{chunk-ERT3XWBS.js → chunk-BWQJYEA3.js} +241 -66
- package/dist/chunk-BWQJYEA3.js.map +1 -0
- package/dist/index.d.ts +132 -161
- package/dist/index.js +168 -51
- package/dist/index.js.map +1 -1
- package/dist/layout.d.ts +2 -1
- package/dist/{layout.entry-KHbx5uGC.d.ts → layout.entry-CIdRpG2i.d.ts} +74 -103
- package/dist/layout.js +1 -1
- package/package.json +6 -3
- package/dist/chunk-ERT3XWBS.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
|
-
import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, c as PortAnchor, d as DiagramGroup, R as Row, O as Outline, e as PortSpec, B as BodySpec, f as DiagramNode, L as LayoutFn, g as LayoutOptions, M as MeasureRowText, G as GraphSource, F as ForceOptions, h as LayoutResult, i as Graph } from './layout.entry-
|
|
2
|
-
export { j as BodyFloor, k as BodyNodeSpec, l as Bounds, m as BuildBodyOptions, n as BuildGraphOptions, C as COMPASS, o as DEFAULT_GROUP_INSET, p as DEFAULT_NODE_GAP, q as DEFAULT_PORTS, r as DEFAULT_RANK_GAP, s as DIAGRAM_TRAIT_KEY, t as DiagramNodeEntry, u as ForceBody, v as ForceRelaxation, w as
|
|
3
|
-
import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState,
|
|
1
|
+
import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, c as PortAnchor, d as DiagramGroup, R as Row, O as Outline, e as PortSpec, B as BodySpec, f as DiagramNode, L as LayoutFn, g as LayoutOptions, M as MeasureRowText, G as GraphSource, F as ForceOptions, h as LayoutResult, i as Graph } from './layout.entry-CIdRpG2i.js';
|
|
2
|
+
export { j as BodyFloor, k as BodyNodeSpec, l as Bounds, m as BuildBodyOptions, n as BuildGraphOptions, C as COMPASS, o as DEFAULT_GROUP_INSET, p as DEFAULT_NODE_GAP, q as DEFAULT_PORTS, r as DEFAULT_RANK_GAP, s as DIAGRAM_TRAIT_KEY, t as DiagramNodeEntry, u as ForceBody, v as ForceRelaxation, w as Forest, x as GraphEdge, y as GraphGroup, z as GraphNode, A as GraphNodeLike, E as GroupInset, H as LayoutAxes, I as LayoutDirection, J as RowBox, K as RowNodeData, N as RowPort, Q as RowPortBox, S as RowTextStyle, T as Slot, U as axesFor, V as backEdges, W as bodyOutline, X as bodyTrait, Y as boxForContent, Z as buildBody, _ as buildGraph, $ as canvasMeasure, a0 as contentBox, a1 as createDiagramNodes, a2 as dataKeyReader, a3 as diagramNodeOf, a4 as expandGroupEdges, a5 as force, a6 as forceRelaxation, a7 as forestOf, a8 as graphOrder, a9 as insetOf, aa as isPinned, ab as layered, ac as layoutBody, ad as layoutRowPorts, ae as measureBody, af as outlinePath, ag as outlinePolyline, ah as packAcross, ai as packClusters, aj as pinnedSet, ak as portOf, al as portsOf, am as portsOnOutline, an as rankGaps, ao as ranksOf, ap as rayHit, aq as seededOrder, ar as settle, as as sizeToBody, at as translated, au as tree, av as untilSettled } from './layout.entry-CIdRpG2i.js';
|
|
3
|
+
import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, CommandFill, CommandStroke, CursorSpec, Affordance, InvocationCtx, Stroke, GestureBinding, Action, Contribution, RenderLayer, MarkerRef, AddNodeSpec, RectPose, Scene, NodeId, Fill, NodeShapeEntry, Paint, View, SelectionApi } from '@weasel-js/core';
|
|
4
4
|
import { Vec2 as Vec2$1 } from '@weasel-js/core/math';
|
|
5
|
+
import { EasingFn } from '@weasel-js/animator';
|
|
5
6
|
import * as react from 'react';
|
|
6
7
|
import '@weasel-js/geom';
|
|
8
|
+
import '@weasel-js/simulation';
|
|
7
9
|
|
|
8
10
|
/**
|
|
9
11
|
* `DiagramEdge` — a connection between two participants.
|
|
10
12
|
*
|
|
11
13
|
* An edge is an ordinary leaf scene node with `dependsOn: [from, to]` and a
|
|
12
|
-
* `derivePath` that runs a **router**.
|
|
13
|
-
* plugin-owned render layer
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* 10k-edge force graph, which keeps its render layer.
|
|
14
|
+
* `derivePath` that runs a **router**. Being a scene node rather than a
|
|
15
|
+
* plugin-owned render layer buys selection, hit-testing, hover, styling,
|
|
16
|
+
* z-order, SVG export, undo, and copy/paste. The cost is that an edge costs
|
|
17
|
+
* what a node costs — right for tens to hundreds of edges, wrong for a
|
|
18
|
+
* 10k-edge force graph.
|
|
18
19
|
*
|
|
19
20
|
* **Author-dragged waypoints are data on the edge and the router routes
|
|
20
|
-
* through them
|
|
21
|
-
* constraints on the path. That is what keeps derived geometry and hand-tuning
|
|
22
|
-
* compatible — a moved endpoint still re-routes, through the waypoints the
|
|
23
|
-
* author put there.
|
|
21
|
+
* through them**, so a moved endpoint still re-routes.
|
|
24
22
|
*
|
|
25
23
|
* Arrowheads are not here. They are stroke markers, the same
|
|
26
24
|
* `markerStart` / `markerEnd` any other stroke carries.
|
|
@@ -52,11 +50,10 @@ interface RouteRequest {
|
|
|
52
50
|
waypoints: readonly Vec2[];
|
|
53
51
|
}
|
|
54
52
|
/** A router returns the points the edge runs through, `from.point` first and
|
|
55
|
-
* `to.point` last.
|
|
56
|
-
|
|
57
|
-
type Router$1 = (req: RouteRequest) => readonly Vec2[];
|
|
53
|
+
* `to.point` last. */
|
|
54
|
+
type Router = (req: RouteRequest) => readonly Vec2[];
|
|
58
55
|
/** The straight run between the two ends, through any waypoints. */
|
|
59
|
-
declare const straight: Router
|
|
56
|
+
declare const straight: Router;
|
|
60
57
|
/**
|
|
61
58
|
* An axis-aligned route: leave along the departing end's normal and arrive
|
|
62
59
|
* against the receiving one's.
|
|
@@ -64,24 +61,19 @@ declare const straight: Router$1;
|
|
|
64
61
|
* A leg is one elbow where the two ends face different axes and two where they
|
|
65
62
|
* face the same one, turning at the midpoint of the axis they share. Arriving
|
|
66
63
|
* along the port's own facing is what makes the arrowhead point *into* the
|
|
67
|
-
* shape
|
|
68
|
-
* across the corner, which reads as aimed at nothing.
|
|
64
|
+
* shape.
|
|
69
65
|
*/
|
|
70
|
-
declare const orthogonal: Router
|
|
66
|
+
declare const orthogonal: Router;
|
|
71
67
|
/**
|
|
72
68
|
* A smooth route, sampled into points.
|
|
73
69
|
*
|
|
74
70
|
* Each leg is a cubic that leaves along the departing end's normal and arrives
|
|
75
|
-
* against the receiving one's
|
|
76
|
-
*
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
* every router returns the same thing; `edgePath` is free to emit curves later
|
|
80
|
-
* without changing the contract.
|
|
81
|
-
*/
|
|
82
|
-
declare const bezier: Router$1;
|
|
71
|
+
* against the receiving one's. Sampled rather than emitted as curve commands so
|
|
72
|
+
* every router returns the same thing.
|
|
73
|
+
*/
|
|
74
|
+
declare const bezier: Router;
|
|
83
75
|
/** The routers this package ships. A consumer's own go in the same shape. */
|
|
84
|
-
declare const ROUTERS: Readonly<Record<string, Router
|
|
76
|
+
declare const ROUTERS: Readonly<Record<string, Router>>;
|
|
85
77
|
/** The edge trait on a node's data, or `null`. */
|
|
86
78
|
declare function diagramEdgeOf(node: {
|
|
87
79
|
data: unknown;
|
|
@@ -91,22 +83,26 @@ declare function diagramEdgeOf(node: {
|
|
|
91
83
|
* other end most directly.
|
|
92
84
|
*
|
|
93
85
|
* "Facing" rather than "nearest": a port on the far side of a wide node can be
|
|
94
|
-
* closer in a straight line than the one pointing at the target
|
|
95
|
-
* that leaves through its own node reads as a bug however short it is.
|
|
86
|
+
* closer in a straight line than the one pointing at the target.
|
|
96
87
|
*/
|
|
97
88
|
declare function resolveEnd<TPose>(end: EdgeEnd, dep: DerivedDep<TPose>, toward: Vec2, opts: PortsOptions<TPose>, allPorts: (d: DerivedDep<TPose>) => Port[]): Port | undefined;
|
|
98
89
|
/** Options for {@link edgeDerivePath}. */
|
|
99
90
|
interface EdgeRouteOptions<TPose> extends PortsOptions<TPose> {
|
|
100
91
|
/** Routers by key. Defaults to {@link ROUTERS}. */
|
|
101
|
-
routers?: Readonly<Record<string, Router
|
|
92
|
+
routers?: Readonly<Record<string, Router>>;
|
|
93
|
+
/** How far outside its node a self-edge with no ports named turns, in
|
|
94
|
+
* world units. Defaults to half the node's shorter side. */
|
|
95
|
+
selfLoopStandoff?: number;
|
|
102
96
|
}
|
|
103
97
|
/**
|
|
104
98
|
* A `derivePath` that routes an edge between its two dependencies.
|
|
105
99
|
*
|
|
100
|
+
* An edge from a node to itself that names no ports leaves and returns by the
|
|
101
|
+
* sides {@link selfLoop} picks, and where the author set no waypoints the
|
|
102
|
+
* router is handed that rule's point outside the node as one.
|
|
103
|
+
*
|
|
106
104
|
* Returns `null` — nothing to draw — when the node is not an edge, when either
|
|
107
|
-
* dependency is gone, or when an endpoint offers no ports at all.
|
|
108
|
-
* edge painting a line to the origin is worse than a dangling edge painting
|
|
109
|
-
* nothing.
|
|
105
|
+
* dependency is gone, or when an endpoint offers no ports at all.
|
|
110
106
|
*/
|
|
111
107
|
declare function edgeDerivePath<TPose>(opts?: EdgeRouteOptions<TPose>): (node: {
|
|
112
108
|
data: unknown;
|
|
@@ -128,10 +124,9 @@ declare function withDiagramRegistry<TPose, TData = unknown, TLayer extends stri
|
|
|
128
124
|
*
|
|
129
125
|
* A port is declared as an `AffordanceRegion`, so the kit's own region walk
|
|
130
126
|
* supplies the hit-test, the screen-pixel hit radius, the cursor and the
|
|
131
|
-
* exclusive claim that keeps a port drag out of the select tool's hands.
|
|
132
|
-
*
|
|
133
|
-
*
|
|
134
|
-
* whatever tool happens to be active.
|
|
127
|
+
* exclusive claim that keeps a port drag out of the select tool's hands. The
|
|
128
|
+
* walk runs on every pointerdown before any tool sees the event, so a port
|
|
129
|
+
* answers whatever tool happens to be active.
|
|
135
130
|
*
|
|
136
131
|
* Two things about this are easy to get wrong, and both fail silently.
|
|
137
132
|
*
|
|
@@ -187,8 +182,8 @@ interface PortAffordanceOptions<TPose> {
|
|
|
187
182
|
/** Screen-pixel side of the painted square. Default 7. Omit `paint` entirely
|
|
188
183
|
* by passing 0 — a port the consumer draws itself is still hittable. */
|
|
189
184
|
sizePx?: number;
|
|
190
|
-
fill?:
|
|
191
|
-
stroke?:
|
|
185
|
+
fill?: CommandFill;
|
|
186
|
+
stroke?: CommandStroke;
|
|
192
187
|
cursor?: CursorSpec;
|
|
193
188
|
/** Default `'exclusive'` on pointer gestures: a drag from a port is a
|
|
194
189
|
* connect, never a move of the node underneath it. */
|
|
@@ -210,26 +205,17 @@ declare function createPortAffordance<TPose>(participants: ParticipantSource<TPo
|
|
|
210
205
|
*
|
|
211
206
|
* Connect is an ordinary drag binding, not a mode and not a tool of its own:
|
|
212
207
|
* the binding is gated on a press landing on a port affordance, so a connect
|
|
213
|
-
* starts from whatever tool happens to be active
|
|
214
|
-
*
|
|
215
|
-
*
|
|
216
|
-
*
|
|
217
|
-
*
|
|
218
|
-
*
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
*
|
|
222
|
-
*
|
|
223
|
-
*
|
|
224
|
-
* dispatcher never re-reads the affordance under a moving pointer, so a
|
|
225
|
-
* spec has no vocabulary for it. It is decided by `canConnect` filtering
|
|
226
|
-
* the **candidate set**: an illegal port is never a candidate, so the
|
|
227
|
-
* preview will not snap to it and a release over it commits nothing. That
|
|
228
|
-
* is a narrower thing than an action body that inspects a hit and bails.
|
|
229
|
-
*
|
|
230
|
-
* One resolver answers both the live preview and the commit, for the reason
|
|
231
|
-
* `insertAction` does the same: a preview computed separately from the commit
|
|
232
|
-
* is a preview that can lie about what releasing will do.
|
|
208
|
+
* starts from whatever tool happens to be active, and a press that is *not* on
|
|
209
|
+
* a port falls through to the tool that wants it.
|
|
210
|
+
*
|
|
211
|
+
* *Which presses start a connect* is routing, and belongs to the binding spec.
|
|
212
|
+
* *Which ports a live connect may land on* cannot be routing — the dispatcher
|
|
213
|
+
* never re-reads the affordance under a moving pointer — so `canConnect`
|
|
214
|
+
* filters the candidate set: the preview will not snap to an illegal port and
|
|
215
|
+
* a release over it commits nothing.
|
|
216
|
+
*
|
|
217
|
+
* One resolver answers both the live preview and the commit, so the preview
|
|
218
|
+
* cannot lie about what releasing will do.
|
|
233
219
|
*/
|
|
234
220
|
|
|
235
221
|
/** The default action id, and what {@link connectBinding} points at. */
|
|
@@ -248,11 +234,8 @@ interface PendingEdge {
|
|
|
248
234
|
* The shipped policy: a port may not join itself, and two ports that both
|
|
249
235
|
* declare a `type` must declare the same one.
|
|
250
236
|
*
|
|
251
|
-
* A port with no type joins anything
|
|
252
|
-
*
|
|
253
|
-
* Two ports on the *same node* may be joined: a self-edge between two different
|
|
254
|
-
* ports is meaningful in a state machine, and refusing it here would be policy
|
|
255
|
-
* masquerading as a rule.
|
|
237
|
+
* A port with no type joins anything. Two different ports on the *same node*
|
|
238
|
+
* may be joined: a self-edge is meaningful in a state machine.
|
|
256
239
|
*/
|
|
257
240
|
declare const defaultCanConnect: CanConnect;
|
|
258
241
|
/** Options for {@link createConnectAction}. Only `participants` is required. */
|
|
@@ -272,14 +255,12 @@ interface ConnectActionOptions<TPose> {
|
|
|
272
255
|
/** Registry key the new edge names, and the router the preview draws with.
|
|
273
256
|
* Default `'straight'`. */
|
|
274
257
|
router?: string;
|
|
275
|
-
routers?: Readonly<Record<string, Router
|
|
258
|
+
routers?: Readonly<Record<string, Router>>;
|
|
276
259
|
/**
|
|
277
260
|
* Mints and commits the edge. Called once, on release over a valid port.
|
|
278
261
|
*
|
|
279
|
-
* Defaults to {@link commitEdgeToScene} against `deps.scene
|
|
280
|
-
*
|
|
281
|
-
* overrides the kit's `insert` dep — to choose the edge node's data, its
|
|
282
|
-
* layer, or its stroke.
|
|
262
|
+
* Defaults to {@link commitEdgeToScene} against `deps.scene`. Override it to
|
|
263
|
+
* choose the edge node's data, its layer, or its stroke.
|
|
283
264
|
*/
|
|
284
265
|
commit?: (edge: PendingEdge, ctx: InvocationCtx) => void;
|
|
285
266
|
}
|
|
@@ -291,8 +272,7 @@ declare const DEFAULT_EDGE_STROKE: Stroke;
|
|
|
291
272
|
* layer's own chrome.
|
|
292
273
|
*
|
|
293
274
|
* The string form of `target` rather than a predicate, because it ranks higher
|
|
294
|
-
* in specificity
|
|
295
|
-
* it, so no tool needs a predicate of its own to keep out of the way.
|
|
275
|
+
* in specificity: a bare `{ kind: 'drag' }` on the select tool cannot outrank it.
|
|
296
276
|
*/
|
|
297
277
|
declare function connectBinding(actionId?: string): GestureBinding;
|
|
298
278
|
/** The action id that absorbs a press on a port. */
|
|
@@ -305,8 +285,7 @@ declare const GRAB_PORT_ACTION_ID = "diagram.grabPort";
|
|
|
305
285
|
* claim bars every binding whose target does not consult the affordance. So a
|
|
306
286
|
* bundle that binds only `drag` leaves the pointerdown with nowhere to go, and
|
|
307
287
|
* the dispatcher drops the press — the drag it would have grown into never
|
|
308
|
-
* happens.
|
|
309
|
-
* press on a port should not pick or deselect the node underneath it.
|
|
288
|
+
* happens.
|
|
310
289
|
*/
|
|
311
290
|
declare function grabPortAction(id?: string): Action;
|
|
312
291
|
/** The two bindings that keep a port's claim from dropping the press. */
|
|
@@ -315,20 +294,12 @@ declare function grabPortBindings(actionId?: string): GestureBinding[];
|
|
|
315
294
|
* The default commit: one leaf node carrying the edge trait, added to
|
|
316
295
|
* `deps.scene`. One `add` is one history entry, so the edge undoes in one.
|
|
317
296
|
*
|
|
318
|
-
* The edge lands on the **source node's** layer rather than the bottom one
|
|
319
|
-
* edge between two nodes on a `wires` layer belongs on `wires`, and picking the
|
|
320
|
-
* first layer in the stack would quietly move it somewhere the author did not
|
|
321
|
-
* put its endpoints.
|
|
297
|
+
* The edge lands on the **source node's** layer rather than the bottom one.
|
|
322
298
|
*/
|
|
323
299
|
declare function commitEdgeToScene(edge: PendingEdge, ctx: InvocationCtx): void;
|
|
324
300
|
/**
|
|
325
301
|
* The `diagram.connect` action: an ongoing drag whose preview is an ephemeral
|
|
326
302
|
* edge and whose commit is one op batch.
|
|
327
|
-
*
|
|
328
|
-
* A factory rather than a singleton because every input it needs — which nodes
|
|
329
|
-
* are droppable, what counts as a legal pair, how an edge node is shaped — is
|
|
330
|
-
* the consumer's, and this package has no scene at module scope. Same reason
|
|
331
|
-
* `edgeDerivePath` and `diagramShape` are factories.
|
|
332
303
|
*/
|
|
333
304
|
declare function createConnectAction<TPose>(opts: ConnectActionOptions<TPose>): Action;
|
|
334
305
|
|
|
@@ -336,17 +307,14 @@ declare function createConnectAction<TPose>(opts: ConnectActionOptions<TPose>):
|
|
|
336
307
|
* The plugin as a `Contribution` bundle — one object a consumer hands to
|
|
337
308
|
* `<SceneCanvas ambient={…}>`.
|
|
338
309
|
*
|
|
339
|
-
* **Ambient, not a tool.**
|
|
340
|
-
*
|
|
341
|
-
*
|
|
342
|
-
* live for a press the port layer's affordance claimed, and dormant otherwise.
|
|
310
|
+
* **Ambient, not a tool.** A port is grabbable whatever tool is active:
|
|
311
|
+
* `claimed` makes the bundle live for a press the port layer's affordance
|
|
312
|
+
* claimed, and dormant otherwise.
|
|
343
313
|
*
|
|
344
314
|
* **The layer is not in here, on purpose.** `Contribution.overlay` is painted
|
|
345
315
|
* and never hit-tested — only `CanvasExtensionApi.registerLayer` gets a
|
|
346
|
-
* `hitTest` call
|
|
347
|
-
*
|
|
348
|
-
* from. {@link diagramPorts} hands back the bundle and the layer together so
|
|
349
|
-
* the two cannot be wired half-way.
|
|
316
|
+
* `hitTest` call — so the port layer as an overlay would paint every port and
|
|
317
|
+
* make none of them grabbable. {@link diagramPorts} hands back both.
|
|
350
318
|
*/
|
|
351
319
|
|
|
352
320
|
/** The connect action's options and the port affordance's, in one bag. */
|
|
@@ -367,6 +335,25 @@ declare function diagramPorts<TPose>(opts: DiagramContributionOptions<TPose>): {
|
|
|
367
335
|
contribution: Contribution;
|
|
368
336
|
};
|
|
369
337
|
|
|
338
|
+
/** How a self-edge with no ports named leaves its node and comes back. */
|
|
339
|
+
interface SelfLoop {
|
|
340
|
+
from: Port;
|
|
341
|
+
to: Port;
|
|
342
|
+
/** A point outside the node, off the corner between the two sides. */
|
|
343
|
+
via: Vec2;
|
|
344
|
+
}
|
|
345
|
+
/**
|
|
346
|
+
* The route a self-edge takes when neither end names a port: out by one side
|
|
347
|
+
* and back by the next one round, past a point `standoff` clear of both.
|
|
348
|
+
*
|
|
349
|
+
* Both ends of such an edge aim at their own node's center, so every port
|
|
350
|
+
* faces it equally, both pick the same one, and the edge has no length. The
|
|
351
|
+
* sides are taken by where they face on the page, east and then north, so the
|
|
352
|
+
* loop sits at the same corner of every node however its ports are listed.
|
|
353
|
+
* `null` where the node has no two ports facing different ways.
|
|
354
|
+
*/
|
|
355
|
+
declare function selfLoop(ports: readonly Port[], standoff: number): SelfLoop | null;
|
|
356
|
+
|
|
370
357
|
/**
|
|
371
358
|
* A label on an edge: an ordinary leaf node that derives its *pose* from the
|
|
372
359
|
* route it sits on.
|
|
@@ -452,7 +439,8 @@ declare function diagramAnchorOf(node: {
|
|
|
452
439
|
interface GroupPoseOptions<TPose> {
|
|
453
440
|
geometry?: PoseDescriptor<TPose>;
|
|
454
441
|
}
|
|
455
|
-
|
|
442
|
+
/** A `derivePose` function as the scene calls it: the node, then what it depends on, in `dependsOn` order. */
|
|
443
|
+
type DiagramDerivePose<TPose> = (node: {
|
|
456
444
|
pose: TPose;
|
|
457
445
|
data: unknown;
|
|
458
446
|
}, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
|
|
@@ -461,19 +449,20 @@ type DerivePose<TPose> = (node: {
|
|
|
461
449
|
* grown by the trait's inset. `null` — the authored pose stands — when the node
|
|
462
450
|
* carries no group trait or every member is gone.
|
|
463
451
|
*/
|
|
464
|
-
declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>):
|
|
452
|
+
declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
|
|
465
453
|
/**
|
|
466
454
|
* A `derivePose` that keeps a node at a point on its dependency's bounds.
|
|
467
455
|
* `null` when the node carries no anchor trait or the dependency is gone.
|
|
468
456
|
*/
|
|
469
|
-
declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>):
|
|
457
|
+
declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
|
|
470
458
|
/** Registry key for {@link GROUP_DERIVE_POSE}. */
|
|
471
459
|
declare const DIAGRAM_GROUP = "diagram:group";
|
|
472
460
|
/** Registry key for {@link ANCHOR_DERIVE_POSE}. */
|
|
473
461
|
declare const DIAGRAM_ANCHOR = "diagram:anchor";
|
|
474
|
-
/** The default
|
|
475
|
-
declare const GROUP_DERIVE_POSE:
|
|
476
|
-
|
|
462
|
+
/** The default group derivation, a stable reference so `toJSON` can find its key. */
|
|
463
|
+
declare const GROUP_DERIVE_POSE: DiagramDerivePose<unknown>;
|
|
464
|
+
/** The default anchor derivation, a stable reference for the same reason. */
|
|
465
|
+
declare const ANCHOR_DERIVE_POSE: DiagramDerivePose<unknown>;
|
|
477
466
|
|
|
478
467
|
/**
|
|
479
468
|
* `diagramScene` — a laid-out diagram from plain `{ nodes, edges }`.
|
|
@@ -484,6 +473,7 @@ declare const ANCHOR_DERIVE_POSE: DerivePose<unknown>;
|
|
|
484
473
|
* the same answer in node and in a browser.
|
|
485
474
|
*/
|
|
486
475
|
|
|
476
|
+
/** One node of a {@link DiagramData}: its rows of text, and optionally its outline, ports, size, and starting place. */
|
|
487
477
|
interface DataNode {
|
|
488
478
|
id: string;
|
|
489
479
|
/** Shorthand for one `label` row per line. Ignored when `rows` is given. */
|
|
@@ -509,6 +499,7 @@ interface DataNode {
|
|
|
509
499
|
/** Default `DiagramSceneOptions.verticalAlign`. */
|
|
510
500
|
verticalAlign?: BodySpec['verticalAlign'];
|
|
511
501
|
}
|
|
502
|
+
/** One edge of a {@link DiagramData}, between two nodes or groups by id. */
|
|
512
503
|
interface DataEdge {
|
|
513
504
|
/** A node's id, or a group's: an edge naming a group meets its box. */
|
|
514
505
|
from: string;
|
|
@@ -521,7 +512,7 @@ interface DataEdge {
|
|
|
521
512
|
/** Where along the edge the label sits. Default `DiagramSceneOptions.labelPlacement`. */
|
|
522
513
|
labelPlacement?: DiagramLabel;
|
|
523
514
|
/** Default `DiagramSceneOptions.router`. */
|
|
524
|
-
router?:
|
|
515
|
+
router?: DiagramRouter;
|
|
525
516
|
/** World points the route passes through. Layout does not move them. */
|
|
526
517
|
waypoints?: readonly Vec2$1[];
|
|
527
518
|
}
|
|
@@ -529,8 +520,9 @@ interface DataEdge {
|
|
|
529
520
|
interface DataGroup {
|
|
530
521
|
/** Shares one namespace with node ids. */
|
|
531
522
|
id: string;
|
|
532
|
-
/** Node ids
|
|
533
|
-
*
|
|
523
|
+
/** Node ids, and the ids of groups nested in this one. A node or group a
|
|
524
|
+
* later group also names stays in this one; an id that is neither is
|
|
525
|
+
* ignored, and so is one that would put a group inside itself. */
|
|
534
526
|
members: readonly string[];
|
|
535
527
|
/** Drawn inside the box, above its members. */
|
|
536
528
|
label?: string;
|
|
@@ -538,14 +530,16 @@ interface DataGroup {
|
|
|
538
530
|
* `DiagramSceneOptions.groupPadding`. */
|
|
539
531
|
padding?: number;
|
|
540
532
|
}
|
|
533
|
+
/** A diagram as plain data, the input to `diagramScene`. */
|
|
541
534
|
interface DiagramData {
|
|
542
535
|
nodes: readonly DataNode[];
|
|
543
536
|
edges: readonly DataEdge[];
|
|
544
|
-
/**
|
|
545
|
-
* each group's members together; `
|
|
546
|
-
*
|
|
537
|
+
/** A group may be a member of another. `layered`, `tree`, and `force` keep
|
|
538
|
+
* each group's members together; `'none'` ignores groups but still draws
|
|
539
|
+
* them. */
|
|
547
540
|
groups?: readonly DataGroup[];
|
|
548
541
|
}
|
|
542
|
+
/** The colors and outline a node is drawn with. */
|
|
549
543
|
interface NodeStyle {
|
|
550
544
|
fill: string;
|
|
551
545
|
stroke: string;
|
|
@@ -553,6 +547,7 @@ interface NodeStyle {
|
|
|
553
547
|
strokeWidth?: number;
|
|
554
548
|
dash?: number[];
|
|
555
549
|
}
|
|
550
|
+
/** The stroke, markers, and label color an edge is drawn with. */
|
|
556
551
|
interface EdgeStyle {
|
|
557
552
|
stroke: string;
|
|
558
553
|
width?: number;
|
|
@@ -564,12 +559,15 @@ interface EdgeStyle {
|
|
|
564
559
|
/** Default `stroke`. */
|
|
565
560
|
label?: string;
|
|
566
561
|
}
|
|
567
|
-
|
|
568
|
-
type
|
|
562
|
+
/** How an edge is drawn between its ends. */
|
|
563
|
+
type DiagramRouter = 'straight' | 'bezier' | 'orthogonal';
|
|
564
|
+
/** The face a diagram node's text is set in. */
|
|
565
|
+
type DiagramTextStyle = {
|
|
569
566
|
fontFamily: string;
|
|
570
567
|
fontSize: number;
|
|
571
568
|
fontWeight?: number;
|
|
572
569
|
};
|
|
570
|
+
/** The `data` of a scene node `diagramScene` makes: its diagram role, and what it paints. */
|
|
573
571
|
interface DiagramSceneData {
|
|
574
572
|
diagram?: DiagramNode | DiagramEdge | {
|
|
575
573
|
label: DiagramLabel;
|
|
@@ -577,13 +575,17 @@ interface DiagramSceneData {
|
|
|
577
575
|
anchor: DiagramAnchor;
|
|
578
576
|
};
|
|
579
577
|
fill?: {
|
|
580
|
-
|
|
578
|
+
paint: {
|
|
579
|
+
color: string;
|
|
580
|
+
};
|
|
581
581
|
};
|
|
582
582
|
stroke?: Stroke;
|
|
583
583
|
text?: string;
|
|
584
|
-
style?:
|
|
584
|
+
style?: DiagramTextStyle;
|
|
585
585
|
}
|
|
586
|
+
/** A scene node spec, as `diagramScene` returns them. */
|
|
586
587
|
type DiagramSpec = AddNodeSpec<DiagramSceneData, 'main', RectPose>;
|
|
588
|
+
/** How `diagramScene` lays out, routes, and styles a {@link DiagramData}. */
|
|
587
589
|
interface DiagramSceneOptions {
|
|
588
590
|
/** A layout by name, or any `LayoutFn`. Default `'layered'`. `'none'`
|
|
589
591
|
* leaves every node at its `at`. */
|
|
@@ -591,7 +593,7 @@ interface DiagramSceneOptions {
|
|
|
591
593
|
/** Merged over `{ order: 'barycenter' }`. */
|
|
592
594
|
layoutOptions?: LayoutOptions;
|
|
593
595
|
/** Default `'bezier'`. */
|
|
594
|
-
router?:
|
|
596
|
+
router?: DiagramRouter;
|
|
595
597
|
/** The text style rows fall back on. Default 12px sans-serif. */
|
|
596
598
|
font?: {
|
|
597
599
|
fontFamily: string;
|
|
@@ -619,6 +621,7 @@ interface DiagramSceneOptions {
|
|
|
619
621
|
groupStyle?: (group: DataGroup) => NodeStyle;
|
|
620
622
|
edgeStyle?: (edge: DataEdge) => EdgeStyle;
|
|
621
623
|
}
|
|
624
|
+
/** The scene node id `diagramScene` gives an edge, built from its ends, ports, and label. */
|
|
622
625
|
declare const edgeIdOf: (e: DataEdge) => string;
|
|
623
626
|
/** Every spec carries an id — a node's own, `<id>/<k>` for its text,
|
|
624
627
|
* `<edge id>/label`, a group's own and `<group id>/label` — so a later call's
|
|
@@ -658,21 +661,13 @@ interface ForceProducerOptions<TPose> extends ForceOptions {
|
|
|
658
661
|
/**
|
|
659
662
|
* A relaxation, one tick a frame, done when the graph stops moving.
|
|
660
663
|
*
|
|
661
|
-
* Motion ends long before alpha cools
|
|
662
|
-
*
|
|
663
|
-
*
|
|
664
|
-
* comes first: `restTicks` ticks in a row with no node moving `restDistance`,
|
|
665
|
-
* or the cooling schedule running out. Nothing rests while a node is held.
|
|
664
|
+
* Motion ends long before alpha cools, so it finishes on whichever comes
|
|
665
|
+
* first: `restTicks` ticks in a row with no node moving `restDistance`, or the
|
|
666
|
+
* cooling schedule running out. Nothing rests while a node is held.
|
|
666
667
|
*
|
|
667
|
-
*
|
|
668
|
-
*
|
|
669
|
-
*
|
|
670
|
-
* It does **not** re-anchor the way the one-shot does. That translation exists
|
|
671
|
-
* so a single 300-tick jump does not move the diagram off where the author left
|
|
672
|
-
* it; a live run cannot jump, every frame being one step from the last, and
|
|
673
|
-
* gravity holds the graph around the centroid it was seeded from. Re-anchoring
|
|
674
|
-
* per frame would also fight a drag: the anchor is measured from where the
|
|
675
|
-
* nodes were, and a pinned node is deliberately somewhere else.
|
|
668
|
+
* It does **not** re-anchor the way the one-shot `force` does. Re-anchoring
|
|
669
|
+
* per frame would fight a drag: the anchor is measured from where the nodes
|
|
670
|
+
* were, and a pinned node is deliberately somewhere else.
|
|
676
671
|
*/
|
|
677
672
|
declare function forceProducer<TPose>(graph: Graph, opts?: ForceProducerOptions<TPose>): LiveLayoutProducer<TPose>;
|
|
678
673
|
/** Options for {@link easedProducer}. */
|
|
@@ -744,12 +739,8 @@ declare const EASED_LAYOUTS: Readonly<Record<string, LayoutFn>>;
|
|
|
744
739
|
|
|
745
740
|
/**
|
|
746
741
|
* Running a layout against a scene: `LAYOUTS`, one batch of pose writes, and
|
|
747
|
-
* the action that reaches both.
|
|
748
|
-
*
|
|
749
|
-
* The split is the point. A layout is a pure function of the graph and is
|
|
750
|
-
* tested as one; `applyLayout` is the only thing that touches a scene, and it
|
|
751
|
-
* writes every move inside a single `scene.batch`, so a re-layout is one undo
|
|
752
|
-
* entry rather than one per node.
|
|
742
|
+
* the action that reaches both. A layout is a pure function of the graph;
|
|
743
|
+
* `applyLayout` is the only thing that touches a scene.
|
|
753
744
|
*/
|
|
754
745
|
|
|
755
746
|
/** The layouts this package ships. A consumer's own go in the same shape. */
|
|
@@ -771,18 +762,16 @@ interface ApplyLayoutOptions<TPose> {
|
|
|
771
762
|
* descriptor knows how to move one.
|
|
772
763
|
*
|
|
773
764
|
* A participant that is a container takes its whole subtree along. `setPose`
|
|
774
|
-
* does not cascade — poses are absolute
|
|
775
|
-
* out from under its own label rows with every test green.
|
|
765
|
+
* does not cascade — poses are absolute.
|
|
776
766
|
*/
|
|
777
767
|
declare function applyLayout<TPose>(scene: Scene<unknown, string, TPose>, result: LayoutResult, opts?: ApplyLayoutOptions<TPose>): number;
|
|
778
768
|
/**
|
|
779
769
|
* The poses a layout result implies, without writing any of them: each moved
|
|
780
770
|
* node translated to its new top-left, and its subtree translated with it.
|
|
781
771
|
*
|
|
782
|
-
*
|
|
783
|
-
*
|
|
784
|
-
*
|
|
785
|
-
* never changes, so a frame's answer does not depend on the frame before it.
|
|
772
|
+
* The translation is measured from the node's document pose, which a live run
|
|
773
|
+
* in flight never changes, so a frame's answer does not depend on the frame
|
|
774
|
+
* before it.
|
|
786
775
|
*/
|
|
787
776
|
declare function layoutPoses<TPose>(scene: Scene<unknown, string, TPose>, result: LayoutResult, geometry?: PoseDescriptor<TPose>): Map<string, TPose>;
|
|
788
777
|
/** The default action id. */
|
|
@@ -806,18 +795,11 @@ interface LayoutActionOptions<TPose> {
|
|
|
806
795
|
}
|
|
807
796
|
/**
|
|
808
797
|
* `diagram.layout` — rebuild the graph, run a layout, write the result.
|
|
809
|
-
*
|
|
810
|
-
* A factory rather than a singleton for the reason every other entry point in
|
|
811
|
-
* this package is one: which nodes are in the diagram is the consumer's, and
|
|
812
|
-
* this package has no scene at module scope.
|
|
813
798
|
*/
|
|
814
799
|
declare function createLayoutAction<TPose>(opts: LayoutActionOptions<TPose>): Action;
|
|
815
800
|
|
|
816
801
|
/**
|
|
817
802
|
* The port affordance, composed into a layer and pointed at a scene.
|
|
818
|
-
*
|
|
819
|
-
* Two conveniences over {@link createPortAffordance}, both of which encode a
|
|
820
|
-
* rule that is easy to get wrong rather than merely saving a line.
|
|
821
803
|
*/
|
|
822
804
|
|
|
823
805
|
/** The minimum a participant source needs from a scene. Narrower than `Scene`
|
|
@@ -843,12 +825,9 @@ interface ParticipantScene<TPose> {
|
|
|
843
825
|
*
|
|
844
826
|
* `effectivePose`, not `node.pose`: an override is what a gesture is currently
|
|
845
827
|
* showing, and a port that answers from the document pose while its node is
|
|
846
|
-
* mid-drag sits somewhere the user can see the node is not.
|
|
847
|
-
* participant trait cost one reader call each and contribute no regions.
|
|
828
|
+
* mid-drag sits somewhere the user can see the node is not.
|
|
848
829
|
*
|
|
849
|
-
* One source answers both the ports and the graph
|
|
850
|
-
* `ParticipantSource` that also carries `dependsOn`, which is where an edge's
|
|
851
|
-
* two endpoints live.
|
|
830
|
+
* One source answers both the ports and the graph.
|
|
852
831
|
*/
|
|
853
832
|
declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): GraphSource<TPose>;
|
|
854
833
|
/**
|
|
@@ -856,27 +835,18 @@ declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): Graph
|
|
|
856
835
|
* attach route that is hit-tested. Handing this to `SceneCanvas`'s `layers`
|
|
857
836
|
* prop, or to a `Contribution.overlay`, paints the ports and makes none of them
|
|
858
837
|
* grabbable.
|
|
859
|
-
*
|
|
860
|
-
* The cast is `composeAffordanceLayer` typing its data slot as `ChromeState`
|
|
861
|
-
* while the layer registry takes `RenderLayer<unknown>`; both are handed the
|
|
862
|
-
* same live `CanvasHelpers` envelope at runtime.
|
|
863
838
|
*/
|
|
864
839
|
declare function portLayer<TPose>(participants: ParticipantSource<TPose>, opts?: PortAffordanceOptions<TPose>): RenderLayer<unknown> & {
|
|
865
840
|
hitTest: NonNullable<RenderLayer<unknown>['hitTest']>;
|
|
866
841
|
};
|
|
867
842
|
|
|
868
843
|
/**
|
|
869
|
-
* The painter for a node whose trait names an `outline`.
|
|
870
|
-
*
|
|
871
|
-
* Registered the way every other trait's renderer is — a `NodeShapeEntry` with
|
|
872
|
-
* a `matches` over the node's data — so a diagram body is picked, clipped and
|
|
873
|
-
* area-selected by the same walk as everything else, and a participant that
|
|
844
|
+
* The painter for a node whose trait names an `outline`. A participant that
|
|
874
845
|
* already had a look of its own (a text block, an image, a path) keeps it by
|
|
875
846
|
* naming no outline at all.
|
|
876
847
|
*
|
|
877
848
|
* Rows are **not** painted here. A built body's rows are ordinary scene nodes
|
|
878
|
-
* under the container, so the kit's own text painter draws them
|
|
879
|
-
* editing, selection and styling work on them without a special case.
|
|
849
|
+
* under the container, so the kit's own text painter draws them.
|
|
880
850
|
*/
|
|
881
851
|
|
|
882
852
|
/** Options for {@link diagramShape} and {@link registerDiagramShape}. */
|
|
@@ -889,7 +859,7 @@ interface DiagramShapeOptions<TPose> {
|
|
|
889
859
|
/** Reads the box the outline is built in. Default `RECT_POSE_DESCRIPTOR`. */
|
|
890
860
|
geometry?: PoseDescriptor<TPose>;
|
|
891
861
|
/** Painted when the node's data declares neither. */
|
|
892
|
-
defaultFill?:
|
|
862
|
+
defaultFill?: Fill | null;
|
|
893
863
|
defaultStroke?: Stroke | null;
|
|
894
864
|
}
|
|
895
865
|
/** The entry, for a consumer composing their own painter list. */
|
|
@@ -907,6 +877,7 @@ interface NodeMove {
|
|
|
907
877
|
x: number;
|
|
908
878
|
y: number;
|
|
909
879
|
}
|
|
880
|
+
/** Props for `DiagramView`. */
|
|
910
881
|
interface DiagramViewProps {
|
|
911
882
|
/** Every spec needs an id, which `diagramScene` gives them. A new array is
|
|
912
883
|
* reconciled into the scene the view already holds, so the view, the
|
|
@@ -955,7 +926,7 @@ interface DiagramViewProps {
|
|
|
955
926
|
* Default 16. */
|
|
956
927
|
fitPadding?: number;
|
|
957
928
|
/** What the canvas paints behind the diagram. Unset, it is transparent. */
|
|
958
|
-
background?:
|
|
929
|
+
background?: Paint;
|
|
959
930
|
/** The view, controlled. Set it and the initial fit is skipped; pair it
|
|
960
931
|
* with `onViewChange` or panning does nothing. */
|
|
961
932
|
view?: View;
|
|
@@ -984,4 +955,4 @@ declare const DiagramView: react.ForwardRefExoticComponent<DiagramViewProps & re
|
|
|
984
955
|
* `<SceneCanvas onClick>`. */
|
|
985
956
|
declare function useMirroredSelection(selection: Pick<SelectionApi, 'get' | 'set'>, selected: string | null | undefined, onSelect: ((id: string | null) => void) | undefined): () => void;
|
|
986
957
|
|
|
987
|
-
export { ANCHOR_DERIVE_POSE, type ApplyLayoutOptions, BodySpec, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, type DataEdge, type DataGroup, type DataNode, type DiagramAnchor, type DiagramContributionOptions, type DiagramData, type DiagramEdge, DiagramGroup, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, DiagramView, type DiagramViewApi, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, Graph, GraphSource, type GroupPoseOptions, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MeasureRowText, type NodeMove, type NodeStyle, Outline, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, PortAnchor, type PortScratch, PortSpec, PortsOptions, ROUTERS, type RouteRequest, type Router
|
|
958
|
+
export { ANCHOR_DERIVE_POSE, type ApplyLayoutOptions, BodySpec, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, type DataEdge, type DataGroup, type DataNode, type DiagramAnchor, type DiagramContributionOptions, type DiagramData, type DiagramDerivePose, type DiagramEdge, DiagramGroup, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramRouter, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, type DiagramTextStyle, DiagramView, type DiagramViewApi, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, Graph, GraphSource, type GroupPoseOptions, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, MeasureRowText, type NodeMove, type NodeStyle, Outline, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, PortAnchor, type PortScratch, PortSpec, PortsOptions, ROUTERS, type RouteRequest, type Router, Row, type SelfLoop, type UseLiveLayoutOptions, anchorDerivePose, applyLayout, bezier, 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 };
|