@havue/use-gesture-2-mouse
Version:
Gesture recognition hook for Vue3
505 lines (504 loc) • 19 kB
JavaScript
(function(global2, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["use-gesture-2-mouse"] = {}, global2.Vue));
})(this, function(exports2, vue) {
"use strict";
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
function getDefaultExportFromCjs(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
function isObject$3(value) {
var type = typeof value;
return value != null && (type == "object" || type == "function");
}
var isObject_1 = isObject$3;
var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
var _freeGlobal = freeGlobal$1;
var freeGlobal = _freeGlobal;
var freeSelf = typeof self == "object" && self && self.Object === Object && self;
var root$2 = freeGlobal || freeSelf || Function("return this")();
var _root = root$2;
var root$1 = _root;
var now$1 = function() {
return root$1.Date.now();
};
var now_1 = now$1;
var reWhitespace = /\s/;
function trimmedEndIndex$1(string) {
var index = string.length;
while (index-- && reWhitespace.test(string.charAt(index))) {
}
return index;
}
var _trimmedEndIndex = trimmedEndIndex$1;
var trimmedEndIndex = _trimmedEndIndex;
var reTrimStart = /^\s+/;
function baseTrim$1(string) {
return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
}
var _baseTrim = baseTrim$1;
var root = _root;
var Symbol$3 = root.Symbol;
var _Symbol = Symbol$3;
var Symbol$2 = _Symbol;
var objectProto$1 = Object.prototype;
var hasOwnProperty = objectProto$1.hasOwnProperty;
var nativeObjectToString$1 = objectProto$1.toString;
var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
function getRawTag$1(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
try {
value[symToStringTag$1] = void 0;
var unmasked = true;
} catch (e) {
}
var result = nativeObjectToString$1.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag$1] = tag;
} else {
delete value[symToStringTag$1];
}
}
return result;
}
var _getRawTag = getRawTag$1;
var objectProto = Object.prototype;
var nativeObjectToString = objectProto.toString;
function objectToString$1(value) {
return nativeObjectToString.call(value);
}
var _objectToString = objectToString$1;
var Symbol$1 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
function baseGetTag$1(value) {
if (value == null) {
return value === void 0 ? undefinedTag : nullTag;
}
return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
}
var _baseGetTag = baseGetTag$1;
function isObjectLike$1(value) {
return value != null && typeof value == "object";
}
var isObjectLike_1 = isObjectLike$1;
var baseGetTag = _baseGetTag, isObjectLike = isObjectLike_1;
var symbolTag = "[object Symbol]";
function isSymbol$1(value) {
return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
}
var isSymbol_1 = isSymbol$1;
var baseTrim = _baseTrim, isObject$2 = isObject_1, isSymbol = isSymbol_1;
var NAN = 0 / 0;
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
var reIsBinary = /^0b[01]+$/i;
var reIsOctal = /^0o[0-7]+$/i;
var freeParseInt = parseInt;
function toNumber$1(value) {
if (typeof value == "number") {
return value;
}
if (isSymbol(value)) {
return NAN;
}
if (isObject$2(value)) {
var other = typeof value.valueOf == "function" ? value.valueOf() : value;
value = isObject$2(other) ? other + "" : other;
}
if (typeof value != "string") {
return value === 0 ? value : +value;
}
value = baseTrim(value);
var isBinary = reIsBinary.test(value);
return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
}
var toNumber_1 = toNumber$1;
var isObject$1 = isObject_1, now = now_1, toNumber = toNumber_1;
var FUNC_ERROR_TEXT$1 = "Expected a function";
var nativeMax = Math.max, nativeMin = Math.min;
function debounce$1(func, wait, options) {
var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
if (typeof func != "function") {
throw new TypeError(FUNC_ERROR_TEXT$1);
}
wait = toNumber(wait) || 0;
if (isObject$1(options)) {
leading = !!options.leading;
maxing = "maxWait" in options;
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
trailing = "trailing" in options ? !!options.trailing : trailing;
}
function invokeFunc(time) {
var args = lastArgs, thisArg = lastThis;
lastArgs = lastThis = void 0;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
lastInvokeTime = time;
timerId = setTimeout(timerExpired, wait);
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
}
function shouldInvoke(time) {
var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
}
function timerExpired() {
var time = now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
timerId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timerId = void 0;
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = void 0;
return result;
}
function cancel() {
if (timerId !== void 0) {
clearTimeout(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = void 0;
}
function flush() {
return timerId === void 0 ? result : trailingEdge(now());
}
function debounced() {
var time = now(), isInvoking = shouldInvoke(time);
lastArgs = arguments;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timerId === void 0) {
return leadingEdge(lastCallTime);
}
if (maxing) {
clearTimeout(timerId);
timerId = setTimeout(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === void 0) {
timerId = setTimeout(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
var debounce_1 = debounce$1;
var debounce = debounce_1, isObject = isObject_1;
var FUNC_ERROR_TEXT = "Expected a function";
function throttle(func, wait, options) {
var leading = true, trailing = true;
if (typeof func != "function") {
throw new TypeError(FUNC_ERROR_TEXT);
}
if (isObject(options)) {
leading = "leading" in options ? !!options.leading : leading;
trailing = "trailing" in options ? !!options.trailing : trailing;
}
return debounce(func, wait, {
"leading": leading,
"maxWait": wait,
"trailing": trailing
});
}
var throttle_1 = throttle;
const throttle$1 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
function useGestrue2Mouse(target, options) {
let operateBoxRef = vue.ref();
if (target) {
operateBoxRef = vue.computed(() => {
return vue.isRef(target) ? vue.toValue(target) : target;
});
}
const rect = vue.computed(() => {
const sizeOptions = (options == null ? void 0 : options.TargetRealSize) || void 0;
return vue.isRef(sizeOptions) ? vue.toValue(sizeOptions) : sizeOptions;
});
const isThrottleMoveEvent = typeof (options == null ? void 0 : options.throttle) === "object";
const _throttleOptions = vue.computed(() => {
const throttleOptions = (options == null ? void 0 : options.throttle) || {};
return Object.assign(
{
wait: 0,
leading: true,
trailing: false
},
throttleOptions
);
});
let touchType = void 0;
let touchMovingCount = 0;
let touchStartPos = void 0;
let lastTouchPos = void 0;
let resetLastTouchPosTimer = null;
function handleTouchStart(e) {
var _a, _b, _c, _d;
resetLastTouchPosTimer && clearTimeout(resetLastTouchPosTimer);
resetLastTouchPosTimer = null;
if (!operateBoxRef.value || touchMovingCount > 0) {
return;
}
e.preventDefault();
document.body.addEventListener("touchmove", handleTouchMove);
document.body.addEventListener("touchend", handleTouchEnd);
const touchCount = e.touches.length;
touchType = touchCount === 1 ? "single" : touchCount === 2 ? "double" : void 0;
switch (touchType) {
case "single": {
const { clientX, clientY } = e.touches[0];
const pos = transformMousePosToTargetPos(
clientX,
clientY,
operateBoxRef.value,
(_a = rect.value) == null ? void 0 : _a.width,
(_b = rect.value) == null ? void 0 : _b.height
);
if (lastTouchPos && Math.abs(lastTouchPos.x - pos.x) < 30 && Math.abs(lastTouchPos.y - pos.y) < 30) {
touchStartPos = lastTouchPos;
} else {
touchStartPos = pos;
lastTouchPos = pos;
}
break;
}
case "double": {
const [{ clientX: x1, clientY: y1 }, { clientX: x2, clientY: y2 }] = e.touches;
const x = (x1 + x2) / 2;
const y = (y1 + y2) / 2;
const pos = transformMousePosToTargetPos(x, y, operateBoxRef.value, (_c = rect.value) == null ? void 0 : _c.width, (_d = rect.value) == null ? void 0 : _d.height);
touchStartPos = pos;
lastTouchPos = pos;
break;
}
}
}
const touchMoveFn = (e) => {
var _a, _b, _c, _d;
if (!operateBoxRef.value) {
return;
}
switch (touchType) {
case "single": {
const { clientX, clientY } = e.touches[0];
const pos = transformMousePosToTargetPos(
clientX,
clientY,
operateBoxRef.value,
(_a = rect.value) == null ? void 0 : _a.width,
(_b = rect.value) == null ? void 0 : _b.height
);
lastTouchPos = pos;
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "left");
break;
}
case "double": {
const [{ clientX: x1, clientY: y1 }, { clientX: x2, clientY: y2 }] = e.touches;
const x = (x1 + x2) / 2;
const y = (y1 + y2) / 2;
const pos = transformMousePosToTargetPos(x, y, operateBoxRef.value, (_c = rect.value) == null ? void 0 : _c.width, (_d = rect.value) == null ? void 0 : _d.height);
let deltaY = 0;
if (lastTouchPos) {
deltaY = lastTouchPos.y - pos.y;
}
lastTouchPos = pos;
(options == null ? void 0 : options.onMouseWheel) && options.onMouseWheel(touchStartPos, deltaY);
break;
}
}
};
const onTouchMove = isThrottleMoveEvent ? throttle$1(touchMoveFn, _throttleOptions.value.wait || 0, {
leading: _throttleOptions.value.leading,
trailing: _throttleOptions.value.trailing
}) : touchMoveFn;
function handleTouchMove(e) {
e.preventDefault();
if (!touchType || !operateBoxRef.value) {
return;
}
touchMovingCount++;
onTouchMove(e);
}
function handleTouchEnd() {
document.body.removeEventListener("touchmove", handleTouchMove);
document.body.removeEventListener("touchend", handleTouchEnd);
if (!operateBoxRef.value) {
return;
}
if (lastTouchPos) {
const pos = lastTouchPos;
switch (touchType) {
case "single": {
if (touchMovingCount <= 2) {
Promise.resolve((options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "left")).then(
() => (options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos)
);
} else {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos);
}
break;
}
case "double": {
if (touchMovingCount <= 2) {
Promise.resolve((options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "right")).then(
() => (options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos)
);
} else {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos);
}
break;
}
}
}
touchMovingCount = 0;
touchType = void 0;
touchStartPos = void 0;
resetLastTouchPosTimer = setTimeout(() => {
lastTouchPos = void 0;
resetLastTouchPosTimer = null;
}, 300);
}
let isMouseDown = false;
function handleMouseDown(e) {
e.preventDefault();
if (!operateBoxRef.value) {
return;
}
document.body.addEventListener("mousemove", handleMouseMove);
document.body.addEventListener("mouseup", handleMouseUp);
isMouseDown = true;
handleMouseEvent(e);
}
const mouseMoveFn = handleMouseEvent;
const onMouseMove = isThrottleMoveEvent ? throttle$1(mouseMoveFn, _throttleOptions.value.wait, {
leading: _throttleOptions.value.leading,
trailing: _throttleOptions.value.trailing
}) : mouseMoveFn;
function handleMouseMove(e) {
if (!operateBoxRef.value || !isMouseDown) {
return;
}
onMouseMove(e);
}
function handleMouseUp(e) {
document.body.removeEventListener("mousemove", handleMouseMove);
document.body.removeEventListener("mouseup", handleMouseUp);
if (!operateBoxRef.value) {
return;
}
isMouseDown = false;
handleMouseEvent(e);
}
function handleMouseEvent(e) {
var _a, _b;
if (!operateBoxRef.value) {
return;
}
const { clientX, clientY } = e;
const pos = transformMousePosToTargetPos(
clientX,
clientY,
operateBoxRef.value,
(_a = rect.value) == null ? void 0 : _a.width,
(_b = rect.value) == null ? void 0 : _b.height
);
if ((e.buttons & 2) !== 0) {
e.preventDefault();
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "right");
} else if ((e.buttons & 1) !== 0) {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "left");
} else if ((e.buttons & 4) !== 0) {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos, "middle");
} else {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos);
}
}
function handleWheel(e) {
var _a, _b;
e.preventDefault();
if (!operateBoxRef.value) {
return;
}
const { clientX, clientY } = e;
const pos = transformMousePosToTargetPos(
clientX,
clientY,
operateBoxRef.value,
(_a = rect.value) == null ? void 0 : _a.width,
(_b = rect.value) == null ? void 0 : _b.height
);
Promise.resolve((options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos)).then(() => (options == null ? void 0 : options.onMouseWheel) && options.onMouseWheel(pos, e.deltaY)).then(() => {
(options == null ? void 0 : options.onMouseEvent) && options.onMouseEvent(pos);
});
}
function preventDefaultEvent(event) {
event.preventDefault();
}
vue.watch(
() => operateBoxRef.value,
() => {
if (!operateBoxRef.value) {
return;
}
operateBoxRef.value.addEventListener("touchstart", handleTouchStart);
operateBoxRef.value.addEventListener("mousedown", handleMouseDown);
operateBoxRef.value.addEventListener("wheel", handleWheel);
operateBoxRef.value.addEventListener("contextmenu", preventDefaultEvent);
}
);
vue.onBeforeUnmount(() => {
if (!operateBoxRef.value) {
return;
}
operateBoxRef.value.removeEventListener("touchstart", handleTouchStart);
document.body.removeEventListener("touchmove", handleTouchMove);
document.body.removeEventListener("touchend", handleTouchEnd);
operateBoxRef.value.removeEventListener("mousedown", handleMouseDown);
document.body.removeEventListener("mousemove", handleMouseMove);
document.body.removeEventListener("mouseup", handleMouseUp);
operateBoxRef.value.removeEventListener("wheel", handleWheel);
operateBoxRef.value.removeEventListener("contextmenu", preventDefaultEvent);
});
return {
operateBoxRef
};
}
function transformMousePosToTargetPos(x, y, el, targetWidth, targetHeight) {
const rect = el == null ? void 0 : el.getBoundingClientRect();
if (!rect) {
return { elX: 0, elY: 0, x: 0, y: 0 };
}
const { top, left, width: elWidth, height: elHeight } = rect;
targetWidth = targetWidth || elWidth;
targetHeight = targetHeight || elHeight;
let elX = x;
let elY = y;
elX = x < left ? 0 : x > left + elWidth ? elWidth : x - left;
elY = y < top ? 0 : y > top + elHeight ? elHeight : y - top;
const scaleX = elWidth !== 0 ? targetWidth / elWidth : 0;
const scaleY = elHeight !== 0 ? targetHeight / elHeight : 0;
const targetX = elX * scaleX;
const targetY = elY * scaleY;
return {
elX,
elY,
x: Math.round(targetX),
y: Math.round(targetY)
};
}
exports2.useGestrue2Mouse = useGestrue2Mouse;
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});