use-canvas-drag 0.2.0 → 0.3.0

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

@@ -0,0 +1,92 @@
+import { computed as e, onUnmounted as t, ref as n, watch as r } from "vue";
+//#region src/useCanvasDrag.ts
+var i = ["right"], a = {
+	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 o(e) {
+	return e ? e.map((e) => typeof e == "string" ? a[e] ?? { button: -1 } : e) : i.map((e) => a[e]);
+}
+function s(i) {
+	let { container: a, enabled: s = !0, onStartDrag: c, onDrag: l, onEndDrag: u, mode: d } = i, f = n(!1), p = n({
+		x: 0,
+		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) => {
+		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();
+		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) => {
+		if (!f.value) return;
+		let t = g();
+		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?.({
+			x: n,
+			y: r,
+			deltaX: i,
+			deltaY: a
+		});
+	}, b = (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 = () => {
+		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?.();
+	};
+	return r(() => s, (e) => {
+		!e && f.value && S();
+	}), t(() => {
+		document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", b);
+	}), {
+		isPanning: f,
+		handlers: {
+			onMouseDown: v,
+			onContextMenu: x
+		},
+		stopPan: S
+	};
+}
+//#endregion
+export { s as useCanvasDrag };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e){typeof define==`function`&&define.amd?define([],e):e()})(function(){});
+(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/index.d.ts

@@ -1 +1,12 @@
+/**
+ * @description 主入口文件
+ * @author lrb
+ * @date 2026-05-11 23:21:24
+ * @lastModifyTime 2026-05-11 23:21:24
+ * @lastModifyAuthor lrb
+ * @license MIT
+ * @copyright lrb
+ * @version 1.0.0
+ */
+export { useCanvasDrag } from './useCanvasDrag';
 export type { DragButtonConfig, CanvasDragOptions, DragTrigger } from './useCanvasDrag';

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.0",
+  "version": "0.3.0",
   "description": "Vue3 画布拖拽组合式函数，支持多种触发方式",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/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/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -38,5 +38,8 @@
     "vite-plugin-dts": "^4.5.0",
     "vue": "^3.5.34",
     "vue-tsc": "^3.2.8"
+  },
+  "dependencies": {
+    "use-canvas-drag": "^0.2.1"
   }
 }