Merge pull request #35455 from code-dot-org/jun24-minitoolbox

[Spritelab MiniToolbox] Shadow values on minitoolbox blocks when the minitoolbox opens.
code-dot-org · Jun 24, 2020 · da5e14e · da5e14e
2 parents 4d1d30f + 03f00f5
commit da5e14e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/apps/package.json b/apps/package.json
@@ -49,7 +49,7 @@
     "@babel/preset-react": "^7.0.0",
     "@cdo/interpreted": "link:../dashboard/config/libraries",
     "@code-dot-org/artist": "0.2.1",
-    "@code-dot-org/blockly": "3.5.22",
+    "@code-dot-org/blockly": "3.5.23",
     "@code-dot-org/bramble": "0.1.26",
     "@code-dot-org/craft": "0.2.2",
     "@code-dot-org/dance-party": "1.0.1",

diff --git a/apps/src/block_utils.js b/apps/src/block_utils.js
@@ -1011,17 +1011,34 @@ exports.createJsWrapperBlockCreator = function(
             miniToolboxXml += `\n <block type="${block}"></block>`;
           });
           miniToolboxXml += '\n</xml>';
-          // Block.tray is used in the blockly repo to track whether or not the horizontal flyout is open.
-          this.tray = false;
+          // Block.isMiniFlyoutOpen is used in the blockly repo to track whether or not the horizontal flyout is open.
+          this.isMiniFlyoutOpen = false;
           // On button click, open/close the horizontal flyout, toggle button text between +/-, and re-render the block.
           Blockly.bindEvent_(toggle.fieldGroup_, 'mousedown', this, () => {
-            if (this.tray) {
+            if (this.isMiniFlyoutOpen) {
               toggle.setText('+');
             } else {
               toggle.setText('-');
             }
-            this.tray = !this.tray;
+            this.isMiniFlyoutOpen = !this.isMiniFlyoutOpen;
             this.render();
+            // If the mini flyout just opened, make sure mini-toolbox blocks are updated with the right thumbnails.
+            // This has to happen after render() because some browsers don't render properly if the elements are not
+            // visible. The root cause is that getComputedTextLength returns 0 if a text element is not visible, so
+            // the thumbnail image overlaps the label in Firefox, Edge, and IE.
+            if (this.isMiniFlyoutOpen) {
+              let miniToolboxBlocks = this.miniFlyout.blockSpace_.topBlocks_;
+              let rootInputBlocks = this.getConnections_(true /* all */)
+                .filter(function(connection) {
+                  return connection.type === Blockly.INPUT_VALUE;
+                })
+                .map(function(connection) {
+                  return connection.targetBlock();
+                });
+              miniToolboxBlocks.forEach(function(block, index) {
+                block.shadowBlockValue_(rootInputBlocks[index]);
+              });
+            }
           });
           if (appOptions.level.miniToolbox && !appOptions.readonlyWorkspace) {
             this.appendDummyInput()

diff --git a/apps/yarn.lock b/apps/yarn.lock
@@ -1526,10 +1526,10 @@
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@code-dot-org/artist/-/artist-0.2.1.tgz#fcfe7ea5cfb3f19ddb6b912e70e922ba4b7ef0b1"
 
-"@code-dot-org/blockly@3.5.22":
-  version "3.5.22"
-  resolved "https://registry.yarnpkg.com/@code-dot-org/blockly/-/blockly-3.5.22.tgz#ca188b0dd954c920639a9241e7888a9047620238"
-  integrity sha512-JgFCDLwgeFC5j8lRrp0g+Hd+sTAYjaQMsfZgUHK+3hGVYG7ISXw+iZhFdoCGqJBpCU3NV9cCXH6R2ax3SRL/WQ==
+"@code-dot-org/blockly@3.5.23":
+  version "3.5.23"
+  resolved "https://registry.yarnpkg.com/@code-dot-org/blockly/-/blockly-3.5.23.tgz#5935ca62404ba0ed8dbbc5c44cd3db9d30c918dc"
+  integrity sha512-zb6yK4vL5uYK18IcrxQk8uRrXxuMSrBTGoNs/89m9BHIAk46knGat1VB4U46OkZdjboMp+rg6kY5mVmbMo00MQ==
 
 "@code-dot-org/bramble@0.1.26":
   version "0.1.26"