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

package/src/renderer/{constants.js → constants.ts}

@@ -5,7 +5,6 @@
  */
 
 import * as Blockly from "blockly/core";
-import { cssVarify } from "../colours.js";
 
 export class ConstantProvider extends Blockly.zelos.ConstantProvider {
   REPLACEMENT_GLOW_COLOUR = "#ffffff";
@@ -18,27 +17,42 @@ export class ConstantProvider extends Blockly.zelos.ConstantProvider {
    * styles contain any raw color values, corresponding CSS variables will be
    * created/overridden so that those colors can be dynamically referenced in
    * stylesheets.
-   * @param {!Blockly.Theme} The new theme to apply.
+   *
+   * @param theme The new theme to apply.
    */
-  setTheme(theme) {
-    const root = document.querySelector(":root");
+  setTheme(theme: Blockly.Theme) {
+    const root = document.querySelector(":root") as HTMLElement;
     for (const [key, colour] of Object.entries(theme.blockStyles)) {
-      if (typeof colour === "string") {
+      if (typeof colour !== "object") {
         const varKey = `--colour-${key}`;
         root.style.setProperty(varKey, colour);
       } else {
-        theme.setBlockStyle(`${key}_selected`, {
-          colourPrimary: colour.colourQuaternary ?? colour.colourTertiary,
-          colourSecondary: colour.colourQuaternary ?? colour.colourTertiary,
-          colourTertiary: colour.colourQuaternary ?? colour.colourTertiary,
-          colourQuaternary: colour.colourQuaternary ?? colour.colourTertiary,
-        });
+        const style = {
+          colourPrimary:
+            "colourQuaternary" in colour
+              ? `${colour.colourQuaternary}`
+              : colour.colourTertiary,
+          colourSecondary:
+            "colourQuaternary" in colour
+              ? `${colour.colourQuaternary}`
+              : colour.colourTertiary,
+          colourTertiary:
+            "colourQuaternary" in colour
+              ? `${colour.colourQuaternary}`
+              : colour.colourTertiary,
+          colourQuaternary:
+            "colourQuaternary" in colour
+              ? `${colour.colourQuaternary}`
+              : colour.colourTertiary,
+          hat: "",
+        };
+        theme.setBlockStyle(`${key}_selected`, style);
       }
     }
     super.setTheme(theme);
   }
 
-  createDom(svg, tagName, selector) {
+  createDom(svg: SVGElement, tagName: string, selector: string) {
     super.createDom(svg, tagName, selector);
     this.selectedGlowFilterId = "";
   }

package/src/renderer/{drawer.js → drawer.ts}

@@ -5,9 +5,11 @@
  */
 
 import * as Blockly from "blockly/core";
+import type { RenderInfo } from "./render_info";
 
 export class Drawer extends Blockly.zelos.Drawer {
-  drawStatementInput_(row) {
+  info_: RenderInfo;
+  drawStatementInput_(row: Blockly.blockRendering.Row) {
     if (this.info_.isBowlerHatBlock()) {
       // Bowler hat blocks have straight sides with no C-shape/indentation for
       // statement blocks.
@@ -18,14 +20,17 @@ export class Drawer extends Blockly.zelos.Drawer {
     }
   }
 
-  drawRightSideRow_(row) {
+  drawRightSideRow_(row: Blockly.blockRendering.Row) {
     if (
       this.info_.isBowlerHatBlock() &&
       Blockly.blockRendering.Types.isSpacer(row)
     ) {
       // Multi-row bowler hat blocks are not supported, this may need
       // adjustment to do so.
-      Blockly.blockRendering.Drawer.prototype.drawRightSideRow_.call(this, row);
+      this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis(
+        "V",
+        row.yPos + row.height
+      );
     } else {
       super.drawRightSideRow_(row);
     }

package/src/renderer/{path_object.js → path_object.ts}

@@ -15,9 +15,9 @@ export class PathObject extends Blockly.zelos.PathObject {
    * Apply the stored colours to the block's path, taking into account whether
    * the paths belong to a shadow block.
    *
-   * @param {!Blockly.BlockSvg} block The source block.
+   * @param block The source block.
    */
-  applyColour(block) {
+  applyColour(block: Blockly.BlockSvg) {
     super.applyColour(block);
 
     // These blocks are special in that, while they are technically shadow

package/src/renderer/{render_info.js → render_info.ts}

@@ -5,7 +5,7 @@
  */
 
 import * as Blockly from "blockly/core";
-import { BowlerHat } from "./bowler_hat.js";
+import { BowlerHat } from "./bowler_hat";
 
 export class RenderInfo extends Blockly.zelos.RenderInfo {
   populateTopRow_() {
@@ -51,11 +51,14 @@ export class RenderInfo extends Blockly.zelos.RenderInfo {
         Blockly.blockRendering.Types.isHat(e)
       );
       hat.width = this.width;
-      this.topRow.measure(true);
+      this.topRow.measure();
     }
   }
 
-  getInRowSpacing_(prev, next) {
+  getInRowSpacing_(
+    prev: Blockly.blockRendering.Measurable,
+    next: Blockly.blockRendering.Measurable
+  ): number {
     if (
       this.isBowlerHatBlock() &&
       ((prev && Blockly.blockRendering.Types.isHat(prev)) ||
@@ -68,7 +71,10 @@ export class RenderInfo extends Blockly.zelos.RenderInfo {
     return super.getInRowSpacing_(prev, next);
   }
 
-  getSpacerRowHeight_(prev, next) {
+  getSpacerRowHeight_(
+    prev: Blockly.blockRendering.Row,
+    next: Blockly.blockRendering.Row
+  ): number {
     if (this.isBowlerHatBlock() && prev === this.topRow) {
       return 0;
     }
@@ -76,14 +82,20 @@ export class RenderInfo extends Blockly.zelos.RenderInfo {
     return super.getSpacerRowHeight_(prev, next);
   }
 
-  getElemCenterline_(row, elem) {
+  getElemCenterline_(
+    row: Blockly.blockRendering.Row,
+    elem: Blockly.blockRendering.Measurable
+  ): number {
     if (this.isBowlerHatBlock() && Blockly.blockRendering.Types.isField(elem)) {
       return row.yPos + row.height / 2;
     } else if (
+      "isScratchExtension" in this.block_ &&
       this.block_.isScratchExtension &&
       Blockly.blockRendering.Types.isField(elem) &&
-      elem.field instanceof Blockly.FieldImage &&
-      elem.field === this.block_.inputList[0].fieldRow[0] &&
+      (elem as Blockly.blockRendering.Field).field instanceof
+        Blockly.FieldImage &&
+      (elem as Blockly.blockRendering.Field).field ===
+        this.block_.inputList[0].fieldRow[0] &&
       this.block_.previousConnection
     ) {
       // Vertically center the icon on extension blocks.

package/src/renderer/renderer.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+import { Drawer } from "./drawer";
+import { RenderInfo } from "./render_info";
+import { ConstantProvider } from "./constants";
+import { PathObject } from "./path_object";
+
+/**
+ * Custom renderer for Scratch-style blocks.
+ */
+export class ScratchRenderer extends Blockly.zelos.Renderer {
+  /**
+   * Create a new instance of the renderer's drawer.
+   *
+   * @param block The block to render.
+   * @param infoAn object containing all the information needed to render this
+   *     block.
+   * @returns The drawer.
+   */
+  makeDrawer_(block: Blockly.BlockSvg, info: RenderInfo): Drawer {
+    return new Drawer(block, info);
+  }
+
+  /**
+   * Create a new instance of the renderer's render info object.
+   *
+   * @param block The block to measure.
+   * @returns The render info object.
+   */
+  makeRenderInfo_(block: Blockly.BlockSvg): RenderInfo {
+    return new RenderInfo(this, block);
+  }
+
+  /**
+   * Create a new instance of the renderer's constant provider.
+   *
+   * @returns The constant provider.
+   */
+  makeConstants_(): ConstantProvider {
+    return new ConstantProvider();
+  }
+
+  /**
+   * Create a new instance of a renderer path object.
+   *
+   * @param root The root SVG element.
+   * @param style The style object to use for colouring.
+   * @returns The renderer path object.
+   */
+  makePathObject(
+    root: SVGElement,
+    style: Blockly.Theme.BlockStyle
+  ): PathObject {
+    return new PathObject(root, style, this.getConstants());
+  }
+
+  /**
+   * Determine whether or not to highlight a connection.
+   *
+   * @param connection The connection to determine whether or not to highlight.
+   * @returns True if we should highlight the connection.
+   */
+  shouldHighlightConnection(connection: Blockly.RenderedConnection): boolean {
+    return (
+      connection.type === Blockly.ConnectionType.INPUT_VALUE &&
+      connection.getCheck()?.includes("Boolean")
+    );
+  }
+}
+
+Blockly.blockRendering.register("scratch", ScratchRenderer);

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

@@ -13,14 +13,16 @@ class ScratchBlockPaster extends Blockly.clipboard.BlockPaster {
   /**
    * Deserializes the given block data onto the workspace.
    *
-   * @param {!Blockly.clipboard.BlockCopyData} copyData The serialized block
-   *     state to create a copy of on the workspace.
-   * @param {!Blockly.WorkspaceSvg} workspace The workspace to paste the block
-   *     onto.
-   * @param {?Blockly.utils.Coordinate} coordinate The location to paste the
-   *     block.
+   * @param copyData The serialized block state to create a copy of on the
+   *     workspace.
+   * @param workspace The workspace to paste the block onto.
+   * @param coordinate The location to paste the block.
    */
-  paste(copyData, workspace, coordinate) {
+  paste(
+    copyData: Blockly.clipboard.BlockCopyData,
+    workspace: Blockly.WorkspaceSvg,
+    coordinate: Blockly.utils.Coordinate
+  ) {
     const block = super.paste(copyData, workspace, coordinate);
     if (
       block?.type === "argument_reporter_boolean" ||

package/src/scratch_blocks_utils.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2018 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 Utility methods for Scratch Blocks but not Blockly.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+import * as Blockly from "blockly/core";
+
+/**
+ * Compare strings with natural number sorting.
+ *
+ * @param str1 First input.
+ * @param str2 Second input.
+ * @returns -1, 0, or 1 to signify greater than, equality, or less than.
+ */
+export function compareStrings(str1: string, str2: string): number {
+  return str1.localeCompare(str2, [], {
+    sensitivity: "base",
+    numeric: true,
+  });
+}

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

@@ -7,15 +7,32 @@
 import * as Blockly from "blockly/core";
 import { ScratchCommentBubble } from "./scratch_comment_bubble.js";
 
+interface CommentState {
+  text: string;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+  collapsed: boolean;
+}
+
 /**
  * Custom comment icon that draws no icon indicator, used for block comments.
- * @implements {IHasBubble}
- * @implements {ISerializable}
  */
-class ScratchCommentIcon extends Blockly.icons.Icon {
-  constructor(sourceBlock) {
+class ScratchCommentIcon
+  extends Blockly.icons.Icon
+  implements Blockly.ISerializable, Blockly.IHasBubble
+{
+  private commentBubble: ScratchCommentBubble;
+  private onTextChangedListener: (oldText: string, newText: string) => void;
+  private onSizeChangedListener: (
+    oldSize: Blockly.utils.Size,
+    newSize: Blockly.utils.Size
+  ) => void;
+  private onCollapseListener: (collapsed: boolean) => void;
+
+  constructor(protected sourceBlock: Blockly.BlockSvg) {
     super(sourceBlock);
-    this.sourceBlock = sourceBlock;
     this.commentBubble = new ScratchCommentBubble(this.sourceBlock);
     Blockly.Events.fire(
       new (Blockly.Events.get("block_comment_create"))(this.commentBubble)
@@ -28,28 +45,28 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     this.commentBubble.addOnCollapseListener(this.onCollapseListener);
   }
 
-  getType() {
+  getType(): Blockly.icons.IconType<ScratchCommentIcon> {
     return Blockly.icons.IconType.COMMENT;
   }
 
-  initView(pointerDownListener) {
+  initView(pointerDownListener: (e: PointerEvent) => void) {
     // Scratch comments have no indicator icon on the block.
     return;
   }
 
-  getSize() {
+  getSize(): Blockly.utils.Size {
     // Awful hack to cancel out the default padding added to icons.
     return new Blockly.utils.Size(-8, 0);
   }
 
-  getAnchorPoint() {
+  getAnchorPoint(): Blockly.utils.Coordinate {
     const blockRect = this.sourceBlock.getBoundingRectangleWithoutChildren();
     const y = blockRect.top + this.offsetInBlock.y;
     const x = this.sourceBlock.workspace.RTL ? blockRect.left : blockRect.right;
     return new Blockly.utils.Coordinate(x, y);
   }
 
-  onLocationChange(blockOrigin) {
+  onLocationChange(blockOrigin: Blockly.utils.Coordinate) {
     if (!this.sourceBlock || !this.commentBubble) return;
 
     if (this.sourceBlock.isInsertionMarker()) {
@@ -70,15 +87,15 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
   }
 
-  setText(text) {
+  setText(text: string) {
     this.commentBubble?.setText(text);
   }
 
-  getText() {
+  getText(): string {
     return this.commentBubble?.getText() ?? "";
   }
 
-  onTextChanged(oldText, newText) {
+  onTextChanged(oldText: string, newText: string) {
     Blockly.Events.fire(
       new (Blockly.Events.get(Blockly.Events.BLOCK_CHANGE))(
         this.sourceBlock,
@@ -97,7 +114,7 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
   }
 
-  onCollapsed(collapsed) {
+  onCollapsed(collapsed: boolean) {
     Blockly.Events.fire(
       new (Blockly.Events.get("block_comment_collapse"))(
         this.commentBubble,
@@ -106,7 +123,7 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
   }
 
-  onSizeChanged(oldSize, newSize) {
+  onSizeChanged(oldSize: Blockly.utils.Size, newSize: Blockly.utils.Size) {
     Blockly.Events.fire(
       new (Blockly.Events.get("block_comment_resize"))(
         this.commentBubble,
@@ -116,15 +133,15 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
   }
 
-  setBubbleSize(size) {
+  setBubbleSize(size: Blockly.utils.Size) {
     this.commentBubble?.setSize(size);
   }
 
-  getBubbleSize() {
+  getBubbleSize(): Blockly.utils.Size {
     return this.commentBubble?.getSize() ?? new Blockly.utils.Size(0, 0);
   }
 
-  setBubbleLocation(newLocation) {
+  setBubbleLocation(newLocation: Blockly.utils.Coordinate) {
     const oldLocation = this.getBubbleLocation();
     this.commentBubble?.moveTo(newLocation);
     Blockly.Events.fire(
@@ -136,11 +153,11 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
   }
 
-  getBubbleLocation() {
+  getBubbleLocation(): Blockly.utils.Coordinate {
     return this.commentBubble?.getRelativeToSurfaceXY();
   }
 
-  saveState() {
+  saveState(): CommentState | null {
     if (!this.commentBubble) return null;
 
     const size = this.getBubbleSize();
@@ -159,7 +176,8 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     };
   }
 
-  loadState(state) {
+  loadState(state: CommentState) {
+    Blockly.Events.setGroup(true);
     this.setText(state["text"]);
     this.setBubbleSize(new Blockly.utils.Size(state["width"], state["height"]));
     const delta = new Blockly.utils.Coordinate(state["x"], state["y"]);
@@ -169,20 +187,19 @@ class ScratchCommentIcon extends Blockly.icons.Icon {
     );
     this.commentBubble.moveTo(newBubbleLocation);
     this.commentBubble.setCollapsed(state["collapsed"]);
+    Blockly.Events.setGroup(false);
   }
 
-  bubbleIsVisible() {
+  bubbleIsVisible(): boolean {
     return true;
   }
 
-  async setBubbleVisible(visible) {
+  async setBubbleVisible(visible: boolean) {
     this.commentBubble.setCollapsed(!visible);
   }
 
   dispose() {
-    this.commentBubble?.dispose();
-    this.commentBubble = null;
-    this.sourceBlock = null;
+    this.commentBubble.dispose();
     super.dispose();
   }
 }

package/src/scratch_connection_checker.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+/**
+ * Custom connection checker to restrict which blocks can be connected.
+ */
+class ScratchConnectionChecker extends Blockly.ConnectionChecker {
+  /**
+   * Returns whether or not the two connections should be allowed to connect.
+   *
+   * @param a One of the connections to check.
+   * @param b The other connection to check.
+   * @param distance The maximum allowable distance between connections.
+   * @returns True if the connections should be allowed to connect.
+   */
+  doDragChecks(
+    a: Blockly.RenderedConnection,
+    b: Blockly.RenderedConnection,
+    distance: number
+  ): boolean {
+    // This check prevents dragging a block into the slot occupied by the
+    // procedure caller example block in a procedure definition block.
+    if (
+      b.getSourceBlock().type === "procedures_definition" &&
+      b.getParentInput()?.name === "custom_block"
+    ) {
+      return false;
+    }
+
+    return super.doDragChecks(a, b, distance);
+  }
+}
+
+Blockly.registry.register(
+  Blockly.registry.Type.CONNECTION_CHECKER,
+  Blockly.registry.DEFAULT,
+  ScratchConnectionChecker,
+  true
+);

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

@@ -7,34 +7,41 @@
 import * as Blockly from "blockly/core";
 import { ContinuousCategory } from "@blockly/continuous-toolbox";
 
+type StatusIndicatorCategoryInfo = Blockly.utils.toolbox.CategoryInfo & {
+  showStatusButton?: string;
+};
+
+/**
+ * Selectable category shown in the Scratch toolbox.
+ */
 export class ScratchContinuousCategory extends ContinuousCategory {
   /**
    * Whether this toolbox category has a status indicator button on its label
    * in the flyout, typically for extensions that interface with hardware
    * devices.
-   * @type {boolean}
    */
-  showStatusButton = false;
+  private showStatusButton = false;
 
   /** Creates a new ScratchContinuousCategory.
    *
-   * @param {!Blockly.toolbox.CategoryInfo} toolboxItemDef A toolbox item
-   *     definition.
-   * @param {!Blockly.Toolbox} parentToolbox The toolbox this category is being
-   *     added to.
-   * @param {?Blockly.ICollapsibleToolboxItem} opt_parent The parent toolbox
-   *     category, if any.
+   * @param toolboxItemDef A toolbox item definition.
+   * @param parentToolbox The toolbox this category is being added to.
+   * @param opt_parent The parent toolbox category, if any.
    */
-  constructor(toolboxItemDef, parentToolbox, opt_parent) {
+  constructor(
+    toolboxItemDef: StatusIndicatorCategoryInfo,
+    parentToolbox: Blockly.Toolbox,
+    opt_parent?: Blockly.ICollapsibleToolboxItem
+  ) {
     super(toolboxItemDef, parentToolbox, opt_parent);
     this.showStatusButton = toolboxItemDef["showStatusButton"] === "true";
   }
 
   /**
    * Creates a DOM element for this category's icon.
-   * @returns {!HTMLElement} A DOM element for this category's icon.
+   * @returns A DOM element for this category's icon.
    */
-  createIconDom_() {
+  createIconDom_(): HTMLElement {
     if (this.toolboxItemDef_.iconURI) {
       const icon = document.createElement("img");
       icon.src = this.toolboxItemDef_.iconURI;
@@ -49,9 +56,9 @@ export class ScratchContinuousCategory extends ContinuousCategory {
 
   /**
    * Sets whether or not this category is selected.
-   * @param {boolean} isSelected True if this category is selected.
+   * @param isSelected True if this category is selected.
    */
-  setSelected(isSelected) {
+  setSelected(isSelected: boolean) {
     super.setSelected(isSelected);
     // Prevent hardcoding the background color to grey.
     this.rowDiv_.style.backgroundColor = "";

package/src/scratch_continuous_toolbox.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+import { ContinuousToolbox } from "@blockly/continuous-toolbox";
+import { ScratchContinuousCategory } from "./scratch_continuous_category";
+import { STATUS_INDICATOR_LABEL_TYPE } from "./status_indicator_label_flyout_inflater";
+
+/**
+ * A toolbox that displays items from all categories in one scrolling list.
+ */
+export class ScratchContinuousToolbox extends ContinuousToolbox {
+  /**
+   * List of functions to run after the next time the toolbox renders.
+   */
+  private postRenderCallbacks: (() => void)[] = [];
+
+  refreshSelection() {
+    // Intentionally a no-op, Scratch manually manages refreshing the toolbox
+    // via forceRerender().
+  }
+
+  /**
+   * Converts the given toolbox item to a corresponding array of items that
+   * should appear in the flyout.
+   *
+   * @param toolboxItem The toolbox item to convert.
+   * @returns An array of flyout item definitions.
+   */
+  protected convertToolboxItemToFlyoutItems(
+    toolboxItem: Blockly.IToolboxItem
+  ): Blockly.utils.toolbox.FlyoutItemInfoArray {
+    const contents = super.convertToolboxItemToFlyoutItems(toolboxItem);
+    if (
+      toolboxItem instanceof ScratchContinuousCategory &&
+      toolboxItem.shouldShowStatusButton()
+    ) {
+      contents.splice(0, 1, {
+        kind: STATUS_INDICATOR_LABEL_TYPE,
+        id: toolboxItem.getId(),
+        text: toolboxItem.getName(),
+      });
+    }
+    return contents;
+  }
+
+  /**
+   * Forcibly rerenders the toolbox, preserving selection when possible.
+   */
+  forceRerender() {
+    const selectedCategoryName = this.selectedItem_?.getName();
+    this.getFlyout().show(this.getInitialFlyoutContents());
+    this.selectCategoryByName(selectedCategoryName);
+    let callback;
+    while ((callback = this.postRenderCallbacks.shift())) {
+      callback();
+    }
+  }
+
+  /**
+   * Runs the specified callback after the next rerender.
+   * @param callback A callback to run whenever the toolbox next rerenders.
+   */
+  runAfterRerender(callback: () => void) {
+    this.postRenderCallbacks.push(callback);
+  }
+}