@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.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 {
|
|
3
|
-
import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, CommandFill, CommandStroke, CursorSpec, Affordance, InvocationCtx, Stroke, GestureBinding, Action, Contribution, RenderLayer, MarkerRef, AddNodeSpec, RectPose, Scene,
|
|
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, j as LayoutDirection } from './layout.entry-BUkiRKuX.js';
|
|
2
|
+
export { k as BodyFloor, l as BodyNodeSpec, m as Bounds, n as BuildBodyOptions, o as BuildGraphOptions, C as COMPASS, p as DEFAULT_GROUP_INSET, q as DEFAULT_NODE_GAP, r as DEFAULT_PORTS, s as DEFAULT_RANK_GAP, t as DIAGRAM_TRAIT_KEY, u as DiagramNodeEntry, v as ForceBody, w as ForceRelaxation, x as Forest, y as GraphEdge, z as GraphGroup, A as GraphNode, E as GraphNodeLike, H as GroupInset, I as LayoutAxes, 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-BUkiRKuX.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,20 @@ 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
|
-
* can route by the same one. Sampled rather than emitted as curve commands so
|
|
79
|
-
* every router returns the same thing; `edgePath` is free to emit curves later
|
|
80
|
-
* without changing the contract.
|
|
71
|
+
* against the receiving one's, and passes each waypoint without a corner.
|
|
72
|
+
* Sampled rather than emitted as curve commands so every router returns the
|
|
73
|
+
* same thing.
|
|
81
74
|
*/
|
|
82
|
-
declare const bezier: Router
|
|
75
|
+
declare const bezier: Router;
|
|
83
76
|
/** The routers this package ships. A consumer's own go in the same shape. */
|
|
84
|
-
declare const ROUTERS: Readonly<Record<string, Router
|
|
77
|
+
declare const ROUTERS: Readonly<Record<string, Router>>;
|
|
85
78
|
/** The edge trait on a node's data, or `null`. */
|
|
86
79
|
declare function diagramEdgeOf(node: {
|
|
87
80
|
data: unknown;
|
|
@@ -91,14 +84,13 @@ declare function diagramEdgeOf(node: {
|
|
|
91
84
|
* other end most directly.
|
|
92
85
|
*
|
|
93
86
|
* "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.
|
|
87
|
+
* closer in a straight line than the one pointing at the target.
|
|
96
88
|
*/
|
|
97
89
|
declare function resolveEnd<TPose>(end: EdgeEnd, dep: DerivedDep<TPose>, toward: Vec2, opts: PortsOptions<TPose>, allPorts: (d: DerivedDep<TPose>) => Port[]): Port | undefined;
|
|
98
90
|
/** Options for {@link edgeDerivePath}. */
|
|
99
91
|
interface EdgeRouteOptions<TPose> extends PortsOptions<TPose> {
|
|
100
92
|
/** Routers by key. Defaults to {@link ROUTERS}. */
|
|
101
|
-
routers?: Readonly<Record<string, Router
|
|
93
|
+
routers?: Readonly<Record<string, Router>>;
|
|
102
94
|
/** How far outside its node a self-edge with no ports named turns, in
|
|
103
95
|
* world units. Defaults to half the node's shorter side. */
|
|
104
96
|
selfLoopStandoff?: number;
|
|
@@ -111,9 +103,7 @@ interface EdgeRouteOptions<TPose> extends PortsOptions<TPose> {
|
|
|
111
103
|
* router is handed that rule's point outside the node as one.
|
|
112
104
|
*
|
|
113
105
|
* Returns `null` — nothing to draw — when the node is not an edge, when either
|
|
114
|
-
* dependency is gone, or when an endpoint offers no ports at all.
|
|
115
|
-
* edge painting a line to the origin is worse than a dangling edge painting
|
|
116
|
-
* nothing.
|
|
106
|
+
* dependency is gone, or when an endpoint offers no ports at all.
|
|
117
107
|
*/
|
|
118
108
|
declare function edgeDerivePath<TPose>(opts?: EdgeRouteOptions<TPose>): (node: {
|
|
119
109
|
data: unknown;
|
|
@@ -135,10 +125,9 @@ declare function withDiagramRegistry<TPose, TData = unknown, TLayer extends stri
|
|
|
135
125
|
*
|
|
136
126
|
* A port is declared as an `AffordanceRegion`, so the kit's own region walk
|
|
137
127
|
* supplies the hit-test, the screen-pixel hit radius, the cursor and the
|
|
138
|
-
* exclusive claim that keeps a port drag out of the select tool's hands.
|
|
139
|
-
*
|
|
140
|
-
*
|
|
141
|
-
* whatever tool happens to be active.
|
|
128
|
+
* exclusive claim that keeps a port drag out of the select tool's hands. The
|
|
129
|
+
* walk runs on every pointerdown before any tool sees the event, so a port
|
|
130
|
+
* answers whatever tool happens to be active.
|
|
142
131
|
*
|
|
143
132
|
* Two things about this are easy to get wrong, and both fail silently.
|
|
144
133
|
*
|
|
@@ -217,26 +206,17 @@ declare function createPortAffordance<TPose>(participants: ParticipantSource<TPo
|
|
|
217
206
|
*
|
|
218
207
|
* Connect is an ordinary drag binding, not a mode and not a tool of its own:
|
|
219
208
|
* the binding is gated on a press landing on a port affordance, so a connect
|
|
220
|
-
* starts from whatever tool happens to be active
|
|
221
|
-
*
|
|
222
|
-
* through to the tool that wants it instead of being swallowed here.
|
|
209
|
+
* starts from whatever tool happens to be active, and a press that is *not* on
|
|
210
|
+
* a port falls through to the tool that wants it.
|
|
223
211
|
*
|
|
224
|
-
*
|
|
225
|
-
*
|
|
212
|
+
* *Which presses start a connect* is routing, and belongs to the binding spec.
|
|
213
|
+
* *Which ports a live connect may land on* cannot be routing — the dispatcher
|
|
214
|
+
* never re-reads the affordance under a moving pointer — so `canConnect`
|
|
215
|
+
* filters the candidate set: the preview will not snap to an illegal port and
|
|
216
|
+
* a release over it commits nothing.
|
|
226
217
|
*
|
|
227
|
-
*
|
|
228
|
-
*
|
|
229
|
-
* the action body re-checks what was pressed.
|
|
230
|
-
* - *Which ports a live connect may land on* cannot be routing — the
|
|
231
|
-
* dispatcher never re-reads the affordance under a moving pointer, so a
|
|
232
|
-
* spec has no vocabulary for it. It is decided by `canConnect` filtering
|
|
233
|
-
* the **candidate set**: an illegal port is never a candidate, so the
|
|
234
|
-
* preview will not snap to it and a release over it commits nothing. That
|
|
235
|
-
* is a narrower thing than an action body that inspects a hit and bails.
|
|
236
|
-
*
|
|
237
|
-
* One resolver answers both the live preview and the commit, for the reason
|
|
238
|
-
* `insertAction` does the same: a preview computed separately from the commit
|
|
239
|
-
* is a preview that can lie about what releasing will do.
|
|
218
|
+
* One resolver answers both the live preview and the commit, so the preview
|
|
219
|
+
* cannot lie about what releasing will do.
|
|
240
220
|
*/
|
|
241
221
|
|
|
242
222
|
/** The default action id, and what {@link connectBinding} points at. */
|
|
@@ -255,11 +235,8 @@ interface PendingEdge {
|
|
|
255
235
|
* The shipped policy: a port may not join itself, and two ports that both
|
|
256
236
|
* declare a `type` must declare the same one.
|
|
257
237
|
*
|
|
258
|
-
* A port with no type joins anything
|
|
259
|
-
*
|
|
260
|
-
* Two ports on the *same node* may be joined: a self-edge between two different
|
|
261
|
-
* ports is meaningful in a state machine, and refusing it here would be policy
|
|
262
|
-
* masquerading as a rule.
|
|
238
|
+
* A port with no type joins anything. Two different ports on the *same node*
|
|
239
|
+
* may be joined: a self-edge is meaningful in a state machine.
|
|
263
240
|
*/
|
|
264
241
|
declare const defaultCanConnect: CanConnect;
|
|
265
242
|
/** Options for {@link createConnectAction}. Only `participants` is required. */
|
|
@@ -279,14 +256,12 @@ interface ConnectActionOptions<TPose> {
|
|
|
279
256
|
/** Registry key the new edge names, and the router the preview draws with.
|
|
280
257
|
* Default `'straight'`. */
|
|
281
258
|
router?: string;
|
|
282
|
-
routers?: Readonly<Record<string, Router
|
|
259
|
+
routers?: Readonly<Record<string, Router>>;
|
|
283
260
|
/**
|
|
284
261
|
* Mints and commits the edge. Called once, on release over a valid port.
|
|
285
262
|
*
|
|
286
|
-
* Defaults to {@link commitEdgeToScene} against `deps.scene
|
|
287
|
-
*
|
|
288
|
-
* overrides the kit's `insert` dep — to choose the edge node's data, its
|
|
289
|
-
* layer, or its stroke.
|
|
263
|
+
* Defaults to {@link commitEdgeToScene} against `deps.scene`. Override it to
|
|
264
|
+
* choose the edge node's data, its layer, or its stroke.
|
|
290
265
|
*/
|
|
291
266
|
commit?: (edge: PendingEdge, ctx: InvocationCtx) => void;
|
|
292
267
|
}
|
|
@@ -298,8 +273,7 @@ declare const DEFAULT_EDGE_STROKE: Stroke;
|
|
|
298
273
|
* layer's own chrome.
|
|
299
274
|
*
|
|
300
275
|
* The string form of `target` rather than a predicate, because it ranks higher
|
|
301
|
-
* in specificity
|
|
302
|
-
* it, so no tool needs a predicate of its own to keep out of the way.
|
|
276
|
+
* in specificity: a bare `{ kind: 'drag' }` on the select tool cannot outrank it.
|
|
303
277
|
*/
|
|
304
278
|
declare function connectBinding(actionId?: string): GestureBinding;
|
|
305
279
|
/** The action id that absorbs a press on a port. */
|
|
@@ -312,8 +286,7 @@ declare const GRAB_PORT_ACTION_ID = "diagram.grabPort";
|
|
|
312
286
|
* claim bars every binding whose target does not consult the affordance. So a
|
|
313
287
|
* bundle that binds only `drag` leaves the pointerdown with nowhere to go, and
|
|
314
288
|
* the dispatcher drops the press — the drag it would have grown into never
|
|
315
|
-
* happens.
|
|
316
|
-
* press on a port should not pick or deselect the node underneath it.
|
|
289
|
+
* happens.
|
|
317
290
|
*/
|
|
318
291
|
declare function grabPortAction(id?: string): Action;
|
|
319
292
|
/** The two bindings that keep a port's claim from dropping the press. */
|
|
@@ -322,20 +295,12 @@ declare function grabPortBindings(actionId?: string): GestureBinding[];
|
|
|
322
295
|
* The default commit: one leaf node carrying the edge trait, added to
|
|
323
296
|
* `deps.scene`. One `add` is one history entry, so the edge undoes in one.
|
|
324
297
|
*
|
|
325
|
-
* The edge lands on the **source node's** layer rather than the bottom one
|
|
326
|
-
* edge between two nodes on a `wires` layer belongs on `wires`, and picking the
|
|
327
|
-
* first layer in the stack would quietly move it somewhere the author did not
|
|
328
|
-
* put its endpoints.
|
|
298
|
+
* The edge lands on the **source node's** layer rather than the bottom one.
|
|
329
299
|
*/
|
|
330
300
|
declare function commitEdgeToScene(edge: PendingEdge, ctx: InvocationCtx): void;
|
|
331
301
|
/**
|
|
332
302
|
* The `diagram.connect` action: an ongoing drag whose preview is an ephemeral
|
|
333
303
|
* edge and whose commit is one op batch.
|
|
334
|
-
*
|
|
335
|
-
* A factory rather than a singleton because every input it needs — which nodes
|
|
336
|
-
* are droppable, what counts as a legal pair, how an edge node is shaped — is
|
|
337
|
-
* the consumer's, and this package has no scene at module scope. Same reason
|
|
338
|
-
* `edgeDerivePath` and `diagramShape` are factories.
|
|
339
304
|
*/
|
|
340
305
|
declare function createConnectAction<TPose>(opts: ConnectActionOptions<TPose>): Action;
|
|
341
306
|
|
|
@@ -343,17 +308,14 @@ declare function createConnectAction<TPose>(opts: ConnectActionOptions<TPose>):
|
|
|
343
308
|
* The plugin as a `Contribution` bundle — one object a consumer hands to
|
|
344
309
|
* `<SceneCanvas ambient={…}>`.
|
|
345
310
|
*
|
|
346
|
-
* **Ambient, not a tool.**
|
|
347
|
-
*
|
|
348
|
-
*
|
|
349
|
-
* live for a press the port layer's affordance claimed, and dormant otherwise.
|
|
311
|
+
* **Ambient, not a tool.** A port is grabbable whatever tool is active:
|
|
312
|
+
* `claimed` makes the bundle live for a press the port layer's affordance
|
|
313
|
+
* claimed, and dormant otherwise.
|
|
350
314
|
*
|
|
351
315
|
* **The layer is not in here, on purpose.** `Contribution.overlay` is painted
|
|
352
316
|
* and never hit-tested — only `CanvasExtensionApi.registerLayer` gets a
|
|
353
|
-
* `hitTest` call
|
|
354
|
-
*
|
|
355
|
-
* from. {@link diagramPorts} hands back the bundle and the layer together so
|
|
356
|
-
* the two cannot be wired half-way.
|
|
317
|
+
* `hitTest` call — so the port layer as an overlay would paint every port and
|
|
318
|
+
* make none of them grabbable. {@link diagramPorts} hands back both.
|
|
357
319
|
*/
|
|
358
320
|
|
|
359
321
|
/** The connect action's options and the port affordance's, in one bag. */
|
|
@@ -408,9 +370,9 @@ interface DiagramLabel {
|
|
|
408
370
|
/** `'start'`, `'mid'` and `'end'` are 0, 0.5 and 1; a number is that
|
|
409
371
|
* fraction of the route's length. */
|
|
410
372
|
at: 'start' | 'mid' | 'end' | number;
|
|
411
|
-
/** World units
|
|
412
|
-
* travel** — above a left-to-right edge. Default 0,
|
|
413
|
-
* on the line. */
|
|
373
|
+
/** World units between the route and the label's near side, to the **left
|
|
374
|
+
* of the direction of travel** — above a left-to-right edge. Default 0,
|
|
375
|
+
* which centers the label on the line. */
|
|
414
376
|
offset?: number;
|
|
415
377
|
}
|
|
416
378
|
/** The label trait on a node's data, or `null`. */
|
|
@@ -478,7 +440,8 @@ declare function diagramAnchorOf(node: {
|
|
|
478
440
|
interface GroupPoseOptions<TPose> {
|
|
479
441
|
geometry?: PoseDescriptor<TPose>;
|
|
480
442
|
}
|
|
481
|
-
|
|
443
|
+
/** A `derivePose` function as the scene calls it: the node, then what it depends on, in `dependsOn` order. */
|
|
444
|
+
type DiagramDerivePose<TPose> = (node: {
|
|
482
445
|
pose: TPose;
|
|
483
446
|
data: unknown;
|
|
484
447
|
}, deps: readonly (DerivedDep<TPose> | undefined)[]) => TPose | null;
|
|
@@ -487,20 +450,33 @@ type DerivePose<TPose> = (node: {
|
|
|
487
450
|
* grown by the trait's inset. `null` — the authored pose stands — when the node
|
|
488
451
|
* carries no group trait or every member is gone.
|
|
489
452
|
*/
|
|
490
|
-
declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>):
|
|
453
|
+
declare function groupDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
|
|
454
|
+
/** A group's box around the union of its members: grown by its inset, and
|
|
455
|
+
* widened evenly to its `minWidth`. */
|
|
456
|
+
declare function boxAround(union: {
|
|
457
|
+
x: number;
|
|
458
|
+
y: number;
|
|
459
|
+
width: number;
|
|
460
|
+
height: number;
|
|
461
|
+
}, group: DiagramGroup): {
|
|
462
|
+
x: number;
|
|
463
|
+
y: number;
|
|
464
|
+
width: number;
|
|
465
|
+
height: number;
|
|
466
|
+
};
|
|
491
467
|
/**
|
|
492
468
|
* A `derivePose` that keeps a node at a point on its dependency's bounds.
|
|
493
469
|
* `null` when the node carries no anchor trait or the dependency is gone.
|
|
494
470
|
*/
|
|
495
|
-
declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>):
|
|
471
|
+
declare function anchorDerivePose<TPose>(opts?: GroupPoseOptions<TPose>): DiagramDerivePose<TPose>;
|
|
496
472
|
/** Registry key for {@link GROUP_DERIVE_POSE}. */
|
|
497
473
|
declare const DIAGRAM_GROUP = "diagram:group";
|
|
498
474
|
/** Registry key for {@link ANCHOR_DERIVE_POSE}. */
|
|
499
475
|
declare const DIAGRAM_ANCHOR = "diagram:anchor";
|
|
500
476
|
/** The default group derivation, a stable reference so `toJSON` can find its key. */
|
|
501
|
-
declare const GROUP_DERIVE_POSE:
|
|
477
|
+
declare const GROUP_DERIVE_POSE: DiagramDerivePose<unknown>;
|
|
502
478
|
/** The default anchor derivation, a stable reference for the same reason. */
|
|
503
|
-
declare const ANCHOR_DERIVE_POSE:
|
|
479
|
+
declare const ANCHOR_DERIVE_POSE: DiagramDerivePose<unknown>;
|
|
504
480
|
|
|
505
481
|
/**
|
|
506
482
|
* `diagramScene` — a laid-out diagram from plain `{ nodes, edges }`.
|
|
@@ -550,7 +526,7 @@ interface DataEdge {
|
|
|
550
526
|
/** Where along the edge the label sits. Default `DiagramSceneOptions.labelPlacement`. */
|
|
551
527
|
labelPlacement?: DiagramLabel;
|
|
552
528
|
/** Default `DiagramSceneOptions.router`. */
|
|
553
|
-
router?:
|
|
529
|
+
router?: DiagramRouter;
|
|
554
530
|
/** World points the route passes through. Layout does not move them. */
|
|
555
531
|
waypoints?: readonly Vec2$1[];
|
|
556
532
|
}
|
|
@@ -597,8 +573,10 @@ interface EdgeStyle {
|
|
|
597
573
|
/** Default `stroke`. */
|
|
598
574
|
label?: string;
|
|
599
575
|
}
|
|
600
|
-
|
|
601
|
-
type
|
|
576
|
+
/** How an edge is drawn between its ends. */
|
|
577
|
+
type DiagramRouter = 'straight' | 'bezier' | 'orthogonal';
|
|
578
|
+
/** The face a diagram node's text is set in. */
|
|
579
|
+
type DiagramTextStyle = {
|
|
602
580
|
fontFamily: string;
|
|
603
581
|
fontSize: number;
|
|
604
582
|
fontWeight?: number;
|
|
@@ -611,11 +589,13 @@ interface DiagramSceneData {
|
|
|
611
589
|
anchor: DiagramAnchor;
|
|
612
590
|
};
|
|
613
591
|
fill?: {
|
|
614
|
-
|
|
592
|
+
paint: {
|
|
593
|
+
color: string;
|
|
594
|
+
};
|
|
615
595
|
};
|
|
616
596
|
stroke?: Stroke;
|
|
617
597
|
text?: string;
|
|
618
|
-
style?:
|
|
598
|
+
style?: DiagramTextStyle;
|
|
619
599
|
}
|
|
620
600
|
/** A scene node spec, as `diagramScene` returns them. */
|
|
621
601
|
type DiagramSpec = AddNodeSpec<DiagramSceneData, 'main', RectPose>;
|
|
@@ -627,7 +607,7 @@ interface DiagramSceneOptions {
|
|
|
627
607
|
/** Merged over `{ order: 'barycenter' }`. */
|
|
628
608
|
layoutOptions?: LayoutOptions;
|
|
629
609
|
/** Default `'bezier'`. */
|
|
630
|
-
router?:
|
|
610
|
+
router?: DiagramRouter;
|
|
631
611
|
/** The text style rows fall back on. Default 12px sans-serif. */
|
|
632
612
|
font?: {
|
|
633
613
|
fontFamily: string;
|
|
@@ -695,21 +675,13 @@ interface ForceProducerOptions<TPose> extends ForceOptions {
|
|
|
695
675
|
/**
|
|
696
676
|
* A relaxation, one tick a frame, done when the graph stops moving.
|
|
697
677
|
*
|
|
698
|
-
* Motion ends long before alpha cools
|
|
699
|
-
*
|
|
700
|
-
*
|
|
701
|
-
* comes first: `restTicks` ticks in a row with no node moving `restDistance`,
|
|
702
|
-
* or the cooling schedule running out. Nothing rests while a node is held.
|
|
703
|
-
*
|
|
704
|
-
* The forces are `forceRelaxation`'s — the same ones the one-shot `force`
|
|
705
|
-
* runs, wound up once here and ticked rather than run to completion.
|
|
678
|
+
* Motion ends long before alpha cools, so it finishes on whichever comes
|
|
679
|
+
* first: `restTicks` ticks in a row with no node moving `restDistance`, or the
|
|
680
|
+
* cooling schedule running out. Nothing rests while a node is held.
|
|
706
681
|
*
|
|
707
|
-
* It does **not** re-anchor the way the one-shot does.
|
|
708
|
-
*
|
|
709
|
-
*
|
|
710
|
-
* gravity holds the graph around the centroid it was seeded from. Re-anchoring
|
|
711
|
-
* per frame would also fight a drag: the anchor is measured from where the
|
|
712
|
-
* nodes were, and a pinned node is deliberately somewhere else.
|
|
682
|
+
* It does **not** re-anchor the way the one-shot `force` does. Re-anchoring
|
|
683
|
+
* per frame would fight a drag: the anchor is measured from where the nodes
|
|
684
|
+
* were, and a pinned node is deliberately somewhere else.
|
|
713
685
|
*/
|
|
714
686
|
declare function forceProducer<TPose>(graph: Graph, opts?: ForceProducerOptions<TPose>): LiveLayoutProducer<TPose>;
|
|
715
687
|
/** Options for {@link easedProducer}. */
|
|
@@ -780,13 +752,61 @@ declare function useLiveLayout<TPose>(opts: UseLiveLayoutOptions<TPose>): LiveLa
|
|
|
780
752
|
declare const EASED_LAYOUTS: Readonly<Record<string, LayoutFn>>;
|
|
781
753
|
|
|
782
754
|
/**
|
|
783
|
-
*
|
|
784
|
-
* the action that reaches both.
|
|
755
|
+
* Routes for a laid-out `layered` diagram.
|
|
785
756
|
*
|
|
786
|
-
*
|
|
787
|
-
*
|
|
788
|
-
*
|
|
789
|
-
*
|
|
757
|
+
* An edge running down the ranks leaves its source by the face toward the
|
|
758
|
+
* next rank and arrives at its target's face toward the last, so it reads
|
|
759
|
+
* along the direction the diagram flows. An edge that skips ranks gets
|
|
760
|
+
* waypoints through the gaps in each rank it crosses, so it goes around the
|
|
761
|
+
* nodes between its ends rather than through them.
|
|
762
|
+
*
|
|
763
|
+
* An edge running back up the ranks, or within one, is left to the ends'
|
|
764
|
+
* facing rule.
|
|
765
|
+
*/
|
|
766
|
+
|
|
767
|
+
type Rect = {
|
|
768
|
+
x: number;
|
|
769
|
+
y: number;
|
|
770
|
+
width: number;
|
|
771
|
+
height: number;
|
|
772
|
+
};
|
|
773
|
+
/** One edge to route, by the ids of its ends: a node's or a group's. */
|
|
774
|
+
interface RouteEdge {
|
|
775
|
+
id: string;
|
|
776
|
+
from: string;
|
|
777
|
+
to: string;
|
|
778
|
+
}
|
|
779
|
+
/** What {@link layeredRoutes} hands an edge. A field is absent where the
|
|
780
|
+
* default does as well. */
|
|
781
|
+
interface LayeredRoute {
|
|
782
|
+
fromPort?: string;
|
|
783
|
+
toPort?: string;
|
|
784
|
+
waypoints?: readonly Vec2$1[];
|
|
785
|
+
}
|
|
786
|
+
/** What {@link layeredRoutes} reads: the ranked graph, and where everything landed. */
|
|
787
|
+
interface LayeredRouteInput {
|
|
788
|
+
/** The graph layout ranked, for which rank each node is in. */
|
|
789
|
+
graph: Graph;
|
|
790
|
+
edges: readonly RouteEdge[];
|
|
791
|
+
/** Every node and group box where it was placed. */
|
|
792
|
+
boxes: ReadonlyMap<string, Rect>;
|
|
793
|
+
/** Each group's node members, through nested groups. */
|
|
794
|
+
members: ReadonlyMap<string, readonly string[]>;
|
|
795
|
+
/** Ids whose ports are the four compass midpoints, which are the only ones
|
|
796
|
+
* a route names. */
|
|
797
|
+
compass: ReadonlySet<string>;
|
|
798
|
+
direction?: LayoutDirection;
|
|
799
|
+
/** How far a route keeps from the boxes it passes. */
|
|
800
|
+
clearance: number;
|
|
801
|
+
}
|
|
802
|
+
/** Ports and waypoints for each edge of a laid-out `layered` diagram that
|
|
803
|
+
* needs any, keyed by edge id. */
|
|
804
|
+
declare function layeredRoutes(input: LayeredRouteInput): Map<string, LayeredRoute>;
|
|
805
|
+
|
|
806
|
+
/**
|
|
807
|
+
* Running a layout against a scene: `LAYOUTS`, one batch of pose writes, and
|
|
808
|
+
* the action that reaches both. A layout is a pure function of the graph;
|
|
809
|
+
* `applyLayout` is the only thing that touches a scene.
|
|
790
810
|
*/
|
|
791
811
|
|
|
792
812
|
/** The layouts this package ships. A consumer's own go in the same shape. */
|
|
@@ -808,18 +828,16 @@ interface ApplyLayoutOptions<TPose> {
|
|
|
808
828
|
* descriptor knows how to move one.
|
|
809
829
|
*
|
|
810
830
|
* A participant that is a container takes its whole subtree along. `setPose`
|
|
811
|
-
* does not cascade — poses are absolute
|
|
812
|
-
* out from under its own label rows with every test green.
|
|
831
|
+
* does not cascade — poses are absolute.
|
|
813
832
|
*/
|
|
814
833
|
declare function applyLayout<TPose>(scene: Scene<unknown, string, TPose>, result: LayoutResult, opts?: ApplyLayoutOptions<TPose>): number;
|
|
815
834
|
/**
|
|
816
835
|
* The poses a layout result implies, without writing any of them: each moved
|
|
817
836
|
* node translated to its new top-left, and its subtree translated with it.
|
|
818
837
|
*
|
|
819
|
-
*
|
|
820
|
-
*
|
|
821
|
-
*
|
|
822
|
-
* never changes, so a frame's answer does not depend on the frame before it.
|
|
838
|
+
* The translation is measured from the node's document pose, which a live run
|
|
839
|
+
* in flight never changes, so a frame's answer does not depend on the frame
|
|
840
|
+
* before it.
|
|
823
841
|
*/
|
|
824
842
|
declare function layoutPoses<TPose>(scene: Scene<unknown, string, TPose>, result: LayoutResult, geometry?: PoseDescriptor<TPose>): Map<string, TPose>;
|
|
825
843
|
/** The default action id. */
|
|
@@ -843,18 +861,11 @@ interface LayoutActionOptions<TPose> {
|
|
|
843
861
|
}
|
|
844
862
|
/**
|
|
845
863
|
* `diagram.layout` — rebuild the graph, run a layout, write the result.
|
|
846
|
-
*
|
|
847
|
-
* A factory rather than a singleton for the reason every other entry point in
|
|
848
|
-
* this package is one: which nodes are in the diagram is the consumer's, and
|
|
849
|
-
* this package has no scene at module scope.
|
|
850
864
|
*/
|
|
851
865
|
declare function createLayoutAction<TPose>(opts: LayoutActionOptions<TPose>): Action;
|
|
852
866
|
|
|
853
867
|
/**
|
|
854
868
|
* The port affordance, composed into a layer and pointed at a scene.
|
|
855
|
-
*
|
|
856
|
-
* Two conveniences over {@link createPortAffordance}, both of which encode a
|
|
857
|
-
* rule that is easy to get wrong rather than merely saving a line.
|
|
858
869
|
*/
|
|
859
870
|
|
|
860
871
|
/** The minimum a participant source needs from a scene. Narrower than `Scene`
|
|
@@ -880,12 +891,9 @@ interface ParticipantScene<TPose> {
|
|
|
880
891
|
*
|
|
881
892
|
* `effectivePose`, not `node.pose`: an override is what a gesture is currently
|
|
882
893
|
* showing, and a port that answers from the document pose while its node is
|
|
883
|
-
* mid-drag sits somewhere the user can see the node is not.
|
|
884
|
-
* participant trait cost one reader call each and contribute no regions.
|
|
894
|
+
* mid-drag sits somewhere the user can see the node is not.
|
|
885
895
|
*
|
|
886
|
-
* One source answers both the ports and the graph
|
|
887
|
-
* `ParticipantSource` that also carries `dependsOn`, which is where an edge's
|
|
888
|
-
* two endpoints live.
|
|
896
|
+
* One source answers both the ports and the graph.
|
|
889
897
|
*/
|
|
890
898
|
declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): GraphSource<TPose>;
|
|
891
899
|
/**
|
|
@@ -893,27 +901,18 @@ declare function sceneParticipants<TPose>(scene: ParticipantScene<TPose>): Graph
|
|
|
893
901
|
* attach route that is hit-tested. Handing this to `SceneCanvas`'s `layers`
|
|
894
902
|
* prop, or to a `Contribution.overlay`, paints the ports and makes none of them
|
|
895
903
|
* grabbable.
|
|
896
|
-
*
|
|
897
|
-
* The cast is `composeAffordanceLayer` typing its data slot as `ChromeState`
|
|
898
|
-
* while the layer registry takes `RenderLayer<unknown>`; both are handed the
|
|
899
|
-
* same live `CanvasHelpers` envelope at runtime.
|
|
900
904
|
*/
|
|
901
905
|
declare function portLayer<TPose>(participants: ParticipantSource<TPose>, opts?: PortAffordanceOptions<TPose>): RenderLayer<unknown> & {
|
|
902
906
|
hitTest: NonNullable<RenderLayer<unknown>['hitTest']>;
|
|
903
907
|
};
|
|
904
908
|
|
|
905
909
|
/**
|
|
906
|
-
* The painter for a node whose trait names an `outline`.
|
|
907
|
-
*
|
|
908
|
-
* Registered the way every other trait's renderer is — a `NodeShapeEntry` with
|
|
909
|
-
* a `matches` over the node's data — so a diagram body is picked, clipped and
|
|
910
|
-
* area-selected by the same walk as everything else, and a participant that
|
|
910
|
+
* The painter for a node whose trait names an `outline`. A participant that
|
|
911
911
|
* already had a look of its own (a text block, an image, a path) keeps it by
|
|
912
912
|
* naming no outline at all.
|
|
913
913
|
*
|
|
914
914
|
* Rows are **not** painted here. A built body's rows are ordinary scene nodes
|
|
915
|
-
* under the container, so the kit's own text painter draws them
|
|
916
|
-
* editing, selection and styling work on them without a special case.
|
|
915
|
+
* under the container, so the kit's own text painter draws them.
|
|
917
916
|
*/
|
|
918
917
|
|
|
919
918
|
/** Options for {@link diagramShape} and {@link registerDiagramShape}. */
|
|
@@ -926,7 +925,7 @@ interface DiagramShapeOptions<TPose> {
|
|
|
926
925
|
/** Reads the box the outline is built in. Default `RECT_POSE_DESCRIPTOR`. */
|
|
927
926
|
geometry?: PoseDescriptor<TPose>;
|
|
928
927
|
/** Painted when the node's data declares neither. */
|
|
929
|
-
defaultFill?:
|
|
928
|
+
defaultFill?: Fill | null;
|
|
930
929
|
defaultStroke?: Stroke | null;
|
|
931
930
|
}
|
|
932
931
|
/** The entry, for a consumer composing their own painter list. */
|
|
@@ -993,7 +992,7 @@ interface DiagramViewProps {
|
|
|
993
992
|
* Default 16. */
|
|
994
993
|
fitPadding?: number;
|
|
995
994
|
/** What the canvas paints behind the diagram. Unset, it is transparent. */
|
|
996
|
-
background?:
|
|
995
|
+
background?: Paint;
|
|
997
996
|
/** The view, controlled. Set it and the initial fit is skipped; pair it
|
|
998
997
|
* with `onViewChange` or panning does nothing. */
|
|
999
998
|
view?: View;
|
|
@@ -1022,4 +1021,4 @@ declare const DiagramView: react.ForwardRefExoticComponent<DiagramViewProps & re
|
|
|
1022
1021
|
* `<SceneCanvas onClick>`. */
|
|
1023
1022
|
declare function useMirroredSelection(selection: Pick<SelectionApi, 'get' | 'set'>, selected: string | null | undefined, onSelect: ((id: string | null) => void) | undefined): () => void;
|
|
1024
1023
|
|
|
1025
|
-
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
|
|
1024
|
+
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 LayeredRoute, type LayeredRouteInput, type LayoutActionOptions, LayoutDirection, 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 RouteEdge, type RouteRequest, type Router, Row, type SelfLoop, type UseLiveLayoutOptions, anchorDerivePose, applyLayout, bezier, boxAround, 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 };
|