Stay organized with collections Save and categorize content based on your preferences.

blockly > Flyout

Flyout class

Class for a flyout.


export declare abstract class Flyout extends DeleteArea implements IFlyout 

Extends: DeleteArea

Implements: IFlyout


Constructor Modifiers Description
(constructor)(workspaceOptions) Constructs a new instance of the Flyout class


Property Modifiers Type Description
autoClose boolean Does the flyout automatically close when a block is created?
buttons_ protected FlyoutButton[] List of visible buttons.
CORNER_RADIUS readonly number Corner radius of the flyout background.
dragAngleRange_ protected number Range of a drag angle from a flyout considered "dragging toward workspace". Drags that are within the bounds of this many degrees from the orthogonal line to the flyout edge are considered to be "drags toward the workspace".
FlyoutItemType static typeof FlyoutItemType The type of a flyout content item.
GAP_X readonly number
GAP_Y readonly number
height_ protected number Height of flyout.
MARGIN readonly number
rectMap_ protected WeakMap<BlockSvg, SVGElement>
RTL boolean
SCROLLBAR_MARGIN readonly number Top/bottom padding between scrollbar and edge of flyout background.
svgBackground_ protected SVGPathElement | null The path around the background of the flyout, which will be filled with a background colour.
svgGroup_ protected SVGGElement | null The root SVG group for the button or label.



toolboxPosition_ protected number
width_ protected number Width of flyout.
workspace_ protected WorkspaceSvg


Method Modifiers Description
addBlockListeners_(root, block, rect) protected Add listeners to a block that has been added to the flyout.
blockIsRecyclable_(_block) protected Returns whether the given block can be recycled or not.
createDom(tagName) Creates the flyout's DOM. Only needs to be called once. The flyout can either exist as its own SVG element or be a g element nested inside a separate SVG element.
createRect_(block, x, y, blockHW, index) protected Create and place a rectangle corresponding to the given block.
dispose() Dispose of this flyout. Unlink from all DOM elements to prevent memory leaks.
getFlyoutScale() Get the scale (zoom level) of the flyout. By default, this matches the target workspace scale, but this can be overridden.
getHeight() Get the height of the flyout.
getWidth() Get the width of the flyout.
getWorkspace() Get the workspace inside the flyout.
getX() Calculates the x coordinate for the flyout position.
getY() Calculates the y coordinate for the flyout position.
hide() Hide and empty the flyout.
init(targetWorkspace) Initializes the flyout.
initFlyoutButton_(button, x, y) protected Initialize the given button: move it to the correct location, add listeners, etc.
isDragTowardWorkspace(currentDragDeltaXY) Determine if a drag delta is toward the workspace, based on the position and orientation of the flyout. This is used in determineDragIntention_ to determine if a new block should be created or if the flyout should scroll.
isVisible() Is the flyout visible?
layout_(contents, gaps) protected Lay out the blocks in the flyout.
moveRectToBlock_(rect, block) protected Move a rectangle to sit exactly behind a block, taking into account tabs, hats, and any other protrusions we invent.
position() Position the flyout.
positionAt_(width, height, x, y) protected Update the view based on coordinates calculated in position().
reflow() Reflow blocks and their mats.
reflowInternal_() protected Compute height of flyout. Position mat under each block. For RTL: Lay out the blocks right-aligned.
scrollToStart() Scroll the flyout to the beginning of its contents.
setContainerVisible(visible) Set whether this flyout's container is visible.
setMetrics_(xyRatio) protected Sets the translation of the flyout to match the scrollbars.
setVisible(visible) Set whether the flyout is visible. A value of true does not necessarily mean that the flyout is shown. It could be hidden because its container is hidden.
show(flyoutDef) Show and populate the flyout.
wheel_(e) protected Scroll the flyout.