@html-graph/html-graph 0.0.50 → 0.0.51

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.
 
@@ -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 {
@@ -191,6 +193,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 +223,8 @@ export declare const createBezierEdgeControllerFactory: (options: {
     hasTargetArrow: boolean;
     cycleRadius: number;
     smallCycleRadius: number;
+    detourDistance: number;
+    detourDirection: number;
 }) => EdgeControllerFactory;
 
 export declare const createStraightEdgeControllerFactory: (options: {
@@ -229,6 +237,8 @@ export declare const createStraightEdgeControllerFactory: (options: {
     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 {
@@ -391,12 +409,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 +430,8 @@ declare interface StraightEdgeOptions {
     readonly hasTargetArrow?: boolean;
     readonly cycleSquareSide?: number;
     readonly roundness?: number;
+    readonly detourDistance?: number;
+    readonly detourDirection?: number;
 }
 
 export declare interface TransformOptions {