@html-graph/html-graph 8.11.0 → 8.12.0

package/README.md

@@ -2,10 +2,32 @@
   <img src="/media/logo-label.svg" alt="HTMLGraph" width="520" height="100"/>
 </p>
 
+<div align="center">
+  <h3>
+    Graph visualization library that enables rich nodes customization using HTML
+  </h3>
+</div>
+
 <a target="_blank" href="https://html-graph.github.io">
-  <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
+  <img src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/preview.jpg">
 </a>
 
-### Graph visualization library that enables rich nodes customization using HTML
+## Getting Started
+
+```bash
+npm i @html-graph/html-graph
+```
+
+```typescript
+import { CanvasBuilder } from "@html-graph/html-graph";
+
+const element = document.getElementById("canvas");
+
+const canvas = new CanvasBuilder(element)
+  .enableUserTransformableViewport()
+  .enableUserDraggableNodes()
+  .enableBackground()
+  .build();
+```
 
 Visit the <a target="_blank" href="https://html-graph.github.io">DOCUMENTATION</a> for examples and API reference.

package/dist/html-graph.d.ts

@@ -190,6 +190,8 @@ export declare class CanvasBuilder {
     private virtualScrollConfig;
     private layoutConfig;
     private animatedLayoutConfig;
+    private userSelectableNodesConfig;
+    private userSelectableCanvasConfig;
     private hasDraggableNodes;
     private hasTransformableViewport;
     private hasNodeResizeReactiveEdges;
@@ -203,15 +205,17 @@ export declare class CanvasBuilder {
     private readonly animationStaticNodes;
     constructor(element: HTMLElement);
     setDefaults(defaults: CanvasDefaults): CanvasBuilder;
-    enableUserDraggableNodes(config?: DraggableNodesConfig): CanvasBuilder;
-    enableUserTransformableViewport(config?: ViewportTransformConfig): CanvasBuilder;
+    enableUserDraggableNodes(config?: DraggableNodesConfig | undefined): CanvasBuilder;
+    enableUserTransformableViewport(config?: ViewportTransformConfig | undefined): CanvasBuilder;
     enableNodeResizeReactiveEdges(): CanvasBuilder;
     enableVirtualScroll(config: VirtualScrollConfig): CanvasBuilder;
-    enableBackground(config?: BackgroundConfig): CanvasBuilder;
-    enableUserConnectablePorts(config?: ConnectablePortsConfig): CanvasBuilder;
-    enableUserDraggableEdges(config?: DraggableEdgesConfig): CanvasBuilder;
-    enableLayout(config?: LayoutConfig): CanvasBuilder;
-    enableAnimatedLayout(config?: AnimatedLayoutConfig): CanvasBuilder;
+    enableBackground(config?: BackgroundConfig | undefined): CanvasBuilder;
+    enableUserConnectablePorts(config?: ConnectablePortsConfig | undefined): CanvasBuilder;
+    enableUserDraggableEdges(config?: DraggableEdgesConfig | undefined): CanvasBuilder;
+    enableLayout(config?: LayoutConfig | undefined): CanvasBuilder;
+    enableAnimatedLayout(config?: AnimatedLayoutConfig | undefined): CanvasBuilder;
+    enableUserSelectableNodes(config: UserSelectableNodesConfig): CanvasBuilder;
+    enableUserSelectableCanvas(config: UserSelectableCanvasConfig): CanvasBuilder;
     build(): Canvas;
     private createHtmlView;
 }
@@ -989,6 +993,20 @@ declare interface UpdatePortRequest_2 {
     readonly direction?: number;
 }
 
+export declare interface UserSelectableCanvasConfig {
+    readonly onCanvasSelected: () => void;
+    readonly mouseDownEventVerifier?: MouseEventVerifier | undefined;
+    readonly mouseUpEventVerifier?: MouseEventVerifier | undefined;
+    readonly movementThreshold?: number | undefined;
+}
+
+export declare interface UserSelectableNodesConfig {
+    readonly onNodeSelected: (nodeId: Identifier) => void;
+    readonly mouseDownEventVerifier?: MouseEventVerifier | undefined;
+    readonly mouseUpEventVerifier?: MouseEventVerifier | undefined;
+    readonly movementThreshold?: number | undefined;
+}
+
 export declare interface VerticalEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;