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

package/src/fields/{field_dropdown.js → scratch_field_dropdown.ts}

@@ -6,12 +6,12 @@
 
 import * as Blockly from "blockly/core";
 
-class FieldDropdown extends Blockly.FieldDropdown {
-  originalStyle;
+class ScratchFieldDropdown extends Blockly.FieldDropdown {
+  private originalStyle: string;
 
-  showEditor_(event) {
+  showEditor_(event: PointerEvent) {
     super.showEditor_(event);
-    const sourceBlock = this.getSourceBlock();
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
     const style = sourceBlock.style;
     if (sourceBlock.isShadow()) {
       this.originalStyle = sourceBlock.getStyleName();
@@ -19,7 +19,9 @@ class FieldDropdown extends Blockly.FieldDropdown {
     } else if (this.borderRect_) {
       this.borderRect_.setAttribute(
         "fill",
-        style.colourQuaternary ?? style.colourTertiary
+        "colourQuaternary" in style
+          ? `${style.colourQuaternary}`
+          : style.colourTertiary
       );
     }
   }
@@ -36,7 +38,7 @@ class FieldDropdown extends Blockly.FieldDropdown {
 /**
  * Register the field and any dependencies.
  */
-export function registerFieldDropdown() {
+export function registerScratchFieldDropdown() {
   Blockly.fieldRegistry.unregister("field_dropdown");
-  Blockly.fieldRegistry.register("field_dropdown", FieldDropdown);
+  Blockly.fieldRegistry.register("field_dropdown", ScratchFieldDropdown);
 }

package/src/fields/{field_number.js → scratch_field_number.ts}

@@ -23,7 +23,7 @@
  * @author tmickel@mit.edu (Tim Mickel)
  */
 import * as Blockly from "blockly/core";
-import { Colours } from "../colours.js";
+import { Colours } from "../colours";
 
 /**
  * Class for an editable number field.
@@ -45,7 +45,10 @@ import { Colours } from "../colours.js";
  * @extends {Blockly.FieldTextInput}
  * @constructor
  */
-class FieldNumberPicker extends Blockly.FieldTextInput {
+class ScratchFieldNumber extends Blockly.FieldTextInput {
+  private negativeAllowed_ = true;
+  private decimalAllowed_ = true;
+  private exponentialAllowed_ = true;
   /**
    * Fixed width of the num-pad drop-down, in px.
    * @type {number}
@@ -96,7 +99,7 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
     Colours.numPadText +
     '"/></svg>';
 
-  configure_(config) {
+  configure_(config: Blockly.FieldNumberFromJsonConfig) {
     super.configure_(config);
     this.decimalAllowed_ =
       typeof config.precision == "undefined" ||
@@ -114,7 +117,7 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
    * @return {!RegExp} Regular expression for this FieldNumber's restrictor.
    */
   getNumRestrictor() {
-    var pattern = "[\\d]"; // Always allow digits.
+    let pattern = "[\\d]"; // Always allow digits.
     if (this.decimalAllowed_) {
       pattern += "|[\\.]";
     }
@@ -130,11 +133,10 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
   /**
    * Show the inline free-text editor on top of the text and the num-pad if
    * appropriate.
-   * @private
    */
-  showEditor_(e) {
+  showEditor_(e: PointerEvent) {
     // Do not focus on mobile devices so we can show the num-pad
-    var showNumPad = e && e.pointerType === "touch";
+    const showNumPad = e && e.pointerType === "touch";
     super.showEditor_(e, showNumPad);
 
     // Show a numeric keypad in the drop-down on touch
@@ -144,7 +146,7 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
     }
   }
 
-  onHtmlInputKeyDown_(e) {
+  onHtmlInputKeyDown_(e: KeyboardEvent) {
     super.onHtmlInputKeyDown_(e);
     // key can be things like "Backspace", so only validate when it represents a single
     // character so as to allow non-textual input to work as normal.
@@ -158,10 +160,9 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
 
   /**
    * Show the number pad.
-   * @private
    */
-  showNumPad_() {
-    var contentDiv = Blockly.DropDownDiv.getContentDiv();
+  private showNumPad_() {
+    const contentDiv = Blockly.DropDownDiv.getContentDiv();
 
     // Accessibility properties
     contentDiv.setAttribute("role", "menu");
@@ -170,36 +171,37 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
     this.addButtons_(contentDiv);
 
     // Set colour and size of drop-down
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
     Blockly.DropDownDiv.setColour(
-      this.sourceBlock_.parentBlock_.getColour(),
-      this.sourceBlock_.getColourTertiary()
+      sourceBlock.getParent().getColour(),
+      sourceBlock.getColourTertiary()
     );
-    contentDiv.style.width = FieldNumberPicker.DROPDOWN_WIDTH + "px";
+    contentDiv.style.width = ScratchFieldNumber.DROPDOWN_WIDTH + "px";
 
     this.position_();
   }
 
   /**
    * Figure out where to place the drop-down, and move it there.
-   * @private
    */
-  position_() {
+  private position_() {
     // Calculate positioning for the drop-down
     // sourceBlock_ is the rendered shadow field input box
-    var scale = this.sourceBlock_.workspace.scale;
-    var bBox = this.sourceBlock_.getHeightWidth();
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
+    const scale = sourceBlock.workspace.scale;
+    let bBox = sourceBlock.getHeightWidth();
     bBox.width *= scale;
     bBox.height *= scale;
-    var position = this.getAbsoluteXY_();
+    const position = this.getAbsoluteXY_();
     // If we can fit it, render below the shadow block
-    var primaryX = position.x + bBox.width / 2;
-    var primaryY = position.y + bBox.height;
+    const primaryX = position.x + bBox.width / 2;
+    const primaryY = position.y + bBox.height;
     // If we can't fit it, render above the entire parent block
-    var secondaryX = primaryX;
-    var secondaryY = position.y;
+    const secondaryX = primaryX;
+    const secondaryY = position.y;
 
     Blockly.DropDownDiv.setBoundsElement(
-      this.sourceBlock_.workspace.getParentSvg().parentNode
+      sourceBlock.workspace.getParentSvg().parentElement
     );
     Blockly.DropDownDiv.show(
       this,
@@ -215,17 +217,18 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
   /**
    * Add number, punctuation, and erase buttons to the numeric keypad's content
    * div.
-   * @param {Element} contentDiv The div for the numeric keypad.
-   * @private
+   *
+   * @param contentDiv The div for the numeric keypad.
    */
-  addButtons_(contentDiv) {
-    var buttonColour = this.sourceBlock_.parentBlock_.getColour();
-    var buttonBorderColour = this.sourceBlock_.parentBlock_.getColourTertiary();
+  private addButtons_(contentDiv: Element) {
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg;
+    const buttonColour = sourceBlock.getParent().getColour();
+    const buttonBorderColour = sourceBlock.getParent().getColourTertiary();
 
     // Add numeric keypad buttons
-    var buttons = FieldNumberPicker.NUMPAD_BUTTONS;
-    for (var i = 0, buttonText; (buttonText = buttons[i]); i++) {
-      var button = document.createElement("button");
+    const buttons = ScratchFieldNumber.NUMPAD_BUTTONS;
+    for (let i = 0, buttonText; (buttonText = buttons[i]); i++) {
+      const button = document.createElement("button");
       button.setAttribute("role", "menuitem");
       button.setAttribute("class", "blocklyNumPadButton");
       button.setAttribute(
@@ -258,7 +261,7 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
       contentDiv.appendChild(button);
     }
     // Add erase button to the end
-    var eraseButton = document.createElement("button");
+    const eraseButton = document.createElement("button");
     eraseButton.setAttribute("role", "menuitem");
     eraseButton.setAttribute("class", "blocklyNumPadButton");
     eraseButton.setAttribute(
@@ -272,8 +275,8 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
     );
     eraseButton.title = "Delete";
 
-    var eraseImage = document.createElement("img");
-    eraseImage.src = FieldNumberPicker.NUMPAD_DELETE_ICON;
+    const eraseImage = document.createElement("img");
+    eraseImage.src = ScratchFieldNumber.NUMPAD_DELETE_ICON;
     eraseButton.appendChild(eraseImage);
 
     Blockly.browserEvents.bind(
@@ -288,19 +291,20 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
   /**
    * Call for when a num-pad number or punctuation button is touched.
    * Determine what the user is inputting and update the text field appropriately.
-   * @param {Event} e DOM event triggering the touch.
+   *
+   * @param e DOM event triggering the touch.
    */
-  numPadButtonTouch(e) {
+  numPadButtonTouch(e: PointerEvent) {
     // String of the button (e.g., '7')
-    var spliceValue = e.target.innerText;
+    const spliceValue = (e.target as HTMLElement).innerText;
     // Old value of the text field
-    var oldValue = this.htmlInput_.value;
+    const oldValue = this.htmlInput_.value;
     // Determine the selected portion of the text field
-    var selectionStart = this.htmlInput_.selectionStart;
-    var selectionEnd = this.htmlInput_.selectionEnd;
+    const selectionStart = this.htmlInput_.selectionStart;
+    const selectionEnd = this.htmlInput_.selectionEnd;
 
     // Splice in the new value
-    var newValue =
+    const newValue =
       oldValue.slice(0, selectionStart) +
       spliceValue +
       oldValue.slice(selectionEnd);
@@ -318,14 +322,15 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
   /**
    * Call for when the num-pad erase button is touched.
    * Determine what the user is asking to erase, and erase it.
-   * @param {Event} e DOM event triggering the touch.
+   *
+   * @param e DOM event triggering the touch.
    */
-  numPadEraseButtonTouch(e) {
+  numPadEraseButtonTouch(e: PointerEvent) {
     // Old value of the text field
-    var oldValue = this.htmlInput_.value;
+    const oldValue = this.htmlInput_.value;
     // Determine what is selected to erase (if anything)
-    var selectionStart = this.htmlInput_.selectionStart;
-    var selectionEnd = this.htmlInput_.selectionEnd;
+    let selectionStart = this.htmlInput_.selectionStart;
+    const selectionEnd = this.htmlInput_.selectionEnd;
 
     // If selection is zero-length, shift start to the left 1 character
     if (selectionStart == selectionEnd) {
@@ -333,7 +338,7 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
     }
 
     // Cut out selected range
-    var newValue =
+    const newValue =
       oldValue.slice(0, selectionStart) + oldValue.slice(selectionEnd);
 
     this.updateDisplay_(newValue, selectionStart);
@@ -347,11 +352,11 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
 
   /**
    * Update the displayed value and resize/scroll the text field as needed.
-   * @param {string} newValue The new text to display.
-   * @param {string} newSelection The new index to put the cursor
-   * @private
+   *
+   * @param newValue The new text to display.
+   * @param newSelection The new index to put the cursor
    */
-  updateDisplay_(newValue, newSelection) {
+  private updateDisplay_(newValue: string, newSelection: number) {
     this.setEditorValue_(newValue);
     // Resize and scroll the text field appropriately
     const htmlInput = this.htmlInput_;
@@ -369,12 +374,12 @@ class FieldNumberPicker extends Blockly.FieldTextInput {
   }
 }
 
-FieldNumberPicker.prototype.DEFAULT_VALUE = "";
+ScratchFieldNumber.prototype.DEFAULT_VALUE = "";
 
 /**
  * Register the field and any dependencies.
  */
-export function registerFieldNumber() {
+export function registerScratchFieldNumber() {
   Blockly.fieldRegistry.unregister("field_number");
-  Blockly.fieldRegistry.register("field_number", FieldNumberPicker);
+  Blockly.fieldRegistry.register("field_number", ScratchFieldNumber);
 }

package/src/fields/{field_variable.js → scratch_field_variable.ts}

@@ -23,24 +23,31 @@
  * @author fraser@google.com (Neil Fraser)
  */
 import * as Blockly from "blockly/core";
-import * as Constants from "../constants.js";
+import * as Constants from "../constants";
 import { ScratchMsgs } from "../../msg/scratch_msgs.js";
-import { createVariable, renameVariable } from "../variables.js";
+import { createVariable, renameVariable } from "../variables";
+import type { ScratchVariableModel } from "../scratch_variable_model";
 
-class FieldVariable extends Blockly.FieldVariable {
-  originalStyle;
+export class ScratchFieldVariable extends Blockly.FieldVariable {
+  private originalStyle: string;
 
-  constructor(varName, validator, variableTypes, defaultType, config) {
+  constructor(
+    varName: string | null | typeof Blockly.Field.SKIP_SETUP,
+    validator?: Blockly.FieldVariableValidator,
+    variableTypes?: string[],
+    defaultType?: string,
+    config?: Blockly.FieldVariableConfig
+  ) {
     super(varName, validator, variableTypes, defaultType, config);
-    this.menuGenerator_ = FieldVariable.dropdownCreate;
+    this.menuGenerator_ = ScratchFieldVariable.dropdownCreate;
   }
 
   initModel() {
-    if (!this.variable) {
+    if (!this.getVariable()) {
       const sourceBlock = this.getSourceBlock();
       if (sourceBlock) {
         const broadcastVariable = this.initFlyoutBroadcast(
-          sourceBlock.workspace
+          sourceBlock.workspace as Blockly.WorkspaceSvg
         );
         if (broadcastVariable) {
           this.doValueUpdate_(broadcastVariable.getId());
@@ -59,12 +66,14 @@ class FieldVariable extends Blockly.FieldVariable {
    * selected option when the workspace is refreshed.
    * Re-sort the broadcast messages by name, and set the field value to the id
    * of the variable that comes first in sorted order.
-   * @param {!Blockly.Workspace} workspace The flyout workspace containing the
-   * broadcast block.
-   * @return {string} The variable of type 'broadcast_msg' that comes
-   * first in sorted order.
+   *
+   * @param workspace The flyout workspace containing the broadcast block.
+   * @returns The variable of type 'broadcast_msg' that comes first in sorted
+   * order.
    */
-  initFlyoutBroadcast(workspace) {
+  initFlyoutBroadcast(
+    workspace: Blockly.WorkspaceSvg
+  ): Blockly.IVariableModel<Blockly.IVariableState> {
     const broadcastVars = workspace.getVariablesOfType(
       Constants.BROADCAST_MESSAGE_VARIABLE_TYPE
     );
@@ -81,10 +90,10 @@ class FieldVariable extends Blockly.FieldVariable {
   /**
    * Return a sorted list of variable names for variable dropdown menus.
    * Include a special option at the end for creating a new variable name.
-   * @return {!Array.<string>} Array of variable names.
-   * @this {Blockly.FieldVariable}
+   *
+   * @returns Array of variable names.
    */
-  static dropdownCreate() {
+  static dropdownCreate(this: ScratchFieldVariable): Blockly.MenuOption[] {
     const options = super.dropdownCreate();
     const type = this.getDefaultType();
     if (type === Constants.BROADCAST_MESSAGE_VARIABLE_TYPE) {
@@ -112,16 +121,17 @@ class FieldVariable extends Blockly.FieldVariable {
    * Special case the 'Rename variable...', 'Delete variable...',
    * and 'New message...' options.
    * In the rename case, prompt the user for a new name.
-   * @param {!Blockly.Menu} menu The Menu component clicked.
-   * @param {!Blockly.MenuItem} menuItem The MenuItem selected within menu.
+   *
+   * @param menu The Menu component clicked.
+   * @param menuItem The MenuItem selected within menu.
    */
-  onItemSelected_(menu, menuItem) {
+  onItemSelected_(menu: Blockly.Menu, menuItem: Blockly.MenuItem) {
     const sourceBlock = this.getSourceBlock();
     if (sourceBlock && !sourceBlock.isDeadOrDying()) {
       const selectedItem = menuItem.getValue();
       if (selectedItem === Constants.NEW_BROADCAST_MESSAGE_ID) {
         createVariable(
-          sourceBlock.workspace,
+          sourceBlock.workspace as Blockly.WorkspaceSvg,
           (varId) => {
             if (varId) {
               this.setValue(varId);
@@ -131,24 +141,33 @@ class FieldVariable extends Blockly.FieldVariable {
         );
         return;
       } else if (selectedItem === Blockly.RENAME_VARIABLE_ID) {
-        renameVariable(sourceBlock.workspace, this.variable);
+        renameVariable(
+          sourceBlock.workspace as Blockly.WorkspaceSvg,
+          this.getVariable() as ScratchVariableModel
+        );
         return;
       }
     }
     super.onItemSelected_(menu, menuItem);
   }
 
-  showEditor_(event) {
+  showEditor_(event: PointerEvent) {
     super.showEditor_(event);
     const sourceBlock = this.getSourceBlock();
-    const style = sourceBlock.style;
+    const styleName = sourceBlock.getStyleName();
+    const style = (sourceBlock.workspace as Blockly.WorkspaceSvg)
+      .getRenderer()
+      .getConstants()
+      .getBlockStyle(styleName);
     if (sourceBlock.isShadow()) {
-      this.originalStyle = sourceBlock.getStyleName();
+      this.originalStyle = styleName;
       sourceBlock.setStyle(`${this.originalStyle}_selected`);
     } else if (this.borderRect_) {
       this.borderRect_.setAttribute(
         "fill",
-        style.colourQuaternary ?? style.colourTertiary
+        "colourQuaternary" in style
+          ? `${style.colourQuaternary}`
+          : style.colourTertiary
       );
     }
   }
@@ -165,7 +184,7 @@ class FieldVariable extends Blockly.FieldVariable {
 /**
  * Register the field and any dependencies.
  */
-export function registerFieldVariable() {
+export function registerScratchFieldVariable() {
   Blockly.fieldRegistry.unregister("field_variable");
-  Blockly.fieldRegistry.register("field_variable", FieldVariable);
+  Blockly.fieldRegistry.register("field_variable", ScratchFieldVariable);
 }

package/src/{flyout_checkbox_icon.js → flyout_checkbox_icon.ts}

@@ -5,55 +5,51 @@
  */
 
 import * as Blockly from "blockly/core";
-import { CheckboxBubble } from "./checkbox_bubble.js";
+import { CheckboxBubble } from "./checkbox_bubble";
 
 /**
  * Invisible icon that exists solely to host the corresponding checkbox bubble.
- * @implements {Blockly.IIcon}
- * @implements {Blockly.IHasBubble}
  */
-export class FlyoutCheckboxIcon {
-  sourceBlock;
-  checkboxBubble;
-  type = new Blockly.icons.IconType("checkbox");
+export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
+  private checkboxBubble: CheckboxBubble;
+  private type = new Blockly.icons.IconType("checkbox");
 
-  constructor(sourceBlock) {
-    this.sourceBlock = sourceBlock;
+  constructor(private sourceBlock: Blockly.BlockSvg) {
     if (this.sourceBlock.workspace.isFlyout) {
       this.checkboxBubble = new CheckboxBubble(this.sourceBlock);
     }
   }
 
-  getType() {
+  getType(): Blockly.icons.IconType<FlyoutCheckboxIcon> {
     return this.type;
   }
 
-  getWeight() {
+  getWeight(): number {
     return -1;
   }
 
-  getSize() {
+  getSize(): Blockly.utils.Size {
     // Awful hack to cancel out the default padding added to icons.
     return new Blockly.utils.Size(-8, 0);
   }
 
-  isShownWhenCollapsed() {
+  isShownWhenCollapsed(): boolean {
     return false;
   }
 
-  isClickableInFlyout() {
+  isClickableInFlyout(): boolean {
     return false;
   }
 
-  bubbleIsVisible() {
+  bubbleIsVisible(): boolean {
     return this.sourceBlock.workspace.isFlyout;
   }
 
-  onLocationChange(blockOrigin) {
+  onLocationChange(blockOrigin: Blockly.utils.Coordinate) {
     this.checkboxBubble?.updateLocation();
   }
 
-  setChecked(checked) {
+  setChecked(checked: boolean) {
     this.checkboxBubble?.setChecked(checked);
   }
 
@@ -75,9 +71,9 @@ export class FlyoutCheckboxIcon {
 
   onClick() {}
 
-  async setBubbleVisible(visible) {}
+  async setBubbleVisible(visible: boolean) {}
 
-  initView(pointerDownListener) {}
+  initView(pointerDownListener: (e: PointerEvent) => void) {}
 }
 
 Blockly.registry.register(

package/src/{glows.js → glows.ts}

@@ -1,30 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import * as Blockly from "blockly/core";
-import { Colours } from "./colours.js";
+import { Colours } from "./colours";
 
 /**
  * Glow/unglow a stack in the workspace.
- * @param {?string} id ID of block which starts the stack.
- * @param {boolean} isGlowingStack Whether to glow the stack.
+ *
+ * @param id ID of block which starts the stack.
+ * @param isGlowingStack Whether to glow the stack.
  */
-export function glowStack(id, isGlowingStack) {
-  if (id) {
-    const block =
-      Blockly.getMainWorkspace().getBlockById(id) ||
-      Blockly.getMainWorkspace().getFlyout().getWorkspace().getBlockById(id);
-    if (!block) {
-      throw "Tried to glow block that does not exist.";
-    }
+export function glowStack(id: string, isGlowingStack: boolean) {
+  const block = (Blockly.getMainWorkspace().getBlockById(id) ||
+    (Blockly.getMainWorkspace() as Blockly.WorkspaceSvg)
+      .getFlyout()
+      .getWorkspace()
+      .getBlockById(id)) as Blockly.BlockSvg;
+  if (!block) {
+    throw "Tried to glow block that does not exist.";
+  }
 
-    const svg = block.getSvgRoot();
-    if (isGlowingStack && !svg.hasAttribute("filter")) {
-      svg.setAttribute("filter", "url(#blocklyStackGlowFilter)");
-    } else if (!isGlowingStack && svg.hasAttribute("filter")) {
-      svg.removeAttribute("filter");
-    }
+  const svg = block.getSvgRoot();
+  if (isGlowingStack && !svg.hasAttribute("filter")) {
+    svg.setAttribute("filter", "url(#blocklyStackGlowFilter)");
+  } else if (!isGlowingStack && svg.hasAttribute("filter")) {
+    svg.removeAttribute("filter");
   }
 }
 
-export function buildGlowFilter(workspace) {
+/**
+ * Creates an SVG filter to render block glows and adds it to the DOM.
+ * @param workspace The workspace whose DOM the filter will be inserted in.
+ */
+export function buildGlowFilter(workspace: Blockly.WorkspaceSvg) {
   const svg = workspace.getParentSvg();
   const defs = Blockly.utils.dom.createSvgElement(
     Blockly.utils.Svg.DEFS,