@yggy-tech/graphraum 0.0.0-stage → 0.28.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/LICENSE +201 -0
- package/README.md +80 -2
- package/dist/index.d.ts +677 -0
- package/dist/index.js +3178 -0
- package/package.json +55 -4
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,677 @@
|
|
|
1
|
+
import Graph from "graphology";
|
|
2
|
+
//#region src/types.d.ts
|
|
3
|
+
type GraphraumColor = number | string;
|
|
4
|
+
type GraphraumMode = "2d" | "3d";
|
|
5
|
+
type GraphraumNodeState = "dimmed" | "focused" | "hovered" | "selected";
|
|
6
|
+
type GraphraumNodeShape = "circle" | "diamond" | "hexagon" | "pill" | "rounded" | "square" | "triangle";
|
|
7
|
+
interface GraphraumPosition {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
z?: number;
|
|
11
|
+
}
|
|
12
|
+
type GraphraumAttributes<Attributes> = [Attributes] extends [undefined] ? {
|
|
13
|
+
attributes?: never;
|
|
14
|
+
} : {
|
|
15
|
+
attributes: Attributes;
|
|
16
|
+
};
|
|
17
|
+
interface GraphraumNodeGeometry {
|
|
18
|
+
id: string;
|
|
19
|
+
position: GraphraumPosition;
|
|
20
|
+
color?: GraphraumColor;
|
|
21
|
+
height?: number;
|
|
22
|
+
shape?: GraphraumNodeShape;
|
|
23
|
+
size?: number;
|
|
24
|
+
strokeColor?: GraphraumColor;
|
|
25
|
+
strokeWidth?: number;
|
|
26
|
+
width?: number;
|
|
27
|
+
}
|
|
28
|
+
type GraphraumNode<NodeAttributes = undefined> = GraphraumNodeGeometry & GraphraumAttributes<NodeAttributes>;
|
|
29
|
+
interface GraphraumNodeUpdate {
|
|
30
|
+
color?: GraphraumColor | undefined;
|
|
31
|
+
height?: number | undefined;
|
|
32
|
+
id: string;
|
|
33
|
+
position?: GraphraumPosition;
|
|
34
|
+
shape?: GraphraumNodeShape | undefined;
|
|
35
|
+
size?: number | undefined;
|
|
36
|
+
strokeColor?: GraphraumColor | undefined;
|
|
37
|
+
strokeWidth?: number | undefined;
|
|
38
|
+
width?: number | undefined;
|
|
39
|
+
}
|
|
40
|
+
/** A transferable XYZ position batch in the same order as `nodeIds`. */
|
|
41
|
+
interface GraphraumLayoutPositions {
|
|
42
|
+
nodeIds: readonly string[];
|
|
43
|
+
positions: Float32Array;
|
|
44
|
+
}
|
|
45
|
+
type GraphraumEdgeStyle = "solid" | "dashed" | "dotted";
|
|
46
|
+
type GraphraumEdgeMarker = "none" | "triangle";
|
|
47
|
+
type GraphraumEdgeMarkerEnd = "target" | "source" | "both";
|
|
48
|
+
type GraphraumEdgePath = "straight" | "quadratic" | "cubic";
|
|
49
|
+
type GraphraumEdge<EdgeAttributes = undefined> = {
|
|
50
|
+
color?: GraphraumColor;
|
|
51
|
+
width?: number;
|
|
52
|
+
opacity?: number;
|
|
53
|
+
style?: GraphraumEdgeStyle;
|
|
54
|
+
marker?: GraphraumEdgeMarker;
|
|
55
|
+
markerSize?: number;
|
|
56
|
+
markerEnd?: GraphraumEdgeMarkerEnd;
|
|
57
|
+
path?: GraphraumEdgePath;
|
|
58
|
+
controlPoints?: readonly GraphraumPosition[];
|
|
59
|
+
id: string;
|
|
60
|
+
source: string;
|
|
61
|
+
target: string;
|
|
62
|
+
} & GraphraumAttributes<EdgeAttributes>;
|
|
63
|
+
interface GraphraumData<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
64
|
+
nodes: readonly GraphraumNode<NodeAttributes>[];
|
|
65
|
+
edges: readonly GraphraumEdge<EdgeAttributes>[];
|
|
66
|
+
}
|
|
67
|
+
interface GraphraumDataPatch<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
68
|
+
addedNodes?: readonly GraphraumNode<NodeAttributes>[];
|
|
69
|
+
addedEdges?: readonly GraphraumEdge<EdgeAttributes>[];
|
|
70
|
+
removedNodeIds?: readonly string[];
|
|
71
|
+
removedEdgeIds?: readonly string[];
|
|
72
|
+
}
|
|
73
|
+
interface GraphraumNodeVisual {
|
|
74
|
+
color?: GraphraumColor;
|
|
75
|
+
height?: number;
|
|
76
|
+
shape?: GraphraumNodeShape;
|
|
77
|
+
size?: number;
|
|
78
|
+
strokeColor?: GraphraumColor;
|
|
79
|
+
strokeWidth?: number;
|
|
80
|
+
width?: number;
|
|
81
|
+
}
|
|
82
|
+
interface GraphraumEdgeVisual {
|
|
83
|
+
color?: GraphraumColor;
|
|
84
|
+
width?: number;
|
|
85
|
+
opacity?: number;
|
|
86
|
+
style?: GraphraumEdgeStyle;
|
|
87
|
+
marker?: GraphraumEdgeMarker;
|
|
88
|
+
markerSize?: number;
|
|
89
|
+
markerEnd?: GraphraumEdgeMarkerEnd;
|
|
90
|
+
path?: GraphraumEdgePath;
|
|
91
|
+
controlPoints?: readonly GraphraumPosition[];
|
|
92
|
+
}
|
|
93
|
+
type GraphraumPropertyValue = boolean | null | number | string;
|
|
94
|
+
interface GraphraumPresentationProperty {
|
|
95
|
+
id: string;
|
|
96
|
+
label: string;
|
|
97
|
+
value: GraphraumPropertyValue;
|
|
98
|
+
}
|
|
99
|
+
interface GraphraumPresentationAction {
|
|
100
|
+
disabled?: boolean;
|
|
101
|
+
id: string;
|
|
102
|
+
label: string;
|
|
103
|
+
}
|
|
104
|
+
interface GraphraumPresentation {
|
|
105
|
+
actions?: readonly GraphraumPresentationAction[];
|
|
106
|
+
properties?: readonly GraphraumPresentationProperty[];
|
|
107
|
+
subtitle?: string;
|
|
108
|
+
title: string;
|
|
109
|
+
}
|
|
110
|
+
interface CompiledGraphraumPresentation extends GraphraumPresentation {
|
|
111
|
+
actions: readonly Readonly<GraphraumPresentationAction>[];
|
|
112
|
+
properties: readonly Readonly<GraphraumPresentationProperty>[];
|
|
113
|
+
}
|
|
114
|
+
interface GraphraumScreenPosition {
|
|
115
|
+
visible: boolean;
|
|
116
|
+
x: number;
|
|
117
|
+
y: number;
|
|
118
|
+
}
|
|
119
|
+
interface GraphraumOverlayNode {
|
|
120
|
+
id: string;
|
|
121
|
+
presentation: CompiledGraphraumPresentation | null;
|
|
122
|
+
}
|
|
123
|
+
interface GraphraumLabelCandidate {
|
|
124
|
+
id: string;
|
|
125
|
+
importance: number;
|
|
126
|
+
visible: boolean;
|
|
127
|
+
}
|
|
128
|
+
interface GraphraumOverlayOptions {
|
|
129
|
+
/**
|
|
130
|
+
* Label refresh policy. `manual` only shows ids from `setLabels()`. `auto` budgets by
|
|
131
|
+
* importance on view change. `focus` budgets selected ∪ hovered ∪ 1-hop neighbors first.
|
|
132
|
+
* When omitted, `autoLabels: true` maps to `auto` for compatibility; otherwise `manual`.
|
|
133
|
+
*/
|
|
134
|
+
labelPolicy?: "manual" | "auto" | "focus";
|
|
135
|
+
/**
|
|
136
|
+
* When `labelPolicy` is `focus`, controls whether leftover budget is filled by importance.
|
|
137
|
+
* Default `importance`. Use `none` for selected/hover/neighbor labels only.
|
|
138
|
+
*/
|
|
139
|
+
focusLabelFill?: "importance" | "none";
|
|
140
|
+
/**
|
|
141
|
+
* @deprecated Prefer `labelPolicy: "auto"`. When `labelPolicy` is omitted, `true` enables `auto`.
|
|
142
|
+
*/
|
|
143
|
+
autoLabels?: boolean;
|
|
144
|
+
/**
|
|
145
|
+
* When set with `renderToolbar`, keeps the toolbar pinned to the selected or hovered node.
|
|
146
|
+
* Default `false` — host calls `setToolbar` manually.
|
|
147
|
+
*/
|
|
148
|
+
autoToolbar?: false | "selected" | "hovered";
|
|
149
|
+
overlayClassName?: string;
|
|
150
|
+
maxLabels?: number;
|
|
151
|
+
/**
|
|
152
|
+
* Hard cap for host HTML focus cards. Default 24. Manual `setRichNodes` throws when exceeded;
|
|
153
|
+
* `autoRichNodes` slices to the cap.
|
|
154
|
+
*/
|
|
155
|
+
maxRichNodes?: number;
|
|
156
|
+
labelClassName?: string;
|
|
157
|
+
toolbarClassName?: string;
|
|
158
|
+
richNodeClassName?: string;
|
|
159
|
+
/**
|
|
160
|
+
* When set with `renderRichNode`, keeps focus cards on selected and/or hovered nodes.
|
|
161
|
+
* Default `false` — host calls `setRichNodes`.
|
|
162
|
+
*/
|
|
163
|
+
autoRichNodes?: false | "selected" | "hovered" | "focus";
|
|
164
|
+
renderLabel?: (node: GraphraumOverlayNode) => HTMLElement | null;
|
|
165
|
+
renderToolbar?: (node: GraphraumOverlayNode) => HTMLElement | null;
|
|
166
|
+
/** Host HTML for a strictly bounded focused subset. Not the dense node path. */
|
|
167
|
+
renderRichNode?: (node: GraphraumOverlayNode) => HTMLElement | null;
|
|
168
|
+
}
|
|
169
|
+
interface GraphraumNodeEncoding {
|
|
170
|
+
presentation?: GraphraumPresentation;
|
|
171
|
+
visual?: GraphraumNodeVisual;
|
|
172
|
+
}
|
|
173
|
+
interface GraphraumEdgeEncoding {
|
|
174
|
+
presentation?: GraphraumPresentation;
|
|
175
|
+
visual?: GraphraumEdgeVisual;
|
|
176
|
+
}
|
|
177
|
+
interface GraphraumVisualMapper<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
178
|
+
edge?: (edge: Readonly<GraphraumEdge<EdgeAttributes>>) => GraphraumEdgeEncoding | undefined;
|
|
179
|
+
node?: (node: Readonly<GraphraumNode<NodeAttributes>>) => GraphraumNodeEncoding | undefined;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Canvas backdrop.
|
|
183
|
+
* - CSS color string paints a solid WebGL clear
|
|
184
|
+
* - `null` / `"transparent"` leaves the canvas clear so a host CSS color, gradient, or pattern shows through
|
|
185
|
+
* - `{ type: "pattern", source }` uses an image/canvas/bitmap as `scene.background`
|
|
186
|
+
*/
|
|
187
|
+
type GraphraumPatternBackground = {
|
|
188
|
+
type: "pattern";
|
|
189
|
+
source: CanvasImageSource;
|
|
190
|
+
/** Horizontal and vertical tile count. Default `[1, 1]` stretches to fill. */
|
|
191
|
+
repeat?: readonly [number, number];
|
|
192
|
+
};
|
|
193
|
+
type GraphraumBackground = GraphraumColor | GraphraumPatternBackground | "transparent" | null;
|
|
194
|
+
type GraphraumThemeName = "dark" | "light";
|
|
195
|
+
interface GraphraumTheme {
|
|
196
|
+
background: GraphraumBackground;
|
|
197
|
+
dimmedNode: GraphraumColor;
|
|
198
|
+
edge: GraphraumColor;
|
|
199
|
+
edgeOpacity: number;
|
|
200
|
+
edgeWidth: number;
|
|
201
|
+
/** How edge ends meet nodes. Default `boundary`. */
|
|
202
|
+
endpointAttach: "boundary" | "center";
|
|
203
|
+
focusedNode: GraphraumColor;
|
|
204
|
+
hoveredNode: GraphraumColor;
|
|
205
|
+
node: GraphraumColor;
|
|
206
|
+
nodeStroke: GraphraumColor;
|
|
207
|
+
selectedEdge: GraphraumColor;
|
|
208
|
+
selectedNode: GraphraumColor;
|
|
209
|
+
}
|
|
210
|
+
/** Discriminated pick result. Nodes win over edges when both intersect the pointer. */
|
|
211
|
+
type GraphraumPickHit = {
|
|
212
|
+
kind: "edge";
|
|
213
|
+
id: string;
|
|
214
|
+
} | {
|
|
215
|
+
kind: "node";
|
|
216
|
+
id: string;
|
|
217
|
+
};
|
|
218
|
+
interface GraphraumOptions<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
219
|
+
antialias?: boolean;
|
|
220
|
+
maxVisibleEdges?: number;
|
|
221
|
+
maxVisibleNodes?: number;
|
|
222
|
+
maxPixelRatio?: number;
|
|
223
|
+
mode?: GraphraumMode;
|
|
224
|
+
/** Named preset (`"dark"` / `"light"`) or a partial override merged onto dark. */
|
|
225
|
+
theme?: Partial<GraphraumTheme> | GraphraumThemeName;
|
|
226
|
+
viewportCulling?: boolean;
|
|
227
|
+
viewportOverscan?: number;
|
|
228
|
+
visuals?: GraphraumVisualMapper<NodeAttributes, EdgeAttributes>;
|
|
229
|
+
}
|
|
230
|
+
interface GraphraumDiagnostics {
|
|
231
|
+
aggregatedNodeClusters: number;
|
|
232
|
+
cpuFrameMilliseconds: number;
|
|
233
|
+
gpuFrameMilliseconds: number | null;
|
|
234
|
+
gpuDrawCalls: number;
|
|
235
|
+
gpuGeometries: number;
|
|
236
|
+
gpuTextures: number;
|
|
237
|
+
lodLevel: "density" | "detail" | "overview";
|
|
238
|
+
pickingStrategy: "raycaster-3d" | "spatial-grid-2d";
|
|
239
|
+
selectedEdges: number;
|
|
240
|
+
selectedNodes: number;
|
|
241
|
+
totalEdges: number;
|
|
242
|
+
totalNodes: number;
|
|
243
|
+
visibleEdgeCandidates: number;
|
|
244
|
+
visibleEdgeMarkers: number;
|
|
245
|
+
visibleEdgeSegments: number;
|
|
246
|
+
visibleEdges: number;
|
|
247
|
+
visibleNodes: number;
|
|
248
|
+
visibleNodeCandidates: number;
|
|
249
|
+
}
|
|
250
|
+
//#endregion
|
|
251
|
+
//#region src/edge-endpoint-attach.d.ts
|
|
252
|
+
type EndpointAttach = "boundary" | "center";
|
|
253
|
+
declare const DEFAULT_ENDPOINT_ATTACH: EndpointAttach;
|
|
254
|
+
declare const DEFAULT_ENDPOINT_CLEARANCE = 0.75;
|
|
255
|
+
interface EndpointOutline {
|
|
256
|
+
height?: number;
|
|
257
|
+
shape?: GraphraumNodeShape;
|
|
258
|
+
size?: number;
|
|
259
|
+
strokeWidth?: number;
|
|
260
|
+
width?: number;
|
|
261
|
+
}
|
|
262
|
+
interface TrimEdgeEndpointsInput {
|
|
263
|
+
attach?: EndpointAttach;
|
|
264
|
+
clearance?: number;
|
|
265
|
+
source: GraphraumPosition;
|
|
266
|
+
sourceOutline: EndpointOutline;
|
|
267
|
+
target: GraphraumPosition;
|
|
268
|
+
targetOutline: EndpointOutline;
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Walk from the node center toward the far point and stop on the outline,
|
|
272
|
+
* then pull back by `clearance` so the stroke is not stabbed.
|
|
273
|
+
*/
|
|
274
|
+
declare function attachPointOnOutline(center: GraphraumPosition, far: GraphraumPosition, outline: EndpointOutline, clearance?: number): GraphraumPosition;
|
|
275
|
+
/** Trim both ends of a center-to-center chord (or curve endpoints) to node boundaries. */
|
|
276
|
+
declare function trimEdgeEndpoints(input: TrimEdgeEndpointsInput): {
|
|
277
|
+
source: GraphraumPosition;
|
|
278
|
+
target: GraphraumPosition;
|
|
279
|
+
};
|
|
280
|
+
//#endregion
|
|
281
|
+
//#region src/edge-styles.d.ts
|
|
282
|
+
declare const graphraumEdgePaths: readonly ["straight", "quadratic", "cubic"];
|
|
283
|
+
//#endregion
|
|
284
|
+
//#region src/force-layout.d.ts
|
|
285
|
+
/** Input for graphraum's dimension-aware force layout helpers. */
|
|
286
|
+
interface ForceLayoutRequest {
|
|
287
|
+
dimensions: 2 | 3;
|
|
288
|
+
edges: Uint32Array;
|
|
289
|
+
/** When omitted, `forceIterationCount(nodeCount)` is used. */
|
|
290
|
+
iterations?: number;
|
|
291
|
+
/**
|
|
292
|
+
* Optional rest length per edge (`edges.length / 2` values).
|
|
293
|
+
* Omitted → `settings.linkDistance` for every edge.
|
|
294
|
+
*/
|
|
295
|
+
linkDistances?: Float32Array;
|
|
296
|
+
nodeCount: number;
|
|
297
|
+
settings?: ForceSettings;
|
|
298
|
+
/**
|
|
299
|
+
* Optional spring strength per edge (`edges.length / 2` values).
|
|
300
|
+
* Omitted → `settings.springStrength` for every edge.
|
|
301
|
+
*/
|
|
302
|
+
springStrengths?: Float32Array;
|
|
303
|
+
}
|
|
304
|
+
interface ForceSettings {
|
|
305
|
+
centerAttraction: number;
|
|
306
|
+
damping: number;
|
|
307
|
+
linkDistance: number;
|
|
308
|
+
repulsion: number;
|
|
309
|
+
springStrength: number;
|
|
310
|
+
}
|
|
311
|
+
declare const DEFAULT_FORCE_SETTINGS: ForceSettings;
|
|
312
|
+
declare function forceIterationCount(nodeCount: number): number;
|
|
313
|
+
declare function createForceSimulation(request: ForceLayoutRequest): {
|
|
314
|
+
readonly nodeCount: number;
|
|
315
|
+
readonly edges: Uint32Array<ArrayBuffer>;
|
|
316
|
+
readonly positions: Float32Array<ArrayBuffer>;
|
|
317
|
+
/** Add nodes while preserving every existing position and velocity. */
|
|
318
|
+
addNodes(count: number, initial?: Float32Array): number;
|
|
319
|
+
/** Append endpoint indices for new edges; existing edge indices remain stable. */
|
|
320
|
+
addEdges(nextEdges: Uint32Array): void;
|
|
321
|
+
step(alpha: number): void;
|
|
322
|
+
};
|
|
323
|
+
declare function computeForcePositions(request: ForceLayoutRequest): Float32Array<ArrayBuffer>;
|
|
324
|
+
declare function computeClusteredForcePositions(request: ForceLayoutRequest & {
|
|
325
|
+
clusters: Uint32Array;
|
|
326
|
+
}): Float32Array<ArrayBuffer>;
|
|
327
|
+
//#endregion
|
|
328
|
+
//#region src/graphology.d.ts
|
|
329
|
+
type GraphologyNodeAttributes = Record<string, unknown> & {
|
|
330
|
+
color?: GraphraumColor;
|
|
331
|
+
shape?: GraphraumNodeShape;
|
|
332
|
+
size?: number;
|
|
333
|
+
x?: number;
|
|
334
|
+
y?: number;
|
|
335
|
+
z?: number;
|
|
336
|
+
};
|
|
337
|
+
type GraphologyEdgeAttributes = Record<string, unknown> & {
|
|
338
|
+
color?: GraphraumColor;
|
|
339
|
+
};
|
|
340
|
+
interface GraphologyRenderer<NodeAttributes, EdgeAttributes> {
|
|
341
|
+
setData(data: GraphraumData<NodeAttributes, EdgeAttributes>): void;
|
|
342
|
+
}
|
|
343
|
+
/** Projects a mutable Graphology graph into Graphraum and keeps the binding alive until disposed. */
|
|
344
|
+
declare function bindGraphology<NodeAttributes extends GraphologyNodeAttributes, EdgeAttributes extends GraphologyEdgeAttributes>(renderer: GraphologyRenderer<NodeAttributes, EdgeAttributes>, graph: Graph<NodeAttributes, EdgeAttributes>): () => void;
|
|
345
|
+
//#endregion
|
|
346
|
+
//#region src/overlay.d.ts
|
|
347
|
+
/** A bounded DOM layer for labels, a focused-node toolbar, and optional rich HTML cards. */
|
|
348
|
+
declare class GraphraumOverlay<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
349
|
+
private readonly graph;
|
|
350
|
+
private readonly container;
|
|
351
|
+
private readonly options;
|
|
352
|
+
private readonly root;
|
|
353
|
+
private readonly labels;
|
|
354
|
+
private readonly richNodes;
|
|
355
|
+
private toolbar;
|
|
356
|
+
private toolbarNodeId;
|
|
357
|
+
private readonly stopObservingView;
|
|
358
|
+
private readonly stopObservingFocus;
|
|
359
|
+
private readonly previousContainerPosition;
|
|
360
|
+
private readonly labelPolicy;
|
|
361
|
+
private readonly focusLabelFill;
|
|
362
|
+
private readonly autoToolbar;
|
|
363
|
+
private readonly autoRichNodes;
|
|
364
|
+
private readonly maxLabels;
|
|
365
|
+
private readonly maxRichNodes;
|
|
366
|
+
constructor(graph: Graphraum<NodeAttributes, EdgeAttributes>, container: HTMLElement, options: GraphraumOverlayOptions);
|
|
367
|
+
/**
|
|
368
|
+
* Replaces the labeled node set. When `labelPolicy` is `auto` or `focus`, the next view/focus
|
|
369
|
+
* change overwrites this list from the policy.
|
|
370
|
+
*/
|
|
371
|
+
setLabels(nodeIds: Iterable<string>): void;
|
|
372
|
+
/**
|
|
373
|
+
* Replaces the rich HTML node set. When `autoRichNodes` is set, the next focus change
|
|
374
|
+
* overwrites this list from the policy.
|
|
375
|
+
*/
|
|
376
|
+
setRichNodes(nodeIds: Iterable<string>): void;
|
|
377
|
+
setToolbar(nodeId: string | null): void;
|
|
378
|
+
destroy(): void;
|
|
379
|
+
private update;
|
|
380
|
+
private syncRichNodesFromFocus;
|
|
381
|
+
private syncToolbar;
|
|
382
|
+
private syncLabels;
|
|
383
|
+
private syncRichNodes;
|
|
384
|
+
private updatePositions;
|
|
385
|
+
private createEntry;
|
|
386
|
+
private updateEntry;
|
|
387
|
+
private applyClassName;
|
|
388
|
+
}
|
|
389
|
+
//#endregion
|
|
390
|
+
//#region src/graphraum.d.ts
|
|
391
|
+
/** A small, explicit WebGL graph renderer: one instanced node mesh and one batched edge geometry. */
|
|
392
|
+
declare class Graphraum<NodeAttributes = undefined, EdgeAttributes = undefined> {
|
|
393
|
+
private readonly container;
|
|
394
|
+
private readonly renderer;
|
|
395
|
+
private readonly scene;
|
|
396
|
+
private readonly raycaster;
|
|
397
|
+
private readonly pointer;
|
|
398
|
+
private readonly pickCenter;
|
|
399
|
+
private readonly pickRight;
|
|
400
|
+
private readonly pickUp;
|
|
401
|
+
private theme;
|
|
402
|
+
private backgroundTexture;
|
|
403
|
+
private readonly resizeObserver;
|
|
404
|
+
private readonly maxVisibleEdges;
|
|
405
|
+
private readonly maxVisibleNodes;
|
|
406
|
+
private readonly viewportCulling;
|
|
407
|
+
private readonly viewportOverscan;
|
|
408
|
+
private readonly visuals;
|
|
409
|
+
private camera;
|
|
410
|
+
private controls;
|
|
411
|
+
private data;
|
|
412
|
+
private nodeIds;
|
|
413
|
+
private nodeIndices;
|
|
414
|
+
private edgeNodeIndices;
|
|
415
|
+
private canonicalEdgePositions;
|
|
416
|
+
private incidentEdgeIndices;
|
|
417
|
+
private nodePresentations;
|
|
418
|
+
private edgePresentations;
|
|
419
|
+
private spatialGrid2d;
|
|
420
|
+
private nodeMesh;
|
|
421
|
+
private nodePickMesh;
|
|
422
|
+
private edgeMesh;
|
|
423
|
+
private nodeCapacity;
|
|
424
|
+
private edgeCapacity;
|
|
425
|
+
private markerCapacity;
|
|
426
|
+
private edgeInstanceCapacity;
|
|
427
|
+
private selectedNodeIds;
|
|
428
|
+
private selectedEdgeIds;
|
|
429
|
+
private hoveredNodeIds;
|
|
430
|
+
private focusedNodeIds;
|
|
431
|
+
private dimmedNodeIds;
|
|
432
|
+
private visibleNodeSlots;
|
|
433
|
+
private visibleEdgeSlots;
|
|
434
|
+
private visibleEdgeLayouts;
|
|
435
|
+
private lastEdgeLodTier;
|
|
436
|
+
private visibleNodeIndices;
|
|
437
|
+
private pickableEdgeSegments;
|
|
438
|
+
private visibleEdgeSegmentEdgeIndices;
|
|
439
|
+
private visibleNodeCount;
|
|
440
|
+
private visibleNodeCandidateCount;
|
|
441
|
+
private densityLodActive;
|
|
442
|
+
private visibleEdgeSegmentCount;
|
|
443
|
+
private visibleEdgeCount;
|
|
444
|
+
private visibleEdgeMarkerCount;
|
|
445
|
+
private visibleEdgeCandidateCount;
|
|
446
|
+
private edgeSegmentCapacity;
|
|
447
|
+
private mode;
|
|
448
|
+
private frameRequest;
|
|
449
|
+
private cpuFrameMilliseconds;
|
|
450
|
+
private gpuFrameMilliseconds;
|
|
451
|
+
private gpuTimer;
|
|
452
|
+
private readonly viewListeners;
|
|
453
|
+
private readonly focusListeners;
|
|
454
|
+
private lastHoveredNodeId;
|
|
455
|
+
constructor(container: HTMLElement, options?: GraphraumOptions<NodeAttributes, EdgeAttributes>);
|
|
456
|
+
setData(data: GraphraumData<NodeAttributes, EdgeAttributes>): void;
|
|
457
|
+
/** Merge a topology patch without fitting or resetting the current camera. */
|
|
458
|
+
applyDataPatch(patch: GraphraumDataPatch<NodeAttributes, EdgeAttributes>): void;
|
|
459
|
+
private canAppendDataPatch;
|
|
460
|
+
private canMutateDataInPlace;
|
|
461
|
+
private mutateDataInPlace;
|
|
462
|
+
private appendDataPatch;
|
|
463
|
+
private replaceData;
|
|
464
|
+
updateNodes(updates: readonly GraphraumNodeUpdate[]): void;
|
|
465
|
+
/** Applies a transferable XYZ layout batch. Call repeatedly as a worker produces progressive positions. */
|
|
466
|
+
applyLayout(layout: GraphraumLayoutPositions): void;
|
|
467
|
+
private getGraphObjects;
|
|
468
|
+
private applyPreparedNodeUpdates;
|
|
469
|
+
/** Patches GPU edge instances for moved endpoints when the visible edge set is unchanged. */
|
|
470
|
+
private patchVisibleEdgeEndpoints;
|
|
471
|
+
setSelection(nodeIds: Iterable<string>): void;
|
|
472
|
+
/** Highlights edges without changing node selection or source graph data. */
|
|
473
|
+
setEdgeSelection(edgeIds: Iterable<string>): void;
|
|
474
|
+
/** Applies an application-owned visual state without changing source graph data. */
|
|
475
|
+
setNodeState(state: GraphraumNodeState, nodeIds: Iterable<string>): void;
|
|
476
|
+
/** One-hop neighbor node ids via incident edges (undirected adjacency). */
|
|
477
|
+
getNeighborIds(nodeId: string): string[];
|
|
478
|
+
getSelectedNodeIds(): readonly string[];
|
|
479
|
+
getHoveredNodeIds(): readonly string[];
|
|
480
|
+
/** Schedules one render on the next animation frame. Repeated calls in one frame are coalesced. */
|
|
481
|
+
render(): void;
|
|
482
|
+
setMode(mode: GraphraumMode): void;
|
|
483
|
+
getMode(): GraphraumMode;
|
|
484
|
+
getNodePresentation(nodeId: string): CompiledGraphraumPresentation | null;
|
|
485
|
+
/** Returns canvas-relative screen coordinates for a node, or null when the node does not exist. */
|
|
486
|
+
getNodeScreenPosition(nodeId: string): GraphraumScreenPosition | null;
|
|
487
|
+
/**
|
|
488
|
+
* Candidates for a budgeted DOM label layer. Importance is incident edge degree, with a boost
|
|
489
|
+
* for selected nodes so selection stays labeled. Visibility comes from screen projection.
|
|
490
|
+
*/
|
|
491
|
+
getLabelCandidates(): GraphraumLabelCandidate[];
|
|
492
|
+
/** Converts client coordinates to graph world coordinates on the z=0 plane. */
|
|
493
|
+
screenToWorld(clientX: number, clientY: number): {
|
|
494
|
+
x: number;
|
|
495
|
+
y: number;
|
|
496
|
+
z: number;
|
|
497
|
+
} | null;
|
|
498
|
+
/** Creates a bounded DOM layer for labels, a toolbar, and optional rich HTML focus cards. */
|
|
499
|
+
createOverlay(options?: GraphraumOverlayOptions): GraphraumOverlay<NodeAttributes, EdgeAttributes>;
|
|
500
|
+
/** Subscribes to camera and viewport changes. Returns an unsubscribe function. */
|
|
501
|
+
onViewChange(listener: () => void): () => boolean;
|
|
502
|
+
/** Subscribes to selection and hover changes that affect overlay focus chrome. */
|
|
503
|
+
onFocusChange(listener: () => void): () => boolean;
|
|
504
|
+
private notifyFocusChange;
|
|
505
|
+
private handlePointerMove;
|
|
506
|
+
private handlePointerLeave;
|
|
507
|
+
getEdgePresentation(edgeId: string): CompiledGraphraumPresentation | null;
|
|
508
|
+
getDiagnostics(): GraphraumDiagnostics;
|
|
509
|
+
/** Picks a node under the pointer. Prefer `pickHit` when edges must be selectable too. */
|
|
510
|
+
pick(clientX: number, clientY: number): string | null;
|
|
511
|
+
/**
|
|
512
|
+
* Picks the top-most graph element under the pointer. Nodes win over edges when both hit.
|
|
513
|
+
* 2D uses the spatial grid for nodes and world-space segment distance for edges; 3D uses
|
|
514
|
+
* the node pick mesh then the edge instance mesh.
|
|
515
|
+
*/
|
|
516
|
+
pickHit(clientX: number, clientY: number): GraphraumPickHit | null;
|
|
517
|
+
fitView(): void;
|
|
518
|
+
setTheme(theme: Partial<GraphraumTheme> | GraphraumThemeName): void;
|
|
519
|
+
setBackground(background: GraphraumBackground): void;
|
|
520
|
+
resize(): void;
|
|
521
|
+
destroy(): void;
|
|
522
|
+
private readonly requestRender;
|
|
523
|
+
private readGpuTimers;
|
|
524
|
+
private readonly handleViewChange;
|
|
525
|
+
private createCamera;
|
|
526
|
+
private createControls;
|
|
527
|
+
private pickNode;
|
|
528
|
+
private pickEdge;
|
|
529
|
+
private worldUnitsPerPixel;
|
|
530
|
+
private applySelectionColors;
|
|
531
|
+
private getNodeStateIds;
|
|
532
|
+
private setNodeStateIds;
|
|
533
|
+
private getNodeColor;
|
|
534
|
+
private getViewportBounds2d;
|
|
535
|
+
private isNodeVisible2d;
|
|
536
|
+
private disposeBackgroundTexture;
|
|
537
|
+
private createBackgroundTexture;
|
|
538
|
+
private applyBackground;
|
|
539
|
+
private materializeViewport;
|
|
540
|
+
private materializeNodes;
|
|
541
|
+
private disposeGraphObjects;
|
|
542
|
+
}
|
|
543
|
+
//#endregion
|
|
544
|
+
//#region src/label-budget.d.ts
|
|
545
|
+
interface LabelBudgetCandidate {
|
|
546
|
+
id: string;
|
|
547
|
+
importance: number;
|
|
548
|
+
visible: boolean;
|
|
549
|
+
}
|
|
550
|
+
interface SelectBudgetedLabelIdsInput {
|
|
551
|
+
candidates: readonly LabelBudgetCandidate[];
|
|
552
|
+
maxLabels: number;
|
|
553
|
+
}
|
|
554
|
+
/** Picks visible label ids by importance within a hard DOM budget. */
|
|
555
|
+
declare function selectBudgetedLabelIds({ candidates, maxLabels }: SelectBudgetedLabelIdsInput): string[];
|
|
556
|
+
interface SelectFocusLabelIdsInput {
|
|
557
|
+
/** Prefer these ids first (selected, then hovered, then neighbors) — order within each tier is free. */
|
|
558
|
+
focusIds: readonly string[];
|
|
559
|
+
candidates: readonly LabelBudgetCandidate[];
|
|
560
|
+
maxLabels: number;
|
|
561
|
+
/**
|
|
562
|
+
* When `"importance"` (default), leftover budget is filled by visible importance.
|
|
563
|
+
* When `"none"`, only focus ids are labeled.
|
|
564
|
+
*/
|
|
565
|
+
fill?: "importance" | "none";
|
|
566
|
+
}
|
|
567
|
+
/**
|
|
568
|
+
* Labels for a sparse focus set: keep focus ids that are visible, then optionally fill
|
|
569
|
+
* remaining budget from other visible candidates by importance. Focus order is preserved.
|
|
570
|
+
*/
|
|
571
|
+
declare function selectFocusLabelIds({ focusIds, candidates, maxLabels, fill }: SelectFocusLabelIdsInput): string[];
|
|
572
|
+
/** Builds an ordered focus id list: selected, then hovered, then unique neighbors. */
|
|
573
|
+
declare function orderFocusNodeIds(input: {
|
|
574
|
+
selectedIds: readonly string[];
|
|
575
|
+
hoveredIds: readonly string[];
|
|
576
|
+
neighborIds: readonly string[];
|
|
577
|
+
}): string[];
|
|
578
|
+
//#endregion
|
|
579
|
+
//#region src/node-shapes.d.ts
|
|
580
|
+
declare const graphraumNodeShapes: readonly ["circle", "square", "diamond", "hexagon", "triangle", "pill", "rounded"];
|
|
581
|
+
//#endregion
|
|
582
|
+
//#region src/overlay-budget.d.ts
|
|
583
|
+
type RichNodePolicy = "selected" | "hovered" | "focus";
|
|
584
|
+
declare function boundOverlayIds(ids: Iterable<string>, max: number, kind: string): string[];
|
|
585
|
+
declare function selectRichNodeIds(input: {
|
|
586
|
+
hoveredIds: readonly string[];
|
|
587
|
+
maxRichNodes: number;
|
|
588
|
+
policy: RichNodePolicy;
|
|
589
|
+
selectedIds: readonly string[];
|
|
590
|
+
}): string[];
|
|
591
|
+
//#endregion
|
|
592
|
+
//#region src/theme.d.ts
|
|
593
|
+
/** Dark canvas: Ink Black, Turf Green, Porcelain. */
|
|
594
|
+
declare const graphraumThemeDark: Readonly<{
|
|
595
|
+
background: string;
|
|
596
|
+
dimmedNode: string;
|
|
597
|
+
edge: string;
|
|
598
|
+
edgeOpacity: number;
|
|
599
|
+
edgeWidth: number;
|
|
600
|
+
endpointAttach: "boundary";
|
|
601
|
+
focusedNode: string;
|
|
602
|
+
hoveredNode: string;
|
|
603
|
+
node: string;
|
|
604
|
+
nodeStroke: string;
|
|
605
|
+
selectedEdge: string;
|
|
606
|
+
selectedNode: string;
|
|
607
|
+
}>;
|
|
608
|
+
/** Light canvas: Porcelain field with Turf marks and Ink selection. */
|
|
609
|
+
declare const graphraumThemeLight: Readonly<{
|
|
610
|
+
background: string;
|
|
611
|
+
dimmedNode: string;
|
|
612
|
+
edge: string;
|
|
613
|
+
edgeOpacity: number;
|
|
614
|
+
edgeWidth: number;
|
|
615
|
+
endpointAttach: "boundary";
|
|
616
|
+
focusedNode: string;
|
|
617
|
+
hoveredNode: string;
|
|
618
|
+
node: string;
|
|
619
|
+
nodeStroke: string;
|
|
620
|
+
selectedEdge: string;
|
|
621
|
+
selectedNode: string;
|
|
622
|
+
}>;
|
|
623
|
+
declare const graphraumThemes: Readonly<{
|
|
624
|
+
dark: Readonly<{
|
|
625
|
+
background: string;
|
|
626
|
+
dimmedNode: string;
|
|
627
|
+
edge: string;
|
|
628
|
+
edgeOpacity: number;
|
|
629
|
+
edgeWidth: number;
|
|
630
|
+
endpointAttach: "boundary";
|
|
631
|
+
focusedNode: string;
|
|
632
|
+
hoveredNode: string;
|
|
633
|
+
node: string;
|
|
634
|
+
nodeStroke: string;
|
|
635
|
+
selectedEdge: string;
|
|
636
|
+
selectedNode: string;
|
|
637
|
+
}>;
|
|
638
|
+
light: Readonly<{
|
|
639
|
+
background: string;
|
|
640
|
+
dimmedNode: string;
|
|
641
|
+
edge: string;
|
|
642
|
+
edgeOpacity: number;
|
|
643
|
+
edgeWidth: number;
|
|
644
|
+
endpointAttach: "boundary";
|
|
645
|
+
focusedNode: string;
|
|
646
|
+
hoveredNode: string;
|
|
647
|
+
node: string;
|
|
648
|
+
nodeStroke: string;
|
|
649
|
+
selectedEdge: string;
|
|
650
|
+
selectedNode: string;
|
|
651
|
+
}>;
|
|
652
|
+
}>;
|
|
653
|
+
/** Alias of {@link graphraumThemeDark} for backward compatibility. */
|
|
654
|
+
declare const graphraumTheme: Readonly<{
|
|
655
|
+
background: string;
|
|
656
|
+
dimmedNode: string;
|
|
657
|
+
edge: string;
|
|
658
|
+
edgeOpacity: number;
|
|
659
|
+
edgeWidth: number;
|
|
660
|
+
endpointAttach: "boundary";
|
|
661
|
+
focusedNode: string;
|
|
662
|
+
hoveredNode: string;
|
|
663
|
+
node: string;
|
|
664
|
+
nodeStroke: string;
|
|
665
|
+
selectedEdge: string;
|
|
666
|
+
selectedNode: string;
|
|
667
|
+
}>;
|
|
668
|
+
declare function resolveGraphraumTheme(input?: Partial<GraphraumTheme> | GraphraumThemeName, base?: GraphraumTheme): GraphraumTheme;
|
|
669
|
+
/** Collapse `"transparent"` onto `null` so callers have one transparent sentinel. */
|
|
670
|
+
declare function normalizeGraphraumBackground(background: GraphraumBackground): Exclude<GraphraumBackground, "transparent">;
|
|
671
|
+
declare function isTransparentGraphraumBackground(background: GraphraumBackground): boolean;
|
|
672
|
+
//#endregion
|
|
673
|
+
//#region src/visuals.d.ts
|
|
674
|
+
/** Defines typed, serializable graph visuals without coupling application data to the render loop. */
|
|
675
|
+
declare function defineVisuals<NodeAttributes = undefined, EdgeAttributes = undefined>(visuals: GraphraumVisualMapper<NodeAttributes, EdgeAttributes>): GraphraumVisualMapper<NodeAttributes, EdgeAttributes>;
|
|
676
|
+
//#endregion
|
|
677
|
+
export { type CompiledGraphraumPresentation, DEFAULT_ENDPOINT_ATTACH, DEFAULT_ENDPOINT_CLEARANCE, DEFAULT_FORCE_SETTINGS, type EndpointAttach, type EndpointOutline, type ForceLayoutRequest, type ForceSettings, type GraphologyEdgeAttributes, type GraphologyNodeAttributes, type GraphologyRenderer, Graphraum, type GraphraumBackground, type GraphraumColor, type GraphraumData, type GraphraumDataPatch, type GraphraumDiagnostics, type GraphraumEdge, type GraphraumEdgeEncoding, type GraphraumEdgeMarker, type GraphraumEdgeMarkerEnd, type GraphraumEdgePath, type GraphraumEdgeStyle, type GraphraumEdgeVisual, type GraphraumLabelCandidate, type GraphraumLayoutPositions, type GraphraumMode, type GraphraumNode, type GraphraumNodeEncoding, type GraphraumNodeGeometry, type GraphraumNodeShape, type GraphraumNodeState, type GraphraumNodeUpdate, type GraphraumNodeVisual, type GraphraumOptions, GraphraumOverlay, type GraphraumOverlayNode, type GraphraumOverlayOptions, type GraphraumPatternBackground, type GraphraumPickHit, type GraphraumPosition, type GraphraumPresentation, type GraphraumPresentationAction, type GraphraumPresentationProperty, type GraphraumPropertyValue, type GraphraumScreenPosition, type GraphraumTheme, type GraphraumThemeName, type GraphraumVisualMapper, type LabelBudgetCandidate, type RichNodePolicy, type SelectBudgetedLabelIdsInput, type SelectFocusLabelIdsInput, attachPointOnOutline, bindGraphology, boundOverlayIds, computeClusteredForcePositions, computeForcePositions, createForceSimulation, defineVisuals, forceIterationCount, graphraumEdgePaths, graphraumNodeShapes, graphraumTheme, graphraumThemeDark, graphraumThemeLight, graphraumThemes, isTransparentGraphraumBackground, normalizeGraphraumBackground, orderFocusNodeIds, resolveGraphraumTheme, selectBudgetedLabelIds, selectFocusLabelIds, selectRichNodeIds, trimEdgeEndpoints };
|