collapsible & expandable blocks

core/block.js

@@ -1225,14 +1225,14 @@ Blockly.Block.prototype.toString = function(opt_maxLength, opt_emptyToken) {
       if (input.connection) {
         var child = input.connection.targetBlock();
         if (child) {
-          text.push(child.toString(undefined, opt_emptyToken));
+          text.push(child.toString(undefined, emptyFieldPlaceholder));
         } else {
-          text.push(emptyFieldPlaceholder);
+          text.push('...');
         }
       }
     }
   }
-  text = goog.string.trim(text.join(' ')) || '???';
+  text = goog.string.trim(text.join(' ')) || emptyFieldPlaceholder;
   if (opt_maxLength) {
     // TODO: Improve truncation so that text from this block is given priority.
     // E.g. "1+2+3+4+5+6+7+8+9=0" should be "...6+7+8+9=0", not "1+2+3+4+5...".

core/block_render_svg_vertical.js

@@ -1099,7 +1099,7 @@ Blockly.BlockSvg.prototype.computeOutputPadding_ = function(inputRows) {
   var otherShape;
   // In checking the left/start side, a field takes precedence over any input.
   // That's because a field will be rendered before any value input.
-  if (firstField) {
+  if (firstField || !firstInput.connection) {
     otherShape = 0; // Field comes first in the row.
   } else {
     // Value input comes first in the row.
@@ -1127,7 +1127,7 @@ Blockly.BlockSvg.prototype.computeOutputPadding_ = function(inputRows) {
   // In checking the right/end side, any value input takes precedence over any field.
   // That's because fields are rendered before inputs...the last item
   // in the row will be an input, if one exists.
-  if (lastInput.connection) {
+  if (lastInput.connection && lastInput.connection) {
     // Value input last in the row.
     var inputConnection = lastInput.connection;
     if (!inputConnection.targetConnection) {
@@ -1194,6 +1194,9 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(iconWidth, inputRows) {
   var cursorY = this.renderDrawRight_(steps, inputRows, iconWidth);
   this.renderDrawBottom_(steps, cursorY);
   this.renderDrawLeft_(steps);
+
+  // fix collapsed inputs
+  if (this.isCollapsed()) this.svgGroup_.querySelectorAll('.blocklyInputOutline').forEach(v => v.setAttribute('style', 'visibility: hidden'));
 
   var pathString = steps.join(' ');
   this.svgPath_.setAttribute('d', pathString);

core/block_svg.js

@@ -576,7 +576,7 @@ Blockly.BlockSvg.prototype.setCollapsed = function(collapsed) {
   if (this.collapsed_ == collapsed) {
     return;
   }
-  var renderList = [];
+  var renderList = [this];
   // Show/hide the inputs.
   for (var i = 0, input; input = this.inputList[i]; i++) {
     renderList.push.apply(renderList, input.setVisible(!collapsed));
@@ -586,7 +586,7 @@ Blockly.BlockSvg.prototype.setCollapsed = function(collapsed) {
   if (collapsed) {
     var icons = this.getIcons();
     for (var i = 0; i < icons.length; i++) {
-      icons[i].setVisible(false);
+      //icons[i].setVisible(false);
     }
     var text = this.toString(Blockly.COLLAPSE_CHARS);
     this.appendDummyInput(COLLAPSED_INPUT_NAME).appendField(text).init();
@@ -597,10 +597,6 @@ Blockly.BlockSvg.prototype.setCollapsed = function(collapsed) {
   }
   Blockly.BlockSvg.superClass_.setCollapsed.call(this, collapsed);
 
-  if (!renderList.length) {
-    // No child blocks, just render this block.
-    renderList[0] = this;
-  }
   if (this.rendered) {
     for (var i = 0, block; block = renderList[i]; i++) {
       block.render();
@@ -715,6 +711,9 @@ Blockly.BlockSvg.prototype.showContextMenu_ = function(e) {
     if (this.isEditable() && this.workspace.options.comments) {
       menuOptions.push(Blockly.ContextMenu.blockCommentOption(block));
     }
+    if (this.workspace.options.collapse) {
+      menuOptions.push(Blockly.ContextMenu.blockCollapseOption(block));
+    }
     menuOptions.push(Blockly.ContextMenu.blockDeleteOption(block));
   } else if (this.parentBlock_ && this.isShadow_) {
     this.parentBlock_.showContextMenu_(e);

core/contextmenu.js

@@ -251,6 +251,41 @@ Blockly.ContextMenu.blockDeleteOption = function(block) {
   return deleteOption;
 };
 
+Blockly.ContextMenu.blockCollapseOption = function(block) {
+  var descendantCount = block.getDescendants(false, true).length;
+  var nextBlock = block.getNextBlock();
+  if (nextBlock) {
+    // Blocks in the current stack would survive this block's deletion.
+    descendantCount -= nextBlock.getDescendants(false, true).length;
+  }
+
+  if (block.isCollapsed()) {
+    var expandOption = {
+      text: descendantCount == 1 ? Blockly.Msg.EXPAND_BLOCK :
+          Blockly.Msg.EXPAND_X_BLOCKS.replace('%1', String(descendantCount)),
+      enabled: true,
+      callback: function() {
+        block.setCollapsed(false);
+        // uncollapse any blocks in branches
+        var blocks = block.getDescendants(false, true);
+        var badBlocks = nextBlock ? nextBlock.getDescendants(false, true) : [];
+        blocks.filter(v => !badBlocks.includes(v)).forEach(v => v.setCollapsed(false));
+      }
+    };
+    return expandOption;
+  } else {
+    var collapseOption = {
+      text: descendantCount == 1 ? Blockly.Msg.COLLAPSE_BLOCK :
+          Blockly.Msg.COLLAPSE_X_BLOCKS.replace('%1', String(descendantCount)),
+      enabled: true,
+      callback: function() {
+        block.setCollapsed(true);
+      }
+    };
+    return collapseOption;
+  }
+}
+
 /**
  * Make a context menu option for showing help for the current block.
  * @param {!Blockly.BlockSvg} block The block where the right-click originated.

core/icon.js

@@ -146,10 +146,6 @@ Blockly.Icon.prototype.updateColour = function() {
  * @return {number} Horizontal offset for next item to draw.
  */
 Blockly.Icon.prototype.renderIcon = function(cursorX) {
-  if (this.collapseHidden && this.block_.isCollapsed()) {
-    this.iconGroup_.setAttribute('display', 'none');
-    return cursorX;
-  }
   this.iconGroup_.setAttribute('display', 'block');
 
   var TOP_MARGIN = 5;

core/scratch_block_comment.js

@@ -178,10 +178,6 @@ Blockly.ScratchBlockComment.prototype.drawIcon_ = function(_group) {
  * @package
  */
 Blockly.ScratchBlockComment.prototype.renderIcon = function(cursorX, topMargin) {
-  if (this.collapseHidden && this.block_.isCollapsed()) {
-    this.iconGroup_.setAttribute('display', 'none');
-    return cursorX;
-  }
   this.iconGroup_.setAttribute('display', 'block');
 
   var width = this.SIZE;

msg/messages.js

@@ -336,6 +336,12 @@ Blockly.Msg.REMOVE_COMMENT = 'Remove Comment';
 Blockly.Msg.DELETE_BLOCK = 'Delete Block';
 Blockly.Msg.DELETE_X_BLOCKS = 'Delete %1 Blocks';
 Blockly.Msg.DELETE_ALL_BLOCKS = 'Delete all %1 blocks?';
+Blockly.Msg.COLLAPSE_ALL = 'Collapse All';
+Blockly.Msg.COLLAPSE_BLOCK = 'Collapse Block';
+Blockly.Msg.COLLAPSE_X_BLOCKS = 'Collapse %1 Blocks';
+Blockly.Msg.EXPAND_ALL = 'Expand All';
+Blockly.Msg.EXPAND_BLOCK = 'Expand Block';
+Blockly.Msg.EXPAND_X_BLOCKS = 'Expand %1 Blocks';
 Blockly.Msg.CLEAN_UP = 'Clean up Blocks';
 Blockly.Msg.HELP = 'Help';
 Blockly.Msg.UNDO = 'Undo';

tests/vertical_playground.html

@@ -77,7 +77,7 @@
         workspace = Blockly.inject('blocklyDiv', {
           comments: true,
           disable: false,
-          collapse: false,
+          collapse: true,
           media: '../media/',
           readOnly: false,
           rtl: rtl,

tests/vertical_playground_compressed.html

@@ -58,7 +58,7 @@
         workspace = Blockly.inject('blocklyDiv', {
           comments: true,
           disable: false,
-          collapse: false,
+          collapse: true,
           media: '../media/',
           readOnly: false,
           rtl: rtl,