use-canvas-drag 0.2.0 → 0.2.1

package/dist/index.esm.js

@@ -0,0 +1,81 @@
+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 = 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;
+	}), _ = (e) => {
+		if (!s || !g(e)) return;
+		let t = h();
+		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) => {
+		if (!f.value) return;
+		let t = h();
+		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?.({
+			x: n,
+			y: r
+		});
+	}, y = (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 = () => {
+		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?.();
+	};
+	return r(() => s, (e) => {
+		!e && f.value && x();
+	}), t(() => {
+		document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", y);
+	}), {
+		isPanning: f,
+		handlers: {
+			onMouseDown: _,
+			onContextMenu: b
+		},
+		stopPan: x
+	};
+}
+//#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.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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-canvas-drag",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Vue3 画布拖拽组合式函数，支持多种触发方式",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.esm.js",