Backpack plugin

[rachel-fenichel]

Category
Plugin

Component

@blockly/plugin-backpack

Is your feature request related to a problem? Please describe.

App Inventor, Scratch, etc have backpacks. We should too!

Describe the solution you'd like

• The backpack should be a flyout that is either on the side opposite the toolbox, or on the bottom. (I'm open to arguments on which is best.)
• Like the trash can, it should be a target for drags.
• Dropping a block or block stack should add it into the backpack.
• There should be a button to open and close it.
  • Optionally positioned on the workspace? But this is secondary, because it can be added in the surrounding UI if necessary.
• Possibly also a right-click action to add a block or block stack to the backpack?

APIs required from core Blockly

• Register a drag target
• Either an API to get metrics or one to automagically position the flyout
• (Optional) Add button/control on workspace
• (Optional) Add Blockly-global context menu option

[rachel-fenichel]

@ewpatton FYI

[ewpatton]

• There should be a max width (if vertical, height if horizontal), since block stacks can be large.
  • No horizontal scroll (if vertical)

@rachel-fenichel Could we have the horizontal scrollbar control be configurable (in vertical mode)? We've seen this issue in App Inventor (mit-cml/appinventor-sources#2156) and our preference would be to allow the user to scroll to see more of the blocks rather than clip them outright.

[rachel-fenichel]

@ewpatton Gotcha, I'll remove that from the description.

[RoboErikG]

Another option would be to create a preview image and shrink it to a reasonable size.

[ewpatton]

@RoboErikG I can see two potential issues with that approach:

1. Currently, the blocks in the backpack are drawn at the same scale as the other flyouts and the main workspace. This could be potentially surprising to users if blocks starting have different sizes. Is each block stack sized independently, or are they scaled uniformly based on the largest stack?
2. Font size could become an issue. For example, I often have my windows split screen (like right now). If I suddenly halve the available screen real estate the backpack can use going from full screen to split screen, the font scaled to 50% may become unreadable for people (11 pt -> 6.5 pt). I just tried this on my mac and while it was readable with on Retina display, there are also users on low resolution displays that may be adversely impacted by this.

I imagine that the definition of "reasonable size" could be adjusted to accommodate the font size issue, however the flyout may still end up needing to clip at that point. I think this also doesn't account well for inlined inputs where the horizontal extent of the blocks can be quite large.

[RoboErikG]

@ewpatton the preview image is the current approach in Scratch if you want to see how it works in practice.

A nice bonus since Blockly moved to a plugin system, both could be implemented as separate plugins. =)