Skip to content

Commit eddadbd

Browse files
hughfenghenhughfenghen
authored
Merge pull request #373 from litt1eXixi/main
fix(av-canvas): 精灵操作适配移动端
2 parents eb7a2a8 + 3b257f1 commit eddadbd

File tree

6 files changed

+92
-78
lines changed

6 files changed

+92
-78
lines changed

‎.changeset/slimy-guests-collect.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@webav/av-canvas': patch
3+
---
4+
5+
fix: 将 mouse 事件改为 pointer 事件，兼容移动端操作

‎packages/av-canvas/src/__tests__/av-canvas.test.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,31 +56,31 @@ test('dynamicCusor', async () => {
5656
vs.rect.h = 100;
5757
await avCvs.addSprite(vs);
5858
const cvsEl = container.querySelector('canvas') as HTMLCanvasElement;
59-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 110, 110));
60-
window.dispatchEvent(crtMSEvt4Offset('mouseup', 110, 110));
59+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 110, 110));
60+
window.dispatchEvent(crtMSEvt4Offset('pointerup', 110, 110));
6161

6262
expect(cvsEl.style.cursor).toBe('move');
6363

6464
const { center } = vs.rect;
6565
const { lt, rotate } = rectCtrlsGetter(vs.rect);
6666
cvsEl.dispatchEvent(
67-
crtMSEvt4Offset('mousemove', lt.x + center.x, lt.y + center.y),
67+
crtMSEvt4Offset('pointermove', lt.x + center.x, lt.y + center.y),
6868
);
6969
expect(cvsEl.style.cursor).toBe('nwse-resize');
7070

7171
cvsEl.dispatchEvent(
7272
crtMSEvt4Offset(
73-
'mousemove',
73+
'pointermove',
7474
rotate.x + center.x + 1,
7575
rotate.y + center.y + 1,
7676
),
7777
);
7878
expect(cvsEl.style.cursor).toBe('crosshair');
7979

80-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousemove', 0, 0));
80+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointermove', 0, 0));
8181
expect(cvsEl.style.cursor).toBe('');
8282

83-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousemove', 110, 110));
83+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointermove', 110, 110));
8484
expect(cvsEl.style.cursor).toBe('move');
8585
});
8686

‎packages/av-canvas/src/av-canvas.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ function createInitCvsEl(resolution: IResolution): HTMLCanvasElement {
3232
width: 100%;
3333
height: 100%;
3434
display: block;
35+
touch-action: none;
3536
`;
3637
cvsEl.width = resolution.width;
3738
cvsEl.height = resolution.height;

‎packages/av-canvas/src/sprites/__tests__/sprite-op.test.ts‎

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ afterEach(() => {
2525
});
2626

2727
describe('draggabelSprite', () => {
28-
test('canvas on mousedown', () => {
28+
test('canvas on pointerdown', () => {
2929
const spyAEL = vi.spyOn(cvsEl, 'addEventListener');
3030
const spyREL = vi.spyOn(cvsEl, 'removeEventListener');
3131

@@ -35,11 +35,11 @@ describe('draggabelSprite', () => {
3535
document.body,
3636
rectCtrlsGetter,
3737
);
38-
expect(spyAEL).toBeCalledWith('mousedown', expect.any(Function));
38+
expect(spyAEL).toBeCalledWith('pointerdown', expect.any(Function));
3939
expect(clear).toBeInstanceOf(Function);
4040

4141
clear();
42-
expect(spyREL).toBeCalledWith('mousedown', expect.any(Function));
42+
expect(spyREL).toBeCalledWith('pointerdown', expect.any(Function));
4343
});
4444

4545
test('window on mouse event', async () => {
@@ -55,23 +55,31 @@ describe('draggabelSprite', () => {
5555
document.body,
5656
rectCtrlsGetter,
5757
);
58-
cvsEl.dispatchEvent(new MouseEvent('mousedown'));
58+
cvsEl.dispatchEvent(new MouseEvent('pointerdown'));
5959

6060
expect(spyAEL).toBeCalledTimes(2);
6161
expect(spyAEL).toHaveBeenNthCalledWith(
6262
1,
63-
'mousemove',
63+
'pointermove',
64+
expect.any(Function),
65+
);
66+
expect(spyAEL).toHaveBeenNthCalledWith(
67+
2,
68+
'pointerup',
6469
expect.any(Function),
6570
);
66-
expect(spyAEL).toHaveBeenNthCalledWith(2, 'mouseup', expect.any(Function));
6771

6872
clear();
6973
expect(spyREL).toHaveBeenNthCalledWith(
7074
1,
71-
'mousemove',
75+
'pointermove',
76+
expect.any(Function),
77+
);
78+
expect(spyREL).toHaveBeenNthCalledWith(
79+
2,
80+
'pointerup',
7281
expect.any(Function),
7382
);
74-
expect(spyREL).toHaveBeenNthCalledWith(2, 'mouseup', expect.any(Function));
7583
});
7684

7785
test('move sprite', async () => {
@@ -90,10 +98,10 @@ describe('draggabelSprite', () => {
9098
document.body,
9199
rectCtrlsGetter,
92100
);
93-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 110, 110));
101+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 110, 110));
94102

95103
window.dispatchEvent(
96-
new MouseEvent('mousemove', {
104+
new MouseEvent('pointermove', {
97105
clientX: 100,
98106
clientY: 100,
99107
}),
@@ -103,7 +111,7 @@ describe('draggabelSprite', () => {
103111

104112
// 鼠标移动超出边界
105113
window.dispatchEvent(
106-
new MouseEvent('mousemove', {
114+
new MouseEvent('pointermove', {
107115
clientX: 10000,
108116
clientY: 10000,
109117
}),
@@ -131,16 +139,16 @@ describe('scale sprite', () => {
131139
document.body,
132140
rectCtrlsGetter,
133141
);
134-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
142+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
135143
expect(sprMng.activeSprite).toBe(vs);
136144

137-
window.dispatchEvent(new MouseEvent('mouseup'));
145+
window.dispatchEvent(new MouseEvent('pointerup'));
138146
// 命中 right ctrl
139147
cvsEl.dispatchEvent(
140-
crtMSEvt4Offset('mousedown', 100 * cvsRatio.w, 50 * cvsRatio.h),
148+
crtMSEvt4Offset('pointerdown', 100 * cvsRatio.w, 50 * cvsRatio.h),
141149
);
142150
window.dispatchEvent(
143-
new MouseEvent('mousemove', {
151+
new MouseEvent('pointermove', {
144152
clientX: 100,
145153
clientY: 100,
146154
}),
@@ -165,16 +173,16 @@ describe('scale sprite', () => {
165173
document.body,
166174
rectCtrlsGetter,
167175
);
168-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
176+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
169177
expect(sprMng.activeSprite).toBe(vs);
170178

171-
window.dispatchEvent(new MouseEvent('mouseup'));
179+
window.dispatchEvent(new MouseEvent('pointerup'));
172180
// 命中 bottom right ctrl
173181
cvsEl.dispatchEvent(
174-
crtMSEvt4Offset('mousedown', 100 * cvsRatio.w, 100 * cvsRatio.h),
182+
crtMSEvt4Offset('pointerdown', 100 * cvsRatio.w, 100 * cvsRatio.h),
175183
);
176184
window.dispatchEvent(
177-
new MouseEvent('mousemove', {
185+
new MouseEvent('pointermove', {
178186
clientX: 100,
179187
clientY: 100,
180188
}),
@@ -206,20 +214,20 @@ describe('scale sprite', () => {
206214
document.body,
207215
rectCtrlsGetter,
208216
);
209-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 150, 150));
217+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 150, 150));
210218
expect(sprMng.activeSprite).toBe(vs);
211219

212-
window.dispatchEvent(new MouseEvent('mouseup'));
220+
window.dispatchEvent(new MouseEvent('pointerup'));
213221
// 命中 right ctrl
214222
cvsEl.dispatchEvent(
215223
crtMSEvt4Offset(
216-
'mousedown',
224+
'pointerdown',
217225
100 + 50 * cvsRatio.w + Math.cos(30 * (Math.PI / 180)) * 50,
218226
100 + 50 * cvsRatio.h + 25,
219227
),
220228
);
221229
window.dispatchEvent(
222-
new MouseEvent('mousemove', {
230+
new MouseEvent('pointermove', {
223231
clientX: -100,
224232
clientY: -100,
225233
}),
@@ -246,14 +254,14 @@ describe('scale sprite', () => {
246254
document.body,
247255
rectCtrlsGetter,
248256
);
249-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 50, 50));
257+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 50, 50));
250258
expect(sprMng.activeSprite).toBe(vs);
251259

252-
window.dispatchEvent(new MouseEvent('mouseup'));
260+
window.dispatchEvent(new MouseEvent('pointerup'));
253261
// 命中 top ctrl
254-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 50));
262+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 50));
255263
window.dispatchEvent(
256-
new MouseEvent('mousemove', {
264+
new MouseEvent('pointermove', {
257265
clientX: 300,
258266
clientY: 0,
259267
}),
@@ -282,14 +290,14 @@ describe('scale sprite', () => {
282290
document.body,
283291
rectCtrlsGetter,
284292
);
285-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 150, 150));
293+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 150, 150));
286294
expect(sprMng.activeSprite).toBe(vs);
287295

288-
window.dispatchEvent(new MouseEvent('mouseup'));
296+
window.dispatchEvent(new MouseEvent('pointerup'));
289297
// 命中 bottom right ctrl
290-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 100, 200));
298+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 100, 200));
291299
window.dispatchEvent(
292-
new MouseEvent('mousemove', {
300+
new MouseEvent('pointermove', {
293301
clientX: 100,
294302
clientY: -100,
295303
}),
@@ -317,14 +325,14 @@ describe('scale sprite', () => {
317325
document.body,
318326
rectCtrlsGetter,
319327
);
320-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
328+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
321329
expect(sprMng.activeSprite).toBe(vs);
322330

323-
window.dispatchEvent(new MouseEvent('mouseup'));
331+
window.dispatchEvent(new MouseEvent('pointerup'));
324332
// 命中 left ctrl
325-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 50));
333+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 50));
326334
window.dispatchEvent(
327-
new MouseEvent('mousemove', {
335+
new MouseEvent('pointermove', {
328336
clientX: 10,
329337
clientY: 0,
330338
}),
@@ -352,14 +360,14 @@ describe('scale sprite', () => {
352360
document.body,
353361
rectCtrlsGetter,
354362
);
355-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
363+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
356364
expect(sprMng.activeSprite).toBe(vs);
357365

358-
window.dispatchEvent(new MouseEvent('mouseup'));
366+
window.dispatchEvent(new MouseEvent('pointerup'));
359367
// 命中 bottom ctrl
360-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 50, 100));
368+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 50, 100));
361369
window.dispatchEvent(
362-
new MouseEvent('mousemove', {
370+
new MouseEvent('pointermove', {
363371
clientX: 0,
364372
clientY: -10,
365373
}),
@@ -388,30 +396,30 @@ describe('rotate sprite', () => {
388396
document.body,
389397
rectCtrlsGetter,
390398
);
391-
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
399+
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
392400
expect(sprMng.activeSprite).toBe(vs);
393401

394-
window.dispatchEvent(new MouseEvent('mouseup'));
402+
window.dispatchEvent(new MouseEvent('pointerup'));
395403
// 命中 rotate ctrl
396404
const { center } = vs.rect;
397405
const { rotate } = rectCtrlsGetter(vs.rect);
398406
cvsEl.dispatchEvent(
399407
crtMSEvt4Offset(
400-
'mousedown',
408+
'pointerdown',
401409
(rotate.x + center.x) * cvsRatio.w,
402410
(rotate.y + center.y) * cvsRatio.h,
403411
),
404412
);
405413
window.dispatchEvent(
406-
new MouseEvent('mousemove', {
414+
new MouseEvent('pointermove', {
407415
clientX: 100,
408416
clientY: 100,
409417
}),
410418
);
411419
expect(vs.rect.angle.toFixed(2)).toBe('2.36');
412420

413421
window.dispatchEvent(
414-
new MouseEvent('mousemove', {
422+
new MouseEvent('pointermove', {
415423
clientX: 100,
416424
clientY: 200,
417425
}),

‎packages/av-canvas/src/sprites/render-ctrl.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,17 @@ export function renderCtrls(
6060
);
6161
};
6262

63-
cvsEl.addEventListener('mousedown', onDown);
64-
window.addEventListener('mouseup', onWinowUp);
65-
window.addEventListener('mousemove', onMove);
63+
cvsEl.addEventListener('pointerdown', onDown);
64+
window.addEventListener('pointerup', onWinowUp);
65+
window.addEventListener('pointermove', onMove);
6666

6767
return () => {
6868
observer.disconnect();
6969
offSprChange();
7070
rectEl.remove();
71-
cvsEl.removeEventListener('mousedown', onDown);
72-
window.removeEventListener('mouseup', onWinowUp);
73-
window.removeEventListener('mousemove', onMove);
71+
cvsEl.removeEventListener('pointerdown', onDown);
72+
window.removeEventListener('pointerup', onWinowUp);
73+
window.removeEventListener('pointermove', onMove);
7474
};
7575
}
7676

0 commit comments

Comments
 (0)