@html-graph/html-graph 0.0.50 → 0.0.52

package/README.md

@@ -11,7 +11,7 @@
 </a>
 
 Instead of connecting nodes dirrectly this library uses concept of ports, which provide greater fexibility at managing edges.
-Port is an entity of the node to which edge can be attached to.
+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.
 
@@ -33,7 +33,7 @@ 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({
@@ -48,7 +48,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 +64,12 @@ function createNode(
   backPort.classList.add("port");
   node.appendChild(backPort);
 
-  return [node, { [frontPortId]: frontPort, [backPortId]: backPort }];
+  const ports = new Map([
+    [frontPortId, frontPort],
+    [backPortId, backPort],
+  ]);
+
+  return [node, ports];
 }
 
 const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");
@@ -81,7 +86,7 @@ canvas
 
 Refer to [Examples](examples) for more.
 
-## Run examples locally
+## Run examples
 
 Use node version >= 20
 

package/dist/main.d.ts

@@ -1,17 +1,21 @@
 export declare interface AddEdgeRequest {
-    id?: string;
+    id?: unknown;
     from: string;
     to: string;
     options?: EdgeOptions;
+    priority?: number;
 }
 
+export declare type AddNodePorts = ReadonlyMap<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;
@@ -58,6 +62,8 @@ declare interface BezierEdgeOptions {
     readonly hasTargetArrow?: boolean;
     readonly cycleRadius?: number;
     readonly smallCycleRadius?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
 }
 
 export declare interface Canvas {
@@ -69,20 +75,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
@@ -92,10 +102,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
      */
@@ -104,18 +118,10 @@ 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;
+    moveNodeOnTop(nodeId: unknown): Canvas;
     /**
      * attaches canvas to given element
      */
@@ -133,7 +139,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;
 }
@@ -148,24 +154,24 @@ export declare class CanvasCore implements Canvas {
     private readonly edgeControllerFactory;
     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;
+    moveNodeOnTop(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];
 
 export declare interface CoreOptions {
     /**
@@ -191,6 +197,10 @@ export declare interface CoreOptions {
          * center of port determines point to which edge attaches
          */
         readonly centerFn?: CenterFn;
+        /**
+         * specifies default direction of port
+         */
+        readonly direction?: number;
     };
     /**
      *edges related behavior
@@ -217,6 +227,22 @@ export declare const createBezierEdgeControllerFactory: (options: {
     hasTargetArrow: boolean;
     cycleRadius: number;
     smallCycleRadius: number;
+    detourDistance: number;
+    detourDirection: number;
+}) => EdgeControllerFactory;
+
+export declare const createHorizontalEdgeControllerFactory: (options: {
+    color: string;
+    width: number;
+    arrowLength: number;
+    arrowWidth: number;
+    arrowOffset: number;
+    hasSourceArrow: boolean;
+    hasTargetArrow: boolean;
+    cycleSquareSide: number;
+    roundness: number;
+    detourDistance: number;
+    detourDirection: number;
 }) => EdgeControllerFactory;
 
 export declare const createStraightEdgeControllerFactory: (options: {
@@ -229,6 +255,22 @@ export declare const createStraightEdgeControllerFactory: (options: {
     hasTargetArrow: boolean;
     cycleSquareSide: number;
     roundness: number;
+    detourDistance: number;
+    detourDirection: number;
+}) => EdgeControllerFactory;
+
+export declare const createVerticalEdgeControllerFactory: (options: {
+    color: string;
+    width: number;
+    arrowLength: number;
+    arrowWidth: number;
+    arrowOffset: number;
+    hasSourceArrow: boolean;
+    hasTargetArrow: boolean;
+    cycleSquareSide: number;
+    roundness: number;
+    detourDistance: number;
+    detourDirection: number;
 }) => EdgeControllerFactory;
 
 declare interface CustomEdgeOptions {
@@ -263,11 +305,29 @@ export declare class CycleSquareEdgeController implements EdgeController {
     private readonly line;
     private readonly arrow;
     private readonly roundness;
-    private readonly points;
+    private readonly linePoints;
     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 class DetourStraightEdgeController 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;
+    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(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+}
+
 export declare interface DragOptions {
     events?: {
         onNodeDrag?: (payload: NodeDragPayload) => void;
@@ -282,20 +342,43 @@ export declare interface EdgeController {
 
 declare type EdgeControllerFactory = (type: EdgeType) => EdgeController;
 
-declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions;
+declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions | HorizontalEdgeOptions | VerticalEdgeOptions;
 
 export declare enum EdgeType {
     Regular = "regular",
-    Cycle = "cycle"
+    PortCycle = "port-cycle",
+    NodeCycle = "node-cycle"
+}
+
+export declare class HorizontalEdgeController 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;
 }
 
-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;
+declare interface HorizontalEdgeOptions {
+    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 {
@@ -315,19 +398,19 @@ declare type LayersMode = "edges-on-top" | "nodes-on-top" | "edges-follow-node";
 export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
     readonly centerFn?: CenterFn;
-    readonly direction?: number | null;
+    readonly direction?: number;
 };
 
 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 | null;
+    readonly direction?: number;
 }
 
 export declare interface NodeDragPayload {
-    readonly nodeId: string;
+    readonly nodeId: unknown;
     readonly element: HTMLElement;
     readonly x: number;
     readonly y: number;
@@ -352,12 +435,10 @@ export declare interface PatchViewportRequest {
     y?: number;
 }
 
-declare type Point = [number, number];
-
 export declare interface PortPayload {
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
-    readonly direction: number | null;
+    centerFn: CenterFn;
+    direction: number;
 }
 
 export declare class PublicViewportTransformer {
@@ -391,12 +472,12 @@ export declare class StraightEdgeController implements EdgeController {
     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 roundness;
     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;
 }
@@ -412,6 +493,8 @@ declare interface StraightEdgeOptions {
     readonly hasTargetArrow?: boolean;
     readonly cycleSquareSide?: number;
     readonly roundness?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
 }
 
 export declare interface TransformOptions {
@@ -438,6 +521,19 @@ 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 {
@@ -457,16 +553,16 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private previousTouchCoords;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
     addNode(node: AddNodeRequest): UserDraggableNodesCanvas;
-    removeNode(nodeId: string): 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;
@@ -499,16 +595,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;
@@ -520,6 +616,37 @@ export declare class UserTransformableCanvas implements Canvas {
     private scaleViewport;
 }
 
+export declare class VerticalEdgeController 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 VerticalEdgeOptions {
+    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];