Class: VerticalFlyout

Constructor

VerticalFlyout

new VerticalFlyout(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.

Extends: Blockly.Flyout

Properties

registryName

static

string

The name of the vertical flyout in the registry.

autoClose

unknown

Does the flyout automatically close when a block is created?

Inherited from: Blockly.Flyout#autoClose
Implements: Blockly.IFlyout#autoClose

buttons_

protected

unknown

List of visible buttons.

Inherited from: Blockly.Flyout#buttons_

CORNER_RADIUS

constant

unknown

Corner radius of the flyout background.

Inherited from: Blockly.Flyout#CORNER_RADIUS
Implements: Blockly.IFlyout#CORNER_RADIUS

dragAngleRange_

protected

unknown

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.

Inherited from: Blockly.Flyout#dragAngleRange_

GAP_X

constant

unknown

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

Inherited from: Blockly.Flyout#GAP_X

GAP_Y

constant

unknown

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

Inherited from: Blockly.Flyout#GAP_Y

height_

protected

unknown

Height of flyout.

Inherited from: Blockly.Flyout#height_

horizontalLayout

package

unknown

Whether the flyout should be laid out horizontally or not.

Inherited from: Blockly.Flyout#horizontalLayout
Implements: Blockly.IFlyout#horizontalLayout

id

unknown

The unique id for this component that is used to register with the ComponentManager.

Inherited from: Blockly.Flyout#id

MARGIN

constant

unknown

Margin around the edges of the blocks in the flyout.

Inherited from: Blockly.Flyout#MARGIN
Implements: Blockly.IFlyout#MARGIN

RTL

unknown

Is RTL vs LTR.

Inherited from: Blockly.Flyout#RTL
Implements: Blockly.IFlyout#RTL

SCROLLBAR_MARGIN

constant

unknown

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

Inherited from: Blockly.Flyout#SCROLLBAR_MARGIN

tabWidth_

constant protected

unknown

Width of output tab.

Inherited from: Blockly.Flyout#tabWidth_

targetWorkspace

package

unknown

The target workspace

Inherited from: Blockly.Flyout#targetWorkspace
Implements: Blockly.IFlyout#targetWorkspace

toolboxPosition_

protected

unknown

Position of the toolbox and flyout relative to the workspace.

Inherited from: Blockly.Flyout#toolboxPosition_

width_

protected

unknown

Width of flyout.

Inherited from: Blockly.Flyout#width_

workspace_

protected

unknown

Inherited from: Blockly.Flyout#workspace_

wouldDelete_

protected

unknown

Whether the last block or bubble dragged over this delete area would be deleted if dropped on this component. This property is not updated after the block or bubble is deleted.

Inherited from: Blockly.DeleteArea#wouldDelete_

Methods

addBlockListeners_

protected

addBlockListeners_(root, block, rect)

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

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

Parameter

root

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

Value must not be null.

block

The block to add listeners for.

Value must not be null.

rect

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

Value must not be null.

Inherited from: Blockly.Flyout#addBlockListeners_

clearOldBlocks_

protected

clearOldBlocks_()

Delete blocks, mats and buttons from a previous showing of the flyout.

Inherited from: Blockly.Flyout#clearOldBlocks_

createBlock

package

createBlock(originalBlock) returns Blockly.BlockSvg

Create a copy of this block on the workspace.

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

Parameter

originalBlock

The block to copy from the flyout.

Value must not be null.

Inherited from: Blockly.Flyout#createBlock
Implements: Blockly.IFlyout#createBlock
Throws: if something went wrong with deserialization.
Returns: The newly created block.

createBlock_

protected

createBlock_(blockXml) returns Blockly.BlockSvg

Create a block from the xml and permanently disable any blocks that were defined as disabled.

Parameter
blockXml	The xml of the block. Value must not be null.

Parameter

blockXml

The xml of the block.

Value must not be null.

Inherited from: Blockly.Flyout#createBlock_
Returns: The block created from the blockXml.

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	The type of tag to put the flyout in. This should be

Inherited from: Blockly.Flyout#createDom
Implements: Blockly.IFlyout#createDom
Returns: 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	The block to associate the rect to. Value must not be null.
x	The x position of the cursor during this layout pass.
y	The y position of the cursor during this layout pass.
blockHW	The height and width of the block. Value must not be null.
index	The index into the mats list where this rect should be placed.

Inherited from: Blockly.Flyout#createRect_
Returns: 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.

Inherited from: Blockly.Flyout#dispose
Implements: Blockly.IFlyout#dispose

getClientRect

getClientRect() returns Blockly.utils.Rect

Returns the bounding rectangle of the drag target area in pixel units relative to viewport.

Returns: nullable Blockly.utils.Rect The component's bounding box. Null if drag target area should be ignored.

getFlyoutScale

getFlyoutScale() returns number

Get the scale (zoom level) of the flyout. By default, this matches the target workspace scale, but this can be overridden.

Inherited from: Blockly.Flyout#getFlyoutScale
Returns: Flyout workspace scale.

getHeight

getHeight() returns number

Get the height of the flyout.

Inherited from: Blockly.Flyout#getHeight
Implements: Blockly.IFlyout#getHeight
Returns: The width of the flyout.

getWidth

getWidth() returns number

Get the width of the flyout.

Inherited from: Blockly.Flyout#getWidth
Implements: Blockly.IFlyout#getWidth
Returns: The width of the flyout.

getWorkspace

package

getWorkspace() returns Blockly.WorkspaceSvg

Get the workspace inside the flyout.

Inherited from: Blockly.Flyout#getWorkspace
Implements: Blockly.IFlyout#getWorkspace
Returns: The workspace inside the flyout.

getX

getX() returns number

Calculates the x coordinate for the flyout position.

Returns: number X coordinate.

getY

getY() returns number

Calculates the y coordinate for the flyout position.

Returns: number Y coordinate.

hide

hide()

Hide and empty the flyout.

Inherited from: Blockly.Flyout#hide
Implements: Blockly.IFlyout#hide

init

init(targetWorkspace)

Initializes the flyout.

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

Parameter

targetWorkspace

The workspace in which to create new blocks.

Value must not be null.

Inherited from: Blockly.Flyout#init
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	The button to initialize and place. Value must not be null.
x	The x position of the cursor during this layout pass.
y	The y position of the cursor during this layout pass.

Parameter

button

The button to initialize and place.

Value must not be null.

The x position of the cursor during this layout pass.

The y position of the cursor during this layout pass.

Inherited from: Blockly.Flyout#initFlyoutButton_

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	The block to copy from the flyout. Value must not be null.

Parameter

block

The block to copy from the flyout.

Value must not be null.

Inherited from: Blockly.Flyout#isBlockCreatable_
Returns: True if you can create a new instance of the block, false otherwise.

isDragTowardWorkspace

package

isDragTowardWorkspace(currentDragDeltaXY) returns boolean

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.

Returns: boolean True if the drag is toward the workspace.

isScrollable

package

isScrollable() returns boolean

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

isVisible

isVisible() returns boolean

Is the flyout visible?

Inherited from: Blockly.Flyout#isVisible
Implements: Blockly.IFlyout#isVisible
Returns: True if visible.

layout_

protected

layout_(contents, gaps)

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.

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	The rectangle to move directly behind the block. Value must not be null.
block	The block the rectangle should be behind. Value must not be null.

Parameter

rect

The rectangle to move directly behind the block.

Value must not be null.

block

The block the rectangle should be behind.

Value must not be null.

Inherited from: Blockly.Flyout#moveRectToBlock_

onDragEnter

onDragEnter(_dragElement)

Handles when a cursor with a block or bubble enters this drag target.

Parameter
_dragElement	The block or bubble currently being dragged. Value must not be null.

Parameter

_dragElement

The block or bubble currently being dragged.

Value must not be null.

Inherited from: Blockly.DragTarget#onDragEnter
Implements: Blockly.IDragTarget#onDragEnter

onDragExit

onDragExit(_dragElement)

Handles when a cursor with a block or bubble exits this drag target.

Parameter
_dragElement	The block or bubble currently being dragged. Value must not be null.

Parameter

_dragElement

The block or bubble currently being dragged.

Value must not be null.

Inherited from: Blockly.DragTarget#onDragExit
Implements: Blockly.IDragTarget#onDragExit

onDragOver

onDragOver(_dragElement)

Handles when a cursor with a block or bubble is dragged over this drag target.

Parameter
_dragElement	The block or bubble currently being dragged. Value must not be null.

Parameter

_dragElement

The block or bubble currently being dragged.

Value must not be null.

Inherited from: Blockly.DragTarget#onDragOver
Implements: Blockly.IDragTarget#onDragOver

onDrop

onDrop(_dragElement)

Handles when a block or bubble is dropped on this component. Should not handle delete here.

Parameter
_dragElement	The block or bubble currently being dragged. Value must not be null.

Parameter

_dragElement

The block or bubble currently being dragged.

Value must not be null.

Inherited from: Blockly.DragTarget#onDrop
Implements: Blockly.IDragTarget#onDrop

position

position()

Move the flyout to the edge of the workspace.

positionAt_

protected

positionAt_(width, height, x, y)

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

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

Inherited from: Blockly.Flyout#positionAt_

reflow

reflow()

Reflow blocks and their mats.

Inherited from: Blockly.Flyout#reflow
Implements: Blockly.IFlyout#reflow

reflowInternal_

protected

reflowInternal_()

Compute width of flyout. Position mat under each block. For RTL: Lay out the blocks and buttons to be right-aligned.

scrollToStart

scrollToStart()

Scroll the flyout to the top.

setContainerVisible

setContainerVisible(visible)

Set whether this flyout's container is visible.

Parameter
visible	Whether the container is visible.

Inherited from: Blockly.Flyout#setContainerVisible
Implements: Blockly.IFlyout#setContainerVisible

setMetrics_

protected

setMetrics_(xyRatio)

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.

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	True if visible.

Inherited from: Blockly.Flyout#setVisible
Implements: Blockly.IFlyout#setVisible

shouldPreventMove

shouldPreventMove(_dragElement) returns boolean

Returns whether the provided block or bubble should not be moved after being dropped on this component. If true, the element will return to where it was when the drag started.

Parameter
_dragElement	The block or bubble currently being dragged. Value must not be null.

Parameter

_dragElement

The block or bubble currently being dragged.

Value must not be null.

Inherited from: Blockly.DragTarget#shouldPreventMove
Implements: Blockly.IDragTarget#shouldPreventMove
Returns: Whether the block or bubble provided should be returned to drag start.

show

show(flyoutDef)

Show and populate the flyout.

Parameter
flyoutDef	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.

Inherited from: Blockly.Flyout#show
Implements: Blockly.IFlyout#show

updateWouldDelete_

protected

updateWouldDelete_(wouldDelete)

Updates the internal wouldDelete_ state.

Parameter
wouldDelete	The new value for the wouldDelete state.

Inherited from: Blockly.DeleteArea#updateWouldDelete_

wheel_

protected

wheel_(e)

Scroll the flyout.

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

wouldDelete

wouldDelete(element, couldConnect) returns boolean

Returns whether the provided block or bubble would be deleted if dropped on this area. This method should check if the element is deletable and is always called before onDragEnter/onDragOver/onDragExit.

Parameter
element	The block or bubble currently being dragged. Value must not be null.
couldConnect	Whether the element could could connect to another.

Parameter

element

The block or bubble currently being dragged.

Value must not be null.

couldConnect

Whether the element could could connect to another.

Inherited from: Blockly.DeleteArea#wouldDelete
Implements: Blockly.IDeleteArea#wouldDelete
Returns: Whether the element provided would be deleted if dropped on this area.