Merge pull request #235 from Geode-solutions/fix_draggable_contextmenu

fix(ContextMenu): The contextmenu is now draggable

Author: BotellaA

components/Viewer/ContextMenu.vue

@@ -3,23 +3,28 @@
     v-model="show_menu"
     content-class="circular-menu"
     :style="getMenuStyle()"
+    :close-on-content-click="false"
+    :close-delay="100"
   >
-    <div
-      class="circular-menu-items"
-      :style="{ width: `${radius * 2}px`, height: `${radius * 2}px` }"
-    >
-      <component
-        v-for="(item, index) in menu_items"
-        :is="item"
-        :key="index"
-        :itemProps="{
-          id: props.id,
-          tooltip_location: getTooltipLocation(index),
-          tooltip_origin: getTooltipOrigin(index),
-        }"
-        class="menu-item-wrapper"
-        :style="getItemStyle(index)"
-      />
+    <div class="circular-menu-drag-handle" @mousedown.stop="startDrag">
+      <div
+        class="circular-menu-items"
+        :style="{ width: `${radius * 2}px`, height: `${radius * 2}px` }"
+      >
+        <component
+          v-for="(item, index) in menu_items"
+          :is="item"
+          :key="index"
+          :itemProps="{
+            id: props.id,
+            tooltip_location: getTooltipLocation(index),
+            tooltip_origin: getTooltipOrigin(index),
+          }"
+          class="menu-item-wrapper"
+          :style="getItemStyle(index)"
+          @mousedown.stop
+        />
+      </div>
     </div>
   </v-menu>
 </template>
@@ -40,12 +45,60 @@
     const itemId = props.id || menuStore.current_id
     return itemId ? dataBaseStore.itemMetaDatas(itemId) : {}
   })
+
   const radius = 80
   const show_menu = ref(true)
+  const isDragging = ref(false)
+  const dragStartX = ref(0)
+  const dragStartY = ref(0)
+  const menuX = ref(props.x || menuStore.menuX)
+  const menuY = ref(props.y || menuStore.menuY)
+
+  const { pause: pauseDragListeners, resume: resumeDragListeners } =
+    useEventListener(
+      "mousemove",
+      (e) => {
+        if (!isDragging.value) return
+        handleDrag(e)
+      },
+      { passive: true },
+    )
+
+  const { pause: pauseStopListeners, resume: resumeStopListeners } =
+    useEventListener("mouseup", (e) => {
+      if (!isDragging.value) return
+      stopDrag(e)
+    })
 
-  watch(show_menu, (value) => {
-    if (!value) {
-      menuStore.closeMenu()
+  useEventListener(
+    "touchstart",
+    (e) => {
+      startDrag(e.touches[0])
+      e.preventDefault()
+    },
+    { passive: false },
+  )
+
+  useEventListener(
+    "touchmove",
+    (e) => {
+      if (!isDragging.value) return
+      handleDrag(e.touches[0])
+      e.preventDefault()
+    },
+    { passive: false },
+  )
+
+  useEventListener("touchend", (e) => {
+    if (!isDragging.value) return
+    stopDrag(e.changedTouches[0])
+  })
+
+  watch(show_menu, (newVal) => {
+    if (!newVal && isDragging.value) {
+      setTimeout(() => {
+        show_menu.value = true
+      }, 10)
     }
   })
 
@@ -58,18 +111,42 @@
 
   const menuItemCount = computed(() => menu_items.value.length)
 
-  function getMenuStyle() {
-    const x = props.x || menuStore.menuX
-    const y = props.y || menuStore.menuY
-    const width = props.containerWidth || menuStore.containerWidth
-    const height = props.containerHeight || menuStore.containerHeight
+  function startDrag(e) {
+    isDragging.value = true
+    dragStartX.value = e.clientX - menuX.value
+    dragStartY.value = e.clientY - menuY.value
+    resumeDragListeners()
+    resumeStopListeners()
+    e.preventDefault()
+  }
 
-    const adjustedX = Math.min(Math.max(x, radius), width - radius)
-    const adjustedY = Math.min(Math.max(y, radius), height - radius)
+  function handleDrag(e) {
+    if (!isDragging.value) return
+    menuX.value = e.clientX - dragStartX.value
+    menuY.value = e.clientY - dragStartY.value
 
+    menuX.value = Math.min(
+      Math.max(menuX.value, radius),
+      props.containerWidth - radius,
+    )
+    menuY.value = Math.min(
+      Math.max(menuY.value, radius),
+      props.containerHeight - radius,
+    )
+  }
+
+  function stopDrag(e) {
+    isDragging.value = false
+    pauseDragListeners()
+    pauseStopListeners()
+    e.stopPropagation()
+    menuStore.setMenuPosition(menuX.value, menuY.value)
+  }
+
+  function getMenuStyle() {
     return {
-      left: `${adjustedX - radius}px`,
-      top: `${adjustedY - radius}px`,
+      left: `${menuX.value - radius}px`,
+      top: `${menuY.value - radius}px`,
     }
   }
 
@@ -92,9 +169,7 @@
   function getItemStyle(index) {
     const angle = (index / menuItemCount.value) * 2 * Math.PI
     return {
-      transform: `translate(${Math.cos(angle) * radius}px, ${
-        Math.sin(angle) * radius
-      }px)`,
+      transform: `translate(${Math.cos(angle) * radius}px, ${Math.sin(angle) * radius}px)`,
       transition: "opacity 0.1s ease, transform 0.1s ease",
       position: "absolute",
     }
@@ -106,6 +181,20 @@
     position: absolute;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.8);
+    user-select: none;
+    cursor: grab;
+    z-index: 1000;
+  }
+
+  .circular-menu-drag-handle {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    cursor: grab;
+  }
+
+  .circular-menu-drag-handle:active {
+    cursor: grabbing;
   }
 
   .circular-menu-items {