debugging on mousedown and click event issues

src/components/inputItem/inputItem.vue

@@ -3,7 +3,7 @@
     id="inputItem"
     class="input-item"
     :class="{ playing: isRecording }"
-    :style="{ top: `${elementY}px`, left: `${elementX}px` }"
+    :style="{ top: `${position.y}px`, left: `${position.x}px` }"
   >
 
     <!-- animations for recording and on-standby -->
@@ -15,12 +15,13 @@
     <!-- Show text input on key-down -->
     <input id="textInput" type="text" />
 
+    <div @mousedown.prevent="toggleMenu" id="helpMenu" v-if="!isDragging"></div>
+
   </div>
 </template>
 
 <script lang="ts">
-
-import { defineComponent } from "vue";
+import { defineComponent, watch, ref } from "vue";
 import draggify from "@/modules/draggify";
 import useInputController from "./inputController";
 
@@ -29,22 +30,57 @@ export default defineComponent({
   setup() {
 
     // Calculate position of inputItem on drag.
-    const { elementX, elementY } = draggify({ elementId: "inputItem" });
+    const { position, isDragging } = draggify({ elementId: "inputItem" });
 
     // determine whether the user is typing or recording.
     const { isRecording, isTyping } = useInputController();
 
+    const canOpen = ref(true);
+
+    const toggleMenu = (e: any) => {
+      if(isDragging.value === false) {
+        setImmediate(() => {
+          console.log('yuh yeet')
+        })
+        return;
+      }
+    }
+
+    watch(isDragging, (current, prev) => {
+      if (current) {
+        console.log('is dragging')
+        canOpen.value = false;
+      } else {        
+        console.log('not dragging')
+        canOpen.value = true;
+      }
+    })
+
+
     return {
-      elementX,
-      elementY,
+      position,
       isRecording,
       isTyping,
+      toggleMenu,
+      isDragging,
+      canOpen
     };
   },
 });
 </script>
 
 <style lang="scss" scoped>
+#helpMenu {
+  width: 150px;
+  height: 150px;
+  border: 1px solid red;
+  background-color: transparent;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  border-radius: 18px;
+}
 
 #textInput {
   width: 0px;

src/modules/draggify.ts

@@ -1,4 +1,4 @@
-import { onMounted, ref, onUnmounted } from "vue";
+import { onMounted, ref, onUnmounted, watch } from "vue";
 
 //---Dragabble Helper Funcs--------------------------------------
 
@@ -34,9 +34,13 @@ export default function draggify(input: { elementId: string }) {
 
     let element: HTMLElement | null;
 
-    // Cords of inputItem.
-    const elementX = ref(0);
-    const elementY = ref(0);
+    // Cords of target element.
+    const position = ref({
+      x: 0,
+      y: 0
+    });
+
+    const isDragging = ref(false);
 
     // Position of inputItem on terms of percentage of window.
     let percentX: number;
@@ -50,33 +54,37 @@ export default function draggify(input: { elementId: string }) {
 
     // Update the position of inputItem on mouse dragging.
     const onMouseMove = (e: any) => {
+      isDragging.value = true;
       element = document.getElementById(input.elementId);
 
       if (element) {
+        element.classList.add("dragging");
         const inputItemRect = element.getBoundingClientRect();
-        elementX.value = inputItemRect.left + e.movementX;
-        elementY.value = inputItemRect.top + e.movementY;
+        position.value.x = inputItemRect.left + e.movementX;
+        position.value.y = inputItemRect.top + e.movementY;
       }
 
     }
 
     // Add an event listener for dragging.
-    const onMouseDown = (_e: any) => {
-      window.addEventListener('mousemove', onMouseMove, true);
+    const onMouseDown = (e: any) => {
+      window.addEventListener('mousemove', onMouseMove, true);      
     }
 
     // Update position references when user is done moving targetEl.
-    const onMouseUp = (_e: any) => {
+    const onMouseUp = (e: any) => {
+      isDragging.value = false;
+      if (element) element.classList.remove("dragging")
       window.removeEventListener('mousemove', onMouseMove, true);
 
       const winW = window.innerWidth;
       const winH = window.innerHeight;
 
-      xShort = calcSideProximity(elementX.value, winW);
-      yShort = calcSideProximity(elementY.value, winH);
+      xShort = calcSideProximity(position.value.x, winW);
+      yShort = calcSideProximity(position.value.y, winH);
 
-      percentX = elementX.value / winW;
-      percentY = elementY.value / winH;
+      percentX = position.value.x / winW;
+      percentY = position.value.y / winH;
 
     }
 
@@ -85,8 +93,8 @@ export default function draggify(input: { elementId: string }) {
       const winW = window.innerWidth;
       const winH = window.innerHeight;
 
-      elementX.value = calcPosition(elementX.value, percentX, xShort, winW);
-      elementY.value = calcPosition(elementY.value, percentY, yShort, winH);
+      position.value.x = calcPosition(position.value.x, percentX, xShort, winW);
+      position.value.y = calcPosition(position.value.y, percentY, yShort, winH);
 
     }
 
@@ -96,25 +104,25 @@ export default function draggify(input: { elementId: string }) {
       element = document.getElementById(input.elementId);
 
       if (element) {
-        element.addEventListener('mousedown', onMouseDown, false);
+        element.addEventListener('mousedown', onMouseDown, true);
       }
 
       window.addEventListener("mouseup", onMouseUp, false);
 
       // Initialize the positional references.
-      percentX = elementX.value / window.innerWidth;
-      percentY = elementY.value / window.innerHeight;
+      percentX = position.value.x / window.innerWidth;
+      percentY = position.value.y / window.innerHeight;
 
-      xShort = calcSideProximity(elementX.value, window.innerWidth);
-      yShort = calcSideProximity(elementX.value, window.innerHeight);
+      xShort = calcSideProximity(position.value.x, window.innerWidth);
+      yShort = calcSideProximity(position.value.x, window.innerHeight);
 
       // Then, we can listen for window resize.
       window.addEventListener('resize', onWindowResize, false);
     });
 
     // Initialize the coordinants.
-    elementX.value = 20;
-    elementY.value = 200 - 38 - 20;
+    position.value.x = 20;
+    position.value.y = 200 - 38 - 20;
 
     // remove event listeners on component dismount.
     onUnmounted(() => {
@@ -124,8 +132,8 @@ export default function draggify(input: { elementId: string }) {
     })
 
     return {
-      elementX,
-      elementY
+      position,
+      isDragging
     }
 
 }