Class: Toolbox
Defined in: packages/blockly/core/toolbox/toolbox.ts:56
Class for a Toolbox. Creates the toolbox's DOM.
Extends
Implements
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. |
| toolboxDef_ | - |
| HtmlDiv | The 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 | - |
| contents | Map 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
| 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. |
| onDragOver | Handles when a cursor with a block or bubble is dragged over this drag target. |
| 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. |
| onShortcut | Handles the given keyboard shortcut. |
| init | Initializes 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. |
| getToolboxItems | Gets the items in the toolbox. |
| getClientRect | Returns the bounding rectangle of the drag target area in pixel units relative to viewport. |
| onDragEnter | Handles when a cursor with a block or bubble enters 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. |
| 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). |
| getToolboxItemById | Gets the toolbox item with the given ID. |
| getWidth | Gets the width of the toolbox. |
| getHeight | Gets the height of the toolbox. |
| getFlyout | Gets the toolbox flyout. |
| getWorkspace | Gets the workspace for the toolbox. |
| getSelectedItem | Gets the selected item. |
| getPreviouslySelectedItem | Gets the previously selected item. |
| isHorizontal | Gets whether or not the toolbox is horizontal. |
| position | Positions the toolbox based on whether it is a horizontal toolbox and whether the workspace is in rtl. |
| clearSelection | Unhighlights any previously selected item. |
| 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. |
| setVisible | Shows or hides the toolbox. |
| autoHide | Hides the component. Called in WorkspaceSvg.hideChaff. |
| setSelectedItem | Sets 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. |
| selectItemByPosition | Selects 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. |
| dispose | Disposes of this toolbox. |
| getFocusableElement | See IFocusableNode.getFocusableElement. |
| getFocusableTree | See IFocusableNode.getFocusableTree. |
| onNodeFocus | See IFocusableNode.onNodeFocus. |
| onNodeBlur | See IFocusableNode.onNodeBlur. |
| canBeFocused | See IFocusableNode.canBeFocused. |
| getRootFocusableNode | See IFocusableTree.getRootFocusableNode. |
| getRestoredFocusableNode | See IFocusableTree.getRestoredFocusableNode. |
| getNestedTrees | See IFocusableTree.getNestedTrees. |
| lookUpFocusableNode | See IFocusableTree.lookUpFocusableNode. |
| onTreeFocus | See IFocusableTree.onTreeFocus. |
| onTreeBlur | See IFocusableTree.onTreeBlur. |
| getNavigator | Returns 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
| Parameter | Type | Description |
|---|---|---|
workspace | WorkspaceSvg | The workspace in which to create new blocks. |
Returns
Toolbox
Overrides
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
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
Overrides
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
| 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
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
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
onShortcut()
onShortcut(_shortcut): boolean;
Defined in: packages/blockly/core/toolbox/toolbox.ts:146
Handles the given keyboard shortcut.
Parameters
| Parameter | Type | Description |
|---|---|---|
_shortcut | KeyboardShortcut | The 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
createDom_()
protected createDom_(workspace): HTMLDivElement;
Defined in: packages/blockly/core/toolbox/toolbox.ts:190
Creates the DOM for the toolbox.
Parameters
| Parameter | Type | Description |
|---|---|---|
workspace | WorkspaceSvg | The 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
| Parameter | Type | Description |
|---|---|---|
container | HTMLDivElement | The HTML container for the toolbox. |
contentsContainer | HTMLDivElement | The 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
| Parameter | Type | Description |
|---|---|---|
e | PointerEvent | Click 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
| Parameter | Type | Description |
|---|---|---|
e | KeyboardEvent | The 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
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
| Parameter | Type | Description |
|---|---|---|
toolboxDef | ToolboxItemInfo[] | 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
| Parameter | Type | Description |
|---|---|---|
toolboxItem | IToolboxItem | The 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
The list of items in the toolbox.
Implementation of
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
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
| Parameter | Type | Description |
|---|---|---|
_dragElement | IDraggable | The block or bubble currently being dragged. |
Returns
void
Overrides
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
| Parameter | Type | Description |
|---|---|---|
_dragElement | IDraggable | The block or bubble currently being dragged. |
Returns
void
Overrides
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
| Parameter | Type | Description |
|---|---|---|
_dragElement | IDraggable | The block or bubble currently being dragged. |
Returns
void
Overrides
updateWouldDelete_()
protected updateWouldDelete_(wouldDelete): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:564
Updates the internal wouldDelete_ state.
Parameters
| Parameter | Type | Description |
|---|---|---|
wouldDelete | boolean | The new value for the wouldDelete state. |
Returns
void
Overrides
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
| Parameter | Type | Description |
|---|---|---|
addStyle | boolean | Whether 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
| Parameter | Type | Description |
|---|---|---|
id | string | The 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
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
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
getWorkspace()
getWorkspace(): WorkspaceSvg;
Defined in: packages/blockly/core/toolbox/toolbox.ts:638
Gets the workspace for the toolbox.
Returns
The parent workspace for the toolbox.
Implementation of
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
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
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
clearSelection()
clearSelection(): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:741
Unhighlights any previously selected item.
Returns
void
Implementation of
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
setVisible()
setVisible(isVisible): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:780
Shows or hides the toolbox.
Parameters
| Parameter | Type | Description |
|---|---|---|
isVisible | boolean | True if toolbox should be visible. |
Returns
void
Implementation of
autoHide()
autoHide(onlyClosePopups): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:800
Hides the component. Called in WorkspaceSvg.hideChaff.
Parameters
| Parameter | Type | Description |
|---|---|---|
onlyClosePopups | boolean | Whether only popups should be closed. Flyouts should not be closed if this is true. |
Returns
void
Implementation of
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
| Parameter | Type | Description |
|---|---|---|
newItem | IToolboxItem | null | The toolbox item to select. |
Returns
void
Implementation of
shouldDeselectItem_()
protected shouldDeselectItem_(oldItem, newItem): boolean;
Defined in: packages/blockly/core/toolbox/toolbox.ts:841
Decides whether the old item should be deselected.
Parameters
| Parameter | Type | Description |
|---|---|---|
oldItem | | ISelectableToolboxItem | null | The previously selected toolbox item. |
newItem | | ISelectableToolboxItem | null | The 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
| Parameter | Type | Description |
|---|---|---|
oldItem | | ISelectableToolboxItem | null | The previously selected toolbox item. |
newItem | | ISelectableToolboxItem | null | The 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
| Parameter | Type | Description |
|---|---|---|
item | ISelectableToolboxItem | The 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
| Parameter | Type | Description |
|---|---|---|
oldItem | | ISelectableToolboxItem | null | The previously selected toolbox item. |
newItem | ISelectableToolboxItem | The 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
| Parameter | Type | Description |
|---|---|---|
position | number | The position of the item to select. |
Returns
void
Implementation of
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
| Parameter | Type | Description |
|---|---|---|
oldItem | | ISelectableToolboxItem | null | The previously selected toolbox item. |
newItem | | ISelectableToolboxItem | null | The 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
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
Implementation of
IFocusableNode.getFocusableTree
onNodeFocus()
onNodeFocus(): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1013
See IFocusableNode.onNodeFocus.
Returns
void
Implementation of
onNodeBlur()
onNodeBlur(): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1016
See IFocusableNode.onNodeBlur.
Returns
void
Implementation of
canBeFocused()
canBeFocused(): boolean;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1019
See IFocusableNode.canBeFocused.
Returns
boolean
Implementation of
getRootFocusableNode()
getRootFocusableNode(): IFocusableNode;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1024
See IFocusableTree.getRootFocusableNode.
Returns
Implementation of
getRestoredFocusableNode()
getRestoredFocusableNode(previousNode): IFocusableNode | null;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1029
See IFocusableTree.getRestoredFocusableNode.
Parameters
| Parameter | Type |
|---|---|
previousNode | IFocusableNode | null |
Returns
IFocusableNode | null
Implementation of
IToolbox.getRestoredFocusableNode
getNestedTrees()
getNestedTrees(): IFocusableTree[];
Defined in: packages/blockly/core/toolbox/toolbox.ts:1041
See IFocusableTree.getNestedTrees.
Returns
Implementation of
lookUpFocusableNode()
lookUpFocusableNode(id): IFocusableNode | null;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1046
See IFocusableTree.lookUpFocusableNode.
Parameters
| Parameter | Type |
|---|---|
id | string |
Returns
IFocusableNode | null
Implementation of
onTreeFocus()
onTreeFocus(node, _previousTree): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1051
See IFocusableTree.onTreeFocus.
Parameters
| Parameter | Type |
|---|---|
node | IFocusableNode |
_previousTree | IFocusableTree | null |
Returns
void
Implementation of
onTreeBlur()
onTreeBlur(nextTree): void;
Defined in: packages/blockly/core/toolbox/toolbox.ts:1069
See IFocusableTree.onTreeBlur.
Parameters
| Parameter | Type |
|---|---|
nextTree | IFocusableTree | null |
Returns
void
Implementation of
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.