Abstract Class: Flyout

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

Class for a flyout.

Extends

• DeleteArea

Extended by

• HorizontalFlyout
• VerticalFlyout

Implements

• IAutoHideable
• IFlyout

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.

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.
getClientRect	Returns the bounding rectangle of the drag target area in pixel units relative to the Blockly injection div.
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.
position	Position the flyout.
setMetrics_	Sets the translation of the flyout to match the scrollbars.
layout_	Lay out the elements in the flyout.
wheel_	Scroll the flyout.
reflowInternal_	Compute bounds of flyout. For RTL: Lay out the elements right-aligned.
getX	Calculates the x coordinate for the flyout position.
getY	Calculates the y coordinate for the flyout position.
scrollToStart	Scroll the flyout to the beginning of its contents.
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.

Constructors

Constructor

new Flyout(workspaceOptions): Flyout;

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

Parameters

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

Returns

Flyout

Overrides

DeleteArea.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

DeleteArea.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.

Implementation of

IAutoHideable.id

Inherited from

DeleteArea.id

---

workspace_

protected workspace_: WorkspaceSvg;

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

---

RTL

RTL: boolean;

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

Is RTL vs LTR.

Implementation of

IFlyout.RTL

---

toolboxPosition_

protected toolboxPosition_: number;

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

---

contents

protected contents: FlyoutItem[] = [];

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

List of flyout elements.

---

tabWidth_

protected readonly tabWidth_: number;

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

---

autoClose

autoClose: boolean = true;

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

Does the flyout automatically close when a block is created?

Implementation of

IFlyout.autoClose

---

CORNER_RADIUS

readonly CORNER_RADIUS: number = 8;

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

Corner radius of the flyout background.

Implementation of

IFlyout.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.

Implementation of

IFlyout.MARGIN

---

GAP_X

readonly GAP_X: number;

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

---

GAP_Y

readonly GAP_Y: number;

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

---

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.

---

width_

protected width_: number = 0;

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

Width of flyout.

---

height_

protected height_: number = 0;

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

Height of flyout.

---

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.

---

svgGroup_

protected svgGroup_: SVGGElement | null = null;

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

The root SVG group for the button or label.

---

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.

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

DeleteArea.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

DeleteArea.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

DeleteArea.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

DeleteArea.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

DeleteArea.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

DeleteArea.onDrop

---

getClientRect()

getClientRect(): Rect | null;

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

Returns the bounding rectangle of the drag target area in pixel units relative to the Blockly injection div.

Returns

Rect | null

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

Inherited from

DeleteArea.getClientRect

---

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

DeleteArea.shouldPreventMove

---

position()

abstract position(): void;

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

Position the flyout.

Returns

void

Implementation of

IFlyout.position

---

setMetrics_()

abstract protected setMetrics_(xyRatio): void;

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

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

---

layout_()

abstract protected layout_(contents): void;

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

Lay out the elements in the flyout.

Parameters

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

Returns

void

---

wheel_()

abstract protected wheel_(e): void;

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

Scroll the flyout.

Parameters

Parameter	Type	Description
e	WheelEvent	Mouse wheel scroll event.

Returns

void

---

reflowInternal_()

abstract protected reflowInternal_(): void;

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

Compute bounds of flyout. For RTL: Lay out the elements right-aligned.

Returns

void

---

getX()

abstract getX(): number;

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

Calculates the x coordinate for the flyout position.

Returns

number

X coordinate.

Implementation of

IFlyout.getX

---

getY()

abstract getY(): number;

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

Calculates the y coordinate for the flyout position.

Returns

number

Y coordinate.

Implementation of

IFlyout.getY

---

scrollToStart()

abstract scrollToStart(): void;

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

Scroll the flyout to the beginning of its contents.

Returns

void

Implementation of

IFlyout.scrollToStart

---

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.

Implementation of

IFlyout.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

Implementation of

IFlyout.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

Implementation of

IFlyout.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.

Implementation of

IFlyout.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.

Implementation of

IFlyout.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.

---

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.

Implementation of

IFlyout.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

---

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

Implementation of

IAutoHideable.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.

---

isVisible()

isVisible(): boolean;

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

Is the flyout visible?

Returns

boolean

True if visible.

Implementation of

IFlyout.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

Implementation of

IFlyout.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

Implementation of

IFlyout.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.

Implementation of

IFlyout.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

---

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

---

hide()

hide(): void;

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

Hide and empty the flyout.

Returns

void

Implementation of

IFlyout.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

Implementation of

IFlyout.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

---

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.

---

reflow()

reflow(): void;

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

Reflow flyout contents.

Returns

void

Implementation of

IFlyout.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.