Miembros con acceso a la vista previa de la conexión

Una vista previa de conexiones crea una vista previa de una conexión pendiente. Integra te indica dónde se conectará el bloque de arrastre cuando esté por lo que se descarta.

La vista previa de conexión predeterminada coloca marcadores de inserción donde se conectarán los bloques. También destaca las conexiones y atenúa efecto en los bloques que se reemplazarán y desconectarán.

Tipos de conexiones pendientes

Hay dos tipos de conexiones pendientes. En un caso, el bloque drop reemplaza un bloque existente, y el bloque existente se desconecta. En la otra caso, el bloque soltado se inserta sin desconectar otros bloques.

Reemplazo

El reemplazo se produce cuando se conecta una conexión en el bloque arrastrado. a una conexión que ya tiene un bloque, y no hay lugar para el que se vuelva a conectar. Cuando se suelta el bloque arrastrado, el bloque reemplazado se desconectará, y el bloque arrastrado se conectará en su lugar.

De forma predeterminada, indicamos esto aplicando un efecto de atenuación en el bloque que se envía y reemplazarse.

Inserción

La inserción se realiza en dos casos. Ocurre cuando una conexión en la red este bloque se conectará a una conexión vacía. Y sucede cuando un en el bloque arrastrado se dirigirá a una conexión que ya tiene un pero se puede insertar entre los dos bloques existentes, de modo que el no se desconecte.

De forma predeterminada, lo indicamos creando marcadores de inserción y destacando los conexiones que se conectarán.

Crea una vista previa personalizada

Si quieres usar un elemento visual diferente para obtener una vista previa de las conexiones pendientes, puedes Crea una implementación personalizada de IConnectionPreviewer.

Construcción y eliminación

Debes implementar un constructor y un método de eliminación para tu IConnectionPreviewer

Cada vez que comienza un arrastre de bloque, se llama al constructor, y se le pasa el bloque que se está arrastrando. Si necesitas inicializar cualquier estado basado en el puedes hacerlo en el constructor.

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

Se llama al método dispose cada vez que finaliza un arrastre de bloque. Si necesitas y anularás cualquier estado cuando se deseche tu instancia IConnectionPreviewer, debería hacerlo aquí.

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

Crea la vista previa

Tu IConnectionPreviewer debe implementar una lógica para obtener una vista previa de manera visual. conexiones de red.

Reemplazo

Para obtener una vista previa de los reemplazos, implementa previewReplacement .

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

Inserción

Para obtener una vista previa de las inserciones, implementa el método previewConnection.

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

Si quieres obtener una vista previa diferente, según si el bloque arrastrado se conecta a una entrada vacía o si se está insertando entre bloques, puedes comprobar si staticConn está conectado a otra conexión. Si staticConn está conectado, entonces se está conectando draggedConn se insertan entre los bloques.

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

Vistas previas de CSS

Puedes obtener una vista previa de las conexiones aplicando CSS al bloque. Por ejemplo, el La atenuación de reemplazo predeterminada se activa agregando la clase de CSS blocklyReplaceable. al bloque.

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

Vistas previas del renderizador

Puedes obtener una vista previa de las conexiones implementando un procesador personalizado. que tiene hooks especiales de vista previa.

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

Ocultar la vista previa

Tu IConnectionPreviewer debe poder ocultar las vistas previas. Esto se llama cuando el bloque arrastrado se mueve fuera del rango de todas las conexiones, de modo que no hay vista previa el código y la fuente. También se llama justo antes de que se deseche la vista previa.

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

Registro y uso

Por último, una vez que hayas completado la creación de tu IConnectionPreviewer, debes registrarla. De esta manera, se asocia el renderizador con una cadena para que puedas y pasarla a tu configuración de inyección. También puedes pasar el Clase IConnectionPreviewer (es decir, constructor) directamente en tu inserción configuración.

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 obtener más información sobre el registro, consulta Cómo insertar subclases.