@html-graph/html-graph 0.0.47 → 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
@@ -87,7 +87,6 @@ Use node version >= 20
 
 ```
 npm install
-
 npm run start
 ```
 

package/dist/main.d.ts

@@ -103,31 +103,19 @@ export declare interface Canvas {
     /**
      * applies transformation for viewport
      */
-    patchViewportState(apiTransform: PatchViewRequest): Canvas;
+    patchViewportState(request: PatchViewportRequest): Canvas;
     /**
-     * applies move transformation for content
-     */
-    moveViewport(apiTransform: MoveViewportRequest): Canvas;
-    /**
-     * applies scale transformation for content
-     */
-    scaleViewport(apiTransform: ScaleViewportRequest): 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
      */
     updateConnection(connectionId: string, request: UpdateConnectionRequest): Canvas;
-    /**
-     * drags node in viewport
-     */
-    dragNode(nodeId: string, dx: number, dy: number): Canvas;
     /**
      * moves specified node on top
      */
@@ -172,13 +160,10 @@ export declare class CanvasCore implements Canvas {
     unmarkPort(portId: string): CanvasCore;
     addConnection(connection: AddConnectionRequest): CanvasCore;
     removeConnection(connectionId: string): CanvasCore;
-    patchViewportState(apiTransform: PatchViewRequest): CanvasCore;
-    moveViewport(apiTransform: MoveViewportRequest): CanvasCore;
-    scaleViewport(apiTransform: ScaleViewportRequest): CanvasCore;
+    patchViewportState(request: PatchViewportRequest): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
-    updateNodeCoords(nodeId: string, x: number, y: number): CanvasCore;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): CanvasCore;
     updateConnection(connectionId: string, request: UpdateConnectionRequest): CanvasCore;
-    dragNode(nodeId: string, dx: number, dy: number): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
@@ -286,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;
@@ -294,7 +280,7 @@ 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: MarkPortRequest): DraggableNodesCanvas;
@@ -302,19 +288,23 @@ export declare class DraggableNodesCanvas implements Canvas {
     unmarkPort(portId: string): DraggableNodesCanvas;
     addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
     removeConnection(connectionId: string): DraggableNodesCanvas;
-    patchViewportState(apiTransform: PatchViewRequest): DraggableNodesCanvas;
-    moveViewport(apiTransform: MoveViewportRequest): DraggableNodesCanvas;
-    scaleViewport(apiTransform: ScaleViewportRequest): DraggableNodesCanvas;
+    patchViewportState(request: PatchViewportRequest): DraggableNodesCanvas;
     moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
-    updateNodeCoords(nodeId: string, x: number, y: number): DraggableNodesCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): DraggableNodesCanvas;
     updateConnection(connectionId: string, request: UpdateConnectionRequest): DraggableNodesCanvas;
-    dragNode(nodeId: string, dx: number, dy: number): 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 {
@@ -326,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;
@@ -344,24 +332,25 @@ 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;
 }
@@ -382,9 +371,11 @@ export declare interface MarkPortRequest {
     readonly direction?: number | null;
 }
 
-export declare interface MoveViewportRequest {
-    x?: number;
-    y?: number;
+export declare interface NodeItem {
+    readonly id: string;
+    readonly x: number;
+    readonly y: number;
+    readonly element: HTMLElement;
 }
 
 declare interface NodePayload {
@@ -394,7 +385,13 @@ declare interface NodePayload {
     centerFn: CenterFn;
 }
 
-export declare interface PatchViewRequest {
+export declare interface NodeResponse {
+    readonly x: number;
+    readonly y: number;
+    readonly element: HTMLElement;
+}
+
+export declare interface PatchViewportRequest {
     scale?: number;
     x?: number;
     y?: number;
@@ -411,31 +408,8 @@ export declare interface PortPayload {
 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 {
@@ -463,12 +437,6 @@ export declare class PublicViewportTransformer {
     getAbsScale(): number;
 }
 
-export declare interface ScaleViewportRequest {
-    scale: number;
-    x?: number;
-    y?: number;
-}
-
 export declare class StraightConnectionController implements ConnectionController {
     private readonly color;
     private readonly width;
@@ -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;
@@ -525,21 +494,19 @@ export declare class TransformableCanvas implements Canvas {
     unmarkPort(portId: string): TransformableCanvas;
     addConnection(connection: AddConnectionRequest): TransformableCanvas;
     removeConnection(connectionId: string): TransformableCanvas;
-    patchViewportState(apiTransform: PatchViewRequest): TransformableCanvas;
-    moveViewport(apiTransform: MoveViewportRequest): TransformableCanvas;
-    scaleViewport(apiTransform: ScaleViewportRequest): TransformableCanvas;
+    patchViewportState(request: PatchViewportRequest): TransformableCanvas;
     moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
-    updateNodeCoords(nodeId: string, x: number, y: number): TransformableCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): TransformableCanvas;
     updateConnection(connectionId: string, request: UpdateConnectionRequest): TransformableCanvas;
-    dragNode(nodeId: string, dx: number, dy: number): 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,6 +519,9 @@ export declare interface TransformOptions {
     shift?: {
         enabled?: boolean;
     };
+    events?: {
+        onTransform?: () => void;
+    };
 }
 
 declare interface UpdateConnectionRequest {
@@ -560,30 +530,6 @@ declare interface UpdateConnectionRequest {
 
 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];