diff --git a/CHANGELOG.md b/CHANGELOG.md index c566f7ac8b7..5cf5de680f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ ## [next] ## [6.4.2] - +- Fix(): Inconsistency of events when more buttons are used [#10027](https://github.com/fabricjs/fabric.js/issues/10027) - Fix(): path parsing performance [#10123](https://github.com/fabricjs/fabric.js/pull/10123) ## [6.4.1] diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index 2a5fb90e590..97ea287c1b4 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -625,12 +625,19 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { this._onMouseDown as EventListener, ); } - + _checkMouseClick(e: MouseEvent) { + const button = e.button; + if (button == 1) return this.fireMiddleClick + if (button == 2) return this.fireRightClick + return true; + } /** * @private * @param {Event} e Event object fired on mousedown */ _onMouseDown(e: TPointerEvent) { + const b = this._checkMouseClick(e as MouseEvent); + if (!b) return; this.__onMouseDown(e); this._resetTransformEventData(); const canvasElement = this.upperCanvasEl, @@ -697,6 +704,8 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { * @param {Event} e Event object fired on mouseup */ _onMouseUp(e: TPointerEvent) { + const b = this._checkMouseClick(e as MouseEvent); + if (!b) return; this.__onMouseUp(e); this._resetTransformEventData(); const canvasElement = this.upperCanvasEl, @@ -728,6 +737,8 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { * @param {Event} e Event object fired on mousemove */ _onMouseMove(e: TPointerEvent) { + const b = this._checkMouseClick(e as MouseEvent); + if (!b) return; const activeObject = this.getActiveObject(); !this.allowTouchScrolling && (!activeObject || @@ -778,17 +789,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { const isClick = this._isClick; const target = this._target; - // if right/middle click just fire events and return - // target undefined will make the _handleEvent search the target - const { button } = e as MouseEvent; - if (button) { - ((this.fireMiddleClick && button === 1) || - (this.fireRightClick && button === 2)) && - this._handleEvent(e, 'up'); - this._resetTransformEventData(); - return; - } - if (this.isDrawingMode && this._isCurrentlyDrawing) { this._onMouseUpInDrawingMode(e); return; @@ -989,16 +989,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { let target: FabricObject | undefined = this._target; - // if right/middle click just fire events - const { button } = e as MouseEvent; - if (button) { - ((this.fireMiddleClick && button === 1) || - (this.fireRightClick && button === 2)) && - this._handleEvent(e, 'down'); - this._resetTransformEventData(); - return; - } - if (this.isDrawingMode) { this._onMouseDownInDrawingMode(e); return;