diff --git a/src/web/handlers/FlingGestureHandler.ts b/src/web/handlers/FlingGestureHandler.ts index 38a0a7aa38..2acb36c347 100644 --- a/src/web/handlers/FlingGestureHandler.ts +++ b/src/web/handlers/FlingGestureHandler.ts @@ -120,13 +120,22 @@ export default class FlingGestureHandler extends GestureHandler { } } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { this.tracker.track(event); if (this.currentState !== State.BEGAN) { return; } + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + this.tryEndFling(); super.onPointerMove(event); diff --git a/src/web/handlers/GestureHandler.ts b/src/web/handlers/GestureHandler.ts index 9b971f88e7..16769e2447 100644 --- a/src/web/handlers/GestureHandler.ts +++ b/src/web/handlers/GestureHandler.ts @@ -277,7 +277,10 @@ export default abstract class GestureHandler { // Event actions // - protected onPointerDown(event: AdaptedEvent): void { + protected onPointerDown( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this); this.pointerType = event.pointerType; @@ -290,29 +293,44 @@ export default abstract class GestureHandler { } } // Adding another pointer to existing ones - protected onPointerAdd(event: AdaptedEvent): void { + protected onPointerAdd( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.config.needsPointerData) { this.sendTouchEvent(event); } } - protected onPointerUp(event: AdaptedEvent): void { + protected onPointerUp( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.config.needsPointerData) { this.sendTouchEvent(event); } } // Removing pointer, when there is more than one pointers - protected onPointerRemove(event: AdaptedEvent): void { + protected onPointerRemove( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.config.needsPointerData) { this.sendTouchEvent(event); } } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { this.tryToSendMoveEvent(false); if (this.config.needsPointerData) { this.sendTouchEvent(event); } } - protected onPointerLeave(event: AdaptedEvent): void { + protected onPointerLeave( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.shouldCancellWhenOutside) { switch (this.currentState) { case State.ACTIVE: @@ -329,12 +347,18 @@ export default abstract class GestureHandler { this.sendTouchEvent(event); } } - protected onPointerEnter(event: AdaptedEvent): void { + protected onPointerEnter( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.config.needsPointerData) { this.sendTouchEvent(event); } } - protected onPointerCancel(event: AdaptedEvent): void { + protected onPointerCancel( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.config.needsPointerData) { this.sendTouchEvent(event); } @@ -342,18 +366,28 @@ export default abstract class GestureHandler { this.cancel(); this.reset(); } - protected onPointerOutOfBounds(event: AdaptedEvent): void { + protected onPointerOutOfBounds( + event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { this.tryToSendMoveEvent(true); if (this.config.needsPointerData) { this.sendTouchEvent(event); } } - protected onPointerMoveOver(_event: AdaptedEvent): void { + protected onPointerMoveOver( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { // used only by hover gesture handler atm } - protected onPointerMoveOut(_event: AdaptedEvent): void { + protected onPointerMoveOut( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { // used only by hover gesture handler atm } + private tryToSendMoveEvent(out: boolean): void { if ( this.enabled && diff --git a/src/web/handlers/ManualGestureHandler.ts b/src/web/handlers/ManualGestureHandler.ts index c04e21669b..701af8590b 100644 --- a/src/web/handlers/ManualGestureHandler.ts +++ b/src/web/handlers/ManualGestureHandler.ts @@ -21,12 +21,30 @@ export default class ManualGestureHandler extends GestureHandler { super.onPointerAdd(event); } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + this.tracker.track(event); super.onPointerMove(event); } - protected onPointerOutOfBounds(event: AdaptedEvent): void { + protected onPointerOutOfBounds( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + this.tracker.track(event); super.onPointerOutOfBounds(event); } diff --git a/src/web/handlers/PanGestureHandler.ts b/src/web/handlers/PanGestureHandler.ts index 43347401ec..0b82a8e386 100644 --- a/src/web/handlers/PanGestureHandler.ts +++ b/src/web/handlers/PanGestureHandler.ts @@ -250,9 +250,16 @@ export default class PanGestureHandler extends GestureHandler { } } - protected onPointerUp(event: AdaptedEvent): void { + protected onPointerUp( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ): void { super.onPointerUp(event); + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } + if (this.currentState === State.ACTIVE) { this.lastX = this.tracker.getLastAvgX(); this.lastY = this.tracker.getLastAvgY(); @@ -267,7 +274,14 @@ export default class PanGestureHandler extends GestureHandler { this.fail(); } } - protected onPointerRemove(event: AdaptedEvent): void { + protected onPointerRemove( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ): void { + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } + super.onPointerRemove(event); this.tracker.removeFromTracker(event.pointerId); @@ -290,7 +304,22 @@ export default class PanGestureHandler extends GestureHandler { } } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ): void { + if (sourceEvent) { + const state = this.getState(); + if (sourceEvent.cancelable && state === State.ACTIVE) { + sourceEvent.preventDefault(); + } + + if (!sourceEvent.cancelable && state === State.ACTIVE) { + this.fail(); + return; + } + } + this.tracker.track(event); this.lastX = this.tracker.getLastAvgX(); @@ -303,11 +332,26 @@ export default class PanGestureHandler extends GestureHandler { super.onPointerMove(event); } - protected onPointerOutOfBounds(event: AdaptedEvent): void { + protected onPointerOutOfBounds( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ): void { if (this.getShouldCancelWhenOutside()) { return; } + if (sourceEvent) { + const state = this.getState(); + if (sourceEvent.cancelable && state === State.ACTIVE) { + sourceEvent.preventDefault(); + } + + if (!sourceEvent.cancelable && state === State.ACTIVE) { + this.fail(); + return; + } + } + this.tracker.track(event); this.lastX = this.tracker.getLastAvgX(); @@ -470,6 +514,10 @@ export default class PanGestureHandler extends GestureHandler { super.activate(force); } + public fail(_sendIfDisabled?: boolean): void { + super.fail(); + } + protected onCancel(): void { this.clearActivationTimeout(); } diff --git a/src/web/handlers/PinchGestureHandler.ts b/src/web/handlers/PinchGestureHandler.ts index 646cff0ff0..5afc7a4345 100644 --- a/src/web/handlers/PinchGestureHandler.ts +++ b/src/web/handlers/PinchGestureHandler.ts @@ -108,19 +108,39 @@ export default class PinchGestureHandler extends GestureHandler { } } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { if (this.tracker.getTrackedPointersCount() < 2) { return; } + + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + this.tracker.track(event); this.scaleGestureDetector.onTouchEvent(event, this.tracker); super.onPointerMove(event); } - protected onPointerOutOfBounds(event: AdaptedEvent): void { + protected onPointerOutOfBounds( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { if (this.tracker.getTrackedPointersCount() < 2) { return; } + + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + this.tracker.track(event); this.scaleGestureDetector.onTouchEvent(event, this.tracker); diff --git a/src/web/handlers/RotationGestureHandler.ts b/src/web/handlers/RotationGestureHandler.ts index 38e40e854d..3871b34fca 100644 --- a/src/web/handlers/RotationGestureHandler.ts +++ b/src/web/handlers/RotationGestureHandler.ts @@ -88,11 +88,20 @@ export default class RotationGestureHandler extends GestureHandler { this.rotationGestureDetector.onTouchEvent(event, this.tracker); } - protected onPointerMove(event: AdaptedEvent): void { + protected onPointerMove( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { if (this.tracker.getTrackedPointersCount() < 2) { return; } + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + if (this.getAnchorX()) { this.cachedAnchorX = this.getAnchorX(); } @@ -107,11 +116,20 @@ export default class RotationGestureHandler extends GestureHandler { super.onPointerMove(event); } - protected onPointerOutOfBounds(event: AdaptedEvent): void { + protected onPointerOutOfBounds( + event: AdaptedEvent, + sourceEvent: PointerEvent | TouchEvent + ): void { if (this.tracker.getTrackedPointersCount() < 2) { return; } + if (sourceEvent?.cancelable) { + sourceEvent.preventDefault(); + } else if (sourceEvent) { + this.fail(); + } + if (this.getAnchorX()) { this.cachedAnchorX = this.getAnchorX(); } diff --git a/src/web/tools/EventManager.ts b/src/web/tools/EventManager.ts index 900c132266..e1f9cc7582 100644 --- a/src/web/tools/EventManager.ts +++ b/src/web/tools/EventManager.ts @@ -19,56 +19,142 @@ export default abstract class EventManager { touchEventType?: TouchEventType ): AdaptedEvent; - protected onPointerDown(_event: AdaptedEvent): void {} - protected onPointerAdd(_event: AdaptedEvent): void {} - protected onPointerUp(_event: AdaptedEvent): void {} - protected onPointerRemove(_event: AdaptedEvent): void {} - protected onPointerMove(_event: AdaptedEvent): void {} - protected onPointerLeave(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching) - protected onPointerEnter(_event: AdaptedEvent): void {} // called only when pointer is pressed (or touching) - protected onPointerCancel(_event: AdaptedEvent): void { + protected onPointerDown( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerAdd( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerUp( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerRemove( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerMove( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerLeave( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} // called only when pointer is pressed (or touching) + protected onPointerEnter( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} // called only when pointer is pressed (or touching) + protected onPointerCancel( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void { // When pointer cancel is triggered and there are more pointers on the view, only one pointer is cancelled // Because we want all pointers to be cancelled by that event, we are doing it manually by reseting handler and changing activePointersCounter to 0 // Events that correspond to removing the pointer (pointerup, touchend) have condition, that they don't perform any action when activePointersCounter // is equal to 0. This prevents counter from going to negative values, when pointers are removed from view after one of them has been cancelled } - protected onPointerOutOfBounds(_event: AdaptedEvent): void {} - protected onPointerMoveOver(_event: AdaptedEvent): void {} - protected onPointerMoveOut(_event: AdaptedEvent): void {} + protected onPointerOutOfBounds( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerMoveOver( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} + protected onPointerMoveOut( + _event: AdaptedEvent, + _sourceEvent?: TouchEvent | PointerEvent + ): void {} - public setOnPointerDown(callback: (event: AdaptedEvent) => void): void { + public setOnPointerDown( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerDown = callback; } - public setOnPointerAdd(callback: (event: AdaptedEvent) => void): void { + public setOnPointerAdd( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerAdd = callback; } - public setOnPointerUp(callback: (event: AdaptedEvent) => void): void { + public setOnPointerUp( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerUp = callback; } - public setOnPointerRemove(callback: (event: AdaptedEvent) => void): void { + public setOnPointerRemove( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerRemove = callback; } - public setOnPointerMove(callback: (event: AdaptedEvent) => void): void { + public setOnPointerMove( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerMove = callback; } - public setOnPointerLeave(callback: (event: AdaptedEvent) => void): void { + public setOnPointerLeave( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerLeave = callback; } - public setOnPointerEnter(callback: (event: AdaptedEvent) => void): void { + public setOnPointerEnter( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerEnter = callback; } - public setOnPointerCancel(callback: (event: AdaptedEvent) => void): void { + public setOnPointerCancel( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerCancel = callback; } public setOnPointerOutOfBounds( - callback: (event: AdaptedEvent) => void + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void ): void { this.onPointerOutOfBounds = callback; } - public setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void { + public setOnPointerMoveOver( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerMoveOver = callback; } - public setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void { + public setOnPointerMoveOut( + callback: ( + event: AdaptedEvent, + sourceEvent?: TouchEvent | PointerEvent + ) => void + ): void { this.onPointerMoveOut = callback; } diff --git a/src/web/tools/GestureHandlerOrchestrator.ts b/src/web/tools/GestureHandlerOrchestrator.ts index a2c175efd8..170f54a20d 100644 --- a/src/web/tools/GestureHandlerOrchestrator.ts +++ b/src/web/tools/GestureHandlerOrchestrator.ts @@ -278,10 +278,7 @@ export default class GestureHandlerOrchestrator { return false; } - if ( - handler !== otherHandler && - (handler.isAwaiting() || handler.getState() === State.ACTIVE) - ) { + if (handler.isAwaiting() || handler.getState() === State.ACTIVE) { // For now it always returns false return handler.shouldBeCancelledByOther(otherHandler); } diff --git a/src/web/tools/GestureHandlerWebDelegate.ts b/src/web/tools/GestureHandlerWebDelegate.ts index fad27df38c..7577bab3f3 100644 --- a/src/web/tools/GestureHandlerWebDelegate.ts +++ b/src/web/tools/GestureHandlerWebDelegate.ts @@ -32,10 +32,6 @@ export class GestureHandlerWebDelegate this.gestureHandler = handler; this.view = findNodeHandle(viewRef) as unknown as HTMLElement; - this.view.style['touchAction'] = 'none'; - //@ts-ignore This one disables default events on Safari - this.view.style['WebkitTouchCallout'] = 'none'; - const config = handler.getConfig(); this.addContextMenuListeners(config); diff --git a/src/web/tools/InteractionManager.ts b/src/web/tools/InteractionManager.ts index 55df13b033..7b8e73a503 100644 --- a/src/web/tools/InteractionManager.ts +++ b/src/web/tools/InteractionManager.ts @@ -104,7 +104,6 @@ export default class InteractionManager { _handler: GestureHandler, _otherHandler: GestureHandler ): boolean { - //TODO: Implement logic return false; } diff --git a/src/web/tools/TouchEventManager.ts b/src/web/tools/TouchEventManager.ts index d73c11dc3c..c73d94bd11 100644 --- a/src/web/tools/TouchEventManager.ts +++ b/src/web/tools/TouchEventManager.ts @@ -37,7 +37,7 @@ export default class TouchEventManager extends EventManager { adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_DOWN; this.onPointerAdd(adaptedEvent); } else { - this.onPointerDown(adaptedEvent); + this.onPointerDown(adaptedEvent, event); } } }); @@ -70,7 +70,7 @@ export default class TouchEventManager extends EventManager { this.onPointerEnter(adaptedEvent); this.markAsInBounds(adaptedEvent.pointerId); } else { - this.onPointerMove(adaptedEvent); + this.onPointerMove(adaptedEvent, event); } } else { if (pointerIndex >= 0) { @@ -78,7 +78,7 @@ export default class TouchEventManager extends EventManager { this.onPointerLeave(adaptedEvent); this.markAsOutOfBounds(adaptedEvent.pointerId); } else { - this.onPointerOutOfBounds(adaptedEvent); + this.onPointerOutOfBounds(adaptedEvent, event); } } } @@ -110,9 +110,9 @@ export default class TouchEventManager extends EventManager { if (--this.activePointersCounter > 0) { adaptedEvent.eventType = EventTypes.ADDITIONAL_POINTER_UP; - this.onPointerRemove(adaptedEvent); + this.onPointerRemove(adaptedEvent, event); } else { - this.onPointerUp(adaptedEvent); + this.onPointerUp(adaptedEvent, event); } } });