Zoom option

  • Blockly's main workspace can be zoomed, either dynamically by the user or statically by the developer.

  • Zoom settings are configured through an object within Blockly's configuration options.

  • Several options like controls, wheel, startScale, maxScale, minScale, scaleSpeed, and pinch are available to customize the zoom behavior.

Blockly's main workspace may be scalable, either dynamically by the user, or statically by the developer.

The zoom settings are defined by an object that is part of Blockly's configuration options. Here is an example:

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     zoom:
         {controls: true,
          wheel: true,
          startScale: 1.0,
          maxScale: 3,
          minScale: 0.3,
          scaleSpeed: 1.2,
          pinch: true},
     trashcan: true});

controls

Set to true to show zoom-centre, zoom-in, and zoom-out buttons. Defaults to false.

The zoom-centre, zoom-in, and zoom-out buttons.

wheel

Set to true to allow the mouse wheel to zoom. Defaults to false.

startScale

Initial magnification factor. For applications with multiple levels, startScale is often set to a higher value on the first level, then incrementally decreased as subsequent levels become more complex. Defaults to 1.0.

maxScale

Maximum multiplication factor for how far one can zoom in. Defaults to 3.

minScale

Minimum multiplication factor for how far one can zoom out. Defaults to 0.3.

scaleSpeed

For each zooming in-out step the scale is multiplied or divided respectively by the scale speed, this means that: scale = scaleSpeed ^ steps. Note that in this formula steps of zoom-out are subtracted and zoom-in steps are added. Defaults to 1.2.

pinch

Set to true to enable pinch to zoom support on touch devices. Defaults to true if either the wheel or controls option is set to true.