Abstract Class: Bubble

Defined in: packages/blockly/core/bubbles/bubble.ts:42

The abstract pop-up bubble class. This creates a UI that looks like a speech bubble, where it has a "tail" that points to the block, and a "head" that displays arbitrary svg elements.

Extended by

• MiniWorkspaceBubble
• TextBubble
• TextInputBubble

Implements

• IBubble
• ISelectable
• IFocusableNode
• IBoundedElement

Properties index

Property	Description
BORDER_WIDTH	The width of the border around the bubble.
DOUBLE_BORDER	Double the width of the border around the bubble.
MIN_SIZE	The minimum size the bubble can have.
TAIL_THICKNESS	The thickness of the base of the tail in relation to the size of the bubble. Higher numbers result in thinner tails.
TAIL_ANGLE	The number of degrees that the tail bends counter-clockwise.
TAIL_BEND	The sharpness of the tail's bend. Higher numbers result in smoother tails.
ANCHOR_RADIUS	Distance between arrow point and anchor point.
id	-
svgRoot	The SVG group containing all parts of the bubble.
contentContainer	The SVG group containing the contents of the bubble.
disposed	True if the bubble has been disposed, false otherwise.
workspace	The workspace this bubble belongs to.
anchor	The anchor location of the thing this bubble is attached to. The tail of the bubble will point to this location.
ownerRect	An optional rect we don't want the bubble to overlap with when automatically positioning.
owner	The object responsible for hosting/spawning this bubble.

Methods index

Method	Description
dispose	Dispose of this bubble.
setAnchorLocation	Set the location the tail of this bubble points to.
setPositionRelativeToAnchor	Sets the position of this bubble relative to its anchor.
getSize	Returns the size of this bubble.
setSize	Sets the size of this bubble, including the border.
getColour	Returns the colour of the background and tail of this bubble.
setColour	Sets the colour of the background and tail of this bubble.
onKeyDown	Handles key events when this bubble is focused. By default, closes the bubble on Escape.
positionRelativeToAnchor	Positions the bubble relative to its anchor. Does not render its tail.
moveBy	Moves the bubble by the given amounts in the x and y directions.
positionByRect	Positions the bubble "optimally" so that the most of it is visible and it does not overlap the rect (if provided).
getBoundingRectangle	Returns the bounds of this bubble.
setDragging	Sets whether or not this bubble is being dragged.
isMovable	Returns whether this bubble is movable or not.
startDrag	Starts a drag on the bubble.
drag	Drags the bubble to the given location.
endDrag	Ends the drag on the bubble.
revertDrag	Moves the bubble back to where it was at the start of a drag.
select	Select this. Highlight it visually.
unselect	Unselect this. Unhighlight it visually.
getFocusableElement	See IFocusableNode.getFocusableElement.
getFocusableTree	See IFocusableNode.getFocusableTree.
onNodeFocus	See IFocusableNode.onNodeFocus.
onNodeBlur	See IFocusableNode.onNodeBlur.
canBeFocused	See IFocusableNode.canBeFocused.
getOwner	Returns the object that owns/hosts this bubble, if any.
recomputeAriaContext	Recomputes the ARIA label and role for this bubble. This is automatically called during initialization, but implementations may find it useful to call this if the bubble's label should be changed.
setAriaLabelProvider	Sets a custom ARIA label provider for this bubble, or null if it should be reset to use the default method.
getAriaLabel	Returns the ARIA label to use for this bubble based on the provider set via setAriaLabelProvider. This will return null if the provider is absent or returns null.

Constructors

Constructor

new Bubble(
   workspace, 
   anchor, 
   ownerRect?, 
   overriddenFocusableElement?, 
   owner?
): Bubble;

Defined in: packages/blockly/core/bubbles/bubble.ts:124

Parameters

Parameter	Type	Description
workspace	WorkspaceSvg	The workspace this bubble belongs to.
anchor	Coordinate	The anchor location of the thing this bubble is attached to. The tail of the bubble will point to this location.
ownerRect?	Rect	An optional rect we don't want the bubble to overlap with when automatically positioning.
overriddenFocusableElement?	HTMLElement | SVGElement	An optional replacement to the focusable element that's represented by this bubble (as a focusable node). This element will have its ID overwritten. If not provided, the focusable element of this node will default to the bubble's SVG root.
owner?	IHasBubble & IFocusableNode	The object responsible for hosting/spawning this bubble.

Returns

Bubble

Properties

BORDER_WIDTH

readonly static BORDER_WIDTH: 6 = 6;

Defined in: packages/blockly/core/bubbles/bubble.ts:46

The width of the border around the bubble.

---

DOUBLE_BORDER

readonly static DOUBLE_BORDER: number;

Defined in: packages/blockly/core/bubbles/bubble.ts:49

Double the width of the border around the bubble.

---

MIN_SIZE

readonly static MIN_SIZE: number;

Defined in: packages/blockly/core/bubbles/bubble.ts:52

The minimum size the bubble can have.

---

TAIL_THICKNESS

readonly static TAIL_THICKNESS: 1 = 1;

Defined in: packages/blockly/core/bubbles/bubble.ts:58

The thickness of the base of the tail in relation to the size of the bubble. Higher numbers result in thinner tails.

---

TAIL_ANGLE

readonly static TAIL_ANGLE: 20 = 20;

Defined in: packages/blockly/core/bubbles/bubble.ts:61

The number of degrees that the tail bends counter-clockwise.

---

TAIL_BEND

readonly static TAIL_BEND: 4 = 4;

Defined in: packages/blockly/core/bubbles/bubble.ts:67

The sharpness of the tail's bend. Higher numbers result in smoother tails.

---

ANCHOR_RADIUS

readonly static ANCHOR_RADIUS: 8 = 8;

Defined in: packages/blockly/core/bubbles/bubble.ts:70

Distance between arrow point and anchor point.

---

id

id: string;

Defined in: packages/blockly/core/bubbles/bubble.ts:72

Implementation of

ISelectable.id

---

svgRoot

protected svgRoot: SVGGElement;

Defined in: packages/blockly/core/bubbles/bubble.ts:75

The SVG group containing all parts of the bubble.

---

contentContainer

protected contentContainer: SVGGElement;

Defined in: packages/blockly/core/bubbles/bubble.ts:84

The SVG group containing the contents of the bubble.

---

disposed

disposed: boolean = false;

Defined in: packages/blockly/core/bubbles/bubble.ts:95

True if the bubble has been disposed, false otherwise.

---

workspace

readonly workspace: WorkspaceSvg;

Defined in: packages/blockly/core/bubbles/bubble.ts:125

The workspace this bubble belongs to.

Implementation of

ISelectable.workspace

---

anchor

protected anchor: Coordinate;

Defined in: packages/blockly/core/bubbles/bubble.ts:126

The anchor location of the thing this bubble is attached to. The tail of the bubble will point to this location.

---

ownerRect?

protected optional ownerRect?: Rect;

Defined in: packages/blockly/core/bubbles/bubble.ts:127

An optional rect we don't want the bubble to overlap with when automatically positioning.

---

owner?

protected optional owner?: IHasBubble & IFocusableNode;

Defined in: packages/blockly/core/bubbles/bubble.ts:129

The object responsible for hosting/spawning this bubble.

Methods

dispose()

dispose(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:180

Dispose of this bubble.

Returns

void

Implementation of

IBubble.dispose

---

setAnchorLocation()

setAnchorLocation(anchor, relayout?): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:193

Set the location the tail of this bubble points to.

Parameters

Parameter	Type	Default value	Description
anchor	Coordinate	undefined	The location the tail of this bubble points to.
relayout	boolean	false	If true, reposition the bubble from scratch so that it is optimally visible. If false, reposition it so it maintains the same position relative to the anchor.

Returns

void

---

setPositionRelativeToAnchor()

setPositionRelativeToAnchor(left, top): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:204

Sets the position of this bubble relative to its anchor.

Parameters

Parameter	Type
left	number
top	number

Returns

void

---

getSize()

protected getSize(): Size;

Defined in: packages/blockly/core/bubbles/bubble.ts:212

Returns

Size

the size of this bubble.

---

setSize()

protected setSize(size, relayout?): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:224

Sets the size of this bubble, including the border.

Parameters

Parameter	Type	Default value	Description
size	Size	undefined	Sets the size of this bubble, including the border.
relayout	boolean	false	If true, reposition the bubble from scratch so that it is optimally visible. If false, reposition it so it maintains the same position relative to the anchor.

Returns

void

---

getColour()

protected getColour(): string;

Defined in: packages/blockly/core/bubbles/bubble.ts:241

Returns the colour of the background and tail of this bubble.

Returns

string

---

setColour()

setColour(colour): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:246

Sets the colour of the background and tail of this bubble.

Parameters

Parameter	Type
colour	string

Returns

void

---

onKeyDown()

protected onKeyDown(e): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:267

Handles key events when this bubble is focused. By default, closes the bubble on Escape.

Parameters

Parameter	Type	Description
e	KeyboardEvent	The keyboard event to handle.

Returns

void

---

positionRelativeToAnchor()

protected positionRelativeToAnchor(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:275

Positions the bubble relative to its anchor. Does not render its tail.

Returns

void

---

moveBy()

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

Defined in: packages/blockly/core/bubbles/bubble.ts:302

Moves the bubble by the given amounts in the x and y directions.

Parameters

Parameter	Type	Description
dx	number	The distance to move along the x axis.
dy	number	The distance to move along the y axis.
_reason?	string[]	A description of why this move is happening.

Returns

void

Implementation of

IBoundedElement.moveBy

---

positionByRect()

protected positionByRect(rect?): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:311

Positions the bubble "optimally" so that the most of it is visible and it does not overlap the rect (if provided).

Parameters

Parameter	Type
rect	Rect

Returns

void

---

getBoundingRectangle()

getBoundingRectangle(): Rect;

Defined in: packages/blockly/core/bubbles/bubble.ts:655

Returns the bounds of this bubble.

Returns

Rect

A bounding box for this bubble.

Implementation of

IBoundedElement.getBoundingRectangle

---

setDragging()

setDragging(_start): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:687

Sets whether or not this bubble is being dragged.

Parameters

Parameter	Type
_start	boolean

Returns

void

Implementation of

IBubble.setDragging

---

isMovable()

isMovable(): boolean;

Defined in: packages/blockly/core/bubbles/bubble.ts:707

Returns whether this bubble is movable or not.

Returns

boolean

Implementation of

IBubble.isMovable

---

startDrag()

startDrag(): IBubble;

Defined in: packages/blockly/core/bubbles/bubble.ts:712

Starts a drag on the bubble.

Returns

IBubble

Implementation of

IBubble.startDrag

---

drag()

drag(newLoc): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:717

Drags the bubble to the given location.

Parameters

Parameter	Type
newLoc	Coordinate

Returns

void

Implementation of

IBubble.drag

---

endDrag()

endDrag(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:722

Ends the drag on the bubble.

Returns

void

Implementation of

IBubble.endDrag

---

revertDrag()

revertDrag(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:727

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

Returns

void

Implementation of

IBubble.revertDrag

---

select()

select(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:731

Select this. Highlight it visually.

Returns

void

Implementation of

ISelectable.select

---

unselect()

unselect(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:736

Unselect this. Unhighlight it visually.

Returns

void

Implementation of

ISelectable.unselect

---

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

Defined in: packages/blockly/core/bubbles/bubble.ts:742

See IFocusableNode.getFocusableElement.

Returns

HTMLElement | SVGElement

Implementation of

IFocusableNode.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

Defined in: packages/blockly/core/bubbles/bubble.ts:747

See IFocusableNode.getFocusableTree.

Returns

IFocusableTree

Implementation of

IFocusableNode.getFocusableTree

---

onNodeFocus()

onNodeFocus(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:752

See IFocusableNode.onNodeFocus.

Returns

void

Implementation of

IFocusableNode.onNodeFocus

---

onNodeBlur()

onNodeBlur(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:762

See IFocusableNode.onNodeBlur.

Returns

void

Implementation of

IFocusableNode.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

Defined in: packages/blockly/core/bubbles/bubble.ts:767

See IFocusableNode.canBeFocused.

Returns

boolean

Implementation of

IFocusableNode.canBeFocused

---

getOwner()

getOwner(): 
  | IHasBubble & IFocusableNode
  | undefined;

Defined in: packages/blockly/core/bubbles/bubble.ts:774

Returns the object that owns/hosts this bubble, if any.

Returns

| IHasBubble & IFocusableNode | undefined

---

recomputeAriaContext()

protected recomputeAriaContext(): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:787

Recomputes the ARIA label and role for this bubble. This is automatically called during initialization, but implementations may find it useful to call this if the bubble's label should be changed.

Bubbles use a default non-specific label unless they're customized otherwise which is the responsibility of the bubble's owner rather than bubble implementations. Customization can be done via setAriaLabelProvider.

Returns

void

---

setAriaLabelProvider()

setAriaLabelProvider(provider): void;

Defined in: packages/blockly/core/bubbles/bubble.ts:815

Sets a custom ARIA label provider for this bubble, or null if it should be reset to use the default method.

Bubbles do not compute ARIA labels specifically to their implementation since they can be rather general-purpose. Instead, owners of the specific bubble instance (such as an icon) are responsible for defining custom label providers for their bubbles.

Note that calling this isn't sufficient for it to actually be used. recomputeAriaContext will likely also need to be called to actually apply the custom label to the bubble's focusable element.

Parameters

Parameter	Type
provider	AriaLabelProvider | null

Returns

void

---

getAriaLabel()

getAriaLabel(): string | null;

Defined in: packages/blockly/core/bubbles/bubble.ts:827

Returns the ARIA label to use for this bubble based on the provider set via setAriaLabelProvider. This will return null if the provider is absent or returns null.

Returns

string | null

The ARIA label to use for this bubble, or null if one is not provided.