From be40fc0ccf06aa16ca52644425d5b0d444629ab6 Mon Sep 17 00:00:00 2001 From: Andrew Gundersen Date: Fri, 19 Mar 2021 09:54:44 -0500 Subject: [PATCH] new dragging code --- src/components/inputItem/inputItem.vue | 7 +- src/modules/draggify.ts | 116 +++++++++++++++++++------ 2 files changed, 92 insertions(+), 31 deletions(-) diff --git a/src/components/inputItem/inputItem.vue b/src/components/inputItem/inputItem.vue index 9f2d618..af15f67 100644 --- a/src/components/inputItem/inputItem.vue +++ b/src/components/inputItem/inputItem.vue @@ -48,10 +48,7 @@ export default defineComponent({ const yStart = window.innerHeight - 200; // Calculate position of inputItem on drag. - const { elementX, elementY } = draggify( - { elementId: "inputItem" }, - { x: xStart, y: yStart } - ); + const { elementX, elementY } = draggify("inputItem", xStart, yStart); // Controllers for text and audio. const { typing } = useTextInputController(elementX) @@ -97,7 +94,7 @@ export default defineComponent({ z-index: 3; // border: 4px solid #C6C6C6; - border-radius: 20px; + border-radius: 50%; // Set opacity here to not affect child. background-color: rgba(235, 235, 235, 0.75); diff --git a/src/modules/draggify.ts b/src/modules/draggify.ts index d634c9b..9650632 100644 --- a/src/modules/draggify.ts +++ b/src/modules/draggify.ts @@ -2,19 +2,74 @@ import { onMounted, ref, onUnmounted } from "vue"; //---Dragabble Helper Funcs-------------------------------------- -// Update xShort or yShort value. +// Calculate distance to nearest side. +// Could be enhanced to take into account side. + + function calcSideProximity (elementX: number, winW: number) { - let short = winW - elementX - if (short > winW / 2) { - short = elementX + // Calc right short. + let short = winW - elementX - 40; + + // See if it's left short. + if (elementX + 20 < winW / 2) { + short = elementX + } + + return short +} + + +function calcPositionXDrag (elementId: string, short: number, mouse: number) { + let elementPosition = 0; + const element = document.getElementById(elementId); + + if (element) { + + const elementRect = element.getBoundingClientRect(); + + // If we are close to a side... + if (short <= 15) { + + elementPosition = elementRect.left // no change + + } else { + + elementPosition = elementRect.left + mouse; + + } + + console.log(`leftSide: ${elementRect.left}`) + } - return short + return elementPosition; } -// Update elementX or elementY value. -function calcPosition (elementPosition: number, percent: number, +function calcPositionYDrag (elementId: string, short: number, mouse: number) { + let elementPosition = 0; + const element = document.getElementById(elementId); + + if (element) { + + const elementRect = element.getBoundingClientRect(); + + if (short <= 15 && !xTouch) { + + elementPosition = elementRect.top // no change + xTouch = true + + } else { + elementPosition = elementRect.top + mouse; + } + + } + + return elementPosition; +} + +// Update elementX or elementY value on window resize. +function calcPositionResize (elementPosition: number, percent: number, short: number, win: number) { // Is it close to the right/left side? @@ -30,7 +85,8 @@ function calcPosition (elementPosition: number, percent: number, return elementPosition } -export default function draggify(input: { elementId: string }, initPosition: { x: number; y: number}) { +export default function draggify(elementId: string, xStart: number, + yStart: number) { let element: HTMLElement | null; @@ -38,6 +94,10 @@ export default function draggify(input: { elementId: string }, initPosition: { x const elementX = ref(0); const elementY = ref(0); + // Is inputItem touching the side? + let xTouch = true; + let yTouch = false; + // Position of inputItem on terms of percentage of window. let percentX: number; let percentY: number; @@ -46,17 +106,21 @@ export default function draggify(input: { elementId: string }, initPosition: { x let xShort: number; let yShort: number; + // Keep track of window size; + let winW = window.innerWidth; + let winH = window.innerHeight; + //---Event Handlers----------------------------------------------- // Update the position of inputItem on mouse dragging. const onMouseMove = (e: any) => { - element = document.getElementById(input.elementId); - if (element) { - const inputItemRect = element.getBoundingClientRect(); - elementX.value = inputItemRect.left + e.movementX; - elementY.value = inputItemRect.top + e.movementY; - } + xShort = calcSideProximity(elementX.value, winW); + yShort = calcSideProximity(elementY.value, winH); + + + elementX.value = calcPositionXDrag(elementId, xShort, e.movementX) + elementY.value = calcPositionYDrag(elementId, yShort, e.movementY) } @@ -69,12 +133,9 @@ export default function draggify(input: { elementId: string }, initPosition: { x const onMouseUp = (_e: any) => { window.removeEventListener('mousemove', onMouseMove, true); - const winW = window.innerWidth; - const winH = window.innerHeight; - - xShort = calcSideProximity(elementX.value, winW); - yShort = calcSideProximity(elementY.value, winH); + // Reposition of outside window. + // Update percentages. percentX = elementX.value / winW; percentY = elementY.value / winH; @@ -82,18 +143,21 @@ export default function draggify(input: { elementId: string }, initPosition: { x // Update position of targetEl on windowResize. const onWindowResize = (_e: any) => { - const winW = window.innerWidth; - const winH = window.innerHeight; - elementX.value = calcPosition(elementX.value, percentX, xShort, winW); - elementY.value = calcPosition(elementY.value, percentY, yShort, winH); + // Update window dimensions. + winW = window.innerWidth; + winH = window.innerHeight; + + elementX.value = calcPositionResize(elementX.value, percentX, xShort, winW); + + elementY.value = calcPositionResize(elementY.value, percentY, yShort, winH); } //--------------------------------------------------------------- onMounted(() => { - element = document.getElementById(input.elementId); + element = document.getElementById(elementId); if (element) { element.addEventListener('mousedown', onMouseDown, false); @@ -113,8 +177,8 @@ export default function draggify(input: { elementId: string }, initPosition: { x }); // Initialize the coordinants. - elementX.value = initPosition.x; - elementY.value = initPosition.y; + elementX.value = xStart; + elementY.value = yStart; // remove event listeners on component dismount. onUnmounted(() => { -- 2.43.0