@html-graph/html-graph 0.0.47 → 0.0.49

package/dist/main.d.ts

@@ -1,8 +1,8 @@
-export declare interface AddConnectionRequest {
+export declare interface AddEdgeRequest {
     id?: string;
     from: string;
     to: string;
-    options?: ConnectionOptions;
+    options?: EdgeOptions;
 }
 
 export declare interface AddNodeRequest {
@@ -32,14 +32,12 @@ declare type BackgroundOptions = {
     readonly drawingFn: BackgroundDrawingFn;
 };
 
-export declare class BezierConnectionController implements ConnectionController {
+export declare class BezierEdgeController implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly curvature;
     private readonly arrowLength;
     private readonly arrowWidth;
-    private readonly hasSourceArrow;
-    private readonly hasTargetArrow;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
@@ -49,7 +47,7 @@ export declare class BezierConnectionController implements ConnectionController
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface BezierConnectionOptions {
+declare interface BezierEdgeOptions {
     readonly type?: "bezier";
     readonly color?: string;
     readonly width?: number;
@@ -58,6 +56,8 @@ declare interface BezierConnectionOptions {
     readonly arrowWidth?: number;
     readonly hasSourceArrow?: boolean;
     readonly hasTargetArrow?: boolean;
+    readonly cycleRadius?: number;
+    readonly smallCycleRadius?: number;
 }
 
 export declare interface Canvas {
@@ -65,10 +65,6 @@ export declare interface Canvas {
      * provides api for canvas transformation
      */
     readonly transformation: PublicViewportTransformer;
-    /**
-     * provides api for graph structure access
-     */
-    readonly model: PublicGraphStore;
     /**
      * adds node to graph
      */
@@ -76,7 +72,7 @@ export declare interface Canvas {
     /**
      * removes node from graph
      * all the ports of node get unmarked
-     * all the connections adjacent to node get removed
+     * all the edges adjacent to node get removed
      */
     removeNode(nodeId: string): Canvas;
     /**
@@ -84,50 +80,38 @@ export declare interface Canvas {
      */
     markPort(port: MarkPortRequest): Canvas;
     /**
-     * updates connections attached to port
+     * updates edge attached to port
      */
-    updatePortConnections(portId: string): Canvas;
+    updatePortEdges(portId: string): Canvas;
     /**
      * ummarks element as port of node
-     * all the connections adjacent to port get removed
+     * all the edges adjacent to port get removed
      */
     unmarkPort(portId: string): Canvas;
     /**
-     * adds connection to graph
+     * adds edge to graph
      */
-    addConnection(connection: AddConnectionRequest): Canvas;
+    addEdge(edge: AddEdgeRequest): Canvas;
     /**
-     * removes connection from graph
+     * removes edge from graph
      */
-    removeConnection(connectionId: string): Canvas;
+    removeEdge(edgeId: string): 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;
-    /**
-     * updates connection
-     */
-    updateConnection(connectionId: string, request: UpdateConnectionRequest): Canvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): Canvas;
     /**
-     * drags node in viewport
+     * updates edge
      */
-    dragNode(nodeId: string, dx: number, dy: number): Canvas;
+    updateConnection(edgeId: string, request: UpdateConnectionRequest): Canvas;
     /**
      * moves specified node on top
      */
@@ -160,7 +144,6 @@ export declare interface Canvas {
 export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
     private readonly di;
     private readonly connectionControllerFactory;
     constructor(apiOptions?: CoreOptions | undefined);
@@ -168,17 +151,14 @@ export declare class CanvasCore implements Canvas {
     moveNodeOnTop(nodeId: string): CanvasCore;
     removeNode(nodeId: string): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
-    updatePortConnections(portId: string): CanvasCore;
+    updatePortEdges(portId: string): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
-    addConnection(connection: AddConnectionRequest): CanvasCore;
-    removeConnection(connectionId: string): CanvasCore;
-    patchViewportState(apiTransform: PatchViewRequest): CanvasCore;
-    moveViewport(apiTransform: MoveViewportRequest): CanvasCore;
-    scaleViewport(apiTransform: ScaleViewportRequest): CanvasCore;
+    addEdge(connection: AddEdgeRequest): CanvasCore;
+    removeEdge(connectionId: string): 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;
@@ -187,34 +167,6 @@ export declare class CanvasCore implements Canvas {
 
 declare type CenterFn = (width: number, height: number) => [number, number];
 
-export declare interface ConnectionController {
-    readonly svg: SVGSVGElement;
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
-}
-
-declare type ConnectionControllerFactory = (type: ConnectionType) => ConnectionController;
-
-declare type ConnectionOptions = BezierConnectionOptions | StraightConnectionOptions | CustomConnectionOptions;
-
-declare interface ConnectionPayload {
-    from: string;
-    to: string;
-    controller: ConnectionController;
-}
-
-export declare enum ConnectionType {
-    Regular = "regular",
-    Cycle = "cycle"
-}
-
-export declare class ConnectionUtils {
-    static getPortCenter(port: PortPayload): Point;
-    static rotate(point: Point, vector: Point, center: Point): Point;
-    static getDirectionVector(direction: number | null, flipX: number, flipY: number): Point;
-    static getArrowPath(vect: Point, shiftX: number, shiftY: number, arrowLength: number, arrowWidth: number): string;
-    static getArrowOffsetPath(vect: Point, shiftX: number, shiftY: number, arrowLength: number, arrowOffset: number): string;
-}
-
 export declare interface CoreOptions {
     /**
      * canvas background settings
@@ -243,7 +195,7 @@ export declare interface CoreOptions {
     /**
      *connections related behavior
      */
-    readonly connections?: ConnectionOptions;
+    readonly edges?: EdgeOptions;
     /**
      * layers related behavior
      */
@@ -255,7 +207,7 @@ export declare interface CoreOptions {
     };
 }
 
-export declare const createBezierConnectionControllerFactory: (options: {
+export declare const createBezierEdgeControllerFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -263,9 +215,11 @@ export declare const createBezierConnectionControllerFactory: (options: {
     curvature: number;
     hasSourceArrow: boolean;
     hasTargetArrow: boolean;
-}) => ConnectionControllerFactory;
+    cycleRadius: number;
+    smallCycleRadius: number;
+}) => EdgeControllerFactory;
 
-export declare const createStraightConnectionControllerFactory: (options: {
+export declare const createStraightEdgeControllerFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -273,100 +227,90 @@ export declare const createStraightConnectionControllerFactory: (options: {
     minPortOffset: number;
     hasSourceArrow: boolean;
     hasTargetArrow: boolean;
-}) => ConnectionControllerFactory;
+    cycleSquareSide: number;
+    roundness: number;
+}) => EdgeControllerFactory;
 
-declare interface CustomConnectionOptions {
+declare interface CustomEdgeOptions {
     readonly type: "custom";
-    readonly controllerFactory: ConnectionControllerFactory;
+    readonly controllerFactory: EdgeControllerFactory;
 }
 
-export declare class DraggableNodesCanvas implements Canvas {
-    private readonly canvas;
-    readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
-    private readonly nodes;
-    private grabbedNodeId;
-    private readonly nodeIdGenerator;
-    private element;
-    private readonly onCanvasMouseUp;
-    private readonly onCanvasMouseMove;
-    private readonly onCanvasTouchStart;
-    private readonly onCanvasTouchMove;
-    private readonly onCanvasTouchEnd;
-    private previousTouchCoords;
-    constructor(canvas: Canvas);
-    addNode(node: AddNodeRequest): DraggableNodesCanvas;
-    removeNode(nodeId: string): DraggableNodesCanvas;
-    markPort(port: MarkPortRequest): DraggableNodesCanvas;
-    updatePortConnections(portId: string): DraggableNodesCanvas;
-    unmarkPort(portId: string): DraggableNodesCanvas;
-    addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
-    removeConnection(connectionId: string): DraggableNodesCanvas;
-    patchViewportState(apiTransform: PatchViewRequest): DraggableNodesCanvas;
-    moveViewport(apiTransform: MoveViewportRequest): DraggableNodesCanvas;
-    scaleViewport(apiTransform: ScaleViewportRequest): DraggableNodesCanvas;
-    moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
-    updateNodeCoords(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;
+export declare class CycleCircleEdgeController implements EdgeController {
+    private readonly color;
+    private readonly width;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly radius;
+    private readonly smallRadius;
+    readonly svg: SVGSVGElement;
+    private readonly group;
+    private readonly line;
+    private readonly arrow;
+    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, radius: number, smallRadius: number);
+    update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
+}
+
+export declare class CycleSquareEdgeController implements EdgeController {
+    private readonly color;
+    private readonly width;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly side;
+    private readonly minPortOffset;
+    readonly svg: SVGSVGElement;
+    private readonly group;
+    private readonly line;
+    private readonly arrow;
+    private readonly roundness;
+    private readonly points;
+    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, side: number, minPortOffset: number, roundness: number);
+    update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
+}
+
+export declare interface DragOptions {
+    events?: {
+        onNodeDrag?: (payload: NodeDragPayload) => void;
+        onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
+    };
+}
+
+export declare interface EdgeController {
+    readonly svg: SVGSVGElement;
+    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+}
+
+declare type EdgeControllerFactory = (type: EdgeType) => EdgeController;
+
+declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions;
+
+export declare enum EdgeType {
+    Regular = "regular",
+    Cycle = "cycle"
 }
 
-declare class GraphStore {
-    private nodes;
-    private ports;
-    private nodePorts;
-    private portNodeId;
-    private connections;
-    private incommingConnections;
-    private outcommingConnections;
-    private cycleConnections;
-    getAllNodes(): readonly string[];
-    getAllPorts(): readonly string[];
-    getAllConnections(): readonly string[];
-    addNode(nodeId: string, element: HTMLElement, x: number, y: number, centerFn: CenterFn): void;
-    hasNode(nodeId: string): boolean;
-    getNode(nodeId: string): NodePayload;
-    updateNodeCoords(nodeId: string, x: number, y: number): void;
-    updateConnectionController(connectionId: string, controller: ConnectionController): void;
-    removeNode(nodeId: string): void;
-    addPort(portId: string, element: HTMLElement, nodeId: string, centerFn: CenterFn, dir: number | null): void;
-    getPort(portId: string): PortPayload;
-    getPortNode(portId: string): string;
-    hasPort(portId: string): boolean;
-    removePort(portId: string): void;
-    addConnection(connectionId: string, fromPortId: string, toPortId: string, svgController: ConnectionController): void;
-    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;
+export declare class EdgeUtils {
+    static getPortCenter(port: PortPayload): Point;
+    static rotate(point: Point, vector: Point, center: Point): Point;
+    static getDirectionVector(direction: number | null, flipX: number, flipY: number): Point;
+    static getArrowPath(vect: Point, shiftX: number, shiftY: number, arrowLength: number, arrowWidth: number): string;
+    static getArrowOffsetPath(vect: Point, shiftX: number, shiftY: number, arrowLength: number, arrowOffset: number): string;
+    static createStraightPath(ps: Point[]): string;
 }
 
 export declare class HtmlGraphBuilder {
     private coreOptions;
+    private dragOptions;
     private transformOptions;
     private isDraggable;
     private isTransformable;
     setOptions(options: CoreOptions): HtmlGraphBuilder;
-    setDraggableNodes(): HtmlGraphBuilder;
-    setTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
+    setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
+    setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
     build(): Canvas;
 }
 
-declare type LayersMode = "connections-on-top" | "nodes-on-top" | "connections-follow-node";
+declare type LayersMode = "edges-on-top" | "nodes-on-top" | "edges-follow-node";
 
 export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
@@ -382,19 +326,27 @@ export declare interface MarkPortRequest {
     readonly direction?: number | null;
 }
 
-export declare interface MoveViewportRequest {
-    x?: number;
-    y?: number;
+export declare interface NodeDragPayload {
+    readonly nodeId: string;
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
 }
 
-declare interface NodePayload {
-    element: HTMLElement;
-    x: number;
-    y: number;
-    centerFn: CenterFn;
+export declare interface NodeItem {
+    readonly id: string;
+    readonly x: number;
+    readonly y: number;
+    readonly element: HTMLElement;
 }
 
-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;
@@ -408,36 +360,6 @@ export declare interface PortPayload {
     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[];
-}
-
 export declare class PublicViewportTransformer {
     private readonly transformer;
     constructor(transformer: ViewportTransformer);
@@ -463,30 +385,23 @@ export declare class PublicViewportTransformer {
     getAbsScale(): number;
 }
 
-export declare interface ScaleViewportRequest {
-    scale: number;
-    x?: number;
-    y?: number;
-}
-
-export declare class StraightConnectionController implements ConnectionController {
+export declare class StraightEdgeController implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly minPortOffset;
-    private readonly hasSourceArrow;
-    private readonly hasTargetArrow;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, minPortOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean);
+    private readonly roundness;
+    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, minPortOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface StraightConnectionOptions {
+declare interface StraightEdgeOptions {
     readonly type: "straight";
     readonly color?: string;
     readonly width?: number;
@@ -495,20 +410,85 @@ declare interface StraightConnectionOptions {
     readonly minPortOffset?: number;
     readonly hasSourceArrow?: boolean;
     readonly hasTargetArrow?: boolean;
+    readonly cycleSquareSide?: number;
+    readonly roundness?: number;
+}
+
+export declare interface TransformOptions {
+    scale?: {
+        enabled?: boolean;
+        min?: number;
+        max?: number;
+        wheelSensitivity?: number;
+    };
+    shift?: {
+        enabled?: boolean;
+    };
+    events?: {
+        onTransform?: (payload: TransformPayload) => void;
+        onBeforeTransform?: (payload: TransformPayload) => boolean;
+    };
+}
+
+export declare interface TransformPayload {
+    readonly scale: number;
+    readonly x: number;
+    readonly y: number;
 }
 
-export declare class TransformableCanvas implements Canvas {
+declare interface UpdateConnectionRequest {
+    readonly controller?: EdgeController;
+}
+
+export declare class UserDraggableNodesCanvas implements Canvas {
+    private readonly canvas;
+    readonly transformation: PublicViewportTransformer;
+    private readonly nodes;
+    private grabbedNodeId;
+    private onNodeDrag;
+    private onBeforeNodeDrag;
+    private readonly nodeIdGenerator;
+    private element;
+    private readonly onCanvasMouseUp;
+    private readonly onCanvasMouseMove;
+    private readonly onCanvasTouchStart;
+    private readonly onCanvasTouchMove;
+    private readonly onCanvasTouchEnd;
+    private previousTouchCoords;
+    constructor(canvas: Canvas, dragOptions?: DragOptions);
+    addNode(node: AddNodeRequest): UserDraggableNodesCanvas;
+    removeNode(nodeId: string): UserDraggableNodesCanvas;
+    markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
+    updatePortEdges(portId: string): UserDraggableNodesCanvas;
+    unmarkPort(portId: string): UserDraggableNodesCanvas;
+    addEdge(connection: AddEdgeRequest): UserDraggableNodesCanvas;
+    removeEdge(connectionId: string): UserDraggableNodesCanvas;
+    patchViewportState(request: PatchViewportRequest): UserDraggableNodesCanvas;
+    moveToNodes(nodeIds: readonly string[]): UserDraggableNodesCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): UserDraggableNodesCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): UserDraggableNodesCanvas;
+    moveNodeOnTop(nodeId: string): UserDraggableNodesCanvas;
+    clear(): UserDraggableNodesCanvas;
+    attach(element: HTMLElement): UserDraggableNodesCanvas;
+    detach(): UserDraggableNodesCanvas;
+    destroy(): void;
+    private setCursor;
+    private dragNode;
+}
+
+export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
     private readonly options?;
     readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
     private element;
     private isMoving;
     private prevTouches;
+    private onTransform;
+    private onBeforeTransform;
     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;
@@ -518,72 +498,30 @@ export declare class TransformableCanvas implements Canvas {
     private readonly onTouchMove;
     private readonly onTouchEnd;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
-    addNode(node: AddNodeRequest): TransformableCanvas;
-    removeNode(nodeId: string): TransformableCanvas;
-    markPort(port: MarkPortRequest): TransformableCanvas;
-    updatePortConnections(portId: string): TransformableCanvas;
-    unmarkPort(portId: string): TransformableCanvas;
-    addConnection(connection: AddConnectionRequest): TransformableCanvas;
-    removeConnection(connectionId: string): TransformableCanvas;
-    patchViewportState(apiTransform: PatchViewRequest): TransformableCanvas;
-    moveViewport(apiTransform: MoveViewportRequest): TransformableCanvas;
-    scaleViewport(apiTransform: ScaleViewportRequest): TransformableCanvas;
-    moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
-    updateNodeCoords(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;
+    addNode(node: AddNodeRequest): UserTransformableCanvas;
+    removeNode(nodeId: string): UserTransformableCanvas;
+    markPort(port: MarkPortRequest): UserTransformableCanvas;
+    updatePortEdges(portId: string): UserTransformableCanvas;
+    unmarkPort(portId: string): UserTransformableCanvas;
+    addEdge(connection: AddEdgeRequest): UserTransformableCanvas;
+    removeEdge(connectionId: string): UserTransformableCanvas;
+    patchViewportState(request: PatchViewportRequest): UserTransformableCanvas;
+    moveToNodes(nodeIds: readonly string[]): UserTransformableCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): UserTransformableCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): UserTransformableCanvas;
+    moveNodeOnTop(nodeId: string): UserTransformableCanvas;
+    clear(): UserTransformableCanvas;
+    attach(element: HTMLElement): UserTransformableCanvas;
+    detach(): UserTransformableCanvas;
     destroy(): void;
     private getAverageTouch;
-    private checkNextScaleValid;
     private setCursor;
-}
-
-export declare interface TransformOptions {
-    scale?: {
-        enabled?: boolean;
-        minContent?: number;
-        maxContent?: number;
-        wheelSensitivity?: number;
-    };
-    shift?: {
-        enabled?: boolean;
-    };
-}
-
-declare interface UpdateConnectionRequest {
-    readonly controller?: ConnectionController;
+    private moveViewport;
+    private scaleViewport;
 }
 
 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];