Blockly
The top level namespace used to access the Blockly library.
Classes
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.
BlockDragSurfaceSvg
Class for a drag surface for the currently dragged block. This is a separate SVG that contains only the currently moving block, or nothing.
BlockSvg
Class for a block's SVG representation. Not normally called directly, workspace.newBlock() is preferred.
Bubble
Class for UI bubble.
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.
CollapsibleToolboxCategory
Class for a category in a toolbox that can be collapsed.
Comment
Class for a comment.
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 Blockly.ContextMenuRegistry.registry.
Cursor
Class for a cursor. A cursor controls how a user navigates the Blockly AST.
DropDownDiv
Class for drop-down div.
Field
Abstract class for an editable field.
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.
Flyout
Class for a flyout.
FlyoutButton
Class for a button in the flyout.
FlyoutCursor
Class for a flyout cursor. This controls how a user navigates blocks in the flyout.
FlyoutDragger
Class for a flyout dragger. It moves a flyout workspace around when it is being dragged by a mouse or touch. Note that the workspace itself manages whether or not it has a drag surface and how to do translations based on that. This simply passes the right commands based on events.
Generator
Class for a code generator that translates the blocks into a language.
Gesture
Class for one gesture.
Grid
Class for a workspace's grid.
HorizontalFlyout
Class for a flyout.
Icon
Class for an icon.
Input
Class for an input with an optional field.
InsertionMarkerManager
Class that controls updates to connections during drags. It is primarily responsible for finding the closest eligible connection and highlighting or unhiglighting it as needed during a drag.
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.
Mutator
Class for a mutator dialog.
Names
Class for a database of entity names (variables, functions, 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 Blockly.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.
TouchGesture
Class for one gesture.
Trashcan
Class for a trash can.
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.
Warning
Class for a warning.
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. Note that the workspace itself manages whether or not it has a drag surface and how to do translations based on that. This simply passes the right commands based on events.
WorkspaceDragSurfaceSvg
Blocks are moved into this SVG during a drag, improving performance. The entire SVG is translated using CSS transforms instead of SVG so the blocks are never repainted during drag improving performance.
WorkspaceSvg
Class for a workspace. This is an onscreen area with optional trashcan, scrollbars, bubbles, and dragging.
ZoomControls
Class for a zoom controls.
Interfaces
BlocklyOptions
IASTNodeLocation
IASTNodeLocationSvg
IASTNodeLocationWithBlock
IBlocklyActionable
IBoundedElement
IBubble
ICollapsibleToolboxItem
IConnectionChecker
IContextMenu
ICopyable
IDeletable
IDeleteArea
IFlyout
IMovable
IRegistrable
ISelectable
ISelectableToolboxItem
IStyleable
IToolbox
IToolboxItem
Namespaces
blockRendering
ContextMenu
ContextMenuItems
ContextMenuRegistry
Css
Events
Extensions
Procedures
ShortcutItems
Tooltip
Touch
utils
Variables
WidgetDiv
Xml
Properties
ALIGN_CENTRE
ENUM for centre alignment.
ALIGN_LEFT
ENUM for left alignment.
ALIGN_RIGHT
ENUM for right alignment.
Blocks
A mapping of block type names to block prototype objects.
Blocks
non-null Object with Object properties
A mapping of block type names to block prototype objects.
BUMP_DELAY
Delay in ms between trigger and bumping unconnected block out of alignment.
BUMP_RANDOMNESS
Maximum randomness in workspace units for bumping a block.
COLLAPSE_CHARS
Number of characters to truncate a collapsed block to.
CONNECTING_SNAP_RADIUS
Maximum misalignment between connections for them to snap together, when a connection is already highlighted.
CURRENT_CONNECTION_PREFERENCE
How much to prefer staying connected to the current connection over moving to a new connection. The current previewed connection is considered to be this much closer to the matching connection on the block than it actually is.
DELETE_AREA_NONE
ENUM representing that an event is not in any delete areas. Null for backwards compatibility reasons.
DELETE_AREA_TOOLBOX
ENUM representing that an event is in the delete area of the toolbox or flyout.
DELETE_AREA_TRASH
ENUM representing that an event is in the delete area of the trash can.
DELETE_VARIABLE_ID
string
String for use in the dropdown created in field_variable. This string indicates that this option in the dropdown is 'Delete the "%1" variable' and if selected, should trigger the prompt to delete a variable.
DRAG_BEGIN
ENUM for inside the non-sticky DRAG_RADIUS, for differentiating between clicks and drags.
DRAG_FREE
ENUM for freely draggable (outside the DRAG_RADIUS, if one applies).
DRAG_NONE
ENUM for no drag operation.
DRAG_RADIUS
Number of pixels the mouse must move before a drag starts.
DRAG_STACK
When dragging a block out of a stack, split the stack in two (true), or drag out the block healing the stack (false).
DRAG_STICKY
ENUM for inside the sticky DRAG_RADIUS.
draggingConnections
non-null Array of non-null Blockly.Connection
All of the connections on blocks that are currently being dragged.
DUMMY_INPUT
ENUM for an dummy input. Used to add field(s) with no input.
FLYOUT_DRAG_RADIUS
Number of pixels the mouse must move before a drag/scroll starts from the flyout. Because the drag-intention is determined when this is reached, it is larger than Blockly.DRAG_RADIUS so that the drag-direction is clearer.
HSV_SATURATION
The richness of block colours, regardless of the hue. Must be in the range of 0 (inclusive) to 1 (exclusive).
HSV_VALUE
The intensity of block colours, regardless of the hue. Must be in the range of 0 (inclusive) to 1 (exclusive).
INPUT_VALUE
ENUM for a right-facing value input. E.g. 'set item to' or 'return'.
LINE_MODE_MULTIPLIER
number
The multiplier for scroll wheel deltas using the line delta mode.
LONGPRESS
Length in ms for a touch to become a long press.
mainWorkspace
The main workspace most recently used. Set by Blockly.WorkspaceSvg.prototype.markFocused
mainWorkspace
non-null Blockly.Workspace
NEXT_STATEMENT
ENUM for a down-facing block stack. E.g. 'if-do' or 'else'.
OPPOSITE_TYPE
Lookup table for determining the opposite type of a connection.
OUTPUT_VALUE
ENUM for a left-facing value output. E.g. 'random fraction'.
PAGE_MODE_MULTIPLIER
number
The multiplier for scroll wheel deltas using the page delta mode.
parentContainer
nullable Element
Container element to render the WidgetDiv, DropDownDiv and Tooltip.
PREVIOUS_STATEMENT
ENUM for an up-facing block stack. E.g. 'break out of loop'.
PROCEDURE_CATEGORY_NAME
string
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
string
String for use in the dropdown created in field_variable. This string indicates that this option in the dropdown is 'Rename variable...' and if selected, should trigger the prompt to rename a variable.
selected
nullable Blockly.ICopyable
Currently selected block.
selected
non-null Blockly.BlockSvg
selected
non-null Blockly.ICopyable
selected
non-null Blockly.ICopyable
selected
non-null Blockly.BlockSvg
SNAP_RADIUS
Maximum misalignment between connections for them to snap together.
SOUND_LIMIT
Prevent a sound from playing if another sound preceded it within this many milliseconds.
SPRITE
Sprited icons and images.
TOOLBOX_AT_BOTTOM
ENUM for toolbox and flyout at bottom of screen.
TOOLBOX_AT_LEFT
ENUM for toolbox and flyout at left of screen.
TOOLBOX_AT_RIGHT
ENUM for toolbox and flyout at right of screen.
TOOLBOX_AT_TOP
ENUM for toolbox and flyout at top of screen.
VARIABLE_CATEGORY_NAME
string
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
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
string
Blockly core version. This constant is overridden by the build script (build.py) to the value of the version in package.json. This is done during the gen_core build step. For local builds, you can pass --define='Blockly.VERSION=X.Y.Z' to the compiler to override this constant.
Methods
alert
alert(message, opt_callback)
Wrapper to window.alert() that app developers may override to provide alternatives to the modal browser window.
Parameter |
|
---|---|
message |
string The message to display to the user. |
opt_callback |
Optional function() The callback when the alert is dismissed. |
bindEvent_
bindEvent_(node, name, thisObject, func) returns Blockly.EventData
Bind an event to a function call. Handles multitouch events by using the
coordinates of the first changed touch, and doesn't do any safety checks for
simultaneous event processing. In most cases prefer is to use
Blockly.bindEventWithChecks_
.
Parameter |
|
---|---|
node |
EventTarget Node upon which to listen. Value must not be null. |
name |
string Event name to listen to (e.g. 'mousedown'). |
thisObject |
Object The value of 'this' in the function. |
func |
function() Function to call when event is triggered. Value must not be null. |
- Returns
-
non-null Blockly.EventData
Opaque data that can be passed to unbindEvent_.
bindEventWithChecks_
bindEventWithChecks_(node, name, thisObject, func, opt_noCaptureIdentifier, opt_noPreventDefault) returns Blockly.EventData
Bind an event to a function call. When calling the function, verifies that it belongs to the touch stream that is currently being processed, and splits multitouch events into multiple events as needed.
Parameter |
|
---|---|
node |
EventTarget Node upon which to listen. Value must not be null. |
name |
string Event name to listen to (e.g. 'mousedown'). |
thisObject |
Object The value of 'this' in the function. |
func |
function() Function to call when event is triggered. Value must not be null. |
opt_noCaptureIdentifier |
Optional boolean True if triggering on this event should not block execution of other event handlers on this touch or other simultaneous touches. False by default. |
opt_noPreventDefault |
Optional boolean True if triggering on this event should prevent the default handler. False by default. If opt_noPreventDefault is provided, opt_noCaptureIdentifier must also be provided. |
- Returns
-
non-null Blockly.EventData
Opaque data that can be passed to unbindEvent_.
checkBlockColourConstants
checkBlockColourConstants()
Checks old colour constants are not overwritten by the host application. If a constant is overwritten, it prints a console warning directing the developer to use the equivalent Msg constant.
confirm
confirm(message, callback)
Wrapper to window.confirm() that app developers may override to provide alternatives to the modal browser window.
Parameter |
|
---|---|
message |
string The message to display to the user. |
callback |
function(boolean) The callback for handling user response. Value must not be null. |
copy
copy(toCopy)
Copy a block or workspace comment onto the local clipboard.
Parameter |
|
---|---|
toCopy |
Block or Workspace Comment to be copied. Value must not be null. |
defineBlocksWithJsonArray
defineBlocksWithJsonArray(jsonArray)
Define blocks from an array of JSON block definitions, as might be generated by the Blockly Developer Tools.
Parameter |
|
---|---|
jsonArray |
Array of non-null Object An array of JSON block definitions. Value must not be null. |
deleteBlock
deleteBlock(selected)
Delete the given block.
Parameter |
|
---|---|
selected |
The block to delete. Value must not be null. |
duplicate
duplicate(toDuplicate)
Duplicate this block and its children, or a workspace comment.
Parameter |
|
---|---|
toDuplicate |
Block or Workspace Comment to be copied. Value must not be null. |
getMainWorkspace
getMainWorkspace() returns Blockly.Workspace
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.
- Returns
-
non-null Blockly.Workspace
The main workspace.
hideChaff
hideChaff(opt_allowToolbox)
Close tooltips, context menus, dropdown selections, etc.
Parameter |
|
---|---|
opt_allowToolbox |
Optional boolean If true, don't close the toolbox. |
hueToHex
hueToHex(hue) returns string
Convert a hue (HSV model) into an RGB hex triplet.
Parameter |
|
---|---|
hue |
number Hue on a colour wheel (0-360). |
- Returns
-
string
RGB code, e.g. '#5ba65b'.
inject
inject(container, opt_options) returns Blockly.WorkspaceSvg
Inject a Blockly editor into the specified container element (usually a div).
Parameter |
|
---|---|
container |
(Element or string) Containing element, or its ID, or a CSS selector. |
opt_options |
Optional Optional dictionary of options. |
- Returns
-
non-null Blockly.WorkspaceSvg
Newly created main workspace.
isNumber
isNumber(str) returns boolean
Is the given string a number (includes negative and decimals).
Parameter |
|
---|---|
str |
string Input string. |
- Returns
-
boolean
True if number, false otherwise.
longStart
longStart(e, gesture)
Context menus on touch devices are activated using a long-press. Unfortunately the contextmenu touch event is currently (2015) only supported by Chrome. This function is fired on any touchstart event, queues a task, which after about a second opens the context menu. The tasks is killed if the touch event terminates early.
Parameter |
|
---|---|
e |
Event Touch start event. Value must not be null. |
gesture |
The gesture that triggered this longStart. |
longStop_
longStop_()
Nope, that's not a long-press. Either touchend or touchcancel was fired, or a drag hath begun. Kill the queued long-press task.
onKeyDown
onKeyDown(e)
Handle a key-down on SVG drawing surface. Does nothing if the main workspace is not visible.
Parameter |
|
---|---|
e |
KeyboardEvent Key down event. Value must not be null. |
paste
paste() returns boolean
Paste a block or workspace comment on to the main workspace.
- Returns
-
boolean
True if the paste was successful, false otherwise.
prompt
prompt(message, defaultValue, callback)
Wrapper to window.prompt() that app developers may override to provide alternatives to the modal browser window. Built-in browser prompts are often used for better text input experience on mobile device. We strongly recommend testing mobile when overriding this.
Parameter |
|
---|---|
message |
string The message to display to the user. |
defaultValue |
string The value to initialize the prompt with. |
callback |
function(nullable string) The callback for handling user response. Value must not be null. |
resizeSvgContents
resizeSvgContents(workspace)
Size the workspace when the contents change. This also updates scrollbars accordingly.
Parameter |
|
---|---|
workspace |
The workspace to resize. Value must not be null. |
setParentContainer
setParentContainer(container)
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
.
Parameter |
|
---|---|
container |
Element The container element. Value must not be null. |
svgResize
svgResize(workspace)
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 Blockly.resizeSvgContents 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.
Parameter |
|
---|---|
workspace |
Any workspace in the SVG. Value must not be null. |
svgSize
svgSize(svg) returns Blockly.utils.Size
Returns the dimensions of the specified SVG image.
Parameter |
|
---|---|
svg |
SVGElement SVG image. Value must not be null. |
- Returns
-
non-null Blockly.utils.Size
Contains width and height properties.
unbindEvent_
unbindEvent_(bindData) returns function()
Unbind one or more events event from a function call.
Parameter |
|
---|---|
bindData |
Array of non-null Array Opaque data from bindEvent_. This list is emptied during the course of calling this function. Value must not be null. |
- Returns
-
non-null function()
The function call.
Abstract types
EventData
non-null Array of non-null Array
Blockly opaque event data used to unbind events when using
Blockly.bindEvent_
and Blockly.bindEventWithChecks_
.
IRegistrableField
{fromJson:Blockly.IRegistrableField.fromJson}
A registrable field. Note: We are not using an interface here as we are interested in defining the static methods of a field rather than the instance methods.