Interface: IDraggable
Defined in: packages/blockly/core/interfaces/i_draggable.ts:20
Represents an object that can be dragged.
Extends
Extended by
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 | Returns the current location of the draggable in workspace coordinates. |
| 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
workspace
workspace: WorkspaceSvg;
Defined in: packages/blockly/core/interfaces/i_selectable.ts:23
Inherited from
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
Object with coordinates of the bounded element.
Inherited from
IBoundedElement.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
getRelativeToSurfaceXY()
getRelativeToSurfaceXY(): Coordinate;
Defined in: packages/blockly/core/interfaces/i_draggable.ts:27
Returns the current location of the draggable in workspace coordinates.
Returns
Coordinate of current location on workspace.
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
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
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
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
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
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
ISelectable.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
The node's IFocusableTree.
Inherited from
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
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
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
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
select()
select(): void;
Defined in: packages/blockly/core/interfaces/i_selectable.ts:26
Select this. Highlight it visually.
Returns
void
Inherited from
unselect()
unselect(): void;
Defined in: packages/blockly/core/interfaces/i_selectable.ts:29
Unselect this. Unhighlight it visually.
Returns
void