scratch-blocks 1.1.206 → 2.0.0-beta.1

package/src/fields/field_number.js

@@ -0,0 +1,380 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Massachusetts Institute of Technology
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Field for numbers. Includes validator and numpad on touch.
+ * @author tmickel@mit.edu (Tim Mickel)
+ */
+import * as Blockly from "blockly/core";
+import { Colours } from "../colours.js";
+
+/**
+ * Class for an editable number field.
+ * In scratch-blocks, the min/max/precision properties are only used
+ * to construct a restrictor on typable characters, and to inform the pop-up
+ * numpad on touch devices.
+ * These properties are included here (i.e. instead of just accepting a
+ * decimalAllowed, negativeAllowed) to maintain API compatibility with Blockly
+ * and Blockly for Android.
+ * @param {(string|number)=} opt_value The initial content of the field. The value
+ *     should cast to a number, and if it does not, '0' will be used.
+ * @param {(string|number)=} opt_min Minimum value.
+ * @param {(string|number)=} opt_max Maximum value.
+ * @param {(string|number)=} opt_precision Precision for value.
+ * @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 the accepted text or null to abort
+ *     the change.
+ * @extends {Blockly.FieldTextInput}
+ * @constructor
+ */
+class FieldNumberPicker extends Blockly.FieldTextInput {
+  /**
+   * Fixed width of the num-pad drop-down, in px.
+   * @type {number}
+   * @const
+   */
+  static DROPDOWN_WIDTH = 168;
+
+  /**
+   * Buttons for the num-pad, in order from the top left.
+   * Values are strings of the number or symbol will be added to the field text
+   * when the button is pressed.
+   * @type {Array.<string>}
+   * @const
+   */
+  // Calculator order
+  static NUMPAD_BUTTONS = [
+    "7",
+    "8",
+    "9",
+    "4",
+    "5",
+    "6",
+    "1",
+    "2",
+    "3",
+    ".",
+    "0",
+    "-",
+    " ",
+  ];
+
+  /**
+   * Src for the delete icon to be shown on the num-pad.
+   * @type {string}
+   * @const
+   */
+  static NUMPAD_DELETE_ICON =
+    "data:image/svg+xml;utf8," +
+    "<svg " +
+    'xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">' +
+    '<path d="M28.89,11.45H16.79a2.86,2.86,0,0,0-2,.84L9.09,1' +
+    "8a2.85,2.85,0,0,0,0,4l5.69,5.69a2.86,2.86,0,0,0,2,.84h12" +
+    ".1a2.86,2.86,0,0,0,2.86-2.86V14.31A2.86,2.86,0,0,0,28.89" +
+    ",11.45ZM27.15,22.73a1,1,0,0,1,0,1.41,1,1,0,0,1-.71.3,1,1" +
+    ",0,0,1-.71-0.3L23,21.41l-2.73,2.73a1,1,0,0,1-1.41,0,1,1," +
+    "0,0,1,0-1.41L21.59,20l-2.73-2.73a1,1,0,0,1,0-1.41,1,1,0," +
+    '0,1,1.41,0L23,18.59l2.73-2.73a1,1,0,1,1,1.42,1.41L24.42,20Z" fill="' +
+    Colours.numPadText +
+    '"/></svg>';
+
+  configure_(config) {
+    super.configure_(config);
+    this.decimalAllowed_ =
+      typeof config.precision == "undefined" ||
+      isNaN(config.precision) ||
+      config.precision == 0 ||
+      Math.floor(config.precision) != config.precision;
+    this.negativeAllowed_ =
+      typeof config.min == "undefined" || isNaN(config.min) || config.min < 0;
+    this.exponentialAllowed_ = this.decimalAllowed_;
+  }
+
+  /**
+   * Return an appropriate restrictor, depending on whether this FieldNumber
+   * allows decimal or negative numbers.
+   * @return {!RegExp} Regular expression for this FieldNumber's restrictor.
+   */
+  getNumRestrictor() {
+    var pattern = "[\\d]"; // Always allow digits.
+    if (this.decimalAllowed_) {
+      pattern += "|[\\.]";
+    }
+    if (this.negativeAllowed_) {
+      pattern += "|[-]";
+    }
+    if (this.exponentialAllowed_) {
+      pattern += "|[eE]";
+    }
+    return new RegExp(pattern);
+  }
+
+  /**
+   * Show the inline free-text editor on top of the text and the num-pad if
+   * appropriate.
+   * @private
+   */
+  showEditor_(e) {
+    // Do not focus on mobile devices so we can show the num-pad
+    var showNumPad = e && e.pointerType === "touch";
+    super.showEditor_(e, showNumPad);
+
+    // Show a numeric keypad in the drop-down on touch
+    if (showNumPad) {
+      this.htmlInput_.select();
+      this.showNumPad_();
+    }
+  }
+
+  onHtmlInputKeyDown_(e) {
+    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.
+    if (e.key.length === 1) {
+      const validator = this.getNumRestrictor();
+      if (!e.key.match(validator)) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  /**
+   * Show the number pad.
+   * @private
+   */
+  showNumPad_() {
+    var contentDiv = Blockly.DropDownDiv.getContentDiv();
+
+    // Accessibility properties
+    contentDiv.setAttribute("role", "menu");
+    contentDiv.setAttribute("aria-haspopup", "true");
+
+    this.addButtons_(contentDiv);
+
+    // Set colour and size of drop-down
+    Blockly.DropDownDiv.setColour(
+      this.sourceBlock_.parentBlock_.getColour(),
+      this.sourceBlock_.getColourTertiary()
+    );
+    contentDiv.style.width = FieldNumberPicker.DROPDOWN_WIDTH + "px";
+
+    this.position_();
+  }
+
+  /**
+   * Figure out where to place the drop-down, and move it there.
+   * @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();
+    bBox.width *= scale;
+    bBox.height *= scale;
+    var 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;
+    // If we can't fit it, render above the entire parent block
+    var secondaryX = primaryX;
+    var secondaryY = position.y;
+
+    Blockly.DropDownDiv.setBoundsElement(
+      this.sourceBlock_.workspace.getParentSvg().parentNode
+    );
+    Blockly.DropDownDiv.show(
+      this,
+      this.getSourceBlock().RTL,
+      primaryX,
+      primaryY,
+      secondaryX,
+      secondaryY,
+      this.onHide_.bind(this)
+    );
+  }
+
+  /**
+   * Add number, punctuation, and erase buttons to the numeric keypad's content
+   * div.
+   * @param {Element} contentDiv The div for the numeric keypad.
+   * @private
+   */
+  addButtons_(contentDiv) {
+    var buttonColour = this.sourceBlock_.parentBlock_.getColour();
+    var buttonBorderColour = this.sourceBlock_.parentBlock_.getColourTertiary();
+
+    // Add numeric keypad buttons
+    var buttons = FieldNumberPicker.NUMPAD_BUTTONS;
+    for (var i = 0, buttonText; (buttonText = buttons[i]); i++) {
+      var button = document.createElement("button");
+      button.setAttribute("role", "menuitem");
+      button.setAttribute("class", "blocklyNumPadButton");
+      button.setAttribute(
+        "style",
+        "background:" +
+          buttonColour +
+          ";" +
+          "border: 1px solid " +
+          buttonBorderColour +
+          ";"
+      );
+      button.title = buttonText;
+      button.innerHTML = buttonText;
+      Blockly.browserEvents.bind(
+        button,
+        "mousedown",
+        button,
+        this.numPadButtonTouch.bind(this)
+      );
+      if (buttonText == "." && !this.decimalAllowed_) {
+        // Don't show the decimal point for inputs that must be round numbers
+        button.setAttribute("style", "visibility: hidden");
+      } else if (buttonText == "-" && !this.negativeAllowed_) {
+        continue;
+      } else if (buttonText == " " && !this.negativeAllowed_) {
+        continue;
+      } else if (buttonText == " " && this.negativeAllowed_) {
+        button.setAttribute("style", "visibility: hidden");
+      }
+      contentDiv.appendChild(button);
+    }
+    // Add erase button to the end
+    var eraseButton = document.createElement("button");
+    eraseButton.setAttribute("role", "menuitem");
+    eraseButton.setAttribute("class", "blocklyNumPadButton");
+    eraseButton.setAttribute(
+      "style",
+      "background:" +
+        buttonColour +
+        ";" +
+        "border: 1px solid " +
+        buttonBorderColour +
+        ";"
+    );
+    eraseButton.title = "Delete";
+
+    var eraseImage = document.createElement("img");
+    eraseImage.src = FieldNumberPicker.NUMPAD_DELETE_ICON;
+    eraseButton.appendChild(eraseImage);
+
+    Blockly.browserEvents.bind(
+      eraseButton,
+      "mousedown",
+      null,
+      this.numPadEraseButtonTouch.bind(this)
+    );
+    contentDiv.appendChild(eraseButton);
+  }
+
+  /**
+   * 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.
+   */
+  numPadButtonTouch(e) {
+    // String of the button (e.g., '7')
+    var spliceValue = e.target.innerText;
+    // Old value of the text field
+    var oldValue = this.htmlInput_.value;
+    // Determine the selected portion of the text field
+    var selectionStart = this.htmlInput_.selectionStart;
+    var selectionEnd = this.htmlInput_.selectionEnd;
+
+    // Splice in the new value
+    var newValue =
+      oldValue.slice(0, selectionStart) +
+      spliceValue +
+      oldValue.slice(selectionEnd);
+
+    // Set new value and advance the cursor
+    this.updateDisplay_(newValue, selectionStart + spliceValue.length);
+
+    // This is just a click.
+    Blockly.Touch.clearTouchIdentifier();
+
+    // Prevent default to not lose input focus
+    e.preventDefault();
+  }
+
+  /**
+   * 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.
+   */
+  numPadEraseButtonTouch(e) {
+    // Old value of the text field
+    var oldValue = this.htmlInput_.value;
+    // Determine what is selected to erase (if anything)
+    var selectionStart = this.htmlInput_.selectionStart;
+    var selectionEnd = this.htmlInput_.selectionEnd;
+
+    // If selection is zero-length, shift start to the left 1 character
+    if (selectionStart == selectionEnd) {
+      selectionStart = Math.max(0, selectionStart - 1);
+    }
+
+    // Cut out selected range
+    var newValue =
+      oldValue.slice(0, selectionStart) + oldValue.slice(selectionEnd);
+
+    this.updateDisplay_(newValue, selectionStart);
+
+    // This is just a click.
+    Blockly.Touch.clearTouchIdentifier();
+
+    // Prevent default to not lose input focus which resets cursors in Chrome
+    e.preventDefault();
+  }
+
+  /**
+   * 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
+   */
+  updateDisplay_(newValue, newSelection) {
+    this.setEditorValue_(newValue);
+    // Resize and scroll the text field appropriately
+    const htmlInput = this.htmlInput_;
+    htmlInput.setSelectionRange(newSelection, newSelection);
+    htmlInput.scrollLeft = htmlInput.scrollWidth;
+  }
+
+  /**
+   * Callback for when the drop-down is hidden.
+   */
+  onHide_() {
+    // Clear accessibility properties
+    Blockly.DropDownDiv.getContentDiv().removeAttribute("role");
+    Blockly.DropDownDiv.getContentDiv().removeAttribute("aria-haspopup");
+  }
+}
+
+FieldNumberPicker.prototype.DEFAULT_VALUE = "";
+
+/**
+ * Register the field and any dependencies.
+ */
+export function registerFieldNumber() {
+  Blockly.fieldRegistry.unregister("field_number");
+  Blockly.fieldRegistry.register("field_number", FieldNumberPicker);
+}

package/src/fields/field_textinput_removable.js

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Massachusetts Institute of Technology
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Text input field with floating "remove" button.
+ * @author pkaplan@media.mit.edu (Paul Kaplan)
+ */
+import * as Blockly from "blockly/core";
+
+/**
+ * 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 {
+  /**
+   * Show the inline free-text editor on top of the text with the remove button.
+   */
+  showEditor_() {
+    // Wait for our parent block to render so we can examine its metrics to
+    // calculate rounded corners on the editor as needed.
+    Blockly.renderManagement.finishQueuedRenders().then(() => {
+      super.showEditor_();
+
+      const div = Blockly.WidgetDiv.getDiv();
+      div.className += " removableTextInput";
+      const removeButton = document.createElement("img");
+      removeButton.className = "blocklyTextRemoveIcon";
+      removeButton.setAttribute(
+        "src",
+        this.sourceBlock_.workspace.options.pathToMedia + "icons/remove.svg"
+      );
+      this.removeButtonMouseWrapper_ = Blockly.browserEvents.bind(
+        removeButton,
+        "mousedown",
+        this,
+        this.removeCallback_
+      );
+      div.appendChild(removeButton);
+    });
+  }
+
+  /**
+   * 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);
+    } else {
+      console.warn("Expected a source block with removeFieldCallback");
+    }
+  }
+
+  /**
+   * 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
+   */
+  fromJson(options) {
+    const text = Blockly.utils.replaceMessageReferences(options["text"]);
+    const field = new FieldTextInputRemovable(text, null, options);
+    if (typeof options["spellcheck"] == "boolean") {
+      field.setSpellcheck(options["spellcheck"]);
+    }
+    return field;
+  }
+}
+
+/**
+ * Register the field and any dependencies.
+ */
+export function registerFieldTextInputRemovable() {
+  Blockly.fieldRegistry.register(
+    "field_input_removable",
+    FieldTextInputRemovable
+  );
+}

package/src/fields/field_variable.js

@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Variable input field.
+ * @author fraser@google.com (Neil Fraser)
+ */
+import * as Blockly from "blockly/core";
+import * as Constants from "../constants.js";
+import { ScratchMsgs } from "../../msg/scratch_msgs.js";
+import { createVariable, renameVariable } from "../variables.js";
+
+class FieldVariable extends Blockly.FieldVariable {
+  originalStyle;
+
+  constructor(varName, validator, variableTypes, defaultType, config) {
+    super(varName, validator, variableTypes, defaultType, config);
+    this.menuGenerator_ = FieldVariable.dropdownCreate;
+  }
+
+  initModel() {
+    if (!this.variable) {
+      const sourceBlock = this.getSourceBlock();
+      if (sourceBlock) {
+        const broadcastVariable = this.initFlyoutBroadcast(
+          sourceBlock.workspace
+        );
+        if (broadcastVariable) {
+          this.doValueUpdate_(broadcastVariable.getId());
+          return;
+        }
+      }
+    }
+
+    super.initModel();
+  }
+
+  /**
+   * Initialize broadcast blocks in the flyout.
+   * Implicit deletion of broadcast messages from the scratch vm may cause
+   * broadcast blocks in the flyout to change which variable they display as the
+   * 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.
+   */
+  initFlyoutBroadcast(workspace) {
+    const broadcastVars = workspace.getVariablesOfType(
+      Constants.BROADCAST_MESSAGE_VARIABLE_TYPE
+    );
+    if (
+      workspace.isFlyout &&
+      this.getDefaultType() == Constants.BROADCAST_MESSAGE_VARIABLE_TYPE &&
+      broadcastVars.length != 0
+    ) {
+      broadcastVars.sort(Blockly.Variables.compareByName);
+      return broadcastVars[0];
+    }
+  }
+
+  /**
+   * 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}
+   */
+  static dropdownCreate() {
+    const options = super.dropdownCreate();
+    const type = this.getDefaultType();
+    if (type === Constants.BROADCAST_MESSAGE_VARIABLE_TYPE) {
+      options.splice(-2, 2, [
+        ScratchMsgs.translate("NEW_BROADCAST_MESSAGE"),
+        Constants.NEW_BROADCAST_MESSAGE_ID,
+      ]);
+    } else if (type === Constants.LIST_VARIABLE_TYPE) {
+      for (const option of options) {
+        if (option[1] === Blockly.RENAME_VARIABLE_ID) {
+          option[0] = ScratchMsgs.translate("RENAME_LIST");
+        } else if (option[1] === Blockly.DELETE_VARIABLE_ID) {
+          option[0] = ScratchMsgs.translate("DELETE_LIST").replace(
+            "%1",
+            this.getText()
+          );
+        }
+      }
+    }
+
+    return options;
+  }
+
+  /** Handle the selection of an item in the variable dropdown menu.
+   * 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.
+   */
+  onItemSelected_(menu, menuItem) {
+    const sourceBlock = this.getSourceBlock();
+    if (sourceBlock && !sourceBlock.isDeadOrDying()) {
+      const selectedItem = menuItem.getValue();
+      if (selectedItem === Constants.NEW_BROADCAST_MESSAGE_ID) {
+        createVariable(
+          sourceBlock.workspace,
+          (varId) => {
+            if (varId) {
+              this.setValue(varId);
+            }
+          },
+          Constants.BROADCAST_MESSAGE_VARIABLE_TYPE
+        );
+        return;
+      } else if (selectedItem === Blockly.RENAME_VARIABLE_ID) {
+        renameVariable(sourceBlock.workspace, this.variable);
+        return;
+      }
+    }
+    super.onItemSelected_(menu, menuItem);
+  }
+
+  showEditor_(event) {
+    super.showEditor_(event);
+    const sourceBlock = this.getSourceBlock();
+    const style = sourceBlock.style;
+    if (sourceBlock.isShadow()) {
+      this.originalStyle = sourceBlock.getStyleName();
+      sourceBlock.setStyle(`${this.originalStyle}_selected`);
+    } else if (this.borderRect_) {
+      this.borderRect_.setAttribute(
+        "fill",
+        style.colourQuaternary ?? style.colourTertiary
+      );
+    }
+  }
+
+  dropdownDispose_() {
+    super.dropdownDispose_();
+    const sourceBlock = this.getSourceBlock();
+    if (sourceBlock.isShadow()) {
+      sourceBlock.setStyle(this.originalStyle);
+    }
+  }
+}
+
+/**
+ * Register the field and any dependencies.
+ */
+export function registerFieldVariable() {
+  Blockly.fieldRegistry.unregister("field_variable");
+  Blockly.fieldRegistry.register("field_variable", FieldVariable);
+}