@html-graph/html-graph 8.16.0 → 8.18.0

package/README.md

@@ -30,9 +30,9 @@ import { CanvasBuilder } from "@html-graph/html-graph";
 const element = document.getElementById("canvas");
 
 const canvas = new CanvasBuilder(element)
-  .enableUserTransformableViewport()
-  .enableUserDraggableNodes()
-  .enableBackground()
+  .enableUserTransformableViewport() // Enables viewport pan and zoom
+  .enableUserDraggableNodes() // Enables draggable nodes
+  .enableBackground() // Renders background
   .build();
 ```
 

package/dist/html-graph.d.ts

@@ -291,27 +291,38 @@ export declare type CenterFn = (width: number, height: number) => Point;
 export declare interface ConnectablePortsConfig {
     readonly edgeShape?: EdgeShapeConfig;
     readonly connectionTypeResolver?: ConnectionTypeResolver;
+    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
     readonly connectionPreprocessor?: ConnectionPreprocessor;
     readonly mouseDownEventVerifier?: MouseEventVerifier;
     readonly mouseUpEventVerifier?: MouseEventVerifier;
-    readonly dragPortDirection?: number | undefined;
+    readonly dragPortDirection?: DraggingPortDirectionConfig;
     readonly events?: {
         readonly onAfterEdgeCreated?: (edgeId: Identifier) => void;
-        readonly onEdgeCreationInterrupted?: (params: {
-            readonly staticPortId: Identifier;
-            readonly isDirect: boolean;
-        }) => void;
+        readonly onEdgeCreationInterrupted?: (params: EdgeCreationInProgressParams) => void;
         readonly onEdgeCreationPrevented?: (request: AddEdgeRequest) => void;
     };
 }
 
+export declare type ConnectionAllowedVerifier = (request: ConnectionAllowedVerifierRequest) => boolean;
+
+export declare interface ConnectionAllowedVerifierRequest {
+    readonly from: Identifier;
+    readonly to: Identifier;
+}
+
 export declare enum ConnectionCategory {
     Line = "line",
     NodeCycle = "node-cycle",
     PortCycle = "port-cycle"
 }
 
-export declare type ConnectionPreprocessor = (request: AddEdgeRequest) => AddEdgeRequest | null;
+export declare type ConnectionPreprocessor = (request: AddEdgeRequest) => AddEdgeRequest | ConnectionPreprocessorNullResponse;
+
+/**
+ * @deprecated
+ * connection preprocessor should not return null
+ */
+declare type ConnectionPreprocessorNullResponse = null;
 
 export declare type ConnectionTypeResolver = (portId: Identifier) => "direct" | "reverse" | null;
 
@@ -366,12 +377,14 @@ declare interface DotsRenderer {
     readonly color?: string;
 }
 
-declare interface DraggableEdgesConfig {
+export declare interface DraggableEdgesConfig {
     readonly connectionPreprocessor?: ConnectionPreprocessor;
+    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
     readonly mouseDownEventVerifier?: MouseEventVerifier;
     readonly mouseUpEventVerifier?: MouseEventVerifier;
     readonly draggingEdgeResolver?: DraggingEdgeResolver;
     readonly draggingEdgeShape?: EdgeShapeConfig;
+    readonly dragPortDirection?: DraggingPortDirectionConfig;
     readonly events?: {
         readonly onAfterEdgeReattached?: (edgeId: Identifier) => void;
         readonly onEdgeReattachInterrupted?: (edge: GraphEdge & {
@@ -400,6 +413,13 @@ export declare interface DraggableNodesConfig {
 
 export declare type DraggingEdgeResolver = (portId: Identifier) => Identifier | null;
 
+declare type DraggingPortDirectionConfig = number | undefined | "closest-connectable-port";
+
+export declare interface EdgeCreationInProgressParams {
+    readonly staticPortId: Identifier;
+    readonly isDirect: boolean;
+}
+
 declare interface EdgePath {
     readonly path: string;
     readonly midpoint: Point;
@@ -707,6 +727,10 @@ export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     readonly line: SVGPathElement;
     readonly sourceArrow: SVGPathElement | null;
     readonly targetArrow: SVGPathElement | null;
+    /**
+     * @deprecated
+     * do use shape.svg instead
+     */
     readonly handle: SVGGElement;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly interactiveLine;
@@ -752,11 +776,7 @@ export declare interface LayoutAlgorithmParams {
     readonly viewport: Viewport;
 }
 
-export declare type LayoutApplyOn = {
-    type: "topologyChangeMacrotask";
-} | {
-    type: "topologyChangeMicrotask";
-} | EventSubject<void>;
+export declare type LayoutApplyOn = TopologyChangeMacrotask | TopologyChangeMicrotask | EventSubject<void>;
 
 export declare interface LayoutConfig {
     readonly algorithm?: LayoutAlgorithmConfig | undefined;
@@ -927,6 +947,18 @@ export declare interface StructuredEdgeShape extends EdgeShape {
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
 }
 
+/**
+ * @deprecated
+ * use topologyChangeMicrotask instead
+ */
+declare type TopologyChangeMacrotask = {
+    type: "topologyChangeMacrotask";
+};
+
+declare type TopologyChangeMicrotask = {
+    type: "topologyChangeMicrotask";
+};
+
 export declare type TransformDeclaration = {
     readonly a?: number | undefined;
     readonly b?: number | undefined;