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

package/src/fields/{field_textinput_removable.js → field_textinput_removable.ts}

@@ -23,21 +23,14 @@
  * @author pkaplan@media.mit.edu (Paul Kaplan)
  */
 import * as Blockly from "blockly/core";
+import type { ProcedureDeclarationBlock } from "../blocks/procedures";
 
 /**
  * Class for an editable text field displaying a deletion icon when selected.
- * @param {string} text The initial content of the field.
- * @param {Function=} opt_validator An optional function that is called
- *     to validate any constraints on what the user entered.  Takes the new
- *     text as an argument and returns either the accepted text, a replacement
- *     text, or null to abort the change.
- * @param {RegExp=} opt_restrictor An optional regular expression to restrict
- *     typed text to. Text that doesn't match the restrictor will never show
- *     in the text field.
- * @extends {Blockly.FieldTextInput}
- * @constructor
  */
 export class FieldTextInputRemovable extends Blockly.FieldTextInput {
+  private removeButtonMouseWrapper_?: Blockly.browserEvents.Data;
+
   /**
    * Show the inline free-text editor on top of the text with the remove button.
    */
@@ -68,11 +61,12 @@ export class FieldTextInputRemovable extends Blockly.FieldTextInput {
   /**
    * Function to call when remove button is called. Checks for removeFieldCallback
    * on sourceBlock and calls it if possible.
-   * @private
    */
-  removeCallback_() {
-    if (this.sourceBlock_ && this.sourceBlock_.removeFieldCallback) {
-      this.sourceBlock_.removeFieldCallback(this);
+  private removeCallback_() {
+    if (this.sourceBlock_ && "removeFieldCallback" in this.sourceBlock_) {
+      (this.sourceBlock_ as ProcedureDeclarationBlock).removeFieldCallback(
+        this
+      );
     } else {
       console.warn("Expected a source block with removeFieldCallback");
     }
@@ -81,13 +75,16 @@ export class FieldTextInputRemovable extends Blockly.FieldTextInput {
   /**
    * Helper function to construct a FieldTextInputRemovable from a JSON arg object,
    * dereferencing any string table references.
-   * @param {!Object} options A JSON object with options (text, class, and
-   *                          spellcheck).
-   * @returns {!Blockly.FieldTextInputRemovable} The new text input.
-   * @public
+   *
+   * @param options A JSON object with options (text, class, and spellcheck).
+   * @returns The new text input.
    */
-  fromJson(options) {
-    const text = Blockly.utils.replaceMessageReferences(options["text"]);
+  fromJson(
+    options: Blockly.FieldTextInputFromJsonConfig
+  ): FieldTextInputRemovable {
+    const text = Blockly.utils.parsing.replaceMessageReferences(
+      options["text"]
+    );
     const field = new FieldTextInputRemovable(text, null, options);
     if (typeof options["spellcheck"] == "boolean") {
       field.setSpellcheck(options["spellcheck"]);

package/src/fields/{field_variable_getter.js → field_variable_getter.ts}

@@ -27,29 +27,36 @@ import * as Blockly from "blockly/core";
 
 /**
  * Class for a variable getter field.
- * @param {string} allowedVariableType The type of variables this field can display.
  */
 class FieldVariableGetter extends Blockly.FieldLabel {
-  constructor(allowedVariableType = "") {
+  private variable: Blockly.IVariableModel<Blockly.IVariableState> | null =
+    null;
+
+  /**
+   * Creates a new FieldVariableGetter.
+   *
+   * @param allowedVariableType The type of variables this field can display.
+   */
+  constructor(private allowedVariableType = "") {
     super(Blockly.Field.SKIP_SETUP);
     this.SERIALIZABLE = true;
-    this.allowedVariableType = allowedVariableType;
-    this.variable = null;
   }
 
   /**
    * Returns the ID of this field's variable.
-   * @return {string} The ID of this field's variable.
+   *
+   * @returns The ID of this field's variable.
    */
-  getValue() {
+  getValue(): string {
     return this.variable?.getId() ?? "";
   }
 
   /**
    * Returns the name of this field's variable.
-   * @return {string} The name of this field's variable.
+   *
+   * @returns The name of this field's variable.
    */
-  getText() {
+  getText(): string {
     return this.variable?.getName() ?? "";
   }
 
@@ -57,19 +64,19 @@ class FieldVariableGetter extends Blockly.FieldLabel {
    * Get the variable model for the variable associated with this field.
    * Not guaranteed to be in the variable map on the workspace (e.g. if accessed
    * after the variable has been deleted).
-   * @return {?Blockly.VariableModel} the selected variable, or null if none was
-   *     selected.
-   * @package
+   *
+   * @returns the selected variable, or null if none was selected.
    */
-  getVariable() {
+  getVariable(): Blockly.IVariableModel<Blockly.IVariableState> | null {
     return this.variable;
   }
 
   /**
    * Updates this field's variable to one with the given ID.
-   * @param {string} newVariableId ID of a variable this field should represent.
+   *
+   * @param newVariableId ID of a variable this field should represent.
    */
-  doValueUpdate_(newVariableId) {
+  doValueUpdate_(newVariableId: string) {
     super.doValueUpdate_(newVariableId);
     const workspace = this.getSourceBlock().workspace;
     this.variable = Blockly.Variables.getVariable(workspace, newVariableId);
@@ -85,15 +92,15 @@ class FieldVariableGetter extends Blockly.FieldLabel {
     this.forceRerender();
   }
 
-  static fromJson(options) {
+  static fromJson(options: FieldVariableGetterConfig) {
     return new FieldVariableGetter(options["allowedVariableType"]);
   }
 
-  fromXml(element) {
+  fromXml(element: Element) {
     this.setValue(element.getAttribute("id"));
   }
 
-  toXml(element) {
+  toXml(element: Element): Element {
     element.setAttribute("id", this.variable.getId());
     element.setAttribute("variabletype", this.variable.getType());
     element.textContent = this.variable.getName();
@@ -101,6 +108,10 @@ class FieldVariableGetter extends Blockly.FieldLabel {
   }
 }
 
+interface FieldVariableGetterConfig extends Blockly.FieldLabelConfig {
+  allowedVariableType?: string;
+}
+
 /**
  * Register the field and any dependencies.
  */

package/src/fields/{field_vertical_separator.js → field_vertical_separator.ts}

@@ -26,10 +26,10 @@ import * as Blockly from "blockly/core";
 
 /**
  * Class for a vertical separator line.
- * @extends {Blockly.Field}
- * @constructor
  */
 class FieldVerticalSeparator extends Blockly.Field {
+  private lineElement?: SVGLineElement;
+
   constructor() {
     super(Blockly.Field.SKIP_SETUP);
     /**
@@ -39,17 +39,10 @@ class FieldVerticalSeparator extends Blockly.Field {
   }
 
   /**
-   * Construct a FieldVerticalSeparator from a JSON arg object.
-   * @param {!Object} _element A JSON object with options (unused, but passed in
-   *     by Field.fromJson).
-   * @returns {!Blockly.FieldVerticalSeparator} The new field instance.
-   * @package
-   * @nocollapse
+   * Construct a FieldVerticalSeparator.
+   * @returns The new field instance.
    */
-  static fromJson = function (
-    /* eslint-disable no-unused-vars */ _element
-    /* eslint-enable no-unused-vars */
-  ) {
+  static fromJson = function () {
     return new FieldVerticalSeparator();
   };
 
@@ -57,14 +50,14 @@ class FieldVerticalSeparator extends Blockly.Field {
    * Install this field on a block.
    */
   initView() {
-    const height = 10 * this.getConstants().GRID_UNIT;
+    const height =
+      10 * (this.getConstants() as Blockly.zelos.ConstantProvider).GRID_UNIT;
     this.size_ = new Blockly.utils.Size(1, height);
 
-    /** @type {SVGElement} */
-    this.lineElement_ = Blockly.utils.dom.createSvgElement(
+    this.lineElement = Blockly.utils.dom.createSvgElement(
       "line",
       {
-        stroke: this.sourceBlock_.getColourSecondary(),
+        stroke: (this.sourceBlock_ as Blockly.BlockSvg).getColourSecondary(),
         "stroke-linecap": "round",
         x1: 0,
         y1: 0,
@@ -79,19 +72,17 @@ class FieldVerticalSeparator extends Blockly.Field {
    * Set the height of the line element, without adjusting the field's height.
    * This allows the line's height to be changed without causing it to be
    * centered with the new height (needed for correct rendering of hat blocks).
-   * @param {number} newHeight the new height for the line.
+   * @param newHeight the new height for the line.
    * @package
    */
-  setLineHeight(newHeight) {
-    this.lineElement_.setAttribute("y2", newHeight);
+  setLineHeight(newHeight: number) {
+    this.lineElement.setAttribute("y2", `${newHeight}`);
   }
 
   /**
    * Get the value of this field. A no-op in this case.
-   * @return {string} null.
-   * @override
    */
-  getValue() {
+  getValue(): string | null {
     return null;
   }
 
@@ -101,19 +92,13 @@ class FieldVerticalSeparator extends Blockly.Field {
 
   /**
    * Set the value of this field. A no-op in this case.
-   * @param {?string} src New value.
-   * @override
    */
-  setValue(
-    /* eslint-disable no-unused-vars */ src
-    /* eslint-enable no-unused-vars */
-  ) {
+  setValue() {
     return;
   }
 
   /**
    * Separator lines are fixed width, no need to render.
-   * @private
    */
   render_() {
     // NOP
@@ -121,7 +106,6 @@ class FieldVerticalSeparator extends Blockly.Field {
 
   /**
    * Separator lines are fixed width, no need to update.
-   * @private
    */
   updateWidth() {
     // NOP

package/src/fields/{field_angle.js → scratch_field_angle.ts}

@@ -26,17 +26,42 @@
 
 import * as Blockly from "blockly/core";
 
-class FieldAngle extends Blockly.FieldNumber {
+class ScratchFieldAngle extends Blockly.FieldNumber {
   /**
-   * Construct a FieldAngle from a JSON arg object.
-   * @param {!Object} options A JSON object with options (angle).
-   * @returns {!Blockly.FieldAngle} The new field instance.
-   * @package
-   * @nocollapse
+   * The highlighted portion of the angle picker circle, between 0º and the
+   * selected angle.
    */
-  fromJson(options) {
-    return new FieldAngle(options["angle"]);
-  }
+  private gauge?: SVGPathElement;
+
+  /**
+   * The line to the angle picker handle.
+   */
+  private line?: SVGLineElement;
+
+  /**
+   * The grabbable handle used to choose an angle.
+   */
+  private handle?: SVGGElement;
+
+  /**
+   * The arrow graphic shown on the grab handle.
+   */
+  private arrow?: SVGImageElement;
+
+  /**
+   * Opaque identifier used to unbind event listener in dispose().
+   */
+  private mouseDownWrapper_: Blockly.browserEvents.Data;
+
+  /**
+   * Opaque identifier used to unbind event listener in dispose().
+   */
+  private mouseMoveWrapper: Blockly.browserEvents.Data;
+
+  /**
+   * Opaque identifier used to unbind event listener in dispose().
+   */
+  private mouseUpWrapper: Blockly.browserEvents.Data;
 
   /**
    * Round angles to the nearest 15 degrees when using mouse.
@@ -89,7 +114,8 @@ class FieldAngle extends Blockly.FieldNumber {
   ARROW_WIDTH = this.HANDLE_RADIUS;
 
   /**
-   * Half the stroke-width used for the "glow" around the drag handle, rounded up to nearest whole pixel
+   * Half the stroke-width used for the "glow" around the drag handle, rounded
+   * up to nearest whole pixel.
    */
 
   HANDLE_GLOW_WIDTH = 3;
@@ -111,36 +137,33 @@ class FieldAngle extends Blockly.FieldNumber {
   ARROW_SVG_PATH = "icons/arrow.svg";
 
   /**
-   * Clean up this FieldAngle, as well as the inherited FieldTextInput.
-   * @return {!Function} Closure to call on destruction of the WidgetDiv.
-   * @private
+   * Clean up this FieldAngle, as well as the inherited FieldNumber.
    */
   dispose() {
     super.dispose();
-    this.gauge_ = null;
+    this.gauge = null;
     if (this.mouseDownWrapper_) {
       Blockly.browserEvents.unbind(this.mouseDownWrapper_);
     }
-    if (this.mouseUpWrapper_) {
-      Blockly.browserEvents.unbind(this.mouseUpWrapper_);
+    if (this.mouseUpWrapper) {
+      Blockly.browserEvents.unbind(this.mouseUpWrapper);
     }
-    if (this.mouseMoveWrapper_) {
-      Blockly.browserEvents.unbind(this.mouseMoveWrapper_);
+    if (this.mouseMoveWrapper) {
+      Blockly.browserEvents.unbind(this.mouseMoveWrapper);
     }
   }
 
   /**
    * Show the inline free-text editor on top of the text.
-   * @private
    */
-  showEditor_(event) {
+  showEditor_(event: PointerEvent) {
     super.showEditor_(event);
     // If there is an existing drop-down someone else owns, hide it immediately and clear it.
     Blockly.DropDownDiv.hideWithoutAnimation();
     Blockly.DropDownDiv.clearContent();
-    var div = Blockly.DropDownDiv.getContentDiv();
+    const div = Blockly.DropDownDiv.getContentDiv();
     // Build the SVG DOM.
-    var svg = Blockly.utils.dom.createSvgElement(
+    const svg = Blockly.utils.dom.createSvgElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -158,19 +181,23 @@ class FieldAngle extends Blockly.FieldNumber {
         cx: this.HALF,
         cy: this.HALF,
         r: this.RADIUS,
-        fill: this.getSourceBlock().getParent().getColourSecondary(),
-        stroke: this.getSourceBlock().getParent().getColourTertiary(),
+        fill: (
+          this.getSourceBlock().getParent() as Blockly.BlockSvg
+        ).getColourSecondary(),
+        stroke: (
+          this.getSourceBlock().getParent() as Blockly.BlockSvg
+        ).getColourTertiary(),
         class: "blocklyAngleCircle",
       },
       svg
     );
-    this.gauge_ = Blockly.utils.dom.createSvgElement(
+    this.gauge = Blockly.utils.dom.createSvgElement(
       "path",
       { class: "blocklyAngleGauge" },
       svg
     );
-    // The moving line, x2 and y2 are set in updateGraph_
-    this.line_ = Blockly.utils.dom.createSvgElement(
+    // The moving line, x2 and y2 are set in updateGraph
+    this.line = Blockly.utils.dom.createSvgElement(
       "line",
       {
         x1: this.HALF,
@@ -180,7 +207,7 @@ class FieldAngle extends Blockly.FieldNumber {
       svg
     );
     // The fixed vertical line at the offset
-    var offsetRadians = (Math.PI * this.OFFSET) / 180;
+    const offsetRadians = (Math.PI * this.OFFSET) / 180;
     Blockly.utils.dom.createSvgElement(
       "line",
       {
@@ -193,7 +220,7 @@ class FieldAngle extends Blockly.FieldNumber {
       svg
     );
     // Draw markers around the edge.
-    for (var angle = 0; angle < 360; angle += 15) {
+    for (let angle = 0; angle < 360; angle += 15) {
       Blockly.utils.dom.createSvgElement(
         "line",
         {
@@ -220,7 +247,7 @@ class FieldAngle extends Blockly.FieldNumber {
       svg
     );
     // Handle group: a circle and the arrow image
-    this.handle_ = Blockly.utils.dom.createSvgElement("g", {}, svg);
+    this.handle = Blockly.utils.dom.createSvgElement("g", {}, svg);
     Blockly.utils.dom.createSvgElement(
       "circle",
       {
@@ -229,9 +256,9 @@ class FieldAngle extends Blockly.FieldNumber {
         r: this.HANDLE_RADIUS,
         class: "blocklyAngleDragHandle",
       },
-      this.handle_
+      this.handle
     );
-    this.arrowSvg_ = Blockly.utils.dom.createSvgElement(
+    this.arrow = Blockly.utils.dom.createSvgElement(
       "image",
       {
         width: this.ARROW_WIDTH,
@@ -240,9 +267,9 @@ class FieldAngle extends Blockly.FieldNumber {
         y: -this.ARROW_WIDTH / 2,
         class: "blocklyAngleDragArrow",
       },
-      this.handle_
+      this.handle
     );
-    this.arrowSvg_.setAttributeNS(
+    this.arrow.setAttributeNS(
       "http://www.w3.org/1999/xlink",
       "xlink:href",
       Blockly.getMainWorkspace().options.pathToMedia + this.ARROW_SVG_PATH
@@ -250,32 +277,36 @@ class FieldAngle extends Blockly.FieldNumber {
 
     Blockly.DropDownDiv.setColour(
       this.getSourceBlock().getParent().getColour(),
-      this.getSourceBlock().getParent().getColourTertiary()
+      (
+        this.getSourceBlock().getParent() as Blockly.BlockSvg
+      ).getColourTertiary()
+    );
+    Blockly.DropDownDiv.showPositionedByBlock(
+      this,
+      this.getSourceBlock() as Blockly.BlockSvg
     );
-    Blockly.DropDownDiv.showPositionedByBlock(this, this.getSourceBlock());
 
     this.mouseDownWrapper_ = Blockly.browserEvents.bind(
-      this.handle_,
+      this.handle,
       "mousedown",
       this,
       this.onMouseDown
     );
 
-    this.updateGraph_();
+    this.updateGraph();
   }
 
   /**
    * Set the angle to match the mouse's position.
-   * @param {!Event} e Mouse move event.
    */
   onMouseDown() {
-    this.mouseMoveWrapper_ = Blockly.browserEvents.bind(
+    this.mouseMoveWrapper = Blockly.browserEvents.bind(
       document.body,
       "mousemove",
       this,
       this.onMouseMove
     );
-    this.mouseUpWrapper_ = Blockly.browserEvents.bind(
+    this.mouseUpWrapper = Blockly.browserEvents.bind(
       document.body,
       "mouseup",
       this,
@@ -285,23 +316,22 @@ class FieldAngle extends Blockly.FieldNumber {
 
   /**
    * Set the angle to match the mouse's position.
-   * @param {!Event} e Mouse move event.
    */
   onMouseUp() {
-    Blockly.browserEvents.unbind(this.mouseMoveWrapper_);
-    Blockly.browserEvents.unbind(this.mouseUpWrapper_);
+    Blockly.browserEvents.unbind(this.mouseMoveWrapper);
+    Blockly.browserEvents.unbind(this.mouseUpWrapper);
   }
 
   /**
    * Set the angle to match the mouse's position.
-   * @param {!Event} e Mouse move event.
+   * @param e Mouse move event.
    */
-  onMouseMove(e) {
+  onMouseMove(e: PointerEvent) {
     e.preventDefault();
-    var bBox = this.gauge_.ownerSVGElement.getBoundingClientRect();
-    var dx = e.clientX - bBox.left - this.HALF;
-    var dy = e.clientY - bBox.top - this.HALF;
-    var angle = Math.atan(-dy / dx);
+    const bBox = this.gauge.ownerSVGElement.getBoundingClientRect();
+    const dx = e.clientX - bBox.left - this.HALF;
+    const dy = e.clientY - bBox.top - this.HALF;
+    let angle = Math.atan(-dy / dx);
     if (isNaN(angle)) {
       // This shouldn't happen, but let's not let this error propagate further.
       return;
@@ -328,29 +358,28 @@ class FieldAngle extends Blockly.FieldNumber {
 
   /**
    * Redraw the graph with the current angle.
-   * @private
    */
-  updateGraph_() {
-    if (!this.gauge_) {
+  private updateGraph() {
+    if (!this.gauge) {
       return;
     }
-    var angleDegrees = (this.getValue() % 360) + this.OFFSET;
-    var angleRadians = this.toRadians(angleDegrees);
-    var path = ["M ", this.HALF, ",", this.HALF];
-    var x2 = this.HALF;
-    var y2 = this.HALF;
+    const angleDegrees = (Number(this.getValue()) % 360) + this.OFFSET;
+    let angleRadians = this.toRadians(angleDegrees);
+    const path = ["M ", this.HALF, ",", this.HALF];
+    let x2 = this.HALF;
+    let y2 = this.HALF;
     if (!isNaN(angleRadians)) {
-      var angle1 = this.toRadians(this.OFFSET);
-      var x1 = Math.cos(angle1) * this.RADIUS;
-      var y1 = Math.sin(angle1) * -this.RADIUS;
+      const angle1 = this.toRadians(this.OFFSET);
+      const x1 = Math.cos(angle1) * this.RADIUS;
+      const y1 = Math.sin(angle1) * -this.RADIUS;
       if (this.CLOCKWISE) {
         angleRadians = 2 * angle1 - angleRadians;
       }
       x2 += Math.cos(angleRadians) * this.RADIUS;
       y2 -= Math.sin(angleRadians) * this.RADIUS;
       // Use large arc only if input value is greater than wrap
-      var largeFlag = Math.abs(angleDegrees - this.OFFSET) > 180 ? 1 : 0;
-      var sweepFlag = Number(this.CLOCKWISE);
+      const largeFlag = Math.abs(angleDegrees - this.OFFSET) > 180 ? 1 : 0;
+      let sweepFlag = Number(this.CLOCKWISE);
       if (angleDegrees < this.OFFSET) {
         sweepFlag = 1 - sweepFlag; // Sweep opposite direction if less than the offset
       }
@@ -375,29 +404,30 @@ class FieldAngle extends Blockly.FieldNumber {
       );
 
       // Image rotation needs to be set in degrees
+      let imageRotation: number;
       if (this.CLOCKWISE) {
-        var imageRotation = angleDegrees + 2 * this.OFFSET;
+        imageRotation = angleDegrees + 2 * this.OFFSET;
       } else {
-        var imageRotation = -angleDegrees;
+        imageRotation = -angleDegrees;
       }
-      this.arrowSvg_.setAttribute("transform", "rotate(" + imageRotation + ")");
+      this.arrow.setAttribute("transform", "rotate(" + imageRotation + ")");
     }
-    this.gauge_.setAttribute("d", path.join(""));
-    this.line_.setAttribute("x2", x2);
-    this.line_.setAttribute("y2", y2);
-    this.handle_.setAttribute("transform", "translate(" + x2 + "," + y2 + ")");
+    this.gauge.setAttribute("d", path.join(""));
+    this.line.setAttribute("x2", `${x2}`);
+    this.line.setAttribute("y2", `${y2}`);
+    this.handle.setAttribute("transform", "translate(" + x2 + "," + y2 + ")");
   }
 
   /**
    * Ensure that only an angle may be entered.
-   * @param {string} text The user's text.
-   * @return {?string} A string representing a valid angle, or null if invalid.
+   * @param text The user's text.
+   * @returns A string representing a valid angle, or null if invalid.
    */
-  doClassValidation_(text) {
+  doClassValidation_(text: string): number | null {
     if (text === null) {
       return null;
     }
-    var n = parseFloat(text || 0);
+    let n = parseFloat(text || "0");
     if (isNaN(n)) {
       return null;
     }
@@ -411,23 +441,37 @@ class FieldAngle extends Blockly.FieldNumber {
     return Number(n);
   }
 
-  doValueUpdate_(newValue) {
+  doValueUpdate_(newValue: number) {
     super.doValueUpdate_(newValue);
-    this.updateGraph_();
+    this.updateGraph();
   }
 
-  toDegrees(radians) {
+  toDegrees(radians: number) {
     return (radians * 180) / Math.PI;
   }
 
-  toRadians(degrees) {
+  toRadians(degrees: number) {
     return (degrees * Math.PI) / 180;
   }
+
+  /**
+   * Construct a FieldAngle from a JSON arg object.
+   *
+   * @param options A JSON object with options (angle).
+   * @returns The new field instance.
+   */
+  fromJson(options: ScratchFieldAngleJsonConfig): ScratchFieldAngle {
+    return new ScratchFieldAngle(options["angle"]);
+  }
+}
+
+export interface ScratchFieldAngleJsonConfig {
+  angle?: number;
 }
 
 /**
  * Register the field and any dependencies.
  */
-export function registerFieldAngle() {
-  Blockly.fieldRegistry.register("field_angle", FieldAngle);
+export function registerScratchFieldAngle() {
+  Blockly.fieldRegistry.register("field_angle", ScratchFieldAngle);
 }