From a8234a1a8dc39ae6445534fd1eca33e6db07d72d Mon Sep 17 00:00:00 2001 From: Paulo Junior Date: Mon, 20 Jul 2020 16:38:58 -0300 Subject: [PATCH 1/2] Fix DragCanvasState to stop handling events after mouse is released --- packages/react-canvas-core/src/states/DragCanvasState.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-canvas-core/src/states/DragCanvasState.ts b/packages/react-canvas-core/src/states/DragCanvasState.ts index 0d15c3e..aa62552 100644 --- a/packages/react-canvas-core/src/states/DragCanvasState.ts +++ b/packages/react-canvas-core/src/states/DragCanvasState.ts @@ -46,6 +46,15 @@ export class DragCanvasState extends AbstractDisplacementState { } fireMouseMoved(event: AbstractDisplacementStateEvent) { + const isMouseDown = event.event.buttons !== 0; + + if (!isMouseDown) { + // If the mouse is not down, it should return to the previous state + // and stop processing the mouse move event + this.engine.getStateMachine().popState(); + return; + } + if (this.config.allowDrag) { this.engine .getModel() From 39dbbe3db94379b942962e500d70eb105008e3d1 Mon Sep 17 00:00:00 2001 From: Paulo Junior Date: Tue, 21 Jul 2020 08:46:52 -0300 Subject: [PATCH 2/2] Move MouseDown check from DragCanvasState to AbstractDisplacementState --- .../src/core-state/AbstractDisplacementState.ts | 9 +++++++++ packages/react-canvas-core/src/states/DragCanvasState.ts | 9 --------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts b/packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts index 4925a73..0ca1204 100644 --- a/packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts +++ b/packages/react-canvas-core/src/core-state/AbstractDisplacementState.ts @@ -35,6 +35,15 @@ export abstract class AbstractDisplacementState) => { const { event } = actionEvent; + + if (event.buttons === 0) { + // If buttons is 0, it means the mouse is not down, the user may have released it + // outside of the canvas, then we eject the state + this.eject(); + + return; + } + this.fireMouseMoved({ displacementX: event.clientX - this.initialX, displacementY: event.clientY - this.initialY, diff --git a/packages/react-canvas-core/src/states/DragCanvasState.ts b/packages/react-canvas-core/src/states/DragCanvasState.ts index aa62552..0d15c3e 100644 --- a/packages/react-canvas-core/src/states/DragCanvasState.ts +++ b/packages/react-canvas-core/src/states/DragCanvasState.ts @@ -46,15 +46,6 @@ export class DragCanvasState extends AbstractDisplacementState { } fireMouseMoved(event: AbstractDisplacementStateEvent) { - const isMouseDown = event.event.buttons !== 0; - - if (!isMouseDown) { - // If the mouse is not down, it should return to the previous state - // and stop processing the mouse move event - this.engine.getStateMachine().popState(); - return; - } - if (this.config.allowDrag) { this.engine .getModel()