Skip to content

Commit 16615b8

Browse files
committed
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.
1 parent 6098ab9 commit 16615b8

File tree

9 files changed

+158
-14
lines changed

9 files changed

+158
-14
lines changed

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ A lightweight pointer event library for handling mouse, touch, and pen interacti
2525
- 🔄 Drag and drop with customizable constraints
2626
- 📐 Resize functionality with border detection
2727
- 🎨 Global cursor management
28+
- 🪝 Global hooks for move events
2829
- 📦 Zero dependencies
2930
- 🔷 Full TypeScript support
3031
- 🌐 ESM and UMD bundle support
@@ -172,6 +173,25 @@ element.addEventListener('pointerdown', (e) => {
172173
});
173174
```
174175

176+
#### `addMoveHook(event, hook)` & `removeMoveHook(event, hook)`
177+
178+
Global hooks for move events. These hooks are called for all move operations.
179+
180+
```typescript
181+
// --- Register global move down hook ---
182+
pointer.addMoveHook('down', (e, opt) => {
183+
console.log('Global move down hook:', e, opt);
184+
});
185+
186+
// --- Register global move up hook ---
187+
pointer.addMoveHook('up', (e, opt) => {
188+
console.log('Global move up hook:', moveTimes, e, opt);
189+
});
190+
191+
// --- Remove a hook ---
192+
pointer.removeMoveHook('down', hookFunction);
193+
```
194+
175195
#### `resize(e, options)`
176196

177197
Resize event.
@@ -463,6 +483,22 @@ Handler function type for gesture events.
463483
type TGestureHandler = (dir: TDirection) => void | Promise<void>;
464484
```
465485

486+
### `TMoveDownHook`
487+
488+
Global hook function type for move down events.
489+
490+
```typescript
491+
type TMoveDownHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
492+
```
493+
494+
### `TMoveUpHook`
495+
496+
Global hook function type for move up events.
497+
498+
```typescript
499+
type TMoveUpHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
500+
```
501+
466502
## Demo
467503

468504
Clone the repository and open `dist/test/index.html` in your browser.

dist/index.esm.js

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,19 @@ function down(oe, opt) {
8888
}
8989

9090
let isMoving = false;
91+
const hooks = {
92+
'down': [],
93+
'up': [],
94+
};
95+
function addHook(event, hook) {
96+
hooks[event].push(hook);
97+
}
98+
function removeHook(event, hook) {
99+
const index = hooks[event].indexOf(hook);
100+
if (index !== -1) {
101+
hooks[event].splice(index, 1);
102+
}
103+
}
91104
function clampToBorder(val, prevVal, nowMin, nowMax, min, max, offsetMin, offsetMax) {
92105
let atMin = false, atMax = false;
93106
if (nowMin <= min) {
@@ -169,6 +182,9 @@ function move(e, opt) {
169182
let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
170183
let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
171184
const moveTimes = [];
185+
for (const hook of hooks.down) {
186+
hook(e, opt);
187+
}
172188
down(e, {
173189
start: () => {
174190
if (opt.start?.(tx, ty) === false) {
@@ -231,12 +247,15 @@ function move(e, opt) {
231247
tx = x;
232248
ty = y;
233249
},
234-
up: (ne) => {
250+
up: ne => {
235251
isMoving = false;
236252
set();
253+
for (const hook of hooks.up) {
254+
hook(moveTimes, e, opt);
255+
}
237256
opt.up?.(moveTimes, ne);
238257
},
239-
end: (ne) => {
258+
end: ne => {
240259
opt.end?.(moveTimes, ne);
241260
}
242261
});
@@ -730,4 +749,4 @@ function gesture(oe, before, handler) {
730749
}
731750
}
732751

733-
export { allowEvent, click, dblClick, down, drag, gesture, getData as getDragData, getEventPos, getMoveDir, isMoving, isTouch, long, move, resize, scale, set as setCursor, setData as setDragData };
752+
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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,19 @@
9494
}
9595

9696
exports.isMoving = false;
97+
const hooks = {
98+
'down': [],
99+
'up': [],
100+
};
101+
function addHook(event, hook) {
102+
hooks[event].push(hook);
103+
}
104+
function removeHook(event, hook) {
105+
const index = hooks[event].indexOf(hook);
106+
if (index !== -1) {
107+
hooks[event].splice(index, 1);
108+
}
109+
}
97110
function clampToBorder(val, prevVal, nowMin, nowMax, min, max, offsetMin, offsetMax) {
98111
let atMin = false, atMax = false;
99112
if (nowMin <= min) {
@@ -175,6 +188,9 @@
175188
let objectLeft = 0, objectTop = 0, objectWidth = 0, objectHeight = 0;
176189
let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
177190
const moveTimes = [];
191+
for (const hook of hooks.down) {
192+
hook(e, opt);
193+
}
178194
down(e, {
179195
start: () => {
180196
if (opt.start?.(tx, ty) === false) {
@@ -237,12 +253,15 @@
237253
tx = x;
238254
ty = y;
239255
},
240-
up: (ne) => {
256+
up: ne => {
241257
exports.isMoving = false;
242258
set();
259+
for (const hook of hooks.up) {
260+
hook(moveTimes, e, opt);
261+
}
243262
opt.up?.(moveTimes, ne);
244263
},
245-
end: (ne) => {
264+
end: ne => {
246265
opt.end?.(moveTimes, ne);
247266
}
248267
});
@@ -736,6 +755,7 @@
736755
}
737756
}
738757

758+
exports.addMoveHook = addHook;
739759
exports.allowEvent = allowEvent;
740760
exports.click = click;
741761
exports.dblClick = dblClick;
@@ -748,6 +768,7 @@
748768
exports.isTouch = isTouch;
749769
exports.long = long;
750770
exports.move = move;
771+
exports.removeMoveHook = removeHook;
751772
exports.resize = resize;
752773
exports.scale = scale;
753774
exports.setCursor = set;

dist/index.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/test/index.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
font-size: 12px;
8686
font-weight: 600;
8787
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
88+
/* --- 禁止滚动 --- */
8889
touch-action: none;
8990
}
9091
.resize-handle {
@@ -116,6 +117,8 @@
116117
font-weight: 600;
117118
cursor: pointer;
118119
transition: transform 0.1s, background 0.2s;
120+
/* --- 禁止双击放大 --- */
121+
touch-action: manipulation;
119122
}
120123
.click-area:hover {
121124
background: #2563eb;
@@ -142,6 +145,8 @@
142145
color: #fff;
143146
font-weight: 600;
144147
cursor: pointer;
148+
-webkit-user-select: none;
149+
user-select: none;
145150
}
146151
.long-press-area .status {
147152
font-size: 24px;
@@ -361,7 +366,7 @@ <h2>long - Long Press</h2>
361366
<div class="demo-area">
362367
<div class="long-press-area" id="long-area">
363368
<div class="status" id="long-status">👆 Hold</div>
364-
<div>Press and hold for 500ms</div>
369+
<div>Press and hold for 300ms</div>
365370
<div class="progress">
366371
<div class="progress-bar" id="long-progress"></div>
367372
</div>

src/index.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export type {
2727
IDragOptions,
2828
TScaleHandler,
2929
TGestureBeforeHandler,
30-
TGestureHandler
30+
TGestureHandler,
31+
TMoveDownHook,
32+
TMoveUpHook
3133
} from './types';
3234

3335
// --- Export Utils ---
@@ -42,9 +44,15 @@ export { set as setCursor } from './cursor';
4244

4345
// --- Export Core Functions ---
4446
export { down } from './down';
45-
export { move, isMoving } from './move';
47+
export {
48+
move, isMoving,
49+
addHook as addMoveHook, removeHook as removeMoveHook
50+
} from './move';
4651
export { click, dblClick, long, allowEvent } from './click';
4752
export { resize } from './resize';
48-
export { drag, getData as getDragData, setData as setDragData } from './drag';
53+
export {
54+
drag,
55+
getData as getDragData, setData as setDragData
56+
} from './drag';
4957
export { scale } from './scale';
5058
export { gesture } from './gesture';

src/move.ts

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,48 @@ import { down } from './down';
2222
/** --- 目前是否正在拖动 --- */
2323
export let isMoving: boolean = false;
2424

25+
/** --- 全局钩子列表 --- */
26+
const hooks: {
27+
'down': types.TMoveDownHook[];
28+
'up': types.TMoveUpHook[];
29+
} = {
30+
'down': [],
31+
'up': [],
32+
};
33+
34+
/**
35+
* --- 添加全局钩子 ---
36+
* @param event 事件
37+
* @param hook 钩子函数
38+
*/
39+
export function addHook(
40+
event: 'down', hook: types.TMoveDownHook
41+
): void;
42+
export function addHook(
43+
event: 'up', hook: types.TMoveUpHook
44+
): void;
45+
export function addHook(
46+
event: 'down' | 'up', hook: types.TMoveDownHook | types.TMoveUpHook
47+
): void {
48+
hooks[event].push(hook);
49+
}
50+
51+
/** --- 移动全局钩子 --- */
52+
export function removeHook(
53+
event: 'down', hook: types.TMoveDownHook
54+
): void;
55+
export function removeHook(
56+
event: 'up', hook: types.TMoveUpHook
57+
): void;
58+
export function removeHook(
59+
event: 'down' | 'up', hook: types.TMoveDownHook | types.TMoveUpHook
60+
): void {
61+
const index = hooks[event].indexOf(hook);
62+
if (index !== -1) {
63+
hooks[event].splice(index, 1);
64+
}
65+
}
66+
2567
/**
2668
* --- 计算边界限制后的坐标 ---
2769
* --- 用于在拖动过程中限制元素位置不超过指定的边界范围 ---
@@ -160,6 +202,10 @@ export function move(e: PointerEvent, opt: types.IMoveOptions): types.IMoveResul
160202
let offsetLeft = 0, offsetTop = 0, offsetRight = 0, offsetBottom = 0;
161203
const moveTimes: types.IMoveTime[] = [];
162204

205+
// --- 执行全局 down 钩子 ---
206+
for (const hook of hooks.down) {
207+
hook(e, opt) as any;
208+
}
163209
down(e, {
164210
start: () => {
165211
if (opt.start?.(tx, ty) === false) {
@@ -228,12 +274,16 @@ export function move(e: PointerEvent, opt: types.IMoveOptions): types.IMoveResul
228274
tx = x;
229275
ty = y;
230276
},
231-
up: (ne) => {
277+
up: ne => {
232278
isMoving = false;
233279
cursor.set();
280+
// --- 执行全局 up 钩子 ---
281+
for (const hook of hooks.up) {
282+
hook(e, opt) as any;
283+
}
234284
opt.up?.(moveTimes, ne);
235285
},
236-
end: (ne) => {
286+
end: ne => {
237287
opt.end?.(moveTimes, ne);
238288
}
239289
});

src/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,3 +167,9 @@ export type TGestureBeforeHandler = (e: PointerEvent | WheelEvent, dir: TDirecti
167167

168168
/** --- gesture handler 回调函数类型 --- */
169169
export type TGestureHandler = (dir: TDirection) => void | Promise<void>;
170+
171+
/** --- move down 全局钩子函数类型 --- */
172+
export type TMoveDownHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;
173+
174+
/** --- move up 全局钩子函数类型 --- */
175+
export type TMoveUpHook = (e: PointerEvent, opt: IMoveOptions) => void | Promise<void>;

tsconfig.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
],
2222
"exclude": [
2323
"node_modules",
24-
"dist",
25-
"scripts"
24+
"dist"
2625
]
2726
}

0 commit comments

Comments
 (0)