Visualizadores da conexão

Uma visualização da conexão cria uma prévia da conexão pendente. Ela oferece uma indicação de onde o bloco de arrastar vai estar conectado quando for solto.

A visualização da conexão padrão coloca marcadores de inserção onde os blocos serão conectados. Ela também destaca as conexões e causa um efeito de esmaecimento nos 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 atual é desconectado. No outro caso, o bloco solto é inserido sem desconectar outros blocos.

Substituição

A substituição acontece 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 existente ser reanexado. Quando o bloco arrastado é solto, o bloco substituído é desconectado e o bloco arrastado é conectado no lugar.

Por padrão, indicamos isso colocando um efeito de esmaecimento 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 se conecta 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 ela pode ser inserida entre os dois blocos existentes para que o bloco existente não seja desconectado.

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

Criar uma visualização personalizada

Caso queira usar um visual diferente para visualizar conexões pendentes, você pode criar uma implementação personalizada de IConnectionPreviewer.

Construção e descarte

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

O construtor é chamado sempre que uma ação de arrastar um bloco começa e transmite o bloco que está sendo arrastado. Se você precisar inicializar qualquer estado com base no bloco, poderá fazer isso no construtor.

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

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

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

Criar a prévia

Seu IConnectionPreviewer precisa implementar lógica para visualizar conexões visualmente.

Substituição

Para visualizar 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 inserções, implemente o método previewConnection.

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

Caso você queira ter uma visualização diferente, dependendo se o bloco arrastado está sendo conectado a uma entrada vazia ou se está sendo inserido entre blocos, verifique se o staticConn está conectado a outra conexão. Se o staticConn estiver conectado no momento, o draggedConn está sendo 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.
  }
}

Visualizações de CSS

É possível visualizar as conexões aplicando CSS ao bloco. Por exemplo, o esmaecimento 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');
}

Visualizações do renderizador

Você pode visualizar as conexões implementando um renderizador personalizado que tenha ganchos especiais de visualização.

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

Ocultar a visualização

Seu IConnectionPreviewer precisa poder ocultar visualizações. Isso é chamado quando o bloco arrastado sai do intervalo de todas as conexões. Portanto, nenhuma visualização será mostrada. Ele também é chamado pouco antes de o visualizador ser descartado.

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 à configuração de injeção. Você também pode transmitir a classe IConnectionPreviewer (ou seja, o construtor) diretamente para a configuração de injeçã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 registro, consulte Como injetar subclasses.