@html-graph/html-graph 0.0.48 → 0.0.49

package/README.md

@@ -2,7 +2,7 @@
   <img src="/media/favicon.png" alt="HTMLGraph" width="25" height="25"/> HTMLGraph
 </h1>
 
-## Graph visualization library that enables to customize nodes using HTML
+### Graph visualization library that enables nodes customization using HTML
 
 ![CI](https://github.com/html-graph/html-graph/actions/workflows/ci.yml/badge.svg?branch=master)
 
@@ -40,15 +40,15 @@ const canvas = new HtmlGraphBuilder()
     background: { type: "dots" },
     connections: { hasTargetArrow: true },
   })
-  .setDraggableNodes()
-  .setTransformableCanvas()
+  .setUserDraggableNodes()
+  .setUserTransformableCanvas()
   .build();
 
 function createNode(
   name: string,
   frontPortId: string,
   backPortId: string,
-): [HTMLElement, Record<string, MarkPortRequest>] {
+): [HTMLElement, Record<string, MarkNodePortRequest>] {
   const node = document.createElement("div");
   node.classList.add("node");
 
@@ -76,7 +76,7 @@ canvas
   .attach(canvasElement)
   .addNode({ element: node1, x: 200, y: 400, ports: ports1 })
   .addNode({ element: node2, x: 600, y: 500, ports: ports2 })
-  .addConnection({ from: "port-1-2", to: "port-2-1" });
+  .addEdge({ from: "port-1-2", to: "port-2-1" });
 ```
 
 Refer to [Examples](examples) for more.

package/dist/main.d.ts

@@ -1,8 +1,8 @@
-export declare interface AddConnectionRequest {
+export declare interface AddEdgeRequest {
     id?: string;
     from: string;
     to: string;
-    options?: ConnectionOptions;
+    options?: EdgeOptions;
 }
 
 export declare interface AddNodeRequest {
@@ -32,14 +32,12 @@ declare type BackgroundOptions = {
     readonly drawingFn: BackgroundDrawingFn;
 };
 
-export declare class BezierConnectionController implements ConnectionController {
+export declare class BezierEdgeController implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly curvature;
     private readonly arrowLength;
     private readonly arrowWidth;
-    private readonly hasSourceArrow;
-    private readonly hasTargetArrow;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
@@ -49,7 +47,7 @@ export declare class BezierConnectionController implements ConnectionController
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface BezierConnectionOptions {
+declare interface BezierEdgeOptions {
     readonly type?: "bezier";
     readonly color?: string;
     readonly width?: number;
@@ -58,6 +56,8 @@ declare interface BezierConnectionOptions {
     readonly arrowWidth?: number;
     readonly hasSourceArrow?: boolean;
     readonly hasTargetArrow?: boolean;
+    readonly cycleRadius?: number;
+    readonly smallCycleRadius?: number;
 }
 
 export declare interface Canvas {
@@ -65,10 +65,6 @@ export declare interface Canvas {
      * provides api for canvas transformation
      */
     readonly transformation: PublicViewportTransformer;
-    /**
-     * provides api for graph structure access
-     */
-    readonly model: PublicGraphStore;
     /**
      * adds node to graph
      */
@@ -76,7 +72,7 @@ export declare interface Canvas {
     /**
      * removes node from graph
      * all the ports of node get unmarked
-     * all the connections adjacent to node get removed
+     * all the edges adjacent to node get removed
      */
     removeNode(nodeId: string): Canvas;
     /**
@@ -84,22 +80,22 @@ export declare interface Canvas {
      */
     markPort(port: MarkPortRequest): Canvas;
     /**
-     * updates connections attached to port
+     * updates edge attached to port
      */
-    updatePortConnections(portId: string): Canvas;
+    updatePortEdges(portId: string): Canvas;
     /**
      * ummarks element as port of node
-     * all the connections adjacent to port get removed
+     * all the edges adjacent to port get removed
      */
     unmarkPort(portId: string): Canvas;
     /**
-     * adds connection to graph
+     * adds edge to graph
      */
-    addConnection(connection: AddConnectionRequest): Canvas;
+    addEdge(edge: AddEdgeRequest): Canvas;
     /**
-     * removes connection from graph
+     * removes edge from graph
      */
-    removeConnection(connectionId: string): Canvas;
+    removeEdge(edgeId: string): Canvas;
     /**
      * applies transformation for viewport
      */
@@ -113,9 +109,9 @@ export declare interface Canvas {
      */
     updateNodeCoordinates(nodeId: string, x: number, y: number): Canvas;
     /**
-     * updates connection
+     * updates edge
      */
-    updateConnection(connectionId: string, request: UpdateConnectionRequest): Canvas;
+    updateConnection(edgeId: string, request: UpdateConnectionRequest): Canvas;
     /**
      * moves specified node on top
      */
@@ -148,7 +144,6 @@ export declare interface Canvas {
 export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
     private readonly di;
     private readonly connectionControllerFactory;
     constructor(apiOptions?: CoreOptions | undefined);
@@ -156,10 +151,10 @@ export declare class CanvasCore implements Canvas {
     moveNodeOnTop(nodeId: string): CanvasCore;
     removeNode(nodeId: string): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
-    updatePortConnections(portId: string): CanvasCore;
+    updatePortEdges(portId: string): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
-    addConnection(connection: AddConnectionRequest): CanvasCore;
-    removeConnection(connectionId: string): CanvasCore;
+    addEdge(connection: AddEdgeRequest): CanvasCore;
+    removeEdge(connectionId: string): CanvasCore;
     patchViewportState(request: PatchViewportRequest): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
     updateNodeCoordinates(nodeId: string, x: number, y: number): CanvasCore;
@@ -172,34 +167,6 @@ export declare class CanvasCore implements Canvas {
 
 declare type CenterFn = (width: number, height: number) => [number, number];
 
-export declare interface ConnectionController {
-    readonly svg: SVGSVGElement;
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
-}
-
-declare type ConnectionControllerFactory = (type: ConnectionType) => ConnectionController;
-
-declare type ConnectionOptions = BezierConnectionOptions | StraightConnectionOptions | CustomConnectionOptions;
-
-declare interface ConnectionPayload {
-    from: string;
-    to: string;
-    controller: ConnectionController;
-}
-
-export declare enum ConnectionType {
-    Regular = "regular",
-    Cycle = "cycle"
-}
-
-export declare class ConnectionUtils {
-    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;
-}
-
 export declare interface CoreOptions {
     /**
      * canvas background settings
@@ -228,7 +195,7 @@ export declare interface CoreOptions {
     /**
      *connections related behavior
      */
-    readonly connections?: ConnectionOptions;
+    readonly edges?: EdgeOptions;
     /**
      * layers related behavior
      */
@@ -240,7 +207,7 @@ export declare interface CoreOptions {
     };
 }
 
-export declare const createBezierConnectionControllerFactory: (options: {
+export declare const createBezierEdgeControllerFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -248,9 +215,11 @@ export declare const createBezierConnectionControllerFactory: (options: {
     curvature: number;
     hasSourceArrow: boolean;
     hasTargetArrow: boolean;
-}) => ConnectionControllerFactory;
+    cycleRadius: number;
+    smallCycleRadius: number;
+}) => EdgeControllerFactory;
 
-export declare const createStraightConnectionControllerFactory: (options: {
+export declare const createStraightEdgeControllerFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -258,89 +227,75 @@ export declare const createStraightConnectionControllerFactory: (options: {
     minPortOffset: number;
     hasSourceArrow: boolean;
     hasTargetArrow: boolean;
-}) => ConnectionControllerFactory;
+    cycleSquareSide: number;
+    roundness: number;
+}) => EdgeControllerFactory;
 
-declare interface CustomConnectionOptions {
+declare interface CustomEdgeOptions {
     readonly type: "custom";
-    readonly controllerFactory: ConnectionControllerFactory;
+    readonly controllerFactory: EdgeControllerFactory;
 }
 
-export declare class DraggableNodesCanvas implements Canvas {
-    private readonly canvas;
-    readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
-    private readonly nodes;
-    private grabbedNodeId;
-    private onNodeDrag;
-    private readonly nodeIdGenerator;
-    private element;
-    private readonly onCanvasMouseUp;
-    private readonly onCanvasMouseMove;
-    private readonly onCanvasTouchStart;
-    private readonly onCanvasTouchMove;
-    private readonly onCanvasTouchEnd;
-    private previousTouchCoords;
-    constructor(canvas: Canvas, dragOptions?: DragOptions);
-    addNode(node: AddNodeRequest): DraggableNodesCanvas;
-    removeNode(nodeId: string): DraggableNodesCanvas;
-    markPort(port: MarkPortRequest): DraggableNodesCanvas;
-    updatePortConnections(portId: string): DraggableNodesCanvas;
-    unmarkPort(portId: string): DraggableNodesCanvas;
-    addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
-    removeConnection(connectionId: string): DraggableNodesCanvas;
-    patchViewportState(request: PatchViewportRequest): DraggableNodesCanvas;
-    moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
-    updateNodeCoordinates(nodeId: string, x: number, y: number): DraggableNodesCanvas;
-    updateConnection(connectionId: string, request: UpdateConnectionRequest): DraggableNodesCanvas;
-    moveNodeOnTop(nodeId: string): DraggableNodesCanvas;
-    clear(): DraggableNodesCanvas;
-    attach(element: HTMLElement): DraggableNodesCanvas;
-    detach(): DraggableNodesCanvas;
-    destroy(): void;
-    private setCursor;
-    private dragNode;
+export declare class CycleCircleEdgeController implements EdgeController {
+    private readonly color;
+    private readonly width;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly radius;
+    private readonly smallRadius;
+    readonly svg: SVGSVGElement;
+    private readonly group;
+    private readonly line;
+    private readonly arrow;
+    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, radius: number, smallRadius: number);
+    update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
+}
+
+export declare class CycleSquareEdgeController implements EdgeController {
+    private readonly color;
+    private readonly width;
+    private readonly arrowLength;
+    private readonly arrowWidth;
+    private readonly side;
+    private readonly minPortOffset;
+    readonly svg: SVGSVGElement;
+    private readonly group;
+    private readonly line;
+    private readonly arrow;
+    private readonly roundness;
+    private readonly points;
+    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 interface DragOptions {
     events?: {
-        onNodeDrag?: (nodeId: string) => void;
+        onNodeDrag?: (payload: NodeDragPayload) => void;
+        onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
     };
 }
 
-declare class GraphStore {
-    private nodes;
-    private ports;
-    private nodePorts;
-    private portNodeId;
-    private connections;
-    private incommingConnections;
-    private outcommingConnections;
-    private cycleConnections;
-    getAllNodes(): Readonly<Record<string, NodePayload>>;
-    addNode(nodeId: string, element: HTMLElement, x: number, y: number, centerFn: CenterFn): void;
-    hasNode(nodeId: string): boolean;
-    getNode(nodeId: string): NodePayload;
-    updateNodeCoords(nodeId: string, x: number, y: number): void;
-    updateConnectionController(connectionId: string, controller: ConnectionController): void;
-    removeNode(nodeId: string): void;
-    addPort(portId: string, element: HTMLElement, nodeId: string, centerFn: CenterFn, dir: number | null): void;
-    getPort(portId: string): PortPayload;
-    getPortNode(portId: string): string;
-    hasPort(portId: string): boolean;
-    removePort(portId: string): void;
-    addConnection(connectionId: string, fromPortId: string, toPortId: string, svgController: ConnectionController): void;
-    getConnection(connectionId: string): ConnectionPayload;
-    hasConnection(connectionId: string): boolean;
-    removeConnection(connectionId: string): void;
-    getPortAdjacentConnections(portId: string): readonly string[];
-    getNodeAdjacentConnections(nodeId: string): readonly string[];
-    clear(): void;
-    private getPortIncomingConnections;
-    private getPortOutcomingConnections;
-    private getPortCycleConnections;
-    private getNodeIncomingConnections;
-    private getNodeOutcomingConnections;
-    private getNodeCycleConnections;
+export declare interface EdgeController {
+    readonly svg: SVGSVGElement;
+    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+}
+
+declare type EdgeControllerFactory = (type: EdgeType) => EdgeController;
+
+declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions;
+
+export declare enum EdgeType {
+    Regular = "regular",
+    Cycle = "cycle"
+}
+
+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;
 }
 
 export declare class HtmlGraphBuilder {
@@ -350,12 +305,12 @@ export declare class HtmlGraphBuilder {
     private isDraggable;
     private isTransformable;
     setOptions(options: CoreOptions): HtmlGraphBuilder;
-    setDraggableNodes(dragOptions?: DragOptions): HtmlGraphBuilder;
-    setTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
+    setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
+    setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
     build(): Canvas;
 }
 
-declare type LayersMode = "connections-on-top" | "nodes-on-top" | "connections-follow-node";
+declare type LayersMode = "edges-on-top" | "nodes-on-top" | "edges-follow-node";
 
 export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
@@ -371,6 +326,13 @@ export declare interface MarkPortRequest {
     readonly direction?: number | null;
 }
 
+export declare interface NodeDragPayload {
+    readonly nodeId: string;
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+}
+
 export declare interface NodeItem {
     readonly id: string;
     readonly x: number;
@@ -378,13 +340,6 @@ export declare interface NodeItem {
     readonly element: HTMLElement;
 }
 
-declare interface NodePayload {
-    element: HTMLElement;
-    x: number;
-    y: number;
-    centerFn: CenterFn;
-}
-
 export declare interface NodeResponse {
     readonly x: number;
     readonly y: number;
@@ -405,13 +360,6 @@ export declare interface PortPayload {
     readonly direction: number | null;
 }
 
-declare class PublicGraphStore {
-    private readonly graphStore;
-    constructor(graphStore: GraphStore);
-    getNode(nodeId: string): NodeResponse | null;
-    getNodes(ids?: readonly string[]): readonly NodeItem[];
-}
-
 export declare class PublicViewportTransformer {
     private readonly transformer;
     constructor(transformer: ViewportTransformer);
@@ -437,24 +385,23 @@ export declare class PublicViewportTransformer {
     getAbsScale(): number;
 }
 
-export declare class StraightConnectionController implements ConnectionController {
+export declare class StraightEdgeController implements EdgeController {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly minPortOffset;
-    private readonly hasSourceArrow;
-    private readonly hasTargetArrow;
     readonly svg: SVGSVGElement;
     private readonly group;
     private readonly line;
     private readonly sourceArrow;
     private readonly targetArrow;
-    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, minPortOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean);
+    private readonly roundness;
+    constructor(color: string, width: number, arrowLength: number, arrowWidth: number, minPortOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface StraightConnectionOptions {
+declare interface StraightEdgeOptions {
     readonly type: "straight";
     readonly color?: string;
     readonly width?: number;
@@ -463,17 +410,81 @@ declare interface StraightConnectionOptions {
     readonly minPortOffset?: number;
     readonly hasSourceArrow?: boolean;
     readonly hasTargetArrow?: boolean;
+    readonly cycleSquareSide?: number;
+    readonly roundness?: number;
+}
+
+export declare interface TransformOptions {
+    scale?: {
+        enabled?: boolean;
+        min?: number;
+        max?: number;
+        wheelSensitivity?: number;
+    };
+    shift?: {
+        enabled?: boolean;
+    };
+    events?: {
+        onTransform?: (payload: TransformPayload) => void;
+        onBeforeTransform?: (payload: TransformPayload) => boolean;
+    };
+}
+
+export declare interface TransformPayload {
+    readonly scale: number;
+    readonly x: number;
+    readonly y: number;
+}
+
+declare interface UpdateConnectionRequest {
+    readonly controller?: EdgeController;
 }
 
-export declare class TransformableCanvas implements Canvas {
+export declare class UserDraggableNodesCanvas implements Canvas {
+    private readonly canvas;
+    readonly transformation: PublicViewportTransformer;
+    private readonly nodes;
+    private grabbedNodeId;
+    private onNodeDrag;
+    private onBeforeNodeDrag;
+    private readonly nodeIdGenerator;
+    private element;
+    private readonly onCanvasMouseUp;
+    private readonly onCanvasMouseMove;
+    private readonly onCanvasTouchStart;
+    private readonly onCanvasTouchMove;
+    private readonly onCanvasTouchEnd;
+    private previousTouchCoords;
+    constructor(canvas: Canvas, dragOptions?: DragOptions);
+    addNode(node: AddNodeRequest): UserDraggableNodesCanvas;
+    removeNode(nodeId: string): UserDraggableNodesCanvas;
+    markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
+    updatePortEdges(portId: string): UserDraggableNodesCanvas;
+    unmarkPort(portId: string): UserDraggableNodesCanvas;
+    addEdge(connection: AddEdgeRequest): UserDraggableNodesCanvas;
+    removeEdge(connectionId: string): UserDraggableNodesCanvas;
+    patchViewportState(request: PatchViewportRequest): UserDraggableNodesCanvas;
+    moveToNodes(nodeIds: readonly string[]): UserDraggableNodesCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): UserDraggableNodesCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): UserDraggableNodesCanvas;
+    moveNodeOnTop(nodeId: string): UserDraggableNodesCanvas;
+    clear(): UserDraggableNodesCanvas;
+    attach(element: HTMLElement): UserDraggableNodesCanvas;
+    detach(): UserDraggableNodesCanvas;
+    destroy(): void;
+    private setCursor;
+    private dragNode;
+}
+
+export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
     private readonly options?;
     readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
     private element;
     private isMoving;
     private prevTouches;
     private onTransform;
+    private onBeforeTransform;
     private readonly isScalable;
     private readonly isShiftable;
     private readonly minViewScale;
@@ -487,21 +498,21 @@ export declare class TransformableCanvas implements Canvas {
     private readonly onTouchMove;
     private readonly onTouchEnd;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
-    addNode(node: AddNodeRequest): TransformableCanvas;
-    removeNode(nodeId: string): TransformableCanvas;
-    markPort(port: MarkPortRequest): TransformableCanvas;
-    updatePortConnections(portId: string): TransformableCanvas;
-    unmarkPort(portId: string): TransformableCanvas;
-    addConnection(connection: AddConnectionRequest): TransformableCanvas;
-    removeConnection(connectionId: string): TransformableCanvas;
-    patchViewportState(request: PatchViewportRequest): TransformableCanvas;
-    moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
-    updateNodeCoordinates(nodeId: string, x: number, y: number): TransformableCanvas;
-    updateConnection(connectionId: string, request: UpdateConnectionRequest): TransformableCanvas;
-    moveNodeOnTop(nodeId: string): TransformableCanvas;
-    clear(): TransformableCanvas;
-    attach(element: HTMLElement): TransformableCanvas;
-    detach(): TransformableCanvas;
+    addNode(node: AddNodeRequest): UserTransformableCanvas;
+    removeNode(nodeId: string): UserTransformableCanvas;
+    markPort(port: MarkPortRequest): UserTransformableCanvas;
+    updatePortEdges(portId: string): UserTransformableCanvas;
+    unmarkPort(portId: string): UserTransformableCanvas;
+    addEdge(connection: AddEdgeRequest): UserTransformableCanvas;
+    removeEdge(connectionId: string): UserTransformableCanvas;
+    patchViewportState(request: PatchViewportRequest): UserTransformableCanvas;
+    moveToNodes(nodeIds: readonly string[]): UserTransformableCanvas;
+    updateNodeCoordinates(nodeId: string, x: number, y: number): UserTransformableCanvas;
+    updateConnection(connectionId: string, request: UpdateConnectionRequest): UserTransformableCanvas;
+    moveNodeOnTop(nodeId: string): UserTransformableCanvas;
+    clear(): UserTransformableCanvas;
+    attach(element: HTMLElement): UserTransformableCanvas;
+    detach(): UserTransformableCanvas;
     destroy(): void;
     private getAverageTouch;
     private setCursor;
@@ -509,25 +520,6 @@ export declare class TransformableCanvas implements Canvas {
     private scaleViewport;
 }
 
-export declare interface TransformOptions {
-    scale?: {
-        enabled?: boolean;
-        minContent?: number;
-        maxContent?: number;
-        wheelSensitivity?: number;
-    };
-    shift?: {
-        enabled?: boolean;
-    };
-    events?: {
-        onTransform?: () => void;
-    };
-}
-
-declare interface UpdateConnectionRequest {
-    readonly controller?: ConnectionController;
-}
-
 declare class ViewportTransformer {
     private state;
     getViewCoords(xa: number, ya: number): [number, number];