nexus-shell 0.2.4 → 0.2.6
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 +6 -0
- package/dist/components/graph/GraphCanvas.d.ts +110 -0
- package/dist/components/graph/GraphEdge.d.ts +71 -0
- package/dist/components/graph/GraphMiniMap.d.ts +83 -0
- package/dist/components/graph/GraphNode.d.ts +68 -0
- package/dist/components/graph/NodePalette.d.ts +117 -0
- package/dist/components/graph/index.d.ts +17 -0
- package/dist/components/graph/useGraphKeyboard.d.ts +115 -0
- package/dist/index.d.ts +2 -0
- package/dist/lib/graph.d.ts +165 -0
- package/dist/nexus-shell.es.js +2141 -1241
- package/dist/nexus-shell.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The graph domain model and its geometry.
|
|
3
|
+
*
|
|
4
|
+
* Kept deliberately small and domain-neutral: the library knows about
|
|
5
|
+
* positioned nodes, edges between them, and a viewport. What a node *means* —
|
|
6
|
+
* an argument, a task, a service, a scene object — belongs to the application,
|
|
7
|
+
* exactly as with {@link ITreeNode}.
|
|
8
|
+
*
|
|
9
|
+
* This lives in `lib/` rather than `core/services/` so the presentational graph
|
|
10
|
+
* components can use it; they are barred from importing stores.
|
|
11
|
+
*/
|
|
12
|
+
/** A point in graph space. Graph space is unbounded in every direction. */
|
|
13
|
+
export interface IPoint {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
}
|
|
17
|
+
/** A rectangle in graph space, anchored at its top-left corner. */
|
|
18
|
+
export interface IRect extends IPoint {
|
|
19
|
+
width: number;
|
|
20
|
+
height: number;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* The four sides a node exposes for edge attachment.
|
|
24
|
+
*
|
|
25
|
+
* Ports are sides rather than discrete handles: an edge picks whichever side
|
|
26
|
+
* faces its counterpart, which keeps the model small and means a node needs no
|
|
27
|
+
* per-handle configuration to be connectable.
|
|
28
|
+
*/
|
|
29
|
+
export type GraphPort = 'top' | 'right' | 'bottom' | 'left';
|
|
30
|
+
/** A node in the graph. */
|
|
31
|
+
export interface IGraphNode {
|
|
32
|
+
/** Stable identifier, unique across the graph. */
|
|
33
|
+
id: string;
|
|
34
|
+
/** Top-left corner in graph space. */
|
|
35
|
+
position: IPoint;
|
|
36
|
+
/** Rendered size. Defaults to {@link DEFAULT_NODE_SIZE} when omitted. */
|
|
37
|
+
size?: {
|
|
38
|
+
width: number;
|
|
39
|
+
height: number;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Your own classification, e.g. `"question"`, `"service"`, `"task"`. Never
|
|
43
|
+
* interpreted by the library — it exists so you can render and validate by
|
|
44
|
+
* type, and so palette entries and edge rules can target it.
|
|
45
|
+
*/
|
|
46
|
+
kind?: string;
|
|
47
|
+
/** Free-form payload. The library passes it through untouched. */
|
|
48
|
+
data?: unknown;
|
|
49
|
+
}
|
|
50
|
+
/** A directed edge between two nodes. */
|
|
51
|
+
export interface IGraphEdge {
|
|
52
|
+
/** Stable identifier, unique across the graph. */
|
|
53
|
+
id: string;
|
|
54
|
+
/** Id of the node the edge leaves. */
|
|
55
|
+
source: string;
|
|
56
|
+
/** Id of the node the edge enters. */
|
|
57
|
+
target: string;
|
|
58
|
+
/** Your own classification, e.g. `"supports"`, `"depends-on"`. */
|
|
59
|
+
kind?: string;
|
|
60
|
+
/** Text rendered at the edge's midpoint. */
|
|
61
|
+
label?: string;
|
|
62
|
+
/** Free-form payload. */
|
|
63
|
+
data?: unknown;
|
|
64
|
+
}
|
|
65
|
+
/** Pan and zoom. `scale` multiplies graph units to screen pixels. */
|
|
66
|
+
export interface IViewport {
|
|
67
|
+
x: number;
|
|
68
|
+
y: number;
|
|
69
|
+
scale: number;
|
|
70
|
+
}
|
|
71
|
+
export declare const DEFAULT_NODE_SIZE: {
|
|
72
|
+
readonly width: 180;
|
|
73
|
+
readonly height: 72;
|
|
74
|
+
};
|
|
75
|
+
export declare const IDENTITY_VIEWPORT: IViewport;
|
|
76
|
+
/** The rectangle a node occupies, filling in the default size. */
|
|
77
|
+
export declare const nodeRect: (node: IGraphNode) => IRect;
|
|
78
|
+
export declare const rectCenter: (rect: IRect) => IPoint;
|
|
79
|
+
/** Convert a screen-space point (relative to the canvas element) to graph space. */
|
|
80
|
+
export declare const toGraphSpace: (point: IPoint, viewport: IViewport) => IPoint;
|
|
81
|
+
/** Convert a graph-space point to screen space (relative to the canvas element). */
|
|
82
|
+
export declare const toScreenSpace: (point: IPoint, viewport: IViewport) => IPoint;
|
|
83
|
+
/**
|
|
84
|
+
* Zoom about a fixed screen point, so the graph position under the cursor stays
|
|
85
|
+
* under the cursor. Anything else feels wrong to use.
|
|
86
|
+
*/
|
|
87
|
+
export declare const zoomAt: (viewport: IViewport, screenPoint: IPoint, nextScale: number) => IViewport;
|
|
88
|
+
export declare const clampScale: (scale: number, min?: number, max?: number) => number;
|
|
89
|
+
/** The point on a rectangle's edge for a given side. */
|
|
90
|
+
export declare const portPoint: (rect: IRect, port: GraphPort) => IPoint;
|
|
91
|
+
/**
|
|
92
|
+
* Choose which sides an edge should leave and enter, based on which direction
|
|
93
|
+
* dominates. Picking automatically is what lets a node be connectable without
|
|
94
|
+
* declaring handles.
|
|
95
|
+
*/
|
|
96
|
+
export declare const resolvePorts: (from: IRect, to: IRect) => {
|
|
97
|
+
source: GraphPort;
|
|
98
|
+
target: GraphPort;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* The bounding box of a set of nodes, or `null` when there are none.
|
|
102
|
+
* Used to fit the viewport to the graph.
|
|
103
|
+
*/
|
|
104
|
+
export declare const graphBounds: (nodes: IGraphNode[]) => IRect | null;
|
|
105
|
+
/**
|
|
106
|
+
* The region of graph space currently visible in an element of the given size.
|
|
107
|
+
*
|
|
108
|
+
* This is what a minimap draws as its viewport indicator, and what a culling
|
|
109
|
+
* pass would test against.
|
|
110
|
+
*/
|
|
111
|
+
export declare const viewportRect: (viewport: IViewport, size: {
|
|
112
|
+
width: number;
|
|
113
|
+
height: number;
|
|
114
|
+
}) => IRect;
|
|
115
|
+
/**
|
|
116
|
+
* A viewport that puts a graph-space point at the centre of the element,
|
|
117
|
+
* keeping the current zoom. Used for jumping somewhere from a minimap or a
|
|
118
|
+
* search result.
|
|
119
|
+
*/
|
|
120
|
+
export declare const centerOn: (point: IPoint, size: {
|
|
121
|
+
width: number;
|
|
122
|
+
height: number;
|
|
123
|
+
}, scale: number) => IViewport;
|
|
124
|
+
/** The smallest rectangle containing both inputs. */
|
|
125
|
+
export declare const unionRect: (a: IRect, b: IRect) => IRect;
|
|
126
|
+
/** A viewport that fits `nodes` inside a element of the given size. */
|
|
127
|
+
export declare const fitViewport: (nodes: IGraphNode[], size: {
|
|
128
|
+
width: number;
|
|
129
|
+
height: number;
|
|
130
|
+
}, padding?: number) => IViewport;
|
|
131
|
+
export type Direction = 'up' | 'down' | 'left' | 'right';
|
|
132
|
+
/**
|
|
133
|
+
* The nearest node in a direction, for arrow-key traversal.
|
|
134
|
+
*
|
|
135
|
+
* Scores candidates by distance along the travel axis, penalised by how far
|
|
136
|
+
* they stray off it. Pure distance would jump to a node that is barely in the
|
|
137
|
+
* right direction but far to the side; requiring perfect alignment would make
|
|
138
|
+
* most of the graph unreachable. The 2× penalty on lateral offset is the
|
|
139
|
+
* compromise, and it matches what feels right when navigating a hand-arranged
|
|
140
|
+
* diagram.
|
|
141
|
+
*
|
|
142
|
+
* Returns `null` when nothing lies in that direction.
|
|
143
|
+
*/
|
|
144
|
+
export declare const findNeighbour: (nodes: IGraphNode[], fromId: string, direction: Direction) => IGraphNode | null;
|
|
145
|
+
/**
|
|
146
|
+
* A free position for a new node placed relative to an existing one, nudged
|
|
147
|
+
* along `direction` and then away from anything it would overlap.
|
|
148
|
+
*
|
|
149
|
+
* Used when creating a node from the keyboard, where there is no cursor to say
|
|
150
|
+
* where it should go.
|
|
151
|
+
*/
|
|
152
|
+
export declare const placeRelativeTo: (nodes: IGraphNode[], fromId: string, direction: Direction, gap?: number) => IPoint;
|
|
153
|
+
/** Edges touching a node, in either direction. */
|
|
154
|
+
export declare const edgesOf: (edges: IGraphEdge[], nodeId: string) => IGraphEdge[];
|
|
155
|
+
/** Whether an edge already joins two nodes, in either direction. */
|
|
156
|
+
export declare const isConnected: (edges: IGraphEdge[], a: string, b: string) => boolean;
|
|
157
|
+
/** Remove a node and every edge attached to it. */
|
|
158
|
+
export declare const removeNode: (nodes: IGraphNode[], edges: IGraphEdge[], nodeId: string) => {
|
|
159
|
+
nodes: IGraphNode[];
|
|
160
|
+
edges: IGraphEdge[];
|
|
161
|
+
};
|
|
162
|
+
/** Generate an id that is unique within a collection. */
|
|
163
|
+
export declare const nextId: (prefix: string, existing: {
|
|
164
|
+
id: string;
|
|
165
|
+
}[]) => string;
|