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

package/dist/main.js.LICENSE.txt

@@ -1,15 +1,3 @@
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
 /**
  * @license
  * Copyright 2023 Google LLC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-blocks",
-  "version": "2.0.0-spork.3",
+  "version": "2.0.0-spork.4",
   "description": "Scratch Blocks is a library for building creative computing interfaces.",
   "author": "Massachusetts Institute of Technology",
   "license": "Apache-2.0",
@@ -32,9 +32,9 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@blockly/continuous-toolbox": "^6.0.9",
-    "@blockly/field-colour": "^5.0.9",
-    "blockly": "^12.0.0-beta.0"
+    "@blockly/continuous-toolbox": "^7.0.0-beta.1",
+    "@blockly/field-colour": "^4.0.2",
+    "blockly": "^12.0.0-beta.1"
   },
   "config": {
     "commitizen": {

package/src/checkable_continuous_flyout.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+import { ContinuousFlyout } from "@blockly/continuous-toolbox";
+import { CheckboxBubble } from "./checkbox_bubble";
+import { StatusIndicatorLabel } from "./status_indicator_label";
+import { STATUS_INDICATOR_LABEL_TYPE } from "./status_indicator_label_flyout_inflater";
+
+export class CheckableContinuousFlyout extends ContinuousFlyout {
+  /**
+   * Creates a new CheckableContinuousFlyout.
+   *
+   * @param workspaceOptions Configuration options for the flyout workspace.
+   */
+  constructor(workspaceOptions: Blockly.Options) {
+    workspaceOptions.modalInputs = false;
+    super(workspaceOptions);
+    this.tabWidth_ = 0;
+    this.MARGIN = 12;
+    this.GAP_Y = 12;
+  }
+
+  /**
+   * Serializes a block to JSON in order to copy it to the main workspace.
+   *
+   * @param block The block to serialize.
+   * @returns A JSON representation of the block.
+   */
+  protected serializeBlock(block: Blockly.BlockSvg) {
+    const json = super.serializeBlock(block);
+    // Delete the serialized block's ID so that a new one is generated when it is
+    // placed on the workspace. Otherwise, the block on the workspace may be
+    // indistinguishable from the one in the flyout, which can cause reporter blocks
+    // to have their value dropdown shown in the wrong place.
+    delete json.id;
+    return json;
+  }
+
+  /**
+   * Set the state of a checkbox by block ID.
+   *
+   * @param blockId ID of the block whose checkbox should be set
+   * @param value Value to set the checkbox to.
+   */
+  setCheckboxState(blockId: string, value: boolean) {
+    this.getWorkspace()
+      .getBlockById(blockId)
+      ?.getIcon("checkbox")
+      ?.setChecked(value);
+  }
+
+  getFlyoutScale() {
+    return 0.675;
+  }
+
+  getWidth() {
+    return 250;
+  }
+
+  protected reflowInternal_() {
+    super.reflowInternal_();
+
+    if (this.RTL) {
+      // The parent implementation assumes that the flyout grows to fit its
+      // contents, and adjusts blocks in RTL mode accordingly. In Scratch, the
+      // flyout width is fixed (and blocks may exceed it), so re-adjust blocks
+      // accordingly based on the actual fixed width.
+      for (const item of this.getContents()) {
+        const oldX = item.getElement().getBoundingRectangle().left;
+        let newX =
+          this.getWidth() / this.workspace_.scale -
+          item.getElement().getBoundingRectangle().getWidth() -
+          this.MARGIN;
+        if (
+          "checkboxInFlyout" in item.getElement() &&
+          item.getElement().checkboxInFlyout
+        ) {
+          newX -= CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN;
+        }
+        item.getElement().moveBy(newX - oldX, 0);
+      }
+    }
+  }
+
+  /**
+   * Validates that the given toolbox item represents a label.
+   *
+   * @param item The toolbox item to check.
+   * @returns True if the item represents a label in the flyout.
+   */
+  protected toolboxItemIsLabel(item: Blockly.FlyoutItem) {
+    return (
+      item.getType() === STATUS_INDICATOR_LABEL_TYPE ||
+      super.toolboxItemIsLabel(item)
+    );
+  }
+
+  /**
+   * Updates the state of status indicators for hardware-based extensions.
+   */
+  refreshStatusButtons() {
+    for (const item of this.contents) {
+      if (item.element instanceof StatusIndicatorLabel) {
+        item.element.refreshStatus();
+      }
+    }
+  }
+}

package/src/checkbox_bubble.ts

@@ -203,15 +203,14 @@ export class CheckboxBubble
    * Recalculates this bubble's location, keeping it adjacent to its block.
    */
   updateLocation() {
-    const blockLocation = this.sourceBlock.getRelativeToSurfaceXY();
-    const blockBounds = this.sourceBlock.getHeightWidth();
+    const bounds = this.sourceBlock.getBoundingRectangle();
     const x = this.sourceBlock.workspace.RTL
-      ? blockLocation.x + blockBounds.width + CheckboxBubble.CHECKBOX_MARGIN
-      : blockLocation.x -
+      ? bounds.right + CheckboxBubble.CHECKBOX_MARGIN
+      : bounds.left -
         CheckboxBubble.CHECKBOX_MARGIN -
         CheckboxBubble.CHECKBOX_SIZE;
     const y =
-      blockLocation.y + (blockBounds.height - CheckboxBubble.CHECKBOX_SIZE) / 2;
+      bounds.top + (bounds.getHeight() - CheckboxBubble.CHECKBOX_SIZE) / 2;
     this.moveTo(x, y);
   }
 

package/src/css.ts

@@ -751,8 +751,9 @@ const styles = `
   }
 
   /* Category tree in Toolbox. */
-  .blocklyToolboxDiv {
+  .blocklyToolbox {
     background-color: var(--colour-toolbox);
+    border-right: 1px solid #ddd;
     color: var(--colour-toolboxText);
     overflow-x: visible;
     overflow-y: auto;
@@ -763,6 +764,11 @@ const styles = `
     padding: 0;
   }
 
+  .blocklyToolbox[dir="RTL"] {
+    border-right: none;
+    border-left: 1px solid #ddd;
+  }
+
   .blocklyTreeRoot {
     padding: 4px 0;
   }
@@ -771,7 +777,7 @@ const styles = `
     outline: none;
   }
 
-  .blocklyToolboxDiv .blocklyTreeRow {
+  .blocklyToolbox .blocklyToolboxCategory {
     line-height: 22px;
     margin: 0;
     padding: 0.375rem 0px;
@@ -789,11 +795,11 @@ const styles = `
     margin: 1px 0 8px 5px;
   }
 
-  .blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-    margin-left: 8px;
+  .blocklyToolbox[dir="RTL"] .blocklyToolboxCategory {
+    margin-left: 0px;
   }
 
-  .blocklyTreeRow:hover {
+  .blocklyToolboxCategory:hover {
     color: var(--colour-toolboxHover);
   }
 
@@ -844,7 +850,7 @@ const styles = `
     background-position: -48px -1px;
   }
 
-  .blocklyTreeLabel {
+  .blocklyToolboxCategoryLabel {
     cursor: default;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: .65rem;
@@ -855,7 +861,7 @@ const styles = `
     text-wrap: wrap;
   }
 
-  .blocklyTreeSelected .blocklyTreeLabel {
+  .blocklyToolboxSelected .blocklyToolboxCategoryLabel {
     color: inherit;
   }
 

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";
@@ -120,6 +119,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;

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_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);
   }
 
   /**

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.
  */
@@ -21,14 +23,14 @@ class StatusIndicatorLabelFlyoutInflater extends Blockly.LabelFlyoutInflater {
   load(
     state: Blockly.utils.toolbox.LabelInfo,
     flyoutWorkspace: Blockly.WorkspaceSvg
-  ): StatusIndicatorLabel {
+  ): Blockly.FlyoutItem {
     const label = new StatusIndicatorLabel(
       flyoutWorkspace,
       flyoutWorkspace.targetWorkspace,
       state
     );
     label.show();
-    return label;
+    return new Blockly.FlyoutItem(label, STATUS_INDICATOR_LABEL_TYPE, true);
   }
 }
 
@@ -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