AI-generated Key Takeaways
-
Blockly renderers are comprised of several components (Renderer, Constant Provider, Render Info, Path Object, and Drawer) working together to display blocks.
-
Renderers utilize "measurables" to define the layout of a block, which are rectangular regions representing different parts of the block.
-
Blocks are visually structured using rows and elements, with spacers providing spacing between them for better organization.
-
Each component of a renderer has a specific role, such as defining constants, laying out the block, creating SVG paths, and managing the SVG elements.
-
Custom renderers can be built by extending or modifying these components and measurables for unique visual styles and behaviors.
Before you start building a custom renderer, it is helpful to understand the different components that make up a renderer, as well as how a block gets broken up into rows and elements.
Renderer components
A renderer is built up of several different components. Each component has a unique job to maximize code reuse and extensibility.
Renderer
The renderer is a factory class that bundles all of the other components together.
Constant provider
The constant provider is a collection of numbers, and shapes used by all of the other components, as well as built-in fields.
Render info
The render info decides how it a block should be laid out based on its definition, and then creates a collection of measurables and data about the block which the drawer uses to create SVG paths.
Path Object
The path object contains the SVG elements that live in the dom and make up the block.
Drawer
The drawer (as in "one-who-draws") builds SVG paths based on the render info and applies them to the path object.
Block measurables
A measurable is a rectangle representing a region of a block. Measurables are what the render info uses to define the layout of the block.
Some measurables also include extra data (such as the visual thing they are representing), or helper methods that the render info can use to figure out how to lay out the block.
Different renderers may create custom measurables to change these data or helper methods.
Rows
A row is a horizontal collection of elements and element spacers.
Row spacers
A row spacer is an empty vertical space that goes between two rows.
Elements
An element represents a visual thing on a block. These include fields, icons, connections, etc.
Element spacers
An element spacer is an empty space that goes between elements in a row.
