@html-graph/html-graph 0.0.54 → 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;
@@ -114,11 +114,11 @@ export declare interface Canvas {
     /**
      * applies transformation for viewport
      */
-    patchViewportState(request: PatchTransformRequest): Canvas;
+    patchViewportMatrix(request: PatchMatrixRequest): Canvas;
     /**
      * applies transformation for content
      */
-    patchContentState(request: PatchTransformRequest): Canvas;
+    patchContentMatrix(request: PatchMatrixRequest): Canvas;
     /**
      * attaches canvas to given element
      */
@@ -160,15 +160,15 @@ export declare class CanvasCore implements Canvas {
     addEdge(edge: AddEdgeRequest): CanvasCore;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): CanvasCore;
     removeEdge(edgeId: unknown): CanvasCore;
-    patchViewportState(request: PatchTransformRequest): CanvasCore;
-    patchContentState(request: PatchTransformRequest): CanvasCore;
+    patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
+    patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
     destroy(): void;
 }
 
-export declare type CenterFn = (width: number, height: number) => [number, number];
+export declare type CenterFn = (width: number, height: number) => Point;
 
 declare type ConstantPriority = number;
 
@@ -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;
@@ -393,13 +393,17 @@ declare class GraphStore {
     private readonly outcommingEdges;
     private readonly cycleEdges;
     addNode(nodeId: unknown, element: HTMLElement, x: number, y: number, centerFn: CenterFn, priority: number): void;
+    getAllNodes(): readonly unknown[];
     getNode(nodeId: unknown): NodePayload | undefined;
+    getNodePorts(nodeId: unknown): readonly unknown[] | undefined;
     removeNode(nodeId: unknown): void;
     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;
     removeEdge(edgeId: unknown): void;
     getPortAdjacentEdges(portId: string): readonly unknown[];
@@ -458,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;
@@ -487,10 +492,15 @@ declare interface NodePayload {
     priority: number;
 }
 
-export declare interface PatchTransformRequest {
-    scale?: number;
-    x?: number;
-    y?: number;
+export declare interface PatchMatrixRequest {
+    readonly scale?: number;
+    readonly dx?: number;
+    readonly dy?: number;
+}
+
+export declare interface Point {
+    readonly x: number;
+    readonly y: number;
 }
 
 export declare interface PortPayload {
@@ -506,9 +516,13 @@ export declare type PriorityFn = () => number;
 declare class PublicGraphStore {
     private readonly graphStore;
     constructor(graphStore: GraphStore);
+    getAllNodes(): readonly unknown[];
+    getAllPorts(): readonly unknown[];
     getNode(nodeId: unknown): GraphNode | null;
+    getNodePorts(nodeId: unknown): readonly unknown[] | undefined;
     getPort(portId: unknown): GraphPort | null;
     getPortNode(portId: string): unknown | null;
+    getAllEdges(): readonly unknown[];
     getEdge(edgeId: unknown): GraphEdge | null;
     getPortAdjacentEdges(portId: string): readonly unknown[];
     getNodeAdjacentEdges(nodeId: unknown): readonly unknown[];
@@ -560,36 +574,53 @@ declare interface StraightEdgeShape_2 {
     readonly detourDirection?: number;
 }
 
+export declare type TransformFinishedFn = (transform: TransformPayload) => void;
+
 export declare interface TransformOptions {
-    scale?: {
-        enabled?: boolean;
-        min?: number;
-        max?: number;
-        wheelSensitivity?: number;
+    readonly scale?: {
+        readonly enabled?: boolean;
+        readonly wheelSensitivity?: number;
     };
-    shift?: {
-        enabled?: boolean;
+    readonly shift?: {
+        readonly enabled?: boolean;
     };
-    events?: {
-        onTransform?: (payload: TransformPayload) => void;
-        onBeforeTransform?: (payload: TransformPayload) => boolean;
+    readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
+    readonly events?: {
+        readonly onTransformFinished?: TransformFinishedFn;
     };
 }
 
 export declare interface TransformPayload {
     readonly scale: number;
-    readonly x: number;
-    readonly y: number;
+    readonly dx: number;
+    readonly dy: number;
 }
 
+export declare type TransformPreprocessorFn = (prevTransform: TransformPayload, nextTransform: TransformPayload, canvasWidth: number, canvasHeight: number) => TransformPayload;
+
+declare type TransformPreprocessorOption = {
+    readonly type: "scale-limit";
+    readonly minContentScale?: number;
+    readonly maxContentScale?: number;
+} | {
+    readonly type: "shift-limit";
+    readonly minX?: number;
+    readonly maxX?: number;
+    readonly minY?: number;
+    readonly maxY?: number;
+} | {
+    readonly type: "custom";
+    readonly preprocessorFn: TransformPreprocessorFn;
+};
+
 declare interface TransformState {
-    scale: number;
-    x: number;
-    y: number;
+    readonly scale: number;
+    readonly dx: number;
+    readonly dy: number;
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly controller?: EdgeShape;
+    readonly shape?: EdgeShape_2;
     readonly priority?: number;
 }
 
@@ -622,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;
@@ -633,16 +665,19 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
     removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
-    patchViewportState(request: PatchTransformRequest): UserDraggableNodesCanvas;
-    patchContentState(request: PatchTransformRequest): UserDraggableNodesCanvas;
+    patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
+    patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
     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 {
@@ -651,15 +686,13 @@ export declare class UserTransformableCanvas implements Canvas {
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
-    private isMoving;
     private prevTouches;
-    private onTransform;
-    private onBeforeTransform;
+    private readonly onTransformFinished;
+    private readonly transformPreprocessor;
     private readonly isScalable;
     private readonly isShiftable;
-    private readonly minViewScale;
-    private readonly maxViewScale;
     private readonly wheelSensitivity;
+    private window;
     private readonly onMouseDown;
     private readonly onMouseMove;
     private readonly onMouseUp;
@@ -667,6 +700,7 @@ export declare class UserTransformableCanvas implements Canvas {
     private readonly onTouchStart;
     private readonly onTouchMove;
     private readonly onTouchEnd;
+    private readonly observer;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
     addNode(node: AddNodeRequest): UserTransformableCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserTransformableCanvas;
@@ -677,16 +711,19 @@ export declare class UserTransformableCanvas implements Canvas {
     addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserTransformableCanvas;
     removeEdge(edgeId: unknown): UserTransformableCanvas;
-    patchViewportState(request: PatchTransformRequest): UserTransformableCanvas;
-    patchContentState(request: PatchTransformRequest): UserTransformableCanvas;
+    patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
+    patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
     attach(element: HTMLElement): UserTransformableCanvas;
     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 {
@@ -725,8 +762,8 @@ declare class ViewportTransformer {
     private contentMatrix;
     getViewportMatrix(): TransformState;
     getContentMatrix(): TransformState;
-    patchViewportState(scale: number | null, x: number | null, y: number | null): void;
-    patchContentState(scale: number | null, x: number | null, y: number | null): void;
+    patchViewportMatrix(scale: number | null, x: number | null, y: number | null): void;
+    patchContentMatrix(scale: number | null, dx: number | null, dy: number | null): void;
     private calculateReverseMatrix;
 }