Single auto-scrolling flyout containing all of the blocks #1059

ericrosenbaum · 2017-08-28T19:09:25Z

Resolves

Resolves part of #1040

Proposed Changes

Concatenate all the blocks into a single flyout, with category labels, so that you can scroll continuously through them. When you select a category in the category menu, auto-scroll to that category.

core/flyout_base.js

+    // Handle dynamic categories, represented by a name instead of a list of XML.
+    // Look up the correct category generation function and call that to get a
+    // valid XML list.
+    if (typeof xmlList[i] === 'string') {


core/flyout_base.js

+};
+
+/**
+ * Store an array of with category names and scrollbar positions.


core/flyout_base.js

+Blockly.Flyout.prototype.recordCategoryScrollPositions_ = function() {
+  this.categoryScrollPositions = [];
+  for (var i = 0; i < this.buttons_.length; i++) {
+    if (this.buttons_[i].isCategoryLabel_) {


core/flyout_base.js

+
+/**
+ * Select a category using the scroll position.
+ * @param  {number} pos The scroll position.


core/flyout_button.js

@@ -155,13 +155,14 @@ Blockly.FlyoutButton.prototype.createDom = function() {
      this.svgGroup_);
  svgText.textContent = this.text_;

-  this.width = svgText.getComputedTextLength() +
-      2 * Blockly.FlyoutButton.MARGIN;
+  this.width = svgText.getComputedTextLength();


core/flyout_horizontal.js

+  var metrics = this.workspace_.getMetrics();
+  var contentWidth = metrics.contentWidth;
+  var viewWidth = metrics.viewWidth;
+  this.scrollTarget = Math.min(this.scrollTarget, contentWidth - viewWidth);


core/flyout_horizontal.js

@@ -245,16 +245,46 @@ Blockly.HorizontalFlyout.prototype.scrollToStart = function() {
 };

 /**
+ * Scroll the flyout to a position.
+ * @param {number} pos The targeted scroll position.
+ */


core/flyout_vertical.js

@@ -37,6 +37,7 @@ goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.math.Rect');
 goog.require('goog.userAgent');
+goog.require('goog.dom.animationFrame.polyfill');


core/toolbox.js

@@ -273,7 +296,10 @@ Blockly.Toolbox.prototype.getClientRect = function() {
  var x = toolboxRect.left;
  var y = toolboxRect.top;
  var width = this.getWidth();
-  var height = toolboxRect.height;
+  // The height here is the combined height of the category menu and flyout.


core/toolbox.js

@@ -286,7 +312,7 @@ Blockly.Toolbox.prototype.getClientRect = function() {
    return new goog.math.Rect(-BIG_NUM, -BIG_NUM, 2 * BIG_NUM,
        BIG_NUM + y + height);
  } else {  // Bottom
-    return new goog.math.Rect(0, y, 2 * BIG_NUM, BIG_NUM + width);
+    return new goog.math.Rect(0, y - height, 2 * BIG_NUM, BIG_NUM);


rachel-fenichel

Three nits and you're good to go. I don't need to do another review--it's just a few missing annotations.

core/flyout_button.js

@@ -223,6 +223,31 @@ Blockly.FlyoutButton.prototype.getTargetWorkspace = function() {
 };

 /**
+ * Get whether this button is a label at the top of a category.
+ * @return {boolean} True if it is a category label.


core/flyout_button.js

+ * Get the text of this button.
+ * @return {string} The text on the button.
+ */
+Blockly.FlyoutButton.prototype.getText = function() {


core/flyout_button.js

+
+/**
+ * Get the position of this button.
+ * @return {!goog.math.Coordinate} The button position.


ericrosenbaum added the pr - needs review label Aug 28, 2017

ericrosenbaum added this to the Sept 20 milestone Aug 28, 2017

ericrosenbaum self-assigned this Aug 28, 2017

ericrosenbaum requested review from paulkaplan and rachel-fenichel August 28, 2017 19:09

ericrosenbaum added 12 commits August 28, 2017 15:11

Concatenate all the blocks

3e18337

Auto-scroll the flyout to the selected category

faa7ee8

Add category labels with underlines to flyout

0f45211

Update selected category by scrollbar position

dd1f427

Remove category labels from default toolbox

4b9629b

Generate category label XML nodes

bf8bc08

Add variable blocks by splicing them in

6fea7b3

Remove underline

7b7c99f

Style flyout labels

05655aa

Prevent scroll locking up due to scroll target being too low

186d198

Horizontal version of auto-scroll

7ae8767

Fix layout of flyout labels

e3123af

ericrosenbaum force-pushed the feature/all-the-blocks-flyout branch from 4293316 to e3123af Compare August 28, 2017 19:12

Use simple string concatenation for making label XML

be522e1

This was referenced Aug 29, 2017

Optimize bulk changes to the workspace in more situations #925

Closed

Performance: Creating blocks that refer to variables #887

Closed

Performance: opening the toolbox #879

Closed

ericrosenbaum added 2 commits August 31, 2017 18:03

Use horizontal category positions for horizontal layout

378e451

Select category by scroll position

7b490b1

This was referenced Sep 1, 2017

Update blocks menu contents without re-rendering the whole thing #1069

Open

Update category menu selection when dragging flyout or scrollbar #1070

Closed

ericrosenbaum assigned ericrosenbaum, paulkaplan and rachel-fenichel and unassigned ericrosenbaum Sep 1, 2017

ericrosenbaum added 14 commits September 18, 2017 12:04

Fix JSDOC param name

c3b2411

Update comment

d71c0e0

Cache result of getMetrics

53101f7

Move scroll animation into flyout_base

e494993

Give stepScrollAnimation package scope

4d07306

Add scrollAnimationFraction property

72e87db

Clarify comment about vertical scrolling in horizontal flyout

8e3a4bf

Move selectCategoryByScrollPosition to flyout_base

89ea480

Fix JSDoc param type

a736bc7

Mark showAll private

af19a4e

Comment on client rect calculation change

10d4525

Mark selectCategoryByName with @Package

1941761

Add underscore to name of private function showAll_

153d3b7

Update comment to refer to correct function name

e668728

rachel-fenichel reviewed Sep 20, 2017

View reviewed changes

paulkaplan removed their assignment Sep 21, 2017

ericrosenbaum added 5 commits September 21, 2017 10:25

Create getters for button properties

4bedaa4

Various nits

865fbec

Fix delete area for bottom positioned toolbox

2cd74ed

Fix delete areas for autoclosing flyout

fc8e3cd

Show flyout on selecting category in autoclose mode

c859403

ericrosenbaum modified the milestones: Sept 20, Oct 18 Sep 25, 2017

rachel-fenichel reviewed Sep 26, 2017

View reviewed changes

Nits

6d4f08b

ericrosenbaum added pr - good to merge and removed pr - needs review labels Sep 26, 2017

ericrosenbaum merged commit b4f1aa4 into scratchfoundation:develop Sep 26, 2017

ericrosenbaum deleted the feature/all-the-blocks-flyout branch September 26, 2017 20:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Single auto-scrolling flyout containing all of the blocks #1059

Single auto-scrolling flyout containing all of the blocks #1059

Uh oh!

ericrosenbaum commented Aug 28, 2017 •

edited

Loading

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

rachel-fenichel left a comment

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

Uh oh!

Single auto-scrolling flyout containing all of the blocks #1059

Single auto-scrolling flyout containing all of the blocks #1059

Uh oh!

Conversation

ericrosenbaum commented Aug 28, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Resolves

Proposed Changes

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

rachel-fenichel left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

This comment was marked as abuse.

Uh oh!

Uh oh!

ericrosenbaum commented Aug 28, 2017 •

edited

Loading