@html-graph/html-graph 0.0.46 → 0.0.47
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 +1 -1
- package/dist/main.d.ts +56 -52
- package/dist/main.js +263 -246
- package/dist/main.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,7 +33,7 @@ npm i @html-graph/html-graph
|
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
```typescript
|
|
36
|
-
import {
|
|
36
|
+
import { MarkNodePortRequest, HtmlGraphBuilder } from "@html-graph/html-graph";
|
|
37
37
|
|
|
38
38
|
const canvas = new HtmlGraphBuilder()
|
|
39
39
|
.setOptions({
|
package/dist/main.d.ts
CHANGED
|
@@ -10,35 +10,10 @@ export declare interface AddNodeRequest {
|
|
|
10
10
|
element: HTMLElement;
|
|
11
11
|
x: number;
|
|
12
12
|
y: number;
|
|
13
|
-
ports?: Record<string,
|
|
13
|
+
ports?: Record<string, MarkNodePortRequest>;
|
|
14
14
|
centerFn?: CenterFn;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
export declare interface ApiContentMoveTransform {
|
|
18
|
-
x?: number;
|
|
19
|
-
y?: number;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export declare interface ApiContentScaleTransform {
|
|
23
|
-
scale: number;
|
|
24
|
-
x?: number;
|
|
25
|
-
y?: number;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export declare interface ApiPort {
|
|
29
|
-
readonly id?: string;
|
|
30
|
-
readonly element: HTMLElement;
|
|
31
|
-
readonly nodeId: string;
|
|
32
|
-
readonly centerFn?: CenterFn;
|
|
33
|
-
readonly direction?: number | null;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export declare interface ApiTransform {
|
|
37
|
-
scale?: number;
|
|
38
|
-
x?: number;
|
|
39
|
-
y?: number;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
17
|
export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
|
|
43
18
|
|
|
44
19
|
declare type BackgroundOptions = {
|
|
@@ -107,7 +82,7 @@ export declare interface Canvas {
|
|
|
107
82
|
/**
|
|
108
83
|
* marks element as port of node
|
|
109
84
|
*/
|
|
110
|
-
markPort(port:
|
|
85
|
+
markPort(port: MarkPortRequest): Canvas;
|
|
111
86
|
/**
|
|
112
87
|
* updates connections attached to port
|
|
113
88
|
*/
|
|
@@ -128,15 +103,15 @@ export declare interface Canvas {
|
|
|
128
103
|
/**
|
|
129
104
|
* applies transformation for viewport
|
|
130
105
|
*/
|
|
131
|
-
|
|
106
|
+
patchViewportState(apiTransform: PatchViewRequest): Canvas;
|
|
132
107
|
/**
|
|
133
108
|
* applies move transformation for content
|
|
134
109
|
*/
|
|
135
|
-
|
|
110
|
+
moveViewport(apiTransform: MoveViewportRequest): Canvas;
|
|
136
111
|
/**
|
|
137
112
|
* applies scale transformation for content
|
|
138
113
|
*/
|
|
139
|
-
|
|
114
|
+
scaleViewport(apiTransform: ScaleViewportRequest): Canvas;
|
|
140
115
|
/**
|
|
141
116
|
* applies shift transformation for content
|
|
142
117
|
*/
|
|
@@ -148,7 +123,7 @@ export declare interface Canvas {
|
|
|
148
123
|
/**
|
|
149
124
|
* updates connection
|
|
150
125
|
*/
|
|
151
|
-
|
|
126
|
+
updateConnection(connectionId: string, request: UpdateConnectionRequest): Canvas;
|
|
152
127
|
/**
|
|
153
128
|
* drags node in viewport
|
|
154
129
|
*/
|
|
@@ -180,29 +155,29 @@ export declare interface Canvas {
|
|
|
180
155
|
}
|
|
181
156
|
|
|
182
157
|
/**
|
|
183
|
-
* Provides
|
|
158
|
+
* Provides low level API for acting on graph
|
|
184
159
|
*/
|
|
185
160
|
export declare class CanvasCore implements Canvas {
|
|
186
161
|
private readonly apiOptions?;
|
|
187
162
|
readonly transformation: PublicViewportTransformer;
|
|
188
163
|
readonly model: PublicGraphStore;
|
|
189
|
-
private readonly options;
|
|
190
164
|
private readonly di;
|
|
165
|
+
private readonly connectionControllerFactory;
|
|
191
166
|
constructor(apiOptions?: CoreOptions | undefined);
|
|
192
167
|
addNode(node: AddNodeRequest): CanvasCore;
|
|
193
168
|
moveNodeOnTop(nodeId: string): CanvasCore;
|
|
194
169
|
removeNode(nodeId: string): CanvasCore;
|
|
195
|
-
markPort(port:
|
|
170
|
+
markPort(port: MarkPortRequest): CanvasCore;
|
|
196
171
|
updatePortConnections(portId: string): CanvasCore;
|
|
197
172
|
unmarkPort(portId: string): CanvasCore;
|
|
198
173
|
addConnection(connection: AddConnectionRequest): CanvasCore;
|
|
199
174
|
removeConnection(connectionId: string): CanvasCore;
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
175
|
+
patchViewportState(apiTransform: PatchViewRequest): CanvasCore;
|
|
176
|
+
moveViewport(apiTransform: MoveViewportRequest): CanvasCore;
|
|
177
|
+
scaleViewport(apiTransform: ScaleViewportRequest): CanvasCore;
|
|
203
178
|
moveToNodes(nodeIds: readonly string[]): CanvasCore;
|
|
204
179
|
updateNodeCoords(nodeId: string, x: number, y: number): CanvasCore;
|
|
205
|
-
|
|
180
|
+
updateConnection(connectionId: string, request: UpdateConnectionRequest): CanvasCore;
|
|
206
181
|
dragNode(nodeId: string, dx: number, dy: number): CanvasCore;
|
|
207
182
|
clear(): CanvasCore;
|
|
208
183
|
attach(element: HTMLElement): CanvasCore;
|
|
@@ -322,17 +297,17 @@ export declare class DraggableNodesCanvas implements Canvas {
|
|
|
322
297
|
constructor(canvas: Canvas);
|
|
323
298
|
addNode(node: AddNodeRequest): DraggableNodesCanvas;
|
|
324
299
|
removeNode(nodeId: string): DraggableNodesCanvas;
|
|
325
|
-
markPort(port:
|
|
300
|
+
markPort(port: MarkPortRequest): DraggableNodesCanvas;
|
|
326
301
|
updatePortConnections(portId: string): DraggableNodesCanvas;
|
|
327
302
|
unmarkPort(portId: string): DraggableNodesCanvas;
|
|
328
303
|
addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
|
|
329
304
|
removeConnection(connectionId: string): DraggableNodesCanvas;
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
305
|
+
patchViewportState(apiTransform: PatchViewRequest): DraggableNodesCanvas;
|
|
306
|
+
moveViewport(apiTransform: MoveViewportRequest): DraggableNodesCanvas;
|
|
307
|
+
scaleViewport(apiTransform: ScaleViewportRequest): DraggableNodesCanvas;
|
|
333
308
|
moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
|
|
334
309
|
updateNodeCoords(nodeId: string, x: number, y: number): DraggableNodesCanvas;
|
|
335
|
-
|
|
310
|
+
updateConnection(connectionId: string, request: UpdateConnectionRequest): DraggableNodesCanvas;
|
|
336
311
|
dragNode(nodeId: string, dx: number, dy: number): DraggableNodesCanvas;
|
|
337
312
|
moveNodeOnTop(nodeId: string): DraggableNodesCanvas;
|
|
338
313
|
clear(): DraggableNodesCanvas;
|
|
@@ -393,12 +368,25 @@ export declare class HtmlGraphBuilder {
|
|
|
393
368
|
|
|
394
369
|
declare type LayersMode = "connections-on-top" | "nodes-on-top" | "connections-follow-node";
|
|
395
370
|
|
|
396
|
-
export declare type
|
|
371
|
+
export declare type MarkNodePortRequest = HTMLElement | {
|
|
397
372
|
readonly element: HTMLElement;
|
|
398
373
|
readonly centerFn?: CenterFn;
|
|
399
374
|
readonly direction?: number | null;
|
|
400
375
|
};
|
|
401
376
|
|
|
377
|
+
export declare interface MarkPortRequest {
|
|
378
|
+
readonly id?: string;
|
|
379
|
+
readonly element: HTMLElement;
|
|
380
|
+
readonly nodeId: string;
|
|
381
|
+
readonly centerFn?: CenterFn;
|
|
382
|
+
readonly direction?: number | null;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
export declare interface MoveViewportRequest {
|
|
386
|
+
x?: number;
|
|
387
|
+
y?: number;
|
|
388
|
+
}
|
|
389
|
+
|
|
402
390
|
declare interface NodePayload {
|
|
403
391
|
element: HTMLElement;
|
|
404
392
|
x: number;
|
|
@@ -406,12 +394,18 @@ declare interface NodePayload {
|
|
|
406
394
|
centerFn: CenterFn;
|
|
407
395
|
}
|
|
408
396
|
|
|
397
|
+
export declare interface PatchViewRequest {
|
|
398
|
+
scale?: number;
|
|
399
|
+
x?: number;
|
|
400
|
+
y?: number;
|
|
401
|
+
}
|
|
402
|
+
|
|
409
403
|
declare type Point = [number, number];
|
|
410
404
|
|
|
411
405
|
export declare interface PortPayload {
|
|
412
|
-
element: HTMLElement;
|
|
413
|
-
centerFn: CenterFn;
|
|
414
|
-
direction: number | null;
|
|
406
|
+
readonly element: HTMLElement;
|
|
407
|
+
readonly centerFn: CenterFn;
|
|
408
|
+
readonly direction: number | null;
|
|
415
409
|
}
|
|
416
410
|
|
|
417
411
|
declare class PublicGraphStore {
|
|
@@ -469,6 +463,12 @@ export declare class PublicViewportTransformer {
|
|
|
469
463
|
getAbsScale(): number;
|
|
470
464
|
}
|
|
471
465
|
|
|
466
|
+
export declare interface ScaleViewportRequest {
|
|
467
|
+
scale: number;
|
|
468
|
+
x?: number;
|
|
469
|
+
y?: number;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
472
|
export declare class StraightConnectionController implements ConnectionController {
|
|
473
473
|
private readonly color;
|
|
474
474
|
private readonly width;
|
|
@@ -520,17 +520,17 @@ export declare class TransformableCanvas implements Canvas {
|
|
|
520
520
|
constructor(canvas: Canvas, options?: TransformOptions | undefined);
|
|
521
521
|
addNode(node: AddNodeRequest): TransformableCanvas;
|
|
522
522
|
removeNode(nodeId: string): TransformableCanvas;
|
|
523
|
-
markPort(port:
|
|
523
|
+
markPort(port: MarkPortRequest): TransformableCanvas;
|
|
524
524
|
updatePortConnections(portId: string): TransformableCanvas;
|
|
525
525
|
unmarkPort(portId: string): TransformableCanvas;
|
|
526
526
|
addConnection(connection: AddConnectionRequest): TransformableCanvas;
|
|
527
527
|
removeConnection(connectionId: string): TransformableCanvas;
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
528
|
+
patchViewportState(apiTransform: PatchViewRequest): TransformableCanvas;
|
|
529
|
+
moveViewport(apiTransform: MoveViewportRequest): TransformableCanvas;
|
|
530
|
+
scaleViewport(apiTransform: ScaleViewportRequest): TransformableCanvas;
|
|
531
531
|
moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
|
|
532
532
|
updateNodeCoords(nodeId: string, x: number, y: number): TransformableCanvas;
|
|
533
|
-
|
|
533
|
+
updateConnection(connectionId: string, request: UpdateConnectionRequest): TransformableCanvas;
|
|
534
534
|
dragNode(nodeId: string, dx: number, dy: number): TransformableCanvas;
|
|
535
535
|
moveNodeOnTop(nodeId: string): TransformableCanvas;
|
|
536
536
|
clear(): TransformableCanvas;
|
|
@@ -554,6 +554,10 @@ export declare interface TransformOptions {
|
|
|
554
554
|
};
|
|
555
555
|
}
|
|
556
556
|
|
|
557
|
+
declare interface UpdateConnectionRequest {
|
|
558
|
+
readonly controller?: ConnectionController;
|
|
559
|
+
}
|
|
560
|
+
|
|
557
561
|
declare class ViewportTransformer {
|
|
558
562
|
private state;
|
|
559
563
|
/**
|