@html-graph/html-graph 0.0.59 → 0.0.61
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 +2 -2
- package/dist/main.d.ts +118 -16
- package/dist/main.js +652 -641
- package/dist/main.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|

|
|
8
8
|
|
|
9
|
-
<a target="_blank" href="https://html-graph.github.io/use-cases/
|
|
9
|
+
<a target="_blank" href="https://html-graph.github.io/use-cases/020-advanced-demo/index.html">
|
|
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
|
|
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,23 @@ 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
|
+
|
|
21
46
|
export declare class BezierEdgeShape implements EdgeShape {
|
|
22
47
|
private readonly curvature;
|
|
23
48
|
private readonly arrowLength;
|
|
@@ -63,7 +88,7 @@ export declare interface Canvas {
|
|
|
63
88
|
/**
|
|
64
89
|
* updates node absolute coordinates
|
|
65
90
|
*/
|
|
66
|
-
updateNode(nodeId: unknown, request
|
|
91
|
+
updateNode(nodeId: unknown, request?: UpdateNodeRequest): Canvas;
|
|
67
92
|
/**
|
|
68
93
|
* removes node from graph
|
|
69
94
|
* all the ports of node get unmarked
|
|
@@ -90,7 +115,7 @@ export declare interface Canvas {
|
|
|
90
115
|
/**
|
|
91
116
|
* updates edge
|
|
92
117
|
*/
|
|
93
|
-
updateEdge(edgeId: unknown, request
|
|
118
|
+
updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): Canvas;
|
|
94
119
|
/**
|
|
95
120
|
* removes edge from graph
|
|
96
121
|
*/
|
|
@@ -134,15 +159,18 @@ export declare class CanvasCore implements Canvas {
|
|
|
134
159
|
readonly model: PublicGraphStore;
|
|
135
160
|
private readonly di;
|
|
136
161
|
private readonly edgeShapeFactory;
|
|
162
|
+
private readonly nodes;
|
|
163
|
+
private readonly nodeIdGenerator;
|
|
164
|
+
private readonly nodesResizeObserver;
|
|
137
165
|
constructor(apiOptions?: CoreOptions | undefined);
|
|
138
|
-
addNode(
|
|
139
|
-
updateNode(nodeId: unknown, request
|
|
166
|
+
addNode(request: AddNodeRequest): CanvasCore;
|
|
167
|
+
updateNode(nodeId: unknown, request?: UpdateNodeRequest): CanvasCore;
|
|
140
168
|
removeNode(nodeId: unknown): CanvasCore;
|
|
141
169
|
markPort(port: MarkPortRequest): CanvasCore;
|
|
142
170
|
updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
|
|
143
171
|
unmarkPort(portId: string): CanvasCore;
|
|
144
172
|
addEdge(edge: AddEdgeRequest): CanvasCore;
|
|
145
|
-
updateEdge(edgeId: unknown, request
|
|
173
|
+
updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
|
|
146
174
|
removeEdge(edgeId: unknown): CanvasCore;
|
|
147
175
|
patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
|
|
148
176
|
patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
|
|
@@ -333,6 +361,13 @@ export declare interface DragOptions {
|
|
|
333
361
|
};
|
|
334
362
|
}
|
|
335
363
|
|
|
364
|
+
declare interface EdgePayload {
|
|
365
|
+
readonly from: unknown;
|
|
366
|
+
readonly to: unknown;
|
|
367
|
+
shape: EdgeShape;
|
|
368
|
+
priority: number;
|
|
369
|
+
}
|
|
370
|
+
|
|
336
371
|
export declare interface EdgeShape {
|
|
337
372
|
readonly svg: SVGSVGElement;
|
|
338
373
|
update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
|
|
@@ -368,6 +403,40 @@ export declare interface GraphPort {
|
|
|
368
403
|
readonly direction: number;
|
|
369
404
|
}
|
|
370
405
|
|
|
406
|
+
declare class GraphStore {
|
|
407
|
+
private readonly nodes;
|
|
408
|
+
private readonly ports;
|
|
409
|
+
private readonly nodePorts;
|
|
410
|
+
private readonly portNodeId;
|
|
411
|
+
private readonly edges;
|
|
412
|
+
private readonly incommingEdges;
|
|
413
|
+
private readonly outcommingEdges;
|
|
414
|
+
private readonly cycleEdges;
|
|
415
|
+
addNode(request: AddNodeRequest_2): void;
|
|
416
|
+
getAllNodeIds(): readonly unknown[];
|
|
417
|
+
getNode(nodeId: unknown): NodePayload | undefined;
|
|
418
|
+
removeNode(nodeId: unknown): void;
|
|
419
|
+
addPort(request: AddPortRequest): void;
|
|
420
|
+
getPort(portId: unknown): PortPayload | undefined;
|
|
421
|
+
getAllPortIds(): readonly unknown[];
|
|
422
|
+
getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
|
|
423
|
+
getPortNodeId(portId: unknown): unknown | undefined;
|
|
424
|
+
removePort(portId: unknown): void;
|
|
425
|
+
addEdge(request: AddEdgeRequest_2): void;
|
|
426
|
+
getAllEdgeIds(): readonly unknown[];
|
|
427
|
+
getEdge(edgeId: unknown): EdgePayload | undefined;
|
|
428
|
+
removeEdge(edgeId: unknown): void;
|
|
429
|
+
clear(): void;
|
|
430
|
+
getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
|
|
431
|
+
getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
|
|
432
|
+
getPortCycleEdgeIds(portId: unknown): readonly unknown[];
|
|
433
|
+
getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
|
|
434
|
+
getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
|
|
435
|
+
getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
|
|
436
|
+
getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
|
|
437
|
+
getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
|
|
438
|
+
}
|
|
439
|
+
|
|
371
440
|
export declare class HorizontalEdgeShape implements EdgeShape {
|
|
372
441
|
private readonly arrowLength;
|
|
373
442
|
private readonly arrowWidth;
|
|
@@ -438,41 +507,65 @@ export declare interface NodeDragPayload {
|
|
|
438
507
|
readonly y: number;
|
|
439
508
|
}
|
|
440
509
|
|
|
510
|
+
declare interface NodePayload {
|
|
511
|
+
element: HTMLElement;
|
|
512
|
+
x: number;
|
|
513
|
+
y: number;
|
|
514
|
+
centerFn: CenterFn;
|
|
515
|
+
priority: number;
|
|
516
|
+
}
|
|
517
|
+
|
|
441
518
|
export declare interface PatchMatrixRequest {
|
|
442
519
|
readonly scale?: number;
|
|
443
520
|
readonly dx?: number;
|
|
444
521
|
readonly dy?: number;
|
|
445
522
|
}
|
|
446
523
|
|
|
524
|
+
declare interface PatchTransformRequest {
|
|
525
|
+
readonly scale?: number;
|
|
526
|
+
readonly dx?: number;
|
|
527
|
+
readonly dy?: number;
|
|
528
|
+
}
|
|
529
|
+
|
|
447
530
|
export declare interface Point {
|
|
448
531
|
readonly x: number;
|
|
449
532
|
readonly y: number;
|
|
450
533
|
}
|
|
451
534
|
|
|
535
|
+
declare interface PortPayload {
|
|
536
|
+
readonly element: HTMLElement;
|
|
537
|
+
centerFn: CenterFn;
|
|
538
|
+
direction: number;
|
|
539
|
+
}
|
|
540
|
+
|
|
452
541
|
declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
|
|
453
542
|
|
|
454
543
|
export declare type PriorityFn = () => number;
|
|
455
544
|
|
|
456
|
-
export declare
|
|
545
|
+
export declare class PublicGraphStore {
|
|
546
|
+
private readonly graphStore;
|
|
547
|
+
constructor(graphStore: GraphStore);
|
|
548
|
+
getNode(nodeId: unknown): GraphNode | null;
|
|
457
549
|
getAllNodeIds(): readonly unknown[];
|
|
550
|
+
getPort(portId: unknown): GraphPort | null;
|
|
458
551
|
getAllPortIds(): readonly unknown[];
|
|
459
|
-
getNode(nodeId: unknown): GraphNode | null;
|
|
460
552
|
getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
|
|
461
|
-
getPort(portId: unknown): GraphPort | null;
|
|
462
553
|
getPortNodeId(portId: unknown): unknown | null;
|
|
463
554
|
getAllEdgeIds(): readonly unknown[];
|
|
464
555
|
getEdge(edgeId: unknown): GraphEdge | null;
|
|
465
|
-
getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
|
|
466
|
-
getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
|
|
467
556
|
getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
|
|
468
557
|
getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
|
|
469
558
|
getPortCycleEdgeIds(portId: unknown): readonly unknown[];
|
|
559
|
+
getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
|
|
470
560
|
getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
|
|
471
561
|
getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
|
|
472
562
|
getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
|
|
563
|
+
getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
|
|
473
564
|
}
|
|
474
565
|
|
|
475
|
-
export declare
|
|
566
|
+
export declare class PublicViewportTransformer {
|
|
567
|
+
private readonly transformer;
|
|
568
|
+
constructor(transformer: ViewportTransformer);
|
|
476
569
|
getViewportMatrix(): TransformState;
|
|
477
570
|
getContentMatrix(): TransformState;
|
|
478
571
|
}
|
|
@@ -594,13 +687,13 @@ export declare class UserDraggableNodesCanvas implements Canvas {
|
|
|
594
687
|
private readonly dragCursor;
|
|
595
688
|
constructor(canvas: Canvas, dragOptions?: DragOptions);
|
|
596
689
|
addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
|
|
597
|
-
updateNode(nodeId: unknown, request
|
|
690
|
+
updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
|
|
598
691
|
removeNode(nodeId: unknown): UserDraggableNodesCanvas;
|
|
599
692
|
markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
|
|
600
693
|
updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
|
|
601
694
|
unmarkPort(portId: string): UserDraggableNodesCanvas;
|
|
602
695
|
addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
|
|
603
|
-
updateEdge(edgeId: unknown, request
|
|
696
|
+
updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserDraggableNodesCanvas;
|
|
604
697
|
removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
|
|
605
698
|
patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
|
|
606
699
|
patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
|
|
@@ -641,13 +734,13 @@ export declare class UserTransformableCanvas implements Canvas {
|
|
|
641
734
|
private readonly shiftCursor;
|
|
642
735
|
constructor(canvas: Canvas, options?: TransformOptions | undefined);
|
|
643
736
|
addNode(node: AddNodeRequest): UserTransformableCanvas;
|
|
644
|
-
updateNode(nodeId: unknown, request
|
|
737
|
+
updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableCanvas;
|
|
645
738
|
removeNode(nodeId: unknown): UserTransformableCanvas;
|
|
646
739
|
markPort(port: MarkPortRequest): UserTransformableCanvas;
|
|
647
|
-
updatePort(portId: string, request
|
|
740
|
+
updatePort(portId: string, request?: UpdatePortRequest): UserTransformableCanvas;
|
|
648
741
|
unmarkPort(portId: string): UserTransformableCanvas;
|
|
649
742
|
addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
|
|
650
|
-
updateEdge(edgeId: unknown, request
|
|
743
|
+
updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableCanvas;
|
|
651
744
|
removeEdge(edgeId: unknown): UserTransformableCanvas;
|
|
652
745
|
patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
|
|
653
746
|
patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
|
|
@@ -694,4 +787,13 @@ declare interface VerticalEdgeShape_2 {
|
|
|
694
787
|
readonly detourDirection?: number;
|
|
695
788
|
}
|
|
696
789
|
|
|
790
|
+
declare class ViewportTransformer {
|
|
791
|
+
private viewportMatrix;
|
|
792
|
+
private contentMatrix;
|
|
793
|
+
getViewportMatrix(): TransformState;
|
|
794
|
+
getContentMatrix(): TransformState;
|
|
795
|
+
patchViewportMatrix(matrix: PatchTransformRequest): void;
|
|
796
|
+
patchContentMatrix(matrix: PatchTransformRequest): void;
|
|
797
|
+
}
|
|
798
|
+
|
|
697
799
|
export { }
|