Interface: IBubble

Defined in: packages/blockly/core/interfaces/i_bubble.ts:18

A bubble interface.

Extends

• IDraggable.IContextMenu.ISelectable.IBoundedElement

Properties index

Property	Description
id	-
workspace	-

Methods index

Method	Description
getBoundingRectangle	Returns the coordinates of a bounded element describing the dimensions of the element. Coordinate system: workspace coordinates.
moveBy	Move the element by a relative offset.
getRelativeToSurfaceXY	Return the coordinates of the top-left corner of this bubble's body relative to the drawing surface's origin (0,0), in workspace units.
getSvgRoot	Return the root node of the bubble's SVG group.
setDragging	Sets whether or not this bubble is being dragged.
moveDuringDrag	Move this bubble during a drag.
moveTo	Move the bubble to the specified location in workspace coordinates.
setDeleteStyle	Update the style of this bubble when it is dragged over a delete area.
dispose	Dispose of this bubble.
showContextMenu	Show the context menu for this object.
isMovable	Returns true iff the element is currently movable.
startDrag	Handles any drag startup (e.g moving elements to the front of the workspace).
drag	Handles moving elements to the new location, and updating any visuals based on that (e.g connection previews for blocks).
endDrag	Handles any drag cleanup, including e.g. connecting or deleting blocks.
revertDrag	Moves the draggable back to where it was at the start of the drag.
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.
select	Select this. Highlight it visually.
unselect	Unselect this. Unhighlight it visually.

Properties

id

id: string;

Defined in: packages/blockly/core/interfaces/i_selectable.ts:21

Inherited from

IDraggable.id

---

workspace

workspace: WorkspaceSvg;

Defined in: packages/blockly/core/interfaces/i_selectable.ts:23

Inherited from

IDraggable.workspace

Methods

getBoundingRectangle()

getBoundingRectangle(): Rect;

Defined in: packages/blockly/core/interfaces/i_bounded_element.ts:21

Returns the coordinates of a bounded element describing the dimensions of the element. Coordinate system: workspace coordinates.

Returns

Rect

Object with coordinates of the bounded element.

Inherited from

IDraggable.getBoundingRectangle

---

moveBy()

moveBy(
   dx, 
   dy, 
   reason?
): void;

Defined in: packages/blockly/core/interfaces/i_bounded_element.ts:30

Move the element by a relative offset.

Parameters

Parameter	Type	Description
dx	number	Horizontal offset in workspace units.
dy	number	Vertical offset in workspace units.
reason?	string[]	Why is this move happening? 'user', 'bump', 'snap'...

Returns

void

Inherited from

IDraggable.moveBy

---

getRelativeToSurfaceXY()

getRelativeToSurfaceXY(): Coordinate;

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

Return the coordinates of the top-left corner of this bubble's body relative to the drawing surface's origin (0,0), in workspace units.

Returns

Coordinate

Object with .x and .y properties.

Overrides

IDraggable.getRelativeToSurfaceXY

---

getSvgRoot()

getSvgRoot(): SVGElement;

Defined in: packages/blockly/core/interfaces/i_bubble.ts:33

Return the root node of the bubble's SVG group.

Returns

SVGElement

The root SVG node of the bubble's group.

---

setDragging()

setDragging(dragging): void;

Defined in: packages/blockly/core/interfaces/i_bubble.ts:40

Sets whether or not this bubble is being dragged.

Parameters

Parameter	Type
dragging	boolean

Returns

void

---

moveDuringDrag()

moveDuringDrag(newLoc): void;

Defined in: packages/blockly/core/interfaces/i_bubble.ts:47

Move this bubble during a drag.

Parameters

Parameter	Type	Description
newLoc	Coordinate	The location to translate to, in workspace coordinates.

Returns

void

---

moveTo()

moveTo(x, y): void;

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

Move the bubble to the specified location in workspace coordinates.

Parameters

Parameter	Type	Description
x	number	The x position to move to.
y	number	The y position to move to.

Returns

void

---

setDeleteStyle()

setDeleteStyle(enable): void;

Defined in: packages/blockly/core/interfaces/i_bubble.ts:62

Update the style of this bubble when it is dragged over a delete area.

Parameters

Parameter	Type	Description
enable	boolean	True if the bubble is about to be deleted, false otherwise.

Returns

void

---

dispose()

dispose(): void;

Defined in: packages/blockly/core/interfaces/i_bubble.ts:65

Dispose of this bubble.

Returns

void

---

showContextMenu()

showContextMenu(e): void;

Defined in: packages/blockly/core/interfaces/i_contextmenu.ts:15

Show the context menu for this object.

Parameters

Parameter	Type	Description
e	Event	Mouse event.

Returns

void

Inherited from

IContextMenu.showContextMenu

---

isMovable()

isMovable(): boolean;

Defined in: packages/blockly/core/interfaces/i_draggable.ts:32

Returns true iff the element is currently movable.

Returns

boolean

Inherited from

IDraggable.isMovable

---

startDrag()

startDrag(e?): IDraggable;

Defined in: packages/blockly/core/interfaces/i_draggable.ts:42

Handles any drag startup (e.g moving elements to the front of the workspace).

Parameters

Parameter	Type	Description
e?	PointerEvent | KeyboardEvent	Event that started the drag; can be used to check modifier keys, etc. May be missing when dragging is triggered programmatically rather than by user.

Returns

IDraggable

Inherited from

IDraggable.startDrag

---

drag()

drag(newLoc, e?): void;

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

Handles moving elements to the new location, and updating any visuals based on that (e.g connection previews for blocks).

Parameters

Parameter	Type	Description
newLoc	Coordinate	Workspace coordinate to which the draggable has been dragged.
e?	PointerEvent | KeyboardEvent	Event that continued the drag. Can be used to check modifier keys, etc.

Returns

void

Inherited from

IDraggable.drag

---

endDrag()

endDrag(e, disposition): void;

Defined in: packages/blockly/core/interfaces/i_draggable.ts:63

Handles any drag cleanup, including e.g. connecting or deleting blocks.

Parameters

Parameter	Type	Description
e	PointerEvent | KeyboardEvent | undefined	Event that finished the drag. Can be used to check modifier keys, etc.
disposition	DragDisposition	The end result of the drag.

Returns

void

Inherited from

IDraggable.endDrag

---

revertDrag()

revertDrag(): void;

Defined in: packages/blockly/core/interfaces/i_draggable.ts:69

Moves the draggable back to where it was at the start of the drag.

Returns

void

Inherited from

IDraggable.revertDrag

---

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

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

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

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

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

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

IDraggable.performAction

---

select()

select(): void;

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

Select this. Highlight it visually.

Returns

void

Inherited from

IDraggable.select

---

unselect()

unselect(): void;

Defined in: packages/blockly/core/interfaces/i_selectable.ts:29

Unselect this. Unhighlight it visually.

Returns

void

Inherited from

IDraggable.unselect