diff --git a/src/components/GalleryItem.vue b/src/components/GalleryItem.vue
index a13c9b0b..6796cfa9 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 }"
>
{{ moduleName }}
@@ -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;
}