feat(cursor): adds grab cursor to group and active module titles (#842)

* feat(cursor): adds grab cursor to group and active module titles * fix: cleanup listener on component removal
vcync · Apr 8, 2023 · 888ed83 · 888ed83
1 parent 81996d1
commit 888ed83
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/src/components/ActiveModule.vue b/src/components/ActiveModule.vue
@@ -7,7 +7,11 @@
     ref="activeModule"
     :class="{ focused }"
   >
-    <div class="active-module__title handle">
+    <div
+      class="active-module__title handle"
+      :class="{ grabbing }"
+      @mousedown="titleMouseDown"
+    >
       {{ name }}
 
       <TooltipDisplay
@@ -109,10 +113,16 @@ export default {
   data() {
     return {
       blendModes,
-      showMore: false
+      showMore: false,
+      grabbing: false
     };
   },
 
+  beforeDestroy() {
+    // ensure listener cleanup
+    this.titleMouseUp();
+  },
+
   computed: {
     module() {
       return this.$modV.store.state.modules.active[this.id];
@@ -246,6 +256,16 @@ export default {
 
         this.$emit("remove-module", this.id);
       }
+    },
+
+    titleMouseDown() {
+      this.grabbing = true;
+      window.addEventListener("mouseup", this.titleMouseUp);
+    },
+
+    titleMouseUp() {
+      this.grabbing = false;
+      window.removeEventListener("mouseup", this.titleMouseUp);
     }
   }
 };
@@ -269,6 +289,11 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
+  cursor: grab;
+}
+
+.active-module__title.grabbing {
+  cursor: grabbing;
 }
 
 .active-module__controls,

diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -179,7 +179,12 @@
       </button>
     </div>
     <div class="group__right">
-      <div class="group__title" @click.self="endTitleEditable">
+      <div
+        class="group__title"
+        :class="{ grabbing }"
+        @click.self="endTitleEditable"
+        @mousedown="titleMouseDown"
+      >
         <span v-if="!titleEditable" @dblclick="toggleTitleEditable">{{
           name
         }}</span>
@@ -266,7 +271,8 @@ export default {
       localName: "",
       controlsShown: false,
       Arrow,
-      inheritanceSelection: -1
+      inheritanceSelection: -1,
+      grabbing: false
     };
   },
 
@@ -515,6 +521,16 @@ export default {
           groupId: this.groupId
         });
       }
+    },
+
+    titleMouseDown() {
+      this.grabbing = true;
+      window.addEventListener("mouseup", this.titleMouseUp);
+    },
+
+    titleMouseUp() {
+      this.grabbing = false;
+      window.removeEventListener("mouseup", this.titleMouseUp);
     }
   },
 
@@ -627,7 +643,7 @@ export default {
   margin-left: 24px;
 }
 
-.group__modules > * + *::before {
+.group__modules > * + *:not(.smooth-dnd-ghost)::before {
   background-image: url(../assets/graphics/Arrow.svg);
   background-repeat: no-repeat;
   background-position: center;
@@ -648,6 +664,11 @@ export default {
   color: white;
   padding: 8px;
   line-height: 1;
+  cursor: grab;
+}
+
+.group__title.grabbing {
+  cursor: grabbing;
 }
 
 .group__title input {