Horizontal Scrolling in Vertical Flyout?

39 views

Skip to first unread message

Philip Ly

unread,

Sep 12, 2024, 1:59:16 PM9/12/24

to Blockly

Is it possible to enable Horizontal Scrolling in a VerticalFlyout? We're finding that our blocks in our toolbox are too long to fit in the view and was hoping for an option to scroll horizontally as well without having to modify too much code.

Thanks!

Aaron Dodson

unread,

Sep 12, 2024, 6:42:53 PM9/12/24

to Blockly

Yes, this should (soon) be doable! In a VerticalFlyout subclass, you'll want to:

* Override getWidth() to return a fixed width for the flyout (this will require Blockly v12; we have an rc/v12.0.0 branch but I'm not sure if we have a beta with this functionality available yet)

* Override init() to swap out this.workspace_.scrollbar for a ScrollbarPair with both the addHorizontal and addVertical constructor arguments set to true (the default implementation only enables the scrollbar for the direction the flyout is oriented)

* Override setMetrics_() to include this clause from the horizontal flyout implementation and then call super.

That way, the flyout won't automatically expand to fits its blocks (due to getWidth() returning a fixed value), the scrollbar will have a horizontal scrollbar, and the flyout's workspace will be scrolled when the horizontal scrollbar is scrolled.