As definições de bloco descrevem a aparência e o comportamento de um bloco, incluindo o texto, a cor, a forma e a quais outros blocos ele pode se conectar.
Formato JSON x API JavaScript
O Blockly tem duas formas de definir blocos: objetos JSON e funções JavaScript. O formato JSON foi projetado para simplificar a localização de projetos ao desenvolver para idiomas com diferentes ordens de palavras. O formato JSON é o formato de definição de blocos.
No entanto, o formato JSON não é capaz de definir diretamente recursos avançados, como como mutadores ou validadores. Eles devem ser escritos em JavaScript, normalmente extensões.
Os aplicativos que usam a implementação original de JavaScript do Blockly também podem programar definições de bloco diretamente para as chamadas de função da API Blockly de nível inferior, mostradas nos diversos exemplos de JavaScript abaixo.
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');
}
};
A função init
cria a forma do bloco. No contexto deste
a palavra-chave this
é o bloco que está sendo criado.
Ambos os exemplos carregam o mesmo 'string_length' bloco de recursos dependente.
Na Web, o formato JSON é carregado usando a função initJson
.
Isso também permite misturar os dois formatos nas páginas da Web do Blockly. É
preferir definir seu bloco com JSON sempre que possível e usar JavaScript
somente para partes das definições de bloco que não são compatíveis com JSON.
Abaixo há um exemplo de um bloco predominantemente definido usando JSON, mas é estendida usando a API JavaScript para apresentar uma dica dinâmica.
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'));
});
}
};
Cor do bloco
A cor primária de um bloco é definida pela propriedade colour
JSON, a
função block.setColour(..)
,
ou usando temas e definindo um bloco
estilo.
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Consulte o guia para cores dos blocos para mais detalhes.
Conexões de instruções
Os usuários podem criar sequências de blocos usando as APIs nextStatement
e
previousStatement
conectores. No layout padrão do Blockly, essas conexões
ficam em cima e embaixo, com os blocos empilhados verticalmente.
Um bloco com um conector anterior não pode ter conector de saída e vice-versa. O termo bloco de instruções refere-se a um bloco sem saída de valor. Um bloco de instrução geralmente tem uma conexão anterior e uma próxima.
As conexões nextStatement
e previousStatement
podem ser
digitado,
mas esse recurso não é utilizado por blocos padrão.
Próxima conexão
Cria um ponto na parte inferior do bloco, para que outras instruções possam ser empilhadas abaixo dela. Um bloco com uma próxima conexão, mas nenhuma conexão anterior geralmente representa um evento e pode ser configurado para renderizar com um chapéu.
JSON
Sem digitação:
{
...,
"nextStatement": null,
}
Digitado (raro):
{
"nextStatement": "Action",
...
}
JavaScript
Sem digitação:
this.setNextStatement(true); // false implies no next connector, the default
Digitado (raro):
this.setNextStatement(true, 'Action');
Conexão anterior
Cria um entalhe na parte superior do bloco, para poder ser conectado como uma pilha. de declarações.
Blocos com uma conexão anterior não podem ter uma conexão de saída.
JSON
Sem digitação:
{
...,
"previousStatement": null,
}
Digitado (raro):
{
"previousStatement": "Action",
...
}
JavaScript
Sem digitação:
this.setPreviousStatement(true); // false implies no previous connector, the default
Digitado (raro):
this.setPreviousStatement(true, 'Action');
Saída em bloco
Um bloco pode ter uma única saída, representada como um conector macho na parte de ponta. As saídas se conectam a entradas de valor. Os blocos com uma saída são geralmente chamados de blocos de valor.
JSON
Sem digitação:
{
// ...,
"output": null,
}
Digitado:
{
// ...,
"output": "Number",
}
JavaScript
Sem digitação:
init: function() {
// ...
this.setOutput(true);
}
Digitado:
init: function() {
// ...
this.setOutput(true, 'Number');
}
Blocos com conector de saída não podem ter também um entalhe de instrução anterior.
Bloquear entradas
Um bloco tem uma ou mais entradas, em que cada entrada tem uma sequência de campos e pode terminar em uma conexão. Existem várias tipos de entradas integradas.
- Entrada de valor: se conecta a uma conexão de saída de um
bloco de valor. Um bloco
math_arithmetic
(adição, subtração) é um exemplo de um bloco com duas entradas de valor. - Entrada de instrução: conecta-se a uma conexão anterior de um bloco de instruções. A seção aninhada de uma repetição "while" é um exemplo de entrada de instrução.
- Entrada fictícia: não tem uma conexão de blocos. Funciona como uma nova linha quando o bloco é configurado para usar entradas de valores externos.
- Entrada de linha final: não tem uma conexão de bloco e sempre funciona como um nova linha.
Também é possível criar uma entrada personalizada para dar suporte renderização.
O formato JSON e a API JavaScript usam modelos ligeiramente diferentes para descrever suas contribuições.
Entradas e campos em JSON
Os blocos definidos em JSON são estruturados como uma sequência de
strings de mensagem ( message0
, message1
, ...), em que cada token de interpolação
(%1
, %2
, ...) é um campo ou uma extremidade de entrada (onde o conector de entrada
é renderizado dentro da mensagem) na matriz JSON argsN
correspondente. Esse formato é
para facilitar a internacionalização.
JSON
{
"message0": "set %1 to %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
Os tokens de interpolação precisam corresponder completamente à matriz args0
: sem duplicatas,
sem omissões. Os tokens podem estar presentes em qualquer ordem, o que permite que diferentes
idiomas para alterar o layout do bloco.
O texto em ambos os lados de um token de interpolação é cortado em branco.
Textos que usam o caractere %
(por exemplo, ao se referir a uma porcentagem) devem usar
%%
para que não seja interpretado como um token de interpolação.
A ordem e os tipos dos argumentos definem a forma da
bloco de recursos dependente. Mudar uma dessas strings pode mudar completamente o layout do bloco.
Isso é importante principalmente em idiomas que têm uma ordem de palavras diferente
do que o inglês. Considere uma linguagem hipotética em que "set %1 to %2"
(conforme usado
no exemplo acima) precisa ser invertido para dizer "put %2 in %1"
. Mudança
essa string (e deixando o restante do código
intocados) resulta no seguinte bloco:
O Blockly alterou automaticamente a ordem dos campos, criou uma entrada fictícia, e mudou de entradas externas para internas.
O Blockly também substitui automaticamente qualquer caractere de nova linha (\n
) na mensagem
com uma entrada de linha final.
JSON
{
"message0": "set %1\nto %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
Args
Cada string de mensagem é pareada com uma matriz args
do mesmo número. Para
Por exemplo, message0
combina com args0
. Os tokens de interpolação
(%1
, %2
, ...) referem-se aos itens da matriz args
. Todo objeto tem
String type
. O restante dos parâmetros varia de acordo com o tipo:
Também é possível definir seus próprios campos personalizados e entradas personalizadas e transmiti-las como args.
Todo objeto também pode ter um campo alt
. Caso o Blockly não
reconhecer o type
do objeto, o objeto alt
vai ser usado no lugar dele. Para
exemplo, se um novo campo chamado field_time
for adicionado ao Blockly, os blocos que usam
este campo pode usar alt
para definir um substituto field_input
para versões mais antigas.
da 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"
}
}
]
}
Um objeto alt
pode ter o próprio objeto alt
, o que permite o encadeamento.
Por fim, se o Blockly não puder criar um objeto na matriz args0
(depois
tentar qualquer objeto alt
), esse objeto será simplesmente ignorado.
Uma entrada fictícia será adicionada automaticamente ao final do bloco se o
A string message
termina com texto ou campos que não pertencem a uma entrada.
Assim, se a última entrada em um bloco for fictícia, ela pode ser omitida do
a matriz args
e não precisa de interpolação em message
. A
a adição automática de uma entrada fictícia de acompanhamento permite que os tradutores mudem
message
sem precisar modificar o restante do JSON. Confira o exemplo
"set %1 to %2"
(sem entrada fictícia) e "put %2 in %1"
(entrada fictícia adicionada)
nesta página.
implicitAlign0
Em casos raros, a entrada fictícia final criada automaticamente precisa ser alinhada
ao "RIGHT"
ou "CENTRE"
. O padrão, se não for especificado, será "LEFT"
.
No exemplo abaixo, message0
é "send email to %1 subject %2 secure %3"
.
O Blockly adiciona automaticamente uma entrada fictícia à terceira linha. Ambiente
implicitAlign0
a "RIGHT"
força o alinhamento desta linha à direita. Isso
o alinhamento se aplica a todas as entradas que não são explicitamente definidas no JSON
definição de bloco, incluindo entradas de linha final que substituem caracteres de nova linha
('\n'
) na mensagem. Há também a propriedade descontinuada lastDummyAlign0
que tem o mesmo comportamento que implicitAlign0
.
Ao projetar blocos para RTL (árabe e hebraico), as direções esquerda e direita são invertidas.
Assim, "RIGHT"
alinharia os campos à esquerda.
message1
, args1
, implicitAlign1
Alguns blocos são naturalmente divididos em duas ou mais partes separadas. Considere este bloco de repetição que tem duas linhas:
Se esse bloco fosse descrito com uma única mensagem, a propriedade message0
será "repeat %1 times %2 do %3"
. Essa string é estranha para um tradutor,
é difícil explicar o que a substituição %2
significa. O modelo de %2
a entrada pode não ser o que você quer em alguns idiomas. E pode haver várias
blocos que desejam compartilhar o texto da segunda linha. Uma abordagem melhor
é para o JSON usar mais de uma propriedade message e args:
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
}
Qualquer número de propriedades message
, args
e implicitAlign
pode ser definido
no formato JSON, começando com 0 e incrementando sequencialmente. Observe que
a Block Factory não é capaz de dividir as mensagens em várias partes, mas
fazer isso manualmente é simples.
Entradas e campos em JavaScript
A API JavaScript inclui um 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 anexação pode ter uma string de identificador, usada por geradores de código. Fictício e as entradas da linha final raramente precisam de referência, e o identificador geralmente é deixado não definido.
A API JavaScript também inclui um método appendInput
genérico para anexação
entradas personalizadas. Nesse caso, o identificador deve
ser passada diretamente para seu construtor de entrada personalizada.
JavaScript
this.appendInput(new MyCustomInput('INPUT_NAME'))
.appendField('an example label')
Todos os métodos appendInput
(genéricos e não genéricos) retornam o
objeto de entrada para que possam ser ainda mais configurados usando o encadeamento de métodos.
são três métodos integrados usados para configurar entradas.
setCheck
JavaScript
input.setCheck('Number');
Esta função opcional é usada para a verificação do tipo de entradas conectadas. Se fornecido um argumento nulo, o padrão, essa entrada poderá ser conectada a qualquer bloco. Consulte Verificações de tipo para mais detalhes.
setAlign
JavaScript
input.setAlign(Blockly.inputs.Align.RIGHT);
Esta função opcional é usada para alinhar os campos (confira abaixo). Existem três
valores autodescritivos que podem ser passados como um argumento para esta função:
Blockly.inputs.Align.LEFT
, Blockly.inputs.Align.RIGHT
e
Blockly.inputs.Align.CENTER
Ao projetar blocos para RTL (árabe e hebraico), as direções esquerda e direita são invertidas.
Assim, Blockly.inputs.Align.RIGHT
alinharia os campos à esquerda.
appendField
Depois que uma entrada é criada e anexada a um bloco com appendInput
, uma
pode, opcionalmente, anexar qualquer número de campos à entrada. Esses campos
são frequentemente usados como rótulos para descrever a finalidade de cada entrada.
JavaScript
input.appendField('hello');
O elemento de campo mais simples é o texto. A convenção de Blockly é usar todas texto em letras minúsculas, com exceção de nomes próprios (por exemplo, Google, SQL).
Uma linha de entrada pode conter qualquer número de elementos de campo. Vários appendField
chamadas podem ser encadeadas para adicionar de forma eficiente vários campos ao mesmo
linha de entrada.
JavaScript
input.appendField('hello')
.appendField(new Blockly.FieldLabel('Neil', 'person'));
Na verdade, a chamada appendField('hello')
é um atalho para usar uma
Construtor de FieldLabel: appendField(new Blockly.FieldLabel('hello'))
.
A única ocasião em que se pode querer usar o construtor é ao especificar um
para que o texto seja estilizado usando uma regra CSS.
Inline x externo
As entradas em bloco podem ser renderizadas como externas ou internas.
A definição do bloco pode especificar um booleano opcional que controla se as entradas
estão inline ou não. Se for false
, todas as entradas de valor serão externas (como
bloco à esquerda). Se for true
, todas as entradas de valor serão inline (como o
bloco à direita acima).
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
Se não for definido, o Blockly usará alguma heurística para adivinhar qual modo
melhor. Supondo que o Blockly faça a escolha certa, este campo não será definido
porque traduções para diferentes idiomas podem incluir automaticamente
em diferentes modos. Confira o exemplo JSON de "set %1 to %2"
(entradas externas) e
"put %2 in %1"
(entradas inline) anteriormente nesta página.
Use entradas in-line quando um bloco provavelmente tem entradas pequenas, como números.
O usuário poderá alternar essa opção pelo menu de contexto se o collapse
configuração estiver ativada (o padrão será verdadeiro se a caixa de ferramentas tiver categorias).
Campos
Os campos definem a maioria dos elementos de interface em um bloco. Entre eles estão
rótulos de string, imagens e entradas
dados literais
como strings e números. O exemplo mais simples é o bloco math_number
,
que usa um field_input
para permitir que o usuário digite um número.
Os campos são anexados ao bloco usando appendField.
O Blockly oferece vários campos integrados, incluindo entradas de texto, seletores de cores, e imagens. Você também pode criar seus próprios campos.
→ Mais informações sobre campos integrados.
→ Mais informações sobre a criação de campos personalizados.
Ícones
Os ícones definem elementos da interface em um bloco que mostra "meta" informações sobre o bloco de recursos dependente.
Os ícones são anexados ao bloco usando addIcon.
O Blockly oferece vários ícones integrados, incluindo ícones de comentários e avisos. Você também pode criar seus próprios ícones.
→ Mais informações sobre a criação de ícones personalizados.
Dicas
As dicas oferecem ajuda instantânea quando o usuário passa o mouse sobre o bloco. Se o texto for longo, ele será ajustado automaticamente.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
Na API JavaScript, as dicas também podem ser definidas como uma função em vez de uma
uma string estática. Isso permite a ajuda dinâmica. Consulte math_arithmetic
para
exemplo de uma dica que muda de acordo com a opção suspensa
escolhidas.
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];
});
}
};
Com a API JavaScript, os blocos podem especificar uma função, em vez de uma
string, que retorna uma string de dica. Isso permite dicas dinâmicas.
Consulte math_arithmetic
para conferir um exemplo.
Personalização
Também é possível personalizar a aparência das dicas com uma renderização personalizada função. Crie uma função que aceite dois parâmetros:
- Primeiro, um elemento
<div>
em que você vai renderizar o conteúdo. - o elemento real sobre o qual você está passando o mouse e que você mostrará a dica para
No corpo da função, você pode renderizar o conteúdo que quiser na
div. Para obter a string de dicas definida no bloco que está passando o mouse, você pode
chamar Blockly.Tooltip.getTooltipOfObject(element);
, em que element
é o
segundo parâmetro acima.
Por fim, registre essa função para que o Blockly a chame no momento adequado:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Para ver um exemplo, consulte Demonstração de dicas personalizadas.
URL da ajuda
Os bloqueios podem ter uma página de ajuda associada a eles. Ele está disponível para
Os usuários do Blockly para Web clicando com o botão direito do mouse no bloco e selecionando "Ajuda"
no menu de contexto. Se esse valor for null
, o menu ficará esmaecido
para fora.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Com a API JavaScript, os blocos podem especificar uma função, em vez de uma que retorna uma string de URL, permitindo assim a ajuda dinâmica.
Mudar listeners e validadores
Os blocos podem ter funções de listener de alterações que são chamadas em qualquer alteração no espaço de trabalho (incluindo aqueles não relacionados ao bloco). Elas são usadas principalmente para defina o texto de aviso do bloco ou uma notificação similar ao usuário fora do espaço de trabalho.
A função é adicionada chamando setOnChange com uma função e pode ser feita durante o init ou por meio de uma extensão JSON caso pretenda usá-la em todas as 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.');
}
});
}
}
O sistema chama a função, transmitindo o evento
evento de alteração.
Dentro da função, this
se refere à instância do bloco.
Como a função é chamada em qualquer alteração, se usada, os desenvolvedores devem garantir o listener é executado rapidamente. Também é preciso ter cuidado com as mudanças no espaço de trabalho que pode se propagar ou retornar ao listener.
Consulte controls_flow_statements
, logic_compare
e procedures_ifreturn
blocos para exemplos.
Os campos editáveis têm os próprios listeners de eventos para validação de entrada e causar efeitos colaterais.
Mutador
Os mutadores permitem que blocos avançados mudem de forma, principalmente como resultado
usuários que abrem uma caixa de diálogo para adicionar, remover ou reorganizar componentes. Os mutadores podem ser
adicionado usando JSON com a chave mutator
.
JSON
{
// ...,
"mutator":"if_else_mutator"
}
Configuração por bloco
As instâncias de bloco têm diversas propriedades que configuram o comportamento delas o usuário. Elas podem ser usadas para restringir o espaço de trabalho para refletir determinados propriedades do domínio (por exemplo, há exatamente um evento 'start') ou foco esforço do usuário (por exemplo, um tutorial).
Estado que pode ser excluído
block.setDeletable(false);
Se ela for definida como falsa, o usuário não poderá excluir o bloqueio. Bloqueio padrão para excluir em um espaço de trabalho editável.
Qualquer bloqueio, mesmo os que não podem ser excluídos, pode ser excluído de maneira programática:
block.dispose();
Estado editável
block.setEditable(false);
Se ela for definida como falsa, o usuário não poderá mudar os campos do bloqueio. (por exemplo, menus suspensos e entradas de texto). Os bloqueios podem ser editados por padrão em um espaço de trabalho.
Estado móvel
block.setMovable(false);
Se ela for definida como falsa, o usuário não poderá mover o bloco diretamente. Um um bloco imóvel que é um filho de outro bloco não pode ser desconectado do esse bloco, embora ele seja movido com seu pai se o pai for movido. Bloqueios como movê-lo por padrão em um espaço de trabalho editável.
Qualquer bloco (até mesmo os imóveis) pode ser movido programaticamente quando estiver em um espaço de trabalho.
block.moveBy(dx, dy)
A posição inicial de um bloco em um espaço de trabalho é definida, por padrão, como (0, 0).
Bloquear dados
this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';
Data é uma string opcional e arbitrária anexada ao bloco. Quando o é serializado, a string de dados é serializada com ele. Isso inclui quando o bloco é duplicado ou copiado/colado.
Geralmente é usado para associar um bloco a um recurso externo.
Quando serializados para JSON, os dados são armazenados como uma propriedade de nível superior no bloco:
{
"type": "my_block",
"data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
// etc..
}
Quando serializado para XML (o antigo sistema de serialização em icebox), a string de dados
é armazenado em uma tag <data></data>
no bloco:
<block type="my_block">
<data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
<!-- etc... -->
</block>
Destruição
Os blocos têm um hook destroy
, que é chamado quando são excluídos do
espaço de trabalho. Isso pode ser usado para destruir modelos de dados de apoio/
recursos associados ao bloco que não são mais necessários.
JSON
{
// ...,
"extensions":["destroy"],
}
Blockly.Extensions.registerMixin('destroy', {
destroy: function() {
this.myResource.dispose();
}
});
JavaScript
Blockly.Blocks['block_type'] = {
destroy: function() {
this.myResource.dispose();
}
}
O método destroy
é chamado depois que o pai do bloco é descartado, mas
antes que qualquer dos filhos ou campos sejam descartados.
Menus de contexto
Por padrão, os blocos têm um menu de contexto que permite clicar com o botão direito do mouse como adicionar comentários ou duplicar blocos.
Para desativar o menu de contexto de um bloco individual, faça o seguinte:
block.contextMenu = false;
Você também pode personalizar as opções mostradas no menu. Para personalizar o menu de
todos os blocos, consulte a
documentação sobre menus de contexto.
Para personalizar o menu de um bloco específico, você pode implementar
customContextMenu
: Essa função recebe uma matriz de opções de menu e
o modificar no local, o que significa que você pode adicionar e remover itens.
Cada opção de menu é um objeto com três propriedades:
text
é o texto de exibição.enabled
é um booleano. Quando desativada, a opção aparece, mas com cinza em textos.callback
é a função a ser chamada quando a opção é clicada.