Class: TextInputBubble

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:27

A bubble that displays editable text. It can also be resized by the user. Used by the comment icon.

Extends

• Bubble

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 that owns/hosts this bubble.

Methods index

Method	Description
setAnchorLocation	Set the location the tail of this bubble points to.
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.
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.
getText	Returns the text of this bubble.
setText	Sets the text of this bubble. Calls change listeners.
setEditable	Sets whether or not the text in the bubble is editable.
isEditable	Returns whether or not the text in the bubble is editable.
addTextChangeListener	Adds a change listener to be notified when this bubble's text changes.
addSizeChangeListener	Adds a change listener to be notified when this bubble's size changes.
addLocationChangeListener	Adds a change listener to be notified when this bubble's location changes.
setSize	Sets the size of this bubble, including the border.
getSize	Returns the size of this bubble.
setPositionRelativeToAnchor	Sets the position of this bubble relative to its anchor.
positionByRect	Positions the bubble "optimally" so that the most of it is visible and it does not overlap the rect (if provided).
performAction	Handles the user acting on this bubble via keyboard navigation by focusing the comment editor.
dispose	Dispose of this bubble.

Constructors

Constructor

new TextInputBubble(
   workspace, 
   anchor, 
   ownerRect?, 
   owner?
): TextInputBubble;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:77

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.
owner?	IHasBubble & IFocusableNode	The object that owns/hosts this bubble.

Returns

TextInputBubble

Overrides

Bubble.constructor

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.

Inherited from

Bubble.BORDER_WIDTH

---

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.

Inherited from

Bubble.DOUBLE_BORDER

---

MIN_SIZE

readonly static MIN_SIZE: number;

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

The minimum size the bubble can have.

Inherited from

Bubble.MIN_SIZE

---

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.

Inherited from

Bubble.TAIL_THICKNESS

---

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.

Inherited from

Bubble.TAIL_ANGLE

---

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.

Inherited from

Bubble.TAIL_BEND

---

ANCHOR_RADIUS

readonly static ANCHOR_RADIUS: 8 = 8;

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

Distance between arrow point and anchor point.

Inherited from

Bubble.ANCHOR_RADIUS

---

id

id: string;

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

Inherited from

Bubble.id

---

svgRoot

protected svgRoot: SVGGElement;

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

The SVG group containing all parts of the bubble.

Inherited from

Bubble.svgRoot

---

contentContainer

protected contentContainer: SVGGElement;

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

The SVG group containing the contents of the bubble.

Inherited from

Bubble.contentContainer

---

disposed

disposed: boolean = false;

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

True if the bubble has been disposed, false otherwise.

Inherited from

Bubble.disposed

---

workspace

readonly workspace: WorkspaceSvg;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:78

The workspace this bubble belongs to.

Inherited from

Bubble.workspace

---

anchor

protected anchor: Coordinate;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:79

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

Inherited from

Bubble.anchor

---

ownerRect?

protected optional ownerRect?: Rect;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:80

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

Inherited from

Bubble.ownerRect

---

owner?

protected optional owner?: IHasBubble & IFocusableNode;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:81

The object that owns/hosts this bubble.

Inherited from

Bubble.owner

Methods

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

Inherited from

Bubble.setAnchorLocation

---

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

Inherited from

Bubble.getColour

---

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

Inherited from

Bubble.setColour

---

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

Inherited from

Bubble.onKeyDown

---

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

Inherited from

Bubble.positionRelativeToAnchor

---

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

Inherited from

Bubble.moveBy

---

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.

Inherited from

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

Inherited from

Bubble.setDragging

---

isMovable()

isMovable(): boolean;

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

Returns whether this bubble is movable or not.

Returns

boolean

Inherited from

Bubble.isMovable

---

startDrag()

startDrag(): IBubble;

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

Starts a drag on the bubble.

Returns

IBubble

Inherited from

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

Inherited from

Bubble.drag

---

endDrag()

endDrag(): void;

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

Ends the drag on the bubble.

Returns

void

Inherited from

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

Inherited from

Bubble.revertDrag

---

select()

select(): void;

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

Select this. Highlight it visually.

Returns

void

Inherited from

Bubble.select

---

unselect()

unselect(): void;

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

Unselect this. Unhighlight it visually.

Returns

void

Inherited from

Bubble.unselect

---

getFocusableElement()

getFocusableElement(): HTMLElement | SVGElement;

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

See IFocusableNode.getFocusableElement.

Returns

HTMLElement | SVGElement

Inherited from

Bubble.getFocusableElement

---

getFocusableTree()

getFocusableTree(): IFocusableTree;

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

See IFocusableNode.getFocusableTree.

Returns

IFocusableTree

Inherited from

Bubble.getFocusableTree

---

onNodeFocus()

onNodeFocus(): void;

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

See IFocusableNode.onNodeFocus.

Returns

void

Inherited from

Bubble.onNodeFocus

---

onNodeBlur()

onNodeBlur(): void;

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

See IFocusableNode.onNodeBlur.

Returns

void

Inherited from

Bubble.onNodeBlur

---

canBeFocused()

canBeFocused(): boolean;

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

See IFocusableNode.canBeFocused.

Returns

boolean

Inherited from

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

Inherited from

Bubble.getOwner

---

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

Inherited from

Bubble.recomputeAriaContext

---

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

Inherited from

Bubble.setAriaLabelProvider

---

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.

Inherited from

Bubble.getAriaLabel

---

getText()

getText(): string;

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

Returns

string

the text of this bubble.

---

setText()

setText(text): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:100

Sets the text of this bubble. Calls change listeners.

Parameters

Parameter	Type
text	string

Returns

void

---

setEditable()

setEditable(editable): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:105

Sets whether or not the text in the bubble is editable.

Parameters

Parameter	Type
editable	boolean

Returns

void

---

isEditable()

isEditable(): boolean;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:111

Returns whether or not the text in the bubble is editable.

Returns

boolean

---

addTextChangeListener()

addTextChangeListener(listener): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:116

Adds a change listener to be notified when this bubble's text changes.

Parameters

Parameter	Type
listener	() => void

Returns

void

---

addSizeChangeListener()

addSizeChangeListener(listener): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:121

Adds a change listener to be notified when this bubble's size changes.

Parameters

Parameter	Type
listener	() => void

Returns

void

---

addLocationChangeListener()

addLocationChangeListener(listener): void;

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

Adds a change listener to be notified when this bubble's location changes.

Parameters

Parameter	Type
listener	() => void

Returns

void

---

setSize()

setSize(size, relayout?): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:162

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

Overrides

Bubble.setSize

---

getSize()

getSize(): Size;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:187

Returns

Size

the size of this bubble.

Overrides

Bubble.getSize

---

setPositionRelativeToAnchor()

setPositionRelativeToAnchor(left, top): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:197

Sets the position of this bubble relative to its anchor.

Parameters

Parameter	Type
left	number
top	number

Returns

void

Overrides

Bubble.setPositionRelativeToAnchor

---

positionByRect()

protected positionByRect(rect?): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:202

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

Overrides

Bubble.positionByRect

---

performAction()

performAction(): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:291

Handles the user acting on this bubble via keyboard navigation by focusing the comment editor.

Returns

void

---

dispose()

dispose(): void;

Defined in: packages/blockly/core/bubbles/textinput_bubble.ts:298

Dispose of this bubble.

Returns

void

Overrides

Bubble.dispose