Visualizzatori della connessione in anteprima

Un visualizzatore dell'anteprima della connessione crea un'anteprima visiva di una connessione in attesa. Fornisce un'indicazione dei punti in cui il blocco di trascinamento verrà collegato quando viene rilasciato.

Il visualizzatore anteprima della connessione predefinito inserisce indicatori di inserimento in cui si connetteranno i blocchi. Inoltre, mette in evidenza le connessioni e applica un effetto di dissolvenza sui blocchi che verranno sostituiti e scollegati.

Tipi di connessioni in attesa

Esistono due tipi di connessioni in attesa. In un caso, il blocco rilasciato sostituisce un blocco esistente e quello esistente viene scollegato. Nell'altro caso, il blocco rilasciato viene inserito senza scollegare gli altri blocchi.

Sostituzione

La sostituzione si verifica quando una connessione sul blocco trascinato si connette a una connessione in cui è già presente un blocco e non è possibile ricollegare il blocco esistente. Quando il blocco trascinato viene rilasciato, il blocco sostituito viene scollegato e quello trascinato viene collegato al suo posto.

Per impostazione predefinita, ciò viene indicato applicando un effetto di dissolvenza al blocco che viene sostituito.

Inserimento

L'inserimento avviene in due casi. Succede quando una connessione sul blocco trascinato si connette a una connessione vuota. Questo accade quando una connessione sul blocco trascinato arriva a una connessione che ha già un blocco, ma può essere inserita tra i due blocchi esistenti, in modo che il blocco esistente non venga scollegato.

Per impostazione predefinita, ciò viene indicato creando indicatori di inserzione ed evidenziando le connessioni che si connetteranno.

Creare un visualizzatore in anteprima personalizzato

Se vuoi utilizzare un'immagine diversa per visualizzare l'anteprima delle connessioni in attesa, puoi creare un'implementazione di IConnectionPreviewer personalizzata.

Costruzione e smaltimento

Devi implementare un costruttore e un metodo di smaltimento per IConnectionPreviewer.

Il costruttore viene chiamato ogni volta che inizia il trascinamento di un blocco e gli viene inviato il blocco che viene trascinato. Se devi inizializzare uno stato basato sul blocco, puoi farlo nel costruttore.

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

Il metodo dispose viene richiamato ogni volta che termina il trascinamento di un blocco. Se vuoi annullare il riferimento a uno stato quando l'istanza IConnectionPreviewer è disposta, devi farlo qui.

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

Crea l'anteprima

IConnectionPreviewer deve implementare la logica per visualizzare l'anteprima visiva delle connessioni.

Sostituzione

Per visualizzare l'anteprima delle sostituzioni, implementa il metodo previewReplacement.

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

Inserimento

Per visualizzare l'anteprima degli inserti, implementa il metodo previewConnection.

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

Se vuoi visualizzare un'anteprima diversa a seconda che il blocco trascinato sia collegato a un ingresso vuoto o se viene inserito tra blocchi, puoi verificare se staticConn è attualmente collegato a un'altra connessione. Se staticConn è attualmente connesso, draggedConn viene inserito tra i blocchi.

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

Anteprime CSS

Puoi visualizzare l'anteprima delle connessioni applicando CSS al blocco. Ad esempio, la dissolvenza di sostituzione predefinita viene attivata aggiungendo la classe CSS blocklyReplaceable al blocco.

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

Anteprime del renderer

Puoi visualizzare l'anteprima delle connessioni implementando un renderer personalizzato che dispone di hook speciali per l'anteprima.

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

Nascondi l'anteprima

Il tuo IConnectionPreviewer deve essere in grado di nascondere le anteprime. Questo viene chiamato quando il blocco trascinato si sposta fuori dall'intervallo di tutte le connessioni, pertanto non dovrebbe essere mostrata un'anteprima. Viene inoltre chiamato appena prima che l'anteprima dell'anteprima sia eliminato.

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

Registrazione e utilizzo

Infine, una volta completata la creazione del tuo IConnectionPreviewer, dovrai registrarlo. In questo modo il renderer viene associato a una stringa in modo che tu possa passarla alla configurazione di iniezione. Puoi anche passare la classe IConnectionPreviewer (ovvero il costruttore) direttamente alla configurazione di iniezione.

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,
  },
};

Per ulteriori informazioni sulla registrazione, consulta Inserimento di sottoclassi.