updated inputitem

src/components/drag.ts

@@ -1,26 +0,0 @@
-
-// When user clicks and holds inputItem.
-function onMouseDown (e: any) {
-    window.addEventListener('mousemove', onMouseMove, true);
-}
-
-// When user drags inputItem.
-function onMouseMove (e: any) {
-
-    const element = document.getElementById('inputItem')
-
-    if (element) {
-
-        const inputItemRect = element.getBoundingClientRect()
-        inputItemX.value = inputItemRect.left + e.movementX
-        inputItemY.value = inputItemRect.top + e.movementY
-
-    }
-    
-}
-
-// When user lets go of inputItem.
-function onMouseUp (e: any) {
-
-}
-

src/components/helpers.ts

@@ -0,0 +1,29 @@
+
+// Update xShort or yShort value.
+export function calcSideProximity (inputItemX: number, winW: number) {
+    let short = winW - inputItemX
+
+    if (short > winW / 2) {
+        short = inputItemX
+    }
+
+    return short
+}
+
+
+// Update inputItemX or inputItemY value.
+export function calcPosition (inputItemPosition: number, percent: number, 
+    short: number, win: number) {
+
+    // Is it close to the right/left side?
+    if (percent > 0.85) { 
+        inputItemPosition = win - short
+    }
+
+    // Is it not close to a side?
+    if (percent < 0.85 && percent > 0.15) {
+        inputItemPosition = inputItemPosition / win
+    }
+
+    return inputItemPosition
+}

src/components/inputItem.vue

@@ -8,43 +8,34 @@
 <script lang="ts">
 
 import { defineComponent, onMounted, ref, onUnmounted } from "vue";
+import { calcSideProximity, calcPosition } from "./helpers"
 
 export default defineComponent({
   name: "InputItem",
 
   setup() {
 
+    // Cords of inputItem.
     let inputItemX = ref(0)
     let inputItemY = ref(0)
 
-    let xShort: object = {
-      distance: Number,
-      side: String
+    // Position of inputItem on terms of percentage of window.
+    let percentX: number
+    let percentY: number
+
+    // How close inputItem is to closest X or Y side.
+    let xShort: number
+    let yShort: number
+
+    //---Event Handlers-----------------------------------------------
+
+    // Add an event listener for dragging.
+    const onMouseDown = (e: any) => {
+      window.addEventListener('mousemove', onMouseMove, true);
     }
 
-    let percentX: number;
-    let percentY: number;
-
-    // Draggable on mousedown.
-    const mouseDown = (e: any) => {
-       window.addEventListener('mousemove', divMove, true);
-    }
-
-    // Update the positional refs.
-    const mouseUp = (e: any) => {
-      window.removeEventListener('mousemove', divMove, true);
-
-
-
-      const winW = window.innerWidth
-      const winH = window.innerHeight
-      console.log(`Window dimensions: W${winW} H${winH}`)
-      
-    }
-
-    // Called on mousemove event. Updates the inputItem cords when user is
-    // dragging it.
-    const divMove = (e: any) => {
+    // Update the position of inputItem on mouse dragging.
+    const onMouseMove = (e: any) => {
       const element = document.getElementById('inputItem')
 
       if (element) {
@@ -54,49 +45,64 @@ export default defineComponent({
         inputItemY.value = inputItemRect.top + e.movementY
 
       }
+        
+    }
+
+    // Update position references when user is done moving inputItem.
+    const onMouseUp = (e: any) => {
+      window.removeEventListener('mousemove');
+
+      const winW = window.innerWidth
+      const winH = window.innerHeight
+      
+      xShort = calcSideProximity(inputItemX.value, winW)
+      yShort = calcSideProximity(inputItemX.value, winW)
+
+      percentX = inputItemX.value / winW
+      percentY = inputItemY.value / winH
+
+      console.log(`Pos refs updated: \n
+          percentX: ${percentX}, percentY: ${percentY} \n
+          xShort: ${xShort}, yShort: ${yShort}`
+      )
+    }
+
+    // Update position of inputItem on windowResize.
+    const onWindowResize = (e: any) => {
+      const winW = window.innerWidth
+      const winH = window.innerHeight
+
+      inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
+      inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
 
     }
 
-    // Adjust position of inputItem on window resize.
-    // If inputItem is within 10% of corner, keep the distances from that
-    // corner fixed, else resize relative to percentages.
-    const handleResize = (e: any) => {
-
-      // Adjust X:
-      // Is X close to a vertical side?
-      // If so: position fixed
-      if (inputItemX.onSide) {
-
-        if (inputItemX.rightSide) {
-          inputItemX.value = window.innerWidth - xShort
-        } else {
-          inputItemX.value = xShort
-        }
-
-      // Else: position relative
-      } else {
-        inputItemX.value = window.innerWidth * percentX
-      }
-
-    // Initialize InputPosition.
-    inputItemX.value = 300
-    inputItemY.value = 300
-    percentX = 0.5
-    percentY = 0.5
+    //---------------------------------------------------------------
 
     onMounted(() => {
-
       const element = document.getElementById('inputItem')
 
       if (element) {
-        element.addEventListener('mousedown', mouseDown, false);
+        element.addEventListener('mousedown', onMouseDown, false);
       }
 
-      window.addEventListener('mouseup', mouseUp, false);
-      window.addEventListener('resize', handleResize, false)
+      window.addEventListener("mouseup", onMouseUp, false)
 
+      // Initialize the positional references.
+      percentX = inputItemX.value / window.innerWidth
+      percentY = inputItemY.value / window.innerHeight
+
+      xShort = calcSideProximity(inputItemX.value, window.innerWidth)
+      yShort = calcSideProximity(inputItemX.value, window.innerHeight)
+
+      // Then, we can listen for window resize.
+      window.addEventListener('resize', onWindowResize, false)
     });
 
+    // Initialize the coordinants.
+    inputItemX.value = 200
+    inputItemY.value = 200
+
     return {
       inputItemX,
       inputItemY

src/components/resize.ts

@@ -1,8 +0,0 @@
-
-// Update inputItem position on window resize.
-function handleWindowResize (e: any) {
-
-    
-
-}
-