Cleanup of pointer changes to the bitmap field

Author: RoboErikG

plugins/field-bitmap/src/field-bitmap.ts

@@ -37,7 +37,7 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
   private editorPixels: HTMLElement[][] | null = null;
   private blockDisplayPixels: SVGElement[][] | null = null;
   /** Stateful variables */
-  private mouseIsDown = false;
+  private pointerIsDown = false;
   private valToPaintWith?: number;
   buttonOptions: Buttons;
   pixelSize: number;
@@ -293,14 +293,15 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
     Blockly.DropDownDiv.getContentDiv().classList.add('contains-bitmap-editor');
 
     this.bindEvent(dropdownEditor, 'pointermove', this.onPointerMove);
-    this.bindEvent(dropdownEditor, 'pointerup', this.onPointerUp);
-    this.bindEvent(dropdownEditor, 'pointerleave', this.onPointerUp);
-    this.bindEvent(dropdownEditor, 'pointerdown', this.onPointerDown);
-    this.bindEvent(dropdownEditor, 'pointercancel', this.onPointerUp);
-    // Stop the browser from intercepting touch events and cancelling the event
+    this.bindEvent(dropdownEditor, 'pointerup', this.onPointerEnd);
+    this.bindEvent(dropdownEditor, 'pointerleave', this.onPointerEnd);
+    this.bindEvent(dropdownEditor, 'pointerdown', this.onPointerStart);
+    this.bindEvent(dropdownEditor, 'pointercancel', this.onPointerEnd);
+    // Stop the browser from handling touch events and cancelling the event.
     this.bindEvent(dropdownEditor, 'touchmove', (e: Event) => {
         e.preventDefault();
-      });
+    });
+
 
     this.editorPixels = [];
     for (let r = 0; r < this.imgHeight; r++) {
@@ -321,20 +322,6 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
         // Set the custom data attributes for row and column indices
         button.setAttribute('data-row', r.toString());
         button.setAttribute('data-col', c.toString());
-
-        // // Handle clicking a pixel
-        // this.bindEvent(button, 'mousedown', () => {
-        //   console.log("handling pointer down")
-        //   this.onMouseDownInPixel(r, c);
-        //   return true;
-        // });
-
-        // // Handle dragging into a pixel when mouse is down
-        // this.bindEvent(button, 'mouseenter', () => {
-        //   console.log("handling pointer enter");
-        //   this.onMouseEnterPixel(r, c);
-        // });
-
       }
       pixelContainer.appendChild(rowDiv);
     }
@@ -487,13 +474,14 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
    * 
    * @param e 
    */
-  private onPointerDown(e: PointerEvent) {
+  private onPointerStart(e: PointerEvent) {
     const currentElement = document.elementFromPoint(e.clientX, e.clientY);
     const rowIndex = currentElement?.getAttribute('data-row');
     const colIndex = currentElement?.getAttribute('data-col');
-    console.log("pointer down on " + rowIndex + ", " + colIndex + " element " + currentElement);
     if (rowIndex && colIndex) {
-      this.onMouseDownInPixel(parseInt(rowIndex), parseInt(colIndex));
+      this.onPointerDownInPixel(parseInt(rowIndex), parseInt(colIndex));
+      this.pointerIsDown = true;
+      e.preventDefault();
     }
   }
 
@@ -502,40 +490,40 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
    * @param e 
    */
   private onPointerMove(e: PointerEvent) {
+    if (!this.pointerIsDown) {
+      return;
+    }
     const currentElement = document.elementFromPoint(e.clientX, e.clientY);
     const rowIndex = currentElement?.getAttribute('data-row');
     const colIndex = currentElement?.getAttribute('data-col');
-    console.log("pointer moving on " + rowIndex + ", " + colIndex);
     if (rowIndex && colIndex) {
-      this.onMouseEnterPixel(parseInt(rowIndex), parseInt(colIndex));
+      this.updatePixelValue(parseInt(rowIndex), parseInt(colIndex));
     }
     e.preventDefault();
   }
 
   /**
-   * Called when a mousedown event occurs within the bounds of a pixel.
+   * Starts an interaction with the bitmap dropdown when there's a pointerdown
+   * within one of the pixels in the editor.
    *
    * @param r Row number of grid.
    * @param c Column number of grid.
    */
-  private onMouseDownInPixel(r: number, c: number) {
+  private onPointerDownInPixel(r: number, c: number) {
     // Toggle that pixel to the opposite of its value
     const newPixelValue = 1 - this.getPixel(r, c);
     this.setPixel(r, c, newPixelValue);
-    this.mouseIsDown = true;
+    this.pointerIsDown = true;
     this.valToPaintWith = newPixelValue;
   }
 
   /**
-   * Called when the mouse drags over a pixel in the editor.
+   * Sets the specified pixel in the editor to the current value being painted.
    *
    * @param r Row number of grid.
    * @param c Column number of grid.
    */
-  private onMouseEnterPixel(r: number, c: number) {
-    if (!this.mouseIsDown) {
-      return;
-    }
+  private updatePixelValue(r: number, c: number) {
     if (
       this.valToPaintWith !== undefined &&
       this.getPixel(r, c) !== this.valToPaintWith
@@ -545,12 +533,11 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
   }
 
   /**
-   * Resets mouse state (e.g. After either a mouseup event or if the mouse
-   * leaves the editor area).
+   * Resets pointer state (e.g. After either a pointerup event or if the
+   * gesture is canceled).
    */
-  private onPointerUp(e: PointerEvent) {
-    console.log("onMouseUp " + e.pointerType);
-    this.mouseIsDown = false;
+  private onPointerEnd(e: PointerEvent) {
+    this.pointerIsDown = false;
     this.valToPaintWith = undefined;
   }