@html-graph/html-graph 0.0.49 → 0.0.51

package/README.md

@@ -10,8 +10,8 @@
     <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 connections.
-Port is an entity of the node to which connection can be attached to.
+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.
 
@@ -38,7 +38,7 @@ import { MarkNodePortRequest, HtmlGraphBuilder } from "@html-graph/html-graph";
 const canvas = new HtmlGraphBuilder()
   .setOptions({
     background: { type: "dots" },
-    connections: { hasTargetArrow: true },
+    edges: { hasTargetArrow: true },
   })
   .setUserDraggableNodes()
   .setUserTransformableCanvas()
@@ -81,7 +81,7 @@ canvas
 
 Refer to [Examples](examples) for more.
 
-## Run examples locally
+## Run examples
 
 Use node version >= 20
 

package/dist/main.d.ts

@@ -58,6 +58,8 @@ declare interface BezierEdgeOptions {
     readonly hasTargetArrow?: boolean;
     readonly cycleRadius?: number;
     readonly smallCycleRadius?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
 }
 
 export declare interface Canvas {
@@ -111,7 +113,7 @@ export declare interface Canvas {
     /**
      * updates edge
      */
-    updateConnection(edgeId: string, request: UpdateConnectionRequest): Canvas;
+    updateEdge(edgeId: string, request: UpdateEdgeRequest): Canvas;
     /**
      * moves specified node on top
      */
@@ -145,7 +147,7 @@ export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
     private readonly di;
-    private readonly connectionControllerFactory;
+    private readonly edgeControllerFactory;
     constructor(apiOptions?: CoreOptions | undefined);
     addNode(node: AddNodeRequest): CanvasCore;
     moveNodeOnTop(nodeId: string): CanvasCore;
@@ -153,12 +155,12 @@ export declare class CanvasCore implements Canvas {
     markPort(port: MarkPortRequest): CanvasCore;
     updatePortEdges(portId: string): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
-    addEdge(connection: AddEdgeRequest): CanvasCore;
-    removeEdge(connectionId: string): CanvasCore;
+    addEdge(edge: AddEdgeRequest): CanvasCore;
+    removeEdge(edgeId: string): CanvasCore;
     patchViewportState(request: PatchViewportRequest): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
     updateNodeCoordinates(nodeId: string, x: number, y: number): CanvasCore;
-    updateConnection(connectionId: string, request: UpdateConnectionRequest): CanvasCore;
+    updateEdge(edgeId: string, request: UpdateEdgeRequest): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
@@ -188,12 +190,16 @@ export declare interface CoreOptions {
     readonly ports?: {
         /**
          * specifies how to determine center of port
-         * center of port determines point to which connection attaches
+         * center of port determines point to which edge attaches
          */
         readonly centerFn?: CenterFn;
+        /**
+         * specifies default direction of port
+         */
+        readonly direction?: number;
     };
     /**
-     *connections related behavior
+     *edges related behavior
      */
     readonly edges?: EdgeOptions;
     /**
@@ -217,6 +223,8 @@ export declare const createBezierEdgeControllerFactory: (options: {
     hasTargetArrow: boolean;
     cycleRadius: number;
     smallCycleRadius: number;
+    detourDistance: number;
+    detourDirection: number;
 }) => EdgeControllerFactory;
 
 export declare const createStraightEdgeControllerFactory: (options: {
@@ -224,11 +232,13 @@ export declare const createStraightEdgeControllerFactory: (options: {
     width: number;
     arrowLength: number;
     arrowWidth: number;
-    minPortOffset: number;
+    arrowOffset: number;
     hasSourceArrow: boolean;
     hasTargetArrow: boolean;
     cycleSquareSide: number;
     roundness: number;
+    detourDistance: number;
+    detourDirection: number;
 }) => EdgeControllerFactory;
 
 declare interface CustomEdgeOptions {
@@ -263,11 +273,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;
@@ -286,16 +314,8 @@ declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeO
 
 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;
+    PortCycle = "port-cycle",
+    NodeCycle = "node-cycle"
 }
 
 export declare class HtmlGraphBuilder {
@@ -315,7 +335,7 @@ 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 {
@@ -323,7 +343,7 @@ export declare interface MarkPortRequest {
     readonly element: HTMLElement;
     readonly nodeId: string;
     readonly centerFn?: CenterFn;
-    readonly direction?: number | null;
+    readonly direction?: number;
 }
 
 export declare interface NodeDragPayload {
@@ -352,12 +372,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;
+    readonly direction: number;
 }
 
 export declare class PublicViewportTransformer {
@@ -390,14 +408,14 @@ export declare class StraightEdgeController implements EdgeController {
     private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
-    private readonly minPortOffset;
+    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, minPortOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
+    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;
 }
 
@@ -407,11 +425,13 @@ declare interface StraightEdgeOptions {
     readonly width?: number;
     readonly arrowLength?: number;
     readonly arrowWidth?: number;
-    readonly minPortOffset?: number;
+    readonly arrowOffset?: number;
     readonly hasSourceArrow?: boolean;
     readonly hasTargetArrow?: boolean;
     readonly cycleSquareSide?: number;
     readonly roundness?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
 }
 
 export declare interface TransformOptions {
@@ -436,7 +456,7 @@ export declare interface TransformPayload {
     readonly y: number;
 }
 
-declare interface UpdateConnectionRequest {
+export declare interface UpdateEdgeRequest {
     readonly controller?: EdgeController;
 }
 
@@ -461,12 +481,12 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
     updatePortEdges(portId: string): UserDraggableNodesCanvas;
     unmarkPort(portId: string): UserDraggableNodesCanvas;
-    addEdge(connection: AddEdgeRequest): UserDraggableNodesCanvas;
-    removeEdge(connectionId: string): UserDraggableNodesCanvas;
+    addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
+    removeEdge(edgeId: 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;
+    updateEdge(edgeId: string, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
     moveNodeOnTop(nodeId: string): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
     attach(element: HTMLElement): UserDraggableNodesCanvas;
@@ -503,12 +523,12 @@ export declare class UserTransformableCanvas implements Canvas {
     markPort(port: MarkPortRequest): UserTransformableCanvas;
     updatePortEdges(portId: string): UserTransformableCanvas;
     unmarkPort(portId: string): UserTransformableCanvas;
-    addEdge(connection: AddEdgeRequest): UserTransformableCanvas;
-    removeEdge(connectionId: string): UserTransformableCanvas;
+    addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
+    removeEdge(edgeId: 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;
+    updateEdge(edgeId: string, request: UpdateEdgeRequest): UserTransformableCanvas;
     moveNodeOnTop(nodeId: string): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
     attach(element: HTMLElement): UserTransformableCanvas;