use-canvas-drag 0.3.0 → 0.4.0

package/dist/index.esm.js

@@ -26,66 +26,55 @@ function s(i) {
 		y: 0,
 		scrollLeft: 0,
 		scrollTop: 0
-	}), m = n({
-		x: 0,
-		y: 0
-	}), 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) => {
+	}), 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) => {
 		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;
-	}), v = (e) => {
-		if (!s || !_(e)) return;
-		let t = g();
+	}), _ = (e) => {
+		if (!s || !g(e)) return;
+		let t = h();
 		t && (p.value = {
 			x: e.clientX,
 			y: e.clientY,
 			scrollLeft: t.scrollLeft,
 			scrollTop: t.scrollTop
-		}, m.value = {
-			x: e.clientX,
-			y: e.clientY
-		}, f.value = !0, t.style.cursor = "grabbing", t.style.userSelect = "none", e.preventDefault(), c?.(e), document.addEventListener("mousemove", y), document.addEventListener("mouseup", b));
-	}, y = (e) => {
+		}, f.value = !0, t.style.cursor = "grabbing", t.style.userSelect = "none", e.preventDefault(), c?.(e), document.addEventListener("mousemove", v), document.addEventListener("mouseup", y));
+	}, v = (e) => {
 		if (!f.value) return;
-		let t = g();
+		let t = h();
 		if (!t) return;
-		let n = e.clientX - p.value.x, r = e.clientY - p.value.y, i = e.clientX - m.value.x, a = e.clientY - m.value.y;
-		m.value = {
-			x: e.clientX,
-			y: e.clientY
-		}, t.scrollLeft = p.value.scrollLeft - n, t.scrollTop = p.value.scrollTop - r, l?.({
+		let n = e.clientX - p.value.x, r = e.clientY - p.value.y;
+		t.scrollLeft = p.value.scrollLeft - n, t.scrollTop = p.value.scrollTop - r, l?.({
 			x: n,
-			y: r,
-			deltaX: i,
-			deltaY: a
+			y: r
 		});
-	}, b = (e) => {
+	}, y = (e) => {
 		if (!f.value) return;
 		f.value = !1;
-		let t = g();
-		t && (t.style.cursor = "auto", t.style.userSelect = ""), document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b), u?.();
-	}, x = (e) => {
-		!s || !_(e) || e.preventDefault();
-	}, S = () => {
+		let t = h();
+		t && (t.style.cursor = "auto", t.style.userSelect = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y), u?.();
+	}, b = (e) => {
+		!s || !g(e) || e.preventDefault();
+	}, x = () => {
 		if (!f.value) return;
 		f.value = !1;
-		let e = g();
-		e && (e.style.cursor = "auto", e.style.userSelect = ""), document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b), u?.();
+		let e = h();
+		e && (e.style.cursor = "auto", e.style.userSelect = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y), u?.();
 	};
 	return r(() => s, (e) => {
-		!e && f.value && S();
+		!e && f.value && x();
 	}), t(() => {
-		document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b);
+		document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y);
 	}), {
 		isPanning: f,
 		handlers: {
-			onMouseDown: v,
-			onContextMenu: x
+			onMouseDown: _,
+			onContextMenu: b
 		},
-		stopPan: S
+		stopPan: x
 	};
 }
 //#endregion

package/dist/index.umd.js

@@ -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.ref)({x:0,y:0}),f=(0,t.computed)(()=>i(Array.isArray(c)?c:c?[c]:void 0)),p=()=>typeof n==`string`?document.querySelector(n):typeof n==`function`?n():n instanceof HTMLElement?n:null,m=e=>f.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}),h=e=>{if(!r||!m(e))return;let t=p();t&&(u.value={x:e.clientX,y:e.clientY,scrollLeft:t.scrollLeft,scrollTop:t.scrollTop},d.value={x:e.clientX,y:e.clientY},l.value=!0,t.style.cursor=`grabbing`,t.style.userSelect=`none`,e.preventDefault(),a?.(e),document.addEventListener(`mousemove`,g),document.addEventListener(`mouseup`,_))},g=e=>{if(!l.value)return;let t=p();if(!t)return;let n=e.clientX-u.value.x,r=e.clientY-u.value.y,i=e.clientX-d.value.x,a=e.clientY-d.value.y;d.value={x:e.clientX,y:e.clientY},t.scrollLeft=u.value.scrollLeft-n,t.scrollTop=u.value.scrollTop-r,o?.({x:n,y:r,deltaX:i,deltaY:a})},_=e=>{if(!l.value)return;l.value=!1;let t=p();t&&(t.style.cursor=`auto`,t.style.userSelect=``),document.removeEventListener(`mousemove`,g),document.removeEventListener(`mouseup`,_),s?.()},v=e=>{!r||!m(e)||e.preventDefault()},y=()=>{if(!l.value)return;l.value=!1;let e=p();e&&(e.style.cursor=`auto`,e.style.userSelect=``),document.removeEventListener(`mousemove`,g),document.removeEventListener(`mouseup`,_),s?.()};return(0,t.watch)(()=>r,e=>{!e&&l.value&&y()}),(0,t.onUnmounted)(()=>{document.removeEventListener(`mousemove`,g),document.removeEventListener(`mouseup`,_)}),{isPanning:l,handlers:{onMouseDown:h,onContextMenu:v},stopPan:y}}e.useCanvasDrag=a});
+(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});

package/dist/src/useCanvasDrag.d.ts

@@ -22,8 +22,6 @@ export interface CanvasDragOptions {
     onDrag?: (detail: {
         x: number;
         y: number;
-        deltaX: number;
-        deltaY: number;
     }) => void;
     /** 拖拽结束时触发 */
     onEndDrag?: () => void;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "use-canvas-drag",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Vue3 画布拖拽组合式函数，支持多种触发方式",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.esm.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/src/index.d.ts"
     }
   },
   "files": [
@@ -38,8 +38,5 @@
     "vite-plugin-dts": "^4.5.0",
     "vue": "^3.5.34",
     "vue-tsc": "^3.2.8"
-  },
-  "dependencies": {
-    "use-canvas-drag": "^0.2.1"
   }
 }

package/dist/index.d.ts

@@ -1 +0,0 @@
-export {}