Class: VerticalFlyout

Defined in: packages/blockly/core/flyout_vertical.ts:28

Class for a flyout.

Extends

• Flyout

Properties index

Property	Description
wouldDelete_	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.
id	The unique id for this component that is used to register with the ComponentManager.
workspace_	-
RTL	Is RTL vs LTR.
toolboxPosition_	-
contents	List of flyout elements.
tabWidth_	-
autoClose	Does the flyout automatically close when a block is created?
CORNER_RADIUS	Corner radius of the flyout background.
MARGIN	Margin around the edges of the blocks in the flyout.
GAP_X	-
GAP_Y	-
SCROLLBAR_MARGIN	Top/bottom padding between scrollbar and edge of flyout background.
width_	Width of flyout.
height_	Height of flyout.
svgBackground_	The path around the background of the flyout, which will be filled with a background colour.
svgGroup_	The root SVG group for the button or label.
inflaters	Map from flyout content type to the corresponding inflater class responsible for creating concrete instances of the content type.
registryName	The name of the vertical flyout in the registry.

Methods index

Method	Description
wouldDelete	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.
updateWouldDelete_	Updates the internal wouldDelete_ state.
onDragEnter	Handles when a cursor with a block or bubble enters this drag target.
onDragOver	Handles when a cursor with a block or bubble is dragged over this drag target.
onDragExit	Handles when a cursor with a block or bubble exits this drag target.
onDrop	Handles when a block or bubble is dropped on this component. Should not handle delete here.
shouldPreventMove	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.
createDom	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.
init	Initializes the flyout.
dispose	Dispose of this flyout. Unlink from all DOM elements to prevent memory leaks.
getWidth	Get the width of the flyout.
getHeight	Get the height of the flyout.
getFlyoutScale	Get the scale (zoom level) of the flyout. By default, this matches the target workspace scale, but this can be overridden.
getWorkspace	Get the workspace inside the flyout.
setAutoClose	Sets whether this flyout automatically closes when blocks are dragged out, the workspace is clicked, etc, or not.
autoHide	Automatically hides the flyout if it is an autoclosing flyout.
getTargetWorkspace	Get the target workspace inside the flyout.
isVisible	Is the flyout visible?
setVisible	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.
setContainerVisible	Set whether this flyout's container is visible.
getContents	Get the list of elements of the current flyout.
setContents	Store the list of elements on the flyout.
positionAt_	Update the view based on coordinates calculated in position().
hide	Hide and empty the flyout.
show	Show and populate the flyout.
updateAriaContext	Updates the aria attributes for the entire flyout dom. This needs to do two things: 1. Set aria-owns on the flyout's workspace canvas to include the ids of all focusable elements in the flyout. 2. Update the aria attributes on the flyout's workspace. This can't be done at workspace creation because the workspace may not have all required information until the flyout is fully shown.
normalizeSeparators	Updates and returns the provided list of flyout contents to flatten separators as needed.
reflow	Reflow flyout contents.
getInflaterForType	Returns the inflater responsible for constructing items of the given type.
setMetrics_	Sets the translation of the flyout to match the scrollbars.
getX	Calculates the x coordinate for the flyout position.
getY	Calculates the y coordinate for the flyout position.
position	Move the flyout to the edge of the workspace.
scrollToStart	Scroll the flyout to the top.
wheel_	Scroll the flyout.
layout_	Lay out the blocks in the flyout.
getClientRect	Returns the bounding rectangle of the drag target area in pixel units relative to viewport.
reflowInternal_	Compute width of flyout. For RTL: Lay out the blocks and buttons to be right-aligned.

Constructors

Constructor

new VerticalFlyout(workspaceOptions): VerticalFlyout;

Defined in: packages/blockly/core/flyout_vertical.ts:33

Parameters

Parameter	Type	Description
workspaceOptions	Options	Dictionary of options for the workspace.

Returns

VerticalFlyout

Overrides

Flyout.constructor

Properties

wouldDelete_

protected wouldDelete_: boolean = false;

Defined in: packages/blockly/core/delete_area.ts:32

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

Flyout.wouldDelete_

---

id

id: string;

Defined in: packages/blockly/core/delete_area.ts:39

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

Inherited from

Flyout.id

---

workspace_

protected workspace_: WorkspaceSvg;

Defined in: packages/blockly/core/flyout_base.ts:102

Inherited from

Flyout.workspace_

---

RTL

RTL: boolean;

Defined in: packages/blockly/core/flyout_base.ts:103

Is RTL vs LTR.

Inherited from

Flyout.RTL

---

toolboxPosition_

protected toolboxPosition_: number;

Defined in: packages/blockly/core/flyout_base.ts:110

Inherited from

Flyout.toolboxPosition_

---

contents

protected contents: FlyoutItem[] = [];

Defined in: packages/blockly/core/flyout_base.ts:134

List of flyout elements.

Inherited from

Flyout.contents

---

tabWidth_

protected readonly tabWidth_: number;

Defined in: packages/blockly/core/flyout_base.ts:136

Inherited from

Flyout.tabWidth_

---

autoClose

autoClose: boolean = true;

Defined in: packages/blockly/core/flyout_base.ts:148

Does the flyout automatically close when a block is created?

Inherited from

Flyout.autoClose

---

CORNER_RADIUS

readonly CORNER_RADIUS: number = 8;

Defined in: packages/blockly/core/flyout_base.ts:163

Corner radius of the flyout background.

Inherited from

Flyout.CORNER_RADIUS

---

MARGIN

readonly MARGIN: number;

Defined in: packages/blockly/core/flyout_base.ts:164

Margin around the edges of the blocks in the flyout.

Inherited from

Flyout.MARGIN

---

GAP_X

readonly GAP_X: number;

Defined in: packages/blockly/core/flyout_base.ts:165

Inherited from

Flyout.GAP_X

---

GAP_Y

readonly GAP_Y: number;

Defined in: packages/blockly/core/flyout_base.ts:166

Inherited from

Flyout.GAP_Y

---

SCROLLBAR_MARGIN

readonly SCROLLBAR_MARGIN: number = 2.5;

Defined in: packages/blockly/core/flyout_base.ts:171

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

Inherited from

Flyout.SCROLLBAR_MARGIN

---

width_

protected width_: number = 0;

Defined in: packages/blockly/core/flyout_base.ts:176

Width of flyout.

Inherited from

Flyout.width_

---

height_

protected height_: number = 0;

Defined in: packages/blockly/core/flyout_base.ts:181

Height of flyout.

Inherited from

Flyout.height_

---

svgBackground_

protected svgBackground_: SVGPathElement | null = null;

Defined in: packages/blockly/core/flyout_base.ts:187

The path around the background of the flyout, which will be filled with a background colour.

Inherited from

Flyout.svgBackground_

---

svgGroup_

protected svgGroup_: SVGGElement | null = null;

Defined in: packages/blockly/core/flyout_base.ts:192

The root SVG group for the button or label.

Inherited from

Flyout.svgGroup_

---

inflaters

protected inflaters: Map<string, IFlyoutInflater>;

Defined in: packages/blockly/core/flyout_base.ts:198

Map from flyout content type to the corresponding inflater class responsible for creating concrete instances of the content type.

Inherited from

Flyout.inflaters

---

registryName

static registryName: string = 'verticalFlyout';

Defined in: packages/blockly/core/flyout_vertical.ts:30

The name of the vertical flyout in the registry.

Methods

wouldDelete()

wouldDelete(element): boolean;

Defined in: packages/blockly/core/delete_area.ts:59

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.

Parameters

Parameter	Type	Description
element	IDraggable	The block or bubble currently being dragged.

Returns

boolean

Whether the element provided would be deleted if dropped on this area.

Inherited from

Flyout.wouldDelete

---

updateWouldDelete_()

protected updateWouldDelete_(wouldDelete): void;

Defined in: packages/blockly/core/delete_area.ts:78

Updates the internal wouldDelete_ state.

Parameters

Parameter	Type	Description
wouldDelete	boolean	The new value for the wouldDelete state.

Returns

void

Inherited from

Flyout.updateWouldDelete_

---

onDragEnter()

onDragEnter(_dragElement): void;

Defined in: packages/blockly/core/drag_target.ts:42

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

Parameters

Parameter	Type	Description
_dragElement	IDraggable	The block or bubble currently being dragged.

Returns

void

Inherited from

Flyout.onDragEnter

---

onDragOver()

onDragOver(_dragElement): void;

Defined in: packages/blockly/core/drag_target.ts:52

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

Parameters

Parameter	Type	Description
_dragElement	IDraggable	The block or bubble currently being dragged.

Returns

void

Inherited from

Flyout.onDragOver

---

onDragExit()

onDragExit(_dragElement): void;

Defined in: packages/blockly/core/drag_target.ts:61

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

Parameters

Parameter	Type	Description
_dragElement	IDraggable	The block or bubble currently being dragged.

Returns

void

Inherited from

Flyout.onDragExit

---

onDrop()

onDrop(_dragElement): void;

Defined in: packages/blockly/core/drag_target.ts:70

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

Parameters

Parameter	Type	Description
_dragElement	IDraggable	The block or bubble currently being dragged.

Returns

void

Inherited from

Flyout.onDrop

---

shouldPreventMove()

shouldPreventMove(_dragElement): boolean;

Defined in: packages/blockly/core/drag_target.ts:94

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.

Parameters

Parameter	Type	Description
_dragElement	IDraggable	The block or bubble currently being dragged.

Returns

boolean

Whether the block or bubble provided should be returned to drag start.

Inherited from

Flyout.shouldPreventMove

---

createDom()

createDom(tagName): SVGElement;

Defined in: packages/blockly/core/flyout_base.ts:267

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.

Parameters

Parameter	Type	Description
tagName	| string | Svg<SVGSVGElement> | Svg<SVGGElement>	The type of tag to put the flyout in. This should be

Returns

SVGElement

The flyout's SVG group.

Inherited from

Flyout.createDom

---

init()

init(targetWorkspace): void;

Defined in: packages/blockly/core/flyout_base.ts:315

Initializes the flyout.

Parameters

Parameter	Type	Description
targetWorkspace	WorkspaceSvg	The workspace in which to create new blocks.

Returns

void

Inherited from

Flyout.init

---

dispose()

dispose(): void;

Defined in: packages/blockly/core/flyout_base.ts:376

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

Returns

void

Inherited from

Flyout.dispose

---

getWidth()

getWidth(): number;

Defined in: packages/blockly/core/flyout_base.ts:397

Get the width of the flyout.

Returns

number

The width of the flyout.

Inherited from

Flyout.getWidth

---

getHeight()

getHeight(): number;

Defined in: packages/blockly/core/flyout_base.ts:406

Get the height of the flyout.

Returns

number

The width of the flyout.

Inherited from

Flyout.getHeight

---

getFlyoutScale()

getFlyoutScale(): number;

Defined in: packages/blockly/core/flyout_base.ts:416

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

Returns

number

Flyout workspace scale.

Inherited from

Flyout.getFlyoutScale

---

getWorkspace()

getWorkspace(): WorkspaceSvg;

Defined in: packages/blockly/core/flyout_base.ts:425

Get the workspace inside the flyout.

Returns

WorkspaceSvg

The workspace inside the flyout.

Inherited from

Flyout.getWorkspace

---

setAutoClose()

setAutoClose(autoClose): void;

Defined in: packages/blockly/core/flyout_base.ts:433

Sets whether this flyout automatically closes when blocks are dragged out, the workspace is clicked, etc, or not.

Parameters

Parameter	Type
autoClose	boolean

Returns

void

Inherited from

Flyout.setAutoClose

---

autoHide()

autoHide(onlyClosePopups): void;

Defined in: packages/blockly/core/flyout_base.ts:440

Automatically hides the flyout if it is an autoclosing flyout.

Parameters

Parameter	Type
onlyClosePopups	boolean

Returns

void

Inherited from

Flyout.autoHide

---

getTargetWorkspace()

getTargetWorkspace(): WorkspaceSvg;

Defined in: packages/blockly/core/flyout_base.ts:454

Get the target workspace inside the flyout.

Returns

WorkspaceSvg

The target workspace inside the flyout.

Inherited from

Flyout.getTargetWorkspace

---

isVisible()

isVisible(): boolean;

Defined in: packages/blockly/core/flyout_base.ts:463

Is the flyout visible?

Returns

boolean

True if visible.

Inherited from

Flyout.isVisible

---

setVisible()

setVisible(visible): void;

Defined in: packages/blockly/core/flyout_base.ts:474

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.

Parameters

Parameter	Type	Description
visible	boolean	True if visible.

Returns

void

Inherited from

Flyout.setVisible

---

setContainerVisible()

setContainerVisible(visible): void;

Defined in: packages/blockly/core/flyout_base.ts:493

Set whether this flyout's container is visible.

Parameters

Parameter	Type	Description
visible	boolean	Whether the container is visible.

Returns

void

Inherited from

Flyout.setContainerVisible

---

getContents()

getContents(): FlyoutItem[];

Defined in: packages/blockly/core/flyout_base.ts:506

Get the list of elements of the current flyout.

Returns

FlyoutItem[]

The array of flyout elements.

Inherited from

Flyout.getContents

---

setContents()

setContents(contents): void;

Defined in: packages/blockly/core/flyout_base.ts:515

Store the list of elements on the flyout.

Parameters

Parameter	Type	Description
contents	FlyoutItem[]	The array of items for the flyout.

Returns

void

Inherited from

Flyout.setContents

---

positionAt_()

protected positionAt_(
   width, 
   height, 
   x, 
   y
): void;

Defined in: packages/blockly/core/flyout_base.ts:545

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

Parameters

Parameter	Type	Description
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.

Returns

void

Inherited from

Flyout.positionAt_

---

hide()

hide(): void;

Defined in: packages/blockly/core/flyout_base.ts:581

Hide and empty the flyout.

Returns

void

Inherited from

Flyout.hide

---

show()

show(flyoutDef): void;

Defined in: packages/blockly/core/flyout_base.ts:601

Show and populate the flyout.

Parameters

Parameter	Type	Description
flyoutDef	| string | FlyoutDefinition	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.

Returns

void

Inherited from

Flyout.show

---

updateAriaContext()

protected updateAriaContext(): void;

Defined in: packages/blockly/core/flyout_base.ts:667

Updates the aria attributes for the entire flyout dom. This needs to do two things:

1. Set aria-owns on the flyout's workspace canvas to include the ids of all focusable elements in the flyout.
2. Update the aria attributes on the flyout's workspace. This can't be done at workspace creation because the workspace may not have all required information until the flyout is fully shown.

Returns

void

Inherited from

Flyout.updateAriaContext

---

normalizeSeparators()

protected normalizeSeparators(contents): FlyoutItem[];

Defined in: packages/blockly/core/flyout_base.ts:761

Updates and returns the provided list of flyout contents to flatten separators as needed.

When multiple separators occur one after another, the value of the last one takes precedence and the earlier separators in the group are removed.

Parameters

Parameter	Type	Description
contents	FlyoutItem[]	The list of flyout contents to flatten separators in.

Returns

FlyoutItem[]

An updated list of flyout contents with only one separator between each non-separator item.

Inherited from

Flyout.normalizeSeparators

---

reflow()

reflow(): void;

Defined in: packages/blockly/core/flyout_base.ts:831

Reflow flyout contents.

Returns

void

Inherited from

Flyout.reflow

---

getInflaterForType()

protected getInflaterForType(type): IFlyoutInflater | null;

Defined in: packages/blockly/core/flyout_base.ts:855

Returns the inflater responsible for constructing items of the given type.

Parameters

Parameter	Type	Description
type	string	The type of flyout content item to provide an inflater for.

Returns

IFlyoutInflater | null

An inflater object for the given type, or null if no inflater is registered for that type.

Inherited from

Flyout.getInflaterForType

---

setMetrics_()

protected setMetrics_(xyRatio): void;

Defined in: packages/blockly/core/flyout_vertical.ts:43

Sets the translation of the flyout to match the scrollbars.

Parameters

Parameter	Type	Description
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.
xyRatio.x	number	-
xyRatio.y	number	-

Returns

void

Overrides

Flyout.setMetrics_

---

getX()

getX(): number;

Defined in: packages/blockly/core/flyout_vertical.ts:69

Calculates the x coordinate for the flyout position.

Returns

number

X coordinate.

Overrides

Flyout.getX

---

getY()

getY(): number;

Defined in: packages/blockly/core/flyout_vertical.ts:118

Calculates the y coordinate for the flyout position.

Returns

number

Y coordinate.

Overrides

Flyout.getY

---

position()

position(): void;

Defined in: packages/blockly/core/flyout_vertical.ts:124

Move the flyout to the edge of the workspace.

Returns

void

Overrides

Flyout.position

---

scrollToStart()

scrollToStart(): void;

Defined in: packages/blockly/core/flyout_vertical.ts:190

Scroll the flyout to the top.

Returns

void

Overrides

Flyout.scrollToStart

---

wheel_()

protected wheel_(e): void;

Defined in: packages/blockly/core/flyout_vertical.ts:199

Scroll the flyout.

Parameters

Parameter	Type	Description
e	WheelEvent	Mouse wheel scroll event.

Returns

void

Overrides

Flyout.wheel_

---

layout_()

protected layout_(contents): void;

Defined in: packages/blockly/core/flyout_vertical.ts:225

Lay out the blocks in the flyout.

Parameters

Parameter	Type	Description
contents	FlyoutItem[]	The flyout items to lay out.

Returns

void

Overrides

Flyout.layout_

---

getClientRect()

getClientRect(): Rect | null;

Defined in: packages/blockly/core/flyout_vertical.ts:244

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

Returns

Rect | null

The component's bounding box. Null if drag target area should be ignored.

Overrides

Flyout.getClientRect

---

reflowInternal_()

protected reflowInternal_(): void;

Defined in: packages/blockly/core/flyout_vertical.ts:272

Compute width of flyout. For RTL: Lay out the blocks and buttons to be right-aligned.

Returns

void

Overrides

Flyout.reflowInternal_