Prévisualisateurs de connexion

Un outil de prévisualisation de la connexion crée un aperçu visuel d'une connexion en attente. Il vous donne une indication de l'endroit où le bloc de glissement sera connecté lorsqu'il est en baisse.

L'outil de prévisualisation de la connexion par défaut place les repères d'insertion. où les blocs se connecteront. Il met également en évidence les connexions et applique un fondu sur les blocs qui seront remplacés et déconnectés.

Types de connexions en attente

Il existe deux types de connexions en attente. Dans un cas, le blocage supprimé remplace un bloc existant et ce dernier est déconnecté. Dans l'autre le bloc abandonné est inséré sans déconnecter les autres blocs.

Remplacement

Le remplacement se produit lorsqu'une connexion du bloc déplacé va se connecter à une connexion comportant déjà un bloc et qu'il n'y a nulle part où pour le réassocier. Lorsque le volume déplacé est déposé, le volume remplacé est déconnecté, et le bloc déplacé est connecté à sa place.

Par défaut, nous l'indiquons en appliquant un effet de fondu au bloc en cours remplacé.

Insertion

L'insertion se produit dans deux cas. Cela se produit lorsqu'une connexion se connectera à une connexion vide. Et cela se produit lorsqu'un sur le bloc déplacé va vers une connexion qui possède déjà mais il peut être inséré entre les deux blocs existants, de sorte que le bloc existant n'est pas déconnecté.

Par défaut, pour cela, nous créons des repères d'insertion et mettons en surbrillance les de connexions qui se connecteront.

Créer un outil de prévisualisation personnalisé

Si vous souhaitez utiliser un autre visuel pour prévisualiser les connexions en attente, vous pouvez créer une implémentation IConnectionPreviewer personnalisée ;

Construction et mise au rebut

Vous devez implémenter un constructeur et une méthode de suppression IConnectionPreviewer

Le constructeur est appelé dès qu'un glissement de bloc commence, et il est transmis à qui est déplacé. Si vous devez initialiser un état basé sur le vous pouvez le faire dans le constructeur.

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

La méthode dispose est appelée à la fin d'un déplacement de bloc. Si vous avez besoin de déréférencer tout état lorsque votre instance IConnectionPreviewer est supprimée, vous doit le faire ici.

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

Créer l'aperçu

Votre IConnectionPreviewer doit implémenter une logique pour la prévisualisation visuelle connexions externes.

Remplacement

Pour prévisualiser les remplacements, implémentez previewReplacement. .

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

Insertion

Pour prévisualiser les insertions, implémentez la méthode previewConnection.

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

Si vous souhaitez avoir un aperçu différent selon que le bloc déplacé est connecté à une entrée vide, ou inséré entre des blocs, vous pouvez vérifier si staticConn est actuellement connecté à une autre connexion. Si la staticConn est actuellement connectée, cela signifie que draggedConn est en cours inséré entre les blocs.

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

Aperçus CSS

Vous pouvez prévisualiser les connexions en appliquant le CSS au bloc. Par exemple, Le fondu de remplacement par défaut est activé en ajoutant la classe CSS blocklyReplaceable. au bloc.

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

Aperçus du moteur de rendu

Vous pouvez prévisualiser les connexions en implémentant un moteur de rendu personnalisé. avec des hooks d'aperçu spéciaux.

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

Masquer l'aperçu

Votre IConnectionPreviewer doit pouvoir masquer les aperçus. Elle s'appelle Lorsque le bloc déplacé se déplace en dehors de la plage des connexions, aucun aperçu n'est affiché. doit s'afficher. Il est également appelé juste avant la suppression de l'outil de prévisualisation.

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

Enregistrement et utilisation

Enfin, une fois que vous avez créé votre IConnectionPreviewer, l'enregistrer. Le moteur de rendu est alors associé à une chaîne transmettez-le à votre configuration d'injection. Vous pouvez également transmettre IConnectionPreviewer (le constructeur) directement à votre injection configuration.

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

Pour en savoir plus sur l'enregistrement, consultez la page Injecter des sous-classes