Stay organized with collections
Save and categorize content based on your preferences.
blockly > HorizontalFlyout
HorizontalFlyout class
Class for a flyout.
Signature:
export declare class HorizontalFlyout extends Flyout
Extends: Flyout
Constructors
Properties
Methods
| Method |
Modifiers |
Description |
| getClientRect() |
|
Returns the bounding rectangle of the drag target area in pixel units relative to viewport. |
| getX() |
|
Calculates the x coordinate for the flyout position. |
| getY() |
|
Calculates the y coordinate for the flyout position. |
| 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. |
| layout_(contents) |
protected |
Lay out the blocks in the flyout. |
| position() |
|
Move the flyout to the edge of the workspace. |
| reflowInternal_() |
protected |
Compute height of flyout. toolbox.Position mat under each block. For RTL: Lay out the blocks right-aligned. |
| scrollToStart() |
|
Scroll the flyout to the top. |
| setMetrics_(xyRatio) |
protected |
Sets the translation of the flyout to match the scrollbars. |
| wheel_(e) |
protected |
Scroll the flyout. |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-05-16 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-16 UTC."],[[["\u003cp\u003eThe \u003ccode\u003eHorizontalFlyout\u003c/code\u003e class in Blockly manages the horizontal flyout, a UI element for selecting and dragging blocks.\u003c/p\u003e\n"],["\u003cp\u003eIt extends the \u003ccode\u003eFlyout\u003c/code\u003e class and includes methods for positioning, layout, and scrolling the flyout.\u003c/p\u003e\n"],["\u003cp\u003eThe flyout's layout can be adjusted and calculated based on content and gaps between elements, and it can be positioned relative to the workspace.\u003c/p\u003e\n"],["\u003cp\u003eIt handles user interactions like scrolling using the mouse wheel, as well as recalculating and adjusting its metrics for seamless integration with scrollbars.\u003c/p\u003e\n"]]],[],null,["[blockly](./blockly.md) \\\u003e [HorizontalFlyout](./blockly.horizontalflyout_class.md)\n\nHorizontalFlyout class\n----------------------\n\nClass for a flyout.\n\n**Signature:** \n\n export declare class HorizontalFlyout extends Flyout \n\n**Extends:** [Flyout](./blockly.flyout_class.md)\n\nConstructors\n------------\n\n| Constructor | Modifiers | Description |\n|----------------------------------------------------------------------------------------------------|-----------|-----------------------------------------------------------|\n| [(constructor)(workspaceOptions)](./blockly.horizontalflyout_class._constructor__1_constructor.md) | | Constructs a new instance of the `HorizontalFlyout` class |\n\nProperties\n----------\n\n| Property | Modifiers | Type | Description |\n|-----------------------------------------------------------------------------------|-----------|---------|-------------|\n| [horizontalLayout](./blockly.horizontalflyout_class.horizontallayout_property.md) | | boolean | |\n\nMethods\n-------\n\n| Method | Modifiers | Description |\n|-----------------------------------------------------------------------------------------------------------------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [getClientRect()](./blockly.horizontalflyout_class.getclientrect_1_method.md) | | Returns the bounding rectangle of the drag target area in pixel units relative to viewport. |\n| [getX()](./blockly.horizontalflyout_class.getx_1_method.md) | | Calculates the x coordinate for the flyout position. |\n| [getY()](./blockly.horizontalflyout_class.gety_1_method.md) | | Calculates the y coordinate for the flyout position. |\n| [isDragTowardWorkspace(currentDragDeltaXY)](./blockly.horizontalflyout_class.isdragtowardworkspace_1_method.md) | | 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. |\n| [layout_(contents)](./blockly.horizontalflyout_class.layout__1_method.md) | `protected` | Lay out the blocks in the flyout. |\n| [position()](./blockly.horizontalflyout_class.position_1_method.md) | | Move the flyout to the edge of the workspace. |\n| [reflowInternal_()](./blockly.horizontalflyout_class.reflowinternal__1_method.md) | `protected` | Compute height of flyout. toolbox.Position mat under each block. For RTL: Lay out the blocks right-aligned. |\n| [scrollToStart()](./blockly.horizontalflyout_class.scrolltostart_1_method.md) | | Scroll the flyout to the top. |\n| [setMetrics_(xyRatio)](./blockly.horizontalflyout_class.setmetrics__1_method.md) | `protected` | Sets the translation of the flyout to match the scrollbars. |\n| [wheel_(e)](./blockly.horizontalflyout_class.wheel__1_method.md) | `protected` | Scroll the flyout. |"]]
