@html-graph/html-graph 0.0.51 → 0.0.53

package/README.md

@@ -10,12 +10,10 @@
     <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 
-Instead of connecting nodes dirrectly this library uses concept of ports, which provide greater fexibility at managing edges.
-Port is an entity of a node to which edge 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>.
 
-Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
+Instead of connecting nodes directly this library uses concept of ports, which provide greater fexibility at managing edges.
+Port is an entity of a node to which edge can be attached to.
 
 ## Features:
 
@@ -33,12 +31,18 @@ npm i @html-graph/html-graph
 ```
 
 ```typescript
-import { MarkNodePortRequest, HtmlGraphBuilder } from "@html-graph/html-graph";
+import { AddNodePorts, HtmlGraphBuilder } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
-    background: { type: "dots" },
-    edges: { hasTargetArrow: true },
+    background: {
+      type: "dots",
+    },
+    edges: {
+      shape: {
+        hasTargetArrow: true,
+      },
+    },
   })
   .setUserDraggableNodes()
   .setUserTransformableCanvas()
@@ -48,7 +52,7 @@ function createNode(
   name: string,
   frontPortId: string,
   backPortId: string,
-): [HTMLElement, Record<string, MarkNodePortRequest>] {
+): [HTMLElement, AddNodePorts] {
   const node = document.createElement("div");
   node.classList.add("node");
 
@@ -64,7 +68,13 @@ function createNode(
   backPort.classList.add("port");
   node.appendChild(backPort);
 
-  return [node, { [frontPortId]: frontPort, [backPortId]: backPort }];
+  return [
+    node,
+    [
+      [frontPortId, frontPort],
+      [backPortId, backPort],
+    ],
+  ];
 }
 
 const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");

package/dist/main.d.ts

@@ -1,26 +1,27 @@
 export declare interface AddEdgeRequest {
-    id?: string;
+    id?: unknown;
     from: string;
     to: string;
-    options?: EdgeOptions;
+    options?: EdgeShape;
+    priority?: number;
 }
 
+export declare type AddNodePorts = Iterable<readonly [unknown, MarkNodePortRequest]>;
+
 export declare interface AddNodeRequest {
-    id?: string;
+    id?: unknown;
     element: HTMLElement;
     x: number;
     y: number;
-    ports?: Record<string, MarkNodePortRequest>;
+    ports?: AddNodePorts;
     centerFn?: CenterFn;
+    priority?: number;
 }
 
 export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
 
 declare type BackgroundOptions = {
     readonly type: "none";
-} | {
-    readonly type: "color";
-    readonly color?: string;
 } | {
     readonly type: "dots";
     readonly dotColor?: string;
@@ -32,7 +33,7 @@ declare type BackgroundOptions = {
     readonly drawingFn: BackgroundDrawingFn;
 };
 
-export declare class BezierEdgeController implements EdgeController {
+export declare class BezierEdgeShape implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly curvature;
@@ -47,7 +48,7 @@ export declare class BezierEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface BezierEdgeOptions {
+declare interface BezierEdgeShape_2 {
     readonly type?: "bezier";
     readonly color?: string;
     readonly width?: number;
@@ -63,6 +64,10 @@ declare interface BezierEdgeOptions {
 }
 
 export declare interface Canvas {
+    /**
+     * provides api for accessing graph model
+     */
+    readonly model: PublicGraphStore;
     /**
      * provides api for canvas transformation
      */
@@ -71,20 +76,24 @@ export declare interface Canvas {
      * adds node to graph
      */
     addNode(node: AddNodeRequest): Canvas;
+    /**
+     * updates node absolute coordinates
+     */
+    updateNode(nodeId: unknown, request: UpdateNodeRequest): Canvas;
     /**
      * removes node from graph
      * all the ports of node get unmarked
      * all the edges adjacent to node get removed
      */
-    removeNode(nodeId: string): Canvas;
+    removeNode(nodeId: unknown): Canvas;
     /**
      * marks element as port of node
      */
     markPort(port: MarkPortRequest): Canvas;
     /**
-     * updates edge attached to port
+     * updates port and attached edges
      */
-    updatePortEdges(portId: string): Canvas;
+    updatePort(portId: string, request?: UpdatePortRequest): Canvas;
     /**
      * ummarks element as port of node
      * all the edges adjacent to port get removed
@@ -94,10 +103,14 @@ export declare interface Canvas {
      * adds edge to graph
      */
     addEdge(edge: AddEdgeRequest): Canvas;
+    /**
+     * updates edge
+     */
+    updateEdge(edgeId: unknown, request: UpdateEdgeRequest): Canvas;
     /**
      * removes edge from graph
      */
-    removeEdge(edgeId: string): Canvas;
+    removeEdge(edgeId: unknown): Canvas;
     /**
      * applies transformation for viewport
      */
@@ -106,18 +119,6 @@ export declare interface Canvas {
      * moves viewport to nodes
      */
     moveToNodes(nodeIds: readonly string[]): Canvas;
-    /**
-     * updates node absolute coordinates
-     */
-    updateNodeCoordinates(nodeId: string, x: number, y: number): Canvas;
-    /**
-     * updates edge
-     */
-    updateEdge(edgeId: string, request: UpdateEdgeRequest): Canvas;
-    /**
-     * moves specified node on top
-     */
-    moveNodeOnTop(nodeId: string): Canvas;
     /**
      * attaches canvas to given element
      */
@@ -135,7 +136,7 @@ export declare interface Canvas {
     /**
      * destroys canvas
      * canvas element gets rolled back to initial state
-     * canvas requires reinitialization in order to be used again
+     * canvas can not be reused
      */
     destroy(): void;
 }
@@ -146,28 +147,30 @@ export declare interface Canvas {
 export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
+    readonly model: PublicGraphStore;
     private readonly di;
-    private readonly edgeControllerFactory;
+    private readonly edgeShapeFactory;
     constructor(apiOptions?: CoreOptions | undefined);
     addNode(node: AddNodeRequest): CanvasCore;
-    moveNodeOnTop(nodeId: string): CanvasCore;
-    removeNode(nodeId: string): CanvasCore;
+    updateNode(nodeId: unknown, request: UpdateNodeRequest): CanvasCore;
+    removeNode(nodeId: unknown): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
-    updatePortEdges(portId: string): CanvasCore;
+    updatePort(portId: string, request: UpdatePortRequest): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     addEdge(edge: AddEdgeRequest): CanvasCore;
-    removeEdge(edgeId: string): CanvasCore;
+    updateEdge(edgeId: unknown, request: UpdateEdgeRequest): CanvasCore;
+    removeEdge(edgeId: unknown): CanvasCore;
     patchViewportState(request: PatchViewportRequest): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
-    updateNodeCoordinates(nodeId: string, x: number, y: number): CanvasCore;
-    updateEdge(edgeId: string, request: UpdateEdgeRequest): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
     destroy(): void;
 }
 
-declare type CenterFn = (width: number, height: number) => [number, number];
+export declare type CenterFn = (width: number, height: number) => [number, number];
+
+declare type ConstantPriority = number;
 
 export declare interface CoreOptions {
     /**
@@ -183,6 +186,10 @@ export declare interface CoreOptions {
          * center of nodes specified in addNode method by x and y
          */
         readonly centerFn?: CenterFn;
+        /**
+         * specifies default z-index value
+         */
+        readonly priority?: Priority;
     };
     /**
      * ports related behavior
@@ -201,19 +208,19 @@ export declare interface CoreOptions {
     /**
      *edges related behavior
      */
-    readonly edges?: EdgeOptions;
-    /**
-     * layers related behavior
-     */
-    readonly layers?: {
+    readonly edges?: {
         /**
-         * sets layers order
+         * specifies default controller
          */
-        readonly mode?: LayersMode;
+        readonly shape?: EdgeShape;
+        /**
+         * specifies default z-index value
+         */
+        readonly priority?: Priority;
     };
 }
 
-export declare const createBezierEdgeControllerFactory: (options: {
+export declare const createBezierEdgeShapeFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -225,9 +232,23 @@ export declare const createBezierEdgeControllerFactory: (options: {
     smallCycleRadius: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => 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 createStraightEdgeControllerFactory: (options: {
+export declare const createStraightEdgeShareFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -239,14 +260,30 @@ export declare const createStraightEdgeControllerFactory: (options: {
     roundness: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => EdgeShapeFactory;
 
-declare interface CustomEdgeOptions {
+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 controllerFactory: EdgeControllerFactory;
+    readonly controllerFactory: EdgeShapeFactory;
 }
 
-export declare class CycleCircleEdgeController implements EdgeController {
+declare type CustomPriority = PriorityFn;
+
+export declare class CycleCircleEdgeShape implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -261,7 +298,7 @@ export declare class CycleCircleEdgeController implements EdgeController {
     update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
 }
 
-export declare class CycleSquareEdgeController implements EdgeController {
+export declare class CycleSquareEdgeShape implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -278,7 +315,7 @@ export declare class CycleSquareEdgeController implements EdgeController {
     update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
 }
 
-export declare class DetourStraightEdgeController implements EdgeController {
+export declare class DetourStraightEdgeShape implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -297,6 +334,7 @@ export declare class DetourStraightEdgeController implements EdgeController {
 }
 
 export declare interface DragOptions {
+    grabPriorityStrategy?: "freeze" | "move-on-top";
     events?: {
         onNodeDrag?: (payload: NodeDragPayload) => void;
         onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
@@ -308,9 +346,16 @@ export declare interface EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare type EdgeControllerFactory = (type: EdgeType) => EdgeController;
+declare interface EdgePayload {
+    from: string;
+    to: string;
+    shape: EdgeController;
+    priority: number;
+}
+
+declare type EdgeShape = BezierEdgeShape_2 | StraightEdgeShape_2 | CustomEdgeShape | HorizontalEdgeShape_2 | VerticalEdgeShape_2;
 
-declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions;
+declare type EdgeShapeFactory = (type: EdgeType) => EdgeController;
 
 export declare enum EdgeType {
     Regular = "regular",
@@ -318,6 +363,87 @@ export declare enum EdgeType {
     NodeCycle = "node-cycle"
 }
 
+export declare interface GraphEdge {
+    readonly from: unknown;
+    readonly to: unknown;
+    readonly priority: number;
+}
+
+export declare interface GraphNode {
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    readonly centerFn: CenterFn;
+    readonly priority: number;
+}
+
+export declare interface GraphPort {
+    readonly element: HTMLElement;
+    readonly centerFn: CenterFn;
+    readonly direction: number;
+}
+
+declare class GraphStore {
+    private readonly nodes;
+    private readonly ports;
+    private readonly nodePorts;
+    private readonly portNodeId;
+    private readonly edges;
+    private readonly incommingEdges;
+    private readonly outcommingEdges;
+    private readonly cycleEdges;
+    addNode(nodeId: unknown, element: HTMLElement, x: number, y: number, centerFn: CenterFn, priority: number): void;
+    getNode(nodeId: unknown): NodePayload | undefined;
+    removeNode(nodeId: unknown): void;
+    addPort(portId: unknown, element: HTMLElement, nodeId: unknown, centerFn: CenterFn, dir: number): void;
+    getPort(portId: unknown): PortPayload | undefined;
+    getPortNode(portId: string): unknown | undefined;
+    removePort(portId: string): void;
+    addEdge(edgeId: unknown, fromPortId: string, toPortId: string, shape: EdgeController, priority: number): void;
+    getEdge(edgeId: unknown): EdgePayload | undefined;
+    removeEdge(edgeId: unknown): void;
+    getPortAdjacentEdges(portId: string): readonly unknown[];
+    getNodeAdjacentEdges(nodeId: unknown): readonly unknown[];
+    clear(): void;
+    getPortIncomingEdges(portId: unknown): readonly unknown[];
+    getPortOutcomingEdges(portId: unknown): readonly unknown[];
+    getPortCycleEdges(portId: unknown): readonly unknown[];
+    getNodeIncomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdges(nodeId: unknown): readonly unknown[];
+}
+
+export declare class HorizontalEdgeShape implements EdgeController {
+    private readonly color;
+    private readonly width;
+    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(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+}
+
+declare interface HorizontalEdgeShape_2 {
+    readonly type: "horizontal";
+    readonly color?: string;
+    readonly width?: number;
+    readonly arrowLength?: number;
+    readonly arrowWidth?: number;
+    readonly arrowOffset?: number;
+    readonly hasSourceArrow?: boolean;
+    readonly hasTargetArrow?: boolean;
+    readonly cycleSquareSide?: number;
+    readonly roundness?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
+}
+
 export declare class HtmlGraphBuilder {
     private coreOptions;
     private dragOptions;
@@ -330,7 +456,7 @@ export declare class HtmlGraphBuilder {
     build(): Canvas;
 }
 
-declare type LayersMode = "edges-on-top" | "nodes-on-top" | "edges-follow-node";
+declare type IncrementalPriority = "incremental";
 
 export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
@@ -339,31 +465,26 @@ export declare type MarkNodePortRequest = HTMLElement | {
 };
 
 export declare interface MarkPortRequest {
-    readonly id?: string;
+    readonly id?: unknown;
     readonly element: HTMLElement;
-    readonly nodeId: string;
+    readonly nodeId: unknown;
     readonly centerFn?: CenterFn;
     readonly direction?: number;
 }
 
 export declare interface NodeDragPayload {
-    readonly nodeId: string;
+    readonly nodeId: unknown;
     readonly element: HTMLElement;
     readonly x: number;
     readonly y: number;
 }
 
-export declare interface NodeItem {
-    readonly id: string;
-    readonly x: number;
-    readonly y: number;
-    readonly element: HTMLElement;
-}
-
-export declare interface NodeResponse {
-    readonly x: number;
-    readonly y: number;
-    readonly element: HTMLElement;
+declare interface NodePayload {
+    element: HTMLElement;
+    x: number;
+    y: number;
+    centerFn: CenterFn;
+    priority: number;
 }
 
 export declare interface PatchViewportRequest {
@@ -374,8 +495,29 @@ export declare interface PatchViewportRequest {
 
 export declare interface PortPayload {
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
-    readonly direction: number;
+    centerFn: CenterFn;
+    direction: number;
+}
+
+declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
+
+export declare type PriorityFn = () => number;
+
+declare class PublicGraphStore {
+    private readonly graphStore;
+    constructor(graphStore: GraphStore);
+    getNode(nodeId: unknown): GraphNode | undefined;
+    getPort(portId: unknown): GraphPort | undefined;
+    getPortNode(portId: string): unknown | undefined;
+    getEdge(edgeId: unknown): GraphEdge | undefined;
+    getPortAdjacentEdges(portId: string): readonly unknown[];
+    getNodeAdjacentEdges(nodeId: unknown): readonly unknown[];
+    getPortIncomingEdges(portId: unknown): readonly unknown[];
+    getPortOutcomingEdges(portId: unknown): readonly unknown[];
+    getPortCycleEdges(portId: unknown): readonly unknown[];
+    getNodeIncomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdges(nodeId: unknown): readonly unknown[];
 }
 
 export declare class PublicViewportTransformer {
@@ -403,7 +545,9 @@ export declare class PublicViewportTransformer {
     getAbsScale(): number;
 }
 
-export declare class StraightEdgeController implements EdgeController {
+declare type SharedIncrementalPriority = "shared-incremental";
+
+export declare class StraightEdgeShape implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -419,7 +563,7 @@ export declare class StraightEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface StraightEdgeOptions {
+declare interface StraightEdgeShape_2 {
     readonly type: "straight";
     readonly color?: string;
     readonly width?: number;
@@ -458,11 +602,26 @@ export declare interface TransformPayload {
 
 export declare interface UpdateEdgeRequest {
     readonly controller?: EdgeController;
+    readonly priority?: number;
+}
+
+declare interface UpdateNodeRequest {
+    readonly x?: number;
+    readonly y?: number;
+    readonly priority?: number;
+    readonly centerFn?: CenterFn;
+}
+
+declare interface UpdatePortRequest {
+    readonly direction?: number;
+    readonly centerFn?: CenterFn;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly canvas;
+    readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
+    private maxNodePriority;
     private readonly nodes;
     private grabbedNodeId;
     private onNodeDrag;
@@ -475,30 +634,33 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchMove;
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
+    private freezePriority;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
-    addNode(node: AddNodeRequest): UserDraggableNodesCanvas;
-    removeNode(nodeId: string): UserDraggableNodesCanvas;
+    addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
+    updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
+    removeNode(nodeId: unknown): UserDraggableNodesCanvas;
     markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
-    updatePortEdges(portId: string): UserDraggableNodesCanvas;
+    updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
     unmarkPort(portId: string): UserDraggableNodesCanvas;
     addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
-    removeEdge(edgeId: string): UserDraggableNodesCanvas;
+    updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
+    removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
     patchViewportState(request: PatchViewportRequest): UserDraggableNodesCanvas;
     moveToNodes(nodeIds: readonly string[]): UserDraggableNodesCanvas;
-    updateNodeCoordinates(nodeId: string, x: number, y: number): UserDraggableNodesCanvas;
-    updateEdge(edgeId: string, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
-    moveNodeOnTop(nodeId: string): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
     attach(element: HTMLElement): UserDraggableNodesCanvas;
     detach(): UserDraggableNodesCanvas;
     destroy(): void;
     private setCursor;
     private dragNode;
+    private updateMaxNodePriority;
+    private moveNodeOnTop;
 }
 
 export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
     private readonly options?;
+    readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
     private isMoving;
@@ -519,17 +681,16 @@ export declare class UserTransformableCanvas implements Canvas {
     private readonly onTouchEnd;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
     addNode(node: AddNodeRequest): UserTransformableCanvas;
-    removeNode(nodeId: string): UserTransformableCanvas;
+    updateNode(nodeId: unknown, request: UpdateNodeRequest): UserTransformableCanvas;
+    removeNode(nodeId: unknown): UserTransformableCanvas;
     markPort(port: MarkPortRequest): UserTransformableCanvas;
-    updatePortEdges(portId: string): UserTransformableCanvas;
+    updatePort(portId: string, request: UpdatePortRequest): UserTransformableCanvas;
     unmarkPort(portId: string): UserTransformableCanvas;
     addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
-    removeEdge(edgeId: string): UserTransformableCanvas;
+    updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserTransformableCanvas;
+    removeEdge(edgeId: unknown): UserTransformableCanvas;
     patchViewportState(request: PatchViewportRequest): UserTransformableCanvas;
     moveToNodes(nodeIds: readonly string[]): UserTransformableCanvas;
-    updateNodeCoordinates(nodeId: string, x: number, y: number): UserTransformableCanvas;
-    updateEdge(edgeId: string, request: UpdateEdgeRequest): UserTransformableCanvas;
-    moveNodeOnTop(nodeId: string): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
     attach(element: HTMLElement): UserTransformableCanvas;
     detach(): UserTransformableCanvas;
@@ -540,6 +701,37 @@ export declare class UserTransformableCanvas implements Canvas {
     private scaleViewport;
 }
 
+export declare class VerticalEdgeShape implements EdgeController {
+    private readonly color;
+    private readonly width;
+    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(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+}
+
+declare interface VerticalEdgeShape_2 {
+    readonly type: "vertical";
+    readonly color?: string;
+    readonly width?: number;
+    readonly arrowLength?: number;
+    readonly arrowWidth?: number;
+    readonly arrowOffset?: number;
+    readonly hasSourceArrow?: boolean;
+    readonly hasTargetArrow?: boolean;
+    readonly cycleSquareSide?: number;
+    readonly roundness?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
+}
+
 declare class ViewportTransformer {
     private state;
     getViewCoords(xa: number, ya: number): [number, number];