Merge branch 'master' of https://github.com/RoboErikG/blockly-samples

Author: RoboErikG

codelabs/custom_generator/custom_generator.md

@@ -203,7 +203,7 @@ A custom language generator is simply an instance of `Blockly.Generator`. Create
 ```js
 import * as Blockly from 'blockly';
 
-export const jsonGenerator = new Blockly.Generator('JSON');
+export const jsonGenerator = new Blockly.CodeGenerator('JSON');
 ```
 
 ### Generate code

plugins/block-shareable-procedures/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.15](https://github.com/google/blockly-samples/compare/@blockly/block-shareable-procedures@5.0.14...@blockly/block-shareable-procedures@5.0.15) (2025-02-27)
+
+
+### Bug Fixes
+
+* Mitigate shareable procedure flyout bug. ([a37225a](https://github.com/google/blockly-samples/commit/a37225a6dc4369fcec14e2a704eaa6bef9842b8c))
+
+
+
+
+
 ## [5.0.14](https://github.com/google/blockly-samples/compare/@blockly/block-shareable-procedures@5.0.13...@blockly/block-shareable-procedures@5.0.14) (2025-02-13)
 
 **Note:** Version bump only for package @blockly/block-shareable-procedures

plugins/block-shareable-procedures/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockly/block-shareable-procedures",
-  "version": "5.0.14",
+  "version": "5.0.15",
   "description": "A plugin that adds procedure blocks which are backed by explicit data models.",
   "scripts": {
     "audit:fix": "blockly-scripts auditFix",

plugins/block-shareable-procedures/package.json

@@ -1068,7 +1068,10 @@ const procedureCallerUpdateShapeMixin = {
   doProcedureUpdate: function () {
     if (!this.getProcedureModel()) return;
     const id = this.getProcedureModel().getId();
-    if (!this.getTargetWorkspace_().getProcedureMap().has(id)) {
+    if (
+      !this.getTargetWorkspace_().getProcedureMap().has(id) &&
+      !this.isInFlyout
+    ) {
       this.dispose(true);
       return;
     }

plugins/block-shareable-procedures/src/blocks.ts

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.15](https://github.com/google/blockly-samples/compare/@blockly/field-bitmap@5.0.14...@blockly/field-bitmap@5.0.15) (2025-02-27)
+
+
+### Bug Fixes
+
+* [#2463](https://github.com/google/blockly-samples/issues/2463) update event handling for field-bitmap to support touch ([c105002](https://github.com/google/blockly-samples/commit/c1050025e41dd456c822301555b1b3a20577d03e))
+
+
+
+
+
 ## [5.0.14](https://github.com/google/blockly-samples/compare/@blockly/field-bitmap@5.0.13...@blockly/field-bitmap@5.0.14) (2025-02-13)
 
 **Note:** Version bump only for package @blockly/field-bitmap

plugins/field-bitmap/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@blockly/field-bitmap",
-  "version": "5.0.14",
+  "version": "5.0.15",
   "description": "A field that lets users input a pixel grid with their mouse.",
   "scripts": {
     "audit:fix": "blockly-scripts auditFix",

plugins/field-bitmap/package-lock.json

@@ -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;
@@ -292,9 +292,13 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
     // This prevents the normal max-height from adding a scroll bar for large images.
     Blockly.DropDownDiv.getContentDiv().classList.add('contains-bitmap-editor');
 
-    this.bindEvent(dropdownEditor, 'mouseup', this.onMouseUp);
-    this.bindEvent(dropdownEditor, 'mouseleave', this.onMouseUp);
-    this.bindEvent(dropdownEditor, 'dragstart', (e: Event) => {
+    this.bindEvent(dropdownEditor, 'pointermove', this.onPointerMove);
+    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();
     });
 
@@ -314,16 +318,9 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
           ? this.pixelColours.filled
           : this.pixelColours.empty;
 
-        // Handle clicking a pixel
-        this.bindEvent(button, 'mousedown', () => {
-          this.onMouseDownInPixel(r, c);
-          return true;
-        });
-
-        // Handle dragging into a pixel when mouse is down
-        this.bindEvent(button, 'mouseenter', () => {
-          this.onMouseEnterPixel(r, c);
-        });
+        // Set the custom data attributes for row and column indices
+        button.setAttribute('data-row', r.toString());
+        button.setAttribute('data-col', c.toString());
       }
       pixelContainer.appendChild(rowDiv);
     }
@@ -473,29 +470,63 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
   }
 
   /**
-   * Called when a mousedown event occurs within the bounds of a pixel.
+   * Checks if a down event is on a pixel in this editor and if it is starts an
+   * edit gesture.
+   *
+   * @param e The down event.
+   */
+  private onPointerStart(e: PointerEvent) {
+    const currentElement = document.elementFromPoint(e.clientX, e.clientY);
+    const rowIndex = currentElement?.getAttribute('data-row');
+    const colIndex = currentElement?.getAttribute('data-col');
+    if (rowIndex && colIndex) {
+      this.onPointerDownInPixel(parseInt(rowIndex), parseInt(colIndex));
+      this.pointerIsDown = true;
+      e.preventDefault();
+    }
+  }
+
+  /**
+   * Updates the editor if we're in an edit gesture and the pointer is over a
+   * pixel.
+   *
+   * @param e The move event.
+   */
+  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');
+    if (rowIndex && colIndex) {
+      this.updatePixelValue(parseInt(rowIndex), parseInt(colIndex));
+    }
+    e.preventDefault();
+  }
+
+  /**
+   * 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
@@ -505,11 +536,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 onMouseUp() {
-    this.mouseIsDown = false;
+  private onPointerEnd() {
+    this.pointerIsDown = false;
     this.valToPaintWith = undefined;
   }
 
@@ -594,10 +625,10 @@ export class FieldBitmap extends Blockly.Field<number[][]> {
   private bindEvent(
     element: HTMLElement,
     eventName: string,
-    callback: (e: Event) => void,
+    callback: (e: PointerEvent) => void,
   ) {
     this.boundEvents.push(
-      Blockly.browserEvents.conditionalBind(element, eventName, this, callback),
+      Blockly.browserEvents.bind(element, eventName, this, callback),
     );
   }