use-canvas-drag 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +23 -34
- package/dist/index.umd.js +1 -1
- package/dist/src/useCanvasDrag.d.ts +0 -2
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -26,66 +26,55 @@ function s(i) {
|
|
|
26
26
|
y: 0,
|
|
27
27
|
scrollLeft: 0,
|
|
28
28
|
scrollTop: 0
|
|
29
|
-
}), m =
|
|
30
|
-
x: 0,
|
|
31
|
-
y: 0
|
|
32
|
-
}), h = e(() => o(Array.isArray(d) ? d : d ? [d] : void 0)), g = () => typeof a == "string" ? document.querySelector(a) : typeof a == "function" ? a() : a instanceof HTMLElement ? a : null, _ = (e) => h.value.some((t) => {
|
|
29
|
+
}), m = e(() => o(Array.isArray(d) ? d : d ? [d] : void 0)), h = () => typeof a == "string" ? document.querySelector(a) : typeof a == "function" ? a() : a instanceof HTMLElement ? a : null, g = (e) => m.value.some((t) => {
|
|
33
30
|
if (t.button !== void 0 && t.button !== e.button) return !1;
|
|
34
31
|
if (t.modifiers) {
|
|
35
32
|
let n = t.modifiers;
|
|
36
33
|
if (n.shift && !e.shiftKey || n.ctrl && !e.ctrlKey || n.alt && !e.altKey || n.meta && !e.metaKey) return !1;
|
|
37
34
|
}
|
|
38
35
|
return !0;
|
|
39
|
-
}),
|
|
40
|
-
if (!s || !
|
|
41
|
-
let t =
|
|
36
|
+
}), _ = (e) => {
|
|
37
|
+
if (!s || !g(e)) return;
|
|
38
|
+
let t = h();
|
|
42
39
|
t && (p.value = {
|
|
43
40
|
x: e.clientX,
|
|
44
41
|
y: e.clientY,
|
|
45
42
|
scrollLeft: t.scrollLeft,
|
|
46
43
|
scrollTop: t.scrollTop
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
y: e.clientY
|
|
50
|
-
}, f.value = !0, t.style.cursor = "grabbing", t.style.userSelect = "none", e.preventDefault(), c?.(e), document.addEventListener("mousemove", y), document.addEventListener("mouseup", b));
|
|
51
|
-
}, y = (e) => {
|
|
44
|
+
}, f.value = !0, t.style.cursor = "grabbing", t.style.userSelect = "none", e.preventDefault(), c?.(e), document.addEventListener("mousemove", v), document.addEventListener("mouseup", y));
|
|
45
|
+
}, v = (e) => {
|
|
52
46
|
if (!f.value) return;
|
|
53
|
-
let t =
|
|
47
|
+
let t = h();
|
|
54
48
|
if (!t) return;
|
|
55
|
-
let n = e.clientX - p.value.x, r = e.clientY - p.value.y
|
|
56
|
-
|
|
57
|
-
x: e.clientX,
|
|
58
|
-
y: e.clientY
|
|
59
|
-
}, t.scrollLeft = p.value.scrollLeft - n, t.scrollTop = p.value.scrollTop - r, l?.({
|
|
49
|
+
let n = e.clientX - p.value.x, r = e.clientY - p.value.y;
|
|
50
|
+
t.scrollLeft = p.value.scrollLeft - n, t.scrollTop = p.value.scrollTop - r, l?.({
|
|
60
51
|
x: n,
|
|
61
|
-
y: r
|
|
62
|
-
deltaX: i,
|
|
63
|
-
deltaY: a
|
|
52
|
+
y: r
|
|
64
53
|
});
|
|
65
|
-
},
|
|
54
|
+
}, y = (e) => {
|
|
66
55
|
if (!f.value) return;
|
|
67
56
|
f.value = !1;
|
|
68
|
-
let t =
|
|
69
|
-
t && (t.style.cursor = "auto", t.style.userSelect = ""), document.removeEventListener("mousemove",
|
|
70
|
-
},
|
|
71
|
-
!s || !
|
|
72
|
-
},
|
|
57
|
+
let t = h();
|
|
58
|
+
t && (t.style.cursor = "auto", t.style.userSelect = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y), u?.();
|
|
59
|
+
}, b = (e) => {
|
|
60
|
+
!s || !g(e) || e.preventDefault();
|
|
61
|
+
}, x = () => {
|
|
73
62
|
if (!f.value) return;
|
|
74
63
|
f.value = !1;
|
|
75
|
-
let e =
|
|
76
|
-
e && (e.style.cursor = "auto", e.style.userSelect = ""), document.removeEventListener("mousemove",
|
|
64
|
+
let e = h();
|
|
65
|
+
e && (e.style.cursor = "auto", e.style.userSelect = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y), u?.();
|
|
77
66
|
};
|
|
78
67
|
return r(() => s, (e) => {
|
|
79
|
-
!e && f.value &&
|
|
68
|
+
!e && f.value && x();
|
|
80
69
|
}), t(() => {
|
|
81
|
-
document.removeEventListener("mousemove",
|
|
70
|
+
document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y);
|
|
82
71
|
}), {
|
|
83
72
|
isPanning: f,
|
|
84
73
|
handlers: {
|
|
85
|
-
onMouseDown:
|
|
86
|
-
onContextMenu:
|
|
74
|
+
onMouseDown: _,
|
|
75
|
+
onContextMenu: b
|
|
87
76
|
},
|
|
88
|
-
stopPan:
|
|
77
|
+
stopPan: x
|
|
89
78
|
};
|
|
90
79
|
}
|
|
91
80
|
//#endregion
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UseCanvasDrag={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=[`right`],r={left:{button:0},right:{button:2},middle:{button:1},"shift-left":{button:0,modifiers:{shift:!0}},"ctrl-left":{button:0,modifiers:{ctrl:!0}},"alt-left":{button:0,modifiers:{alt:!0}}};function i(e){return e?e.map(e=>typeof e==`string`?r[e]??{button:-1}:e):n.map(e=>r[e])}function a(e){let{container:n,enabled:r=!0,onStartDrag:a,onDrag:o,onEndDrag:s,mode:c}=e,l=(0,t.ref)(!1),u=(0,t.ref)({x:0,y:0,scrollLeft:0,scrollTop:0}),d=(0,t.
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UseCanvasDrag={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=[`right`],r={left:{button:0},right:{button:2},middle:{button:1},"shift-left":{button:0,modifiers:{shift:!0}},"ctrl-left":{button:0,modifiers:{ctrl:!0}},"alt-left":{button:0,modifiers:{alt:!0}}};function i(e){return e?e.map(e=>typeof e==`string`?r[e]??{button:-1}:e):n.map(e=>r[e])}function a(e){let{container:n,enabled:r=!0,onStartDrag:a,onDrag:o,onEndDrag:s,mode:c}=e,l=(0,t.ref)(!1),u=(0,t.ref)({x:0,y:0,scrollLeft:0,scrollTop:0}),d=(0,t.computed)(()=>i(Array.isArray(c)?c:c?[c]:void 0)),f=()=>typeof n==`string`?document.querySelector(n):typeof n==`function`?n():n instanceof HTMLElement?n:null,p=e=>d.value.some(t=>{if(t.button!==void 0&&t.button!==e.button)return!1;if(t.modifiers){let n=t.modifiers;if(n.shift&&!e.shiftKey||n.ctrl&&!e.ctrlKey||n.alt&&!e.altKey||n.meta&&!e.metaKey)return!1}return!0}),m=e=>{if(!r||!p(e))return;let t=f();t&&(u.value={x:e.clientX,y:e.clientY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop},l.value=!0,t.style.cursor=`grabbing`,t.style.userSelect=`none`,e.preventDefault(),a?.(e),document.addEventListener(`mousemove`,h),document.addEventListener(`mouseup`,g))},h=e=>{if(!l.value)return;let t=f();if(!t)return;let n=e.clientX-u.value.x,r=e.clientY-u.value.y;t.scrollLeft=u.value.scrollLeft-n,t.scrollTop=u.value.scrollTop-r,o?.({x:n,y:r})},g=e=>{if(!l.value)return;l.value=!1;let t=f();t&&(t.style.cursor=`auto`,t.style.userSelect=``),document.removeEventListener(`mousemove`,h),document.removeEventListener(`mouseup`,g),s?.()},_=e=>{!r||!p(e)||e.preventDefault()},v=()=>{if(!l.value)return;l.value=!1;let e=f();e&&(e.style.cursor=`auto`,e.style.userSelect=``),document.removeEventListener(`mousemove`,h),document.removeEventListener(`mouseup`,g),s?.()};return(0,t.watch)(()=>r,e=>{!e&&l.value&&v()}),(0,t.onUnmounted)(()=>{document.removeEventListener(`mousemove`,h),document.removeEventListener(`mouseup`,g)}),{isPanning:l,handlers:{onMouseDown:m,onContextMenu:_},stopPan:v}}e.useCanvasDrag=a});
|