feat: make the filled backpack image optional (#1146)

google · May 26, 2022 · 549be3d · 549be3d
1 parent c74031e
commit 549be3d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/plugins/workspace-backpack/README.md b/plugins/workspace-backpack/README.md
@@ -46,6 +46,7 @@ This plugin takes an optional configuration object.
 ```
 {
   allowEmptyBackpackOpen: (boolean|undefined),
+  useFilledBackpackImage: (boolean|undefined),
   contextMenu: {
     emptyBackpack: (boolean|undefined),
     removeFromBackpack: (boolean|undefined),
@@ -63,6 +64,7 @@ registered at `init`.
 ```js
 const backpackOptions = {
   allowEmptyBackpackOpen: true,
+  useFilledBackpackImage: true,
   contextMenu: {
     emptyBackpack: true,
     removeFromBackpack: true,
@@ -77,6 +79,7 @@ passed in options that is undefined:
 ```js
 const defaultOptions = {
   allowEmptyBackpackOpen: true,
+  useFilledBackpackImage: false,
   contextMenu: {
     emptyBackpack: true,
     removeFromBackpack: true,
@@ -91,6 +94,9 @@ const defaultOptions = {
 The `allowEmptyBackpackOpen` property, if set to `false`, will prevent the backpack flyout from
 being opened if the backpack is empty.
 
+The `useFilledBackpackImage` property, if set to `true`, will change the
+backpack image when the backpack has something in it.
+
 The `disablePreconditionChecks` property will prevent the "Copy to Backpack"
 context menu option from disabling the context menu option if the block is
 already in the Backpack. Setting this flag to `true` to disable the check can be

diff --git a/plugins/workspace-backpack/src/backpack.js b/plugins/workspace-backpack/src/backpack.js
@@ -12,9 +12,7 @@
 import * as Blockly from 'blockly/core';
 import {cleanBlockXML, registerContextMenus} from './backpack_helpers';
 import {BackpackChange, BackpackOpen} from './ui_events';
-import {
-  BackpackContextMenuOptions, BackpackOptions, parseOptions,
-} from './options';
+import {BackpackContextMenuOptions, BackpackOptions, parseOptions} from './options';
 
 /**
  * Class for backpack that can be used save blocks from the workspace for
@@ -556,15 +554,16 @@ export class Backpack extends Blockly.DragTarget {
    */
   onContentChange_() {
     this.maybeRefreshFlyoutContents_();
+    Blockly.Events.fire(new BackpackChange(this.workspace_.id));
+
+    if (!this.options_.useFilledBackpackImage) return;
     if (this.contents_.length > 0) {
       this.svgImg_.setAttributeNS(Blockly.utils.dom.XLINK_NS, 'xlink:href',
           BACKPACK_FILLED_SVG_DATAURI);
     } else {
       this.svgImg_.setAttributeNS(Blockly.utils.dom.XLINK_NS, 'xlink:href',
           BACKPACK_SVG_DATAURI);
     }
-
-    Blockly.Events.fire(new BackpackChange(this.workspace_.id));
   }
 
   /**

diff --git a/plugins/workspace-backpack/src/options.js b/plugins/workspace-backpack/src/options.js
@@ -25,6 +25,7 @@ export let BackpackContextMenuOptions;
 /**
  * @typedef {{
  *    allowEmptyBackpackOpen: (boolean|undefined),
+ *    useFilledBackpackImage: (boolean|undefined),
  *    contextMenu:(!BackpackContextMenuOptions|undefined)
  * }}
  */
@@ -37,8 +38,9 @@ export let BackpackOptions;
  * @return {!BackpackOptions} The created options object.
  */
 export function parseOptions(options) {
-  const defaultOptions = {
+  const defaults = {
     allowEmptyBackpackOpen: true,
+    useFilledBackpackImage: false,
     contextMenu: {
       emptyBackpack: true,
       removeFromBackpack: true,
@@ -48,13 +50,19 @@ export function parseOptions(options) {
       disablePreconditionChecks: false,
     },
   };
+
   if (!options) {
-    return defaultOptions;
+    return defaults;
   }
-  const mergedOptions = {};
-  mergedOptions.contextMenu = {
-    ...defaultOptions.contextMenu, ...options.contextMenu};
-  mergedOptions.allowEmptyBackpackOpen = options.allowEmptyBackpackOpen ??
-      defaultOptions.allowEmptyBackpackOpen;
-  return mergedOptions;
+
+  return {
+    allowEmptyBackpackOpen:
+        options.allowEmptyBackpackOpen ?? defaults.allowEmptyBackpackOpen,
+    useFilledBackpackImage:
+        options.useFilledBackpackImage ?? defaults.useFilledBackpackImage,
+    contextMenu: {
+      ...defaults.contextMenu,
+      ...options.contextMenu,
+    },
+  };
 }