Procesadores

Un procesador en Blockly controla la forma de un bloque, lo que incluye la altura, el relleno, el grosor del borde y la forma de conexión.

Procesadores personalizados

Si deseas personalizar la forma de los bloques, deberás crear un procesador personalizado. Para obtener más información sobre este proceso, completa el codelab o lee la documentación de referencia. Puede resultar útil leer el código de cualquiera de los procesadores integrados de Blockly para comprender cómo funcionan.

Para crear un procesador personalizado, debes hacer lo siguiente:

1. Define un nuevo procesador. Puedes subclasificar la clase de procesador base o cualquiera de los procesadores existentes según la ubicación desde la que desees comenzar.
2. Anula las partes que quieras cambiar.
   1. Por ejemplo, para agregar más padding a los bloques, puedes crear una subclase de ConstantProvider (de nuevo, ya sea la base o cualquier procesador existente) y anular la constante relevante. Todos los demás valores permanecerán iguales que la clase base elegida.
   2. En tu subclase Renderer personalizada, debes conectar la nueva clase ConstantProvider. Anula la función makeConstants_ para mostrar una instancia nueva de tu ConstantProvider personalizado en lugar de la clase base.
   3. Sigue el mismo proceso cuando anules otras clases, como PathObject o Drawer.

3. Registra el procesador:

   Blockly.blockRendering.register('custom_renderer', CustomRenderer);
   

4. Usa el procesador en tu aplicación:

   Blockly.inject('blocklyDiv', {
     renderer: 'custom_renderer'
   });
   

Procesadores integrados

Blockly proporciona varios procesadores compilados previamente. Puedes usarlos sin modificaciones o como base de un procesador personalizado.

• geras (predeterminado)
• thrasos (versión más moderna de las geras)
• zelos (similar a Scratch)
• minimalist (las clases de procesador base)

Para usar uno de estos renderizadores, pasa el nombre a las opciones de inserción:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

Para subclasificarlas, extiende las clases correspondientes:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}