Visualizzatori della connessione in anteprima

Un visualizzatore in anteprima della connessione crea un'anteprima visiva di una connessione in attesa. it indica dove sarà collegato il blocco di trascinamento una volta è caduto.

Il visualizzatore anteprima della connessione predefinito inserisce gli indicatori di inserimento dove si connetteranno i blocchi. Mette inoltre in evidenza le connessioni e fa scomparire effetto sui blocchi che verranno sostituiti e disconnessi.

Tipi di connessioni in attesa

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

Sostituzione

La sostituzione avviene quando viene stabilita una connessione sul blocco trascinato a una connessione che ha già un blocco e non esiste da nessuna parte reinserito il blocco note. Quando il blocco trascinato viene rilasciato, viene sostituito il blocco sostituito verrà disconnesso e il blocco trascinato verrà connesso al suo posto.

Per impostazione predefinita, lo indichiamo applicando un effetto di dissolvenza sul blocco sostituite.

Inserimento

L'inserimento avviene in due casi. Si verifica quando viene creata una connessione si collega a una connessione vuota. Succede quando del blocco trascinato è connesso a una connessione che ha già ma può essere inserito tra i due esistenti, in modo che l'elemento non viene scollegato.

Per impostazione predefinita, questo viene segnalato mediante la creazione di indicatori di inserimento ed evidenziando connessioni che si connetteranno.

Crea un visualizzatore di anteprima personalizzato

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

Costruzione e smaltimento

Devi implementare un costruttore e un metodo di eliminazione IConnectionPreviewer.

Il costruttore viene chiamato ogni volta che inizia il trascinamento di un blocco e viene passato il che viene trascinato. Se è necessario inizializzare uno stato basato 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. Per rimuovere qualsiasi stato quando l'istanza IConnectionPreviewer viene eliminata, dovrebbe farlo qui.

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

Crea l'anteprima

IConnectionPreviewer deve implementare la logica per l'anteprima visiva e connessioni a Internet.

Sostituzione

Per visualizzare l'anteprima delle sostituzioni, implementa 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 delle inserzioni, implementa il metodo previewConnection.

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

Se vuoi vedere un'anteprima diversa a seconda che il blocco trascinato sia collegato a un ingresso vuoto o inserito tra i blocchi, puoi controllare se al momento staticConn è connesso a un'altra connessione. Se staticConn è attualmente connesso, significa che draggedConn è 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 il CSS al blocco. Ad esempio, La dissolvenza sostitutiva predefinita viene attivata/disattivata 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 con 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 poter nascondere le anteprime. Questo viene chiamato quando il blocco trascinato si sposta fuori dall'intervallo di tutte le connessioni, quindi nessuna anteprima devono essere mostrati. Inoltre, viene chiamato poco prima che l'utente che visualizza l'anteprima venga eliminato.

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

Registrazione e utilizzo

Infine, una volta completata la creazione di IConnectionPreviewer, registrarlo. In questo modo il renderer viene associato a una stringa per consentirti e passarla alla configurazione di inserimento. Puoi anche passare Classe IConnectionPreviewer (ad es. costruttore) direttamente nella tua iniezione configurazione.

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, vedi Inserimento di sottoclassi.