@html-graph/html-graph 0.1.0 → 0.1.2

package/README.md

@@ -15,16 +15,6 @@ Port is an entity of a node to which edge can be attached to.
 
 Visit <a target="_blank" href="https://html-graph.github.io/use-cases/">use cases</a> and [use cases implementation](use-cases).
 
-## Features:
-
-- easy nodes customization using HTML
-- wide configuration options out of the box
-- draggable and scalable canvas
-- draggable and resizable nodes
-- exhaustive set of use cases
-- typescript support
-- mobile devices support
-
 ## Getting started:
 
 ```
@@ -34,19 +24,6 @@ npm i @html-graph/html-graph
 ```javascript
 import { HtmlGraphBuilder } from "@html-graph/html-graph";
 
-const canvas = new HtmlGraphBuilder()
-  .setOptions({
-    edges: {
-      shape: {
-        hasTargetArrow: true,
-      },
-    },
-  })
-  .setUserDraggableNodes()
-  .setUserTransformableCanvas()
-  .setResizeReactiveNodes()
-  .build();
-
 function createNode({ name, x, y, frontPortId, backPortId }) {
   const node = document.createElement("div");
   const text = document.createElement("div");
@@ -73,20 +50,33 @@ function createNode({ name, x, y, frontPortId, backPortId }) {
   };
 }
 
+const canvas = new HtmlGraphBuilder()
+  .setOptions({
+    edges: {
+      shape: {
+        hasTargetArrow: true,
+      },
+    },
+  })
+  .setUserDraggableNodes()
+  .setUserTransformableCanvas()
+  .setResizeReactiveNodes()
+  .build();
+
 const node1 = createNode({
   name: "Node 1",
   x: 200,
   y: 400,
-  frontPortId: "port-1-1",
-  backPortId: "port-1-2",
+  frontPortId: "node-1-in",
+  backPortId: "node-1-out",
 });
 
 const node2 = createNode({
   name: "Node 2",
   x: 600,
   y: 500,
-  frontPortId: "port-2-1",
-  backPortId: "port-2-2",
+  frontPortId: "node-2-in",
+  backPortId: "node-2-out",
 });
 
 const canvasElement = document.getElementById("canvas");
@@ -95,20 +85,15 @@ canvas
   .attach(canvasElement)
   .addNode(node1)
   .addNode(node2)
-  .addEdge({ from: "port-1-2", to: "port-2-1" });
-```
-
-## Run use cases
-
-```
-npm install
-npm run start
+  .addEdge({ from: "node-1-out", to: "node-2-in" });
 ```
 
-or
-
-```
-docker compose up
-```
+## Features:
 
-Open `http://localhost:3100`
+- easy nodes customization using HTML
+- wide configuration options out of the box
+- draggable and scalable canvas
+- draggable and resize responsive nodes
+- exhaustive set of use cases
+- typescript support
+- mobile devices support

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,24 +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 {
@@ -104,7 +122,7 @@ export declare interface Canvas {
     /**
      * updates port and attached edges
      */
-    updatePortMark(portId: unknown, request?: UpdatePortMarkRequest): Canvas;
+    updatePort(portId: unknown, request?: UpdatePortRequest): Canvas;
     /**
      * ummarks element as port of node
      * all the edges adjacent to port get removed
@@ -171,7 +189,7 @@ export declare class CanvasCore implements Canvas {
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
     removeEdge(edgeId: unknown): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
-    updatePortMark(portId: string, request?: UpdatePortMarkRequest): CanvasCore;
+    updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
     patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
@@ -202,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
          */
@@ -227,136 +240,15 @@ export declare interface CoreOptions {
     };
 }
 
-export declare const createBezierEdgeShapeFactory: (options: {
-    readonly color: string;
-    readonly width: number;
-    readonly arrowLength: number;
-    readonly arrowWidth: number;
-    readonly curvature: number;
-    readonly hasSourceArrow: boolean;
-    readonly hasTargetArrow: boolean;
-    readonly cycleRadius: number;
-    readonly smallCycleRadius: number;
-    readonly detourDistance: number;
-    readonly detourDirection: number;
-}) => EdgeShapeFactory;
-
-export declare const createHorizontalEdgeShapeFactory: (options: {
-    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;
-}) => EdgeShapeFactory;
-
-export declare const createStraightEdgeShareFactory: (options: {
-    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;
-}) => EdgeShapeFactory;
-
-export declare const createVerticalEdgeShapeFactory: (options: {
-    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;
-}) => 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 {
     readonly moveOnTop?: boolean;
     readonly dragCursor?: string | null;
     readonly events?: {
         readonly onNodeDrag?: (payload: NodeDragPayload) => void;
         readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
+        readonly onNodeDragFinished?: (nodeId: NodeDragPayload) => void;
     };
 }
 
@@ -367,20 +259,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;
@@ -398,7 +299,6 @@ export declare interface GraphNode {
 
 export declare interface GraphPort {
     readonly element: HTMLElement;
-    readonly centerFn: CenterFn;
     readonly direction: number;
 }
 
@@ -422,6 +322,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;
@@ -436,19 +338,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 {
@@ -476,7 +396,7 @@ export declare class HtmlGraphBuilder {
     setOptions(options: CoreOptions): HtmlGraphBuilder;
     setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
     setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
-    setResizableReactiveNodes(): HtmlGraphBuilder;
+    setResizeReactiveNodes(): HtmlGraphBuilder;
     build(): Canvas;
 }
 
@@ -489,7 +409,6 @@ declare type IncrementalPriority = "incremental";
 export declare type MarkNodePortRequest = {
     readonly id?: unknown;
     readonly element: HTMLElement;
-    readonly centerFn?: CenterFn;
     readonly direction?: number;
 };
 
@@ -497,7 +416,6 @@ export declare interface MarkPortRequest {
     readonly id?: unknown;
     readonly element: HTMLElement;
     readonly nodeId: unknown;
-    readonly centerFn?: CenterFn;
     readonly direction?: number;
 }
 
@@ -535,7 +453,6 @@ export declare interface Point {
 
 declare interface PortPayload {
     readonly element: HTMLElement;
-    centerFn: CenterFn;
     direction: number;
 }
 
@@ -585,7 +502,7 @@ export declare class ResizeReactiveNodesCanvas implements Canvas {
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): ResizeReactiveNodesCanvas;
     removeNode(nodeId: unknown): ResizeReactiveNodesCanvas;
     markPort(port: MarkPortRequest): ResizeReactiveNodesCanvas;
-    updatePortMark(portId: string, request?: UpdatePortMarkRequest): ResizeReactiveNodesCanvas;
+    updatePort(portId: string, request?: UpdatePortRequest): ResizeReactiveNodesCanvas;
     unmarkPort(portId: string): ResizeReactiveNodesCanvas;
     addEdge(edge: AddEdgeRequest): ResizeReactiveNodesCanvas;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): ResizeReactiveNodesCanvas;
@@ -611,19 +528,37 @@ export declare interface ShiftLimitPreprocessorParams {
     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 {
@@ -645,7 +580,7 @@ export declare type TransformFinishedFn = () => void;
 
 export declare interface TransformOptions {
     readonly scale?: {
-        readonly wheelSensitivity?: number;
+        readonly mouseWheelSensitivity?: number;
     };
     readonly shift?: {
         readonly cursor?: string | null;
@@ -691,20 +626,21 @@ declare interface TransformState {
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly shape?: EdgeShape_2;
+    readonly from?: unknown;
+    readonly to?: unknown;
+    readonly shape?: EdgeShape;
     readonly priority?: number;
 }
 
-declare interface UpdateNodeRequest {
+export declare interface UpdateNodeRequest {
     readonly x?: number;
     readonly y?: number;
     readonly priority?: number;
     readonly centerFn?: CenterFn;
 }
 
-export declare interface UpdatePortMarkRequest {
+export declare interface UpdatePortRequest {
     readonly direction?: number;
-    readonly centerFn?: CenterFn;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
@@ -716,6 +652,7 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private grabbedNodeId;
     private onNodeDrag;
     private onBeforeNodeDrag;
+    private onNodeDragFinished;
     private readonly nodeIdGenerator;
     private element;
     private readonly onWindowMouseMove;
@@ -733,7 +670,7 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
     removeNode(nodeId: unknown): UserDraggableNodesCanvas;
     markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
-    updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserDraggableNodesCanvas;
+    updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
     unmarkPort(portId: string): UserDraggableNodesCanvas;
     addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserDraggableNodesCanvas;
@@ -774,7 +711,7 @@ export declare class UserTransformableCanvas implements Canvas {
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableCanvas;
     removeNode(nodeId: unknown): UserTransformableCanvas;
     markPort(port: MarkPortRequest): UserTransformableCanvas;
-    updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserTransformableCanvas;
+    updatePort(portId: string, request?: UpdatePortRequest): UserTransformableCanvas;
     unmarkPort(portId: string): UserTransformableCanvas;
     addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableCanvas;
@@ -791,19 +728,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 {