@neo4j-nvl/interaction-handlers 0.2.14 → 0.2.16

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.
Files changed (4) hide show
  1. package/lib/interaction-handlers/click-interaction.js +1 -1
  2. package/lib/interaction-handlers/drag-node-interaction.d.ts +14 -1
  3. package/lib/interaction-handlers/drag-node-interaction.js +41 -8
  4. package/package.json +1 -1
package/lib/interaction-handlers/click-interaction.js CHANGED
@@ -95,7 +95,7 @@ export class ClickInteraction extends BaseInteraction {
95
95
  configurable: true,
96
96
  writable: true,
97
97
  value: (event) => {
98
- if (this.moved) {
98
+ if (this.moved || event.button !== 0) {
99
99
  return;
100
100
  }
101
101
  const { nvlTargets } = this.nvlInstance.getHits(event);
package/lib/interaction-handlers/drag-node-interaction.d.ts CHANGED
@@ -9,7 +9,19 @@ export type DragNodeInteractionCallbacks = {
9
9
  * @param nodes - The node(s) being dragged
10
10
  * @param event - The original mouse event
11
11
  */
12
- onDrag?: ((nodes: Node[], event: MouseEvent) => void) | boolean;
12
+ onDrag?: ((nodes: Node[], evt: MouseEvent) => void) | boolean;
13
+ /**
14
+ * Called once when node(s) are started to being dragged
15
+ * @param nodes - The node(s) being dragged
16
+ * @param event - The original mouse event
17
+ */
18
+ onDragStart?: (nodes: Node[], evt: MouseEvent) => void;
19
+ /**
20
+ * Called once when node(s) are finished being dragged
21
+ * @param nodes - The node(s) being dragged
22
+ * @param event - The original mouse event
23
+ */
24
+ onDragEnd?: (nodes: Node[], evt: MouseEvent) => void;
13
25
  };
14
26
  /**
15
27
  * Interaction handler for dragging nodes.
@@ -29,6 +41,7 @@ export type DragNodeInteractionCallbacks = {
29
41
  export declare class DragNodeInteraction extends BaseInteraction<DragNodeInteractionCallbacks> {
30
42
  private mousePosition;
31
43
  private mouseDownNode;
44
+ private isDragging;
32
45
  private isDrawing;
33
46
  private selectedNodes;
34
47
  private moveSelectedNodes;
package/lib/interaction-handlers/drag-node-interaction.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { NODE_EDGE_WIDTH } from '../constants';
2
2
  import { BaseInteraction } from './base';
3
+ const DragThreshold = 10;
3
4
  /**
4
5
  * Interaction handler for dragging nodes.
5
6
  * Dragging is achieved by clicking and dragging on the node.
@@ -34,6 +35,12 @@ export class DragNodeInteraction extends BaseInteraction {
34
35
  writable: true,
35
36
  value: void 0
36
37
  });
38
+ Object.defineProperty(this, "isDragging", {
39
+ enumerable: true,
40
+ configurable: true,
41
+ writable: true,
42
+ value: void 0
43
+ });
37
44
  Object.defineProperty(this, "isDrawing", {
38
45
  enumerable: true,
39
46
  configurable: true,
@@ -72,7 +79,7 @@ export class DragNodeInteraction extends BaseInteraction {
72
79
  this.mouseDownNode = null;
73
80
  }
74
81
  this.selectedNodes = this.nvlInstance.getSelectedNodes();
75
- if (this.mouseDownNode && this.selectedNodes.map((node) => node.id).includes(this.mouseDownNode.data.id)) {
82
+ if (this.mouseDownNode !== null && this.selectedNodes.map((node) => node.id).includes(this.mouseDownNode.data.id)) {
76
83
  this.moveSelectedNodes = true;
77
84
  }
78
85
  else {
@@ -84,16 +91,32 @@ export class DragNodeInteraction extends BaseInteraction {
84
91
  enumerable: true,
85
92
  configurable: true,
86
93
  writable: true,
87
- value: (event) => {
94
+ value: (evt) => {
88
95
  // Avoid conflicts on moving node position in drawing process.
89
- if (!this.mouseDownNode || event.buttons !== 1 || this.isDrawing)
96
+ if (this.mouseDownNode === null || evt.buttons !== 1 || this.isDrawing) {
90
97
  return;
98
+ }
99
+ const diffX = Math.abs(evt.clientX - this.mousePosition.x);
100
+ const diffY = Math.abs(evt.clientY - this.mousePosition.y);
101
+ const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
102
+ if (distanceSquared < DragThreshold) {
103
+ return;
104
+ }
105
+ if (!this.isDragging) {
106
+ if (this.moveSelectedNodes) {
107
+ this.callCallbackIfRegistered('onDragStart', this.selectedNodes, evt);
108
+ }
109
+ else {
110
+ this.callCallbackIfRegistered('onDragStart', [this.mouseDownNode.data], evt);
111
+ }
112
+ this.isDragging = true;
113
+ }
91
114
  const zoom = this.nvlInstance.getScale();
92
- const dx = ((event.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
93
- const dy = ((event.clientY - this.mousePosition.y) / zoom) * window.devicePixelRatio;
115
+ const dx = ((evt.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
116
+ const dy = ((evt.clientY - this.mousePosition.y) / zoom) * window.devicePixelRatio;
94
117
  if (this.moveSelectedNodes) {
95
118
  this.nvlInstance.setNodePositions(this.selectedNodes.map((node) => ({ id: node.id, x: node.x + dx, y: node.y + dy, pinned: true })), true);
96
- this.callCallbackIfRegistered('onDrag', this.selectedNodes, event);
119
+ this.callCallbackIfRegistered('onDrag', this.selectedNodes, evt);
97
120
  }
98
121
  else {
99
122
  this.nvlInstance.setNodePositions([
@@ -104,7 +127,7 @@ export class DragNodeInteraction extends BaseInteraction {
104
127
  pinned: true
105
128
  }
106
129
  ], true);
107
- this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], event);
130
+ this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], evt);
108
131
  }
109
132
  }
110
133
  });
@@ -112,7 +135,16 @@ export class DragNodeInteraction extends BaseInteraction {
112
135
  enumerable: true,
113
136
  configurable: true,
114
137
  writable: true,
115
- value: () => {
138
+ value: (evt) => {
139
+ if (this.isDragging) {
140
+ if (this.moveSelectedNodes) {
141
+ this.callCallbackIfRegistered('onDragEnd', this.selectedNodes, evt);
142
+ }
143
+ else {
144
+ this.callCallbackIfRegistered('onDragEnd', [this.mouseDownNode.data], evt);
145
+ }
146
+ }
147
+ this.isDragging = false;
116
148
  this.mouseDownNode = null;
117
149
  this.isDrawing = false;
118
150
  this.selectedNodes = [];
@@ -133,6 +165,7 @@ export class DragNodeInteraction extends BaseInteraction {
133
165
  }
134
166
  });
135
167
  this.mousePosition = { x: 0, y: 0 };
168
+ this.isDragging = false;
136
169
  this.isDrawing = false;
137
170
  this.selectedNodes = [];
138
171
  this.moveSelectedNodes = false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-nvl/interaction-handlers",
3
- "version": "0.2.14",
3
+ "version": "0.2.16",
4
4
  "license": "SEE LICENSE IN 'Neo4j Early Access Agreement - Visualization Library.pdf'",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",