Keep input item in abounds

src/components/inputItem/inputItem.vue

@@ -48,7 +48,7 @@ export default defineComponent({
     const yStart = window.innerHeight - 200;
 
     // Calculate position of inputItem on drag.
-    const { elementX, elementY } = draggify("inputItem", xStart, yStart);
+    const { elementX, elementY } = draggify("inputItem", xStart, yStart, 15);
 
     // Controllers for text and audio.
     const { typing } = useTextInputController(elementX)

src/modules/draggify.ts

@@ -3,9 +3,6 @@ import { onMounted, ref, onUnmounted } from "vue";
 //---Dragabble Helper Funcs--------------------------------------
 
 // Calculate distance to nearest side.
-// Could be enhanced to take into account side.
-
-
 function calcSideProximity (elementX: number, winW: number) {
 
   // Calc right short.
@@ -19,27 +16,13 @@ function calcSideProximity (elementX: number, winW: number) {
   return short
 }
 
-
-function calcPositionXDrag (elementId: string, short: number, mouse: number) {
-    let elementPosition = 0;
-    const element = document.getElementById(elementId);
-
-    if (element) {
-
-      const elementRect = element.getBoundingClientRect();
-
-        elementPosition = elementRect.left + mouse;
-
-    return elementPosition;
-}
-
-// Update elementX or elementY value on window resize.
-function calcPositionResize (elementPosition: number, percent: number,
+// Update elementX or elementY value on window resize
+function calcPosition (elementPosition: number, percent: number,
     short: number, win: number) {
 
-    // Is it close to the right/left side?
+    // Is it close to the right/bottom side?
     if (percent > 0.75) {
-        elementPosition = win - short
+        elementPosition = win - short - 40;
     }
 
     // Is it not close to a side?
@@ -51,7 +34,7 @@ function calcPositionResize (elementPosition: number, percent: number,
 }
 
 export default function draggify(elementId: string, xStart: number, 
-  yStart: number) {
+  yStart: number, margin: number) {
 
     let element: HTMLElement | null;
 
@@ -59,10 +42,6 @@ export default function draggify(elementId: string, xStart: number,
     const elementX = ref(0);
     const elementY = ref(0);
 
-    // Is inputItem touching the side?
-    const xTouch = true;
-    const yTouch = false;
-
     // Position of inputItem on terms of percentage of window.
     let percentX: number;
     let percentY: number;
@@ -75,22 +54,42 @@ export default function draggify(elementId: string, xStart: number,
     let winW = window.innerWidth;
     let winH = window.innerHeight;
 
+    //---Reposition Anime-----------------------------------------------
+
+    // Move element to target smoothly.
+    const repositionAnime = (xChange: number, yChange: number) => {
+        const xStep = xChange / 6000;
+        const yStep = yChange / 6000;
+
+        for (let i = 1; i <= 6000; i++) {
+
+          setTimeout(() => {
+            elementX.value += xStep;
+            elementY.value += yStep;
+          }, 16) // 60fps
+
+        }
+
+    }
+
     //---Event Handlers-----------------------------------------------
 
     // Update the position of inputItem on mouse dragging.
     const onMouseMove = (e: any) => {
+      e.preventDefault()
+      element = document.getElementById(elementId);
 
-        xShort = calcSideProximity(elementX.value, winW);
-        yShort = calcSideProximity(elementY.value, winH);
-
-
-        elementX.value = calcPositionXDrag(elementId, xShort, e.movementX)
-        elementY.value = calcPositionYDrag(elementId, yShort, e.movementY)
+      if (element) {
+        const inputItemRect = element.getBoundingClientRect();
+        elementX.value = inputItemRect.left + e.movementX;
+        elementY.value = inputItemRect.top + e.movementY;
+      }
 
     }
 
     // Add an event listener for dragging.
     const onMouseDown = (_e: any) => {
+      _e.preventDefault()
       window.addEventListener('mousemove', onMouseMove, true);
     }
 
@@ -98,7 +97,34 @@ export default function draggify(elementId: string, xStart: number,
     const onMouseUp = (_e: any) => {
       window.removeEventListener('mousemove', onMouseMove, true);
 
-      // Reposition of outside window.
+      // See if and calculate reposition.
+      let x = 0; // vector change
+      let y = 0;
+
+      if (elementX.value < 0) {
+        x = (elementX.value - margin)*-1
+      }
+
+      if (elementX.value > winW - 40) {
+        const b = winW - 40 - margin;
+        x = (elementX.value - b)*-1
+      }
+
+      // Reposition y
+      if (elementY.value < 0) {
+        y = (elementY.value - margin)*-1
+      }
+
+      if (elementY.value > winH - 40) {
+        const d = winH - 40 - margin;
+        y = (elementY.value - d)*-1
+      }
+
+      // Reposition if needed.
+      if (x !== 0 || y !== 0) repositionAnime(x, y);
+
+      xShort = calcSideProximity(elementX.value, winW);
+      yShort = calcSideProximity(elementY.value, winH);
 
       // Update percentages.
       percentX = elementX.value / winW;
@@ -113,9 +139,8 @@ export default function draggify(elementId: string, xStart: number,
       winW = window.innerWidth;
       winH = window.innerHeight;
 
-      elementX.value = calcPositionResize(elementX.value, percentX, xShort, winW);
-
-      elementY.value = calcPositionResize(elementY.value, percentY, yShort, winH);
+      elementX.value = calcPosition(elementX.value, percentX, xShort, winW);
+      elementY.value = calcPosition(elementY.value, percentY, yShort, winH);
 
     }