Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@neo4j-nvl/interaction-handlers

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@neo4j-nvl/interaction-handlers - npm Package Compare versions

Comparing version 0.3.3-9ea79f41 to 0.3.3-b7e12d3c

@@ -30,18 +30,6 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/base';

/**
* 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}.
*/

@@ -48,0 +36,0 @@ export declare class BoxSelectInteraction extends BaseInteraction<BoxSelectInteractionCallbacks, BoxSelectInteractionOptions> {

@@ -6,18 +6,6 @@ import { NODE_EDGE_WIDTH } from '../constants';

/**
* 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}.
*/

@@ -24,0 +12,0 @@ export class BoxSelectInteraction extends BaseInteraction {

@@ -77,15 +77,5 @@ import type { HitTargets, NVL, Node, Relationship } from '@neo4j-nvl/base';

* 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}.
*/

@@ -92,0 +82,0 @@ export declare class ClickInteraction extends BaseInteraction<ClickInteractionCallbacks, ClickInteractionOptions> {

@@ -5,15 +5,5 @@ import { BaseInteraction } from './base';

* 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}.
*/

@@ -20,0 +10,0 @@ export class ClickInteraction extends BaseInteraction {

@@ -27,18 +27,7 @@ import type { NVL, Node } from '@neo4j-nvl/base';

/**
* 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}.
*/

@@ -45,0 +34,0 @@ export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks, Record<string, never>> {

@@ -5,18 +5,7 @@ import { NODE_EDGE_WIDTH } from '../constants';

/**
* 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}.
*/

@@ -23,0 +12,0 @@ export class DragNodeInteraction extends BaseInteraction {

@@ -5,3 +5,2 @@ import type { NVL, Node, Relationship } from '@neo4j-nvl/base';

* @internal
* @experimental
*/

@@ -20,3 +19,2 @@ export type DrawInteractionCallbacks = {

* @internal
* @experimental
*/

@@ -23,0 +21,0 @@ export declare class DrawInteraction extends BaseInteraction<DrawInteractionCallbacks, DrawInteractionOptions> {

@@ -17,3 +17,2 @@ /* eslint-disable @typescript-eslint/strict-boolean-expressions */

* @internal
* @experimental
*/

@@ -20,0 +19,0 @@ export class DrawInteraction extends BaseInteraction {

@@ -22,3 +22,3 @@ import type { HitTargets, NVL, Node, Relationship } from '@neo4j-nvl/base';

* @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.

@@ -31,16 +31,3 @@ */

*
* @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}.
*/

@@ -47,0 +34,0 @@ export declare class HoverInteraction extends BaseInteraction<HoverInteractionCallbacks, HoverInteractionOptions> {

@@ -5,16 +5,3 @@ import { BaseInteraction } from './base';

*
* @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}.
*/

@@ -21,0 +8,0 @@ export class HoverInteraction extends BaseInteraction {

@@ -49,18 +49,6 @@ import type { NVL, Node, Point, Relationship } from '@neo4j-nvl/base';

/**
* 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}.
*/

@@ -67,0 +55,0 @@ export declare class LassoInteraction extends BaseInteraction<LassoInteractionCallbacks, LassoInteractionOptions> {

@@ -63,18 +63,6 @@ import concaveman from 'concaveman';

/**
* 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}.
*/

@@ -81,0 +69,0 @@ export class LassoInteraction extends BaseInteraction {

@@ -28,17 +28,5 @@ import type { NVL } from '@neo4j-nvl/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}.
*/

@@ -58,3 +46,3 @@ export declare class PanInteraction extends BaseInteraction<PanInteractionCallbacks, PanInteractionOptions> {

* @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.
*

@@ -61,0 +49,0 @@ * @example

@@ -5,17 +5,5 @@ import { difference } from 'lodash';

/**
* 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}.
*/

@@ -43,3 +31,3 @@ export class PanInteraction extends BaseInteraction {

* @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.
*

@@ -46,0 +34,0 @@ * @example

@@ -15,17 +15,5 @@ import type { NVL } from '@neo4j-nvl/base';

/**
* 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}.
*/

@@ -41,3 +29,3 @@ export declare class ZoomInteraction extends BaseInteraction<ZoomInteractionCallbacks, Record<string, never>> {

* @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.

@@ -48,3 +36,3 @@ * However, updating values in NVL instance takes time.

* Therefore, the throttle is needed to avoid events happening too fast.
* @note The throttle is set to 25ms.
* The throttle is set to 25ms.
*/

@@ -51,0 +39,0 @@ private throttledZoom;

@@ -5,17 +5,5 @@ import { throttle } from 'lodash';

/**
* 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}.
*/

@@ -34,3 +22,3 @@ export class ZoomInteraction extends BaseInteraction {

* @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.

@@ -41,3 +29,3 @@ * However, updating values in NVL instance takes time.

* Therefore, the throttle is needed to avoid events happening too fast.
* @note The throttle is set to 25ms.
* The throttle is set to 25ms.
*/

@@ -44,0 +32,0 @@ throttledZoom = throttle((event) => {

{
"name": "@neo4j-nvl/interaction-handlers",
"version": "0.3.3-9ea79f41",
"version": "0.3.3-b7e12d3c",
"license": "SEE LICENSE IN 'LICENSE.txt'",

@@ -29,10 +29,4 @@ "homepage": "https://neo4j.com/docs/nvl/current/",

},
"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-b7e12d3c",
"concaveman": "^1.2.1",

@@ -39,0 +33,0 @@ "lodash": "4.17.21"

# 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).

@@ -17,3 +17,3 @@ ## Consuming the library

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).

@@ -24,3 +24,2 @@ ### Using the library

```ts

@@ -39,2 +38,2 @@ import { ClickInteraction } from '@neo4j-nvl/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/).
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/).