@neo4j-nvl/interaction-handlers 0.3.3-9ea79f41 → 0.3.3-e5d595c3

package/README.md

@@ -1,8 +1,8 @@
 # Neo4j Visualization Library
 
-Welcome to NVL (Neo4j Visualization Library). NVL is a collection of libraries that can be used to build custom graph visualizations like [Neo4j Bloom](https://neo4j.com/product/bloom/). The NVL library is also available as a React component that can be used in React applications.
+Welcome to the Neo4j Visualization Library, NVL for short. NVL is a collection of libraries that can be used to build custom graph visualizations like those used in [Neo4j Bloom and Explore(powered by Bloom)](https://neo4j.com/product/bloom/). NVL is written in TypeScript and can be used in any JavaScript project. It is also available as a React component that can be used in React applications.
 
-This module is a collection of decorator classes that can be used to add interaction events to an NVL instance. The decorators are applied to the NVL class. You can find more information about the NVL class in the base library documentation.
+This module is a collection of decorator classes that can be used to add interaction events to an NVL instance. The decorators are applied to the NVL class. You can find more information about the NVL class in the [NVL base library](https://www.npmjs.com/package/@neo4j-nvl/base).
 
 ## Consuming the library
 
@@ -14,13 +14,12 @@ You can install the interaction handlers with your preferred package manager, fo
 npm install @neo4j-nvl/interaction-handlers
 ```
 
-If you are planning to use NVL in a React app, be sure to check out the NVL React wrappers.
+If you are planning to use NVL in a React app, be sure to check out the [NVL React wrappers](https://www.npmjs.com/package/@neo4j-nvl/react).
 
 ### Using the library
 
 Heres is an example on how to use an interaction handler with the NVL class:
 
-
 ```ts
 import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
 import { NVL } from '@neo4j-nvl/base'
@@ -34,4 +33,4 @@ clickInteraction.updateCallback('onNodeClick', (node) => {
 
 If you are using React and want to add interactivity to your graph, you can also make use of the InteractiveReactWrapper.
 
-You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/).
+You can find more instructions and examples on how to use NVL interaction handlers in the [docs](https://neo4j.com/docs/nvl/current/interaction-handlers/).

package/lib/interaction-handlers/box-select-interaction.d.ts

@@ -27,22 +27,10 @@ export type BoxSelectInteractionCallbacks = {
     }, event: MouseEvent) => void) | boolean;
 };
 /**
- * Interaction handler for multi-selecting nodes and relationships.
- * When dragging, draws a box on the canvas and selects all
- * nodes and relationships that are inside the box.
+ * An interaction handler for multi-selecting nodes and relationships.
+ * When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
  *
- * @example
- * ```js
- * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const boxSelectInteraction = new BoxSelectInteraction(nvl)
- *
- * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
  */
 export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks, BoxSelectInteractionOptions> {
     private mousePosition;

package/lib/interaction-handlers/box-select-interaction.js

@@ -3,22 +3,10 @@ import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
 import { BaseInteraction } from './base';
 import { getCanvasPosition, getWorldPosition } from './utils';
 /**
- * Interaction handler for multi-selecting nodes and relationships.
- * When dragging, draws a box on the canvas and selects all
- * nodes and relationships that are inside the box.
+ * An interaction handler for multi-selecting nodes and relationships.
+ * When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
  *
- * @example
- * ```js
- * import { BoxSelectInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const boxSelectInteraction = new BoxSelectInteraction(nvl)
- *
- * boxSelectInteraction.updateCallback('onBoxSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
  */
 export class BoxSelectInteraction extends BaseInteraction {
     mousePosition;

package/lib/interaction-handlers/click-interaction.d.ts

@@ -74,19 +74,9 @@ export type ClickInteractionCallbacks = {
 };
 /**
  * Click interaction handler that handles click, double click and right click events on
- * nodes, relationships and canvas.
+ * nodes, relationships, and the scene.
  *
- * @example
- * ```ts
- * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const clickInteraction = new ClickInteraction(nvl)
- * clickInteraction.updateCallback('onNodeClick', (node) => {
- *   console.log('Node clicked', node)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_clickinteraction Click Interaction documentation page}.
  */
 export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks, ClickInteractionOptions> {
     private moved;

package/lib/interaction-handlers/click-interaction.js

@@ -2,19 +2,9 @@ import { BaseInteraction } from './base';
 import { isDraggingMovement } from './utils';
 /**
  * Click interaction handler that handles click, double click and right click events on
- * nodes, relationships and canvas.
+ * nodes, relationships, and the scene.
  *
- * @example
- * ```ts
- * import { ClickInteraction } from '@neo4j-nvl/interaction-handlers'
- * import { NVL } from '@neo4j-nvl/base'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const clickInteraction = new ClickInteraction(nvl)
- * clickInteraction.updateCallback('onNodeClick', (node) => {
- *   console.log('Node clicked', node)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_clickinteraction Click Interaction documentation page}.
  */
 export class ClickInteraction extends BaseInteraction {
     moved;

package/lib/interaction-handlers/drag-node-interaction.d.ts

@@ -24,22 +24,11 @@ export type DragNodeInteractionCallbacks = {
     onDragEnd?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
 };
 /**
- * Interaction handler for dragging nodes.
- * Dragging is achieved by clicking and dragging on the node.
- * @note When more than one node is selected, all selected nodes will be dragged.
+ * Interaction handler for dragging nodes,
+ * which is achieved by clicking and moving the node.
+ * When multiple nodes are selected, they are all dragged.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const dragNodeInteraction = new DragNodeInteraction(nvl)
- *
- * dragNodeInteraction.updateCallback('onDrag', (nodes) => {
- *   console.log('Dragged nodes:', nodes)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_dragnodeinteraction Drag Node Interaction documentation page}.
  */
 export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks, Record<string, never>> {
     private mousePosition;

package/lib/interaction-handlers/drag-node-interaction.js

@@ -2,22 +2,11 @@ import { NODE_EDGE_WIDTH } from '../constants';
 import { BaseInteraction } from './base';
 import { isDraggingMovement } from './utils';
 /**
- * Interaction handler for dragging nodes.
- * Dragging is achieved by clicking and dragging on the node.
- * @note When more than one node is selected, all selected nodes will be dragged.
+ * Interaction handler for dragging nodes,
+ * which is achieved by clicking and moving the node.
+ * When multiple nodes are selected, they are all dragged.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { DragNodeInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const dragNodeInteraction = new DragNodeInteraction(nvl)
- *
- * dragNodeInteraction.updateCallback('onDrag', (nodes) => {
- *   console.log('Dragged nodes:', nodes)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_dragnodeinteraction Drag Node Interaction documentation page}.
  */
 export class DragNodeInteraction extends BaseInteraction {
     mousePosition;

package/lib/interaction-handlers/draw-interaction.d.ts

@@ -2,7 +2,6 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
 import { BaseInteraction } from './base';
 /**
  * @internal
- * @experimental
  */
 export type DrawInteractionCallbacks = {
     onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
@@ -16,7 +15,6 @@ export type DrawInteractionOptions = {
 };
 /**
  * @internal
- * @experimental
  */
 export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks, DrawInteractionOptions> {
     private isMoved;

package/lib/interaction-handlers/draw-interaction.js

@@ -14,7 +14,6 @@ const DefaultGhostGraphStyling = {
 };
 /**
  * @internal
- * @experimental
  */
 export class DrawInteraction extends BaseInteraction {
     isMoved;

package/lib/interaction-handlers/hover-interaction.d.ts

@@ -19,7 +19,7 @@ export type HoverInteractionCallbacks = {
      * @param element - The node or relationship that was hovered
      * @param hitElements - All elements that were hit by the hover
      * @param event - The original mouse event
-     * @note This callback is called every time the mouse moves,
+     * This callback is called every time the mouse moves,
      * even when no element is hovered or the current element is already hovered.
      */
     onHover?: ((element: Node | Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
@@ -27,20 +27,7 @@ export type HoverInteractionCallbacks = {
 /**
  * Interaction handler for hovering nodes and relationships.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const hoverInteraction = new HoverInteraction(nvl)
- *
- * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
- *  console.log('Hovered element:', element)
- *  console.log('Hit elements:', hitElements)
- *  console.log('Mouse event:', event)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_hoverinteraction Hover Interaction documentation page}.
  */
 export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks, HoverInteractionOptions> {
     private currentHoveredElement;

package/lib/interaction-handlers/hover-interaction.js

@@ -2,20 +2,7 @@ import { BaseInteraction } from './base';
 /**
  * Interaction handler for hovering nodes and relationships.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { HoverInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const hoverInteraction = new HoverInteraction(nvl)
- *
- * hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
- *  console.log('Hovered element:', element)
- *  console.log('Hit elements:', hitElements)
- *  console.log('Mouse event:', event)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_hoverinteraction Hover Interaction documentation page}.
  */
 export class HoverInteraction extends BaseInteraction {
     currentHoveredElement;

package/lib/interaction-handlers/lasso-interaction.d.ts

@@ -46,22 +46,10 @@ export declare const checkIntersection: (polygon: Coords[]) => boolean;
  */
 export declare const checkPointInside: (x: number, y: number, vs: Point[]) => boolean;
 /**
- * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
- * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn
- * area will be selected.
+ * An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn on the scene and all elements inside are selected.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const lassoInteraction = new LassoInteraction(nvl)
- *
- * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
  */
 export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks, LassoInteractionOptions> {
     private active;

package/lib/interaction-handlers/lasso-interaction.js

@@ -60,22 +60,10 @@ export const checkPointInside = (x, y, vs) => {
     return isInside;
 };
 /**
- * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
- * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn
- * area will be selected.
+ * An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
+ * When dragging, a line is drawn on the scene and all elements inside are selected.
  *
- * @example
- * ```ts
- * import { NVL } from '@neo4j-nvl/base'
- * import { LassoInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const lassoInteraction = new LassoInteraction(nvl)
- *
- * lassoInteraction.updateCallback('onLassoSelect', ({ nodes, rels }) => {
- *  console.log('Selected elements:', nodes, rels)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
  */
 export class LassoInteraction extends BaseInteraction {
     active;

package/lib/interaction-handlers/pan-interaction.d.ts

@@ -25,21 +25,9 @@ export type PanInteractionCallbacks = {
     }, event: MouseEvent) => void) | boolean;
 };
 /**
- * Interaction handler for panning the canvas.
- * Panning is achieved by clicking and dragging on the canvas.
+ * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const panInteraction = new PanInteraction(nvl)
- *
- * panInteraction.updateCallback('onPan', (panning) => {
- *   console.log('Panning:', panning)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
  */
 export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks, PanInteractionOptions> {
     private mousePosition;
@@ -54,7 +42,7 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallba
      * Updates which type of graph elements should hinder panning.
      * @param targets - The graph elements that should hinder panning
      * @param excludeNodeMargin - If true, the node margin will not hinder panning
-     * @note By default, panning is hindered by nodes and relationships.
+     * By default, panning is hindered by nodes and relationships.
      *
      * @example
      * ```js

package/lib/interaction-handlers/pan-interaction.js

@@ -2,21 +2,9 @@ import { difference } from 'lodash';
 import { NODE_EDGE_WIDTH } from '../constants';
 import { BaseInteraction } from './base';
 /**
- * Interaction handler for panning the canvas.
- * Panning is achieved by clicking and dragging on the canvas.
+ * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const panInteraction = new PanInteraction(nvl)
- *
- * panInteraction.updateCallback('onPan', (panning) => {
- *   console.log('Panning:', panning)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
  */
 export class PanInteraction extends BaseInteraction {
     mousePosition;
@@ -39,7 +27,7 @@ export class PanInteraction extends BaseInteraction {
      * Updates which type of graph elements should hinder panning.
      * @param targets - The graph elements that should hinder panning
      * @param excludeNodeMargin - If true, the node margin will not hinder panning
-     * @note By default, panning is hindered by nodes and relationships.
+     * By default, panning is hindered by nodes and relationships.
      *
      * @example
      * ```js

package/lib/interaction-handlers/zoom-interaction.d.ts

@@ -12,21 +12,9 @@ export type ZoomInteractionCallbacks = {
     onZoom?: ((zoomLevel: number, event: WheelEvent) => void) | boolean;
 };
 /**
- * Interaction handler for zooming the canvas.
- * Zooming is achieved by scrolling the mouse wheel on the canvas.
+ * Interaction handler for zooming the canvas, which is achieved by scrolling the mouse wheel on the canvas.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const zoomInteraction = new ZoomInteraction(nvl)
- *
- * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
- *   console.log('Zoom level:', zoomLevel)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
  */
 export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks, Record<string, never>> {
     /**
@@ -37,13 +25,13 @@ export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCall
     /**
      * Throttled zoom function to avoid events happening too fast.
      * @param event - The original mouse wheel event
-     * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
+     * "Wheel" with a touchpad, the wheel is triggered event a lot,
      * especially a lot of very small values.
      * However, updating values in NVL instance takes time.
      * Sometimes it lost the track of multiple events happening too soon.
      * As a result, the zoom might lose its anchor point under touch pad.
      * Therefore, the throttle is needed to avoid events happening too fast.
-     * @note The throttle is set to 25ms.
+     * The throttle is set to 25ms.
      */
     private throttledZoom;
     private handleWheel;

package/lib/interaction-handlers/zoom-interaction.js

@@ -2,21 +2,9 @@ import { throttle } from 'lodash';
 import { BaseInteraction } from './base';
 import { getCanvasCenterOffset } from './utils';
 /**
- * Interaction handler for zooming the canvas.
- * Zooming is achieved by scrolling the mouse wheel on the canvas.
+ * Interaction handler for zooming the canvas, which is achieved by scrolling the mouse wheel on the canvas.
  *
- * @example
- * ```js
- * import { NVL } from '@neo4j-nvl/base'
- * import { ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
- *
- * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
- * const zoomInteraction = new ZoomInteraction(nvl)
- *
- * zoomInteraction.updateCallback('onZoom', (zoomLevel) => {
- *   console.log('Zoom level:', zoomLevel)
- * })
- * ```
+ * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_zoominteraction Zoom Interaction documentation page}.
  */
 export class ZoomInteraction extends BaseInteraction {
     /**
@@ -30,13 +18,13 @@ export class ZoomInteraction extends BaseInteraction {
     /**
      * Throttled zoom function to avoid events happening too fast.
      * @param event - The original mouse wheel event
-     * @note "Wheel" with a touchpad, the wheel is triggered event a lot,
+     * "Wheel" with a touchpad, the wheel is triggered event a lot,
      * especially a lot of very small values.
      * However, updating values in NVL instance takes time.
      * Sometimes it lost the track of multiple events happening too soon.
      * As a result, the zoom might lose its anchor point under touch pad.
      * Therefore, the throttle is needed to avoid events happening too fast.
-     * @note The throttle is set to 25ms.
+     * The throttle is set to 25ms.
      */
     throttledZoom = throttle((event) => {
         const zoom = this.nvlInstance.getScale();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.3-9ea79f41",
+  "version": "0.3.3-e5d595c3",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -26,14 +26,8 @@
     "postpack": "rm LICENSE.txt",
     "eslint": "eslint ./src/"
   },
-  "typedoc": {
-    "entryPoint": "./src/index.ts",
-    "readmeFile": "./README.md",
-    "displayName": "Interaction Handlers",
-    "tsconfig": "./tsconfig.json"
-  },
   "dependencies": {
-    "@neo4j-nvl/base": "0.3.3-9ea79f41",
+    "@neo4j-nvl/base": "0.3.3-e5d595c3",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },