fix: #2463 update event handling for field-bitmap to support touch

[RoboErikG]

The basics

• I validated my changes

The details

Resolves

Fixes #2463 by changing how the editor handles mouse and touch events.

Proposed Changes

Updates the Bitmap field to properly support touch events. This change is based on code-dot-org/code-dot-org#61709 .

• Switches from handling mouse events to pointer events and moves the event handling up to the editor. This prevents the touch events from getting trapped in an individual pixel.
• Uses bind instead of conditionalBind. conditionalBind does extra work to account for multi-touch gestures, which causes issues for the editor and isn't needed.
• Prevents default handling of touchmove (instead of drag) within the editor. The default handling cancels the original gesture when it converts it to a drag, which prevents future move events.
• Adds a cancel listener to also cleanup the edit state when canceled.

Screen.recording.2025-02-21.9.59.31.AM.webm

Reason for Changes

Touch events in the bitmap editor would get canceled by the browser, causing the gesture to end early and the state to not be cleaned up properly. This would cause Blockly to become partially unresponsive.

Test Coverage

Tested manually on a Chromebook with a touch screen.

Documentation

Additional Information

[rachel-fenichel]

Use npm run format to format and then push again.

[RoboErikG]

Hi @mikeharv I made a fix to the bitmap editor based on your change. If you have some time would you mind taking a look to make sure I'm not missing anything?

[gonfunko]

Does e.target not work here?

[gonfunko]

And in onPointerMove

[RoboErikG]

Touch events get captured by the element they start on. This means the target is always the element the event started on, so it won't change when you drag across another pixel cell.

[RoboErikG]

For completeness, I did find an alternate to using elementFromPoint() would be to cast the target in the pointerdown event to an Element and call releasePointerCapture(). This might have a slight performance advantage, but both options work well so it's not worth revisiting unless we find an issue with the current approach.

      const elem = e.target as Element;
      if (elem && elem.hasPointerCapture(e.pointerId)) {
        elem.releasePointerCapture(e.pointerId);
      }