github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use touch-action: none instead of events to prevent pan/zoom

Browse Source
This commit is contained in:
psychedelicious
2024-10-01 22:45:24 +10:00
parent fa4e7752a1
commit 84e2c0d73c
2 changed files with 6 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStageModule.ts
View File

@@ -95,6 +95,7 @@ export class CanvasStageModule extends CanvasModuleBase {
initialize = () => {
this.log.debug('Initializing module');
this.container.style.touchAction = 'none';
this.konva.stage.container(this.container);
this.setResizeObserver();
this.fitStageToContainer();

20
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts
View File

@@ -257,20 +257,13 @@ export class CanvasToolModule extends CanvasModuleBase {
};
setEventListeners = (): (() => void) => {
// The default behavior of touch events is to scroll the page. This breaks drawing, so we need to prevent that
// behaviour for the stage (also prevents it for all stage children).
const preventDefault = (e: KonvaEventObject<MouseEvent | TouchEvent | PointerEvent>) => {
e.evt.preventDefault();
};
this.konva.stage.on('touchstart', preventDefault);
this.konva.stage.on('touchmove', preventDefault);
this.konva.stage.on('touchend', preventDefault);
this.konva.stage.on('pointerenter', this.onStagePointerEnter);
this.konva.stage.on('pointerdown', this.onStagePointerDown);
this.konva.stage.on('pointerup', this.onStagePointerUp);
this.konva.stage.on('pointermove', this.onStagePointerMove);
this.konva.stage.on('pointerleave', this.onStagePointerLeave);
// The Konva stage doesn't appear to handle pointerleave events, so we need to listen to the container instead
this.manager.stage.container.addEventListener('pointerleave', this.onStagePointerLeave);
this.konva.stage.on('wheel', this.onStageMouseWheel);
@@ -280,15 +273,12 @@ export class CanvasToolModule extends CanvasModuleBase {
window.addEventListener('blur', this.onWindowBlur);
return () => {
this.konva.stage.off('touchstart', preventDefault);
this.konva.stage.off('touchmove', preventDefault);
this.konva.stage.off('touchend', preventDefault);
this.konva.stage.off('pointerenter', this.onStagePointerEnter);
this.konva.stage.off('pointerdown', this.onStagePointerDown);
this.konva.stage.off('pointerup', this.onStagePointerUp);
this.konva.stage.off('pointermove', this.onStagePointerMove);
this.konva.stage.off('pointerleave', this.onStagePointerLeave);
this.manager.stage.container.removeEventListener('pointerleave', this.onStagePointerLeave);
this.konva.stage.off('wheel', this.onStageMouseWheel);