A library of common utilities for Blockly extension development.
toolboxSimple
: XML for an always-open flyout with no categories.toolboxCategories
: XML for a toolbox with multiple categories and all of the default blocks.DebugRenderer
: A visualizer for debugging custom renderers.npm install @blockly/dev-tools -D --save
Blockly built-in Simple and Category toolboxes.
import * as Blockly from 'blockly';
import {toolboxSimple, toolboxCategories} from '@blockly/dev-tools';
Blockly.inject('blocklyDiv', {
toolbox: toolboxCategories
});
The debug renderer is a helpful tool to debug blocks when building a custom renderer.
import {DebugRenderer} from '@blockly/dev-tools';
// Initialize the debug renderer.
DebugRenderer.init();
Add GUI controls to adjust Blockly workspace options with a dat.GUI interface.
import {addGUIControls} from '@blockly/dev-tools';
const defaultOptions = {
...
};
addGUIControls((options) => {
return Blockly.inject('blocklyDiv', options);
}, defaultOptions);
The populateRandom
function adds random blocks to a workspace. Blocks are selected from the full set of defined blocks. Pass in a worskpace and how many blocks should be created.
import {populateRandom} from '@blockly/dev-tools';
// Add 10 random blocks to the workspace.
populateRandom(workspace, 10);
Apache 2.0