@html-graph/html-graph 0.0.46 → 0.0.48

package/README.md

@@ -6,8 +6,6 @@
 
 ![CI](https://github.com/html-graph/html-graph/actions/workflows/ci.yml/badge.svg?branch=master)
 
-Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
-
 <a target="_blank" href="https://html-graph.github.io/">
     <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
@@ -17,6 +15,8 @@ Port is an entity of the node to which connection can be attached to.
 
 This library fits for tasks where easy nodes customization and interactiveness are required.
 
+Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
+
 ## Features:
 
 - easy nodes customization using HTML
@@ -33,7 +33,7 @@ npm i @html-graph/html-graph
 ```
 
 ```typescript
-import { MarkPortRequest, HtmlGraphBuilder } from "@html-graph/html-graph";
+import { MarkNodePortRequest, HtmlGraphBuilder } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
@@ -87,7 +87,6 @@ Use node version >= 20
 
 ```
 npm install
-
 npm run start
 ```
 

package/dist/main.d.ts

@@ -10,35 +10,10 @@ export declare interface AddNodeRequest {
     element: HTMLElement;
     x: number;
     y: number;
-    ports?: Record<string, MarkPortRequest>;
+    ports?: Record<string, MarkNodePortRequest>;
     centerFn?: CenterFn;
 }
 
-export declare interface ApiContentMoveTransform {
-    x?: number;
-    y?: number;
-}
-
-export declare interface ApiContentScaleTransform {
-    scale: number;
-    x?: number;
-    y?: number;
-}
-
-export declare interface ApiPort {
-    readonly id?: string;
-    readonly element: HTMLElement;
-    readonly nodeId: string;
-    readonly centerFn?: CenterFn;
-    readonly direction?: number | null;
-}
-
-export declare interface ApiTransform {
-    scale?: number;
-    x?: number;
-    y?: number;
-}
-
 export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
 
 declare type BackgroundOptions = {
@@ -107,7 +82,7 @@ export declare interface Canvas {
     /**
      * marks element as port of node
      */
-    markPort(port: ApiPort): Canvas;
+    markPort(port: MarkPortRequest): Canvas;
     /**
      * updates connections attached to port
      */
@@ -128,31 +103,19 @@ export declare interface Canvas {
     /**
      * applies transformation for viewport
      */
-    patchViewportTransform(apiTransform: ApiTransform): Canvas;
-    /**
-     * applies move transformation for content
-     */
-    moveContent(apiTransform: ApiContentMoveTransform): Canvas;
-    /**
-     * applies scale transformation for content
-     */
-    scaleContent(apiTransform: ApiContentScaleTransform): Canvas;
+    patchViewportState(request: PatchViewportRequest): Canvas;
     /**
-     * applies shift transformation for content
+     * moves viewport to nodes
      */
     moveToNodes(nodeIds: readonly string[]): Canvas;
     /**
      * updates node absolute coordinates
      */
-    updateNodeCoords(nodeId: string, x: number, y: number): Canvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): Canvas;
     /**
      * updates connection
      */
-    updateConnectionController(connectionId: string, controller: ConnectionController): Canvas;
-    /**
-     * drags node in viewport
-     */
-    dragNode(nodeId: string, dx: number, dy: number): Canvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): Canvas;
     /**
      * moves specified node on top
      */
@@ -180,30 +143,27 @@ export declare interface Canvas {
 }
 
 /**
- * Provides core API for acting on graph
+ * Provides low level API for acting on graph
  */
 export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
     readonly model: PublicGraphStore;
-    private readonly options;
     private readonly di;
+    private readonly connectionControllerFactory;
     constructor(apiOptions?: CoreOptions | undefined);
     addNode(node: AddNodeRequest): CanvasCore;
     moveNodeOnTop(nodeId: string): CanvasCore;
     removeNode(nodeId: string): CanvasCore;
-    markPort(port: ApiPort): CanvasCore;
+    markPort(port: MarkPortRequest): CanvasCore;
     updatePortConnections(portId: string): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     addConnection(connection: AddConnectionRequest): CanvasCore;
     removeConnection(connectionId: string): CanvasCore;
-    patchViewportTransform(apiTransform: ApiTransform): CanvasCore;
-    moveContent(apiTransform: ApiContentMoveTransform): CanvasCore;
-    scaleContent(apiTransform: ApiContentScaleTransform): CanvasCore;
+    patchViewportState(request: PatchViewportRequest): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
-    updateNodeCoords(nodeId: string, x: number, y: number): CanvasCore;
-    updateConnectionController(connectionId: string, controller: ConnectionController): CanvasCore;
-    dragNode(nodeId: string, dx: number, dy: number): CanvasCore;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): CanvasCore;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
@@ -311,6 +271,7 @@ export declare class DraggableNodesCanvas implements Canvas {
     readonly model: PublicGraphStore;
     private readonly nodes;
     private grabbedNodeId;
+    private onNodeDrag;
     private readonly nodeIdGenerator;
     private element;
     private readonly onCanvasMouseUp;
@@ -319,27 +280,31 @@ export declare class DraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchMove;
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
-    constructor(canvas: Canvas);
+    constructor(canvas: Canvas, dragOptions?: DragOptions);
     addNode(node: AddNodeRequest): DraggableNodesCanvas;
     removeNode(nodeId: string): DraggableNodesCanvas;
-    markPort(port: ApiPort): DraggableNodesCanvas;
+    markPort(port: MarkPortRequest): DraggableNodesCanvas;
     updatePortConnections(portId: string): DraggableNodesCanvas;
     unmarkPort(portId: string): DraggableNodesCanvas;
     addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
     removeConnection(connectionId: string): DraggableNodesCanvas;
-    patchViewportTransform(apiTransform: ApiTransform): DraggableNodesCanvas;
-    moveContent(apiTransform: ApiContentMoveTransform): DraggableNodesCanvas;
-    scaleContent(apiTransform: ApiContentScaleTransform): DraggableNodesCanvas;
+    patchViewportState(request: PatchViewportRequest): DraggableNodesCanvas;
     moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
-    updateNodeCoords(nodeId: string, x: number, y: number): DraggableNodesCanvas;
-    updateConnectionController(connectionId: string, controller: ConnectionController): DraggableNodesCanvas;
-    dragNode(nodeId: string, dx: number, dy: number): DraggableNodesCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): DraggableNodesCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): DraggableNodesCanvas;
     moveNodeOnTop(nodeId: string): DraggableNodesCanvas;
     clear(): DraggableNodesCanvas;
     attach(element: HTMLElement): DraggableNodesCanvas;
     detach(): DraggableNodesCanvas;
     destroy(): void;
     private setCursor;
+    private dragNode;
+}
+
+export declare interface DragOptions {
+    events?: {
+        onNodeDrag?: (nodeId: string) => void;
+    };
 }
 
 declare class GraphStore {
@@ -351,9 +316,7 @@ declare class GraphStore {
     private incommingConnections;
     private outcommingConnections;
     private cycleConnections;
-    getAllNodes(): readonly string[];
-    getAllPorts(): readonly string[];
-    getAllConnections(): readonly string[];
+    getAllNodes(): Readonly<Record<string, NodePayload>>;
     addNode(nodeId: string, element: HTMLElement, x: number, y: number, centerFn: CenterFn): void;
     hasNode(nodeId: string): boolean;
     getNode(nodeId: string): NodePayload;
@@ -369,36 +332,52 @@ declare class GraphStore {
     getConnection(connectionId: string): ConnectionPayload;
     hasConnection(connectionId: string): boolean;
     removeConnection(connectionId: string): void;
-    getPortIncomingConnections(portId: string): readonly string[];
-    getPortOutcomingConnections(portId: string): readonly string[];
-    getPortCycleConnections(portId: string): readonly string[];
     getPortAdjacentConnections(portId: string): readonly string[];
-    getNodeIncomingConnections(nodeId: string): readonly string[];
-    getNodeOutcomingConnections(nodeId: string): readonly string[];
-    getNodeCycleConnections(nodeId: string): readonly string[];
     getNodeAdjacentConnections(nodeId: string): readonly string[];
     clear(): void;
+    private getPortIncomingConnections;
+    private getPortOutcomingConnections;
+    private getPortCycleConnections;
+    private getNodeIncomingConnections;
+    private getNodeOutcomingConnections;
+    private getNodeCycleConnections;
 }
 
 export declare class HtmlGraphBuilder {
     private coreOptions;
+    private dragOptions;
     private transformOptions;
     private isDraggable;
     private isTransformable;
     setOptions(options: CoreOptions): HtmlGraphBuilder;
-    setDraggableNodes(): HtmlGraphBuilder;
+    setDraggableNodes(dragOptions?: DragOptions): HtmlGraphBuilder;
     setTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
     build(): Canvas;
 }
 
 declare type LayersMode = "connections-on-top" | "nodes-on-top" | "connections-follow-node";
 
-export declare type MarkPortRequest = HTMLElement | {
+export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
     readonly centerFn?: CenterFn;
     readonly direction?: number | null;
 };
 
+export declare interface MarkPortRequest {
+    readonly id?: string;
+    readonly element: HTMLElement;
+    readonly nodeId: string;
+    readonly centerFn?: CenterFn;
+    readonly direction?: number | null;
+}
+
+export declare interface NodeItem {
+    readonly id: string;
+    readonly x: number;
+    readonly y: number;
+    readonly element: HTMLElement;
+}
+
 declare interface NodePayload {
     element: HTMLElement;
     x: number;
@@ -406,42 +385,31 @@ declare interface NodePayload {
     centerFn: CenterFn;
 }
 
+export declare interface NodeResponse {
+    readonly x: number;
+    readonly y: number;
+    readonly element: HTMLElement;
+}
+
+export declare interface PatchViewportRequest {
+    scale?: number;
+    x?: number;
+    y?: number;
+}
+
 declare type Point = [number, number];
 
 export declare interface PortPayload {
-    element: HTMLElement;
-    centerFn: CenterFn;
-    direction: number | null;
+    readonly element: HTMLElement;
+    readonly centerFn: CenterFn;
+    readonly direction: number | null;
 }
 
 declare class PublicGraphStore {
     private readonly graphStore;
     constructor(graphStore: GraphStore);
-    getNode(nodeId: string): {
-        x: number;
-        y: number;
-    } | null;
-    getPort(portId: string): {
-        nodeId: string;
-    } | null;
-    getConnection(connectionId: string): {
-        from: string;
-        to: string;
-    } | null;
-    getAllNodes(): readonly string[];
-    getAllPorts(): readonly string[];
-    getAllConnections(): readonly string[];
-    hasNode(nodeId: string): boolean;
-    hasPort(portId: string): boolean;
-    hasConnection(connectionId: string): boolean;
-    getPortIncomingConnections(portId: string): readonly string[];
-    getPortOutcomingConnections(portId: string): readonly string[];
-    getPortCycleConnections(portId: string): readonly string[];
-    getPortAdjacentConnections(portId: string): readonly string[];
-    getNodeIncomingConnections(nodeId: string): readonly string[];
-    getNodeOutcomingConnections(nodeId: string): readonly string[];
-    getNodeCycleConnections(nodeId: string): readonly string[];
-    getNodeAdjacentConnections(nodeId: string): readonly string[];
+    getNode(nodeId: string): NodeResponse | null;
+    getNodes(ids?: readonly string[]): readonly NodeItem[];
 }
 
 export declare class PublicViewportTransformer {
@@ -505,10 +473,11 @@ export declare class TransformableCanvas implements Canvas {
     private element;
     private isMoving;
     private prevTouches;
+    private onTransform;
     private readonly isScalable;
     private readonly isShiftable;
-    private readonly minContentScale;
-    private readonly maxContentScale;
+    private readonly minViewScale;
+    private readonly maxViewScale;
     private readonly wheelSensitivity;
     private readonly onMouseDown;
     private readonly onMouseMove;
@@ -520,26 +489,24 @@ export declare class TransformableCanvas implements Canvas {
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
     addNode(node: AddNodeRequest): TransformableCanvas;
     removeNode(nodeId: string): TransformableCanvas;
-    markPort(port: ApiPort): TransformableCanvas;
+    markPort(port: MarkPortRequest): TransformableCanvas;
     updatePortConnections(portId: string): TransformableCanvas;
     unmarkPort(portId: string): TransformableCanvas;
     addConnection(connection: AddConnectionRequest): TransformableCanvas;
     removeConnection(connectionId: string): TransformableCanvas;
-    patchViewportTransform(apiTransform: ApiTransform): TransformableCanvas;
-    moveContent(apiTransform: ApiContentMoveTransform): TransformableCanvas;
-    scaleContent(apiTransform: ApiContentScaleTransform): TransformableCanvas;
+    patchViewportState(request: PatchViewportRequest): TransformableCanvas;
     moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
-    updateNodeCoords(nodeId: string, x: number, y: number): TransformableCanvas;
-    updateConnectionController(connectionId: string, controller: ConnectionController): TransformableCanvas;
-    dragNode(nodeId: string, dx: number, dy: number): TransformableCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): TransformableCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): TransformableCanvas;
     moveNodeOnTop(nodeId: string): TransformableCanvas;
     clear(): TransformableCanvas;
     attach(element: HTMLElement): TransformableCanvas;
     detach(): TransformableCanvas;
     destroy(): void;
     private getAverageTouch;
-    private checkNextScaleValid;
     private setCursor;
+    private moveViewport;
+    private scaleViewport;
 }
 
 export declare interface TransformOptions {
@@ -552,34 +519,17 @@ export declare interface TransformOptions {
     shift?: {
         enabled?: boolean;
     };
+    events?: {
+        onTransform?: () => void;
+    };
+}
+
+declare interface UpdateConnectionRequest {
+    readonly controller?: ConnectionController;
 }
 
 declare class ViewportTransformer {
     private state;
-    /**
-     * dx2 - traslate x
-     * dy2 - traslate y
-     *
-     * direct transform
-     *  s1  0   dx1     1   0   dx2
-     *  0   s1  dy1     0   1   dy2
-     *  0   0   1       0   0   1
-     *
-     * [s, dx, dy] = [s1, s * dx2 + dx1, s * dy2 + dy1]
-     */
-    applyShift(dx: number, dy: number): void;
-    /**
-     * s2 - scale
-     * cx - scale pivot x
-     * cy - scale pivot y
-     *
-     *  s1  0   dx1     s2  0   (1 - s2) * cx
-     *  0   s1  dy1     0   s2  (1 - s2) * cy
-     *  0   0   1       0   0   1
-     *
-     * [s, dx, dy] = [s1 * s2, s1 * (1 - s2) * cx + dx1, s1 * (1 - s2) * cy + dy1]
-     */
-    applyScale(s2: number, cx: number, cy: number): void;
     getViewCoords(xa: number, ya: number): [number, number];
     getViewScale(): number;
     getAbsCoords(xv: number, yv: number): [number, number];