From 5bc5f10eae57591ce40bae56ce3e0c76faf64778 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 8 Oct 2022 13:52:06 +0200
Subject: [PATCH] refactor(viewpane): remove `useEventListener` from user
 selection

---
 .../components/UserSelection/UserSelection.vue  | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/vue-flow/src/components/UserSelection/UserSelection.vue b/packages/vue-flow/src/components/UserSelection/UserSelection.vue
index 2f532b10..d7d366a9 100644
--- a/packages/vue-flow/src/components/UserSelection/UserSelection.vue
+++ b/packages/vue-flow/src/components/UserSelection/UserSelection.vue
@@ -8,8 +8,6 @@ import { getMousePosition } from './utils'
 const { userSelectionActive, nodesSelectionActive, getNodes, getEdges, viewport, addSelectedEdges, addSelectedNodes } =
   useVueFlow()
 
-const el = templateRef('user-selection', null)
-
 let prevNodes = $ref(0)
 
 let prevEdges = $ref(0)
@@ -94,12 +92,6 @@ const onMouseLeave = () => {
   reset()
 }
 
-useEventListener(el, 'mousedown', onMouseDown)
-useEventListener(el, 'mousemove', onMouseMove)
-useEventListener(el, 'click', onMouseUp)
-useEventListener(el, 'mouseup', onMouseUp)
-useEventListener(el, 'mouseleave', onMouseLeave)
-
 onBeforeUnmount(reset)
 </script>
 
@@ -110,7 +102,14 @@ export default {
 </script>
 
 <template>
-  <div ref="user-selection" class="vue-flow__selectionpane vue-flow__container">
+  <div
+    class="vue-flow__selectionpane vue-flow__container"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @click="onMouseUp"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave"
+  >
     <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />
   </div>
 </template>