Remove monkeypatch

examples/backpack-demo/package.json

@@ -14,7 +14,7 @@
     ]
   },
   "dependencies": {
-    "blockly": "^5.20210325.0",
+    "blockly": "^5.20210624.0-beta.2",
     "@blockly/workspace-backpack": "file:../../plugins/workspace-backpack"
   }
 }

plugins/workspace-backpack/package.json

@@ -43,10 +43,10 @@
   "devDependencies": {
     "@blockly/dev-scripts": "^1.2.6",
     "@blockly/dev-tools": "^2.2.1",
-    "blockly": "^5.20210325.1"
+    "blockly": "^5.20210624.0-beta.2"
   },
   "peerDependencies": {
-    "blockly": ">=5.20210325.1"
+    "blockly": ">=5.20210624.0-beta.2"
   },
   "publishConfig": {},
   "eslintConfig": {

plugins/workspace-backpack/src/backpack.js

@@ -15,32 +15,37 @@ import {BackpackChange, BackpackOpen} from './ui_events';
 import {
   BackpackContextMenuOptions, BackpackOptions, parseOptions,
 } from './options';
-import './backpack_monkey_patch';
 
 /**
  * Class for backpack that can be used save blocks from the workspace for
  * future use.
  * @param {!Blockly.WorkspaceSvg} workspace The workspace to sit in.
+ * @implements {Blockly.IAutoHideable}
  * @implements {Blockly.IPositionable}
+ * @extends {Blockly.DragTarget}
  */
-export class Backpack {
+export class Backpack extends Blockly.DragTarget {
   /**
    * Constructor for a backpack.
    * @param {!Blockly.WorkspaceSvg} targetWorkspace The target workspace that
-   *     the plugin will be added to.
+   *     the backpack will be added to.
    * @param {!BackpackOptions=} backpackOptions The backpack options to use.
    */
   constructor(targetWorkspace, backpackOptions) {
+    super();
+
     /**
      * The workspace.
      * @type {!Blockly.WorkspaceSvg}
      * @protected
      */
     this.workspace_ = targetWorkspace;
 
-    // This set is part of the monkeypatch, so that a reference to the backpack
-    // can be accessed on a given workspace.
-    this.workspace_.backpack = this;
+    /**
+     * The unique id for this component.
+     * @type {string}
+     */
+    this.id = 'backpack';
 
     /**
      * The backpack options.
@@ -157,11 +162,14 @@ export class Backpack {
    * Initializes the backpack.
    */
   init() {
-    this.workspace_.getPluginManager().addPlugin({
-      id: 'backpack',
-      plugin: this,
+    this.workspace_.getComponentManager().addComponent({
+      component: this,
       weight: 2,
-      types: [Blockly.PluginManager.Type.POSITIONABLE],
+      capabilities: [
+        Blockly.ComponentManager.Capability.AUTOHIDEABLE,
+        Blockly.ComponentManager.Capability.DRAG_TARGET,
+        Blockly.ComponentManager.Capability.POSITIONABLE,
+      ],
     });
     this.initFlyout_();
     this.createDom_();
@@ -282,9 +290,9 @@ export class Backpack {
     this.addEvent_(
         this.svgGroup_, 'mouseup', this, this.onClick_);
     this.addEvent_(
-        this.svgGroup_, 'mouseover', this, this.onDragEnter);
+        this.svgGroup_, 'mouseover', this, this.onMouseOver_);
     this.addEvent_(
-        this.svgGroup_, 'mouseout', this, this.onDragExit);
+        this.svgGroup_, 'mouseout', this, this.onMouseOut_);
   }
 
   /**
@@ -296,11 +304,7 @@ export class Backpack {
    * @private
    */
   addEvent_(node, name, thisObject, func) {
-    // bindEventWithChecks_ quashes events too aggressively. See:
-    // https://groups.google.com/forum/#!topic/blockly/QF4yB9Wx00s
-    // Using bindEventWithChecks_ for blocking mousedown causes issue in mobile.
-    // See #4303
-    const event = Blockly.bindEvent_(node, name, thisObject, func);
+    const event = Blockly.browserEvents.bind(node, name, thisObject, func);
     this.boundEvents_.push(event);
   }
 
@@ -315,10 +319,11 @@ export class Backpack {
 
   /**
    * Returns the bounding rectangle of the drag target area in pixel units
-   * relative to the Blockly injection div.
-   * @return {!Blockly.utils.Rect} The plugin’s bounding box.
+   * relative to viewport.
+   * @return {?Blockly.utils.Rect} The component's bounding box. Null if drag
+   *   target area should be ignored.
    */
-  getTargetArea() {
+  getClientRect() {
     if (!this.svgGroup_) {
       return null;
     }
@@ -334,7 +339,7 @@ export class Backpack {
   /**
    * Returns the bounding rectangle of the UI element in pixel units relative to
    * the Blockly injection div.
-   * @return {!Blockly.utils.Rect} The plugin’s bounding box.
+   * @return {!Blockly.utils.Rect} The component’s bounding box.
    */
   getBoundingRectangle() {
     return new Blockly.utils.Rect(
@@ -427,11 +432,15 @@ export class Backpack {
   }
 
   /**
-   * Handles a block drop on this backpack.
-   * @param {!Blockly.BlockSvg} block The block being dropped on the backpack.
+   * Handles when a block or bubble is dropped on this component.
+   * Should not handle delete here.
+   * @param {!Blockly.IDraggable} dragElement The block or bubble currently
+   *   being dragged.
    */
-  handleBlockDrop(block) {
-    this.addBlock(block);
+  onDrop(dragElement) {
+    if (dragElement instanceof Blockly.BlockSvg) {
+      this.addBlock(/** @type {!Blockly.BlockSvg} */ (dragElement));
+    }
   }
   /**
    * Converts the provided block into a cleaned XML string.
@@ -615,6 +624,19 @@ export class Backpack {
     Blockly.Events.fire(new BackpackOpen(false, this.workspace_.id));
   }
 
+  /**
+   * Hides the component. Called in Blockly.hideChaff.
+   * @param {boolean} onlyClosePopups Whether only popups should be closed.
+   *     Flyouts should not be closed if this is true.
+   */
+  autoHide(onlyClosePopups) {
+    // The backpack flyout always autocloses because it overlays the backpack UI
+    // (no backpack to click to close it).
+    if (!onlyClosePopups) {
+      this.close();
+    }
+  }
+
   /**
    * Handle click event.
    * @param {!MouseEvent} e Mouse event.
@@ -631,19 +653,70 @@ export class Backpack {
   }
 
   /**
-   * Handle mouse over.
+   * Handles when a cursor with a block or bubble enters this drag target.
+   * @param {!Blockly.IDraggable} dragElement The block or bubble currently
+   *   being dragged.
+   */
+  onDragEnter(dragElement) {
+    if (dragElement instanceof Blockly.BlockSvg) {
+      this.updateHoverStying_(true);
+    }
+  }
+
+  /**
+   * Handles when a cursor with a block or bubble exits this drag target.
+   * @param {!Blockly.IDraggable} _dragElement The block or bubble currently
+   *   being dragged.
+   */
+  onDragExit(_dragElement) {
+    this.updateHoverStying_(false);
+  }
+
+  /**
+   * Handles a mouseover event.
+   * @private
+   */
+  onMouseOver_() {
+    if (this.isOpenable_()) {
+      this.updateHoverStying_(true);
+    }
+  }
+
+  /**
+   * Handles a mouseout event.
+   * @private
+   */
+  onMouseOut_() {
+    this.updateHoverStying_(false);
+  }
+
+  /**
+   * Adds or removes styling to darken the backpack to show it is interactable.
+   * @param {boolean} addClass True to add styling, false to remove.
+   * @protected
    */
-  onDragEnter() {
-    Blockly.utils.dom.addClass(
-        /** @type {!SVGElement} */ (this.svgImg_), 'blocklyBackpackDarken');
+  updateHoverStying_(addClass) {
+    const backpackDarken = 'blocklyBackpackDarken';
+    if (addClass) {
+      Blockly.utils.dom.addClass(
+          /** @type {!SVGElement} */ (this.svgImg_), backpackDarken);
+    } else {
+      Blockly.utils.dom.removeClass(
+          /** @type {!SVGElement} */ (this.svgImg_), backpackDarken);
+    }
   }
 
   /**
-   * Handle mouse exit.
+   * Returns whether the provided block or bubble should not be moved after
+   * being dropped on this component. If true, the element will return to where
+   * it was when the drag started.
+   * @param {!Blockly.IDraggable} dragElement The block or bubble currently
+   *   being dragged.
+   * @return {boolean} Whether the block or bubble provided should be returned
+   *   to drag start.
    */
-  onDragExit() {
-    Blockly.utils.dom.removeClass(
-        /** @type {!SVGElement} */ (this.svgImg_), 'blocklyBackpackDarken');
+  shouldPreventMove(dragElement) {
+    return dragElement instanceof Blockly.BlockSvg;
   }
 
   /**
@@ -680,7 +753,7 @@ Blockly.Css.register([
   `.blocklyBackpack {
     opacity: .4;
   }
-  .blocklyBackpack:hover, .blocklyBackpackDarken {
+  .blocklyBackpackDarken {
     opacity: .6;
   }
   .blocklyBackpack:active {