attempt at a very hamfisted fix for multitouch

Author: chuynh18

assets/js/fullkeyboardtest.js

@@ -7,7 +7,8 @@ import {
    setPedal,
    pausePlaying,
    stopMidiPlaying,
-   userMovesSeekBar
+   userMovesSeekBar,
+   destroyRect
 } from "./piano/pianoPlayer.js";
 import { setReferencesToElements, resizeVisualizerCanvas } from "./visualizer/visualizer.js";
 
@@ -25,12 +26,19 @@ window.addEventListener("load", function() {
       });
    }, {once: true});
 
-   window.addEventListener("pointerdown", function() {
+   keyboard.addEventListener("pointerdown", function() {
       state.mouseDown = true;
    });
 
-   window.addEventListener("pointerup", function() {
+   keyboard.addEventListener("pointerup", function() {
       state.mouseDown = false;
+      console.log("keyboard pointer up");
+
+      state.visualizerRects.forEach(visualizerRect => {
+         if (visualizerRect.length > 0) {
+            visualizerRect.forEach(rect => destroyRect(rect));
+         }
+      });
    });
 
    // attach event listeners to each key of the piano

assets/js/piano/pianoPlayer.js

@@ -123,7 +123,9 @@ export function startPlaying(i, key, color = "red", gain = 1, skipDrawing = fals
       const rect = drawRect(state.rects[i], 10000, color);
       state.visualizerRects[i].push({
          rect: rect,
-         createdAt: Date.now()
+         createdAt: Date.now(),
+         i: i,
+         color: color
       });
    }
 }
@@ -137,21 +139,10 @@ export function stopPlaying(i, key, color = "red", skipDestroy = false) {
    key.style.fill = key.dataset.fill;
    key.setAttribute("class", "unpressed");
    state.currentlyHeldDownKeys[i] = false;
-
-   // console.log(state.visualizerRects);
 
    if (! skipDestroy) {
       const rectObj = state.visualizerRects[i].shift();
-      const rect = rectObj.rect;
-      const duration = Date.now() - rectObj.createdAt;
-
-      const replacementRect = drawRect(state.rects[i], duration, color, {yPos: visualizerHeight - (visualizerHeight * (duration / 2000))});
-      
-      setTimeout(function() {
-         replacementRect.parentNode.removeChild(replacementRect);
-      }, duration + 2000);
-
-      rect.parentNode.removeChild(rect);
+      destroyRect(rectObj);
    }
 
    if (!state.pedal) {
@@ -165,6 +156,18 @@ export function stopPlaying(i, key, color = "red", skipDestroy = false) {
    }
 }
 
+export function destroyRect(rectObj){
+   const duration = Date.now() - rectObj.createdAt;
+
+   const replacementRect = drawRect(state.rects[rectObj.i], duration, rectObj.color, {yPos: visualizerHeight - (visualizerHeight * (duration / 2000))});
+   
+   setTimeout(function() {
+      replacementRect.parentNode.removeChild(replacementRect);
+   }, duration + 2000);
+
+   rectObj.rect.parentNode.removeChild(rectObj.rect);
+}
+
 function noteStop(note, noteBufferSource, endingVolume = 0.1, noteFadeDuration = CONSTANTS.noteFade) {
    try {
          note.gain.gain.setTargetAtTime(endingVolume, state.audioContext.currentTime, noteFadeDuration);