|
@@ -1,8 +1,8 @@
|
|
|
// WIP
|
|
|
-import { onUnmounted } from "vue";
|
|
|
+import { ref, onUnmounted } from "vue";
|
|
|
|
|
|
export default () => {
|
|
|
- let dragBox = {
|
|
|
+ const dragBox = ref({
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
pos1: 0,
|
|
@@ -21,20 +21,21 @@ export default () => {
|
|
|
},
|
|
|
debounceTimeout: null,
|
|
|
lastTappedDate: 0
|
|
|
- };
|
|
|
+ });
|
|
|
+ const onDragBoxUpdate = ref();
|
|
|
|
|
|
const setInitialBox = (initial, reset) => {
|
|
|
- dragBox.initial = initial || dragBox.initial;
|
|
|
- if (reset) dragBox = { ...dragBox, ...dragBox.initial };
|
|
|
+ dragBox.value.initial = initial || dragBox.value.initial;
|
|
|
+ if (reset)
|
|
|
+ dragBox.value = { ...dragBox.value, ...dragBox.value.initial };
|
|
|
};
|
|
|
|
|
|
- // eslint-disable-next-line
|
|
|
const resetBoxPosition = preventUpdate => {
|
|
|
setInitialBox(null, true);
|
|
|
- dragBox.latest.top = dragBox.top;
|
|
|
- dragBox.latest.left = dragBox.left;
|
|
|
- // if (!preventUpdate && typeof onDragBoxUpdate === "function")
|
|
|
- // onDragBoxUpdate();
|
|
|
+ dragBox.value.latest.top = dragBox.value.top;
|
|
|
+ dragBox.value.latest.left = dragBox.value.left;
|
|
|
+ if (!preventUpdate && typeof onDragBoxUpdate.value === "function")
|
|
|
+ onDragBoxUpdate.value();
|
|
|
};
|
|
|
|
|
|
const onDragBox = e => {
|
|
@@ -44,16 +45,20 @@ export default () => {
|
|
|
|
|
|
if (e1IsTouch) {
|
|
|
// Handle double click from touch (if this method is twice in a row within one second)
|
|
|
- if (Date.now() - dragBox.lastTappedDate <= 1000) {
|
|
|
+ if (Date.now() - dragBox.value.lastTappedDate <= 1000) {
|
|
|
resetBoxPosition();
|
|
|
- dragBox.lastTappedDate = 0;
|
|
|
+ dragBox.value.lastTappedDate = 0;
|
|
|
return;
|
|
|
}
|
|
|
- dragBox.lastTappedDate = Date.now();
|
|
|
+ dragBox.value.lastTappedDate = Date.now();
|
|
|
}
|
|
|
|
|
|
- dragBox.pos3 = e1IsTouch ? e1.changedTouches[0].clientX : e1.clientX;
|
|
|
- dragBox.pos4 = e1IsTouch ? e1.changedTouches[0].clientY : e1.clientY;
|
|
|
+ dragBox.value.pos3 = e1IsTouch
|
|
|
+ ? e1.changedTouches[0].clientX
|
|
|
+ : e1.clientX;
|
|
|
+ dragBox.value.pos4 = e1IsTouch
|
|
|
+ ? e1.changedTouches[0].clientY
|
|
|
+ : e1.clientY;
|
|
|
|
|
|
document.onmousemove = document.ontouchmove = e => {
|
|
|
const e2 = e || window.event;
|
|
@@ -69,20 +74,28 @@ export default () => {
|
|
|
: e2.clientY;
|
|
|
|
|
|
// calculate the new cursor position:
|
|
|
- dragBox.pos1 = dragBox.pos3 - e2ClientX;
|
|
|
- dragBox.pos2 = dragBox.pos4 - e2ClientY;
|
|
|
- dragBox.pos3 = e2ClientX;
|
|
|
- dragBox.pos4 = e2ClientY;
|
|
|
+ dragBox.value.pos1 = dragBox.value.pos3 - e2ClientX;
|
|
|
+ dragBox.value.pos2 = dragBox.value.pos4 - e2ClientY;
|
|
|
+ dragBox.value.pos3 = e2ClientX;
|
|
|
+ dragBox.value.pos4 = e2ClientY;
|
|
|
// set the element's new position:
|
|
|
- dragBox.top -= dragBox.pos2;
|
|
|
- dragBox.left -= dragBox.pos1;
|
|
|
-
|
|
|
- if (dragBox.top > document.body.clientHeight - dragBox.height)
|
|
|
- dragBox.top = document.body.clientHeight - dragBox.height;
|
|
|
- if (dragBox.top < 0) dragBox.top = 0;
|
|
|
- if (dragBox.left > document.body.clientWidth - dragBox.width)
|
|
|
- dragBox.left = document.body.clientWidth - dragBox.width;
|
|
|
- if (dragBox.left < 0) dragBox.left = 0;
|
|
|
+ dragBox.value.top -= dragBox.value.pos2;
|
|
|
+ dragBox.value.left -= dragBox.value.pos1;
|
|
|
+
|
|
|
+ if (
|
|
|
+ dragBox.value.top >
|
|
|
+ document.body.clientHeight - dragBox.value.height
|
|
|
+ )
|
|
|
+ dragBox.value.top =
|
|
|
+ document.body.clientHeight - dragBox.value.height;
|
|
|
+ if (dragBox.value.top < 0) dragBox.value.top = 0;
|
|
|
+ if (
|
|
|
+ dragBox.value.left >
|
|
|
+ document.body.clientWidth - dragBox.value.width
|
|
|
+ )
|
|
|
+ dragBox.value.left =
|
|
|
+ document.body.clientWidth - dragBox.value.width;
|
|
|
+ if (dragBox.value.left < 0) dragBox.value.left = 0;
|
|
|
};
|
|
|
|
|
|
document.onmouseup = document.ontouchend = () => {
|
|
@@ -91,28 +104,39 @@ export default () => {
|
|
|
document.onmousemove = null;
|
|
|
document.ontouchmove = null;
|
|
|
|
|
|
- // if (typeof onDragBoxUpdate === "function") onDragBoxUpdate();
|
|
|
+ if (typeof onDragBoxUpdate.value === "function")
|
|
|
+ onDragBoxUpdate.value();
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const onWindowResizeDragBox = () => {
|
|
|
- if (dragBox.debounceTimeout) clearTimeout(dragBox.debounceTimeout);
|
|
|
+ if (dragBox.value.debounceTimeout)
|
|
|
+ clearTimeout(dragBox.value.debounceTimeout);
|
|
|
|
|
|
- dragBox.debounceTimeout = setTimeout(() => {
|
|
|
+ dragBox.value.debounceTimeout = setTimeout(() => {
|
|
|
if (
|
|
|
- dragBox.top === dragBox.latest.top &&
|
|
|
- dragBox.left === dragBox.latest.left
|
|
|
+ dragBox.value.top === dragBox.value.latest.top &&
|
|
|
+ dragBox.value.left === dragBox.value.latest.left
|
|
|
)
|
|
|
resetBoxPosition();
|
|
|
else {
|
|
|
- if (dragBox.top > document.body.clientHeight - dragBox.height)
|
|
|
- dragBox.top = document.body.clientHeight - dragBox.height;
|
|
|
- if (dragBox.top < 0) dragBox.top = 0;
|
|
|
- if (dragBox.left > document.body.clientWidth - dragBox.width)
|
|
|
- dragBox.left = document.body.clientWidth - dragBox.width;
|
|
|
- if (dragBox.left < 0) dragBox.left = 0;
|
|
|
-
|
|
|
- // if (typeof onDragBoxUpdate === "function") onDragBoxUpdate();
|
|
|
+ if (
|
|
|
+ dragBox.value.top >
|
|
|
+ document.body.clientHeight - dragBox.value.height
|
|
|
+ )
|
|
|
+ dragBox.value.top =
|
|
|
+ document.body.clientHeight - dragBox.value.height;
|
|
|
+ if (dragBox.value.top < 0) dragBox.value.top = 0;
|
|
|
+ if (
|
|
|
+ dragBox.value.left >
|
|
|
+ document.body.clientWidth - dragBox.value.width
|
|
|
+ )
|
|
|
+ dragBox.value.left =
|
|
|
+ document.body.clientWidth - dragBox.value.width;
|
|
|
+ if (dragBox.value.left < 0) dragBox.value.left = 0;
|
|
|
+
|
|
|
+ if (typeof onDragBoxUpdate.value === "function")
|
|
|
+ onDragBoxUpdate.value();
|
|
|
}
|
|
|
}, 50);
|
|
|
};
|
|
@@ -124,13 +148,16 @@ export default () => {
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener("resize", onWindowResizeDragBox);
|
|
|
- if (dragBox.debounceTimeout) clearTimeout(dragBox.debounceTimeout);
|
|
|
+ if (dragBox.value.debounceTimeout)
|
|
|
+ clearTimeout(dragBox.value.debounceTimeout);
|
|
|
});
|
|
|
+
|
|
|
return {
|
|
|
dragBox,
|
|
|
setInitialBox,
|
|
|
onDragBox,
|
|
|
resetBoxPosition,
|
|
|
- onWindowResizeDragBox
|
|
|
+ onWindowResizeDragBox,
|
|
|
+ onDragBoxUpdate
|
|
|
};
|
|
|
};
|