@html-graph/html-graph 0.0.61 → 0.1.1

package/dist/main.d.ts

@@ -2,7 +2,7 @@ export declare interface AddEdgeRequest {
     readonly id?: unknown;
     readonly from: string;
     readonly to: string;
-    readonly shape?: EdgeShape_2;
+    readonly shape?: EdgeShape;
     readonly priority?: number;
 }
 
@@ -39,22 +39,42 @@ declare interface AddPortRequest {
     readonly portId: unknown;
     readonly nodeId: unknown;
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
     readonly direction: number;
 }
 
+export declare type BeforeTransformStartedFn = () => void;
+
+export declare interface BezierEdgeParams {
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly curvature?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleRadius?: number | undefined;
+    readonly smallCycleRadius?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
+}
+
 export declare class BezierEdgeShape implements EdgeShape {
-    private readonly curvature;
-    private readonly arrowLength;
-    private readonly arrowWidth;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, curvature: number, arrowLength: number, arrowWidth: number, hasSourceArrow: boolean, hasTargetArrow: boolean);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly curvature;
+    private readonly portCycleRadius;
+    private readonly portCycleSmallRadius;
+    private readonly detourDirection;
+    private readonly detourDistance;
+    private readonly hasSourceArrow;
+    private readonly hasTargetArrow;
+    constructor(params?: BezierEdgeParams);
+    render(params: EdgeRenderParams): void;
 }
 
 declare interface BezierEdgeShape_2 {
@@ -102,12 +122,12 @@ export declare interface Canvas {
     /**
      * updates port and attached edges
      */
-    updatePort(portId: string, request?: UpdatePortRequest): Canvas;
+    updatePort(portId: unknown, request?: UpdatePortRequest): Canvas;
     /**
      * ummarks element as port of node
      * all the edges adjacent to port get removed
      */
-    unmarkPort(portId: string): Canvas;
+    unmarkPort(portId: unknown): Canvas;
     /**
      * adds edge to graph
      */
@@ -157,26 +177,23 @@ export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
     readonly model: PublicGraphStore;
-    private readonly di;
+    private readonly canvasController;
     private readonly edgeShapeFactory;
-    private readonly nodes;
-    private readonly nodeIdGenerator;
-    private readonly nodesResizeObserver;
     constructor(apiOptions?: CoreOptions | undefined);
+    attach(element: HTMLElement): CanvasCore;
+    detach(): CanvasCore;
     addNode(request: AddNodeRequest): CanvasCore;
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): CanvasCore;
     removeNode(nodeId: unknown): CanvasCore;
-    markPort(port: MarkPortRequest): CanvasCore;
-    updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
-    unmarkPort(portId: string): CanvasCore;
     addEdge(edge: AddEdgeRequest): CanvasCore;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
     removeEdge(edgeId: unknown): CanvasCore;
+    markPort(port: MarkPortRequest): CanvasCore;
+    updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
+    unmarkPort(portId: string): CanvasCore;
     patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
     patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
     clear(): CanvasCore;
-    attach(element: HTMLElement): CanvasCore;
-    detach(): CanvasCore;
     destroy(): void;
 }
 
@@ -203,11 +220,6 @@ export declare interface CoreOptions {
      * ports related behavior
      */
     readonly ports?: {
-        /**
-         * specifies how to determine center of port
-         * center of port determines point to which edge attaches
-         */
-        readonly centerFn?: CenterFn;
         /**
          * specifies default direction of port
          */
@@ -228,136 +240,14 @@ export declare interface CoreOptions {
     };
 }
 
-export declare const createBezierEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    curvature: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleRadius: number;
-    smallCycleRadius: number;
-    detourDistance: number;
-    detourDirection: number;
-}) => EdgeShapeFactory;
-
-export declare const createHorizontalEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
-}) => EdgeShapeFactory;
-
-export declare const createStraightEdgeShareFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
-}) => EdgeShapeFactory;
-
-export declare const createVerticalEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
-}) => EdgeShapeFactory;
-
-declare interface CustomEdgeShape {
-    readonly type: "custom";
-    readonly factory: EdgeShapeFactory;
-}
-
 declare type CustomPriority = PriorityFn;
 
-export declare class CycleCircleEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly radius;
-    private readonly smallRadius;
-    readonly svg: SVGSVGElement;
-    private readonly line;
-    private readonly arrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, radius: number, smallRadius: number);
-    update(_to: Point, flipX: number, flipY: number, fromDir: number): void;
-    private createLinePath;
-}
-
-export declare class CycleSquareEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly side;
-    private readonly minPortOffset;
-    readonly svg: SVGSVGElement;
-    private readonly line;
-    private readonly arrow;
-    private readonly roundness;
-    private readonly linePoints;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, side: number, minPortOffset: number, roundness: number);
-    update(_to: Point, flipX: number, flipY: number, fromDir: number): void;
-    private createLinePath;
-}
-
-export declare class DetourBezierEdgeShape implements EdgeShape {
-    private readonly curvature;
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    readonly svg: SVGSVGElement;
-    private readonly group;
-    private readonly line;
-    private readonly sourceArrow;
-    private readonly targetArrow;
-    private readonly detourX;
-    private readonly detourY;
-    constructor(color: string, width: number, curvature: number, arrowLength: number, arrowWidth: number, hasSourceArrow: boolean, hasTargetArrow: boolean, detourDistance: number, detourDirection: number);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
-}
-
-export declare class DetourStraightEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly arrowOffset;
-    private readonly roundness;
-    readonly svg: SVGSVGElement;
-    private readonly group;
-    private readonly line;
-    private readonly sourceArrow;
-    private readonly targetArrow;
-    private readonly detourX;
-    private readonly detourY;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number, detourDistance: number, detourDirection: number);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
-}
-
 export declare interface DragOptions {
-    grabPriorityStrategy?: "freeze" | "move-on-top";
-    dragCursor?: string | null;
-    events?: {
-        onNodeDrag?: (payload: NodeDragPayload) => void;
-        onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
+    readonly moveOnTop?: boolean;
+    readonly dragCursor?: string | null;
+    readonly events?: {
+        readonly onNodeDrag?: (payload: NodeDragPayload) => void;
+        readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
     };
 }
 
@@ -368,20 +258,29 @@ declare interface EdgePayload {
     priority: number;
 }
 
+export declare interface EdgeRenderParams {
+    readonly source: EdgeRenderPort;
+    readonly target: EdgeRenderPort;
+}
+
+export declare interface EdgeRenderPort {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly direction: number;
+    readonly portId: unknown;
+    readonly nodeId: unknown;
+}
+
 export declare interface EdgeShape {
     readonly svg: SVGSVGElement;
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    render(params: EdgeRenderParams): void;
 }
 
-declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | CustomEdgeShape | HorizontalEdgeShape_2 | VerticalEdgeShape_2;
+declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | HorizontalEdgeShape_2 | VerticalEdgeShape_2 | EdgeShapeFactory;
 
-declare type EdgeShapeFactory = (type: EdgeType) => EdgeShape;
-
-export declare enum EdgeType {
-    Regular = "regular",
-    PortCycle = "port-cycle",
-    NodeCycle = "node-cycle"
-}
+declare type EdgeShapeFactory = () => EdgeShape;
 
 export declare interface GraphEdge {
     readonly from: unknown;
@@ -399,7 +298,6 @@ export declare interface GraphNode {
 
 export declare interface GraphPort {
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
     readonly direction: number;
 }
 
@@ -423,6 +321,8 @@ declare class GraphStore {
     getPortNodeId(portId: unknown): unknown | undefined;
     removePort(portId: unknown): void;
     addEdge(request: AddEdgeRequest_2): void;
+    updateEdgeFrom(edgeId: unknown, from: unknown): void;
+    updateEdgeTo(edgeId: unknown, to: unknown): void;
     getAllEdgeIds(): readonly unknown[];
     getEdge(edgeId: unknown): EdgePayload | undefined;
     removeEdge(edgeId: unknown): void;
@@ -437,19 +337,37 @@ declare class GraphStore {
     getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
 }
 
+export declare interface HorizontalEdgeParams {
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
+}
+
 export declare class HorizontalEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly arrowOffset;
-    private readonly roundness;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly arrowOffset;
+    private readonly roundness;
+    private readonly cycleSquareSide;
+    private readonly detourDirection;
+    private readonly detourDistance;
+    private readonly hasSourceArrow;
+    private readonly hasTargetArrow;
+    constructor(params?: HorizontalEdgeParams);
+    render(params: EdgeRenderParams): void;
 }
 
 declare interface HorizontalEdgeShape_2 {
@@ -473,9 +391,11 @@ export declare class HtmlGraphBuilder {
     private transformOptions;
     private isDraggable;
     private isTransformable;
+    private hasResizeReactiveNodes;
     setOptions(options: CoreOptions): HtmlGraphBuilder;
     setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
     setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
+    setResizeReactiveNodes(): HtmlGraphBuilder;
     build(): Canvas;
 }
 
@@ -488,7 +408,6 @@ declare type IncrementalPriority = "incremental";
 export declare type MarkNodePortRequest = {
     readonly id?: unknown;
     readonly element: HTMLElement;
-    readonly centerFn?: CenterFn;
     readonly direction?: number;
 };
 
@@ -496,7 +415,6 @@ export declare interface MarkPortRequest {
     readonly id?: unknown;
     readonly element: HTMLElement;
     readonly nodeId: unknown;
-    readonly centerFn?: CenterFn;
     readonly direction?: number;
 }
 
@@ -534,7 +452,6 @@ export declare interface Point {
 
 declare interface PortPayload {
     readonly element: HTMLElement;
-    centerFn: CenterFn;
     direction: number;
 }
 
@@ -570,21 +487,77 @@ export declare class PublicViewportTransformer {
     getContentMatrix(): TransformState;
 }
 
+export declare class ResizeReactiveNodesCanvas implements Canvas {
+    private readonly canvas;
+    readonly transformation: PublicViewportTransformer;
+    readonly model: PublicGraphStore;
+    private readonly nodes;
+    private readonly nodeIdGenerator;
+    private readonly nodesResizeObserver;
+    constructor(canvas: Canvas);
+    attach(element: HTMLElement): ResizeReactiveNodesCanvas;
+    detach(): ResizeReactiveNodesCanvas;
+    addNode(request: AddNodeRequest): ResizeReactiveNodesCanvas;
+    updateNode(nodeId: unknown, request?: UpdateNodeRequest): ResizeReactiveNodesCanvas;
+    removeNode(nodeId: unknown): ResizeReactiveNodesCanvas;
+    markPort(port: MarkPortRequest): ResizeReactiveNodesCanvas;
+    updatePort(portId: string, request?: UpdatePortRequest): ResizeReactiveNodesCanvas;
+    unmarkPort(portId: string): ResizeReactiveNodesCanvas;
+    addEdge(edge: AddEdgeRequest): ResizeReactiveNodesCanvas;
+    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): ResizeReactiveNodesCanvas;
+    removeEdge(edgeId: unknown): ResizeReactiveNodesCanvas;
+    patchViewportMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
+    patchContentMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
+    clear(): ResizeReactiveNodesCanvas;
+    destroy(): void;
+    private reactNodeChange;
+}
+
+export declare interface ScaleLimitPreprocessorParams {
+    readonly minContentScale: number | null;
+    readonly maxContentScale: number | null;
+}
+
 declare type SharedIncrementalPriority = "shared-incremental";
 
+export declare interface ShiftLimitPreprocessorParams {
+    readonly minX: number | null;
+    readonly maxX: number | null;
+    readonly minY: number | null;
+    readonly maxY: number | null;
+}
+
+export declare interface StraightEdgeParams {
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
+}
+
 export declare class StraightEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly arrowOffset;
-    private readonly roundness;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly arrowOffset;
+    private readonly roundness;
+    private readonly cycleSquareSide;
+    private readonly detourDirection;
+    private readonly detourDistance;
+    private readonly hasSourceArrow;
+    private readonly hasTargetArrow;
+    constructor(params?: StraightEdgeParams);
+    render(params: EdgeRenderParams): void;
 }
 
 declare interface StraightEdgeShape_2 {
@@ -606,15 +579,14 @@ export declare type TransformFinishedFn = () => void;
 
 export declare interface TransformOptions {
     readonly scale?: {
-        readonly enabled?: boolean;
         readonly wheelSensitivity?: number;
     };
     readonly shift?: {
-        readonly enabled?: boolean;
         readonly cursor?: string | null;
     };
     readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
     readonly events?: {
+        readonly onBeforeTransformStarted?: BeforeTransformStartedFn;
         readonly onTransformFinished?: TransformFinishedFn;
     };
 }
@@ -625,7 +597,7 @@ export declare interface TransformPayload {
     readonly dy: number;
 }
 
-export declare type TransformPreprocessorFn = (prevTransform: TransformPayload, nextTransform: TransformPayload, canvasWidth: number, canvasHeight: number) => TransformPayload;
+export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
 
 declare type TransformPreprocessorOption = {
     readonly type: "scale-limit";
@@ -637,10 +609,14 @@ declare type TransformPreprocessorOption = {
     readonly maxX?: number;
     readonly minY?: number;
     readonly maxY?: number;
-} | {
-    readonly type: "custom";
-    readonly preprocessorFn: TransformPreprocessorFn;
-};
+} | TransformPreprocessorFn;
+
+export declare interface TransformPreprocessorParams {
+    readonly prevTransform: TransformPayload;
+    readonly nextTransform: TransformPayload;
+    readonly canvasWidth: number;
+    readonly canvasHeight: number;
+}
 
 declare interface TransformState {
     readonly scale: number;
@@ -649,7 +625,9 @@ declare interface TransformState {
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly shape?: EdgeShape_2;
+    readonly from?: unknown;
+    readonly to?: unknown;
+    readonly shape?: EdgeShape;
     readonly priority?: number;
 }
 
@@ -660,9 +638,8 @@ declare interface UpdateNodeRequest {
     readonly centerFn?: CenterFn;
 }
 
-declare interface UpdatePortRequest {
+export declare interface UpdatePortRequest {
     readonly direction?: number;
-    readonly centerFn?: CenterFn;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
@@ -676,16 +653,17 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private onBeforeNodeDrag;
     private readonly nodeIdGenerator;
     private element;
-    private readonly onCanvasMouseUp;
-    private readonly onCanvasMouseMove;
-    private readonly onCanvasTouchStart;
-    private readonly onCanvasTouchMove;
-    private readonly onCanvasTouchEnd;
+    private readonly onWindowMouseMove;
+    private readonly onWindowMouseUp;
+    private readonly onWindowTouchMove;
+    private readonly onWindowTouchFinish;
     private previousTouchCoords;
     private readonly freezePriority;
     private readonly window;
     private readonly dragCursor;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
+    attach(element: HTMLElement): UserDraggableNodesCanvas;
+    detach(): UserDraggableNodesCanvas;
     addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
     removeNode(nodeId: unknown): UserDraggableNodesCanvas;
@@ -698,8 +676,6 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
     patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
-    attach(element: HTMLElement): UserDraggableNodesCanvas;
-    detach(): UserDraggableNodesCanvas;
     destroy(): void;
     private dragNode;
     private updateMaxNodePriority;
@@ -712,27 +688,23 @@ export declare class UserDraggableNodesCanvas implements Canvas {
 
 export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
-    private readonly options?;
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
     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;
+    private readonly onWindowMouseMove;
+    private readonly onWindowMouseUp;
     private readonly onWheelScroll;
     private readonly onTouchStart;
-    private readonly onTouchMove;
-    private readonly onTouchEnd;
+    private readonly onWindowTouchMove;
+    private readonly onWindowTouchFinish;
     private readonly observer;
-    private readonly shiftCursor;
-    constructor(canvas: Canvas, options?: TransformOptions | undefined);
+    private readonly options;
+    constructor(canvas: Canvas, transformOptions?: TransformOptions);
+    attach(element: HTMLElement): UserTransformableCanvas;
+    detach(): UserTransformableCanvas;
     addNode(node: AddNodeRequest): UserTransformableCanvas;
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableCanvas;
     removeNode(nodeId: unknown): UserTransformableCanvas;
@@ -745,10 +717,7 @@ export declare class UserTransformableCanvas implements Canvas {
     patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
     patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
-    attach(element: HTMLElement): UserTransformableCanvas;
-    detach(): UserTransformableCanvas;
     destroy(): void;
-    private getAverageTouch;
     private moveViewport;
     private scaleViewport;
     private stopMouseDrag;
@@ -757,19 +726,37 @@ export declare class UserTransformableCanvas implements Canvas {
     private removeTouchDragListeners;
 }
 
+export declare interface VerticalEdgeParams {
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
+}
+
 export declare class VerticalEdgeShape implements EdgeShape {
-    private readonly arrowLength;
-    private readonly arrowWidth;
-    private readonly arrowOffset;
-    private readonly roundness;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
-    private createLinePath;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly arrowOffset;
+    private readonly roundness;
+    private readonly cycleSquareSide;
+    private readonly detourDirection;
+    private readonly detourDistance;
+    private readonly hasSourceArrow;
+    private readonly hasTargetArrow;
+    constructor(params?: VerticalEdgeParams);
+    render(params: EdgeRenderParams): void;
 }
 
 declare interface VerticalEdgeShape_2 {