Define bloques

Las definiciones de bloques describen cómo se ve y se comporta un bloque, lo que incluye el texto, el color, la forma y los otros bloques a los que se puede conectar.

Comparación entre el formato JSON y la API de JavaScript

Blockly tiene dos formas de definir bloques: objetos JSON y funciones de JavaScript. El formato JSON está diseñado para simplificar la localización durante el desarrollo para idiomas con diferentes órdenes. Se prefiere el formato JSON método de definición de bloques.

Sin embargo, el formato JSON no puede definir directamente las funciones avanzadas, como como mutadores o validadores. Estos se deben escribir en JavaScript, generalmente como extensiones.

Las apps que usan la implementación original de JavaScript de Blockly también pueden escribir las definiciones de bloqueo directamente a las llamadas a la función de la API de Blockly de nivel inferior, como se muestra en los distintos ejemplos de JavaScript que aparecen a continuación.

JSON

Blockly.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

La función init crea la forma del bloque. En el contexto de este función, la palabra clave this es el bloque que se está creando.

En ambos ejemplos se carga el mismo valor de “string_length” bloque.

En la Web, el formato JSON se carga con la función initJson. Esto también permite combinar los dos formatos en las páginas web de Blockly. Sí que prefieras definir tu bloque con JSON siempre que sea posible y usar JavaScript. solo para las partes de las definiciones de bloque que JSON no admite.

A continuación, se muestra un ejemplo de un bloque que se define predominantemente con JSON, pero se extiende con la API de JavaScript para mostrar información dinámica sobre la herramienta.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

Color del bloque

El color principal de un bloque se define con la propiedad colour de JSON, el función block.setColour(..), o puedes usar temas y definir un bloque estilo.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Consulta la guía de colores de los bloques. para obtener más información.

Conexiones de sentencias

Los usuarios pueden crear secuencias de bloques con nextStatement y previousStatement conectores. En el diseño estándar de Blockly, estas conexiones están en la parte superior e inferior, con los bloques apilados verticalmente.

Un bloque con un conector anterior no puede tener un conector de salida y viceversa. El término bloque de sentencias se refiere a un bloque sin valor de salida. Por lo general, un bloque de sentencias una conexión anterior y una siguiente.

Las conexiones nextStatement y previousStatement se pueden escrito, pero los bloques estándar no utilizan esta función.

Próxima conexión

Crea un punto en la parte inferior del bloque, de modo que se puedan usar otras sentencias apilados debajo de él. Un bloque con una conexión siguiente, pero sin una conexión anterior por lo general, representa un evento y se puede configurar para que se renderice con un sombrero.

JSON

Sin tipo:

{
  ...,
  "nextStatement": null,
}

Escrito (poco frecuente):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Sin tipo:

this.setNextStatement(true);  // false implies no next connector, the default

Escrito (poco frecuente):

this.setNextStatement(true, 'Action');

Conexión anterior

Crea un recorte en la parte superior del bloque para que se pueda conectar como una pila. de los enunciados.

Los bloques con una conexión anterior no pueden tener una conexión de salida.

JSON

Sin tipo:

{
  ...,
  "previousStatement": null,
}

Escrito (poco frecuente):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Sin tipo:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Escrito (poco frecuente):

this.setPreviousStatement(true, 'Action');

Bloquear salida

Un bloque puede tener una sola salida, representado como un conector macho de rompecabezas en el de vanguardia. Las salidas se conectan a entradas de valores. Los bloques con una salida son generalmente se denominan bloques de valores.

JSON

Sin tipo:

{
  // ...,
  "output": null,
}

Escrito:

{
  // ...,
  "output": "Number",
}

JavaScript

Sin tipo:

init: function() {
  // ...
  this.setOutput(true);
}

Escrito:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Los bloques con un conector de salida también no pueden tener un recorte de instrucción anterior.

Bloquear entradas

Un bloque tiene una o más entradas, y cada entrada tiene una secuencia de campos y pueden terminar en una conexión. Existen varias tipos de entradas integradas.

  • Entrada de valor: se conecta a una conexión de salida de una bloque de valor. Un bloque math_arithmetic (suma, resta) es un ejemplo de un bloque con dos entradas de valores.
  • Entrada de estado: Se conecta a un la conexión anterior de un bloque de sentencia. El sección anidada de un bucle while es un ejemplo de una entrada de instrucción.
  • Entrada ficticia: No tiene una conexión de bloque. Funciona como una línea nueva cuando el bloque se configura para usar entradas de valor externas.
  • Entrada de fila final: No tiene una conexión en bloque y siempre actúa como una línea nueva.

También puedes crear una entrada personalizada para admitir una renderización.

El formato JSON y la API de JavaScript usan modelos ligeramente diferentes para describir sus entradas.

Entradas y campos en JSON

Los bloques definidos por JSON se estructuran como una secuencia de imágenes cadenas de mensajes ( message0, message1, ...), en las que cada token de interpolación (%1, %2, ...) es un campo o un extremo de entrada, por lo que el conector de entrada renderizado, dentro del mensaje) en el array JSON argsN coincidente. Este formato es para facilitar la internacionalización.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Los tokens de interpolación deben coincidir completamente con el array args0: sin duplicados. sin omisiones. Los tokens pueden estar presentes en cualquier orden, lo que permite que idiomas para cambiar el diseño del bloque.

Se cortan los espacios en blanco del texto a ambos lados de un token de interpolación. El texto que utiliza el carácter % (p.ej., cuando se hace referencia a un porcentaje) debe utilizar %% para que no se interprete como un token de interpolación.

El orden y los tipos de argumentos definen la forma del bloque. Cambiar una de estas cadenas puede cambiar por completo el diseño del bloque. Esto es particularmente importante en idiomas que tienen un orden de palabras diferente que el inglés. Considera un lenguaje hipotético en el que "set %1 to %2" (como se usa) en el ejemplo anterior) debe invertirse para que diga "put %2 in %1". Cambiando esta cadena (y dejando el resto del archivo JSON intacto) genera el siguiente bloque:

Blockly cambió automáticamente el orden de los campos, creó una entrada ficticia y se cambien de las entradas externas a las internas.

Blockly también reemplaza automáticamente cualquier carácter de línea nueva (\n) del mensaje con una entrada de fila final.

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

Args

Cada cadena de mensaje se vincula con un array args del mismo número. Para Por ejemplo, message0 va con args0. Los tokens de interpolación (%1, %2, ...) hacen referencia a los elementos del array args. Cada objeto tiene un type. El resto de los parámetros varían según el tipo:

También puedes definir tus propios campos personalizados y entradas personalizadas y pasarlas como args.

Todos los objetos también pueden tener un campo alt. En caso de que Blockly no reconoce el type del objeto, y luego se usa el objeto alt en su lugar. Para ejemplo, si se agrega a Blockly un nuevo campo llamado field_time, bloquea con este campo podría usar alt para definir un resguardo field_input para versiones anteriores de Blockly:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

Un objeto alt puede tener su propio objeto alt, lo que permite el encadenamiento. En última instancia, si Blockly no puede crear un objeto en el array args0 (después cualquiera de los objetos alt), este simplemente se omitirá.

Una entrada de prueba se agregará automáticamente al final del bloque si la La cadena message termina con texto o campos que una entrada no contiene. Por lo tanto, si la última entrada en un bloque es una entrada ficticia, entonces se puede omitir en el array args y no necesita interpolación en message. El la adición automática de una entrada ficticia permite a los traductores cambiar message sin necesidad de modificar el resto del JSON. Consulta el ejemplo de "set %1 to %2" (sin entrada ficticia) y "put %2 in %1" (se agregó una entrada ficticia) anteriormente en esta página.

implicitAlign0

En casos excepcionales, la entrada ficticia creada automáticamente debe alinearse. a "RIGHT" o "CENTRE". Si no se especifica, el valor predeterminado es "LEFT".

En el siguiente ejemplo, message0 es "send email to %1 subject %2 secure %3". y Blockly agrega automáticamente una entrada ficticia para la tercera fila. Parámetro de configuración De implicitAlign0 a "RIGHT", se fuerza que esta fila se alinee a la derecha. Esta la alineación se aplica a todas las entradas que no se definen de forma explícita en el archivo JSON definición del bloque, incluidas las entradas de la fila final que reemplazan los caracteres de línea nueva ('\n') del mensaje. También está la propiedad obsoleta lastDummyAlign0 que tiene el mismo comportamiento que implicitAlign0.

Al diseñar bloques para RTL (árabe y hebreo), izquierda y derecha están invertidos. Por lo tanto, "RIGHT" alinearía los campos a la izquierda.

message1, args1, implicitAlign1

Algunos bloques se dividen naturalmente en dos o más partes separadas. Considera este bloque "repetir" que tiene dos filas:

Si este bloque se describiera con un solo mensaje, la propiedad message0 sería "repeat %1 times %2 do %3". Esta cadena es extraña para un traductor, es difícil explicar qué significa la sustitución %2. El ficticio %2 es posible que, en algunos idiomas, no se desee ingresar. Y puede haber varias bloques que quieran compartir el texto de la segunda fila. Un mejor enfoque es para que JSON use más de un mensaje y propiedades de argumentos:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

Se puede definir cualquier cantidad de propiedades message, args y implicitAlign en el formato JSON, que comienza con 0 y se incrementa de manera secuencial. Ten en cuenta que la fábrica de bloques no es capaz de dividir mensajes en varias partes, pero hacerlo de forma manual es sencillo.

Entradas y campos en JavaScript

La API de JavaScript incluye un método append para cada tipo de entrada:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

Cada método de anexo puede tomar una cadena de identificador que usan los generadores de códigos. De prueba y las entradas de las filas finales rara vez necesitan referencia, y el identificador suele dejarse sin establecer.

La API de JavaScript también incluye un método appendInput genérico para agregar elementos entradas personalizadas. Ten en cuenta que, en este caso, el identificador debe directamente al constructor de tu entrada personalizada.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

Todos los métodos appendInput (tanto genéricos como no genéricos) muestran el objeto de entrada para que puedan configurarse mejor con el encadenamiento de métodos. Hay hay tres métodos integrados que se usan para configurar entradas.

setCheck

JavaScript

input.setCheck('Number');

Esta función opcional se usa para verificar el tipo de entradas conectadas. Si se proporciona un argumento de nulo, el valor predeterminado, entonces esta entrada puede conectarse a cualquier bloque. Consulta la sección Verificaciones de tipos para obtener más información.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Esta función opcional se usa para alinear los campos (consulta a continuación). Existen tres valores autodescriptivos que se pueden pasar como un argumento a esta función: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT y Blockly.inputs.Align.CENTER

Al diseñar bloques para RTL (árabe y hebreo), izquierda y derecha están invertidos. Por lo tanto, Blockly.inputs.Align.RIGHT alinearía los campos a la izquierda.

appendField

Una vez que se crea una entrada y se agrega a un bloque con appendInput, una De manera opcional, puede agregar cualquier cantidad de campos a la entrada. Estos campos se usan como etiquetas para describir para qué sirve cada entrada.

JavaScript

input.appendField('hello');

El elemento de campo más simple es el texto. La convención de Blockly es usar todas texto en minúscula, a excepción de los nombres propios (p.ej., Google, SQL).

Una fila de entrada puede contener cualquier cantidad de elementos de campo. Múltiples appendField las llamadas pueden encadenarse para agregar eficazmente varios campos al mismo fila de entrada.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

La llamada a appendField('hello') es en realidad un atajo para usar un Constructor FieldLabel: appendField(new Blockly.FieldLabel('hello')). El único momento en que podríamos usar el constructor es cuando se especifica un de clase para que se pueda aplicar un estilo al texto con una regla de CSS.

Intercalado o externo

Las entradas de bloque pueden renderizarse como externas o internas.

La definición del bloque puede especificar un valor booleano opcional para controlar si las entradas estén intercalados o no. Si es false, cualquier entrada de valor será externa (como el bloque izquierdo). Si es true, cualquier entrada de valor estará intercalada (como la bloque derecho arriba).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Si no está definido, Blockly usará una heurística para adivinar cuál es el modo mejor. Si suponemos que Blockly toma la elección correcta, este campo queda sin definir se prefiere, ya que las traducciones a diferentes idiomas pueden tener automáticamente modos diferentes. Consulta el ejemplo de JSON de "set %1 to %2" (entradas externas) y "put %2 in %1" (entradas intercaladas) anteriores en esta página.

Usa entradas intercaladas cuando es probable que un bloque tenga entradas pequeñas, como números. El usuario puede activar o desactivar esta opción a través del menú contextual si el elemento collapse esté habilitada (el valor predeterminado es verdadero si la caja de herramientas tiene categorías).

Campos

Los campos definen la mayoría de los elementos de la IU en un bloque. Por ejemplo, etiquetas de cadena, imágenes y entradas para Datos literales como cadenas y números. El ejemplo más simple es el bloque math_number, que usa un field_input para permitir que el usuario escriba un número.

Los campos se agregan al bloque mediante appendField.

Blockly ofrece una serie de campos integrados, como entradas de texto, selectores de color, imágenes. También puedes crear tus propios campos.

→ Obtén más información sobre los campos integrados.

→ Obtén más información sobre la creación de campos personalizados.

Íconos

Los iconos definen los elementos de la IU en un bloque que superficie "meta" información sobre el bloque.

Los íconos se agregan al bloque con addIcon.

Blockly proporciona una serie de íconos integrados, incluidos íconos de comentarios y de advertencia. También puedes crear tus propios íconos.

→ Obtén más información sobre la creación de íconos personalizados.

Información sobre la herramienta

Los cuadros de información ofrecen ayuda instantánea cuando el usuario sitúa el mouse sobre el bloque. Si el texto es largo, se ajustará automáticamente.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

En la API de JavaScript, los cuadros de información también se pueden definir como una función en lugar de un como una cadena estática. Esto permite obtener ayuda dinámica. Consulta math_arithmetic para ver un ejemplo de información sobre la herramienta que cambia según la opción del menú desplegable que elegido.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

Con la API de JavaScript, los bloques pueden especificar una función, en lugar de una cadena, que devuelve una cadena de información sobre la herramienta. Esto permite mostrar información dinámica sobre la herramienta. Consulta math_arithmetic para ver un ejemplo.

Personalización

También puedes personalizar el aspecto de los cuadros de información con una renderización personalizada. . Crea una función que acepte dos parámetros:

  • Primero, un elemento <div> en el que renderizarás el contenido
  • Segundo, el elemento real sobre el que se desplaza el mouse y que se mostrará el cuadro de información para

En el cuerpo de la función, puedes renderizar el contenido que desees en la div. Para obtener la cadena del cuadro de información definida en el bloque sobre el que se desplaza el mouse, puedes llama a Blockly.Tooltip.getTooltipOfObject(element);, donde element es la segundo parámetro de arriba.

Por último, registra esta función para que Blockly pueda llamarla en el momento adecuado:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Para ver un ejemplo, consulta el Demostración de información sobre herramientas personalizadas.

URL de ayuda

Los bloqueos pueden tener asociada una página de ayuda. Esta opción está disponible para usuarios de Blockly for Web haciendo clic con el botón derecho en el bloque y seleccionando "Help" en el menú contextual. Si este valor es null, el menú se verá inhabilitado. y sale de ella.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Con la API de JavaScript, los bloques pueden especificar una función, en lugar de una string, que muestra una cadena de URL, lo que permite brindar ayuda dinámica.

Cambiar los objetos de escucha y los validadores

Los bloques pueden tener funciones de escucha de cambio a las que se llama en cualquier cambio en la espacio de trabajo (incluidas las que no están relacionadas con el bloque). Se usan principalmente para establecer el texto de advertencia del bloque, o una notificación de usuario similar Workspace.

La función se agrega llamando a setOnChange con una función, y se puede hacer. durante el inicio o a través de una extensión JSON si planeas usarla en todas las plataformas.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

El sistema llama a la función y pasa el cambiar evento. Dentro de la función, this hace referencia a la instancia de bloque.

Dado que se llama a la función ante cualquier cambio, si se usa, los desarrolladores deben asegurarse el objeto de escucha se ejecuta rápidamente. También hay que tener cuidado con los cambios en el espacio de trabajo que pueden mostrarse en cascada o repetirse al oyente.

Consulta controls_flow_statements, logic_compare y procedures_ifreturn bloques para ejemplos.

Ten en cuenta que los campos editables tienen sus propios objetos de escucha de eventos para la validación de entrada y causar efectos secundarios.

Mutador

Los mutadores permiten que los bloques avanzados cambien de forma, sobre todo como resultado de usuarios abriendo un diálogo para agregar, quitar o reorganizar componentes. Los mutadores pueden ser se agregan a través de JSON con la clave mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Configuración por bloque

Las instancias de bloqueo tienen propiedades que configuran cómo se comportan del usuario. Se pueden usar para limitar el espacio de trabajo de modo que refleje determinados propiedades del dominio (p.ej., hay exactamente un evento de “inicio”) o un el esfuerzo del usuario (por ejemplo, un tutorial).

Estado que se puede borrar

block.setDeletable(false);

Si la estableces como falsa, el usuario no podrá borrar el bloqueo. Bloqueo predeterminado para borrarlos en un espacio de trabajo editable.

Cualquier bloque (incluso los que no se pueden borrar) se puede borrar de manera programática:

block.dispose();

Estado editable

block.setEditable(false);

Si se establece como falsa, el usuario no podrá cambiar los campos del bloque. (p.ej., menús desplegables y entradas de texto). Los bloques pueden modificarse de forma predeterminada en un Workspace.

Estado movible

block.setMovable(false);

Si se establece como falsa, el usuario no podrá mover el bloque directamente. Los bloque inamovible que es un elemento secundario de otro bloque no puede desconectarse ese bloque, aunque se moverá con su elemento superior si lo hace. Bloqueos de forma predeterminada que se pueda mover en un lugar de trabajo editable.

Cualquier bloque (incluso los inamovibles) se puede mover de forma programática una vez que esté en una Workspace.

block.moveBy(dx, dy)

La posición inicial de un bloque en un lugar de trabajo se establece de forma predeterminada en (0, 0).

Bloquear datos

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Los datos son una cadena opcional y arbitraria que se adjunta al bloque. Cuando o bloque de datos, se serializa la cadena de datos. Esto incluye cuándo el bloque se duplica o se copia/pega.

A menudo, se usa para asociar un bloque con un recurso externo.

Cuando se serializan en JSON, los datos se almacenan como una propiedad de nivel superior en el bloque:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Cuando se serializa en XML (el antiguo sistema de serialización en caja de hielo), la cadena de datos se almacena en una etiqueta <data></data> dentro del bloque:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Destrucción

Los bloques tienen un hook destroy, al que se llama cuando se borran del Workspace. Se puede usar para destruir cualquier modelo de datos de copia de seguridad/externo recursos asociados con el bloque que ya no son necesarios.

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

Se llama al método destroy después de que se descarta el elemento superior del bloque, pero antes de que se elimine alguno de sus campos secundarios o campos.

Menús contextuales

De forma predeterminada, los bloques tienen un menú contextual al hacer clic con el botón derecho que permite a los usuarios como agregar comentarios o duplicar bloques.

Puedes inhabilitar el menú contextual de un bloque individual de la siguiente manera:

block.contextMenu = false;

También puedes personalizar las opciones que se muestran en el menú. Para personalizar el menú para todos los bloques, consulta la documentación de menús contextuales. Para personalizar el menú de un bloque individual, puedes implementar lo siguiente: customContextMenu Esta función toma un array de opciones de menú y la modifica en su lugar, lo que significa que puedes agregar y quitar elementos.

Cada opción de menú es un objeto con tres propiedades:

  • text es el texto en pantalla.
  • enabled es un valor booleano. Cuando está inhabilitada, la opción se muestra, pero en gris texto.
  • callback es la función a la que se llamará cuando se haga clic en la opción.