Interface: IIcon

Defined in: packages/blockly/core/interfaces/i_icon.ts:12

Represents anything that can have input focus.

Extends

• IFocusableNode

Methods index

Method	Description
getFocusableElement	Returns the DOM element that can be explicitly requested to receive focus.
getFocusableTree	Returns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.
onNodeFocus	Called when this node receives active focus.
onNodeBlur	Called when this node loses active focus. It may still have passive focus.
canBeFocused	Indicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.
performAction	Optional method invoked when this node has focus and the user acts on it by pressing Enter or Space. Behavior should generally be similar to the node being clicked on.
getType	Returns the IconType representing the type of the icon. This value should also be used to register the icon via Blockly.icons.registry.register.
initView	Creates the SVG elements for the icon that will live on the block.
dispose	Disposes of any elements of the icon.
getWeight	Returns the "weight" of the icon, which determines the static order which icons should be rendered in. More positive numbers are rendered farther toward the end of the block.
getSize	Returns the dimensions of the icon for use in rendering.
applyColour	Updates the icon's color when the block's color changes..
hideForInsertionMarker	Hides the icon when it is part of an insertion marker.
updateEditable	Updates the icon's editability when the block's editability changes.
updateCollapsed	Updates the icon's collapsed-ness/view when the block's collapsed-ness changes.
isShownWhenCollapsed	Returns whether this icon is shown when the block is collapsed. Used to allow renderers to account for padding.
setOffsetInBlock	Notifies the icon where it is relative to its block's top-start, in workspace units.
onLocationChange	Notifies the icon that it has changed locations.
onClick	Notifies the icon that it has been clicked.
isClickableInFlyout	Check whether the icon should be clickable while the block is in a flyout. If this function is not defined, the icon will be clickable in all flyouts.

Methods

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:44

Returns the DOM element that can be explicitly requested to receive focus.

IMPORTANT: Please note that this element is expected to have a visual presence on the page as it will both be explicitly focused and have its style changed depending on its current focus state (i.e. blurred, actively focused, and passively focused). The element will have one of two styles attached (where no style indicates blurred/not focused):

• blocklyActiveFocus
• blocklyPassiveFocus

The returned element must also have a valid ID specified, and this ID should be unique across the entire page. Failing to have a properly unique ID could result in trying to focus one node (such as via a mouse click) leading to another node with the same ID actually becoming focused by FocusManager.

The returned element must be visible if the node is ever focused via FocusManager.focusNode() or FocusManager.focusTree(). It's allowed for an element to be hidden until onNodeFocus() is called, or become hidden with a call to onNodeBlur().

It's expected the actual returned element will not change for the lifetime of the node (that is, its properties can change but a new element should never be returned). Also, the returned element will have its tabindex overwritten throughout the lifecycle of this node and FocusManager.

If a node requires the ability to be focused directly without first being focused via FocusManager then it must set its own tab index.

Returns

HTMLElement | SVGElement

The HTMLElement or SVGElement which can both receive focus and be visually represented as actively or passively focused for this node.

Inherited from

IFocusableNode.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:53

Returns the closest parent tree of this node (in cases where a tree has distinct trees underneath it), which represents the tree to which this node belongs.

Returns

IFocusableTree

The node's IFocusableTree.

Inherited from

IFocusableNode.getFocusableTree

---

onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:66

Called when this node receives active focus.

Note that it's fine for implementations to change visibility modifiers, but they should avoid the following:

• Creating or removing DOM elements (including via the renderer or drawer).
• Affecting focus via DOM focus() calls or the FocusManager.

Implementations may consider scrolling themselves into view here; that is not handled by the focus manager.

Returns

void

Inherited from

IFocusableNode.onNodeFocus

---

onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:73

Called when this node loses active focus. It may still have passive focus.

This has the same implementation restrictions as onNodeFocus().

Returns

void

Inherited from

IFocusableNode.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:101

Indicates whether this node allows focus. If this returns false then none of the other IFocusableNode methods will be called.

Note that special care must be taken if implementations of this function dynamically change their return value value over the lifetime of the node as certain environment conditions could affect the focusability of this node's DOM element (such as whether the element has a positive or zero tabindex). Also, changing from a true to a false value while the node holds focus will not immediately change the current focus of the node nor FocusManager's internal state, and thus may result in some of the node's functions being called later on when defocused (since it was previously considered focusable at the time of being focused).

Implementations should generally always return true here unless there are circumstances under which this node should be skipped for focus considerations. Examples may include being disabled, read-only, a purely visual decoration, or a node with no visual representation that must implement this interface (e.g. due to a parent interface extending it). Keep in mind accessibility best practices when determining whether a node should be focusable since even disabled and read-only elements are still often relevant to providing organizational context to users (particularly when using a screen reader).

Returns

boolean

Whether this node can be focused by FocusManager.

Inherited from

IFocusableNode.canBeFocused

---

performAction()?

optional performAction(e?): void;

Defined in: packages/blockly/core/interfaces/i_focusable_node.ts:110

Optional method invoked when this node has focus and the user acts on it by pressing Enter or Space. Behavior should generally be similar to the node being clicked on.

Parameters

Parameter	Type	Description
e?	Event	The event that triggered this action, if any.

Returns

void

Inherited from

IFocusableNode.performAction

---

getType()

getType(): IconType<IIcon>;

Defined in: packages/blockly/core/interfaces/i_icon.ts:17

Returns

IconType<IIcon>

the IconType representing the type of the icon. This value should also be used to register the icon via Blockly.icons.registry.register.

---

initView()

initView(pointerdownListener): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:26

Creates the SVG elements for the icon that will live on the block.

Parameters

Parameter	Type	Description
pointerdownListener	(e) => void	An event listener that must be attached to the root SVG element by the implementation of initView. Used by Blockly's gesture system to properly handle clicks and drags.

Returns

void

---

dispose()

dispose(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:36

Disposes of any elements of the icon.

Returns

void

Remarks

In particular, if this icon is currently showing a bubble, this should be used to hide it.

---

getWeight()

getWeight(): number;

Defined in: packages/blockly/core/interfaces/i_icon.ts:43

Returns

number

the "weight" of the icon, which determines the static order which icons should be rendered in. More positive numbers are rendered farther toward the end of the block.

---

getSize()

getSize(): Size;

Defined in: packages/blockly/core/interfaces/i_icon.ts:46

Returns

Size

The dimensions of the icon for use in rendering.

---

applyColour()

applyColour(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:49

Updates the icon's color when the block's color changes..

Returns

void

---

hideForInsertionMarker()

hideForInsertionMarker(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:52

Hides the icon when it is part of an insertion marker.

Returns

void

---

updateEditable()

updateEditable(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:55

Updates the icon's editability when the block's editability changes.

Returns

void

---

updateCollapsed()

updateCollapsed(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:61

Updates the icon's collapsed-ness/view when the block's collapsed-ness changes.

Returns

void

---

isShownWhenCollapsed()

isShownWhenCollapsed(): boolean;

Defined in: packages/blockly/core/interfaces/i_icon.ts:67

Returns

boolean

Whether this icon is shown when the block is collapsed. Used to allow renderers to account for padding.

---

setOffsetInBlock()

setOffsetInBlock(offset): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:73

Notifies the icon where it is relative to its block's top-start, in workspace units.

Parameters

Parameter	Type
offset	Coordinate

Returns

void

---

onLocationChange()

onLocationChange(blockOrigin): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:81

Notifies the icon that it has changed locations.

Parameters

Parameter	Type	Description
blockOrigin	Coordinate	The location of this icon's block's top-start corner in workspace coordinates.

Returns

void

---

onClick()

onClick(): void;

Defined in: packages/blockly/core/interfaces/i_icon.ts:86

Notifies the icon that it has been clicked.

Returns

void

---

isClickableInFlyout()?

optional isClickableInFlyout(autoClosingFlyout): boolean;

Defined in: packages/blockly/core/interfaces/i_icon.ts:95

Check whether the icon should be clickable while the block is in a flyout. If this function is not defined, the icon will be clickable in all flyouts.

Parameters

Parameter	Type	Description
autoClosingFlyout	boolean	true if the containing flyout is an auto-closing one.

Returns

boolean

Whether the icon should be clickable while the block is in a flyout.