@html-graph/html-graph 8.4.0 → 8.6.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.
@@ -153,104 +153,28 @@ declare type BezierEdgeShapeConfig = {
153
153
  } & BezierEdgeParams;
154
154
 
155
155
  export declare class Canvas {
156
- /**
157
- * provides api for accessing model of rendered graph
158
- */
159
156
  readonly graph: Graph;
160
- /**
161
- * provides api for accessing viewport state
162
- */
163
157
  readonly viewport: Viewport;
164
- private readonly graphStore;
165
- private readonly viewportStore;
166
- private readonly htmlView;
167
- private readonly params;
168
- private readonly nodeIdGenerator;
169
- private readonly portIdGenerator;
170
- private readonly edgeIdGenerator;
171
- private readonly onAfterNodeAdded;
172
- private readonly onAfterNodeUpdated;
173
- private readonly onAfterNodePriorityUpdated;
174
- private readonly onBeforeNodeRemoved;
175
- private readonly onAfterPortUpdated;
176
- private readonly onBeforePortUnmarked;
177
- private readonly onAfterEdgeAdded;
178
- private readonly onAfterEdgeShapeUpdated;
179
- private readonly onAfterEdgeUpdated;
180
- private readonly onAfterEdgePriorityUpdated;
181
- private readonly onBeforeEdgeRemoved;
182
- private readonly onBeforeClear;
183
- private readonly onBeforeDestroyEmitter;
158
+ private readonly graphController;
159
+ private readonly viewportController;
160
+ private readonly beforeDestroyEmitter;
184
161
  private destroyed;
185
- /**
186
- * emits event just before destruction of canvas
187
- */
188
162
  readonly onBeforeDestroy: EventHandler<void>;
189
- constructor(
190
- /**
191
- * provides api for accessing model of rendered graph
192
- */
193
- graph: Graph,
194
- /**
195
- * provides api for accessing viewport state
196
- */
197
- viewport: Viewport, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
198
- /**
199
- * adds new node
200
- */
163
+ constructor(graph: Graph, viewport: Viewport, graphController: GraphController, viewportController: ViewportController);
201
164
  addNode(request: AddNodeRequest): Canvas;
202
- /**
203
- * updates node parameters
204
- */
205
- updateNode(nodeId: Identifier, request?: UpdateNodeRequest): Canvas;
206
- /**
207
- * removes specified node
208
- * all the ports of node get unmarked
209
- * all the edges adjacent to node get removed
210
- */
165
+ updateNode(nodeId: Identifier, request?: UpdateNodeRequest | undefined): Canvas;
211
166
  removeNode(nodeId: Identifier): Canvas;
212
- /**
213
- * marks specified element as a port for specified node
214
- */
215
167
  markPort(request: MarkPortRequest): Canvas;
216
- /**
217
- * updates port and edges attached to it
218
- */
219
- updatePort(portId: Identifier, request?: UpdatePortRequest): Canvas;
220
- /**
221
- * unmarks specified port
222
- * all the edges adjacent to the port get removed
223
- */
168
+ updatePort(portId: Identifier, request?: UpdatePortRequest | undefined): Canvas;
224
169
  unmarkPort(portId: Identifier): Canvas;
225
- /**
226
- * adds new edge
227
- */
228
170
  addEdge(request: AddEdgeRequest): Canvas;
229
- /**
230
- * updates specified edge
231
- */
232
- updateEdge(edgeId: Identifier, request?: UpdateEdgeRequest): Canvas;
233
- /**
234
- * removes specified edge
235
- */
171
+ updateEdge(edgeId: Identifier, request?: UpdateEdgeRequest | undefined): Canvas;
236
172
  removeEdge(edgeId: Identifier): Canvas;
237
- /**
238
- * clears canvas from nodes and edges
239
- * canvas gets rolled back to initial state and can be reused
240
- */
241
173
  clear(): Canvas;
242
- /**
243
- * applies transformation for viewport matrix
244
- */
174
+ focus(config?: FocusConfig | undefined): Canvas;
175
+ center(target: Point, config?: CenterConfig | undefined): Canvas;
245
176
  patchViewportMatrix(request: PatchMatrixRequest): Canvas;
246
- /**
247
- * applies transformation for content matrix
248
- */
249
177
  patchContentMatrix(request: PatchMatrixRequest): Canvas;
250
- /**
251
- * destroys canvas
252
- * canvas element gets rolled back to initial state, and can not be reused
253
- */
254
178
  destroy(): void;
255
179
  }
256
180
 
@@ -282,50 +206,16 @@ export declare class CanvasBuilder {
282
206
  private readonly window;
283
207
  private readonly animationStaticNodes;
284
208
  constructor(element: HTMLElement);
285
- /**
286
- * specifies default values for graph entities
287
- */
288
209
  setDefaults(defaults: CanvasDefaults): CanvasBuilder;
289
- /**
290
- * enables nodes draggable by user
291
- */
292
210
  enableUserDraggableNodes(config?: DraggableNodesConfig): CanvasBuilder;
293
- /**
294
- * enables viewport transformable by user
295
- */
296
211
  enableUserTransformableViewport(config?: ViewportTransformConfig): CanvasBuilder;
297
- /**
298
- * enables automatic edges update on node resize
299
- */
300
212
  enableNodeResizeReactiveEdges(): CanvasBuilder;
301
- /**
302
- * enables built-in virtual scroll behavior, when only nodes and edges close
303
- * to viewport are rendered
304
- */
305
213
  enableVirtualScroll(config: VirtualScrollConfig): CanvasBuilder;
306
- /**
307
- * enables built-in background rendering
308
- */
309
214
  enableBackground(config?: BackgroundConfig): CanvasBuilder;
310
- /**
311
- * enables edge creation by dragging one port to another
312
- */
313
215
  enableUserConnectablePorts(config?: ConnectablePortsConfig): CanvasBuilder;
314
- /**
315
- * enables edges dragging by dragging one of the adjacent ports
316
- */
317
216
  enableUserDraggableEdges(config?: DraggableEdgesConfig): CanvasBuilder;
318
- /**
319
- * enables nodes positioning with specified layout
320
- */
321
217
  enableLayout(config?: LayoutConfig): CanvasBuilder;
322
- /**
323
- * enables animated nodes positioning with specified layout
324
- */
325
218
  enableAnimatedLayout(config?: AnimatedLayoutConfig): CanvasBuilder;
326
- /**
327
- * builds final canvas
328
- */
329
219
  build(): Canvas;
330
220
  private createHtmlView;
331
221
  }
@@ -371,24 +261,18 @@ export declare interface CanvasDefaults {
371
261
  */
372
262
  readonly priority?: Priority;
373
263
  };
264
+ readonly focus?: {
265
+ readonly contentOffset?: number;
266
+ readonly minContentScale?: number;
267
+ };
374
268
  }
375
269
 
376
270
  export declare class CanvasError extends Error {
377
271
  readonly name = "CanvasError";
378
272
  }
379
273
 
380
- declare interface CanvasParams {
381
- readonly nodes: {
382
- readonly centerFn: CenterFn;
383
- readonly priorityFn: PriorityFn;
384
- };
385
- readonly ports: {
386
- readonly direction: number;
387
- };
388
- readonly edges: {
389
- readonly shapeFactory: EdgeShapeFactory;
390
- readonly priorityFn: PriorityFn;
391
- };
274
+ export declare interface CenterConfig {
275
+ readonly contentScale?: number | undefined;
392
276
  }
393
277
 
394
278
  export declare type CenterFn = (width: number, height: number) => Point;
@@ -422,6 +306,10 @@ export declare type ConnectionTypeResolver = (portId: Identifier) => "direct" |
422
306
 
423
307
  declare type ConstantPriority = number;
424
308
 
309
+ export declare type CoordsTransformConfig = CoordsTransformFn | TransformDeclaration | readonly TransformDeclaration[];
310
+
311
+ export declare type CoordsTransformFn = (point: Point) => Point;
312
+
425
313
  declare type CustomPriority = PriorityFn;
426
314
 
427
315
  export declare interface Dimensions {
@@ -543,6 +431,12 @@ export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T>
543
431
  emit(payload: T): void;
544
432
  }
545
433
 
434
+ export declare type FocusConfig = {
435
+ readonly contentOffset?: number | undefined;
436
+ readonly nodes?: Iterable<Identifier> | undefined;
437
+ readonly minContentScale?: number | undefined;
438
+ } | Iterable<Identifier>;
439
+
546
440
  export declare class Graph {
547
441
  private readonly graphStore;
548
442
  readonly onAfterNodeAdded: EventHandler<Identifier>;
@@ -581,6 +475,53 @@ export declare class Graph {
581
475
  getNodeAdjacentEdgeIds(nodeId: Identifier): readonly Identifier[];
582
476
  }
583
477
 
478
+ declare class GraphController {
479
+ private readonly graphStore;
480
+ private readonly htmlView;
481
+ private readonly params;
482
+ private readonly nodeIdGenerator;
483
+ private readonly portIdGenerator;
484
+ private readonly edgeIdGenerator;
485
+ private readonly onAfterNodeAdded;
486
+ private readonly onAfterNodeUpdated;
487
+ private readonly onAfterNodePriorityUpdated;
488
+ private readonly onBeforeNodeRemoved;
489
+ private readonly onAfterPortUpdated;
490
+ private readonly onBeforePortUnmarked;
491
+ private readonly onAfterEdgeAdded;
492
+ private readonly onAfterEdgeShapeUpdated;
493
+ private readonly onAfterEdgeUpdated;
494
+ private readonly onAfterEdgePriorityUpdated;
495
+ private readonly onBeforeEdgeRemoved;
496
+ private readonly onBeforeClear;
497
+ constructor(graphStore: GraphStore, htmlView: HtmlView, params: GraphControllerParams);
498
+ addNode(request: AddNodeRequest): void;
499
+ updateNode(nodeId: Identifier, request?: UpdateNodeRequest | undefined): void;
500
+ removeNode(nodeId: Identifier): void;
501
+ markPort(request: MarkPortRequest): void;
502
+ updatePort(portId: Identifier, request?: UpdatePortRequest | undefined): void;
503
+ unmarkPort(portId: Identifier): void;
504
+ addEdge(request: AddEdgeRequest): void;
505
+ updateEdge(edgeId: Identifier, request?: UpdateEdgeRequest | undefined): void;
506
+ removeEdge(edgeId: Identifier): void;
507
+ clear(): void;
508
+ destroy(): void;
509
+ }
510
+
511
+ declare interface GraphControllerParams {
512
+ readonly nodes: {
513
+ readonly centerFn: CenterFn;
514
+ readonly priorityFn: PriorityFn;
515
+ };
516
+ readonly ports: {
517
+ readonly direction: number;
518
+ };
519
+ readonly edges: {
520
+ readonly shapeFactory: EdgeShapeFactory;
521
+ readonly priorityFn: PriorityFn;
522
+ };
523
+ }
524
+
584
525
  export declare interface GraphEdge {
585
526
  readonly from: Identifier;
586
527
  readonly to: Identifier;
@@ -608,7 +549,7 @@ declare class GraphStore {
608
549
  private readonly edges;
609
550
  private readonly nodesElementsMap;
610
551
  private readonly portIncomingEdges;
611
- private readonly portOutcomingEdges;
552
+ private readonly portOutgoingEdges;
612
553
  private readonly portCycleEdges;
613
554
  private readonly elementPorts;
614
555
  private readonly afterNodeAddedEmitter;
@@ -761,25 +702,26 @@ declare type LayoutAlgorithmConfig = {
761
702
  readonly type: "custom";
762
703
  readonly instance: LayoutAlgorithm;
763
704
  } | {
764
- readonly type: "forceDirected";
765
- readonly dtSec?: number;
766
- readonly maxIterations?: number;
767
- readonly seed?: string;
768
- readonly nodeCharge?: number;
769
- readonly nodeMass?: number;
770
- readonly edgeEquilibriumLength?: number;
771
- readonly edgeStiffness?: number;
772
- readonly convergenceVelocity?: number;
773
- readonly maxForce?: number;
774
- readonly nodeForceCoefficient?: number;
705
+ readonly type?: "forceDirected";
706
+ readonly dtSec?: number | undefined;
707
+ readonly maxIterations?: number | undefined;
708
+ readonly seed?: string | undefined;
709
+ readonly nodeCharge?: number | undefined;
710
+ readonly nodeMass?: number | undefined;
711
+ readonly edgeEquilibriumLength?: number | undefined;
712
+ readonly edgeStiffness?: number | undefined;
713
+ readonly convergenceVelocity?: number | undefined;
714
+ readonly maxForce?: number | undefined;
715
+ readonly nodeForceCoefficient?: number | undefined;
775
716
  readonly barnesHut?: {
776
- readonly theta?: number;
777
- readonly areaRadiusThreshold?: number;
778
- };
717
+ readonly theta?: number | undefined;
718
+ readonly areaRadiusThreshold?: number | undefined;
719
+ } | undefined;
779
720
  } | {
780
721
  readonly type: "hierarchical";
781
- readonly layerWidth?: number;
782
- readonly layerSpace?: number;
722
+ readonly layerWidth?: number | undefined;
723
+ readonly layerSpace?: number | undefined;
724
+ readonly transform?: CoordsTransformConfig | undefined;
783
725
  };
784
726
 
785
727
  export declare interface LayoutAlgorithmParams {
@@ -861,6 +803,8 @@ export declare interface ScaleLimitPreprocessorParams {
861
803
  readonly maxContentScale: number | null;
862
804
  }
863
805
 
806
+ declare type ScheduleFn = (callback: () => void) => void;
807
+
864
808
  export declare interface ShiftLimitPreprocessorParams {
865
809
  readonly minX: number | null;
866
810
  readonly maxX: number | null;
@@ -951,11 +895,25 @@ export declare interface StructuredEdgeShape extends EdgeShape {
951
895
  readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
952
896
  }
953
897
 
954
- export declare interface TransformPayload {
898
+ export declare type TransformDeclaration = {
899
+ readonly a?: number | undefined;
900
+ readonly b?: number | undefined;
901
+ readonly c?: number | undefined;
902
+ readonly d?: number | undefined;
903
+ readonly e?: number | undefined;
904
+ readonly f?: number | undefined;
905
+ } | {
906
+ readonly shift: Point;
907
+ } | {
955
908
  readonly scale: number;
956
- readonly x: number;
957
- readonly y: number;
958
- }
909
+ readonly origin?: Point;
910
+ } | {
911
+ readonly rotate: number;
912
+ readonly origin?: Point;
913
+ } | {
914
+ readonly mirror: number;
915
+ readonly origin?: Point;
916
+ };
959
917
 
960
918
  declare type TransformPreprocessorConfig = {
961
919
  readonly type: "scale-limit";
@@ -969,11 +927,11 @@ declare type TransformPreprocessorConfig = {
969
927
  readonly maxY?: number;
970
928
  } | TransformPreprocessorFn;
971
929
 
972
- export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
930
+ export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformState;
973
931
 
974
932
  export declare interface TransformPreprocessorParams {
975
- readonly prevTransform: TransformPayload;
976
- readonly nextTransform: TransformPayload;
933
+ readonly prevTransform: TransformState;
934
+ readonly nextTransform: TransformState;
977
935
  readonly canvasWidth: number;
978
936
  readonly canvasHeight: number;
979
937
  }
@@ -983,6 +941,8 @@ declare interface TransformState {
983
941
  readonly x: number;
984
942
  readonly y: number;
985
943
  }
944
+ export { TransformState as TransformPayload }
945
+ export { TransformState }
986
946
 
987
947
  export declare interface UpdateEdgeRequest {
988
948
  readonly from?: Identifier | undefined;
@@ -1072,6 +1032,27 @@ export declare class Viewport {
1072
1032
  createViewportCoords(contentCoords: Point): Point;
1073
1033
  }
1074
1034
 
1035
+ declare class ViewportController {
1036
+ private readonly graphStore;
1037
+ private readonly viewportStore;
1038
+ private readonly params;
1039
+ constructor(graphStore: GraphStore, viewportStore: ViewportStore, params: ViewportControllerParams);
1040
+ patchViewportMatrix(request: PatchMatrixRequest): void;
1041
+ patchContentMatrix(request: PatchMatrixRequest): void;
1042
+ center(target: Point, config?: CenterConfig | undefined): void;
1043
+ focus(config?: FocusConfig | undefined): void;
1044
+ destroy(): void;
1045
+ private navigate;
1046
+ }
1047
+
1048
+ declare interface ViewportControllerParams {
1049
+ readonly focus: {
1050
+ readonly contentOffset: number;
1051
+ readonly minContentScale: number;
1052
+ readonly schedule: ScheduleFn;
1053
+ };
1054
+ }
1055
+
1075
1056
  declare class ViewportStore {
1076
1057
  private readonly host;
1077
1058
  private viewportMatrix;