DOCSEARCHbyAlgolia
Submit Docs

Blockly API Reference

website·Indexed 33 days ago

https://docs.blockly.com/

Technical reference documentation for the Blockly library, covering core namespaces, classes, and utilities. Includes detailed API specifications for XML handling, SVG path and math utilities, toolbox interfaces, and renderer-specific classes such as those in the zelos namespace.

Tokens
469.7K
Snippets
3.6K
Records
5.1K
Agent score
69%

What's inside Blockly

  1. Overview of the FieldCheckbox class

    The FieldCheckbox class in Blockly is used to create a checkbox field within a block. It extends the base Field class and is specifically designed to handle boolean values (CheckboxBool).
    // FieldCheckbox extends Field<CheckboxBool>

  2. Overview of WorkspaceCommentNavigationPolicy

    The WorkspaceCommentNavigationPolicy class provides a set of rules that control how keyboard navigation behaves when interacting with a RenderedWorkspaceComment. It implements the INavigationPolicy interface.
    const policy = new WorkspaceCommentNavigationPolicy();

  3. Overview of Geras renderer classes

    The Geras renderer provides a set of classes for drawing blocks and managing rendering information. It is designed for backwards compatibility with pre-2019 Blockly. For newer projects without backwards compatibility constraints, the Thrasos renderer is recommended.

  4. Overview of IconNavigationPolicy

    The IconNavigationPolicy class provides a set of rules that control how keyboard navigation behaves when interacting with icons. It implements the INavigationPolicy<Icon> interface, allowing the system to determine how to move focus to parents, children, or siblings of an icon.

  6. Overview of Blockly Event Classes

    The Blockly.Events namespace provides a variety of event classes used to notify listeners about changes within the Blockly workspace. These events are categorized by the type of element they affect:

    • Block Events: BlockBase (abstract), BlockChange (field/comment changes), BlockCreate, BlockDelete, BlockDrag, BlockFieldIntermediateChange, and BlockMove.
    • Comment Events: CommentBase (abstract), CommentChange, CommentCollapse, CommentCreate, CommentDelete, CommentDrag, CommentMove, and CommentResize.
    • Variable Events: VarBase (abstract), VarCreate, and VarDelete.
    • UI and Interaction Events: UiBase (base class for non-persistent UI events like zooming or scrolling), Click, Selected, ThemeChange, ToolboxItemSelect, BubbleOpen, and TrashcanOpen.

    UiBase events are specifically designed for actions that do not need to be synchronized for multi-user editing and do not support undo/redo operations.

  7. Overview of the FieldDropdown class

    The FieldDropdown class in Blockly is used to create an editable dropdown field within a block. It extends the base Field class and is further extended by FieldVariable. It handles the rendering and logic for a selectable list of options, including support for separators and ARIA-friendly labels.

  8. Overview of Blockly block-code generators

    A block-code generator is a JavaScript function that generates a code string for a specific block. The return type depends on the block's nature:

    • Value blocks: Act like expressions; they generate strings containing expressions and must return an array containing the code string and the precedence of the weakest operator.
    • Statement blocks: Act like statements; they generate strings containing statements and return the code string directly.

    Every block-code generator typically follows these steps:

    1. Import a language code generator.
    2. Retrieve and transform field values.
    3. Retrieve code from inner blocks (value and statement inputs).
    4. Build and return the final code string.

  9. Overview of the IProcedureMap interface

    The IProcedureMap interface extends the standard JavaScript Map<string, IProcedureModel>. It is used to store and manage procedure models so that Blockly blocks can locate and reference them. It inherits all standard Map properties and methods (such as size, clear, delete, forEach, get, has, set, and various iterators).

  10. Overview of LabelFlyoutInflater

    The LabelFlyoutInflater class is responsible for creating labels for flyouts in Blockly. It implements the IFlyoutInflater interface and provides methods to load labels from a state, determine spacing, and dispose of label items.
    const inflater = new LabelFlyoutInflater();

  11. Overview of the Blockly Workspace class

    The Workspace class is the primary data structure used in Blockly to contain blocks. It is designed to be decoupled from the UI, meaning it can be created and operated headlessly.