From 23bd5c36c5651164ee8b052abdc7b50ec82f227b Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Sat, 8 Apr 2023 10:42:41 +0100
Subject: [PATCH] fix(gallery): use grab cursor for gallery items (#844)

---
 src/components/GalleryItem.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/GalleryItem.vue b/src/components/GalleryItem.vue
index a13c9b0b9..6796cfa92 100644
--- a/src/components/GalleryItem.vue
+++ b/src/components/GalleryItem.vue
@@ -3,8 +3,10 @@
     @mouseover="focus"
     @mouseleave="blur"
     @dblclick="doubleClick"
+    @mousedown="mouseDown"
     v-if="!badModule"
     class="gallery-item"
+    :class="{ grabbing }"
   >
     <canvas ref="canvas"></canvas>
     <div class="title">{{ moduleName }}</div>
@@ -21,7 +23,8 @@ export default {
     return {
       id: "",
       outputId: "",
-      badModule: false
+      badModule: false,
+      grabbing: false
     };
   },
 
@@ -89,6 +92,9 @@ export default {
       groupId: this.groupId,
       moduleId: this.id
     });
+
+    // ensure listener cleanup
+    this.mouseUp();
   },
 
   methods: {
@@ -141,6 +147,16 @@ export default {
           group => group.id === groupId
         ).modules.length
       });
+    },
+
+    mouseDown() {
+      this.grabbing = true;
+      window.addEventListener("mouseup", this.mouseUp);
+    },
+
+    mouseUp() {
+      this.grabbing = false;
+      window.removeEventListener("mouseup", this.mouseUp);
     }
   }
 };
@@ -153,13 +169,17 @@ canvas {
 
 .gallery-item {
   position: relative;
-  cursor: move;
+  cursor: grab;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }
 
+.gallery-item.grabbing {
+  cursor: grabbing;
+}
+
 .gallery-item:hover canvas {
   opacity: 1;
 }