@neo4j-nvl/interaction-handlers 0.2.15 → 0.2.17

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 +34 -9
  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
@@ -35,6 +35,12 @@ export class DragNodeInteraction extends BaseInteraction {
35
35
  writable: true,
36
36
  value: void 0
37
37
  });
38
+ Object.defineProperty(this, "isDragging", {
39
+ enumerable: true,
40
+ configurable: true,
41
+ writable: true,
42
+ value: void 0
43
+ });
38
44
  Object.defineProperty(this, "isDrawing", {
39
45
  enumerable: true,
40
46
  configurable: true,
@@ -85,23 +91,32 @@ export class DragNodeInteraction extends BaseInteraction {
85
91
  enumerable: true,
86
92
  configurable: true,
87
93
  writable: true,
88
- value: (event) => {
94
+ value: (evt) => {
89
95
  // Avoid conflicts on moving node position in drawing process.
90
- if (this.mouseDownNode === null || event.buttons !== 1 || this.isDrawing) {
96
+ if (this.mouseDownNode === null || evt.buttons !== 1 || this.isDrawing) {
91
97
  return;
92
98
  }
93
- const diffX = Math.abs(event.clientX - this.mousePosition.x);
94
- const diffY = Math.abs(event.clientY - this.mousePosition.y);
99
+ const diffX = Math.abs(evt.clientX - this.mousePosition.x);
100
+ const diffY = Math.abs(evt.clientY - this.mousePosition.y);
95
101
  const distanceSquared = Math.pow(diffX, 2) + Math.pow(diffY, 2);
96
102
  if (distanceSquared < DragThreshold) {
97
103
  return;
98
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
+ }
99
114
  const zoom = this.nvlInstance.getScale();
100
- const dx = ((event.clientX - this.mousePosition.x) / zoom) * window.devicePixelRatio;
101
- 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;
102
117
  if (this.moveSelectedNodes) {
103
118
  this.nvlInstance.setNodePositions(this.selectedNodes.map((node) => ({ id: node.id, x: node.x + dx, y: node.y + dy, pinned: true })), true);
104
- this.callCallbackIfRegistered('onDrag', this.selectedNodes, event);
119
+ this.callCallbackIfRegistered('onDrag', this.selectedNodes, evt);
105
120
  }
106
121
  else {
107
122
  this.nvlInstance.setNodePositions([
@@ -112,7 +127,7 @@ export class DragNodeInteraction extends BaseInteraction {
112
127
  pinned: true
113
128
  }
114
129
  ], true);
115
- this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], event);
130
+ this.callCallbackIfRegistered('onDrag', [this.mouseDownNode.data], evt);
116
131
  }
117
132
  }
118
133
  });
@@ -120,7 +135,16 @@ export class DragNodeInteraction extends BaseInteraction {
120
135
  enumerable: true,
121
136
  configurable: true,
122
137
  writable: true,
123
- 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;
124
148
  this.mouseDownNode = null;
125
149
  this.isDrawing = false;
126
150
  this.selectedNodes = [];
@@ -141,6 +165,7 @@ export class DragNodeInteraction extends BaseInteraction {
141
165
  }
142
166
  });
143
167
  this.mousePosition = { x: 0, y: 0 };
168
+ this.isDragging = false;
144
169
  this.isDrawing = false;
145
170
  this.selectedNodes = [];
146
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.15",
3
+ "version": "0.2.17",
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",