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

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

@@ -5,7 +5,7 @@
  */
 
 import * as Blockly from "blockly/core";
-import { CheckboxBubble } from "./checkbox_bubble.js";
+import { CheckboxBubble } from "./checkbox_bubble";
 
 /**
  * A block inflater that caches and reuses blocks to improve performance.
@@ -13,26 +13,27 @@ import { CheckboxBubble } from "./checkbox_bubble.js";
 export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Whether or not block recycling is enabled.
-   * @type {boolean}
    */
   recyclingEnabled = true;
 
   /**
    * Map from block type to block instance.
-   * @type {Map<string, !Blockly.BlockSvg>}
    */
-  recycledBlocks = new Map();
+  recycledBlocks = new Map<string, Blockly.BlockSvg>();
 
   /**
    * Creates a block on the flyout workspace from the given block definition.
    *
-   * @param {!Object} state A JSON representation of a block to load.
-   * @param {!Blockly.WorkspaceSvg} flyoutWorkspace The flyout's workspace.
-   * @returns {!Blockly.BlockSvg} The newly created block.
+   * @param state A JSON representation of a block to load.
+   * @param flyoutWorkspace The flyout's workspace.
+   * @returns The newly created block.
    */
-  load(state, flyoutWorkspace) {
+  load(
+    state: Blockly.utils.toolbox.BlockInfo,
+    flyoutWorkspace: Blockly.WorkspaceSvg
+  ): Blockly.IBoundedElement {
     const block = super.load(state, flyoutWorkspace);
-    if (block.checkboxInFlyout) {
+    if ("checkboxInFlyout" in block && block.checkboxInFlyout) {
       block.moveBy(
         CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN,
         0
@@ -45,19 +46,21 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Toggles whether or not recycling is enabled.
    *
-   * @param {boolean} enabled True if recycling should be enabled.
+   * @param enabled True if recycling should be enabled.
    */
-  setRecyclingEnabled(enabled) {
+  setRecyclingEnabled(enabled: boolean) {
     this.recyclingEnabled = enabled;
   }
 
   /**
    * Creates a new block from the given block definition.
    *
-   * @param {!Object} blockDefinition The definition to create a block from.
-   * @returns {!Blockly.BlockSvg} The newly created block.
+   * @param blockDefinition The definition to create a block from.
+   * @returns The newly created block.
    */
-  createBlock(blockDefinition) {
+  createBlock(
+    blockDefinition: Blockly.utils.toolbox.BlockInfo
+  ): Blockly.BlockSvg {
     const blockType = this.getTypeFromDefinition(blockDefinition);
     return (
       this.getRecycledBlock(blockType) ??
@@ -68,15 +71,17 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Returns the type of a block from an XML or JSON block definition.
    *
-   * @param blockDefinition {!Object} The block definition to parse.
-   * @returns {string} The block type.
+   * @param blockDefinition The block definition to parse.
+   * @returns The block type.
    */
-  getTypeFromDefinition(blockDefinition) {
+  getTypeFromDefinition(
+    blockDefinition: Blockly.utils.toolbox.BlockInfo
+  ): string {
     if (blockDefinition["blockxml"]) {
       const xml =
         typeof blockDefinition["blockxml"] === "string"
           ? Blockly.utils.xml.textToDom(blockDefinition["blockxml"])
-          : blockDefinition["blockxml"];
+          : (blockDefinition["blockxml"] as Element);
       return xml.getAttribute("type");
     } else {
       return blockDefinition["type"];
@@ -88,9 +93,9 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * top of the workspace. Used during large workspace swaps to limit the number
    * of new DOM elements we need to create.
    *
-   * @param {!Blockly.BlockSvg} block The block to recycle.
+   * @param block The block to recycle.
    */
-  recycleBlock(block) {
+  recycleBlock(block: Blockly.BlockSvg) {
     const xy = block.getRelativeToSurfaceXY();
     block.moveBy(-xy.x, -xy.y);
     this.recycledBlocks.set(block.type, block);
@@ -100,11 +105,10 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * Returns a block from the cache of recycled blocks with the given type, or
    * undefined if one cannot be found.
    *
-   * @param {string} blockType The type of the block to try to recycle.
-   * @returns {?Blockly.BlockSvg} The recycled block, or undefined if
-   *     one could not be recycled.
+   * @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) {
+  getRecycledBlock(blockType: string): Blockly.BlockSvg | undefined {
     const block = this.recycledBlocks.get(blockType);
     this.recycledBlocks.delete(blockType);
     return block;
@@ -113,10 +117,10 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Returns whether the given block can be recycled or not.
    *
-   * @param {!Blockly.BlockSvg} block The block to check for recyclability.
-   * @returns {boolean} True if the block can be recycled. False otherwise.
+   * @param block The block to check for recyclability.
+   * @returns True if the block can be recycled. False otherwise.
    */
-  blockIsRecyclable(block) {
+  blockIsRecyclable(block: Blockly.Block): boolean {
     if (!this.recyclingEnabled) {
       return false;
     }
@@ -144,9 +148,7 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
       }
       // Check children.
       if (input.connection) {
-        const targetBlock =
-          /** @type {Blockly.BlockSvg} */
-          (input.connection.targetBlock());
+        const targetBlock = input.connection.targetBlock();
         if (targetBlock && !this.blockIsRecyclable(targetBlock)) {
           return false;
         }
@@ -158,9 +160,9 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
   /**
    * Disposes of the provided block.
    *
-   * @param {!Blockly.BlockSvg} element The block to dispose of.
+   * @param element The block to dispose of.
    */
-  disposeElement(element) {
+  disposeElement(element: Blockly.BlockSvg) {
     if (this.blockIsRecyclable(element)) {
       this.removeListeners(element.id);
       this.recycleBlock(element);
@@ -173,9 +175,7 @@ export class RecyclableBlockFlyoutInflater extends Blockly.BlockFlyoutInflater {
    * Clears the cache of recycled blocks.
    */
   emptyRecycledBlocks() {
-    this.recycledBlocks
-      .values()
-      .forEach((block) => block.dispose(false, false));
+    this.recycledBlocks.forEach((block) => block.dispose(false, false));
     this.recycledBlocks.clear();
   }
 }

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

@@ -7,7 +7,7 @@
 import * as Blockly from "blockly/core";
 
 export class BowlerHat extends Blockly.blockRendering.Hat {
-  constructor(constants) {
+  constructor(constants: Blockly.blockRendering.ConstantProvider) {
     super(constants);
     // Calculated dynamically by computeBounds_().
     this.width = 0;

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