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

package/src/index.ts

@@ -26,11 +26,10 @@ import "./css";
 import "./renderer/renderer";
 import * as contextMenuItems from "./context_menu_items";
 import {
-  ContinuousToolbox,
-  ContinuousFlyout,
+  registerContinuousToolbox,
   ContinuousMetrics,
 } from "@blockly/continuous-toolbox";
-import { CheckableContinuousFlyout } from "./checkable_continuous_flyout.js";
+import { CheckableContinuousFlyout } from "./checkable_continuous_flyout";
 import { buildGlowFilter, glowStack } from "./glows";
 import { ScratchContinuousToolbox } from "./scratch_continuous_toolbox";
 import "./scratch_comment_icon";
@@ -38,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";
@@ -81,6 +81,7 @@ export {
   StatusIndicatorLabel,
   StatusButtonState,
 } from "./status_indicator_label";
+export * from "./xml";
 
 export function inject(container: Element, options: Blockly.BlocklyOptions) {
   registerScratchFieldAngle();
@@ -120,6 +121,7 @@ export function inject(container: Element, options: Blockly.BlocklyOptions) {
   return workspace;
 }
 
+registerContinuousToolbox();
 Blockly.Scrollbar.scrollbarThickness = Blockly.Touch.TOUCH_ENABLED ? 14 : 11;
 Blockly.FlyoutButton.TEXT_MARGIN_X = 40;
 Blockly.FlyoutButton.TEXT_MARGIN_Y = 10;
@@ -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/recyclable_block_flyout_inflater.ts

@@ -6,21 +6,12 @@
 
 import * as Blockly from "blockly/core";
 import { CheckboxBubble } from "./checkbox_bubble";
+import { RecyclableBlockFlyoutInflater as BlocklyRecyclableBlockFlyoutInflater } from "@blockly/continuous-toolbox";
 
 /**
  * A block inflater that caches and reuses blocks to improve performance.
  */
-export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
-  /**
-   * Whether or not block recycling is enabled.
-   */
-  recyclingEnabled = true;
-
-  /**
-   * Map from block type to block instance.
-   */
-  recycledBlocks = new Map<string, Blockly.BlockSvg>();
-
+export class RecyclableBlockFlyoutInflater extends BlocklyRecyclableBlockFlyoutInflater {
   /**
    * Creates a block on the flyout workspace from the given block definition.
    *
@@ -31,152 +22,18 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   load(
     state: Blockly.utils.toolbox.BlockInfo,
     flyoutWorkspace: Blockly.WorkspaceSvg
-  ): Blockly.IBoundedElement {
-    const block = super.load(state, flyoutWorkspace);
+  ): Blockly.FlyoutItem {
+    const flyoutItem = super.load(state, flyoutWorkspace);
+    const block = flyoutItem.getElement();
     if ("checkboxInFlyout" in block && block.checkboxInFlyout) {
       block.moveBy(
-        CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN,
+        (flyoutWorkspace.RTL ? -1 : 1) *
+          (CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN),
         0
       );
     }
 
-    return block;
-  }
-
-  /**
-   * Toggles whether or not recycling is enabled.
-   *
-   * @param enabled True if recycling should be enabled.
-   */
-  setRecyclingEnabled(enabled: boolean) {
-    this.recyclingEnabled = enabled;
-  }
-
-  /**
-   * Creates a new block from the given block definition.
-   *
-   * @param blockDefinition The definition to create a block from.
-   * @returns The newly created block.
-   */
-  createBlock(
-    blockDefinition: Blockly.utils.toolbox.BlockInfo
-  ): Blockly.BlockSvg {
-    const blockType = this.getTypeFromDefinition(blockDefinition);
-    return (
-      this.getRecycledBlock(blockType) ??
-      super.createBlock(blockDefinition, this.flyoutWorkspace)
-    );
-  }
-
-  /**
-   * Returns the type of a block from an XML or JSON block definition.
-   *
-   * @param blockDefinition The block definition to parse.
-   * @returns The block type.
-   */
-  getTypeFromDefinition(
-    blockDefinition: Blockly.utils.toolbox.BlockInfo
-  ): string {
-    if (blockDefinition["blockxml"]) {
-      const xml =
-        typeof blockDefinition["blockxml"] === "string"
-          ? Blockly.utils.xml.textToDom(blockDefinition["blockxml"])
-          : (blockDefinition["blockxml"] as Element);
-      return xml.getAttribute("type");
-    } else {
-      return blockDefinition["type"];
-    }
-  }
-
-  /**
-   * Puts a previously created block into the recycle bin and moves it to the
-   * top of the workspace. Used during large workspace swaps to limit the number
-   * of new DOM elements we need to create.
-   *
-   * @param block The block to recycle.
-   */
-  recycleBlock(block: Blockly.BlockSvg) {
-    const xy = block.getRelativeToSurfaceXY();
-    block.moveBy(-xy.x, -xy.y);
-    this.recycledBlocks.set(block.type, block);
-  }
-
-  /**
-   * Returns a block from the cache of recycled blocks with the given type, or
-   * undefined if one cannot be found.
-   *
-   * @param blockType The type of the block to try to recycle.
-   * @returns The recycled block, or undefined if one could not be recycled.
-   */
-  getRecycledBlock(blockType: string): Blockly.BlockSvg | undefined {
-    const block = this.recycledBlocks.get(blockType);
-    this.recycledBlocks.delete(blockType);
-    return block;
-  }
-
-  /**
-   * Returns whether the given block can be recycled or not.
-   *
-   * @param block The block to check for recyclability.
-   * @returns True if the block can be recycled. False otherwise.
-   */
-  blockIsRecyclable(block: Blockly.Block): boolean {
-    if (!this.recyclingEnabled) {
-      return false;
-    }
-
-    // If the block needs to parse mutations, never recycle.
-    if (block.mutationToDom && block.domToMutation) {
-      return false;
-    }
-
-    if (!block.isEnabled()) {
-      return false;
-    }
-
-    for (const input of block.inputList) {
-      for (const field of input.fieldRow) {
-        // No variables.
-        if (field.referencesVariables()) {
-          return false;
-        }
-        if (field instanceof Blockly.FieldDropdown) {
-          if (field.isOptionListDynamic()) {
-            return false;
-          }
-        }
-      }
-      // Check children.
-      if (input.connection) {
-        const targetBlock = input.connection.targetBlock();
-        if (targetBlock && !this.blockIsRecyclable(targetBlock)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  }
-
-  /**
-   * Disposes of the provided block.
-   *
-   * @param element The block to dispose of.
-   */
-  disposeElement(element: Blockly.BlockSvg) {
-    if (this.blockIsRecyclable(element)) {
-      this.removeListeners(element.id);
-      this.recycleBlock(element);
-    } else {
-      super.disposeElement(element);
-    }
-  }
-
-  /**
-   * Clears the cache of recycled blocks.
-   */
-  emptyRecycledBlocks() {
-    this.recycledBlocks.forEach((block) => block.dispose(false, false));
-    this.recycledBlocks.clear();
+    return flyoutItem;
   }
 }
 

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;
   }
 }

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

@@ -11,17 +11,28 @@ import * as Blockly from "blockly/core";
  * @implements {IBubble}
  * @implements {ISelectable}
  */
-export class ScratchCommentBubble extends Blockly.comments.CommentView {
-  constructor(sourceBlock) {
-    super(sourceBlock.workspace);
+export class ScratchCommentBubble
+  extends Blockly.comments.CommentView
+  implements Blockly.IBubble, Blockly.ISelectable
+{
+  id: string;
+  private sourceBlock: Blockly.BlockSvg;
+  private anchor?: Blockly.utils.Coordinate;
+  private anchorChain?: SVGLineElement;
+  private dragStartLocation?: Blockly.utils.Coordinate;
+
+  constructor(sourceBlock: Blockly.BlockSvg) {
+    const commentId = `${sourceBlock.id}_comment`;
+    super(sourceBlock.workspace, commentId);
     this.sourceBlock = sourceBlock;
     this.disposing = false;
-    this.id = Blockly.utils.idGenerator.genUid();
+    this.id = commentId;
     this.setPlaceholderText(Blockly.Msg.WORKSPACE_COMMENT_DEFAULT_TEXT);
     this.getSvgRoot().setAttribute(
       "style",
       `--colour-commentBorder: ${sourceBlock.getColourTertiary()};`
     );
+    this.getSvgRoot().setAttribute("id", this.id);
 
     Blockly.browserEvents.conditionalBind(
       this.getSvgRoot(),
@@ -34,15 +45,15 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
       this.getSvgRoot(),
       "wheel",
       this,
-      (e) => {
+      (e: WheelEvent) => {
         e.stopPropagation();
       }
     );
   }
 
-  setDeleteStyle(enable) {}
+  setDeleteStyle(enable: boolean) {}
   showContextMenu() {}
-  setDragging(start) {}
+  setDragging(start: boolean) {}
   select() {}
   unselect() {}
 
@@ -50,11 +61,13 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     return true;
   }
 
-  moveDuringDrag(newLocation) {
+  moveDuringDrag(newLocation: Blockly.utils.Coordinate) {
     this.moveTo(newLocation);
   }
 
-  moveTo(xOrCoordinate, y) {
+  moveTo(xOrCoordinate: number, y: number): void;
+  moveTo(xOrCoordinate: Blockly.utils.Coordinate): void;
+  moveTo(xOrCoordinate: Blockly.utils.Coordinate | number, y?: number) {
     const destination =
       xOrCoordinate instanceof Blockly.utils.Coordinate
         ? xOrCoordinate
@@ -63,22 +76,22 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     this.redrawAnchorChain();
   }
 
-  startGesture(e) {
+  startGesture(e: PointerEvent) {
     const gesture = this.workspace.getGesture(e);
     if (gesture) {
-      gesture.handleCommentStart(e, this);
+      gesture.handleBubbleStart(e, this);
       Blockly.common.setSelected(this);
     }
   }
 
-  startDrag(event) {
+  startDrag(event: PointerEvent) {
     this.dragStartLocation = this.getRelativeToSurfaceXY();
     this.workspace.setResizesEnabled(false);
     this.workspace.getLayerManager()?.moveToDragLayer(this);
     Blockly.utils.dom.addClass(this.getSvgRoot(), "blocklyDragging");
   }
 
-  drag(newLocation, event) {
+  drag(newLocation: Blockly.utils.Coordinate, event: Event) {
     this.moveTo(newLocation);
   }
 
@@ -101,7 +114,7 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     this.moveTo(this.dragStartLocation);
   }
 
-  setAnchorLocation(newAnchor) {
+  setAnchorLocation(newAnchor: Blockly.utils.Coordinate) {
     const oldAnchor = this.anchor;
     const alreadyAnchored = !!this.anchor;
     this.anchor = newAnchor;
@@ -116,15 +129,19 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
   }
 
   dropAnchor() {
-    this.moveTo(this.anchor.x + 40, this.anchor.y - 16);
+    const verticalOffset = 16;
+    this.moveTo(
+      this.anchor.x + 40 * (this.workspace.RTL ? -1 : 1),
+      this.anchor.y - verticalOffset
+    );
     const location = this.getRelativeToSurfaceXY();
     this.anchorChain = Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.LINE,
       {
         x1: this.anchor.x - location.x,
         y1: this.anchor.y - location.y,
-        x2: this.getSize().width / 2,
-        y2: 16,
+        x2: (this.getSize().width / 2) * (this.workspace.RTL ? -1 : 1),
+        y2: verticalOffset,
         style: `stroke: ${this.sourceBlock.getColourTertiary()}; stroke-width: 1`,
       },
       this.getSvgRoot()
@@ -139,8 +156,8 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     if (!this.anchorChain) return;
 
     const location = this.getRelativeToSurfaceXY();
-    this.anchorChain.setAttribute("x1", this.anchor.x - location.x);
-    this.anchorChain.setAttribute("y1", this.anchor.y - location.y);
+    this.anchorChain.setAttribute("x1", `${this.anchor.x - location.x}`);
+    this.anchorChain.setAttribute("y1", `${this.anchor.y - location.y}`);
   }
 
   getId() {
@@ -166,4 +183,20 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     }
     super.dispose();
   }
+
+  getFocusableElement() {
+    return this.getSvgRoot();
+  }
+
+  getFocusableTree() {
+    return this.workspace;
+  }
+
+  onNodeFocus() {}
+
+  onNodeBlur() {}
+
+  canBeFocused() {
+    return true;
+  }
 }

package/src/scratch_comment_icon.ts

@@ -5,7 +5,7 @@
  */
 
 import * as Blockly from "blockly/core";
-import { ScratchCommentBubble } from "./scratch_comment_bubble.js";
+import { ScratchCommentBubble } from "./scratch_comment_bubble";
 
 interface CommentState {
   text: string;
@@ -19,7 +19,7 @@ interface CommentState {
 /**
  * Custom comment icon that draws no icon indicator, used for block comments.
  */
-class ScratchCommentIcon
+export class ScratchCommentIcon
   extends Blockly.icons.Icon
   implements Blockly.ISerializable, Blockly.IHasBubble
 {
@@ -34,9 +34,7 @@ class ScratchCommentIcon
   constructor(protected sourceBlock: Blockly.BlockSvg) {
     super(sourceBlock);
     this.commentBubble = new ScratchCommentBubble(this.sourceBlock);
-    Blockly.Events.fire(
-      new (Blockly.Events.get("block_comment_create"))(this.commentBubble)
-    );
+    this.fireCreateEvent();
     this.onTextChangedListener = this.onTextChanged.bind(this);
     this.onSizeChangedListener = this.onSizeChanged.bind(this);
     this.onCollapseListener = this.onCollapsed.bind(this);
@@ -198,10 +196,27 @@ class ScratchCommentIcon
     this.commentBubble.setCollapsed(!visible);
   }
 
+  getBubble() {
+    return this.commentBubble;
+  }
+
   dispose() {
     this.commentBubble.dispose();
     super.dispose();
   }
+
+  canBeFocused() {
+    return false;
+  }
+
+  /**
+   * Fires a block comment create event corresponding to this icon's comment.
+   */
+  fireCreateEvent() {
+    Blockly.Events.fire(
+      new (Blockly.Events.get("block_comment_create"))(this.commentBubble)
+    );
+  }
 }
 
 Blockly.registry.register(

package/src/scratch_continuous_toolbox.ts

@@ -7,6 +7,7 @@
 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.
@@ -23,36 +24,25 @@ export class ScratchContinuousToolbox extends ContinuousToolbox {
   }
 
   /**
-   * Gets the contents that should be shown in the flyout.
+   * Converts the given toolbox item to a corresponding array of items that
+   * should appear in the flyout.
    *
-   * @returns Flyout contents.
+   * @param toolboxItem The toolbox item to convert.
+   * @returns An array of flyout item definitions.
    */
-  getInitialFlyoutContents_(): Blockly.utils.toolbox.FlyoutItemInfoArray {
-    // TODO(#211) Clean this up when the continuous toolbox plugin is updated.
-    let contents: Blockly.utils.toolbox.FlyoutItemInfoArray = [];
-    for (const toolboxItem of this.getToolboxItems()) {
-      if (toolboxItem instanceof ScratchContinuousCategory) {
-        if (toolboxItem.shouldShowStatusButton()) {
-          contents.push({
-            kind: "STATUS_INDICATOR_LABEL",
-            id: toolboxItem.getId(),
-            text: toolboxItem.getName(),
-          });
-        } else {
-          // Create a label node to go at the top of the category
-          contents.push({ kind: "LABEL", text: toolboxItem.getName() });
-        }
-        let itemContents = toolboxItem.getContents();
-
-        // Handle custom categories (e.g. variables and functions)
-        if (typeof itemContents === "string") {
-          itemContents = {
-            custom: itemContents,
-            kind: "CATEGORY",
-          };
-        }
-        contents = contents.concat(itemContents);
-      }
+  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;
   }
@@ -62,12 +52,12 @@ export class ScratchContinuousToolbox extends ContinuousToolbox {
    */
   forceRerender() {
     const selectedCategoryName = this.selectedItem_?.getName();
-    super.refreshSelection();
+    this.getFlyout().show(this.getInitialFlyoutContents());
+    this.selectCategoryByName(selectedCategoryName);
     let callback;
     while ((callback = this.postRenderCallbacks.shift())) {
       callback();
     }
-    this.selectCategoryByName(selectedCategoryName);
   }
 
   /**
@@ -77,4 +67,20 @@ export class ScratchContinuousToolbox extends ContinuousToolbox {
   runAfterRerender(callback: () => void) {
     this.postRenderCallbacks.push(callback);
   }
+
+  /**
+   * Returns whether or not the given item should be deselected.
+   * Prevents items from being deselected without a replacement.
+   *
+   * @param oldItem The item that was previously selected.
+   * @param newItem The item that is proposed to be selected instead.
+   * @returns True if the old item should be allowed to be deselected.
+   */
+  shouldDeselectItem_(
+    oldItem: Blockly.ISelectableToolboxItem | null,
+    newItem: Blockly.ISelectableToolboxItem | null
+  ) {
+    if (!newItem) return false;
+    return super.shouldDeselectItem_(oldItem, newItem);
+  }
 }

package/src/scratch_insertion_marker_previewer.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+/**
+ * Displays an indicator of where a block being dragged will be connected.
+ */
+class ScratchInsertionMarkerPreviewer extends Blockly.InsertionMarkerPreviewer {
+  /**
+   * Transforms the given block into a JSON representation used to construct an
+   * insertion marker.
+   *
+   * @param block The block to serialize and use as an insertion marker.
+   * @returns A JSON-formatted string corresponding to a serialized
+   *     representation of the given block suitable for use as an insertion
+   *     marker.
+   */
+  protected override serializeBlockToInsertionMarker(block: Blockly.BlockSvg) {
+    const blockJson = Blockly.serialization.blocks.save(block, {
+      addCoordinates: false,
+      addInputBlocks: true,
+      addNextBlocks: false,
+      doFullSerialization: false,
+    });
+
+    if (!blockJson) {
+      throw new Error(
+        `Failed to serialize source block. ${block.toDevString()}`
+      );
+    }
+
+    return blockJson;
+  }
+}
+
+Blockly.registry.register(
+  Blockly.registry.Type.CONNECTION_PREVIEWER,
+  Blockly.registry.DEFAULT,
+  ScratchInsertionMarkerPreviewer,
+  true
+);

package/src/status_indicator_label_flyout_inflater.ts

@@ -7,6 +7,8 @@
 import * as Blockly from "blockly/core";
 import { StatusIndicatorLabel } from "./status_indicator_label";
 
+export const STATUS_INDICATOR_LABEL_TYPE = "status_indicator_label";
+
 /**
  * Flyout inflater responsible for creating status indicator labels.
  */
@@ -20,15 +22,15 @@ class StatusIndicatorLabelFlyoutInflater extends Blockly.LabelFlyoutInflater {
    */
   load(
     state: Blockly.utils.toolbox.LabelInfo,
-    flyoutWorkspace: Blockly.WorkspaceSvg
-  ): StatusIndicatorLabel {
+    flyout: Blockly.IFlyout
+  ): Blockly.FlyoutItem {
     const label = new StatusIndicatorLabel(
-      flyoutWorkspace,
-      flyoutWorkspace.targetWorkspace,
+      flyout.getWorkspace(),
+      flyout.targetWorkspace,
       state
     );
     label.show();
-    return label;
+    return new Blockly.FlyoutItem(label, STATUS_INDICATOR_LABEL_TYPE);
   }
 }
 
@@ -38,7 +40,7 @@ class StatusIndicatorLabelFlyoutInflater extends Blockly.LabelFlyoutInflater {
 export function registerStatusIndicatorLabelFlyoutInflater() {
   Blockly.registry.register(
     Blockly.registry.Type.FLYOUT_INFLATER,
-    "status_indicator_label",
+    STATUS_INDICATOR_LABEL_TYPE,
     StatusIndicatorLabelFlyoutInflater
   );
 }

package/src/variables.ts

@@ -29,7 +29,7 @@ import {
 } from "./constants";
 import { ScratchVariableModel } from "./scratch_variable_model";
 import { ScratchContinuousToolbox } from "./scratch_continuous_toolbox";
-import { CheckableContinuousFlyout } from "./checkable_continuous_flyout.js";
+import { CheckableContinuousFlyout } from "./checkable_continuous_flyout";
 
 /**
  * Constant prefix to differentiate cloud variable names from other types of