feat: add global hooks for move events

- Implemented global hooks for move down and move up events, allowing users to register custom handlers for these events.
- Updated README.md to document the new hook functionality.
- Modified move.ts to execute hooks during move operations.
- Added types for move down and move up hooks in types.ts.
- Updated UMD and ESM builds to include new hook functions.
- Adjusted demo HTML and CSS for better user experience.

Author: yunbookf

README.md

@@ -25,6 +25,7 @@ A lightweight pointer event library for handling mouse, touch, and pen interacti
 - 🔄 Drag and drop with customizable constraints
 - 📐 Resize functionality with border detection
 - 🎨 Global cursor management
+- 🪝 Global hooks for move events
 - 📦 Zero dependencies
 - 🔷 Full TypeScript support
 - 🌐 ESM and UMD bundle support
@@ -172,6 +173,25 @@ element.addEventListener('pointerdown', (e) => {
 });
 ```
 
+#### `addMoveHook(event, hook)` & `removeMoveHook(event, hook)`
+
+Global hooks for move events. These hooks are called for all move operations.
+
+```typescript
+// --- Register global move down hook ---
+pointer.addMoveHook('down', (e, opt) => {
+    console.log('Global move down hook:', e, opt);
+});
+
+// --- Register global move up hook ---
+pointer.addMoveHook('up', (e, opt) => {
+    console.log('Global move up hook:', moveTimes, e, opt);
+});
+
+// --- Remove a hook ---
+pointer.removeMoveHook('down', hookFunction);
+```
+
 #### `resize(e, options)`
 
 Resize event.
@@ -463,6 +483,22 @@ Handler function type for gesture events.
 type TGestureHandler = (dir: TDirection) => void | Promise<void>;
 ```
 
+### `TMoveDownHook`
+
+Global hook function type for move down events.
+
+```typescript
+type TMoveDownHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
+```
+
+### `TMoveUpHook`
+
+Global hook function type for move up events.
+
+```typescript
+type TMoveUpHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
+```
+
 ## Demo
 
 Clone the repository and open `dist/test/index.html` in your browser.

dist/index.esm.js

@@ -88,6 +88,19 @@ function down(oe, opt) {
 }
 
 let isMoving = false;
+const hooks = {
+    'down': [],
+    'up': [],
+};
+function addHook(event, hook) {
+    hooks[event].push(hook);
+}
+function removeHook(event, hook) {
+    const index = hooks[event].indexOf(hook);
+    if (index !== -1) {
+        hooks[event].splice(index, 1);
+    }
+}
 function clampToBorder(val, prevVal, nowMin, nowMax, min, max, offsetMin, offsetMax) {
     let atMin = false, atMax = false;
     if (nowMin <= min) {
@@ -169,6 +182,9 @@ function move(e, opt) {
     let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
     let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
     const moveTimes = [];
+    for (const hook of hooks.down) {
+        hook(e, opt);
+    }
     down(e, {
         start: () => {
             if (opt.start?.(tx, ty) === false) {
@@ -231,12 +247,15 @@ function move(e, opt) {
             tx = x;
             ty = y;
         },
-        up: (ne) => {
+        up: ne => {
             isMoving = false;
             set();
+            for (const hook of hooks.up) {
+                hook(moveTimes, e, opt);
+            }
             opt.up?.(moveTimes, ne);
         },
-        end: (ne) => {
+        end: ne => {
             opt.end?.(moveTimes, ne);
         }
     });
@@ -730,4 +749,4 @@ function gesture(oe, before, handler) {
     }
 }
 
-export { allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, resize, scale, set as setCursor, setData as setDragData };
+export { addHook as addMoveHook, allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, removeHook as removeMoveHook, resize, scale, set as setCursor, setData as setDragData };

dist/index.umd.js

@@ -94,6 +94,19 @@
     }
 
     exports.isMoving = false;
+    const hooks = {
+        'down': [],
+        'up': [],
+    };
+    function addHook(event, hook) {
+        hooks[event].push(hook);
+    }
+    function removeHook(event, hook) {
+        const index = hooks[event].indexOf(hook);
+        if (index !== -1) {
+            hooks[event].splice(index, 1);
+        }
+    }
     function clampToBorder(val, prevVal, nowMin, nowMax, min, max, offsetMin, offsetMax) {
         let atMin = false, atMax = false;
         if (nowMin <= min) {
@@ -175,6 +188,9 @@
         let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
         let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
         const moveTimes = [];
+        for (const hook of hooks.down) {
+            hook(e, opt);
+        }
         down(e, {
             start: () => {
                 if (opt.start?.(tx, ty) === false) {
@@ -237,12 +253,15 @@
                 tx = x;
                 ty = y;
             },
-            up: (ne) => {
+            up: ne => {
                 exports.isMoving = false;
                 set();
+                for (const hook of hooks.up) {
+                    hook(moveTimes, e, opt);
+                }
                 opt.up?.(moveTimes, ne);
             },
-            end: (ne) => {
+            end: ne => {
                 opt.end?.(moveTimes, ne);
             }
         });
@@ -736,6 +755,7 @@
         }
     }
 
+    exports.addMoveHook = addHook;
     exports.allowEvent = allowEvent;
     exports.click = click;
     exports.dblClick = dblClick;
@@ -748,6 +768,7 @@
     exports.isTouch = isTouch;
     exports.long = long;
     exports.move = move;
+    exports.removeMoveHook = removeHook;
     exports.resize = resize;
     exports.scale = scale;
     exports.setCursor = set;

dist/index.umd.min.js

@@ -85,6 +85,7 @@
             font-size: 12px;
             font-weight: 600;
             box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+            /* --- 禁止滚动 --- */
             touch-action: none;
         }
         .resize-handle {
@@ -116,6 +117,8 @@
             font-weight: 600;
             cursor: pointer;
             transition: transform 0.1s, background 0.2s;
+            /* --- 禁止双击放大 --- */
+            touch-action: manipulation;
         }
         .click-area:hover {
             background: #2563eb;
@@ -142,6 +145,8 @@
             color: #fff;
             font-weight: 600;
             cursor: pointer;
+            -webkit-user-select: none;
+            user-select: none;
         }
         .long-press-area .status {
             font-size: 24px;
@@ -361,7 +366,7 @@ <h2>long - Long Press</h2>
                 <div class="demo-area">
                     <div class="long-press-area" id="long-area">
                         <div class="status" id="long-status">👆 Hold</div>
-                        <div>Press and hold for 500ms</div>
+                        <div>Press and hold for 300ms</div>
                         <div class="progress">
                             <div class="progress-bar" id="long-progress"></div>
                         </div>

dist/test/index.html

@@ -27,7 +27,9 @@ export type {
     IDragOptions,
     TScaleHandler,
     TGestureBeforeHandler,
-    TGestureHandler
+    TGestureHandler,
+    TMoveDownHook,
+    TMoveUpHook
 } from './types';
 
 // --- Export Utils ---
@@ -42,9 +44,15 @@ export { set as setCursor } from './cursor';
 
 // --- Export Core Functions ---
 export { down } from './down';
-export { move, isMoving } from './move';
+export {
+    move, isMoving,
+    addHook as addMoveHook, removeHook as removeMoveHook
+} from './move';
 export { click, dblClick, long, allowEvent } from './click';
 export { resize } from './resize';
-export { drag, getData as getDragData, setData as setDragData } from './drag';
+export {
+    drag,
+    getData as getDragData, setData as setDragData
+} from './drag';
 export { scale } from './scale';
 export { gesture } from './gesture';

src/index.ts

@@ -22,6 +22,48 @@ import { down } from './down';
 /** --- 目前是否正在拖动 --- */
 export let isMoving: boolean = false;
 
+/** --- 全局钩子列表 --- */
+const hooks: {
+    'down': types.TMoveDownHook[];
+    'up': types.TMoveUpHook[];
+} = {
+    'down': [],
+    'up': [],
+};
+
+/**
+ * --- 添加全局钩子 ---
+ * @param event 事件
+ * @param hook 钩子函数
+ */
+export function addHook(
+    event: 'down', hook: types.TMoveDownHook
+): void;
+export function addHook(
+    event: 'up', hook: types.TMoveUpHook
+): void;
+export function addHook(
+    event: 'down' | 'up', hook: types.TMoveDownHook | types.TMoveUpHook
+): void {
+    hooks[event].push(hook);
+}
+
+/** --- 移动全局钩子 --- */
+export function removeHook(
+    event: 'down', hook: types.TMoveDownHook
+): void;
+export function removeHook(
+    event: 'up', hook: types.TMoveUpHook
+): void;
+export function removeHook(
+    event: 'down' | 'up', hook: types.TMoveDownHook | types.TMoveUpHook
+): void {
+    const index = hooks[event].indexOf(hook);
+    if (index !== -1) {
+        hooks[event].splice(index, 1);
+    }
+}
+
 /**
  * --- 计算边界限制后的坐标 ---
  * --- 用于在拖动过程中限制元素位置不超过指定的边界范围 ---
@@ -160,6 +202,10 @@ export function move(e: PointerEvent, opt: types.IMoveOptions): types.IMoveResul
     let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
     const moveTimes: types.IMoveTime[] = [];
 
+    // --- 执行全局 down 钩子 ---
+    for (const hook of hooks.down) {
+        hook(e, opt) as any;
+    }
     down(e, {
         start: () => {
             if (opt.start?.(tx, ty) === false) {
@@ -228,12 +274,16 @@ export function move(e: PointerEvent, opt: types.IMoveOptions): types.IMoveResul
             tx = x;
             ty = y;
         },
-        up: (ne) => {
+        up: ne => {
             isMoving = false;
             cursor.set();
+            // --- 执行全局 up 钩子 ---
+            for (const hook of hooks.up) {
+                hook(e, opt) as any;
+            }
             opt.up?.(moveTimes, ne);
         },
-        end: (ne) => {
+        end: ne => {
             opt.end?.(moveTimes, ne);
         }
     });

src/move.ts

@@ -167,3 +167,9 @@ export type TGestureBeforeHandler = (e: PointerEvent | WheelEvent, dir: TDirecti
 
 /** --- gesture handler 回调函数类型 --- */
 export type TGestureHandler = (dir: TDirection) => void | Promise<void>;
+
+/** --- move down 全局钩子函数类型 --- */
+export type TMoveDownHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
+
+/** --- move up 全局钩子函数类型 --- */
+export type TMoveUpHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;

src/types.ts

@@ -21,7 +21,6 @@
     ],
     "exclude": [
         "node_modules",
-        "dist",
-        "scripts"
+        "dist"
     ]
 }