@html-graph/html-graph 2.4.0 → 3.0.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 +3 -8
- package/dist/html-graph.d.ts +5 -50
- package/dist/html-graph.js +395 -478
- package/dist/html-graph.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,7 +49,10 @@ function createNode({ name, x, y, frontPortId, backPortId }) {
|
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
const element = document.getElementById("canvas");
|
|
53
|
+
|
|
52
54
|
const canvas = new CanvasBuilder()
|
|
55
|
+
.setElement(element)
|
|
53
56
|
.setDefaults({
|
|
54
57
|
edges: {
|
|
55
58
|
shape: {
|
|
@@ -59,17 +62,9 @@ const canvas = new CanvasBuilder()
|
|
|
59
62
|
})
|
|
60
63
|
.enableUserDraggableNodes()
|
|
61
64
|
.enableUserTransformableViewport()
|
|
62
|
-
.enableVirtualScroll({
|
|
63
|
-
nodeContainingRadius: {
|
|
64
|
-
horizontal: 25,
|
|
65
|
-
vertical: 25,
|
|
66
|
-
},
|
|
67
|
-
})
|
|
68
|
-
.enableResizeReactiveNodes()
|
|
69
65
|
.build();
|
|
70
66
|
|
|
71
67
|
canvas
|
|
72
|
-
.attach(document.getElementById("canvas"))
|
|
73
68
|
.addNode(
|
|
74
69
|
createNode({
|
|
75
70
|
name: "Node 1",
|
package/dist/html-graph.d.ts
CHANGED
|
@@ -97,6 +97,7 @@ declare type BezierEdgeShapeConfig = {
|
|
|
97
97
|
} & BezierEdgeParams;
|
|
98
98
|
|
|
99
99
|
export declare class Canvas {
|
|
100
|
+
readonly element: HTMLElement;
|
|
100
101
|
private readonly controller;
|
|
101
102
|
private readonly nodeIdGenerator;
|
|
102
103
|
private readonly portIdGenerator;
|
|
@@ -110,16 +111,7 @@ export declare class Canvas {
|
|
|
110
111
|
* provides api for accessing viewport state
|
|
111
112
|
*/
|
|
112
113
|
readonly viewport: Viewport;
|
|
113
|
-
constructor(controller: CanvasController, options: CanvasDefaults);
|
|
114
|
-
/**
|
|
115
|
-
* attaches canvas to given element
|
|
116
|
-
* detaches element first when canvas is attached
|
|
117
|
-
*/
|
|
118
|
-
attach(element: HTMLElement): Canvas;
|
|
119
|
-
/**
|
|
120
|
-
* detaches canvas from element when attached
|
|
121
|
-
*/
|
|
122
|
-
detach(): Canvas;
|
|
114
|
+
constructor(element: HTMLElement, controller: CanvasController, options: CanvasDefaults);
|
|
123
115
|
/**
|
|
124
116
|
* adds node to graph
|
|
125
117
|
*/
|
|
@@ -180,6 +172,7 @@ export declare class Canvas {
|
|
|
180
172
|
}
|
|
181
173
|
|
|
182
174
|
export declare class CanvasBuilder {
|
|
175
|
+
private element;
|
|
183
176
|
private canvasDefaults;
|
|
184
177
|
private dragOptions;
|
|
185
178
|
private transformOptions;
|
|
@@ -188,15 +181,11 @@ export declare class CanvasBuilder {
|
|
|
188
181
|
private hasTransformableViewport;
|
|
189
182
|
private hasResizeReactiveNodes;
|
|
190
183
|
private boxRenderingTrigger;
|
|
184
|
+
setElement(element: HTMLElement): CanvasBuilder;
|
|
191
185
|
/**
|
|
192
186
|
* specifies default values for graph entities
|
|
193
187
|
*/
|
|
194
188
|
setDefaults(defaults: CanvasDefaults): CanvasBuilder;
|
|
195
|
-
/**
|
|
196
|
-
* @deprecated
|
|
197
|
-
* use setDefaults instead
|
|
198
|
-
*/
|
|
199
|
-
setOptions(options: CanvasDefaults): CanvasBuilder;
|
|
200
189
|
/**
|
|
201
190
|
* enables nodes draggable by user
|
|
202
191
|
*/
|
|
@@ -224,8 +213,6 @@ export declare class CanvasBuilder {
|
|
|
224
213
|
declare interface CanvasController {
|
|
225
214
|
readonly graph: Graph;
|
|
226
215
|
readonly viewport: Viewport;
|
|
227
|
-
attach(element: HTMLElement): void;
|
|
228
|
-
detach(): void;
|
|
229
216
|
addNode(node: AddNodeRequest_3): void;
|
|
230
217
|
updateNode(nodeId: unknown, request: UpdateNodeRequest_3): void;
|
|
231
218
|
removeNode(nodeId: unknown): void;
|
|
@@ -241,7 +228,7 @@ declare interface CanvasController {
|
|
|
241
228
|
destroy(): void;
|
|
242
229
|
}
|
|
243
230
|
|
|
244
|
-
declare interface CanvasDefaults {
|
|
231
|
+
export declare interface CanvasDefaults {
|
|
245
232
|
/**
|
|
246
233
|
* nodes related behavior
|
|
247
234
|
*/
|
|
@@ -279,8 +266,6 @@ declare interface CanvasDefaults {
|
|
|
279
266
|
readonly priority?: Priority;
|
|
280
267
|
};
|
|
281
268
|
}
|
|
282
|
-
export { CanvasDefaults }
|
|
283
|
-
export { CanvasDefaults as CoreOptions }
|
|
284
269
|
|
|
285
270
|
export declare type CenterFn = (width: number, height: number) => Point;
|
|
286
271
|
|
|
@@ -355,40 +340,15 @@ export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T>
|
|
|
355
340
|
export declare class Graph {
|
|
356
341
|
private readonly graphStore;
|
|
357
342
|
readonly onAfterNodeAdded: EventHandler<unknown>;
|
|
358
|
-
/**
|
|
359
|
-
* @deprecated
|
|
360
|
-
* use onAfterNodeUpdated instead
|
|
361
|
-
*/
|
|
362
|
-
readonly onAfterNodeCoordinatesUpdated: EventHandler<unknown>;
|
|
363
343
|
readonly onAfterNodeUpdated: EventHandler<unknown>;
|
|
364
344
|
readonly onAfterNodePriorityUpdated: EventHandler<unknown>;
|
|
365
345
|
readonly onBeforeNodeRemoved: EventHandler<unknown>;
|
|
366
346
|
readonly onAfterPortMarked: EventHandler<unknown>;
|
|
367
|
-
/**
|
|
368
|
-
* @deprecated
|
|
369
|
-
* use onAfterPortMarked instead
|
|
370
|
-
*/
|
|
371
|
-
readonly onAfterPortAdded: EventHandler<unknown>;
|
|
372
347
|
readonly onAfterPortUpdated: EventHandler<unknown>;
|
|
373
|
-
/**
|
|
374
|
-
* @deprecated
|
|
375
|
-
* use onAfterPortUpdated instead
|
|
376
|
-
*/
|
|
377
|
-
readonly onAfterPortDirectionUpdated: EventHandler<unknown>;
|
|
378
348
|
readonly onBeforePortUnmarked: EventHandler<unknown>;
|
|
379
|
-
/**
|
|
380
|
-
* @deprecated
|
|
381
|
-
* use onBeforePortUnmarked instead
|
|
382
|
-
*/
|
|
383
|
-
readonly onBeforePortRemoved: EventHandler<unknown>;
|
|
384
349
|
readonly onAfterEdgeAdded: EventHandler<unknown>;
|
|
385
350
|
readonly onAfterEdgeShapeUpdated: EventHandler<unknown>;
|
|
386
351
|
readonly onAfterEdgeUpdated: EventHandler<unknown>;
|
|
387
|
-
/**
|
|
388
|
-
* @deprecated
|
|
389
|
-
* use onAfterEdgeUpdated instead
|
|
390
|
-
*/
|
|
391
|
-
readonly onAfterEdgeAdjacentPortsUpdated: EventHandler<unknown>;
|
|
392
352
|
readonly onAfterEdgePriorityUpdated: EventHandler<unknown>;
|
|
393
353
|
readonly onBeforeEdgeRemoved: EventHandler<unknown>;
|
|
394
354
|
readonly onBeforeClear: EventHandler<void>;
|
|
@@ -398,11 +358,6 @@ export declare class Graph {
|
|
|
398
358
|
getPort(portId: unknown): GraphPort | null;
|
|
399
359
|
getAllPortIds(): readonly unknown[];
|
|
400
360
|
getNodePortIds(nodeId: unknown): readonly unknown[] | null;
|
|
401
|
-
/**
|
|
402
|
-
* @deprecated
|
|
403
|
-
* use graph.getPort()?.nodeId ?? null instead
|
|
404
|
-
*/
|
|
405
|
-
getPortNodeId(portId: unknown): unknown | null;
|
|
406
361
|
getAllEdgeIds(): readonly unknown[];
|
|
407
362
|
getEdge(edgeId: unknown): GraphEdge | null;
|
|
408
363
|
getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
|