Control the Height of a Mutator Flyout to Be Less Than the Height of a Workspace

97 views
Skip to first unread message

Amber B

unread,
Feb 15, 2019, 4:43:53 PM2/15/19
to Blockly
So I recently managed to create a mutator flyout with so many blocks that it became taller than the workspace and made it really hard to add blocks to the bottom. (It was a very long list...) I already filed an issue about it, but I wanted to see if I could fix it myself. So far, I haven't had any luck with adding `scrollbars: true` to the config options for mutator flyouts, but even more than that, I can't seem to figure out how to configure the mutator flyout's maximum height to be less than the workspace's. I've found what I believe to be the method to control the height and width of the flyout, but I can't seem to figure out how to get the height of the parent workspace in order to dictate the maximum height of the flyout. It seems like the workspace methods exposed via API only offer width information. Anyone have any ideas, either for this specific issue (getting the height of a workspace) or for the more general goal (make Really Tall Mutator Flyouts usable)?

Beka Westberg

unread,
Feb 15, 2019, 7:40:52 PM2/15/19
to Blockly
Hi Amber,

This sounds like an interesting problem, and I have a few tips! Also I think you may be more interested in the bubble than the flyout (please correct me if I'm wrong). The flyout is the grey rect that holds the component blocks, and the bubble is what holds the whole mutator workspace.

If you want to find the width of the parent workspace you're going to want to look at getMetrics (which is apparently undocumented, but I believe is supposed to be public). This returns an object with a whole bunch of information about the workspace, the useful bits for you being viewWidth and viewHeight. These tell you the width and height of the visible portion of the workspace in css/pixel units.

Then I think these functions are going to be interesting to you:
  • setBubbleSize in bubble.js If you added a max-size clamp here you could probably make it so no bubbles get larger than the size of the workspace.
  • and resizeBubble_ in mutator.js. The inline docs say that it's called when the bubble is resized, but it also looks like it's used to resize the bubble. You could probably add your clamping here if you only want it to be applied to mutators.
I'm sorry there's no actual code to show you :/ but I hope that gives you a place to start! I hope you can get your problem fixed and if you have any more questions please reply!
Beka
Message has been deleted

Andrew n marshall

unread,
Feb 19, 2019, 10:58:42 PM2/19/19
to blo...@googlegroups.com
I think Bekka is on the right track. If you do successfully add size clamping to resizeBubble_(..), please make a pull request. I think part of the problem will involve configuring the scroll options of the mutator workspace.

There are really two possible edge cases we want to address:
1. Scrolling in the flyout when there are too many potential blocks to drag in.
2. Scrolling in the workspace when the mutation configuration blocks get too large, as shown in the screenshot.

A great first step would be to add test_blocks and relevant toolbox references.

[Note to self: Write an issue.]



On Mon, Feb 18, 2019 at 11:31 AM Amber B <abla...@citizendeveloper.com> wrote:


bubble_max.png


Well, I'm afraid I have good news and bad news... 

I'll start poking away at the mutator flyout workspace itself and see if I can figure out why it's overflowing the bubble boundaries like that.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Amber B

unread,
Feb 20, 2019, 8:38:18 AM2/20/19
to Blockly
I already have an issue here, actually: https://github.com/google/blockly/issues/2296

As for the pull request, when I figure it out I'll be happy to make one! I am a bit stuck at the moment, though... as shown in the cap I posted earlier, I was able to successfully add size clamping to setBubbleSize, but the workspace itself is overflowing. I'm not sure if the solution lies in resizeBubble_ or elsewhere just yet; I did try adding "scrollbars: true" to the mutator workspace, but no scrollbars appeared. I'm investigating further as I have time. If anyone has a brainwave about where I could look next, though, I'd definitely appreciate it! :)
Reply all
Reply to author
Forward
0 new messages