From a09289d8637b7b549b327f3e7af493aa75f086d5 Mon Sep 17 00:00:00 2001 From: Casey Primozic Date: Wed, 3 Jan 2024 23:19:51 -0600 Subject: [PATCH] Fixes for some PIXI.JS issues from upgrade --- src/controls/adsr2/adsr2.tsx | 52 ++++++++++++++++--------- src/controls/pixiUtils.tsx | 22 +++++++---- src/midiEditor/Cursor.ts | 31 ++++++++------- src/midiEditor/MIDIEditorUIInstance.tsx | 40 +++++++++++-------- src/midiEditor/NoteBox/MIDINoteBox.ts | 1 - 5 files changed, 88 insertions(+), 58 deletions(-) diff --git a/src/controls/adsr2/adsr2.tsx b/src/controls/adsr2/adsr2.tsx index 7cfa3955..ee2302d9 100644 --- a/src/controls/adsr2/adsr2.tsx +++ b/src/controls/adsr2/adsr2.tsx @@ -166,22 +166,26 @@ class RampHandle { g.interactive = true; g.cursor = 'pointer'; + const handlePointerMove = () => { + if (!this.dragData) { + return; + } + + const newPosition = this.dragData.getLocalPosition(this.graphics.parent); + this.handleDrag(newPosition); + }; + g.on('pointerdown', (evt: FederatedPointerEvent) => { this.dragData = evt; + document.addEventListener('pointermove', handlePointerMove); }) .on('pointerup', () => { this.dragData = null; + document.removeEventListener('pointermove', handlePointerMove); }) .on('pointerupoutside', () => { this.dragData = null; - }) - .on('pointermove', () => { - if (!this.dragData) { - return; - } - - const newPosition = this.dragData.getLocalPosition(this.graphics.parent); - this.handleDrag(newPosition); + document.removeEventListener('pointermove', handlePointerMove); }); this.graphics = g; @@ -386,6 +390,9 @@ class StepHandle { // Drag handling g.cursor = 'pointer'; g.interactive = true; + + const handlePointerMove = () => this.handlePointerMove(); + g.on('pointerdown', (evt: FederatedPointerEvent) => { const originalEvent = evt.nativeEvent as PointerEvent; @@ -407,17 +414,20 @@ class StepHandle { } this.dragData = evt; + document.addEventListener('pointermove', handlePointerMove); }) .on('pointerup', () => { this.dragData = null; + document.removeEventListener('pointermove', handlePointerMove); }) .on('pointerupoutside', () => { this.dragData = null; + document.removeEventListener('pointermove', handlePointerMove); }) - .on('pointermove', () => this.handlePointerMove()) .on('rightdown', (evt: FederatedPointerEvent) => { evt.originalEvent.preventDefault(); evt.originalEvent.stopPropagation(); + document.removeEventListener('pointermove', handlePointerMove); this.delete(); }); @@ -494,6 +504,16 @@ class DragBar { g.interactive = true; g.cursor = 'pointer'; + + const handlePointerMove = () => { + if (!this.dragData) { + return; + } + + const newPosition = this.dragData.getLocalPosition(g.parent); + this.handleDrag(newPosition); + }; + g.on('pointerdown', (evt: FederatedPointerEvent) => { const originalEvent = evt.nativeEvent as PointerEvent; if (originalEvent.button !== 0) { @@ -533,23 +553,17 @@ class DragBar { return; } - this.dragData = evt.data; + this.dragData = evt; + document.addEventListener('pointermove', handlePointerMove); }) .on('pointerup', () => { this.dragData = null; + document.removeEventListener('pointermove', handlePointerMove); }) .on('pointerupoutside', () => { this.dragData = null; - }) - .on('pointermove', () => { - if (!this.dragData) { - return; - } - - const newPosition = this.dragData.getLocalPosition(g.parent); - this.handleDrag(newPosition); + document.removeEventListener('pointermove', handlePointerMove); }); - g.x = LEFT_GUTTER_WIDTH_PX + initialPos * this.inst.width; g.y = TOP_GUTTER_WIDTH_PX - 4; this.inst.app?.stage.addChild(g); diff --git a/src/controls/pixiUtils.tsx b/src/controls/pixiUtils.tsx index 9c28e151..dfbb0f71 100644 --- a/src/controls/pixiUtils.tsx +++ b/src/controls/pixiUtils.tsx @@ -9,11 +9,23 @@ export interface DragState { export const makeDraggable = (g: PIXI.Graphics, parent: DragState, stopPropagation?: boolean) => { g.interactive = true; + + const pointerMoveCb = () => { + if (!parent.dragData) { + return; + } + + const newPosition = parent.dragData.getLocalPosition(g.parent); + parent.handleDrag(newPosition); + }; + g.on('pointerdown', (evt: FederatedPointerEvent) => { if ((evt.nativeEvent as PointerEvent).button !== 0) { return; } + document.addEventListener('pointermove', pointerMoveCb); + parent.dragData = evt; if (stopPropagation) { evt.stopPropagation(); @@ -21,17 +33,11 @@ export const makeDraggable = (g: PIXI.Graphics, parent: DragState, stopPropagati }) .on('pointerup', () => { parent.dragData = null; + document.removeEventListener('pointermove', pointerMoveCb); }) .on('pointerupoutside', () => { parent.dragData = null; - }) - .on('pointermove', () => { - if (!parent.dragData) { - return; - } - - const newPosition = parent.dragData.getLocalPosition(g.parent); - parent.handleDrag(newPosition); + document.removeEventListener('pointermove', pointerMoveCb); }); }; diff --git a/src/midiEditor/Cursor.ts b/src/midiEditor/Cursor.ts index 8a0b7a92..8e6d44ad 100644 --- a/src/midiEditor/Cursor.ts +++ b/src/midiEditor/Cursor.ts @@ -17,34 +17,39 @@ export class CursorGutter { g.drawRect(0, 0, this.app.width, conf.CURSOR_GUTTER_HEIGHT); g.endFill(); g.interactive = true; - g.on('pointerdown', (evt: FederatedPointerEvent) => { - if (evt.button !== 0) { + + const handlePointerMove = (evt: FederatedPointerEvent) => { + if (!this.isDragging) { return; } - this.isDragging = true; const xPx = evt.getLocalPosition(g).x - conf.PIANO_KEYBOARD_WIDTH; const xBeats = this.app.parentInstance.snapBeat( - this.app.parentInstance.baseView.scrollHorizontalBeats + this.app.pxToBeats(xPx) + Math.max( + 0, + this.app.parentInstance.baseView.scrollHorizontalBeats + this.app.pxToBeats(xPx) + ) ); this.app.parentInstance.playbackHandler.setCursorPosBeats(xBeats); + }; - this.app.addMouseUpCB(() => { - this.isDragging = false; - }); - }).on('pointermove', (evt: FederatedPointerEvent) => { - if (!this.isDragging) { + g.on('pointerdown', (evt: FederatedPointerEvent) => { + if (evt.button !== 0) { return; } + this.isDragging = true; const xPx = evt.getLocalPosition(g).x - conf.PIANO_KEYBOARD_WIDTH; const xBeats = this.app.parentInstance.snapBeat( - Math.max( - 0, - this.app.parentInstance.baseView.scrollHorizontalBeats + this.app.pxToBeats(xPx) - ) + this.app.parentInstance.baseView.scrollHorizontalBeats + this.app.pxToBeats(xPx) ); this.app.parentInstance.playbackHandler.setCursorPosBeats(xBeats); + + this.app.app.stage.on('pointermove', handlePointerMove); + this.app.addMouseUpCB(() => { + this.isDragging = false; + this.app.app.stage.off('pointermove', handlePointerMove); + }); }); g.lineStyle(1, conf.LINE_BORDER_COLOR); g.moveTo(this.app.width, conf.CURSOR_GUTTER_HEIGHT).lineTo(0.5, conf.CURSOR_GUTTER_HEIGHT); diff --git a/src/midiEditor/MIDIEditorUIInstance.tsx b/src/midiEditor/MIDIEditorUIInstance.tsx index f908296b..e70b691b 100644 --- a/src/midiEditor/MIDIEditorUIInstance.tsx +++ b/src/midiEditor/MIDIEditorUIInstance.tsx @@ -86,6 +86,7 @@ export default class MIDIEditorUIInstance { private panningData: { startPoint: PIXI.Point; startView: MIDIEditorPanningView } | null = null; private resizeData: ResizeData | null = null; private dragData: DragData | null = null; + private handlePointerMove: (evt: FederatedPointerEvent) => void; private selectionBox: SelectionBox | null = null; public selectionBoxButtonDown = false; public cursor: Cursor; @@ -144,24 +145,28 @@ export default class MIDIEditorUIInstance { this.linesContainer = new PIXI.Container(); this.linesContainer.interactive = true; this.linesContainer.interactiveChildren = true; - this.linesContainer - .on('pointerdown', (evt: FederatedPointerEvent) => { - if (evt.button === 0) { - if (this.selectionBoxButtonDown && !this.selectionBox) { - this.selectionBox = new SelectionBox(this, evt.getLocalPosition(this.linesContainer)); - } - } else if (evt.button === 1) { - this.startPanning(evt); - } - }) - .on('pointermove', (evt: FederatedPointerEvent) => { - this.handlePan(evt); - this.handleResize(evt); - this.handleDrag(evt); - if (this.selectionBox) { - this.selectionBox.update(evt.getLocalPosition(this.linesContainer)); + + this.handlePointerMove = (evt: FederatedPointerEvent) => { + this.handlePan(evt); + this.handleResize(evt); + this.handleDrag(evt); + if (this.selectionBox) { + this.selectionBox.update(evt.getLocalPosition(this.linesContainer)); + } + }; + this.app.stage.hitArea = this.app.screen; + this.app.stage.interactive = true; + this.app.stage.on('pointermove', this.handlePointerMove); + + this.linesContainer.on('pointerdown', (evt: FederatedPointerEvent) => { + if (evt.button === 0) { + if (this.selectionBoxButtonDown && !this.selectionBox) { + this.selectionBox = new SelectionBox(this, evt.getLocalPosition(this.linesContainer)); } - }); + } else if (evt.button === 1) { + this.startPanning(evt); + } + }); this.linesContainer.x = conf.PIANO_KEYBOARD_WIDTH; this.linesContainer.y = conf.CURSOR_GUTTER_HEIGHT; @@ -1182,6 +1187,7 @@ export default class MIDIEditorUIInstance { document.removeEventListener('keyup', this.eventHandlerCBs.keyUp); document.removeEventListener('mouseup', this.eventHandlerCBs.mouseUp); document.removeEventListener('wheel', this.eventHandlerCBs.wheel); + this.app.stage.off('pointermove', this.handlePointerMove); } public onHiddenStatusChanged = (isHidden: boolean) => { diff --git a/src/midiEditor/NoteBox/MIDINoteBox.ts b/src/midiEditor/NoteBox/MIDINoteBox.ts index c41c7f29..675baa17 100644 --- a/src/midiEditor/NoteBox/MIDINoteBox.ts +++ b/src/midiEditor/NoteBox/MIDINoteBox.ts @@ -44,7 +44,6 @@ export class NoteDragHandle { this.parentNote.line.app.startResizingSelectedNotes(evt, this.side); evt.stopPropagation(); }); - // g.cacheAsBitmap = true; return g; }