use-canvas-drag 0.2.1 → 0.3.1

package/README.md

@@ -147,8 +147,8 @@ const { isPanning } = useCanvasDrag({
 |------|------|------|
 | `x` | `number` | 相对于起始位置的 X 轴偏移 |
 | `y` | `number` | 相对于起始位置的 Y 轴偏移 |
-| `deltaX` | `number` | 相对于上一帧的 X 轴偏移 |
-| `deltaY` | `number` | 相对于上一帧的 Y 轴偏移 |
+| `deltaX` | `number` | **帧间增量**：相对于上一帧的 X 轴偏移 |
+| `deltaY` | `number` | **帧间增量**：相对于上一帧的 Y 轴偏移 |
 
 ### 返回值
 

package/dist/index.esm.js

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

package/dist/src/useCanvasDrag.d.ts

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

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "use-canvas-drag",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "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"
-  }
-},
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/src/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],

package/dist/index.d.ts

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