blockly > bubbles > Bubble

bubbles.Bubble class

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.

Signature:

export declare abstract class Bubble implements IBubble, ISelectable, IFocusableNode, IBoundedElement 

Implements: IBubble, ISelectable, IFocusableNode, IBoundedElement

Constructors

Constructor	Modifiers	Description
(constructor)(workspace, anchor, ownerRect, overriddenFocusableElement, owner)		Constructs a new instance of the Bubble class

Properties

Property	Modifiers	Type	Description
ANCHOR_RADIUS	static readonly	(not declared)	Distance between arrow point and anchor point.
anchor	protected	Coordinate
BORDER_WIDTH	static readonly	(not declared)	The width of the border around the bubble.
contentContainer	protected	SVGGElement	The SVG group containing the contents of the bubble.
disposed		boolean	True if the bubble has been disposed, false otherwise.
DOUBLE_BORDER	static readonly	number	Double the width of the border around the bubble.
id		string
MIN_SIZE	static readonly	number	The minimum size the bubble can have.
owner?	protected	(IHasBubble & IFocusableNode) | undefined	(Optional)
ownerRect?	protected	Rect | undefined	(Optional)
svgRoot	protected	SVGGElement	The SVG group containing all parts of the bubble.
TAIL_ANGLE	static readonly	(not declared)	The number of degrees that the tail bends counter-clockwise.
TAIL_BEND	static readonly	(not declared)	The sharpness of the tail's bend. Higher numbers result in smoother tails.
TAIL_THICKNESS	static readonly	(not declared)	The thickness of the base of the tail in relation to the size of the bubble. Higher numbers result in thinner tails.
workspace	readonly	WorkspaceSvg

Methods

Method	Modifiers	Description
canBeFocused()		See IFocusableNode.canBeFocused.
dispose()		Dispose of this bubble.
drag(newLoc)		Drags the bubble to the given location.
endDrag()		Ends the drag on the bubble.
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.
getBoundingRectangle()		Returns the bounds of this bubble.
getColour()	protected	Returns the colour of the background and tail of this bubble.
getFocusableElement()		See IFocusableNode.getFocusableElement.
getFocusableTree()		See IFocusableNode.getFocusableTree.
getOwner()		Returns the object that owns/hosts this bubble, if any.
getSize()	protected
isMovable()		Returns whether this bubble is movable or not.
moveBy(dx, dy, _reason)		Moves the bubble by the given amounts in the x and y directions.
onKeyDown(e)	protected	Handles key events when this bubble is focused. By default, closes the bubble on Escape.
onNodeBlur()		See IFocusableNode.onNodeBlur.
onNodeFocus()		See IFocusableNode.onNodeFocus.
positionByRect(rect)	protected	Positions the bubble "optimally" so that the most of it is visible and it does not overlap the rect (if provided).
positionRelativeToAnchor()	protected	Positions the bubble relative to its anchor. Does not render its tail.
recomputeAriaContext()	protected	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.
revertDrag()		Moves the bubble back to where it was at the start of a drag.
select()
setAnchorLocation(anchor, relayout)		Set the location the tail of this bubble points to.
setAriaLabelProvider(provider)		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.
setColour(colour)		Sets the colour of the background and tail of this bubble.
setDragging(_start)
setPositionRelativeToAnchor(left, top)		Sets the position of this bubble relative to its anchor.
setSize(size, relayout)	protected	Sets the size of this bubble, including the border.
startDrag()		Starts a drag on the bubble.
unselect()