Namespace: Blockly

Blockly

namespace

The top level namespace used to access the Blockly library.

Classes

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.

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.

DraggedConnectionManager

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.

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 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.

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.

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.

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

ContextMenu

Css

Events

Extensions

Procedures

Tooltip

Touch

utils

Variables

WidgetDiv

Xml

Properties

ALIGN_CENTRE

constant   static

ENUM for centre alignment.

ALIGN_LEFT

constant   static

ENUM for left alignment.

ALIGN_RIGHT

constant   static

ENUM for right alignment.

Blocks

static

A mapping of block type names to block prototype objects.

BUMP_DELAY

static

Delay in ms between trigger and bumping unconnected block out of alignment.

BUMP_RANDOMNESS

static

Maximum randomness in workspace units for bumping a block.

COLLAPSE_CHARS

static

Number of characters to truncate a collapsed block to.

CONNECTING_SNAP_RADIUS

static

Maximum misalignment between connections for them to snap together, when a connection is already highlighted.

CURRENT_CONNECTION_PREFERENCE

static

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

constant   static

ENUM representing that an event is not in any delete areas. Null for backwards compatibility reasons.

DELETE_AREA_TOOLBOX

constant   static

ENUM representing that an event is in the delete area of the toolbox or flyout.

DELETE_AREA_TRASH

constant   static

ENUM representing that an event is in the delete area of the trash can.

DELETE_VARIABLE_ID

constant   static

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

constant   static

ENUM for inside the non-sticky DRAG_RADIUS, for differentiating between clicks and drags.

DRAG_FREE

constant   static

ENUM for freely draggable (outside the DRAG_RADIUS, if one applies).

DRAG_NONE

constant   static

ENUM for no drag operation.

DRAG_RADIUS

static

Number of pixels the mouse must move before a drag starts.

DRAG_STACK

static

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

constant   static

ENUM for inside the sticky DRAG_RADIUS.

DUMMY_INPUT

constant   static

ENUM for an dummy input. Used to add field(s) with no input.

FLYOUT_DRAG_RADIUS

static

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

static

The richness of block colours, regardless of the hue. Must be in the range of 0 (inclusive) to 1 (exclusive).

HSV_VALUE

static

The intensity of block colours, regardless of the hue. Must be in the range of 0 (inclusive) to 1 (exclusive).

HTML_NS

constant   static

Required name space for HTML elements.

INPUT_VALUE

constant   static

ENUM for a right-facing value input. E.g. 'set item to' or 'return'.

INSERTION_MARKER_COLOUR

static

The main colour of insertion markers, in hex. The block is rendered a transparent grey by changing the fill opacity in CSS.

LINE_MODE_MULTIPLIER

static

number

The multiplier for scroll wheel deltas using the line delta mode.

LONGPRESS

static

Length in ms for a touch to become a long press.

mainWorkspace

static

Blockly.Workspace

The main workspace most recently used. Set by Blockly.WorkspaceSvg.prototype.markFocused

NEXT_STATEMENT

constant   static

ENUM for a down-facing block stack. E.g. 'if-do' or 'else'.

OPPOSITE_TYPE

constant   static

Lookup table for determining the opposite type of a connection.

OUTPUT_VALUE

constant   static

ENUM for a left-facing value output. E.g. 'random fraction'.

PAGE_MODE_MULTIPLIER

static

number

The multiplier for scroll wheel deltas using the page delta mode.

PREVIOUS_STATEMENT

constant   static

ENUM for an up-facing block stack. E.g. 'break out of loop'.

PROCEDURE_CATEGORY_NAME

constant   static

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

constant   static

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

static

Blockly.Block

Currently selected block.

SNAP_RADIUS

static

Maximum misalignment between connections for them to snap together.

SOUND_LIMIT

static

Prevent a sound from playing if another sound preceded it within this many milliseconds.

SPRITE

static

Sprited icons and images.

SVG_NS

constant   static

Required name space for SVG elements.

TOOLBOX_AT_BOTTOM

constant   static

ENUM for toolbox and flyout at bottom of screen.

TOOLBOX_AT_LEFT

constant   static

ENUM for toolbox and flyout at left of screen.

TOOLBOX_AT_RIGHT

constant   static

ENUM for toolbox and flyout at right of screen.

TOOLBOX_AT_TOP

constant   static

ENUM for toolbox and flyout at top of screen.

VARIABLE_CATEGORY_NAME

constant   static

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

constant   static

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.

Methods

addChangeListener

static

addChangeListener(func) returns Array of non-null Array

When something in Blockly's workspace changes, call a function.

Parameter
func	function() Function to call. Value must not be null.

Deprecated

April 2015

Returns

non-null Array of non-null Array Opaque data that can be passed to removeChangeListener.

alert

static

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_

static

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_

static

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

package   static

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

static

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

static

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

static

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.

getTheme

static

getTheme() returns Blockly.Theme

Gets the theme.

Returns

Blockly.Theme Theme for Blockly.

hideChaff

static

hideChaff(opt_allowToolbox)

Close tooltips, context menus, dropdown selections, etc.

Parameter
opt_allowToolbox	Optional boolean If true, don't close the toolbox.

hueToRgb

static

hueToRgb(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

static

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

static

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.

prompt

static

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

static

resizeSvgContents(workspace)

Size the workspace when the contents change. This also updates scrollbars accordingly.

Parameter
workspace	Blockly.WorkspaceSvg The workspace to resize. Value must not be null.

setTheme

static

setTheme(theme)

Sets the theme for Blockly and refreshes all blocks in the toolbox and workspace.

Parameter
theme	Blockly.Theme Theme for Blockly. Value must not be null.

svgResize

static

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	Blockly.WorkspaceSvg Any workspace in the SVG. Value must not be null.

svgSize

static

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_

static

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.

updateToolbox

static

updateToolbox(tree)

Modify the block tree on the existing toolbox.

Parameter
tree	(Node or string) DOM tree of blocks, or text representation of same.

Deprecated

April 2015