Class: Flyout

Constructor

new Flyout(workspaceOptions)

Class for a flyout.

Parameter
workspaceOptions	Blockly.Options Dictionary of options for the workspace. Value must not be null.

Parameter

workspaceOptions

Blockly.Options

Dictionary of options for the workspace.

Value must not be null.

Implements: Blockly.IBlocklyActionable; Blockly.IDeleteArea; Blockly.IFlyout

Properties

autoClose

boolean

Does the flyout automatically close when a block is created?

Implements: Blockly.IFlyout#autoClose

buttons_

protected

non-null Array of non-null Blockly.FlyoutButton

List of visible buttons.

CORNER_RADIUS

constant

number

Corner radius of the flyout background.

Implements: Blockly.IFlyout#CORNER_RADIUS

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". Example: Flyout Edge Workspace [block] / <-within this angle, drags "toward workspace" | [block] ---- orthogonal to flyout boundary ---- | [block] \ | The angle is given in degrees from the orthogonal.

This is used to know when to create a new block and when to scroll the flyout. Setting it to 360 means that all drags create a new block.

GAP_X

constant

number

Gap between items in horizontal flyouts. Can be overridden with the "sep" element.

GAP_Y

constant

number

Gap between items in vertical flyouts. Can be overridden with the "sep" element.

getClientRect

Return the deletion rectangle for this flyout in viewport coordinates.

Implements: Blockly.IDeleteArea#getClientRect
Returns: Blockly.utils.Rect Rectangle in which to delete.

getMetrics_

protected

Return an object with all the metrics required to size scrollbars for the flyout.

Returns: Blockly.utils.Metrics Contains size and position metrics of the flyout.

height_

protected

number

Height of flyout.

horizontalLayout

package

boolean

Whether the flyout should be laid out horizontally or not.

Implements: Blockly.IFlyout#horizontalLayout

isDragTowardWorkspace

package

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.

Parameter
currentDragDeltaXY	Blockly.utils.Coordinate How far the pointer has moved from the position at mouse down, in pixel units. Value must not be null.

Parameter

currentDragDeltaXY

Blockly.utils.Coordinate

How far the pointer has moved from the position at mouse down, in pixel units.

Value must not be null.

Implements: Blockly.IFlyout#isDragTowardWorkspace
Returns: boolean True if the drag is toward the workspace.

layout_

protected

Lay out the blocks in the flyout.

Parameter
contents	Array of non-null Object The blocks and buttons to lay out. Value must not be null.
gaps	Array of number The visible gaps between blocks. Value must not be null.

Parameter

contents

Array of non-null Object

The blocks and buttons to lay out.

Value must not be null.

gaps

Array of number

The visible gaps between blocks.

Value must not be null.

MARGIN

constant

number

Margin around the edges of the blocks in the flyout.

Implements: Blockly.IFlyout#MARGIN

position

Position the flyout.

Implements: Blockly.IFlyout#position
Returns: void

reflowInternal_

protected

Compute height of flyout. Position mat under each block. For RTL: Lay out the blocks right-aligned.

Returns: void

RTL

boolean

Is RTL vs LTR.

Implements: Blockly.IFlyout#RTL

scrollbar

package

non-null Blockly.Scrollbar

SCROLLBAR_PADDING

constant

number

Top/bottom padding between scrollbar and edge of flyout background.

setMetrics_

protected

Sets the translation of the flyout to match the scrollbars.

Parameter
xyRatio	{x:number, y:number} Contains a y property which is a float between 0 and 1 specifying the degree of scrolling and a similar x property. Value must not be null.

Parameter

xyRatio

{x:number, y:number}

Contains a y property which is a float between 0 and 1 specifying the degree of scrolling and a similar x property.

Value must not be null.

tabWidth_

constant protected

number

Width of output tab.

targetWorkspace

non-null Blockly.WorkspaceSvg

Implements: Blockly.IFlyout#targetWorkspace

targetWorkspace

package

nullable Blockly.WorkspaceSvg

The target workspace

Implements: Blockly.IFlyout#targetWorkspace

toolboxPosition_

protected

number

Position of the toolbox and flyout relative to the workspace.

wheel_

protected

Scroll the flyout.

Parameter
e	Event Mouse wheel scroll event. Value must not be null.

width_

protected

number

Width of flyout.

workspace_

protected

non-null Blockly.WorkspaceSvg

Methods

addBlockListeners_

protected

addBlockListeners_(root, block, rect)

Add listeners to a block that has been added to the flyout.

Parameter
root	SVGElement The root node of the SVG group the block is in. Value must not be null.
block	Blockly.BlockSvg The block to add listeners for. Value must not be null.
rect	SVGElement The invisible rectangle under the block that acts as a mat for that block. Value must not be null.

Parameter

root

SVGElement

The root node of the SVG group the block is in.

Value must not be null.

block

Blockly.BlockSvg

The block to add listeners for.

Value must not be null.

rect

SVGElement

The invisible rectangle under the block that acts as a mat for that block.

Value must not be null.

createBlock

package

createBlock(originalBlock) returns Blockly.BlockSvg

Create a copy of this block on the workspace.

Parameter
originalBlock	Blockly.BlockSvg The block to copy from the flyout. Value must not be null.

Parameter

originalBlock

Blockly.BlockSvg

The block to copy from the flyout.

Value must not be null.

Implements: Blockly.IFlyout#createBlock
Throws: Error if something went wrong with deserialization.
Returns: non-null Blockly.BlockSvg The newly created block.

createDom

createDom(tagName) returns SVGElement

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.

Parameter
tagName	(string, non-null Blockly.utils.Svg containing non-null SVGSVGElement, or non-null Blockly.utils.Svg containing non-null SVGGElement) The type of tag to put the flyout in. This should be

Parameter

tagName

(string, non-null Blockly.utils.Svg containing non-null SVGSVGElement, or non-null Blockly.utils.Svg containing non-null SVGGElement)

The type of tag to put the flyout in. This should be

Implements: Blockly.IFlyout#createDom
Returns: non-null SVGElement The flyout's SVG group.

createRect_

protected

createRect_(block, x, y, blockHW, index) returns SVGElement

Create and place a rectangle corresponding to the given block.

Parameter
block	Blockly.BlockSvg The block to associate the rect to. Value must not be null.
x	number The x position of the cursor during this layout pass.
y	number The y position of the cursor during this layout pass.
blockHW	{height: number, width: number} The height and width of the block. Value must not be null.
index	number The index into the mats list where this rect should be placed.

Returns: non-null SVGElement Newly created SVG element for the rectangle behind the block.

dispose

dispose()

Dispose of this flyout. Unlink from all DOM elements to prevent memory leaks.

Implements: Blockly.IFlyout#dispose

getHeight

getHeight() returns number

Get the height of the flyout.

Implements: Blockly.IFlyout#getHeight
Returns: number The width of the flyout.

getWidth

getWidth() returns number

Get the width of the flyout.

Implements: Blockly.IFlyout#getWidth
Returns: number The width of the flyout.

getWorkspace

package

getWorkspace() returns Blockly.WorkspaceSvg

Get the workspace inside the flyout.

Implements: Blockly.IFlyout#getWorkspace
Returns: non-null Blockly.WorkspaceSvg The workspace inside the flyout.

hide

hide()

Hide and empty the flyout.

Implements: Blockly.IFlyout#hide

init

init(targetWorkspace)

Initializes the flyout.

Parameter
targetWorkspace	Blockly.WorkspaceSvg The workspace in which to create new blocks. Value must not be null.

Parameter

targetWorkspace

Blockly.WorkspaceSvg

The workspace in which to create new blocks.

Value must not be null.

Implements: Blockly.IFlyout#init

initFlyoutButton_

protected

initFlyoutButton_(button, x, y)

Initialize the given button: move it to the correct location, add listeners, etc.

Parameter
button	Blockly.FlyoutButton The button to initialize and place. Value must not be null.
x	number The x position of the cursor during this layout pass.
y	number The y position of the cursor during this layout pass.

Parameter

button

Blockly.FlyoutButton

The button to initialize and place.

Value must not be null.

number

The x position of the cursor during this layout pass.

number

The y position of the cursor during this layout pass.

isBlockCreatable_

package

isBlockCreatable_(block) returns boolean

Does this flyout allow you to create a new instance of the given block? Used for deciding if a block can be "dragged out of" the flyout.

Parameter
block	Blockly.BlockSvg The block to copy from the flyout. Value must not be null.

Parameter

block

Blockly.BlockSvg

The block to copy from the flyout.

Value must not be null.

Returns: boolean True if you can create a new instance of the block, false otherwise.

isScrollable

package

isScrollable() returns boolean

Implements: Blockly.IFlyout#isScrollable
Returns: boolean True if this flyout may be scrolled with a scrollbar or by dragging.

isVisible

isVisible() returns boolean

Is the flyout visible?

Implements: Blockly.IFlyout#isVisible
Returns: boolean True if visible.

moveRectToBlock_

protected

moveRectToBlock_(rect, block)

Move a rectangle to sit exactly behind a block, taking into account tabs, hats, and any other protrusions we invent.

Parameter
rect	SVGElement The rectangle to move directly behind the block. Value must not be null.
block	Blockly.BlockSvg The block the rectangle should be behind. Value must not be null.

Parameter

rect

SVGElement

The rectangle to move directly behind the block.

Value must not be null.

block

Blockly.BlockSvg

The block the rectangle should be behind.

Value must not be null.

onBlocklyAction

package

onBlocklyAction(action) returns boolean

Handles the given action. This is only triggered when keyboard accessibility mode is enabled.

Parameter
action	Blockly.Action The action to be handled. Value must not be null.

Parameter

action

Blockly.Action

The action to be handled.

Value must not be null.

Implements: Blockly.IBlocklyActionable#onBlocklyAction
Returns: boolean True if the flyout handled the action, false otherwise.

positionAt_

protected

positionAt_(width, height, x, y)

Update the view based on coordinates calculated in position().

Parameter
width	number The computed width of the flyout's SVG group
height	number The computed height of the flyout's SVG group.
x	number The computed x origin of the flyout's SVG group.
y	number The computed y origin of the flyout's SVG group.

reflow

reflow()

Reflow blocks and their mats.

Implements: Blockly.IFlyout#reflow

setContainerVisible

setContainerVisible(visible)

Set whether this flyout's container is visible.

Parameter
visible	boolean Whether the container is visible.

Parameter

visible

boolean

Whether the container is visible.

Implements: Blockly.IFlyout#setContainerVisible

setVisible

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.

Parameter
visible	boolean True if visible.

Parameter

visible

boolean

True if visible.

Implements: Blockly.IFlyout#setVisible

show

show(flyoutDef)

Show and populate the flyout.

Parameter
flyoutDef	(non-null Blockly.utils.toolbox.FlyoutDefinition or string) Contents to display in the flyout. This is either an array of Nodes, a NodeList, a toolbox definition, or a string with the name of the dynamic category.

Parameter

flyoutDef

(non-null Blockly.utils.toolbox.FlyoutDefinition or string)

Contents to display in the flyout. This is either an array of Nodes, a NodeList, a toolbox definition, or a string with the name of the dynamic category.

Implements: Blockly.IFlyout#show