use-canvas-drag 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# use-canvas-drag
+
+Vue3 画布拖拽组合式函数，支持多种鼠标触发方式。
+
+## 安装
+
+\`\`\`bash
+npm install use-canvas-drag
+\`\`\`
+
+## 使用
+
+\`\`\`typescript
+import { useCanvasDrag } from 'use-canvas-drag'
+
+const { isPanning, handlers, stopPan } = useCanvasDrag({
+  container: '#canvas',
+  mode: 'right', // 可选: 'left' | 'right' | 'middle' | 'shift-left' | 'ctrl-left' | 'alt-left'
+})
+\`\`\`
+
+## API
+
+### useCanvasDrag(options)
+
+| 参数        | 类型                                      | 说明                   |
+| ----------- | ----------------------------------------- | ---------------------- |
+| container   | string\| HTMLElement \| () => HTMLElement | 画布容器               |
+| mode        | DragTrigger\| DragTrigger[]               | 触发方式，默认 'right' |
+| enabled     | boolean                                   | 是否启用，默认 true    |
+| onStartDrag | (e: MouseEvent) => void                   | 开始拖拽回调           |
+| onDrag      | ({x, y}) => void                          | 拖拽中回调             |
+| onEndDrag   | () => void                                | 结束拖拽回调           |
+
+## License
+
+MIT

package/dist/index.d.ts

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

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(e){typeof define==`function`&&define.amd?define([],e):e()})(function(){});

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export type { DragButtonConfig, CanvasDragOptions, DragTrigger } from './useCanvasDrag';

package/dist/src/useCanvasDrag.d.ts

@@ -0,0 +1,37 @@
+export interface DragButtonConfig {
+    button?: number;
+    modifiers?: {
+        shift?: boolean;
+        ctrl?: boolean;
+        alt?: boolean;
+        meta?: boolean;
+    };
+}
+type ModeValue = 'right' | 'middle' | 'left' | 'shift-left' | 'ctrl-left' | 'alt-left';
+export type DragTrigger = ModeValue | DragButtonConfig;
+export interface CanvasDragOptions {
+    /**拖拽触发键列表 */
+    mode?: DragTrigger | DragTrigger[];
+    /** 画布容器 */
+    container: string | HTMLElement | (() => HTMLElement | null);
+    /** 是否启用拖拽 */
+    enabled?: boolean;
+    /** 拖拽开始时触发 */
+    onStartDrag?: (e: MouseEvent) => void;
+    /** 拖拽中触发 */
+    onDrag?: (detail: {
+        x: number;
+        y: number;
+    }) => void;
+    /** 拖拽结束时触发 */
+    onEndDrag?: () => void;
+}
+export declare function useCanvasDrag(options: CanvasDragOptions): {
+    isPanning: import('vue').Ref<boolean, boolean>;
+    handlers: {
+        onMouseDown: (e: MouseEvent) => void;
+        onContextMenu: (e: MouseEvent) => void;
+    };
+    stopPan: () => void;
+};
+export {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "use-canvas-drag",
+  "version": "0.1.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"
+  }
+},
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue3",
+    "canvas",
+    "drag",
+    "pan",
+    "use-canvas-drag"
+  ],
+  "author": "lrb",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^4.5.0",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.2.8"
+  }
+}