blockly

blockly package

Classes

Class Description
ASTNode Class for an AST node. It is recommended that you use one of the createNode methods instead of creating a node directly.
BasicCursor Class for a basic cursor. This will allow the user to get to all nodes in the AST by hitting next or previous.
Block Class for one block. Not normally called directly, workspace.newBlock() is preferred.
BlockDragger Class for a block dragger. It moves blocks around the workspace when they are being dragged by a mouse or touch.
BlockSvg Class for a block's SVG representation. Not normally called directly, workspace.newBlock() is preferred.
BubbleDragger Class for a bubble dragger. It moves things on the bubble canvas around the workspace when they are being dragged by a mouse or touch. These can be block comments, mutators, warnings, or workspace comments.
CodeGenerator Class for a code generator that translates the blocks into a language.
CollapsibleToolboxCategory Class for a category in a toolbox that can be collapsed.
ComponentManager Manager for all items registered with the workspace.
Connection Class for a connection between blocks.
ConnectionChecker Class for connection type checking logic.
ConnectionDB Database of connections. Connections are stored in order of their vertical component. This way connections in an area may be looked up quickly using a binary search.
ContextMenuRegistry Class for the registry of context menu items. This is intended to be a singleton. You should not create a new instance, and only access this class from ContextMenuRegistry.registry.
Cursor Class for a cursor. A cursor controls how a user navigates the Blockly AST.
DeleteArea Abstract class for a component that can delete a block or bubble that is dropped on top of it.
DragTarget Abstract class for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.
FieldAngle Class for an editable angle field.
FieldCheckbox Class for a checkbox field.
FieldColour Class for a colour input field.
FieldDropdown Class for an editable dropdown field.
FieldImage Class for an image on a block.
FieldLabel Class for a non-editable, non-serializable text field.
FieldLabelSerializable Class for a non-editable, serializable text field.
FieldMultilineInput Class for an editable text area field.
FieldNumber Class for an editable number field.
FieldTextInput Class for an editable text field.
FieldVariable Class for a variable's dropdown field.
FlyoutButton Class for a button or label in the flyout.
FlyoutMetricsManager Calculates metrics for a flyout's workspace. The metrics are mainly used to size scrollbars for the flyout.
Gesture Class for one gesture.
Grid Class for a workspace's grid.
HorizontalFlyout Class for a flyout.
Input Class for an input with optional fields.
InsertionMarkerManager Class that controls updates to connections during drags. It is primarily responsible for finding the closest eligible connection and highlighting or unhighlighting it as needed during a drag.
InsertionMarkerPreviewer
Marker Class for a marker. This is used in keyboard navigation to save a location in the Blockly AST.
MarkerManager Class to manage the multiple markers and the cursor on a workspace.
Menu A basic menu class.
MenuItem Class representing an item in a menu.
MetricsManager The manager for all workspace metrics calculations.
Names Class for a database of entity names (variables, procedures, etc).
Options Parse the user-specified options, using reasonable defaults where behaviour is unspecified.
RenderedConnection Class for a connection between blocks that may be rendered on screen.
Scrollbar Class for a pure SVG scrollbar. This technique offers a scrollbar that is guaranteed to work, but may not look or behave like the system's scrollbars.
ScrollbarPair Class for a pair of scrollbars. Horizontal and vertical.
ShortcutRegistry Class for the registry of keyboard shortcuts. This is intended to be a singleton. You should not create a new instance, and only access this class from ShortcutRegistry.registry.
TabNavigateCursor A cursor for navigating between tab navigable fields.
Theme Class for a theme.
ThemeManager Class for storing and updating a workspace's theme and UI components.
Toolbox Class for a Toolbox. Creates the toolbox's DOM.
ToolboxCategory Class for a category in a toolbox.
ToolboxItem Class for an item in the toolbox.
ToolboxSeparator Class for a toolbox separator. This is the thin visual line that appears on the toolbox. This item is not interactable.
Trashcan Class for a trash can.
UnattachedFieldError Represents an error where the field is trying to access its block or information about its block before it has actually been attached to said block.
VariableMap Class for a variable map. This contains a dictionary data structure with variable types as keys and lists of variables as values. The list of variables are the type indicated by the key.
VariableModel Class for a variable model. Holds information for the variable including name, ID, and type.
VerticalFlyout Class for a flyout.
Workspace Class for a workspace. This is a data structure that contains blocks. There is no UI, and can be created headlessly.
WorkspaceAudio Class for loading, storing, and playing audio for a workspace.
WorkspaceComment Class for a workspace comment.
WorkspaceCommentSvg Class for a workspace comment's SVG representation.
WorkspaceDragger Class for a workspace dragger. It moves the workspace around when it is being dragged by a mouse or touch.
WorkspaceSvg Class for a workspace. This is an onscreen area with optional trashcan, scrollbars, bubbles, and dragging.
ZoomControls Class for a zoom controls.

Abstract Classes

Abstract Class Description
Bubble 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.
Field Abstract class for an editable field.
Flyout Class for a flyout.

Enumerations

Enumeration Description
ConnectionType Enum for the type of a connection or input.
inputTypes Enum for the type of a connection or input.

Functions

Function Description
hasBubble(obj) Type guard that checks whether the given object is a IHasBubble.
hideChaff(opt_onlyClosePopups) Close tooltips, context menus, dropdown selections, etc.
inject(container, opt_options) Inject a Blockly editor into the specified container element (usually a div).
isCopyable(obj)
isIcon(obj) Type guard that checks whether the given object is an IIcon.
isPaster(obj)
isSerializable(obj) Type guard that checks whether the given object is a ISerializable.
isVariableBackedParameterModel(param) Returns whether the given object is a variable holder or not.

Interfaces

Interface Description
BlocklyOptions Blockly options.
FieldAngleConfig Extra configuration options for the angle field.
FieldAngleFromJsonConfig fromJson configuration options for the angle field.
FieldCheckboxConfig Config options for the checkbox field.
FieldCheckboxFromJsonConfig fromJson config options for the checkbox field.
FieldColourConfig Config options for the colour field.
FieldColourFromJsonConfig fromJson config options for the colour field.
FieldConfig Extra configuration options for the base field.
FieldDropdownFromJsonConfig fromJson config for the dropdown field.
FieldImageConfig Config options for the image field.
FieldImageFromJsonConfig fromJson config options for the colour field.
FieldLabelConfig Config options for the label field.
FieldLabelFromJsonConfig fromJson config options for the label field.
FieldMultilineInputConfig Config options for the multiline input field.
FieldMultilineInputFromJsonConfig fromJson config options for the multiline input field.
FieldNumberConfig Config options for the number field.
FieldNumberFromJsonConfig fromJson config options for the number field.
FieldTextInputFromJsonConfig fromJson config options for the text input field.
FieldVariableConfig Config options for the variable field.
FieldVariableFromJsonConfig fromJson config options for the variable field.
IASTNodeLocation An AST node location interface.
IASTNodeLocationSvg An AST node location SVG interface.
IASTNodeLocationWithBlock An AST node location that has an associated block.
IAutoHideable Interface for a component that can be automatically hidden.
IBlockDragger A block dragger interface.
IBoundedElement A bounded element interface.
IBubble A bubble interface.
ICollapsibleToolboxItem Interface for an item in the toolbox that can be collapsed.
IComponent The interface for a workspace component that can be registered with the ComponentManager.
IConnectionChecker Class for connection type checking logic.
IConnectionPreviewer Displays visual "previews" of where a block will be connected if it is dropped.
IContextMenu
ICopyable
IDeletable The interface for an object that can be deleted.
IDeleteArea Interface for a component that can delete a block or bubble that is dropped on top of it.
IDraggable The interface for an object that can be dragged.
IDragTarget Interface for a component with custom behaviour when a block or bubble is dragged over or dropped on top of it.
IFlyout Interface for a flyout.
IHasBubble
IIcon
IKeyboardAccessible An interface for an object that handles keyboard shortcuts.
IMetricsManager Interface for a metrics manager.
IMovable The interface for an object that is movable.
IPaster An object that can paste data into a workspace.
IPositionable Interface for a component that is positioned on top of the workspace.
IRegistrable The interface for a Blockly component that can be registered.
ISelectable The interface for an object that is selectable.
ISelectableToolboxItem Interface for an item in the toolbox that can be selected.
ISerializable
IStyleable Interface for an object that a style can be added to.
IToolbox Interface for a toolbox.
IToolboxItem Interface for an item in the toolbox.
IVariableBackedParameterModel Interface for a parameter model that holds a variable model.

Namespaces

Namespace Description
ASTNode
Block
blockAnimations
blockRendering
browserEvents
bubbles
bumpObjects
clipboard
CollapsibleToolboxCategory
common
ComponentManager
constants
ContextMenu
ContextMenuItems
ContextMenuRegistry
Css
dialog
Events
Extensions
fieldRegistry
geras
icons
ICopyable
Input
inputs
InsertionMarkerManager
libraryBlocks
MetricsManager
minimalist
Names
Options
Procedures
registry
RenderedConnection
renderManagement
serialization
ShortcutItems
ShortcutRegistry
Theme
ThemeManager
Themes
thrasos
ToolboxCategory
ToolboxSeparator
Tooltip
Touch
uiPosition
utils
Variables
VariablesDynamic
WidgetDiv
Xml
zelos

Variables

Variable Description
ALIGN_CENTRE
ALIGN_LEFT
ALIGN_RIGHT
Blocks A mapping of block type names to block prototype objects.
COLLAPSE_CHARS
COLLAPSED_FIELD_NAME
COLLAPSED_INPUT_NAME
config Object holding all the values on Blockly that we expect developers to be able to change.
connectionTypes
defineBlocksWithJsonArray Define blocks from an array of JSON block definitions, as might be generated by the Blockly Developer Tools.
DELETE_VARIABLE_ID
DRAG_STACK
DropDownDiv
DUMMY_INPUT
getMainWorkspace Returns the main workspace. Returns the last used main workspace (based on focus). Try not to use this function, particularly if there are multiple Blockly instances on a page.
getSelected Returns the currently selected copyable object.
INPUT_VALUE
JavaScript
Msg A dictionary of localised messages.
NEXT_STATEMENT
OPPOSITE_TYPE
OUTPUT_VALUE
PREVIOUS_STATEMENT
PROCEDURE_CATEGORY_NAME String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with procedure blocks.
RENAME_VARIABLE_ID
setLocale

Sets the locale (i.e. the localized messages/block-text/etc) to the given locale.

This is not useful/necessary when loading from a script tag, because the messages are automatically cluged into the Blockly.Msg object. But we provide it in both the script-tag and non-script-tag contexts so that the tscompiler can properly create our type definition files.

setParentContainer Set the parent container. This is the container element that the WidgetDiv, dropDownDiv, and Tooltip are rendered into the first time Blockly.inject is called. This method is a NOP if called after the first Blockly.inject.
svgResize Size the SVG image to completely fill its container. Call this when the view actually changes sizes (e.g. on a window resize/device orientation change). See workspace.resizeContents to resize the workspace when the contents change (e.g. when a block is added or removed). Record the height/width of the SVG image.
TOOLBOX_AT_BOTTOM
TOOLBOX_AT_LEFT
TOOLBOX_AT_RIGHT
TOOLBOX_AT_TOP
VARIABLE_CATEGORY_NAME String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with variable blocks.
VARIABLE_DYNAMIC_CATEGORY_NAME String for use in the "custom" attribute of a category in toolbox XML. This string indicates that the category should be dynamically populated with variable blocks.
VERSION Blockly core version. This constant is overridden by the build script (npm run build) to the value of the version in package.json. This is done by the Closure Compiler in the buildCompressed gulp task. For local builds, you can pass --define='Blockly.VERSION=X.Y.Z' to the compiler to override this constant.

Type Aliases

Type Alias Description
FieldAngleValidator A function that is called to validate changes to the field's value before they are set.
FieldCheckboxValidator A function that is called to validate changes to the field's value before they are set.
FieldColourValidator A function that is called to validate changes to the field's value before they are set.
FieldDropdownConfig Config options for the dropdown field.
FieldDropdownValidator A function that is called to validate changes to the field's value before they are set.
FieldMultilineInputValidator A function that is called to validate changes to the field's value before they are set.
FieldNumberValidator A function that is called to validate changes to the field's value before they are set.
FieldTextInputConfig Config options for the text input field.
FieldTextInputValidator A function that is called to validate changes to the field's value before they are set.
FieldValidator A function that is called to validate changes to the field's value before they are set.
FieldVariableValidator A function that is called to validate changes to the field's value before they are set.
MenuGenerator Either an array of menu options or a function that generates an array of menu options for FieldDropdown or its descendants.
MenuGeneratorFunction A function that generates an array of menu options for FieldDropdown or its descendants.
MenuOption An individual option in the dropdown menu. The first element is the human- readable value (text or image), and the second element is the language- neutral value.