@html-graph/html-graph 0.0.60 → 0.1.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 CHANGED
@@ -6,20 +6,21 @@
6
6
 
7
7
  ![CI](https://github.com/html-graph/html-graph/actions/workflows/ci.yml/badge.svg?branch=master)
8
8
 
9
- <a target="_blank" href="https://html-graph.github.io/use-cases/20-advanced-demo/index.html">
9
+ <a target="_blank" href="https://html-graph.github.io/use-cases/020-advanced-demo/">
10
10
  <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
11
11
  </a>
12
12
 
13
13
  Instead of connecting nodes directly this library uses concept of ports, which provide greater fexibility at managing edges.
14
14
  Port is an entity of a node to which edge can be attached to.
15
15
 
16
- Visit <a target="_blank" href="https://html-graph.github.io">use cases</a> and [use cases implementation](use-cases).
16
+ Visit <a target="_blank" href="https://html-graph.github.io/use-cases/">use cases</a> and [use cases implementation](use-cases).
17
17
 
18
18
  ## Features:
19
19
 
20
20
  - easy nodes customization using HTML
21
21
  - wide configuration options out of the box
22
- - draggable and scalable canvas with draggable nodes
22
+ - draggable and scalable canvas
23
+ - draggable and resizable nodes
23
24
  - exhaustive set of use cases
24
25
  - typescript support
25
26
  - mobile devices support
@@ -43,6 +44,7 @@ const canvas = new HtmlGraphBuilder()
43
44
  })
44
45
  .setUserDraggableNodes()
45
46
  .setUserTransformableCanvas()
47
+ .setResizeReactiveNodes()
46
48
  .build();
47
49
 
48
50
  function createNode({ name, x, y, frontPortId, backPortId }) {
package/dist/main.d.ts CHANGED
@@ -6,6 +6,14 @@ export declare interface AddEdgeRequest {
6
6
  readonly priority?: number;
7
7
  }
8
8
 
9
+ declare interface AddEdgeRequest_2 {
10
+ readonly edgeId: unknown;
11
+ readonly from: unknown;
12
+ readonly to: unknown;
13
+ readonly shape: EdgeShape;
14
+ readonly priority: number;
15
+ }
16
+
9
17
  export declare type AddNodePorts = Iterable<MarkNodePortRequest>;
10
18
 
11
19
  export declare interface AddNodeRequest {
@@ -18,6 +26,25 @@ export declare interface AddNodeRequest {
18
26
  readonly priority?: number;
19
27
  }
20
28
 
29
+ declare interface AddNodeRequest_2 {
30
+ readonly nodeId: unknown;
31
+ readonly element: HTMLElement;
32
+ readonly x: number;
33
+ readonly y: number;
34
+ readonly centerFn: CenterFn;
35
+ readonly priority: number;
36
+ }
37
+
38
+ declare interface AddPortRequest {
39
+ readonly portId: unknown;
40
+ readonly nodeId: unknown;
41
+ readonly element: HTMLElement;
42
+ readonly centerFn: CenterFn;
43
+ readonly direction: number;
44
+ }
45
+
46
+ export declare type BeforeTransformStartedFn = () => void;
47
+
21
48
  export declare class BezierEdgeShape implements EdgeShape {
22
49
  private readonly curvature;
23
50
  private readonly arrowLength;
@@ -63,7 +90,7 @@ export declare interface Canvas {
63
90
  /**
64
91
  * updates node absolute coordinates
65
92
  */
66
- updateNode(nodeId: unknown, request: UpdateNodeRequest): Canvas;
93
+ updateNode(nodeId: unknown, request?: UpdateNodeRequest): Canvas;
67
94
  /**
68
95
  * removes node from graph
69
96
  * all the ports of node get unmarked
@@ -77,12 +104,12 @@ export declare interface Canvas {
77
104
  /**
78
105
  * updates port and attached edges
79
106
  */
80
- updatePort(portId: string, request?: UpdatePortRequest): Canvas;
107
+ updatePortMark(portId: unknown, request?: UpdatePortMarkRequest): Canvas;
81
108
  /**
82
109
  * ummarks element as port of node
83
110
  * all the edges adjacent to port get removed
84
111
  */
85
- unmarkPort(portId: string): Canvas;
112
+ unmarkPort(portId: unknown): Canvas;
86
113
  /**
87
114
  * adds edge to graph
88
115
  */
@@ -90,7 +117,7 @@ export declare interface Canvas {
90
117
  /**
91
118
  * updates edge
92
119
  */
93
- updateEdge(edgeId: unknown, request: UpdateEdgeRequest): Canvas;
120
+ updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): Canvas;
94
121
  /**
95
122
  * removes edge from graph
96
123
  */
@@ -132,24 +159,23 @@ export declare class CanvasCore implements Canvas {
132
159
  private readonly apiOptions?;
133
160
  readonly transformation: PublicViewportTransformer;
134
161
  readonly model: PublicGraphStore;
135
- private readonly di;
162
+ private readonly canvasController;
136
163
  private readonly edgeShapeFactory;
137
- private readonly nodeResizeObserverFactory;
138
164
  constructor(apiOptions?: CoreOptions | undefined);
139
- addNode(node: AddNodeRequest): CanvasCore;
140
- updateNode(nodeId: unknown, request: UpdateNodeRequest): CanvasCore;
165
+ attach(element: HTMLElement): CanvasCore;
166
+ detach(): CanvasCore;
167
+ addNode(request: AddNodeRequest): CanvasCore;
168
+ updateNode(nodeId: unknown, request?: UpdateNodeRequest): CanvasCore;
141
169
  removeNode(nodeId: unknown): CanvasCore;
142
- markPort(port: MarkPortRequest): CanvasCore;
143
- updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
144
- unmarkPort(portId: string): CanvasCore;
145
170
  addEdge(edge: AddEdgeRequest): CanvasCore;
146
- updateEdge(edgeId: unknown, request: UpdateEdgeRequest): CanvasCore;
171
+ updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
147
172
  removeEdge(edgeId: unknown): CanvasCore;
173
+ markPort(port: MarkPortRequest): CanvasCore;
174
+ updatePortMark(portId: string, request?: UpdatePortMarkRequest): CanvasCore;
175
+ unmarkPort(portId: string): CanvasCore;
148
176
  patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
149
177
  patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
150
178
  clear(): CanvasCore;
151
- attach(element: HTMLElement): CanvasCore;
152
- detach(): CanvasCore;
153
179
  destroy(): void;
154
180
  }
155
181
 
@@ -202,59 +228,59 @@ export declare interface CoreOptions {
202
228
  }
203
229
 
204
230
  export declare const createBezierEdgeShapeFactory: (options: {
205
- color: string;
206
- width: number;
207
- arrowLength: number;
208
- arrowWidth: number;
209
- curvature: number;
210
- hasSourceArrow: boolean;
211
- hasTargetArrow: boolean;
212
- cycleRadius: number;
213
- smallCycleRadius: number;
214
- detourDistance: number;
215
- detourDirection: number;
231
+ readonly color: string;
232
+ readonly width: number;
233
+ readonly arrowLength: number;
234
+ readonly arrowWidth: number;
235
+ readonly curvature: number;
236
+ readonly hasSourceArrow: boolean;
237
+ readonly hasTargetArrow: boolean;
238
+ readonly cycleRadius: number;
239
+ readonly smallCycleRadius: number;
240
+ readonly detourDistance: number;
241
+ readonly detourDirection: number;
216
242
  }) => EdgeShapeFactory;
217
243
 
218
244
  export declare const createHorizontalEdgeShapeFactory: (options: {
219
- color: string;
220
- width: number;
221
- arrowLength: number;
222
- arrowWidth: number;
223
- arrowOffset: number;
224
- hasSourceArrow: boolean;
225
- hasTargetArrow: boolean;
226
- cycleSquareSide: number;
227
- roundness: number;
228
- detourDistance: number;
229
- detourDirection: number;
245
+ readonly color: string;
246
+ readonly width: number;
247
+ readonly arrowLength: number;
248
+ readonly arrowWidth: number;
249
+ readonly arrowOffset: number;
250
+ readonly hasSourceArrow: boolean;
251
+ readonly hasTargetArrow: boolean;
252
+ readonly cycleSquareSide: number;
253
+ readonly roundness: number;
254
+ readonly detourDistance: number;
255
+ readonly detourDirection: number;
230
256
  }) => EdgeShapeFactory;
231
257
 
232
258
  export declare const createStraightEdgeShareFactory: (options: {
233
- color: string;
234
- width: number;
235
- arrowLength: number;
236
- arrowWidth: number;
237
- arrowOffset: number;
238
- hasSourceArrow: boolean;
239
- hasTargetArrow: boolean;
240
- cycleSquareSide: number;
241
- roundness: number;
242
- detourDistance: number;
243
- detourDirection: number;
259
+ readonly color: string;
260
+ readonly width: number;
261
+ readonly arrowLength: number;
262
+ readonly arrowWidth: number;
263
+ readonly arrowOffset: number;
264
+ readonly hasSourceArrow: boolean;
265
+ readonly hasTargetArrow: boolean;
266
+ readonly cycleSquareSide: number;
267
+ readonly roundness: number;
268
+ readonly detourDistance: number;
269
+ readonly detourDirection: number;
244
270
  }) => EdgeShapeFactory;
245
271
 
246
272
  export declare const createVerticalEdgeShapeFactory: (options: {
247
- color: string;
248
- width: number;
249
- arrowLength: number;
250
- arrowWidth: number;
251
- arrowOffset: number;
252
- hasSourceArrow: boolean;
253
- hasTargetArrow: boolean;
254
- cycleSquareSide: number;
255
- roundness: number;
256
- detourDistance: number;
257
- detourDirection: number;
273
+ readonly color: string;
274
+ readonly width: number;
275
+ readonly arrowLength: number;
276
+ readonly arrowWidth: number;
277
+ readonly arrowOffset: number;
278
+ readonly hasSourceArrow: boolean;
279
+ readonly hasTargetArrow: boolean;
280
+ readonly cycleSquareSide: number;
281
+ readonly roundness: number;
282
+ readonly detourDistance: number;
283
+ readonly detourDirection: number;
258
284
  }) => EdgeShapeFactory;
259
285
 
260
286
  declare interface CustomEdgeShape {
@@ -326,14 +352,21 @@ export declare class DetourStraightEdgeShape implements EdgeShape {
326
352
  }
327
353
 
328
354
  export declare interface DragOptions {
329
- grabPriorityStrategy?: "freeze" | "move-on-top";
330
- dragCursor?: string | null;
331
- events?: {
332
- onNodeDrag?: (payload: NodeDragPayload) => void;
333
- onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
355
+ readonly moveOnTop?: boolean;
356
+ readonly dragCursor?: string | null;
357
+ readonly events?: {
358
+ readonly onNodeDrag?: (payload: NodeDragPayload) => void;
359
+ readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
334
360
  };
335
361
  }
336
362
 
363
+ declare interface EdgePayload {
364
+ readonly from: unknown;
365
+ readonly to: unknown;
366
+ shape: EdgeShape;
367
+ priority: number;
368
+ }
369
+
337
370
  export declare interface EdgeShape {
338
371
  readonly svg: SVGSVGElement;
339
372
  update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
@@ -369,6 +402,40 @@ export declare interface GraphPort {
369
402
  readonly direction: number;
370
403
  }
371
404
 
405
+ declare class GraphStore {
406
+ private readonly nodes;
407
+ private readonly ports;
408
+ private readonly nodePorts;
409
+ private readonly portNodeId;
410
+ private readonly edges;
411
+ private readonly incommingEdges;
412
+ private readonly outcommingEdges;
413
+ private readonly cycleEdges;
414
+ addNode(request: AddNodeRequest_2): void;
415
+ getAllNodeIds(): readonly unknown[];
416
+ getNode(nodeId: unknown): NodePayload | undefined;
417
+ removeNode(nodeId: unknown): void;
418
+ addPort(request: AddPortRequest): void;
419
+ getPort(portId: unknown): PortPayload | undefined;
420
+ getAllPortIds(): readonly unknown[];
421
+ getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
422
+ getPortNodeId(portId: unknown): unknown | undefined;
423
+ removePort(portId: unknown): void;
424
+ addEdge(request: AddEdgeRequest_2): void;
425
+ getAllEdgeIds(): readonly unknown[];
426
+ getEdge(edgeId: unknown): EdgePayload | undefined;
427
+ removeEdge(edgeId: unknown): void;
428
+ clear(): void;
429
+ getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
430
+ getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
431
+ getPortCycleEdgeIds(portId: unknown): readonly unknown[];
432
+ getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
433
+ getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
434
+ getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
435
+ getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
436
+ getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
437
+ }
438
+
372
439
  export declare class HorizontalEdgeShape implements EdgeShape {
373
440
  private readonly arrowLength;
374
441
  private readonly arrowWidth;
@@ -405,9 +472,11 @@ export declare class HtmlGraphBuilder {
405
472
  private transformOptions;
406
473
  private isDraggable;
407
474
  private isTransformable;
475
+ private hasResizeReactiveNodes;
408
476
  setOptions(options: CoreOptions): HtmlGraphBuilder;
409
477
  setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
410
478
  setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
479
+ setResizableReactiveNodes(): HtmlGraphBuilder;
411
480
  build(): Canvas;
412
481
  }
413
482
 
@@ -439,47 +508,109 @@ export declare interface NodeDragPayload {
439
508
  readonly y: number;
440
509
  }
441
510
 
511
+ declare interface NodePayload {
512
+ element: HTMLElement;
513
+ x: number;
514
+ y: number;
515
+ centerFn: CenterFn;
516
+ priority: number;
517
+ }
518
+
442
519
  export declare interface PatchMatrixRequest {
443
520
  readonly scale?: number;
444
521
  readonly dx?: number;
445
522
  readonly dy?: number;
446
523
  }
447
524
 
525
+ declare interface PatchTransformRequest {
526
+ readonly scale?: number;
527
+ readonly dx?: number;
528
+ readonly dy?: number;
529
+ }
530
+
448
531
  export declare interface Point {
449
532
  readonly x: number;
450
533
  readonly y: number;
451
534
  }
452
535
 
536
+ declare interface PortPayload {
537
+ readonly element: HTMLElement;
538
+ centerFn: CenterFn;
539
+ direction: number;
540
+ }
541
+
453
542
  declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
454
543
 
455
544
  export declare type PriorityFn = () => number;
456
545
 
457
- export declare interface PublicGraphStore {
546
+ export declare class PublicGraphStore {
547
+ private readonly graphStore;
548
+ constructor(graphStore: GraphStore);
549
+ getNode(nodeId: unknown): GraphNode | null;
458
550
  getAllNodeIds(): readonly unknown[];
551
+ getPort(portId: unknown): GraphPort | null;
459
552
  getAllPortIds(): readonly unknown[];
460
- getNode(nodeId: unknown): GraphNode | null;
461
553
  getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
462
- getPort(portId: unknown): GraphPort | null;
463
554
  getPortNodeId(portId: unknown): unknown | null;
464
555
  getAllEdgeIds(): readonly unknown[];
465
556
  getEdge(edgeId: unknown): GraphEdge | null;
466
- getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
467
- getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
468
557
  getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
469
558
  getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
470
559
  getPortCycleEdgeIds(portId: unknown): readonly unknown[];
560
+ getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
471
561
  getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
472
562
  getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
473
563
  getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
564
+ getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
474
565
  }
475
566
 
476
- export declare interface PublicViewportTransformer {
567
+ export declare class PublicViewportTransformer {
568
+ private readonly transformer;
569
+ constructor(transformer: ViewportTransformer);
477
570
  getViewportMatrix(): TransformState;
478
571
  getContentMatrix(): TransformState;
479
572
  }
480
573
 
574
+ export declare class ResizeReactiveNodesCanvas implements Canvas {
575
+ private readonly canvas;
576
+ readonly transformation: PublicViewportTransformer;
577
+ readonly model: PublicGraphStore;
578
+ private readonly nodes;
579
+ private readonly nodeIdGenerator;
580
+ private readonly nodesResizeObserver;
581
+ constructor(canvas: Canvas);
582
+ attach(element: HTMLElement): ResizeReactiveNodesCanvas;
583
+ detach(): ResizeReactiveNodesCanvas;
584
+ addNode(request: AddNodeRequest): ResizeReactiveNodesCanvas;
585
+ updateNode(nodeId: unknown, request?: UpdateNodeRequest): ResizeReactiveNodesCanvas;
586
+ removeNode(nodeId: unknown): ResizeReactiveNodesCanvas;
587
+ markPort(port: MarkPortRequest): ResizeReactiveNodesCanvas;
588
+ updatePortMark(portId: string, request?: UpdatePortMarkRequest): ResizeReactiveNodesCanvas;
589
+ unmarkPort(portId: string): ResizeReactiveNodesCanvas;
590
+ addEdge(edge: AddEdgeRequest): ResizeReactiveNodesCanvas;
591
+ updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): ResizeReactiveNodesCanvas;
592
+ removeEdge(edgeId: unknown): ResizeReactiveNodesCanvas;
593
+ patchViewportMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
594
+ patchContentMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
595
+ clear(): ResizeReactiveNodesCanvas;
596
+ destroy(): void;
597
+ private reactNodeChange;
598
+ }
599
+
600
+ export declare interface ScaleLimitPreprocessorParams {
601
+ readonly minContentScale: number | null;
602
+ readonly maxContentScale: number | null;
603
+ }
604
+
481
605
  declare type SharedIncrementalPriority = "shared-incremental";
482
606
 
607
+ export declare interface ShiftLimitPreprocessorParams {
608
+ readonly minX: number | null;
609
+ readonly maxX: number | null;
610
+ readonly minY: number | null;
611
+ readonly maxY: number | null;
612
+ }
613
+
483
614
  export declare class StraightEdgeShape implements EdgeShape {
484
615
  private readonly arrowLength;
485
616
  private readonly arrowWidth;
@@ -514,15 +645,14 @@ export declare type TransformFinishedFn = () => void;
514
645
 
515
646
  export declare interface TransformOptions {
516
647
  readonly scale?: {
517
- readonly enabled?: boolean;
518
648
  readonly wheelSensitivity?: number;
519
649
  };
520
650
  readonly shift?: {
521
- readonly enabled?: boolean;
522
651
  readonly cursor?: string | null;
523
652
  };
524
653
  readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
525
654
  readonly events?: {
655
+ readonly onBeforeTransformStarted?: BeforeTransformStartedFn;
526
656
  readonly onTransformFinished?: TransformFinishedFn;
527
657
  };
528
658
  }
@@ -533,7 +663,7 @@ export declare interface TransformPayload {
533
663
  readonly dy: number;
534
664
  }
535
665
 
536
- export declare type TransformPreprocessorFn = (prevTransform: TransformPayload, nextTransform: TransformPayload, canvasWidth: number, canvasHeight: number) => TransformPayload;
666
+ export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
537
667
 
538
668
  declare type TransformPreprocessorOption = {
539
669
  readonly type: "scale-limit";
@@ -545,10 +675,14 @@ declare type TransformPreprocessorOption = {
545
675
  readonly maxX?: number;
546
676
  readonly minY?: number;
547
677
  readonly maxY?: number;
548
- } | {
549
- readonly type: "custom";
550
- readonly preprocessorFn: TransformPreprocessorFn;
551
- };
678
+ } | TransformPreprocessorFn;
679
+
680
+ export declare interface TransformPreprocessorParams {
681
+ readonly prevTransform: TransformPayload;
682
+ readonly nextTransform: TransformPayload;
683
+ readonly canvasWidth: number;
684
+ readonly canvasHeight: number;
685
+ }
552
686
 
553
687
  declare interface TransformState {
554
688
  readonly scale: number;
@@ -568,7 +702,7 @@ declare interface UpdateNodeRequest {
568
702
  readonly centerFn?: CenterFn;
569
703
  }
570
704
 
571
- declare interface UpdatePortRequest {
705
+ export declare interface UpdatePortMarkRequest {
572
706
  readonly direction?: number;
573
707
  readonly centerFn?: CenterFn;
574
708
  }
@@ -584,30 +718,29 @@ export declare class UserDraggableNodesCanvas implements Canvas {
584
718
  private onBeforeNodeDrag;
585
719
  private readonly nodeIdGenerator;
586
720
  private element;
587
- private readonly onCanvasMouseUp;
588
- private readonly onCanvasMouseMove;
589
- private readonly onCanvasTouchStart;
590
- private readonly onCanvasTouchMove;
591
- private readonly onCanvasTouchEnd;
721
+ private readonly onWindowMouseMove;
722
+ private readonly onWindowMouseUp;
723
+ private readonly onWindowTouchMove;
724
+ private readonly onWindowTouchFinish;
592
725
  private previousTouchCoords;
593
726
  private readonly freezePriority;
594
727
  private readonly window;
595
728
  private readonly dragCursor;
596
729
  constructor(canvas: Canvas, dragOptions?: DragOptions);
730
+ attach(element: HTMLElement): UserDraggableNodesCanvas;
731
+ detach(): UserDraggableNodesCanvas;
597
732
  addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
598
- updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
733
+ updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
599
734
  removeNode(nodeId: unknown): UserDraggableNodesCanvas;
600
735
  markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
601
- updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
736
+ updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserDraggableNodesCanvas;
602
737
  unmarkPort(portId: string): UserDraggableNodesCanvas;
603
738
  addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
604
- updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
739
+ updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserDraggableNodesCanvas;
605
740
  removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
606
741
  patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
607
742
  patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
608
743
  clear(): UserDraggableNodesCanvas;
609
- attach(element: HTMLElement): UserDraggableNodesCanvas;
610
- detach(): UserDraggableNodesCanvas;
611
744
  destroy(): void;
612
745
  private dragNode;
613
746
  private updateMaxNodePriority;
@@ -620,43 +753,36 @@ export declare class UserDraggableNodesCanvas implements Canvas {
620
753
 
621
754
  export declare class UserTransformableCanvas implements Canvas {
622
755
  private readonly canvas;
623
- private readonly options?;
624
756
  readonly model: PublicGraphStore;
625
757
  readonly transformation: PublicViewportTransformer;
626
758
  private element;
627
759
  private prevTouches;
628
- private readonly onTransformFinished;
629
- private readonly transformPreprocessor;
630
- private readonly isScalable;
631
- private readonly isShiftable;
632
- private readonly wheelSensitivity;
633
760
  private window;
634
761
  private readonly onMouseDown;
635
- private readonly onMouseMove;
636
- private readonly onMouseUp;
762
+ private readonly onWindowMouseMove;
763
+ private readonly onWindowMouseUp;
637
764
  private readonly onWheelScroll;
638
765
  private readonly onTouchStart;
639
- private readonly onTouchMove;
640
- private readonly onTouchEnd;
766
+ private readonly onWindowTouchMove;
767
+ private readonly onWindowTouchFinish;
641
768
  private readonly observer;
642
- private readonly shiftCursor;
643
- constructor(canvas: Canvas, options?: TransformOptions | undefined);
769
+ private readonly options;
770
+ constructor(canvas: Canvas, transformOptions?: TransformOptions);
771
+ attach(element: HTMLElement): UserTransformableCanvas;
772
+ detach(): UserTransformableCanvas;
644
773
  addNode(node: AddNodeRequest): UserTransformableCanvas;
645
- updateNode(nodeId: unknown, request: UpdateNodeRequest): UserTransformableCanvas;
774
+ updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableCanvas;
646
775
  removeNode(nodeId: unknown): UserTransformableCanvas;
647
776
  markPort(port: MarkPortRequest): UserTransformableCanvas;
648
- updatePort(portId: string, request: UpdatePortRequest): UserTransformableCanvas;
777
+ updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserTransformableCanvas;
649
778
  unmarkPort(portId: string): UserTransformableCanvas;
650
779
  addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
651
- updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserTransformableCanvas;
780
+ updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableCanvas;
652
781
  removeEdge(edgeId: unknown): UserTransformableCanvas;
653
782
  patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
654
783
  patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
655
784
  clear(): UserTransformableCanvas;
656
- attach(element: HTMLElement): UserTransformableCanvas;
657
- detach(): UserTransformableCanvas;
658
785
  destroy(): void;
659
- private getAverageTouch;
660
786
  private moveViewport;
661
787
  private scaleViewport;
662
788
  private stopMouseDrag;
@@ -695,4 +821,13 @@ declare interface VerticalEdgeShape_2 {
695
821
  readonly detourDirection?: number;
696
822
  }
697
823
 
824
+ declare class ViewportTransformer {
825
+ private viewportMatrix;
826
+ private contentMatrix;
827
+ getViewportMatrix(): TransformState;
828
+ getContentMatrix(): TransformState;
829
+ patchViewportMatrix(matrix: PatchTransformRequest): void;
830
+ patchContentMatrix(matrix: PatchTransformRequest): void;
831
+ }
832
+
698
833
  export { }