From f123fefc6e1895e13db6d9b9c28d02ff99d59c5f Mon Sep 17 00:00:00 2001 From: Andrew Gundersen Date: Fri, 19 Mar 2021 12:37:14 -0500 Subject: [PATCH] Keep input item in abounds --- src/components/inputItem/inputItem.vue | 2 +- src/modules/draggify.ts | 97 ++++++++++++++++---------- 2 files changed, 62 insertions(+), 37 deletions(-) diff --git a/src/components/inputItem/inputItem.vue b/src/components/inputItem/inputItem.vue index af15f67..8ea6a5d 100644 --- a/src/components/inputItem/inputItem.vue +++ b/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) diff --git a/src/modules/draggify.ts b/src/modules/draggify.ts index eeabb36..5e400ab 100644 --- a/src/modules/draggify.ts +++ b/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); } -- 2.43.0