@html-graph/html-graph 3.21.0 → 4.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/dist/html-graph.d.ts +26 -169
- package/dist/html-graph.js +1061 -1157
- package/dist/html-graph.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/html-graph.d.ts
CHANGED
|
@@ -94,10 +94,6 @@ declare type BezierEdgeShapeConfig = {
|
|
|
94
94
|
} & BezierEdgeParams;
|
|
95
95
|
|
|
96
96
|
export declare class Canvas {
|
|
97
|
-
/**
|
|
98
|
-
* @deprecated access element directly instead
|
|
99
|
-
*/
|
|
100
|
-
readonly element: HTMLElement;
|
|
101
97
|
private readonly graphStore;
|
|
102
98
|
private readonly viewportStore;
|
|
103
99
|
private readonly htmlView;
|
|
@@ -131,11 +127,7 @@ export declare class Canvas {
|
|
|
131
127
|
* emits event just before destruction of canvas
|
|
132
128
|
*/
|
|
133
129
|
readonly onBeforeDestroy: EventHandler<void>;
|
|
134
|
-
constructor(
|
|
135
|
-
/**
|
|
136
|
-
* @deprecated access element directly instead
|
|
137
|
-
*/
|
|
138
|
-
element: HTMLElement, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
|
|
130
|
+
constructor(graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
|
|
139
131
|
/**
|
|
140
132
|
* adds new node
|
|
141
133
|
*/
|
|
@@ -196,7 +188,8 @@ export declare class Canvas {
|
|
|
196
188
|
}
|
|
197
189
|
|
|
198
190
|
export declare class CanvasBuilder {
|
|
199
|
-
private element;
|
|
191
|
+
private readonly element;
|
|
192
|
+
private used;
|
|
200
193
|
private canvasDefaults;
|
|
201
194
|
private dragConfig;
|
|
202
195
|
private transformConfig;
|
|
@@ -212,12 +205,7 @@ export declare class CanvasBuilder {
|
|
|
212
205
|
private hasUserDraggableEdges;
|
|
213
206
|
private boxRenderingTrigger;
|
|
214
207
|
private readonly window;
|
|
215
|
-
constructor(element
|
|
216
|
-
/**
|
|
217
|
-
* @deprecated
|
|
218
|
-
* use `new CanvasBuilder(element);` instead
|
|
219
|
-
*/
|
|
220
|
-
setElement(element: HTMLElement): CanvasBuilder;
|
|
208
|
+
constructor(element: HTMLElement);
|
|
221
209
|
/**
|
|
222
210
|
* specifies default values for graph entities
|
|
223
211
|
*/
|
|
@@ -230,21 +218,10 @@ export declare class CanvasBuilder {
|
|
|
230
218
|
* enables viewport transformable by user
|
|
231
219
|
*/
|
|
232
220
|
enableUserTransformableViewport(config?: ViewportTransformConfig): CanvasBuilder;
|
|
233
|
-
/**
|
|
234
|
-
* @deprecated
|
|
235
|
-
* use enableNodeResizeReactiveEdges instead
|
|
236
|
-
*/
|
|
237
|
-
enableResizeReactiveNodes(): CanvasBuilder;
|
|
238
221
|
/**
|
|
239
222
|
* enables automatic edges update on node resize
|
|
240
223
|
*/
|
|
241
224
|
enableNodeResizeReactiveEdges(): CanvasBuilder;
|
|
242
|
-
/**
|
|
243
|
-
* @deprecated
|
|
244
|
-
* do not use
|
|
245
|
-
* sets emitter for rendering graph inside bounded area
|
|
246
|
-
*/
|
|
247
|
-
enableBoxAreaRendering(trigger: EventSubject<RenderingBox>): CanvasBuilder;
|
|
248
225
|
/**
|
|
249
226
|
* enables built-in virtual scroll behavior, when only nodes and edges close
|
|
250
227
|
* to viewport are rendered
|
|
@@ -263,11 +240,10 @@ export declare class CanvasBuilder {
|
|
|
263
240
|
* builds final canvas
|
|
264
241
|
*/
|
|
265
242
|
build(): Canvas;
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
private reset;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
export declare class CanvasBuilderError extends Error {
|
|
246
|
+
readonly name = "CanvasBuilderError";
|
|
271
247
|
}
|
|
272
248
|
|
|
273
249
|
export declare interface CanvasDefaults {
|
|
@@ -309,6 +285,10 @@ export declare interface CanvasDefaults {
|
|
|
309
285
|
};
|
|
310
286
|
}
|
|
311
287
|
|
|
288
|
+
export declare class CanvasError extends Error {
|
|
289
|
+
readonly name = "CanvasError";
|
|
290
|
+
}
|
|
291
|
+
|
|
312
292
|
declare interface CanvasParams {
|
|
313
293
|
readonly nodes: {
|
|
314
294
|
readonly centerFn: CenterFn;
|
|
@@ -325,7 +305,7 @@ declare interface CanvasParams {
|
|
|
325
305
|
|
|
326
306
|
export declare type CenterFn = (width: number, height: number) => Point;
|
|
327
307
|
|
|
328
|
-
declare interface ConnectablePortsConfig {
|
|
308
|
+
export declare interface ConnectablePortsConfig {
|
|
329
309
|
readonly edgeShape?: EdgeShapeConfig;
|
|
330
310
|
readonly connectionTypeResolver?: ConnectionTypeResolver;
|
|
331
311
|
readonly connectionPreprocessor?: ConnectionPreprocessor;
|
|
@@ -334,12 +314,13 @@ declare interface ConnectablePortsConfig {
|
|
|
334
314
|
readonly dragPortDirection?: number | undefined;
|
|
335
315
|
readonly events?: {
|
|
336
316
|
readonly onAfterEdgeCreated?: (edgeId: unknown) => void;
|
|
337
|
-
readonly onEdgeCreationInterrupted?: (
|
|
317
|
+
readonly onEdgeCreationInterrupted?: (params: {
|
|
318
|
+
readonly staticPortId: unknown;
|
|
319
|
+
readonly isDirect: boolean;
|
|
320
|
+
}) => void;
|
|
338
321
|
readonly onEdgeCreationPrevented?: (request: AddEdgeRequest) => void;
|
|
339
322
|
};
|
|
340
323
|
}
|
|
341
|
-
export { ConnectablePortsConfig }
|
|
342
|
-
export { ConnectablePortsConfig as ConnectablePortsOptions }
|
|
343
324
|
|
|
344
325
|
export declare enum ConnectionCategory {
|
|
345
326
|
Line = "line",
|
|
@@ -406,28 +387,21 @@ declare interface DraggableEdgesConfig {
|
|
|
406
387
|
};
|
|
407
388
|
}
|
|
408
389
|
|
|
409
|
-
declare interface DraggableNodesConfig {
|
|
390
|
+
export declare interface DraggableNodesConfig {
|
|
410
391
|
readonly moveOnTop?: boolean;
|
|
411
392
|
readonly moveEdgesOnTop?: boolean;
|
|
393
|
+
readonly gridSize?: number | null;
|
|
394
|
+
readonly nodeDragVerifier?: (nodeId: unknown) => boolean;
|
|
412
395
|
readonly mouse?: {
|
|
413
396
|
readonly dragCursor?: string | null;
|
|
414
397
|
readonly mouseDownEventVerifier?: MouseEventVerifier;
|
|
415
398
|
readonly mouseUpEventVerifier?: MouseEventVerifier;
|
|
416
399
|
};
|
|
417
|
-
readonly gridSize?: number | null;
|
|
418
|
-
readonly nodeDragVerifier?: (payload: NodeDragPayload) => boolean;
|
|
419
400
|
readonly events?: {
|
|
420
|
-
readonly onNodeDrag?: (
|
|
421
|
-
|
|
422
|
-
* @deprecated
|
|
423
|
-
* use nodeDragVerifier instead
|
|
424
|
-
*/
|
|
425
|
-
readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
|
|
426
|
-
readonly onNodeDragFinished?: (payload: NodeDragPayload) => void;
|
|
401
|
+
readonly onNodeDrag?: (nodeId: unknown) => void;
|
|
402
|
+
readonly onNodeDragFinished?: (nodeId: unknown) => void;
|
|
427
403
|
};
|
|
428
404
|
}
|
|
429
|
-
export { DraggableNodesConfig as DragOptions }
|
|
430
|
-
export { DraggableNodesConfig }
|
|
431
405
|
|
|
432
406
|
export declare type DraggingEdgeResolver = (portId: unknown) => unknown | null;
|
|
433
407
|
|
|
@@ -436,8 +410,6 @@ declare interface EdgePath {
|
|
|
436
410
|
readonly midpoint: Point;
|
|
437
411
|
}
|
|
438
412
|
|
|
439
|
-
declare type EdgePathFactory = (sourceDirection: Point, targetDirection: Point, to: Point, flipX: number, flipY: number) => EdgePath;
|
|
440
|
-
|
|
441
413
|
declare interface EdgePayload {
|
|
442
414
|
readonly from: unknown;
|
|
443
415
|
readonly to: unknown;
|
|
@@ -457,16 +429,6 @@ export declare interface EdgeRenderPort {
|
|
|
457
429
|
readonly width: number;
|
|
458
430
|
readonly height: number;
|
|
459
431
|
readonly direction: number;
|
|
460
|
-
/**
|
|
461
|
-
* @deprecated
|
|
462
|
-
* use category instead
|
|
463
|
-
*/
|
|
464
|
-
readonly portId: unknown;
|
|
465
|
-
/**
|
|
466
|
-
* @deprecated
|
|
467
|
-
* use category instead
|
|
468
|
-
*/
|
|
469
|
-
readonly nodeId: unknown;
|
|
470
432
|
}
|
|
471
433
|
|
|
472
434
|
export declare interface EdgeShape {
|
|
@@ -478,20 +440,9 @@ declare type EdgeShapeConfig = BezierEdgeShapeConfig | StraightEdgeShapeConfig |
|
|
|
478
440
|
|
|
479
441
|
declare type EdgeShapeFactory = (edgeId: unknown) => EdgeShape;
|
|
480
442
|
|
|
481
|
-
|
|
482
|
-
emit(payload: T): void;
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
export declare interface EventHandler<T> {
|
|
486
|
-
subscribe(callback: (payload: T) => void): void;
|
|
487
|
-
unsubscribe(callback: (payload: T) => void): void;
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T> {
|
|
491
|
-
private readonly callbacks;
|
|
443
|
+
declare interface EventHandler<T> {
|
|
492
444
|
subscribe(callback: (payload: T) => void): void;
|
|
493
445
|
unsubscribe(callback: (payload: T) => void): void;
|
|
494
|
-
emit(payload: T): void;
|
|
495
446
|
}
|
|
496
447
|
|
|
497
448
|
export declare class Graph {
|
|
@@ -517,29 +468,14 @@ export declare class Graph {
|
|
|
517
468
|
getAllPortIds(): readonly unknown[];
|
|
518
469
|
getNodePortIds(nodeId: unknown): readonly unknown[] | null;
|
|
519
470
|
getElementPortIds(element: HTMLElement): readonly unknown[];
|
|
520
|
-
/**
|
|
521
|
-
* @deprecated
|
|
522
|
-
* use getElementPortIds instead
|
|
523
|
-
*/
|
|
524
|
-
getElementPortsIds(element: HTMLElement): readonly unknown[];
|
|
525
471
|
getAllEdgeIds(): readonly unknown[];
|
|
526
472
|
getEdge(edgeId: unknown): GraphEdge | null;
|
|
527
473
|
getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
|
|
528
474
|
getPortOutgoingEdgeIds(portId: unknown): readonly unknown[] | null;
|
|
529
|
-
/**
|
|
530
|
-
* @deprecated
|
|
531
|
-
* use getPortOutgoingEdgeIds instead
|
|
532
|
-
*/
|
|
533
|
-
getPortOutcomingEdgeIds(portId: unknown): readonly unknown[] | null;
|
|
534
475
|
getPortCycleEdgeIds(portId: unknown): readonly unknown[] | null;
|
|
535
476
|
getPortAdjacentEdgeIds(portId: unknown): readonly unknown[] | null;
|
|
536
477
|
getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
|
|
537
478
|
getNodeOutgoingEdgeIds(nodeId: unknown): readonly unknown[] | null;
|
|
538
|
-
/**
|
|
539
|
-
* @deprecated
|
|
540
|
-
* use getNodeOutgoingEdgeIds instead
|
|
541
|
-
*/
|
|
542
|
-
getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
|
|
543
479
|
getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[] | null;
|
|
544
480
|
getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[] | null;
|
|
545
481
|
}
|
|
@@ -643,11 +579,6 @@ export declare interface HorizontalEdgeParams {
|
|
|
643
579
|
readonly cycleSquareSide?: number | undefined;
|
|
644
580
|
readonly roundness?: number | undefined;
|
|
645
581
|
readonly detourDistance?: number | undefined;
|
|
646
|
-
/**
|
|
647
|
-
* @deprecated
|
|
648
|
-
* do not use
|
|
649
|
-
*/
|
|
650
|
-
readonly detourDirection?: number | undefined;
|
|
651
582
|
}
|
|
652
583
|
|
|
653
584
|
export declare class HorizontalEdgeShape implements StructuredEdgeShape {
|
|
@@ -677,10 +608,6 @@ declare type HorizontalEdgeShapeConfig = {
|
|
|
677
608
|
readonly type: "horizontal";
|
|
678
609
|
} & HorizontalEdgeParams;
|
|
679
610
|
|
|
680
|
-
export declare class HtmlGraphError extends Error {
|
|
681
|
-
readonly name = "HtmlGraphError";
|
|
682
|
-
}
|
|
683
|
-
|
|
684
611
|
declare interface HtmlView {
|
|
685
612
|
attachNode(nodeId: unknown): void;
|
|
686
613
|
detachNode(nodeId: unknown): void;
|
|
@@ -702,10 +629,7 @@ export declare class InteractiveEdgeError extends Error {
|
|
|
702
629
|
}
|
|
703
630
|
|
|
704
631
|
export declare interface InteractiveEdgeParams {
|
|
705
|
-
|
|
706
|
-
* TODO: rename to 'radius'
|
|
707
|
-
*/
|
|
708
|
-
readonly width?: number;
|
|
632
|
+
readonly distance?: number;
|
|
709
633
|
}
|
|
710
634
|
|
|
711
635
|
export declare class InteractiveEdgeShape implements StructuredEdgeShape {
|
|
@@ -724,31 +648,6 @@ export declare class InteractiveEdgeShape implements StructuredEdgeShape {
|
|
|
724
648
|
render(params: EdgeRenderParams): void;
|
|
725
649
|
}
|
|
726
650
|
|
|
727
|
-
export declare interface LineEdgeParams {
|
|
728
|
-
readonly width: number;
|
|
729
|
-
readonly color: string;
|
|
730
|
-
readonly arrowLength: number;
|
|
731
|
-
readonly arrowWidth: number;
|
|
732
|
-
readonly hasSourceArrow: boolean;
|
|
733
|
-
readonly hasTargetArrow: boolean;
|
|
734
|
-
readonly createCyclePath: EdgePathFactory;
|
|
735
|
-
readonly createDetourPath: EdgePathFactory;
|
|
736
|
-
readonly createLinePath: EdgePathFactory;
|
|
737
|
-
}
|
|
738
|
-
|
|
739
|
-
export declare class LineEdgeShape implements StructuredEdgeShape {
|
|
740
|
-
private readonly params;
|
|
741
|
-
readonly svg: SVGSVGElement;
|
|
742
|
-
readonly group: SVGGElement;
|
|
743
|
-
readonly line: SVGPathElement;
|
|
744
|
-
readonly sourceArrow: SVGPathElement | null;
|
|
745
|
-
readonly targetArrow: SVGPathElement | null;
|
|
746
|
-
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
747
|
-
private readonly afterRenderEmitter;
|
|
748
|
-
constructor(params: LineEdgeParams);
|
|
749
|
-
render(params: EdgeRenderParams): void;
|
|
750
|
-
}
|
|
751
|
-
|
|
752
651
|
export declare type MarkNodePortRequest = {
|
|
753
652
|
readonly id?: unknown | undefined;
|
|
754
653
|
readonly element: HTMLElement;
|
|
@@ -762,7 +661,7 @@ export declare interface MarkPortRequest {
|
|
|
762
661
|
readonly direction?: number;
|
|
763
662
|
}
|
|
764
663
|
|
|
765
|
-
declare class MidpointEdgeShape implements StructuredEdgeShape {
|
|
664
|
+
export declare class MidpointEdgeShape implements StructuredEdgeShape {
|
|
766
665
|
private readonly baseShape;
|
|
767
666
|
readonly midpointElement: SVGElement;
|
|
768
667
|
readonly group: SVGGElement;
|
|
@@ -771,29 +670,12 @@ declare class MidpointEdgeShape implements StructuredEdgeShape {
|
|
|
771
670
|
readonly targetArrow: SVGPathElement | null;
|
|
772
671
|
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
773
672
|
readonly svg: SVGSVGElement;
|
|
774
|
-
/**
|
|
775
|
-
* @deprecated
|
|
776
|
-
* use midpointElement instead
|
|
777
|
-
*/
|
|
778
|
-
readonly medianElement: SVGElement;
|
|
779
673
|
constructor(baseShape: StructuredEdgeShape, midpointElement: SVGElement);
|
|
780
674
|
render(params: EdgeRenderParams): void;
|
|
781
675
|
}
|
|
782
|
-
export { MidpointEdgeShape as MedianEdgeShape }
|
|
783
|
-
export { MidpointEdgeShape }
|
|
784
676
|
|
|
785
677
|
export declare type MouseEventVerifier = (event: MouseEvent) => boolean;
|
|
786
678
|
|
|
787
|
-
/**
|
|
788
|
-
* TODO: replace with node ID
|
|
789
|
-
*/
|
|
790
|
-
export declare interface NodeDragPayload {
|
|
791
|
-
readonly nodeId: unknown;
|
|
792
|
-
readonly element: HTMLElement;
|
|
793
|
-
readonly x: number;
|
|
794
|
-
readonly y: number;
|
|
795
|
-
}
|
|
796
|
-
|
|
797
679
|
declare interface NodePayload {
|
|
798
680
|
readonly element: HTMLElement;
|
|
799
681
|
x: number;
|
|
@@ -830,13 +712,6 @@ declare type Priority = ConstantPriority | IncrementalPriority | CustomPriority;
|
|
|
830
712
|
|
|
831
713
|
export declare type PriorityFn = () => number;
|
|
832
714
|
|
|
833
|
-
export declare interface RenderingBox {
|
|
834
|
-
readonly x: number;
|
|
835
|
-
readonly y: number;
|
|
836
|
-
readonly width: number;
|
|
837
|
-
readonly height: number;
|
|
838
|
-
}
|
|
839
|
-
|
|
840
715
|
export declare interface ScaleLimitPreprocessorParams {
|
|
841
716
|
readonly minContentScale: number | null;
|
|
842
717
|
readonly maxContentScale: number | null;
|
|
@@ -985,11 +860,6 @@ export declare interface VerticalEdgeParams {
|
|
|
985
860
|
readonly cycleSquareSide?: number | undefined;
|
|
986
861
|
readonly roundness?: number | undefined;
|
|
987
862
|
readonly detourDistance?: number | undefined;
|
|
988
|
-
/**
|
|
989
|
-
* @deprecated
|
|
990
|
-
* do not use
|
|
991
|
-
*/
|
|
992
|
-
readonly detourDirection?: number | undefined;
|
|
993
863
|
}
|
|
994
864
|
|
|
995
865
|
export declare class VerticalEdgeShape implements StructuredEdgeShape {
|
|
@@ -1021,11 +891,6 @@ declare type VerticalEdgeShapeConfig = {
|
|
|
1021
891
|
|
|
1022
892
|
export declare class Viewport {
|
|
1023
893
|
private readonly viewportStore;
|
|
1024
|
-
/**
|
|
1025
|
-
* @deprecated
|
|
1026
|
-
* do not use
|
|
1027
|
-
*/
|
|
1028
|
-
readonly onBeforeUpdated: EventHandler<void>;
|
|
1029
894
|
readonly onAfterUpdated: EventHandler<void>;
|
|
1030
895
|
constructor(viewportStore: ViewportStore);
|
|
1031
896
|
getViewportMatrix(): TransformState;
|
|
@@ -1037,12 +902,6 @@ declare class ViewportStore {
|
|
|
1037
902
|
private contentMatrix;
|
|
1038
903
|
private readonly afterUpdateEmitter;
|
|
1039
904
|
readonly onAfterUpdated: EventHandler<void>;
|
|
1040
|
-
private readonly beforeUpdateEmitter;
|
|
1041
|
-
/**
|
|
1042
|
-
* @deprecated
|
|
1043
|
-
* do not use
|
|
1044
|
-
*/
|
|
1045
|
-
readonly onBeforeUpdated: EventHandler<void>;
|
|
1046
905
|
constructor();
|
|
1047
906
|
getViewportMatrix(): TransformState;
|
|
1048
907
|
getContentMatrix(): TransformState;
|
|
@@ -1050,7 +909,7 @@ declare class ViewportStore {
|
|
|
1050
909
|
patchContentMatrix(matrix: PatchTransformRequest): void;
|
|
1051
910
|
}
|
|
1052
911
|
|
|
1053
|
-
declare interface ViewportTransformConfig {
|
|
912
|
+
export declare interface ViewportTransformConfig {
|
|
1054
913
|
readonly scale?: {
|
|
1055
914
|
readonly mouseWheelSensitivity?: number;
|
|
1056
915
|
readonly mouseWheelEventVerifier?: (event: WheelEvent) => boolean;
|
|
@@ -1071,8 +930,6 @@ declare interface ViewportTransformConfig {
|
|
|
1071
930
|
readonly onResizeTransformFinished?: () => void;
|
|
1072
931
|
};
|
|
1073
932
|
}
|
|
1074
|
-
export { ViewportTransformConfig as TransformOptions }
|
|
1075
|
-
export { ViewportTransformConfig }
|
|
1076
933
|
|
|
1077
934
|
export declare interface VirtualScrollConfig {
|
|
1078
935
|
readonly nodeContainingRadius: {
|