Visualizadores da conexão

Um visualizador de conexão cria uma prévia visual de uma conexão pendente. Ele indica onde o bloco de arrasto será conectado quando for solto.

O visualizador de conexão padrão coloca marcadores de inserção onde os blocos serão conectados. Ele também destaca as conexões e aplica um efeito de desbotamento em blocos que serão substituídos e desconectados.

Tipos de conexões pendentes

Há dois tipos de conexões pendentes. Em um caso, o bloco descartado substitui um bloco existente, e o bloco existente é desconectado. No outro caso, o bloco descartado é inserido sem desconectar outros blocos.

Substituição

A substituição ocorre quando uma conexão no bloco arrastado se conecta a uma conexão que já tem um bloco e não há lugar para o bloco atual ser reconectado. Quando o bloco arrastado for solto, o bloco substituído será desconectado, e o bloco arrastado será conectado no lugar dele.

Por padrão, indicamos isso colocando um efeito de desbotamento no bloco que está sendo substituído.

Inserção

A inserção acontece em dois casos. Isso acontece quando uma conexão no bloco arrastado é conectada a uma conexão vazia. Isso acontece quando uma conexão no bloco arrastado está indo para uma conexão que já tem um bloco, mas pode ser inserida entre os dois blocos existentes, para que o bloco atual não seja desconectado.

Por padrão, indicamos isso criando marcadores de inserção e destacando as conexões que serão feitas.

Criar um visualizador personalizado

Se você quiser usar um visual diferente para visualizar as conexões pendentes, crie uma implementação IConnectionPreviewer personalizada.

Construção e descarte

Você precisa implementar um construtor e um método de descarte para o IConnectionPreviewer.

O construtor é chamado sempre que um bloco de arrasto começa e é transmitido o bloco que está sendo arrastado. Se você precisar inicializar qualquer estado com base no bloco, faça isso no construtor.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

O método dispose é chamado sempre que um arrasto de bloco termina. Se você precisar dereferir qualquer estado quando a instância IConnectionPreviewer for descartada, faça isso aqui.

dispose() {
  // Dispose of and dereference any state.
}

Criar a visualização

O IConnectionPreviewer precisa implementar a lógica para visualizar visualmente as conexões.

Substituição

Para conferir uma prévia das substituições, implemente o método previewReplacement.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

Inserção

Para visualizar as inserções, implemente o método previewConnection.

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

Se você quiser ter uma visualização diferente dependendo se o bloco arrastado está conectado a uma entrada vazia ou se está sendo inserido entre blocos, confira se o staticConn está conectado a outra conexão. Se o staticConn estiver conectado, o draggedConn será inserido entre os blocos.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

Prévias de CSS

É possível visualizar as conexões aplicando CSS ao bloco. Por exemplo, o desbotamento de substituição padrão é alternado adicionando a classe CSS blocklyReplaceable ao bloco.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

Prévias do renderizador

É possível visualizar as conexões implementando um renderizador personalizado com ganchos de visualização especiais.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

Ocultar a visualização

O IConnectionPreviewer precisa ser capaz de ocultar as prévias. Isso é chamado quando o bloco arrastado sai do alcance de todas as conexões. Portanto, nenhuma visualização deve ser mostrada. Ele também é chamado logo antes da eliminação do visualizador.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

Registro e uso

Por fim, depois de concluir a criação do IConnectionPreviewer, você precisa registrá-lo. Isso associa o renderizador a uma string para que você possa transmiti-lo às suas opções de configuração. Também é possível transmitir a classe IConnectionPreviewer (ou seja, o construtor) diretamente para as opções de configuração.

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

Para mais informações sobre o registro, consulte Como injetar subclasses.