Visualizadores da conexão

Um visualizador de conexão cria uma prévia de uma conexão pendente. Ela indica onde o bloco de arrastar será conectado quando for caíam.

O visualizador de conexão padrão coloca marcadores de inserção onde os blocos vão se conectar. Ele também destaca as conexões e faz um 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 solto substitui um bloco existente e o bloco existente é desconectado. No outro neste caso, o bloco descartado é inserido sem desconectar os outros blocos.

Substituição

A substituição acontece quando uma conexão no bloco arrastado vai se conectar a uma conexão que já tem um bloco e não há lugar algum para o para ser reanexado. Quando o bloco arrastado for solto, o bloco substituído será desconectado e o bloco arrastado será conectado em seu 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. Acontece quando uma conexão no ambiente vai se conectar a uma conexão que está vazia. E isso acontece quando conexão no bloco arrastado vai para uma conexão que já tem um mas pode ser inserido entre os dois blocos existentes. Assim, o bloco não seja desconectado.

Por padrão, indicamos isso criando marcadores de inserção e destacando os que vão se conectar.

Criar um visualizador personalizado

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

Construção e descarte

Você precisa implementar um construtor e um método de descarte para seu IConnectionPreviewer:

O construtor é chamado sempre que uma ação de arrastar é iniciada e recebe o bloco que está sendo arrastado. Se você precisar inicializar qualquer estado com base na pode fazer isso no construtor.

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

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

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

Criar a prévia

Seu IConnectionPreviewer precisa implementar uma lógica para a visualização visual. conexões de rede.

Substituição

Para visualizar as substituições, implemente a 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á ou não conectado a uma entrada vazia ou inserido entre blocos, Você pode verificar se o staticConn está conectado a outra conexão. Se o staticConn estiver conectado no momento, então o draggedConn está sendo inseridos 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 o esmaecimento de substituição padrão é alternado adicionando a classe CSS blocklyReplaceable para o 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 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 visualizações. Isso é chamado de quando o bloco arrastado sai do alcance de todas as conexões, portanto, nenhuma visualização deve ser exibido. 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 da IConnectionPreviewer, você precisam registrá-lo. Isso associa o renderizador a uma string para que você possa e transmiti-la para a configuração de injeção. Você também pode passar o valor-chave Classe IConnectionPreviewer (ou seja, construtor) diretamente para sua injeção configuração do Terraform.

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 a inscrição, acesse Como injetar subclasses.