Skip to main content

Class: Toolbox

Defined in: packages/blockly/core/toolbox/toolbox.ts:56

Class for a Toolbox. Creates the toolbox's DOM.

Extends

Implements

Properties index

PropertyDescription
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.
idThe unique ID for this component that is used to register with the ComponentManager.
toolboxDef_-
HtmlDivThe HTML container for the toolbox.
contentsDiv_The HTML container for the contents of a toolbox.
isVisible_Whether the Toolbox is visible.
width_The width of the toolbox.
height_The height of the toolbox.
RTL-
contentsMap from ID to the corresponding toolbox item.
toolboxPosition-
selectedItem_The currently selected item.
previouslySelectedItem_The previously selected item.
boundEvents_Array holding info needed to unbind event handlers. Used for disposing. Ex: [[node, name, func], [node, name, func]].
workspace_The workspace this toolbox is on.

Methods index

MethodDescription
wouldDeleteReturns 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.
onDragOverHandles when a cursor with a block or bubble is dragged over this drag target.
shouldPreventMoveReturns 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.
onShortcutHandles the given keyboard shortcut.
initInitializes the toolbox
createDom_Creates the DOM for the toolbox.
createContainer_Creates the container div for the toolbox.
createContentsContainer_Creates the container for all the contents in the toolbox.
attachEvents_Adds event listeners to the toolbox container div.
onClick_Handles on click events for when the toolbox or toolbox items are clicked.
onKeyDown_Handles key down events for the toolbox.
createFlyout_Creates the flyout based on the toolbox layout.
renderContents_Adds all the toolbox items to the toolbox.
addToolboxItem_Adds an item to the toolbox.
getToolboxItemsGets the items in the toolbox.
getClientRectReturns the bounding rectangle of the drag target area in pixel units relative to viewport.
onDragEnterHandles when a cursor with a block or bubble enters this drag target.
onDragExitHandles when a cursor with a block or bubble exits this drag target.
onDropHandles when a block or bubble is dropped on this component. Should not handle delete here.
updateWouldDelete_Updates the internal wouldDelete_ state.
updateCursorDeleteStyle_Adds or removes the CSS style of the cursor over the toolbox based whether the block or bubble over it is expected to be deleted if dropped (using the internal this.wouldDelete_ property).
getToolboxItemByIdGets the toolbox item with the given ID.
getWidthGets the width of the toolbox.
getHeightGets the height of the toolbox.
getFlyoutGets the toolbox flyout.
getWorkspaceGets the workspace for the toolbox.
getSelectedItemGets the selected item.
getPreviouslySelectedItemGets the previously selected item.
isHorizontalGets whether or not the toolbox is horizontal.
positionPositions the toolbox based on whether it is a horizontal toolbox and whether the workspace is in rtl.
clearSelectionUnhighlights any previously selected item.
refreshSelectionUpdates the flyout's content without closing it. Should be used in response to a change in one of the dynamic categories, such as variables or procedures.
setVisibleShows or hides the toolbox.
autoHideHides the component. Called in WorkspaceSvg.hideChaff.
setSelectedItemSets the given item as selected. No-op if the item is not selectable.
shouldDeselectItem_Decides whether the old item should be deselected.
shouldSelectItem_Decides whether the new item should be selected.
deselectItem_Deselects the given item, marks it as unselected, and updates aria state.
selectItem_Selects the given item, marks it selected, and updates aria state.
selectItemByPositionSelects the toolbox item by its position in the list of toolbox items.
updateFlyout_Decides whether to hide or show the flyout depending on the selected item.
disposeDisposes of this toolbox.
getFocusableElementSee IFocusableNode.getFocusableElement.
getFocusableTreeSee IFocusableNode.getFocusableTree.
onNodeFocusSee IFocusableNode.onNodeFocus.
onNodeBlurSee IFocusableNode.onNodeBlur.
canBeFocusedSee IFocusableNode.canBeFocused.
getRootFocusableNodeSee IFocusableTree.getRootFocusableNode.
getRestoredFocusableNodeSee IFocusableTree.getRestoredFocusableNode.
getNestedTreesSee IFocusableTree.getNestedTrees.
lookUpFocusableNodeSee IFocusableTree.lookUpFocusableNode.
onTreeFocusSee IFocusableTree.onTreeFocus.
onTreeBlurSee IFocusableTree.onTreeBlur.
getNavigatorReturns the Navigator instance to use to move between items in this toolbox.

Constructors

Constructor

new Toolbox(workspace): Toolbox;

Defined in: packages/blockly/core/toolbox/toolbox.ts:120

Parameters

ParameterTypeDescription
workspaceWorkspaceSvgThe workspace in which to create new blocks.

Returns

Toolbox

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 = 'toolbox';

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

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

Implementation of

IAutoHideable.id

Overrides

DeleteArea.id


toolboxDef_

protected toolboxDef_: ToolboxInfo;

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


HtmlDiv

HtmlDiv: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:74

The HTML container for the toolbox.


contentsDiv_

protected contentsDiv_: HTMLDivElement | null = null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:77

The HTML container for the contents of a toolbox.


isVisible_

protected isVisible_: boolean = false;

Defined in: packages/blockly/core/toolbox/toolbox.ts:80

Whether the Toolbox is visible.


width_

protected width_: number = 0;

Defined in: packages/blockly/core/toolbox/toolbox.ts:83

The width of the toolbox.


height_

protected height_: number = 0;

Defined in: packages/blockly/core/toolbox/toolbox.ts:86

The height of the toolbox.


RTL

RTL: boolean;

Defined in: packages/blockly/core/toolbox/toolbox.ts:87


contents

protected contents: Map<string, IToolboxItem>;

Defined in: packages/blockly/core/toolbox/toolbox.ts:93

Map from ID to the corresponding toolbox item.


toolboxPosition

toolboxPosition: Position;

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


selectedItem_

protected selectedItem_:
| ISelectableToolboxItem
| null = null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:98

The currently selected item.


previouslySelectedItem_

protected previouslySelectedItem_:
| ISelectableToolboxItem
| null = null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:101

The previously selected item.


boundEvents_

protected boundEvents_: Data[] = [];

Defined in: packages/blockly/core/toolbox/toolbox.ts:108

Array holding info needed to unbind event handlers. Used for disposing. Ex: [[node, name, func], [node, name, func]].


workspace_

protected readonly workspace_: WorkspaceSvg;

Defined in: packages/blockly/core/toolbox/toolbox.ts:111

The workspace this toolbox is on.

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

ParameterTypeDescription
elementIDraggableThe block or bubble currently being dragged.

Returns

boolean

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

Inherited from

DeleteArea.wouldDelete


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

ParameterTypeDescription
_dragElementIDraggableThe block or bubble currently being dragged.

Returns

void

Inherited from

DeleteArea.onDragOver


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

ParameterTypeDescription
_dragElementIDraggableThe block or bubble currently being dragged.

Returns

boolean

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

Inherited from

DeleteArea.shouldPreventMove


onShortcut()

onShortcut(_shortcut): boolean;

Defined in: packages/blockly/core/toolbox/toolbox.ts:146

Handles the given keyboard shortcut.

Parameters

ParameterTypeDescription
_shortcutKeyboardShortcutThe shortcut to be handled.

Returns

boolean

True if the shortcut has been handled, false otherwise.

Implementation of

IKeyboardAccessible.onShortcut


init()

init(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:151

Initializes the toolbox

Returns

void

Implementation of

IToolbox.init


createDom_()

protected createDom_(workspace): HTMLDivElement;

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

Creates the DOM for the toolbox.

Parameters

ParameterTypeDescription
workspaceWorkspaceSvgThe workspace this toolbox is on.

Returns

HTMLDivElement

The HTML container for the toolbox.


createContainer_()

protected createContainer_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/toolbox.ts:211

Creates the container div for the toolbox.

Returns

HTMLDivElement

The HTML container for the toolbox.


createContentsContainer_()

protected createContentsContainer_(): HTMLDivElement;

Defined in: packages/blockly/core/toolbox/toolbox.ts:224

Creates the container for all the contents in the toolbox.

Returns

HTMLDivElement

The HTML container for the toolbox contents.


attachEvents_()

protected attachEvents_(container, contentsContainer): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:240

Adds event listeners to the toolbox container div.

Parameters

ParameterTypeDescription
containerHTMLDivElementThe HTML container for the toolbox.
contentsContainerHTMLDivElementThe HTML container for the contents of the toolbox.

Returns

void


onClick_()

protected onClick_(e): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:279

Handles on click events for when the toolbox or toolbox items are clicked.

Parameters

ParameterTypeDescription
ePointerEventClick event to handle.

Returns

void


onKeyDown_()

protected onKeyDown_(e): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:316

Handles key down events for the toolbox.

Parameters

ParameterTypeDescription
eKeyboardEventThe key down event.

Returns

void


createFlyout_()

protected createFlyout_(): IFlyout;

Defined in: packages/blockly/core/toolbox/toolbox.ts:344

Creates the flyout based on the toolbox layout.

Returns

IFlyout

The flyout for the toolbox.

Throws

If missing a require for Blockly.HorizontalFlyout, Blockly.VerticalFlyout, and no flyout plugin is specified.


renderContents_()

protected renderContents_(toolboxDef): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:388

Adds all the toolbox items to the toolbox.

Parameters

ParameterTypeDescription
toolboxDefToolboxItemInfo[]Array holding objects containing information on the contents of the toolbox.

Returns

void


addToolboxItem_()

protected addToolboxItem_(toolboxItem): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:444

Adds an item to the toolbox.

Parameters

ParameterTypeDescription
toolboxItemIToolboxItemThe item in the toolbox.

Returns

void


getToolboxItems()

getToolboxItems(): IToolboxItem[];

Defined in: packages/blockly/core/toolbox/toolbox.ts:461

Gets the items in the toolbox.

Returns

IToolboxItem[]

The list of items in the toolbox.

Implementation of

IToolbox.getToolboxItems


getClientRect()

getClientRect(): Rect | null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:496

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

DeleteArea.getClientRect


onDragEnter()

onDragEnter(_dragElement): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:530

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

Parameters

ParameterTypeDescription
_dragElementIDraggableThe block or bubble currently being dragged.

Returns

void

Overrides

DeleteArea.onDragEnter


onDragExit()

onDragExit(_dragElement): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:541

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

Parameters

ParameterTypeDescription
_dragElementIDraggableThe block or bubble currently being dragged.

Returns

void

Overrides

DeleteArea.onDragExit


onDrop()

onDrop(_dragElement): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:553

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

Parameters

ParameterTypeDescription
_dragElementIDraggableThe block or bubble currently being dragged.

Returns

void

Overrides

DeleteArea.onDrop


updateWouldDelete_()

protected updateWouldDelete_(wouldDelete): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:564

Updates the internal wouldDelete_ state.

Parameters

ParameterTypeDescription
wouldDeletebooleanThe new value for the wouldDelete state.

Returns

void

Overrides

DeleteArea.updateWouldDelete_


updateCursorDeleteStyle_()

protected updateCursorDeleteStyle_(addStyle): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:585

Adds or removes the CSS style of the cursor over the toolbox based whether the block or bubble over it is expected to be deleted if dropped (using the internal this.wouldDelete_ property).

Parameters

ParameterTypeDescription
addStylebooleanWhether the style should be added or removed.

Returns

void


getToolboxItemById()

getToolboxItemById(id): IToolboxItem | null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:602

Gets the toolbox item with the given ID.

Parameters

ParameterTypeDescription
idstringThe ID of the toolbox item.

Returns

IToolboxItem | null

The toolbox item with the given ID, or null if no item exists.


getWidth()

getWidth(): number;

Defined in: packages/blockly/core/toolbox/toolbox.ts:611

Gets the width of the toolbox.

Returns

number

The width of the toolbox.

Implementation of

IToolbox.getWidth


getHeight()

getHeight(): number;

Defined in: packages/blockly/core/toolbox/toolbox.ts:620

Gets the height of the toolbox.

Returns

number

The width of the toolbox.

Implementation of

IToolbox.getHeight


getFlyout()

getFlyout(): IFlyout | null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:629

Gets the toolbox flyout.

Returns

IFlyout | null

The toolbox flyout.

Implementation of

IToolbox.getFlyout


getWorkspace()

getWorkspace(): WorkspaceSvg;

Defined in: packages/blockly/core/toolbox/toolbox.ts:638

Gets the workspace for the toolbox.

Returns

WorkspaceSvg

The parent workspace for the toolbox.

Implementation of

IToolbox.getWorkspace


getSelectedItem()

getSelectedItem():
| ISelectableToolboxItem
| null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:647

Gets the selected item.

Returns

| ISelectableToolboxItem | null

The selected item, or null if no item is currently selected.

Implementation of

IToolbox.getSelectedItem


getPreviouslySelectedItem()

getPreviouslySelectedItem():
| ISelectableToolboxItem
| null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:657

Gets the previously selected item.

Returns

| ISelectableToolboxItem | null

The previously selected item, or null if no item was previously selected.


isHorizontal()

isHorizontal(): boolean;

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

Gets whether or not the toolbox is horizontal.

Returns

boolean

True if the toolbox is horizontal, false if the toolbox is vertical.

Implementation of

IToolbox.isHorizontal


position()

position(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:675

Positions the toolbox based on whether it is a horizontal toolbox and whether the workspace is in rtl.

Returns

void

Implementation of

IToolbox.position


clearSelection()

clearSelection(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:741

Unhighlights any previously selected item.

Returns

void

Implementation of

IToolbox.clearSelection


refreshSelection()

refreshSelection(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:765

Updates the flyout's content without closing it. Should be used in response to a change in one of the dynamic categories, such as variables or procedures.

Returns

void

Implementation of

IToolbox.refreshSelection


setVisible()

setVisible(isVisible): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:780

Shows or hides the toolbox.

Parameters

ParameterTypeDescription
isVisiblebooleanTrue if toolbox should be visible.

Returns

void

Implementation of

IToolbox.setVisible


autoHide()

autoHide(onlyClosePopups): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:800

Hides the component. Called in WorkspaceSvg.hideChaff.

Parameters

ParameterTypeDescription
onlyClosePopupsbooleanWhether only popups should be closed. Flyouts should not be closed if this is true.

Returns

void

Implementation of

IAutoHideable.autoHide


setSelectedItem()

setSelectedItem(newItem): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:812

Sets the given item as selected. No-op if the item is not selectable.

Parameters

ParameterTypeDescription
newItemIToolboxItem | nullThe toolbox item to select.

Returns

void

Implementation of

IToolbox.setSelectedItem


shouldDeselectItem_()

protected shouldDeselectItem_(oldItem, newItem): boolean;

Defined in: packages/blockly/core/toolbox/toolbox.ts:841

Decides whether the old item should be deselected.

Parameters

ParameterTypeDescription
oldItem| ISelectableToolboxItem | nullThe previously selected toolbox item.
newItem| ISelectableToolboxItem | nullThe newly selected toolbox item.

Returns

boolean

True if the old item should be deselected, false otherwise.


shouldSelectItem_()

protected shouldSelectItem_(oldItem, newItem): boolean;

Defined in: packages/blockly/core/toolbox/toolbox.ts:859

Decides whether the new item should be selected.

Parameters

ParameterTypeDescription
oldItem| ISelectableToolboxItem | nullThe previously selected toolbox item.
newItem| ISelectableToolboxItem | nullThe newly selected toolbox item.

Returns

boolean

True if the new item should be selected, false otherwise.


deselectItem_()

protected deselectItem_(item): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:873

Deselects the given item, marks it as unselected, and updates aria state.

Parameters

ParameterTypeDescription
itemISelectableToolboxItemThe previously selected toolbox item which should be deselected.

Returns

void


selectItem_()

protected selectItem_(oldItem, newItem): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:890

Selects the given item, marks it selected, and updates aria state.

Parameters

ParameterTypeDescription
oldItem| ISelectableToolboxItem | nullThe previously selected toolbox item.
newItemISelectableToolboxItemThe newly selected toolbox item.

Returns

void


selectItemByPosition()

selectItemByPosition(position): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:909

Selects the toolbox item by its position in the list of toolbox items.

Parameters

ParameterTypeDescription
positionnumberThe position of the item to select.

Returns

void

Implementation of

IToolbox.selectItemByPosition


updateFlyout_()

protected updateFlyout_(oldItem, newItem): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:922

Decides whether to hide or show the flyout depending on the selected item.

Parameters

ParameterTypeDescription
oldItem| ISelectableToolboxItem | nullThe previously selected toolbox item.
newItem| ISelectableToolboxItem | nullThe newly selected toolbox item.

Returns

void


dispose()

dispose(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:982

Disposes of this toolbox.

Returns

void

Implementation of

IToolbox.dispose


getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1002

See IFocusableNode.getFocusableElement.

Returns

HTMLElement | SVGElement

Implementation of

IFocusableNode.getFocusableElement


getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1008

See IFocusableNode.getFocusableTree.

Returns

IFocusableTree

Implementation of

IFocusableNode.getFocusableTree


onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1013

See IFocusableNode.onNodeFocus.

Returns

void

Implementation of

IFocusableNode.onNodeFocus


onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1016

See IFocusableNode.onNodeBlur.

Returns

void

Implementation of

IFocusableNode.onNodeBlur


canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1019

See IFocusableNode.canBeFocused.

Returns

boolean

Implementation of

IFocusableNode.canBeFocused


getRootFocusableNode()

getRootFocusableNode(): IFocusableNode;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1024

See IFocusableTree.getRootFocusableNode.

Returns

IFocusableNode

Implementation of

IToolbox.getRootFocusableNode


getRestoredFocusableNode()

getRestoredFocusableNode(previousNode): IFocusableNode | null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1029

See IFocusableTree.getRestoredFocusableNode.

Parameters

ParameterType
previousNodeIFocusableNode | null

Returns

IFocusableNode | null

Implementation of

IToolbox.getRestoredFocusableNode


getNestedTrees()

getNestedTrees(): IFocusableTree[];

Defined in: packages/blockly/core/toolbox/toolbox.ts:1041

See IFocusableTree.getNestedTrees.

Returns

IFocusableTree[]

Implementation of

IToolbox.getNestedTrees


lookUpFocusableNode()

lookUpFocusableNode(id): IFocusableNode | null;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1046

See IFocusableTree.lookUpFocusableNode.

Parameters

ParameterType
idstring

Returns

IFocusableNode | null

Implementation of

IToolbox.lookUpFocusableNode


onTreeFocus()

onTreeFocus(node, _previousTree): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1051

See IFocusableTree.onTreeFocus.

Parameters

ParameterType
nodeIFocusableNode
_previousTreeIFocusableTree | null

Returns

void

Implementation of

IToolbox.onTreeFocus


onTreeBlur()

onTreeBlur(nextTree): void;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1069

See IFocusableTree.onTreeBlur.

Parameters

ParameterType
nextTreeIFocusableTree | null

Returns

void

Implementation of

IToolbox.onTreeBlur


getNavigator()

getNavigator(): ToolboxNavigator;

Defined in: packages/blockly/core/toolbox/toolbox.ts:1081

Returns the Navigator instance to use to move between items in this toolbox.

Returns

ToolboxNavigator

Implementation of

IToolbox.getNavigator