fix: node selection rect not dragging correctly

* issue comes from revue-draggable (has been fixed in 0.0.12) naming collision of the prop onDrag (callback fn) and the way JSX events are bound (onDrag instead of drag)

package.json

@@ -28,7 +28,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
-    "@braks/revue-draggable": "^0.1.10",
+    "@braks/revue-draggable": "^0.1.12",
     "@types/d3": "^7.0.0",
     "d3": "^7.0.0",
     "d3-selection": "^3.0.0",

src/components/NodesSelection/index.tsx

@@ -70,10 +70,18 @@ const NodesSelection = defineComponent({
       props.onSelectionDragStart?.(event, selectedNodes.value);
     };
 
-    const onDrag: DraggableEventHandler = (event) => {
+    const onDrag: DraggableEventHandler = (event, data) => {
       if (props.onSelectionDrag) {
         props.onSelectionDrag(event, selectedNodes.value);
       }
+
+      store.updateNodePosDiff({
+        diff: {
+          x: data.deltaX,
+          y: data.deltaY
+        },
+        isDragging: true
+      });
     };
 
     const onStop: DraggableEventHandler = (event: MouseEvent) => {

src/components/UserSelection/index.tsx

@@ -56,7 +56,6 @@ export default defineComponent({
         return;
       }
 
-      console.log('mouseDown');
       store?.setUserSelection(mousePos);
     };
 
@@ -69,13 +68,11 @@ export default defineComponent({
       if (!mousePos) {
         return;
       }
-      console.log('mousemove');
 
       store?.updateUserSelection(mousePos);
     };
 
     const onMouseUp = () => {
-      console.log('mosueUp');
       store?.unsetUserSelection();
     };
 

src/container/RevueFlow/index.tsx

@@ -1,4 +1,14 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, PropType, provide, watchEffect } from 'vue';
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  HTMLAttributes,
+  inject,
+  onBeforeUnmount,
+  PropType,
+  provide,
+  watchEffect
+} from 'vue';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
@@ -538,7 +548,7 @@ const RevueFlow = defineComponent({
      */
   },
   setup(props, { slots }) {
-    const store = configureStore(initialState)();
+    const store = typeof inject('store') !== 'undefined' ? inject<RevueFlowStore>('store')! : configureStore(initialState)();
     provide<RevueFlowStore>('store', store);
     store.setElements(props.elements);
 

yarn.lock

@@ -262,10 +262,10 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@braks/revue-draggable@^0.1.10":
+"@braks/revue-draggable@^0.1.12":
-  version "0.1.10"
+  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.10.tgz#d6c7de3de44f1fbce09b37ba35a80100418850ba"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.12.tgz#6ccf57c1954f1bcc3e66e3956f7205dc57841deb"
-  integrity sha512-m8cXb1NADAYQxhNUqfrzIhlvRPacaBEy/J8FVemkQCZLhzd5lHUMaTv+5hiYRgljXcoRLWO21HF4NtqWZ1kQuw==
+  integrity sha512-eq2uj6t3GKmIej5RcDBSun94ZKs1wmEDvMMx/uz+m7EzeffXYIDyo8Zk1Nkmb3MdOcvp4BHpnzuAxUbPnZnEMA==
   dependencies:
     vue-demi latest