Home > 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
Implements: IBubble, ISelectable, IFocusableNode
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. | |
| 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. | |
| 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. |
| 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. | |
| 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() |