@html-graph/html-graph 3.16.0 → 3.18.0

package/README.md

@@ -2,16 +2,12 @@
   <img src="/media/favicon.png" alt="HTMLGraph" width="25" height="25"/> HTMLGraph
 </h1>
 
-### Graph visualization library that enables nodes customization using HTML
+### Graph visualization library that enables rich 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"/>
 </a>
 
-Instead of connecting nodes directly, this library utilizes the concept of ports,
-which provide greater flexibility in managing edges. A port is an entity on a
-node to which edges can be attached.
-
 Visit the <a target="_blank" href="https://html-graph.github.io">DOCUMENTATION</a> for more details.
 
 ## Getting started:

package/dist/html-graph.d.ts

@@ -126,6 +126,7 @@ export declare class Canvas {
     private readonly onBeforeEdgeRemoved;
     private readonly onBeforeClear;
     private readonly onBeforeDestroyEmitter;
+    private destroyed;
     /**
      * emits event just before destruction of canvas
      */
@@ -234,6 +235,8 @@ export declare class CanvasBuilder {
      */
     enableResizeReactiveNodes(): CanvasBuilder;
     /**
+     * @deprecated
+     * do not use
      * sets emitter for rendering graph inside bounded area
      */
     enableBoxAreaRendering(trigger: EventSubject<RenderingBox>): CanvasBuilder;
@@ -333,6 +336,12 @@ declare interface ConnectablePortsConfig {
 export { ConnectablePortsConfig }
 export { ConnectablePortsConfig as ConnectablePortsOptions }
 
+export declare enum ConnectionCategory {
+    Line = "line",
+    NodeCycle = "node-cycle",
+    PortCycle = "port-cycle"
+}
+
 export declare type ConnectionPreprocessor = (request: AddEdgeRequest) => AddEdgeRequest | null;
 
 export declare type ConnectionTypeResolver = (portId: unknown) => "direct" | "reverse" | null;
@@ -400,6 +409,7 @@ declare interface DraggableNodesConfig {
         readonly mouseDownEventVerifier?: MouseEventVerifier;
         readonly mouseUpEventVerifier?: MouseEventVerifier;
     };
+    readonly gridSize?: number | null;
     readonly events?: {
         readonly onNodeDrag?: (payload: NodeDragPayload) => void;
         readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
@@ -428,6 +438,7 @@ declare interface EdgePayload {
 export declare interface EdgeRenderParams {
     readonly from: EdgeRenderPort;
     readonly to: EdgeRenderPort;
+    readonly category: ConnectionCategory;
 }
 
 export declare interface EdgeRenderPort {
@@ -436,7 +447,15 @@ export declare interface EdgeRenderPort {
     readonly width: number;
     readonly height: number;
     readonly direction: number;
+    /**
+     * @deprecated
+     * use category instead
+     */
     readonly portId: unknown;
+    /**
+     * @deprecated
+     * use category instead
+     */
     readonly nodeId: unknown;
 }
 
@@ -752,6 +771,9 @@ export { MidpointEdgeShape }
 
 export declare type MouseEventVerifier = (event: MouseEvent) => boolean;
 
+/**
+ * TODO: replace with node ID
+ */
 export declare interface NodeDragPayload {
     readonly nodeId: unknown;
     readonly element: HTMLElement;
@@ -983,6 +1005,10 @@ declare type VerticalEdgeShapeConfig = {
 
 export declare class Viewport {
     private readonly viewportStore;
+    /**
+     * @deprecated
+     * do not use
+     */
     readonly onBeforeUpdated: EventHandler<void>;
     readonly onAfterUpdated: EventHandler<void>;
     constructor(viewportStore: ViewportStore);
@@ -996,6 +1022,10 @@ declare class ViewportStore {
     private readonly afterUpdateEmitter;
     readonly onAfterUpdated: EventHandler<void>;
     private readonly beforeUpdateEmitter;
+    /**
+     * @deprecated
+     * do not use
+     */
     readonly onBeforeUpdated: EventHandler<void>;
     constructor();
     getViewportMatrix(): TransformState;
@@ -1033,6 +1063,10 @@ export declare interface VirtualScrollConfig {
         readonly vertical: number;
         readonly horizontal: number;
     };
+    readonly events?: {
+        readonly onBeforeNodeAttached?: (nodeId: unknown) => void;
+        readonly onAfterNodeDetached?: (nodeId: unknown) => void;
+    };
 }
 
 export { }