Fixes for some PIXI.JS issues from upgrade

Ameobea · Jan 4, 2024 · a09289d · a09289d
1 parent 98e909d
commit a09289d
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 58 deletions.
diff --git 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
@@ -9,29 +9,35 @@ 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();
     }
   })
     .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
@@ -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
@@ -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
@@ -44,7 +44,6 @@ export class NoteDragHandle {
       this.parentNote.line.app.startResizingSelectedNotes(evt, this.side);
       evt.stopPropagation();
     });
-    // g.cacheAsBitmap = true;
     return g;
   }