Skip to content

Commit

Permalink
Merge pull request #373 from litt1eXixi/main
Browse files Browse the repository at this point in the history 
fix(av-canvas): 精灵操作适配移动端
  • Loading branch information
@hughfenghen
hughfenghen authored Feb 21, 2025
2 parents eb7a2a8 + 3b257f1 commit eddadbd
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 78 deletions.
5 changes: 5 additions & 0 deletions .changeset/slimy-guests-collect.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@webav/av-canvas': patch
---

fix: 将 mouse 事件改为 pointer 事件，兼容移动端操作
12 changes: 6 additions & 6 deletions packages/av-canvas/src/__tests__/av-canvas.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,31 +56,31 @@ test('dynamicCusor', async () => {
vs.rect.h = 100;
await avCvs.addSprite(vs);
const cvsEl = container.querySelector('canvas') as HTMLCanvasElement;
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 110, 110));
window.dispatchEvent(crtMSEvt4Offset('mouseup', 110, 110));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 110, 110));
window.dispatchEvent(crtMSEvt4Offset('pointerup', 110, 110));

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

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

cvsEl.dispatchEvent(
crtMSEvt4Offset(
'mousemove',
'pointermove',
rotate.x + center.x + 1,
rotate.y + center.y + 1,
),
);
expect(cvsEl.style.cursor).toBe('crosshair');

cvsEl.dispatchEvent(crtMSEvt4Offset('mousemove', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointermove', 0, 0));
expect(cvsEl.style.cursor).toBe('');

cvsEl.dispatchEvent(crtMSEvt4Offset('mousemove', 110, 110));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointermove', 110, 110));
expect(cvsEl.style.cursor).toBe('move');
});

Expand Down
1 change: 1 addition & 0 deletions packages/av-canvas/src/av-canvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function createInitCvsEl(resolution: IResolution): HTMLCanvasElement {
width: 100%;
height: 100%;
display: block;
touch-action: none;
`;
cvsEl.width = resolution.width;
cvsEl.height = resolution.height;
Expand Down
96 changes: 52 additions & 44 deletions packages/av-canvas/src/sprites/__tests__/sprite-op.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ afterEach(() => {
});

describe('draggabelSprite', () => {
test('canvas on mousedown', () => {
test('canvas on pointerdown', () => {
const spyAEL = vi.spyOn(cvsEl, 'addEventListener');
const spyREL = vi.spyOn(cvsEl, 'removeEventListener');

Expand All @@ -35,11 +35,11 @@ describe('draggabelSprite', () => {
document.body,
rectCtrlsGetter,
);
expect(spyAEL).toBeCalledWith('mousedown', expect.any(Function));
expect(spyAEL).toBeCalledWith('pointerdown', expect.any(Function));
expect(clear).toBeInstanceOf(Function);

clear();
expect(spyREL).toBeCalledWith('mousedown', expect.any(Function));
expect(spyREL).toBeCalledWith('pointerdown', expect.any(Function));
});

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

expect(spyAEL).toBeCalledTimes(2);
expect(spyAEL).toHaveBeenNthCalledWith(
1,
'mousemove',
'pointermove',
expect.any(Function),
);
expect(spyAEL).toHaveBeenNthCalledWith(
2,
'pointerup',
expect.any(Function),
);
expect(spyAEL).toHaveBeenNthCalledWith(2, 'mouseup', expect.any(Function));

clear();
expect(spyREL).toHaveBeenNthCalledWith(
1,
'mousemove',
'pointermove',
expect.any(Function),
);
expect(spyREL).toHaveBeenNthCalledWith(
2,
'pointerup',
expect.any(Function),
);
expect(spyREL).toHaveBeenNthCalledWith(2, 'mouseup', expect.any(Function));
});

test('move sprite', async () => {
Expand All @@ -90,10 +98,10 @@ describe('draggabelSprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 110, 110));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 110, 110));

window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: 100,
}),
Expand All @@ -103,7 +111,7 @@ describe('draggabelSprite', () => {

// 鼠标移动超出边界
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 10000,
clientY: 10000,
}),
Expand Down Expand Up @@ -131,16 +139,16 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 right ctrl
cvsEl.dispatchEvent(
crtMSEvt4Offset('mousedown', 100 * cvsRatio.w, 50 * cvsRatio.h),
crtMSEvt4Offset('pointerdown', 100 * cvsRatio.w, 50 * cvsRatio.h),
);
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: 100,
}),
Expand All @@ -165,16 +173,16 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 bottom right ctrl
cvsEl.dispatchEvent(
crtMSEvt4Offset('mousedown', 100 * cvsRatio.w, 100 * cvsRatio.h),
crtMSEvt4Offset('pointerdown', 100 * cvsRatio.w, 100 * cvsRatio.h),
);
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: 100,
}),
Expand Down Expand Up @@ -206,20 +214,20 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 150, 150));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 150, 150));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 right ctrl
cvsEl.dispatchEvent(
crtMSEvt4Offset(
'mousedown',
'pointerdown',
100 + 50 * cvsRatio.w + Math.cos(30 * (Math.PI / 180)) * 50,
100 + 50 * cvsRatio.h + 25,
),
);
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: -100,
clientY: -100,
}),
Expand All @@ -246,14 +254,14 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 50, 50));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 50, 50));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 top ctrl
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 50));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 50));
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 300,
clientY: 0,
}),
Expand Down Expand Up @@ -282,14 +290,14 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 150, 150));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 150, 150));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 bottom right ctrl
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 100, 200));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 100, 200));
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: -100,
}),
Expand Down Expand Up @@ -317,14 +325,14 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 left ctrl
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 50));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 50));
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 10,
clientY: 0,
}),
Expand Down Expand Up @@ -352,14 +360,14 @@ describe('scale sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 bottom ctrl
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 50, 100));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 50, 100));
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 0,
clientY: -10,
}),
Expand Down Expand Up @@ -388,30 +396,30 @@ describe('rotate sprite', () => {
document.body,
rectCtrlsGetter,
);
cvsEl.dispatchEvent(crtMSEvt4Offset('mousedown', 0, 0));
cvsEl.dispatchEvent(crtMSEvt4Offset('pointerdown', 0, 0));
expect(sprMng.activeSprite).toBe(vs);

window.dispatchEvent(new MouseEvent('mouseup'));
window.dispatchEvent(new MouseEvent('pointerup'));
// 命中 rotate ctrl
const { center } = vs.rect;
const { rotate } = rectCtrlsGetter(vs.rect);
cvsEl.dispatchEvent(
crtMSEvt4Offset(
'mousedown',
'pointerdown',
(rotate.x + center.x) * cvsRatio.w,
(rotate.y + center.y) * cvsRatio.h,
),
);
window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: 100,
}),
);
expect(vs.rect.angle.toFixed(2)).toBe('2.36');

window.dispatchEvent(
new MouseEvent('mousemove', {
new MouseEvent('pointermove', {
clientX: 100,
clientY: 200,
}),
Expand Down
12 changes: 6 additions & 6 deletions packages/av-canvas/src/sprites/render-ctrl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,17 +60,17 @@ export function renderCtrls(
);
};

cvsEl.addEventListener('mousedown', onDown);
window.addEventListener('mouseup', onWinowUp);
window.addEventListener('mousemove', onMove);
cvsEl.addEventListener('pointerdown', onDown);
window.addEventListener('pointerup', onWinowUp);
window.addEventListener('pointermove', onMove);

return () => {
observer.disconnect();
offSprChange();
rectEl.remove();
cvsEl.removeEventListener('mousedown', onDown);
window.removeEventListener('mouseup', onWinowUp);
window.removeEventListener('mousemove', onMove);
cvsEl.removeEventListener('pointerdown', onDown);
window.removeEventListener('pointerup', onWinowUp);
window.removeEventListener('pointermove', onMove);
};
}

Expand Down
Loading

0 comments on commit eddadbd

Please sign in to comment.