@html-graph/html-graph 0.0.55 → 0.0.56

package/README.md

@@ -31,7 +31,7 @@ npm i @html-graph/html-graph
 ```
 
 ```typescript
-import { AddNodePorts, HtmlGraphBuilder } from "@html-graph/html-graph";
+import { HtmlGraphBuilder, AddNodeRequest } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
@@ -50,9 +50,11 @@ const canvas = new HtmlGraphBuilder()
 
 function createNode(
   name: string,
+  x: number,
+  y: number,
   frontPortId: string,
   backPortId: string,
-): [HTMLElement, AddNodePorts] {
+): AddNodeRequest {
   const node = document.createElement("div");
   node.classList.add("node");
 
@@ -68,33 +70,33 @@ function createNode(
   backPort.classList.add("port");
   node.appendChild(backPort);
 
-  return [
-    node,
-    [
-      [frontPortId, frontPort],
-      [backPortId, backPort],
+  return {
+    element: node,
+    x: x,
+    y: y,
+    ports: [
+      { id: frontPortId, element: frontPort },
+      { id: backPortId, element: backPort },
     ],
-  ];
+  };
 }
 
-const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");
-const [node2, ports2] = createNode("Node 2", "port-2-1", "port-2-2");
+const node1 = createNode("Node 1", 200, 400, "port-1-1", "port-1-2");
+const node2 = createNode("Node 2", 600, 500, "port-2-1", "port-2-2");
 
 const canvasElement = document.getElementById("canvas")!;
 
 canvas
   .attach(canvasElement)
-  .addNode({ element: node1, x: 200, y: 400, ports: ports1 })
-  .addNode({ element: node2, x: 600, y: 500, ports: ports2 })
+  .addNode(node1)
+  .addNode(node2)
   .addEdge({ from: "port-1-2", to: "port-2-1" });
 ```
 
-Refer to [Examples](examples) for more.
+Refer to [Use cases](use-cases) for more.
 
 ## Run examples
 
-Use node version >= 20
-
 ```
 npm install
 npm run start

package/dist/main.d.ts

@@ -1,21 +1,21 @@
 export declare interface AddEdgeRequest {
-    id?: unknown;
-    from: string;
-    to: string;
-    options?: EdgeShape_2;
-    priority?: number;
+    readonly id?: unknown;
+    readonly from: string;
+    readonly to: string;
+    readonly shape?: EdgeShape_2;
+    readonly priority?: number;
 }
 
-export declare type AddNodePorts = Iterable<readonly [unknown, MarkNodePortRequest]>;
+export declare type AddNodePorts = Iterable<MarkNodePortRequest>;
 
 export declare interface AddNodeRequest {
-    id?: unknown;
-    element: HTMLElement;
-    x: number;
-    y: number;
-    ports?: AddNodePorts;
-    centerFn?: CenterFn;
-    priority?: number;
+    readonly id?: unknown;
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    readonly ports?: AddNodePorts;
+    readonly centerFn?: CenterFn;
+    readonly priority?: number;
 }
 
 export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
@@ -278,7 +278,7 @@ export declare const createVerticalEdgeShapeFactory: (options: {
 
 declare interface CustomEdgeShape {
     readonly type: "custom";
-    readonly controllerFactory: EdgeShapeFactory;
+    readonly factory: EdgeShapeFactory;
 }
 
 declare type CustomPriority = PriorityFn;
@@ -400,8 +400,8 @@ declare class GraphStore {
     addPort(portId: unknown, element: HTMLElement, nodeId: unknown, centerFn: CenterFn, dir: number): void;
     getAllPorts(): readonly unknown[];
     getPort(portId: unknown): PortPayload | undefined;
-    getPortNode(portId: string): unknown | undefined;
-    removePort(portId: string): void;
+    getPortNode(portId: unknown): unknown | undefined;
+    removePort(portId: unknown): void;
     addEdge(edgeId: unknown, fromPortId: string, toPortId: string, shape: EdgeShape, priority: number): void;
     getAllEdges(): readonly unknown[];
     getEdge(edgeId: unknown): EdgePayload | undefined;
@@ -462,7 +462,8 @@ export declare class HtmlGraphBuilder {
 
 declare type IncrementalPriority = "incremental";
 
-export declare type MarkNodePortRequest = HTMLElement | {
+export declare type MarkNodePortRequest = {
+    readonly id?: unknown;
     readonly element: HTMLElement;
     readonly centerFn?: CenterFn;
     readonly direction?: number;
@@ -619,7 +620,7 @@ declare interface TransformState {
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly controller?: EdgeShape;
+    readonly shape?: EdgeShape_2;
     readonly priority?: number;
 }
 
@@ -652,7 +653,8 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchMove;
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
-    private freezePriority;
+    private readonly freezePriority;
+    private readonly window;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
     addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
@@ -669,10 +671,13 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     attach(element: HTMLElement): UserDraggableNodesCanvas;
     detach(): UserDraggableNodesCanvas;
     destroy(): void;
-    private setCursor;
     private dragNode;
     private updateMaxNodePriority;
     private moveNodeOnTop;
+    private cancelMouseDrag;
+    private removeMouseDragListeners;
+    private cancelTouchDrag;
+    private removeTouchDragListeners;
 }
 
 export declare class UserTransformableCanvas implements Canvas {
@@ -681,13 +686,13 @@ export declare class UserTransformableCanvas implements Canvas {
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
-    private isMoving;
     private prevTouches;
     private readonly onTransformFinished;
     private readonly transformPreprocessor;
     private readonly isScalable;
     private readonly isShiftable;
     private readonly wheelSensitivity;
+    private window;
     private readonly onMouseDown;
     private readonly onMouseMove;
     private readonly onMouseUp;
@@ -713,9 +718,12 @@ export declare class UserTransformableCanvas implements Canvas {
     detach(): UserTransformableCanvas;
     destroy(): void;
     private getAverageTouch;
-    private setCursor;
     private moveViewport;
     private scaleViewport;
+    private stopMouseDrag;
+    private removeMouseDragListeners;
+    private stopTouchDrag;
+    private removeTouchDragListeners;
 }
 
 export declare class VerticalEdgeShape implements EdgeShape {