@neo4j-nvl/react 0.2.44 → 0.2.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +1 -1
- package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.d.ts +1 -18
- package/lib/interactive-nvl-wrapper/InteractiveNvlWrapper.js +20 -52
- package/lib/interactive-nvl-wrapper/hooks.d.ts +5 -0
- package/lib/interactive-nvl-wrapper/hooks.js +29 -0
- package/lib/interactive-nvl-wrapper/types.d.ts +20 -0
- package/lib/interactive-nvl-wrapper/types.js +1 -0
- package/package.json +1 -1
package/lib/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BasicNvlWrapper } from './basic-wrapper/BasicNvlWrapper';
|
|
2
2
|
import type { BasicReactWrapperProps } from './basic-wrapper/BasicNvlWrapper';
|
|
3
3
|
import { InteractiveNvlWrapper } from './interactive-nvl-wrapper/InteractiveNvlWrapper';
|
|
4
|
-
import type { InteractionOptions, InteractiveNvlWrapperProps, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/
|
|
4
|
+
import type { InteractionOptions, InteractiveNvlWrapperProps, MouseEvent, MouseEventCallbacks } from './interactive-nvl-wrapper/types';
|
|
5
5
|
export { BasicNvlWrapper, InteractiveNvlWrapper };
|
|
6
6
|
export type { MouseEventCallbacks, MouseEvent, BasicReactWrapperProps, InteractionOptions, InteractiveNvlWrapperProps };
|
|
@@ -1,23 +1,6 @@
|
|
|
1
1
|
import type NVL from '@neo4j-nvl/core';
|
|
2
|
-
import type { BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteractionCallbacks, DrawInteractionCallbacks, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteractionCallbacks, LassoInteractionOptions, PanInteractionCallbacks, PanInteractionOptions, ZoomInteractionCallbacks } from '@neo4j-nvl/interaction-handlers';
|
|
3
2
|
import React from 'react';
|
|
4
|
-
import type {
|
|
5
|
-
/**
|
|
6
|
-
* The events that can be passed to the {@link MouseEventCallbacks} object
|
|
7
|
-
* to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
|
|
8
|
-
*/
|
|
9
|
-
export type MouseEvent = 'onHover' | 'onNodeClick' | 'onNodeRightClick' | 'onNodeDoubleClick' | 'onRelationshipClick' | 'onRelationshipDoubleClick' | 'onRelationshipRightClick' | 'onCanvasClick' | 'onCanvasDoubleClick' | 'onCanvasRightClick' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDrawEnd' | 'onPan' | 'onZoom' | 'onBoxStarted' | 'onBoxSelect' | 'onLassoStarted' | 'onLassoSelect';
|
|
10
|
-
export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
|
|
11
|
-
export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions;
|
|
12
|
-
/**
|
|
13
|
-
* The properties that can be passed to the {@link InteractiveNvlWrapper} component.
|
|
14
|
-
*/
|
|
15
|
-
export interface InteractiveNvlWrapperProps extends BasicReactWrapperProps {
|
|
16
|
-
/** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
|
|
17
|
-
mouseEventCallbacks?: MouseEventCallbacks;
|
|
18
|
-
/** {@link InteractionOptions} for the underlying interaction handlers */
|
|
19
|
-
interactionOptions?: InteractionOptions;
|
|
20
|
-
}
|
|
3
|
+
import type { InteractiveNvlWrapperProps } from './types';
|
|
21
4
|
/**
|
|
22
5
|
* This is a wrapper component that provides a basic set of interactions for the NVL.
|
|
23
6
|
* It is an extension of the {@link BasicNvlWrapper} component and incorporates the
|
|
@@ -1,45 +1,13 @@
|
|
|
1
1
|
import { BoxSelectInteraction, ClickInteraction, DragNodeInteraction, DrawInteraction, HoverInteraction, LassoInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers';
|
|
2
2
|
import React, { forwardRef, memo, useEffect, useRef } from 'react';
|
|
3
3
|
import { BasicNvlWrapper } from '../basic-wrapper/BasicNvlWrapper';
|
|
4
|
+
import { destroyInteraction, useInteraction } from './hooks';
|
|
4
5
|
const options = {
|
|
5
6
|
selectOnClick: false,
|
|
6
7
|
drawShadowOnHover: true,
|
|
7
8
|
selectOnRelease: false,
|
|
8
9
|
excludeNodeMargin: true
|
|
9
10
|
};
|
|
10
|
-
const destroyInteraction = (interactionRef) => {
|
|
11
|
-
var _a;
|
|
12
|
-
(_a = interactionRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
13
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
14
|
-
// @ts-ignore
|
|
15
|
-
interactionRef.current = null;
|
|
16
|
-
};
|
|
17
|
-
const useInteractionEffect = (interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
setTimeout(() => {
|
|
20
|
-
if (callback === true || typeof callback === 'function') {
|
|
21
|
-
if (interactionRef.current === null || interactionRef.current === undefined) {
|
|
22
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
23
|
-
// @ts-ignore
|
|
24
|
-
interactionRef.current = new interaction(nvlRef.current, interactionOptions);
|
|
25
|
-
}
|
|
26
|
-
if (typeof callback === 'function') {
|
|
27
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
28
|
-
// @ts-ignore
|
|
29
|
-
interactionRef.current.updateCallback(eventName, callback);
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
33
|
-
// @ts-ignore
|
|
34
|
-
interactionRef.current.removeCallback(eventName);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
else if (callback === false) {
|
|
38
|
-
destroyInteraction(interactionRef);
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}, [callback]);
|
|
42
|
-
};
|
|
43
11
|
/**
|
|
44
12
|
* This is a wrapper component that provides a basic set of interactions for the NVL.
|
|
45
13
|
* It is an extension of the {@link BasicNvlWrapper} component and incorporates the
|
|
@@ -80,25 +48,25 @@ export const InteractiveNvlWrapper = memo(forwardRef(({ nodes, rels, layout, lay
|
|
|
80
48
|
const drawInteraction = useRef();
|
|
81
49
|
const multiSelectInteraction = useRef();
|
|
82
50
|
const lassoInteraction = useRef();
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
51
|
+
useInteraction(HoverInteraction, hoverInteraction, onHover, 'onHover', myNvlRef, interactionOptions);
|
|
52
|
+
useInteraction(ClickInteraction, clickInteraction, onNodeClick, 'onNodeClick', myNvlRef, interactionOptions);
|
|
53
|
+
useInteraction(ClickInteraction, clickInteraction, onNodeDoubleClick, 'onNodeDoubleClick', myNvlRef, interactionOptions);
|
|
54
|
+
useInteraction(ClickInteraction, clickInteraction, onNodeRightClick, 'onNodeRightClick', myNvlRef, interactionOptions);
|
|
55
|
+
useInteraction(ClickInteraction, clickInteraction, onRelationshipClick, 'onRelationshipClick', myNvlRef, interactionOptions);
|
|
56
|
+
useInteraction(ClickInteraction, clickInteraction, onRelationshipDoubleClick, 'onRelationshipDoubleClick', myNvlRef, interactionOptions);
|
|
57
|
+
useInteraction(ClickInteraction, clickInteraction, onRelationshipRightClick, 'onRelationshipRightClick', myNvlRef, interactionOptions);
|
|
58
|
+
useInteraction(ClickInteraction, clickInteraction, onCanvasClick, 'onCanvasClick', myNvlRef, interactionOptions);
|
|
59
|
+
useInteraction(ClickInteraction, clickInteraction, onCanvasRightClick, 'onCanvasRightClick', myNvlRef, interactionOptions);
|
|
60
|
+
useInteraction(PanInteraction, panInteraction, onPan, 'onPan', myNvlRef, interactionOptions);
|
|
61
|
+
useInteraction(ZoomInteraction, zoomInteraction, onZoom, 'onZoom', myNvlRef, interactionOptions);
|
|
62
|
+
useInteraction(DragNodeInteraction, dragNodeInteraction, onDrag, 'onDrag', myNvlRef, interactionOptions);
|
|
63
|
+
useInteraction(DragNodeInteraction, dragNodeInteraction, onDragStart, 'onDragStart', myNvlRef, interactionOptions);
|
|
64
|
+
useInteraction(DragNodeInteraction, dragNodeInteraction, onDragEnd, 'onDragEnd', myNvlRef, interactionOptions);
|
|
65
|
+
useInteraction(DrawInteraction, drawInteraction, onDrawEnd, 'onDrawEnd', myNvlRef, interactionOptions);
|
|
66
|
+
useInteraction(BoxSelectInteraction, multiSelectInteraction, onBoxStarted, 'onBoxStarted', myNvlRef, interactionOptions);
|
|
67
|
+
useInteraction(BoxSelectInteraction, multiSelectInteraction, onBoxSelect, 'onBoxSelect', myNvlRef, interactionOptions);
|
|
68
|
+
useInteraction(LassoInteraction, lassoInteraction, onLassoStarted, 'onLassoStarted', myNvlRef, interactionOptions);
|
|
69
|
+
useInteraction(LassoInteraction, lassoInteraction, onLassoSelect, 'onLassoSelect', myNvlRef, interactionOptions);
|
|
102
70
|
useEffect(() => () => {
|
|
103
71
|
destroyInteraction(hoverInteraction);
|
|
104
72
|
destroyInteraction(clickInteraction);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type NVL from '@neo4j-nvl/core';
|
|
2
|
+
import type { MutableRefObject } from 'react';
|
|
3
|
+
import type { InteractionOptions, MouseEvent, MouseInteraction, MouseInteractionModule } from './types';
|
|
4
|
+
export declare const destroyInteraction: (interactionRef: MutableRefObject<MouseInteraction>) => void;
|
|
5
|
+
export declare const useInteraction: (interaction: MouseInteractionModule, interactionRef: MutableRefObject<MouseInteraction>, callback: boolean | ((...args: unknown[]) => void), eventName: MouseEvent, nvlRef: MutableRefObject<NVL>, interactionOptions: InteractionOptions) => void;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { isNil } from 'lodash';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
export const destroyInteraction = (interactionRef) => {
|
|
4
|
+
var _a;
|
|
5
|
+
(_a = interactionRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
6
|
+
interactionRef.current = null;
|
|
7
|
+
};
|
|
8
|
+
export const useInteraction = (interaction, interactionRef, callback, eventName, nvlRef, interactionOptions) => {
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
setTimeout(() => {
|
|
11
|
+
if ((callback === true || typeof callback === 'function') && !isNil(nvlRef.current)) {
|
|
12
|
+
if (isNil(interactionRef.current)) {
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
interactionRef.current = new interaction(nvlRef.current, interactionOptions);
|
|
16
|
+
}
|
|
17
|
+
if (typeof callback === 'function') {
|
|
18
|
+
interactionRef.current.updateCallback(eventName, callback);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
interactionRef.current.removeCallback(eventName);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
else if (callback === false) {
|
|
25
|
+
destroyInteraction(interactionRef);
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}, [callback]);
|
|
29
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { BoxSelectInteraction, BoxSelectInteractionCallbacks, BoxSelectInteractionOptions, ClickInteraction, ClickInteractionCallbacks, ClickInteractionOptions, DragNodeInteraction, DragNodeInteractionCallbacks, DrawInteraction, DrawInteractionCallbacks, HoverInteraction, HoverInteractionCallbacks, HoverInteractionOptions, LassoInteraction, LassoInteractionCallbacks, LassoInteractionOptions, PanInteraction, PanInteractionCallbacks, PanInteractionOptions, ZoomInteraction, ZoomInteractionCallbacks } from '@neo4j-nvl/interaction-handlers';
|
|
2
|
+
import type { BasicReactWrapperProps } from '../basic-wrapper/BasicNvlWrapper';
|
|
3
|
+
export type MouseInteractionModule = typeof HoverInteraction | typeof ClickInteraction | typeof PanInteraction | typeof ZoomInteraction | typeof DragNodeInteraction | typeof DrawInteraction | typeof BoxSelectInteraction | typeof LassoInteraction;
|
|
4
|
+
export type MouseInteraction = HoverInteraction | ClickInteraction | PanInteraction | ZoomInteraction | DragNodeInteraction | DrawInteraction | BoxSelectInteraction | LassoInteraction;
|
|
5
|
+
export type MouseEventCallbacks = ClickInteractionCallbacks & DragNodeInteractionCallbacks & HoverInteractionCallbacks & PanInteractionCallbacks & ZoomInteractionCallbacks & BoxSelectInteractionCallbacks & DrawInteractionCallbacks & LassoInteractionCallbacks;
|
|
6
|
+
export type InteractionOptions = ClickInteractionOptions & BoxSelectInteractionOptions & HoverInteractionOptions & PanInteractionOptions & LassoInteractionOptions;
|
|
7
|
+
/**
|
|
8
|
+
* The events that can be passed to the {@link MouseEventCallbacks} object
|
|
9
|
+
* to turn on/off certain events for the {@link InteractiveNvlWrapper} component.
|
|
10
|
+
*/
|
|
11
|
+
export type MouseEvent = 'onHover' | 'onNodeClick' | 'onNodeRightClick' | 'onNodeDoubleClick' | 'onRelationshipClick' | 'onRelationshipDoubleClick' | 'onRelationshipRightClick' | 'onCanvasClick' | 'onCanvasDoubleClick' | 'onCanvasRightClick' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDrawEnd' | 'onPan' | 'onZoom' | 'onBoxStarted' | 'onBoxSelect' | 'onLassoStarted' | 'onLassoSelect';
|
|
12
|
+
/**
|
|
13
|
+
* The properties that can be passed to the {@link InteractiveNvlWrapper} component.
|
|
14
|
+
*/
|
|
15
|
+
export interface InteractiveNvlWrapperProps extends BasicReactWrapperProps {
|
|
16
|
+
/** {@link MouseEventCallbacks} containing functions for callbacks on certain actions */
|
|
17
|
+
mouseEventCallbacks?: MouseEventCallbacks;
|
|
18
|
+
/** {@link InteractionOptions} for the underlying interaction handlers */
|
|
19
|
+
interactionOptions?: InteractionOptions;
|
|
20
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|