chore: update revue-draggable to latest version

fix: selection not draggable after creation selection (stop event propagation)
* naming collision with eventlistener and callback on draggable component (everything being called 2x)

package.json

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

src/components/Nodes/wrapNode.tsx

@@ -162,14 +162,12 @@ export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
         }
       ]);
 
-      const scale = computed(() => store.transform[2] || 1);
-
       return () => (
         <DraggableCore
           start={onDragStart}
           move={onDrag}
           stop={onDragStop}
-          scale={scale.value}
+          scale={store.transform[2]}
           disabled={!props.isDraggable}
           cancel=".nodrag"
           grid={grid.value}

src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selectio  with on or several nodes
  */
 import { computed, defineComponent, inject, PropType } from 'vue';
-import { Draggable, DraggableEventHandler } from '@braks/revue-draggable';
+import { Draggable, DraggableEventListener } from '@braks/revue-draggable';
 import { isNode } from '../../utils/graph';
 import { Node, RevueFlowStore } from '../../types';
 
@@ -65,13 +65,12 @@ const NodesSelection = defineComponent({
       left: `${store.selectedNodesBbox.x}px`
     }));
 
-    const onStart: DraggableEventHandler = (event: MouseEvent) => {
+    const onStart: DraggableEventListener = ({ event }) => {
-      console.log('ondragstart');
+      event.stopPropagation();
       props.onSelectionDragStart?.(event, selectedNodes.value);
     };
 
-    const onDrag: DraggableEventHandler = (event, data) => {
+    const onDrag: DraggableEventListener = ({ event, data }) => {
-      console.log('ondrag');
       props.onSelectionDrag?.(event, selectedNodes.value);
 
       store.updateNodePosDiff({
@@ -83,8 +82,7 @@ const NodesSelection = defineComponent({
       });
     };
 
-    const onStop: DraggableEventHandler = (event: MouseEvent) => {
+    const onStop: DraggableEventListener = ({ event }) => {
-      console.log('ondragend');
       store.updateNodePosDiff({
         isDragging: false
       });
@@ -106,9 +104,9 @@ const NodesSelection = defineComponent({
       ) : (
         <div class="revue-flow__nodesselection" style={style.value}>
           <Draggable
-            start={onStart}
+            onStart={onStart}
-            move={onDrag}
+            onMove={onDrag}
-            stop={onStop}
+            onStop={onStop}
             scale={store.transform[2]}
             grid={grid.value}
             enableUserSelectHack={false}

yarn.lock

@@ -262,10 +262,10 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@braks/revue-draggable@^0.2.1-6":
+"@braks/revue-draggable@^0.2.4":
-  version "0.2.1-6"
+  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.2.1-6.tgz#6a0b5bf837d7c6a5b2380f3a2b6687271121980b"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.2.4.tgz#a3af0c27f32a1845f4182ae579ce80cc88fd9019"
-  integrity sha512-umY2rLspfkrYfRqDCnV3RvvSiqQPio4Mjdpcp/T+IF/kj0ym7UgA11c017wEQmzUmXwHrgL050bC/LBW5/KJNQ==
+  integrity sha512-8hDMuO7fl5KCshmg87aK3bQt371f3jPOZ35ip4gdcalP2fEnusVv8+AjWP1DHR2lObDTjovn30LzCK4Ily08LA==
   dependencies:
     "@vueuse/core" "^5.1.3"
     vue-demi latest