@html-graph/html-graph 0.0.51 → 0.0.52

package/README.md

@@ -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");

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;
@@ -71,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
@@ -94,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
      */
@@ -106,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
      */
@@ -135,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;
 }
@@ -150,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 {
     /**
@@ -227,6 +231,20 @@ export declare const createBezierEdgeControllerFactory: (options: {
     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: {
     color: string;
     width: number;
@@ -241,6 +259,20 @@ export declare const createStraightEdgeControllerFactory: (options: {
     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 {
     readonly type: "custom";
     readonly controllerFactory: EdgeControllerFactory;
@@ -310,7 +342,7 @@ 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",
@@ -318,6 +350,37 @@ export declare enum EdgeType {
     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;
+}
+
+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 {
     private coreOptions;
     private dragOptions;
@@ -339,15 +402,15 @@ 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;
@@ -374,8 +437,8 @@ export declare interface PatchViewportRequest {
 
 export declare interface PortPayload {
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
-    readonly direction: number;
+    centerFn: CenterFn;
+    direction: number;
 }
 
 export declare class PublicViewportTransformer {
@@ -458,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 {
@@ -477,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;
@@ -519,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;
@@ -540,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];