From 7eb7cb1dc37c4ba59e50f56f38f774a3ad6fc422 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 23 Jul 2021 14:08:39 +0200
Subject: [PATCH] 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                            |  2 +-
 src/components/Nodes/wrapNode.tsx       |  4 +---
 src/components/NodesSelection/index.tsx | 18 ++++++++----------
 yarn.lock                               |  8 ++++----
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 8f8a7b8e..3a6181a9 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 50b21248..9695592a 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/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}
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index 638fca29..4aa2f371 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/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) => {
-      console.log('ondragstart');
+    const onStart: DraggableEventListener = ({ event }) => {
+      event.stopPropagation();
       props.onSelectionDragStart?.(event, selectedNodes.value);
     };
 
-    const onDrag: DraggableEventHandler = (event, data) => {
-      console.log('ondrag');
+    const onDrag: DraggableEventListener = ({ event, data }) => {
       props.onSelectionDrag?.(event, selectedNodes.value);
 
       store.updateNodePosDiff({
@@ -83,8 +82,7 @@ const NodesSelection = defineComponent({
       });
     };
 
-    const onStop: DraggableEventHandler = (event: MouseEvent) => {
-      console.log('ondragend');
+    const onStop: DraggableEventListener = ({ event }) => {
       store.updateNodePosDiff({
         isDragging: false
       });
@@ -106,9 +104,9 @@ const NodesSelection = defineComponent({
       ) : (
         <div class="revue-flow__nodesselection" style={style.value}>
           <Draggable
-            start={onStart}
-            move={onDrag}
-            stop={onStop}
+            onStart={onStart}
+            onMove={onDrag}
+            onStop={onStop}
             scale={store.transform[2]}
             grid={grid.value}
             enableUserSelectHack={false}
diff --git a/yarn.lock b/yarn.lock
index b1333022..8f10e52f 100644
--- a/yarn.lock
+++ b/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":
-  version "0.2.1-6"
-  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.2.1-6.tgz#6a0b5bf837d7c6a5b2380f3a2b6687271121980b"
-  integrity sha512-umY2rLspfkrYfRqDCnV3RvvSiqQPio4Mjdpcp/T+IF/kj0ym7UgA11c017wEQmzUmXwHrgL050bC/LBW5/KJNQ==
+"@braks/revue-draggable@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.2.4.tgz#a3af0c27f32a1845f4182ae579ce80cc88fd9019"
+  integrity sha512-8hDMuO7fl5KCshmg87aK3bQt371f3jPOZ35ip4gdcalP2fEnusVv8+AjWP1DHR2lObDTjovn30LzCK4Ily08LA==
   dependencies:
     "@vueuse/core" "^5.1.3"
     vue-demi latest