Blockly
The top level namespace used to access the Blockly library.
Classes
Action
Class for a single action. An action describes user intent. (ex go to next or go to previous)
ASTNode
Class for an AST node. It is recommended that you use one of the createNode methods instead of creating a node directly.
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.
Comment
Class for a comment.
Component
Default implementation of a UI component. Similar to Closure's goog.ui.Component.
Connection
Class for a connection between blocks.
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.
Cursor
Class for a cursor. A cursor controls how a user navigates the Blockly AST.
CursorSvg
Class for a cursor.
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.
FieldDate
Class for a date 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.
MarkerCursor
Class for a marker. This is used in keyboard navigation to save a location in the Blockly AST.
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.
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.
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.
Namespaces
blockRendering
ContextMenu
Css
Events
Extensions
Procedures
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.
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.
cursor
Current cursor.
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.
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'.
INSERTION_MARKER_COLOUR
The main colour of insertion markers, in hex. The block is rendered a transparent grey by changing the fill opacity in CSS.
keyboardAccessibilityMode
boolean
Whether or not we're currently in keyboard accessibility mode.
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
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.
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
Currently selected block.
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 Array of non-null Array
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.
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. |
- Deprecated
- in favor of bindEventWithChecks_, but preserved for external users.
- Returns
-
non-null Array of non-null Array
Opaque data that can be passed to unbindEvent_.
bindEventWithChecks_
bindEventWithChecks_(node, name, thisObject, func, opt_noCaptureIdentifier, opt_noPreventDefault) returns Array of non-null Array
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 Array of non-null Array
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. |
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. |
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.Workspace
Inject a Blockly editor into the specified container element (usually a div).
Parameter |
|
---|---|
container |
(non-null Element or string) Containing element, or its ID, or a CSS selector. |
opt_options |
Optional Object Optional dictionary of options. |
- Returns
-
non-null Blockly.Workspace
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.
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.
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(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. |
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 Object
Returns the dimensions of the specified SVG image.
Parameter |
|
---|---|
svg |
Element SVG image. Value must not be null. |
- Returns
-
non-null Object
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.