blockly > Toolbox

Toolbox class

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


export declare class Toolbox extends DeleteArea implements IAutoHideable, IKeyboardAccessible, IStyleable, IToolbox 

Extends: DeleteArea

Implements: IAutoHideable, IKeyboardAccessible, IStyleable, IToolbox


Constructor Modifiers Description
(constructor)(workspace) Constructs a new instance of the Toolbox class


Property Modifiers Type Description
boundEvents_ protected browserEvents.Data[] Array holding info needed to unbind event handlers. Used for disposing. Ex: [[node, name, func], [node, name, func]].
contentMap_ protected { [key: string]: IToolboxItem; }
contents_ protected IToolboxItem[] The list of items in the toolbox.
contentsDiv_ protected HTMLDivElement | null The HTML container for the contents of a toolbox.
height_ protected number The height of the toolbox.
HtmlDiv HTMLDivElement | null The HTML container for the toolbox.
id string The unique ID for this component that is used to register with the ComponentManager.
isVisible_ protected boolean Whether the Toolbox is visible.
previouslySelectedItem_ protected ISelectableToolboxItem | null The previously selected item.
RTL boolean
selectedItem_ protected ISelectableToolboxItem | null The currently selected item.
toolboxDef_ protected toolbox.ToolboxInfo
toolboxPosition toolbox.Position
width_ protected number The width of the toolbox.



WorkspaceSvg The workspace this toolbox is on.


Method Modifiers Description
addToolboxItem_(toolboxItem) protected Adds an item to the toolbox.
attachEvents_(container, contentsContainer) protected Adds event listeners to the toolbox container div.
autoHide(onlyClosePopups) Hides the component. Called in WorkspaceSvg.hideChaff.
clearSelection() Unhighlights any previously selected item.
createContainer_() protected Creates the container div for the toolbox.
createContentsContainer_() protected Creates the container for all the contents in the toolbox.
createDom_(workspace) protected Creates the DOM for the toolbox.
createFlyout_() protected Creates the flyout based on the toolbox layout.
deselectItem_(item) protected Deselects the given item, marks it as unselected, and updates aria state.
dispose() Disposes of this toolbox.
getClientRect() Returns the bounding rectangle of the drag target area in pixel units relative to viewport.
getFlyout() Gets the toolbox flyout.
getHeight() Gets the height of the toolbox.
getPreviouslySelectedItem() Gets the previously selected item.
getSelectedItem() Gets the selected item.
getToolboxItemById(id) Gets the toolbox item with the given ID.
getToolboxItems() Gets the items in the toolbox.
getWidth() Gets the width of the toolbox.
getWorkspace() Gets the workspace for the toolbox.
init() Initializes the toolbox
isHorizontal() Gets whether or not the toolbox is horizontal.
onClick_(e) protected Handles on click events for when the toolbox or toolbox items are clicked.
onDragEnter(_dragElement) Handles when a cursor with a block or bubble enters this drag target.
onDragExit(_dragElement) Handles when a cursor with a block or bubble exits this drag target.
onDrop(_dragElement) Handles when a block or bubble is dropped on this component. Should not handle delete here.
onKeyDown_(e) protected Handles key down events for the toolbox.
onShortcut(_shortcut) Handles the given keyboard shortcut.
position() Positions the toolbox based on whether it is a horizontal toolbox and whether the workspace is in rtl.
refreshSelection() 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.
renderContents_(toolboxDef) protected Adds all the toolbox items to the toolbox.
selectItem_(oldItem, newItem) protected Selects the given item, marks it selected, and updates aria state.
selectItemByPosition(position) Selects the toolbox item by its position in the list of toolbox items.
setSelectedItem(newItem) Sets the given item as selected. No-op if the item is not selectable.
setVisible(isVisible) Shows or hides the toolbox.
shouldDeselectItem_(oldItem, newItem) protected Decides whether the old item should be deselected.
shouldSelectItem_(oldItem, newItem) protected Decides whether the new item should be selected.
updateCursorDeleteStyle_(addStyle) protected 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).
updateFlyout_(oldItem, newItem) protected Decides whether to hide or show the flyout depending on the selected item.
updateWouldDelete_(wouldDelete) protected Updates the internal wouldDelete_ state.
wouldDelete(element, _couldConnect) 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.