feat: move backpack to use interface for backpackability

plugins/workspace-backpack/src/backpack.ts

@@ -16,6 +16,7 @@
 import {registerContextMenus} from './backpack_helpers';
 import {BackpackOptions, parseOptions} from './options';
 import {BackpackChange, BackpackOpen} from './ui_events';
+import {Backpackable, isBackpackable} from './backpackable';
 
 /**
  * Class for backpack that can be used save blocks from the workspace for
@@ -453,8 +454,8 @@
    *   being dragged.
    */
   onDrop(dragElement: Blockly.IDraggable) {
-    if (dragElement instanceof Blockly.BlockSvg) {
-      this.addBlock(dragElement);
+    if (isBackpackable(dragElement)) {
+      this.addBackpackable(dragElement);
     }
   }
 
@@ -525,7 +526,7 @@
    *     provided block.
    */
   containsBlock(block: Blockly.Block): boolean {
-    return this.contents_.indexOf(this.blockToJsonString(block)) !== -1;
+    return isBackpackable(block) && this.containsBackpackable(block);
   }
 
   /**
@@ -534,7 +535,7 @@
    * @param block The block to be added to the backpack.
    */
   addBlock(block: Blockly.Block) {
-    this.addItem(this.blockToJsonString(block));
+    if (isBackpackable(block)) this.addBackpackable(block);
   }
 
   /**
@@ -544,7 +545,9 @@
    *     backpack.
    */
   addBlocks(blocks: Blockly.Block[]) {
-    this.addItems(blocks.map(this.blockToJsonString));
+    for (const block of blocks) {
+      if (isBackpackable(block)) this.addBackpackable(block);
+    }
   }
 
   /**
@@ -553,7 +556,39 @@
    * @param block The block to be removed from the backpack.
    */
   removeBlock(block: Blockly.Block) {
-    this.removeItem(this.blockToJsonString(block));
+    if (isBackpackable(block)) this.removeBackpackable(block);
+  }
+
+  /**
+   * Returns whether the backpack contains a duplicate of the provided
+   * backpackable.
+   */
+  containsBackpackable(backpackable: Backpackable) {
+    return backpackable
+      .toFlyoutData()
+      .every((info) => this.contents_.indexOf(JSON.stringify(info)) !== -1);
+  }
+
+  /** Adds the given backpackable to the backpack. */
+  addBackpackable(backpackable: Backpackable) {
+    this.addBackpackables([backpackable]);
+  }
+
+  /** Adds the given backpackables to the backpack. */
+  addBackpackables(backpackables: Backpackable[]) {
+    this.addItems(
+      backpackables
+        .map((b) => b.toFlyoutData())
+        .reduce((acc, curr) => [...acc, ...curr])
+        .map((info) => JSON.stringify(info)),
+    );
+  }
+
+  /** Removes the given backpackable from the backpack, if it exists. */
+  removeBackpackable(backpackable: Backpackable) {
+    for (const info of backpackable.toFlyoutData()) {
+      this.removeItem(JSON.stringify(info));
+    }
   }
 
   /**

plugins/workspace-backpack/src/backpackable.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+/** Defines if an object can be added to the backpack. */
+export interface Backpackable {
+  /**
+   * Returns a representation of this object as a FlyoutItemInfo array, so that
+   * it can be displayed in the backpack.
+   *
+   * This method should remove any unique or useless state data (e.g. IDs or
+   * coordinates).
+   */
+  toFlyoutData(): Blockly.utils.toolbox.FlyoutItemInfo[];
+}
+
+/** Checks whether the given object conforms to the Backpackable interface. */
+export function isBackpackable(obj: any): obj is Backpackable {
+  return obj.toFlyoutData !== undefined;
+}