@html-graph/html-graph 3.12.0 → 3.14.0

package/README.md

@@ -5,7 +5,7 @@
 ### Graph visualization library that enables nodes customization using HTML
 
 <a target="_blank" href="https://html-graph.github.io/use-cases/advanced-demo/">
-    <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
+  <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 
 Instead of connecting nodes directly, this library utilizes the concept of ports,

package/dist/html-graph.d.ts

@@ -101,7 +101,7 @@ export declare class Canvas {
     private readonly graphStore;
     private readonly viewportStore;
     private readonly htmlView;
-    private readonly defaults;
+    private readonly params;
     /**
      * provides api for accessing model of rendered graph
      */
@@ -134,7 +134,7 @@ export declare class Canvas {
     /**
      * @deprecated access element directly instead
      */
-    element: HTMLElement, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, defaults: Defaults);
+    element: HTMLElement, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
     /**
      * adds new node
      */
@@ -201,12 +201,14 @@ export declare class CanvasBuilder {
     private transformConfig;
     private backgroundConfig;
     private connectablePortsConfig;
+    private draggableEdgesConfig;
     private virtualScrollConfig;
     private hasDraggableNode;
     private hasTransformableViewport;
     private hasResizeReactiveNodes;
     private hasBackground;
     private hasUserConnectablePorts;
+    private hasUserDraggableEdges;
     private boxRenderingTrigger;
     private readonly window;
     constructor(element?: HTMLElement);
@@ -248,6 +250,7 @@ export declare class CanvasBuilder {
      * enables edge creation by dragging one port to another
      */
     enableUserConnectablePorts(config?: ConnectablePortsConfig): CanvasBuilder;
+    enableUserDraggableEdges(config?: DraggableEdgesConfig): CanvasBuilder;
     /**
      * builds final canvas
      */
@@ -298,6 +301,20 @@ export declare interface CanvasDefaults {
     };
 }
 
+declare interface CanvasParams {
+    readonly nodes: {
+        readonly centerFn: CenterFn;
+        readonly priorityFn: PriorityFn;
+    };
+    readonly ports: {
+        readonly direction: number;
+    };
+    readonly edges: {
+        readonly shapeFactory: EdgeShapeFactory;
+        readonly priorityFn: PriorityFn;
+    };
+}
+
 export declare type CenterFn = (width: number, height: number) => Point;
 
 declare interface ConnectablePortsConfig {
@@ -324,20 +341,6 @@ declare type ConstantPriority = number;
 
 declare type CustomPriority = PriorityFn;
 
-declare interface Defaults {
-    readonly nodes: {
-        readonly centerFn: CenterFn;
-        readonly priorityFn: PriorityFn;
-    };
-    readonly ports: {
-        readonly direction: number;
-    };
-    readonly edges: {
-        readonly shapeFactory: EdgeShapeFactory;
-        readonly priorityFn: PriorityFn;
-    };
-}
-
 export declare interface DirectEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
@@ -376,6 +379,19 @@ declare interface DotsRenderer {
     readonly color?: string;
 }
 
+declare interface DraggableEdgesConfig {
+    readonly connectionPreprocessor?: ConnectionPreprocessor;
+    readonly mouseDownEventVerifier?: MouseEventVerifier;
+    readonly mouseUpEventVerifier?: MouseEventVerifier;
+    readonly draggingEdgeResolver?: DraggingEdgeResolver;
+    readonly draggingEdgeShape?: EdgeShapeConfig;
+    readonly events?: {
+        readonly onAfterEdgeReattached?: (edgeId: unknown) => void;
+        readonly onEdgeReattachInterrupted?: (edge: GraphEdge) => void;
+        readonly onEdgeReattachPrevented?: (request: AddEdgeRequest) => void;
+    };
+}
+
 declare interface DraggableNodesConfig {
     readonly moveOnTop?: boolean;
     readonly moveEdgesOnTop?: boolean;
@@ -393,9 +409,11 @@ declare interface DraggableNodesConfig {
 export { DraggableNodesConfig as DragOptions }
 export { DraggableNodesConfig }
 
+export declare type DraggingEdgeResolver = (portId: unknown) => unknown | null;
+
 declare interface EdgePath {
     readonly path: string;
-    readonly median: Point;
+    readonly midpoint: Point;
 }
 
 declare type EdgePathFactory = (sourceDirection: Point, targetDirection: Point, to: Point, flipX: number, flipY: number) => EdgePath;
@@ -469,14 +487,29 @@ export declare class Graph {
     getPort(portId: unknown): GraphPort | null;
     getAllPortIds(): readonly unknown[];
     getNodePortIds(nodeId: unknown): readonly unknown[] | null;
+    getElementPortIds(element: HTMLElement): readonly unknown[];
+    /**
+     * @deprecated
+     * use getElementPortIds instead
+     */
     getElementPortsIds(element: HTMLElement): readonly unknown[];
     getAllEdgeIds(): readonly unknown[];
     getEdge(edgeId: unknown): GraphEdge | null;
     getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortOutgoingEdgeIds(portId: unknown): readonly unknown[] | null;
+    /**
+     * @deprecated
+     * use getPortOutgoingEdgeIds instead
+     */
     getPortOutcomingEdgeIds(portId: unknown): readonly unknown[] | null;
     getPortCycleEdgeIds(portId: unknown): readonly unknown[] | null;
     getPortAdjacentEdgeIds(portId: unknown): readonly unknown[] | null;
     getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeOutgoingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    /**
+     * @deprecated
+     * use getNodeOutgoingEdgeIds instead
+     */
     getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
     getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[] | null;
     getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[] | null;
@@ -486,6 +519,7 @@ export declare interface GraphEdge {
     readonly from: unknown;
     readonly to: unknown;
     readonly priority: number;
+    readonly shape: EdgeShape;
 }
 
 export declare interface GraphNode {
@@ -548,7 +582,7 @@ declare class GraphStore {
     getPort(portId: unknown): PortPayload | undefined;
     updatePort(portId: unknown, request: UpdatePortRequest_2): void;
     getAllPortIds(): readonly unknown[];
-    getElementPortsIds(element: HTMLElement): readonly unknown[];
+    getElementPortIds(element: HTMLElement): readonly unknown[];
     getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
     removePort(portId: unknown): void;
     addEdge(request: AddEdgeRequest_2): void;
@@ -558,11 +592,11 @@ declare class GraphStore {
     removeEdge(edgeId: unknown): void;
     clear(): void;
     getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
-    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
+    getPortOutgoingEdgeIds(portId: unknown): readonly unknown[];
     getPortCycleEdgeIds(portId: unknown): readonly unknown[];
     getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
     getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
-    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeOutgoingEdgeIds(nodeId: unknown): readonly unknown[];
     getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
     getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
     private addEdgeInternal;
@@ -696,18 +730,25 @@ export declare interface MarkPortRequest {
     readonly direction?: number;
 }
 
-export declare class MedianEdgeShape implements StructuredEdgeShape {
+declare class MidpointEdgeShape implements StructuredEdgeShape {
     private readonly baseShape;
-    readonly medianElement: SVGElement;
+    readonly midpointElement: SVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
     readonly sourceArrow: SVGPathElement | null;
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     readonly svg: SVGSVGElement;
-    constructor(baseShape: StructuredEdgeShape, medianElement: SVGElement);
+    /**
+     * @deprecated
+     * use midpointElement instead
+     */
+    readonly medianElement: SVGElement;
+    constructor(baseShape: StructuredEdgeShape, midpointElement: SVGElement);
     render(params: EdgeRenderParams): void;
 }
+export { MidpointEdgeShape as MedianEdgeShape }
+export { MidpointEdgeShape }
 
 export declare type MouseEventVerifier = (event: MouseEvent) => boolean;