scratch-blocks 2.0.0-spork.3 → 2.0.0-spork.5

package/dist/main.js.LICENSE.txt

@@ -1,24 +1,18 @@
 /**
  * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @license
- * Copyright 2021 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
 /**
  * @license
- * Copyright 2023 Google LLC
+ * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
 /**
  * @license
- * Copyright 2024 Google LLC
+ * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-blocks",
-  "version": "2.0.0-spork.3",
+  "version": "2.0.0-spork.5",
   "description": "Scratch Blocks is a library for building creative computing interfaces.",
   "author": "Massachusetts Institute of Technology",
   "license": "Apache-2.0",
@@ -32,9 +32,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@blockly/continuous-toolbox": "^6.0.9",
-    "@blockly/field-colour": "^5.0.9",
-    "blockly": "^12.0.0-beta.0"
+    "@blockly/continuous-toolbox": "^7.0.1",
+    "@blockly/field-colour": "^6.0.3",
+    "blockly": "12.3.0-beta.0"
   },
   "config": {
     "commitizen": {

package/src/blocks/procedures.ts

@@ -224,7 +224,7 @@ function disconnectOldBlocks_(this: ProcedureBlock): ConnectionMap {
     if (input.connection) {
       const target = input.connection.targetBlock() as Blockly.BlockSvg;
       const saveInfo = {
-        shadow: input.connection.getShadowDom(),
+        shadow: input.connection.getShadowDom(true),
         block: target,
       };
       connectionMap[input.name] = saveInfo;

package/src/checkable_continuous_flyout.ts

@@ -0,0 +1,116 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+import { ContinuousFlyout } from "@blockly/continuous-toolbox";
+import { CheckboxBubble } from "./checkbox_bubble";
+import { StatusIndicatorLabel } from "./status_indicator_label";
+import { STATUS_INDICATOR_LABEL_TYPE } from "./status_indicator_label_flyout_inflater";
+
+export class CheckableContinuousFlyout extends ContinuousFlyout {
+  /**
+   * Creates a new CheckableContinuousFlyout.
+   *
+   * @param workspaceOptions Configuration options for the flyout workspace.
+   */
+  constructor(workspaceOptions: Blockly.Options) {
+    workspaceOptions.modalInputs = false;
+    super(workspaceOptions);
+    this.tabWidth_ = 0;
+    this.MARGIN = 12;
+    this.GAP_Y = 12;
+  }
+
+  /**
+   * Serializes a block to JSON in order to copy it to the main workspace.
+   *
+   * @param block The block to serialize.
+   * @returns A JSON representation of the block.
+   */
+  protected serializeBlock(block: Blockly.BlockSvg) {
+    const json = super.serializeBlock(block);
+    // Delete the serialized block's ID so that a new one is generated when it is
+    // placed on the workspace. Otherwise, the block on the workspace may be
+    // indistinguishable from the one in the flyout, which can cause reporter blocks
+    // to have their value dropdown shown in the wrong place.
+    delete json.id;
+    return json;
+  }
+
+  /**
+   * Set the state of a checkbox by block ID.
+   *
+   * @param blockId ID of the block whose checkbox should be set
+   * @param value Value to set the checkbox to.
+   */
+  setCheckboxState(blockId: string, value: boolean) {
+    this.getWorkspace()
+      .getBlockById(blockId)
+      ?.getIcon("checkbox")
+      ?.setChecked(value);
+  }
+
+  getFlyoutScale() {
+    return 0.675;
+  }
+
+  getWidth() {
+    return 250;
+  }
+
+  protected reflowInternal_() {
+    super.reflowInternal_();
+
+    if (this.RTL) {
+      // The parent implementation assumes that the flyout grows to fit its
+      // contents, and adjusts blocks in RTL mode accordingly. In Scratch, the
+      // flyout width is fixed (and blocks may exceed it), so re-adjust blocks
+      // accordingly based on the actual fixed width.
+      for (const item of this.getContents()) {
+        const oldX = item.getElement().getBoundingRectangle().left;
+        let newX =
+          this.getWidth() / this.workspace_.scale -
+          item.getElement().getBoundingRectangle().getWidth() -
+          this.MARGIN;
+        if (
+          "checkboxInFlyout" in item.getElement() &&
+          item.getElement().checkboxInFlyout
+        ) {
+          newX -= CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN;
+        }
+        item.getElement().moveBy(newX - oldX, 0);
+      }
+    }
+  }
+
+  /**
+   * Validates that the given toolbox item represents a label.
+   *
+   * @param item The toolbox item to check.
+   * @returns True if the item represents a label in the flyout.
+   */
+  protected toolboxItemIsLabel(item: Blockly.FlyoutItem) {
+    return (
+      item.getType() === STATUS_INDICATOR_LABEL_TYPE ||
+      super.toolboxItemIsLabel(item)
+    );
+  }
+
+  /**
+   * Updates the state of status indicators for hardware-based extensions.
+   */
+  refreshStatusButtons() {
+    for (const item of this.contents) {
+      if (item.element instanceof StatusIndicatorLabel) {
+        item.element.refreshStatus();
+      }
+    }
+  }
+
+  scrollTo(position: number) {
+    super.scrollTo(Math.ceil(position));
+  }
+}

package/src/checkbox_bubble.ts

@@ -203,15 +203,14 @@ export class CheckboxBubble
    * Recalculates this bubble's location, keeping it adjacent to its block.
    */
   updateLocation() {
-    const blockLocation = this.sourceBlock.getRelativeToSurfaceXY();
-    const blockBounds = this.sourceBlock.getHeightWidth();
+    const bounds = this.sourceBlock.getBoundingRectangle();
     const x = this.sourceBlock.workspace.RTL
-      ? blockLocation.x + blockBounds.width + CheckboxBubble.CHECKBOX_MARGIN
-      : blockLocation.x -
+      ? bounds.right + CheckboxBubble.CHECKBOX_MARGIN
+      : bounds.left -
         CheckboxBubble.CHECKBOX_MARGIN -
         CheckboxBubble.CHECKBOX_SIZE;
     const y =
-      blockLocation.y + (blockBounds.height - CheckboxBubble.CHECKBOX_SIZE) / 2;
+      bounds.top + (bounds.getHeight() - CheckboxBubble.CHECKBOX_SIZE) / 2;
     this.moveTo(x, y);
   }
 
@@ -244,6 +243,27 @@ export class CheckboxBubble
     Blockly.browserEvents.unbind(this.clickListener);
   }
 
+  /** See IFocusableNode.getFocusableElement. */
+  getFocusableElement(): HTMLElement | SVGElement {
+    return this.svgRoot;
+  }
+
+  /** See IFocusableNode.getFocusableTree. */
+  getFocusableTree(): Blockly.IFocusableTree {
+    return this.sourceBlock.workspace;
+  }
+
+  /** See IFocusableNode.onNodeFocus. */
+  onNodeFocus(): void {}
+
+  /** See IFocusableNode.onNodeBlur. */
+  onNodeBlur(): void {}
+
+  /** See IFocusableNode.canBeFocused. */
+  canBeFocused(): boolean {
+    return true;
+  }
+
   // These methods are required by the interfaces, but intentionally have no
   // implementation, largely because this bubble's location is fixed relative
   // to its block and is not draggable by the user.

package/src/colours.ts

@@ -53,6 +53,7 @@ const Colours = {
   valueReportBackground: "#FFFFFF",
   valueReportBorder: "#AAAAAA",
   contextualMenuHover: "rgba(77, 151, 255, .25)",
+  menuHover: "rgba(0, 0, 0, .2)",
 };
 
 /**

package/src/context_menu_items.ts

@@ -154,3 +154,27 @@ function deleteNext(deleteList: Blockly.BlockSvg[], eventGroup?: string) {
   }
   Blockly.Events.setGroup(false);
 }
+
+/**
+ * Registers a block duplicate option that duplicates the selected block and
+ * all subsequent blocks in the stack.
+ */
+export function registerDuplicateBlock() {
+  const original =
+    Blockly.ContextMenuRegistry.registry.getItem("blockDuplicate");
+  const duplicateOption = {
+    displayText: original.displayText,
+    preconditionFn: original.preconditionFn,
+    callback(scope: Blockly.ContextMenuRegistry.Scope) {
+      if (!scope.block) return;
+      const data = scope.block.toCopyData(true);
+      if (!data) return;
+      Blockly.clipboard.paste(data, scope.block.workspace);
+    },
+    scopeType: original.scopeType,
+    id: original.id,
+    weight: original.weight,
+  };
+  Blockly.ContextMenuRegistry.registry.unregister(duplicateOption.id);
+  Blockly.ContextMenuRegistry.registry.register(duplicateOption);
+}

package/src/css.ts

@@ -702,16 +702,16 @@ const styles = `
   }
 
   .blocklyAngleCenterPoint {
-    stroke: #fff;
+    stroke: var(--colour-text);
     stroke-width: 1;
-    fill: #fff;
+    fill: var(--colour-text);
   }
 
   .blocklyAngleDragHandle {
-    stroke: #fff;
+    stroke: var(--colour-text);
     stroke-width: 5;
     stroke-opacity: 0.25;
-    fill: #fff;
+    fill: var(--colour-text);
     cursor: pointer;
   }
 
@@ -720,18 +720,18 @@ const styles = `
   }
 
   .blocklyAngleMarks {
-    stroke: #fff;
+    stroke: var(--colour-text);
     stroke-width: 1;
     stroke-opacity: 0.5;
   }
 
   .blocklyAngleGauge {
-    fill: #fff;
+    fill: var(--colour-text);
     fill-opacity: 0.20;
   }
 
   .blocklyAngleLine {
-    stroke: #fff;
+    stroke: var(--colour-text);
     stroke-width: 1;
     stroke-linecap: round;
     pointer-events: none;
@@ -751,8 +751,9 @@ const styles = `
   }
 
   /* Category tree in Toolbox. */
-  .blocklyToolboxDiv {
+  .blocklyToolbox {
     background-color: var(--colour-toolbox);
+    border-right: 1px solid #ddd;
     color: var(--colour-toolboxText);
     overflow-x: visible;
     overflow-y: auto;
@@ -763,6 +764,11 @@ const styles = `
     padding: 0;
   }
 
+  .blocklyToolbox[dir="RTL"] {
+    border-right: none;
+    border-left: 1px solid #ddd;
+  }
+
   .blocklyTreeRoot {
     padding: 4px 0;
   }
@@ -771,7 +777,7 @@ const styles = `
     outline: none;
   }
 
-  .blocklyToolboxDiv .blocklyTreeRow {
+  .blocklyToolbox .blocklyToolboxCategory {
     line-height: 22px;
     margin: 0;
     padding: 0.375rem 0px;
@@ -789,11 +795,11 @@ const styles = `
     margin: 1px 0 8px 5px;
   }
 
-  .blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-    margin-left: 8px;
+  .blocklyToolbox[dir="RTL"] .blocklyToolboxCategory {
+    margin-left: 0px;
   }
 
-  .blocklyTreeRow:hover {
+  .blocklyToolboxCategory:hover {
     color: var(--colour-toolboxHover);
   }
 
@@ -844,7 +850,7 @@ const styles = `
     background-position: -48px -1px;
   }
 
-  .blocklyTreeLabel {
+  .blocklyToolboxCategoryLabel {
     cursor: default;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: .65rem;
@@ -855,7 +861,7 @@ const styles = `
     text-wrap: wrap;
   }
 
-  .blocklyTreeSelected .blocklyTreeLabel {
+  .blocklyToolboxSelected .blocklyToolboxCategoryLabel {
     color: inherit;
   }
 
@@ -1005,12 +1011,12 @@ const styles = `
     z-index: 20000;  /* Arbitrary, but some apps depend on it... */
   }
 
-  .blocklyDropDownDiv .blocklyMenu .blocklyMenuItem:hover {
-    background: var(--colour-menuHover);
+  .blocklyDropDownDiv .blocklyMenu .blocklyMenuItem.blocklyMenuItemHighlight {
+    background-color: var(--colour-menuHover);
   }
 
-  .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem:hover {
-    background: var(--colour-contextualMenuHover);
+  .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem.blocklyMenuItemHighlight {
+    background-color: var(--colour-contextualMenuHover);
   }
 
   .blocklyWidgetDiv .blocklyMenu .blocklyMenuItemDisabled.blocklyMenuItem:hover {
@@ -1162,13 +1168,12 @@ const styles = `
     color: #4c97ff;
   }
   .blocklyDropDownDiv .blocklyMenuItem {
-    color: #fff;
     font-weight: bold;
     min-height: 32px;
     padding: 4px 7em 4px 28px;
   }
-  .high-contrast-theme.blocklyDropDownDiv .blocklyMenuItem {
-    color: #000;
+  .scratch-renderer.blocklyDropDownDiv .blocklyMenuItem .blocklyMenuItemContent {
+    color: var(--colour-text);
   }
   .blocklyToolboxSelected .blocklyTreeLabel {
     color: var(--colour-toolboxText);
@@ -1192,6 +1197,10 @@ const styles = `
     stroke: revert-layer;
     stroke-width: 1;
   }
+
+  .blocklyInsertionMarker > g:not(:last-child) {
+    visibility: hidden;
+  }
 `;
 
 Blockly.Css.register(styles);

package/src/fields/field_matrix.ts

@@ -215,7 +215,7 @@ class FieldMatrix extends Blockly.Field<string> {
       this.arrow_.setAttributeNS(
         "http://www.w3.org/1999/xlink",
         "xlink:href",
-        Blockly.getMainWorkspace().options.pathToMedia + "dropdown-arrow.svg"
+        this.getConstants().FIELD_DROPDOWN_SVG_ARROW_DATAURI
       );
       this.arrow_.style.cursor = "default";
     }
@@ -238,6 +238,25 @@ class FieldMatrix extends Blockly.Field<string> {
    * Show the drop-down menu for editing this field.
    */
   showEditor_() {
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
+    Blockly.DropDownDiv.setColour(
+      sourceBlock.getColour(),
+      sourceBlock.getColourTertiary()
+    );
+
+    const style = sourceBlock.style;
+    if (sourceBlock.isShadow()) {
+      this.originalStyle = sourceBlock.getStyleName();
+      sourceBlock.setStyle(`${this.originalStyle}_selected`);
+    } else if (this.borderRect_) {
+      this.borderRect_.setAttribute(
+        "fill",
+        "colourQuaternary" in style
+          ? `${style.colourQuaternary}`
+          : style.colourTertiary
+      );
+    }
+
     const div = Blockly.DropDownDiv.getContentDiv();
     // Build the SVG DOM.
     const matrixSize =
@@ -286,23 +305,19 @@ class FieldMatrix extends Blockly.Field<string> {
     // Button to clear matrix
     const clearButtonDiv = document.createElement("div");
     clearButtonDiv.className = "scratchMatrixButtonDiv";
-    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
+
     const clearButton = this.createButton_(sourceBlock.getColourSecondary());
     clearButtonDiv.appendChild(clearButton);
     // Button to fill matrix
     const fillButtonDiv = document.createElement("div");
     fillButtonDiv.className = "scratchMatrixButtonDiv";
-    const fillButton = this.createButton_("#FFFFFF");
+    const fillButton = this.createButton_("var(--colour-text)");
     fillButtonDiv.appendChild(fillButton);
 
     buttonDiv.appendChild(clearButtonDiv);
     buttonDiv.appendChild(fillButtonDiv);
     div.appendChild(buttonDiv);
 
-    Blockly.DropDownDiv.setColour(
-      sourceBlock.getColour(),
-      sourceBlock.getColourTertiary()
-    );
     Blockly.DropDownDiv.showPositionedByBlock(
       this,
       sourceBlock,
@@ -328,19 +343,6 @@ class FieldMatrix extends Blockly.Field<string> {
       this.fillMatrix_
     );
 
-    const style = sourceBlock.style;
-    if (sourceBlock.isShadow()) {
-      this.originalStyle = sourceBlock.getStyleName();
-      sourceBlock.setStyle(`${this.originalStyle}_selected`);
-    } else if (this.borderRect_) {
-      this.borderRect_.setAttribute(
-        "fill",
-        "colourQuaternary" in style
-          ? `${style.colourQuaternary}`
-          : style.colourTertiary
-      );
-    }
-
     // Update the matrix for the current value
     this.updateMatrix_();
   }
@@ -350,6 +352,7 @@ class FieldMatrix extends Blockly.Field<string> {
     if (sourceBlock.isShadow()) {
       sourceBlock.setStyle(this.originalStyle);
     }
+    this.updateMatrix_();
   }
 
   /**
@@ -400,12 +403,16 @@ class FieldMatrix extends Blockly.Field<string> {
         this.fillMatrixNode_(
           this.ledButtons_,
           i,
+          sourceBlock.getColourTertiary()
+        );
+        this.fillMatrixNode_(
+          this.ledThumbNodes_,
+          i,
           sourceBlock.getColourSecondary()
         );
-        this.fillMatrixNode_(this.ledThumbNodes_, i, sourceBlock.getColour());
       } else {
-        this.fillMatrixNode_(this.ledButtons_, i, "#FFFFFF");
-        this.fillMatrixNode_(this.ledThumbNodes_, i, "#FFFFFF");
+        this.fillMatrixNode_(this.ledButtons_, i, "var(--colour-text)");
+        this.fillMatrixNode_(this.ledThumbNodes_, i, "var(--colour-text)");
       }
     }
   }
@@ -505,10 +512,14 @@ class FieldMatrix extends Blockly.Field<string> {
    * Unbind mouse move event and clear the paint style.
    */
   onMouseUp() {
-    Blockly.browserEvents.unbind(this.matrixMoveWrapper_);
-    this.matrixMoveWrapper_ = null;
-    Blockly.browserEvents.unbind(this.matrixReleaseWrapper_);
-    this.matrixReleaseWrapper_ = null;
+    if (this.matrixMoveWrapper_) {
+      Blockly.browserEvents.unbind(this.matrixMoveWrapper_);
+      this.matrixMoveWrapper_ = null;
+    }
+    if (this.matrixReleaseWrapper_) {
+      Blockly.browserEvents.unbind(this.matrixReleaseWrapper_);
+      this.matrixReleaseWrapper_ = null;
+    }
     this.paintStyle_ = null;
   }
 

package/src/fields/field_note.ts

@@ -286,7 +286,7 @@ export class FieldNote extends Blockly.FieldTextInput {
    * Show a field with piano keys.
    */
   showEditor_(event: PointerEvent, quietInput = false) {
-    super.showEditor_(event, quietInput);
+    super.showEditor_(event, quietInput, false);
 
     // Build the SVG DOM.
     const div = Blockly.DropDownDiv.getContentDiv();

package/src/fields/scratch_field_angle.ts

@@ -157,7 +157,15 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
    * Show the inline free-text editor on top of the text.
    */
   showEditor_(event: PointerEvent) {
-    super.showEditor_(event);
+    // Mobile browsers have issues with in-line textareas (focus & keyboards).
+    // Also, don't let the parent take ephemeral focus since the drop-down div
+    // below will handle it, instead.
+    const noFocus =
+      Blockly.utils.userAgent.MOBILE ||
+      Blockly.utils.userAgent.ANDROID ||
+      Blockly.utils.userAgent.IPAD;
+    super.showEditor_(event, noFocus, false);
+
     // If there is an existing drop-down someone else owns, hide it immediately and clear it.
     Blockly.DropDownDiv.hideWithoutAnimation();
     Blockly.DropDownDiv.clearContent();

package/src/fields/scratch_field_variable.ts

@@ -94,7 +94,7 @@ export class ScratchFieldVariable extends Blockly.FieldVariable {
    * @returns Array of variable names.
    */
   static dropdownCreate(this: ScratchFieldVariable): Blockly.MenuOption[] {
-    const options = super.dropdownCreate();
+    let options = super.dropdownCreate();
     const type = this.getDefaultType();
     if (type === Constants.BROADCAST_MESSAGE_VARIABLE_TYPE) {
       options.splice(-2, 2, [
@@ -102,16 +102,17 @@ export class ScratchFieldVariable extends Blockly.FieldVariable {
         Constants.NEW_BROADCAST_MESSAGE_ID,
       ]);
     } else if (type === Constants.LIST_VARIABLE_TYPE) {
-      for (const option of options) {
+      options = options.map((option) => {
         if (option[1] === Blockly.RENAME_VARIABLE_ID) {
-          option[0] = ScratchMsgs.translate("RENAME_LIST");
+          return [ScratchMsgs.translate("RENAME_LIST"), option[1]];
         } else if (option[1] === Blockly.DELETE_VARIABLE_ID) {
-          option[0] = ScratchMsgs.translate("DELETE_LIST").replace(
-            "%1",
-            this.getText()
-          );
+          return [
+            ScratchMsgs.translate("DELETE_LIST").replace("%1", this.getText()),
+            option[1],
+          ];
         }
-      }
+        return option;
+      });
     }
 
     return options;

package/src/flyout_checkbox_icon.ts

@@ -10,11 +10,15 @@ import { CheckboxBubble } from "./checkbox_bubble";
 /**
  * Invisible icon that exists solely to host the corresponding checkbox bubble.
  */
-export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
+export class FlyoutCheckboxIcon
+  extends Blockly.icons.Icon
+  implements Blockly.IHasBubble
+{
   private checkboxBubble: CheckboxBubble;
   private type = new Blockly.icons.IconType("checkbox");
 
-  constructor(private sourceBlock: Blockly.BlockSvg) {
+  constructor(protected override sourceBlock: Blockly.BlockSvg) {
+    super(sourceBlock);
     if (this.sourceBlock.workspace.isFlyout) {
       this.checkboxBubble = new CheckboxBubble(this.sourceBlock);
     }
@@ -24,19 +28,11 @@ export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
     return this.type;
   }
 
-  getWeight(): number {
-    return -1;
-  }
-
   getSize(): Blockly.utils.Size {
     // Awful hack to cancel out the default padding added to icons.
     return new Blockly.utils.Size(-8, 0);
   }
 
-  isShownWhenCollapsed(): boolean {
-    return false;
-  }
-
   isClickableInFlyout(): boolean {
     return false;
   }
@@ -55,25 +51,23 @@ export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
 
   dispose() {
     this.checkboxBubble?.dispose();
+    super.dispose();
   }
 
   // These methods are required by the interfaces, but intentionally have no
   // implementation, largely because this icon has no visual representation.
-  applyColour() {}
-
-  hideForInsertionMarker() {}
-
-  updateEditable() {}
-
-  updateCollapsed() {}
-
-  setOffsetInBlock() {}
-
-  onClick() {}
 
   async setBubbleVisible(visible: boolean) {}
 
   initView(pointerDownListener: (e: PointerEvent) => void) {}
+
+  canBeFocused() {
+    return false;
+  }
+
+  getBubble() {
+    return this.checkboxBubble;
+  }
 }
 
 Blockly.registry.register(