139 lines
No EOL
3.3 KiB
Vue
139 lines
No EOL
3.3 KiB
Vue
<template>
|
|
<div id=inputItem
|
|
:style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
import { defineComponent, onMounted, ref, onUnmounted } from "vue";
|
|
import { calcSideProximity, calcPosition } from "./helpers"
|
|
|
|
export default defineComponent({
|
|
name: "InputItem",
|
|
|
|
setup() {
|
|
|
|
// Cords of inputItem.
|
|
const inputItemX = ref(0)
|
|
const inputItemY = ref(0)
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Update the position of inputItem on mouse dragging.
|
|
const 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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Update position references when user is done moving inputItem.
|
|
const onMouseUp = (e: any) => {
|
|
window.removeEventListener('mousemove', onMouseMove, true);
|
|
|
|
const winW = window.innerWidth
|
|
const winH = window.innerHeight
|
|
|
|
xShort = calcSideProximity(inputItemX.value, winW)
|
|
yShort = calcSideProximity(inputItemY.value, winH)
|
|
|
|
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)
|
|
|
|
}
|
|
|
|
//---------------------------------------------------------------
|
|
|
|
onMounted(() => {
|
|
const element = document.getElementById('inputItem')
|
|
|
|
if (element) {
|
|
element.addEventListener('mousedown', onMouseDown, 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
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#inputItem {
|
|
position: absolute;
|
|
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
border-radius: 19px;
|
|
|
|
z-index: 20;
|
|
|
|
top: 200px;
|
|
right: 0px;
|
|
|
|
border-style: solid;
|
|
border-width: 4px;
|
|
border-color: #C3C3C3;
|
|
|
|
background-color: white;
|
|
|
|
}
|
|
|
|
</style> |