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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-blocks",
-  "version": "2.0.0-spork.4",
+  "version": "2.0.0-spork.6",
   "description": "Scratch Blocks is a library for building creative computing interfaces.",
   "author": "Massachusetts Institute of Technology",
   "license": "Apache-2.0",
@@ -17,12 +17,17 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "test:lint": "eslint ."
   },
+  "dependencies": {
+    "@blockly/continuous-toolbox": "^7.0.1",
+    "@blockly/field-colour": "^6.0.3",
+    "blockly": "^12.3.0-beta.0"
+  },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
-    "eslint": "^4.19.1",
+    "@commitlint/cli": "17.8.1",
+    "@commitlint/config-conventional": "17.8.1",
+    "eslint": "4.19.1",
     "husky": "9.1.6",
-    "scratch-semantic-release-config": "1.0.16",
+    "scratch-semantic-release-config": "4.0.0",
     "semantic-release": "22.0.12",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.5.1",
@@ -31,11 +36,6 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "dependencies": {
-    "@blockly/continuous-toolbox": "^7.0.0-beta.1",
-    "@blockly/field-colour": "^4.0.2",
-    "blockly": "^12.0.0-beta.1"
-  },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"

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/blocks/sensing.ts

@@ -374,6 +374,18 @@ Blockly.Blocks["sensing_dayssince2000"] = {
   },
 };
 
+Blockly.Blocks["sensing_online"] = {
+  /**
+   * Block to report whether or not the system is online
+   */
+  init: function(this: Blockly.Block) {
+    this.jsonInit({
+      message0: Blockly.Msg.SENSING_ONLINE,
+      extensions: ["colours_sensing", "output_boolean", "monitor_block"],
+    });
+  },
+};
+
 Blockly.Blocks["sensing_username"] = {
   /**
    * Block to report user's username

package/src/checkable_continuous_flyout.ts

@@ -109,4 +109,8 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
       }
     }
   }
+
+  scrollTo(position: number) {
+    super.scrollTo(Math.ceil(position));
+  }
 }

package/src/checkbox_bubble.ts

@@ -243,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;
@@ -1011,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 {
@@ -1168,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);
@@ -1198,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(

package/src/index.ts

@@ -37,6 +37,7 @@ import "./scratch_dragger";
 import "./scratch_variable_map";
 import "./scratch_variable_model";
 import "./scratch_connection_checker";
+import "./scratch_insertion_marker_previewer";
 import "./flyout_checkbox_icon";
 import "./events/events_block_comment_change";
 import "./events/events_block_comment_collapse";
@@ -80,6 +81,7 @@ export {
   StatusIndicatorLabel,
   StatusButtonState,
 } from "./status_indicator_label";
+export * from "./xml";
 
 export function inject(container: Element, options: Blockly.BlocklyOptions) {
   registerScratchFieldAngle();
@@ -128,6 +130,7 @@ Blockly.ContextMenuRegistry.registry.unregister("blockInline");
 Blockly.ContextMenuItems.registerCommentOptions();
 Blockly.ContextMenuRegistry.registry.unregister("blockDelete");
 contextMenuItems.registerDeleteBlock();
+contextMenuItems.registerDuplicateBlock();
 Blockly.ContextMenuRegistry.registry.unregister("workspaceDelete");
 contextMenuItems.registerDeleteAll();
 Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(

package/src/scratch_block_paster.ts

@@ -5,6 +5,7 @@
  */
 
 import * as Blockly from "blockly/core";
+import type { ScratchCommentIcon } from "./scratch_comment_icon";
 
 /**
  * Class responsible for handling the pasting of copied blocks.
@@ -31,6 +32,15 @@ class ScratchBlockPaster extends Blockly.clipboard.BlockPaster {
       block.setDragStrategy(new Blockly.dragging.BlockDragStrategy(block));
     }
 
+    // Deserialization of blocks suppresses events, so even though this gets
+    // fired for blocks with comments, the VM will never receive it, causing its
+    // state to get out of sync. Manually fire it here (after suppression has
+    // been turned off) if needed.
+    const commentIcon = block.getIcon(Blockly.icons.IconType.COMMENT);
+    if (commentIcon) {
+      (commentIcon as ScratchCommentIcon).fireCreateEvent();
+    }
+
     return block;
   }
 }