Verbindungsvorschauen

Ein Tool für die Verbindungsvorschau erstellt eine visuelle Vorschau einer ausstehenden Verbindung. Es zeigt an, wo der Ziehblock verbunden wird, wurde verworfen.

Die Standardvorschau für Verbindungen platziert Platzhaltermarkierungen. wo sich Bausteine verbinden. Verbindungen werden hervorgehoben und Auswirkungen auf Blöcke, die ersetzt und getrennt werden.

Arten von ausstehenden Verbindungen

Es gibt zwei Arten von ausstehenden Verbindungen. In einem Fall kann der heruntergefallene Block ersetzt einen vorhandenen Block und die bestehende Blockierung wird getrennt. Im anderen wird der heruntergesetzte Block eingeführt, ohne andere Blöcke zu trennen.

Ersatz

Ersetzt wird, wenn eine Verbindung am gezogenen Block hergestellt wird. die bereits blockiert ist, sodass die bestehenden zum erneuten Anhängen. Sobald der verschobene Block entfernt wird, wird getrennt und der verschobene Block wird an seiner Stelle verbunden.

Standardmäßig wird dies durch Ausblendung des betreffenden Blocks angegeben. ersetzt.

Einfügen

Das Einfügen erfolgt in zwei Fällen. Das passiert, wenn eine Verbindung Block stellt eine Verbindung zu einer Verbindung her, die leer ist. Und das passiert, wenn ein Verbindung des per Drag-and-drop eingefügten Blocks zu einer Verbindung, die bereits -Block, kann aber zwischen den beiden vorhandenen Blöcken eingefügt werden, sodass der vorhandene Block wird nicht getrennt.

Standardmäßig wird dies durch das Erstellen von Einfügungsmarkierungen und das Hervorheben der Verbindungen, die eine Verbindung herstellen.

Benutzerdefinierte Vorschau erstellen

Wenn Sie für die Vorschau ausstehender Verbindungen ein anderes visuelles Element verwenden möchten, können Sie eine benutzerdefinierte IConnectionPreviewer-Implementierung erstellen.

Bau und Entsorgung

Sie müssen einen Konstruktor und eine Entsorgungsmethode für Ihre IConnectionPreviewer

Der Konstruktor wird immer dann aufgerufen, wenn ein Ziehvorgang eines Blocks beginnt, und er wird an den Parameter das gezogen wird. Wenn Sie einen Status basierend auf dem können Sie dies im -Konstruktor tun.

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

Die Methode dispose wird immer dann aufgerufen, wenn ein Ziehvorgang im Block endet. Bei Bedarf alle Status aufheben, wenn die IConnectionPreviewer-Instanz entsorgt wird, sollten Sie das hier tun.

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

Vorschau erstellen

In IConnectionPreviewer muss eine Logik für die visuelle Vorschau implementiert werden Verbindungen.

Ersatz

Für eine Vorschau der Ersetzungen musst du die previewReplacement implementieren. .

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

Einfügen

Wenn Sie eine Vorschau von Einfügungen ansehen möchten, müssen Sie die Methode previewConnection implementieren.

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

Wenn Sie eine andere Vorschau anzeigen möchten, je nachdem, oder zwischen Blöcken eingefügt wird, können Sie prüfen, ob staticConn gerade mit einer anderen Verbindung verbunden ist. Wenn staticConn gerade verbunden ist, wird draggedConn gerade verbunden. zwischen Blöcken eingefügt.

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

CSS-Vorschauen

Sie können eine Vorschau der Verbindungen anzeigen, indem Sie CSS auf den Block anwenden. Beispiel: Der Parameter Das standardmäßige Ersetzungsüberblenden wird umgeschaltet, indem die CSS-Klasse blocklyReplaceable hinzugefügt wird an den Block zu richten.

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

Renderer-Vorschauen

Sie können eine Vorschau der Verbindungen anzeigen lassen, indem Sie einen benutzerdefinierten Renderer implementieren mit speziellen Vorschau-Hooks.

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

Vorschau ausblenden

Ihr IConnectionPreviewer muss Vorschauen ausblenden können. Diese wird aufgerufen, wenn der gezogene Block sich aus dem Bereich aller Verbindungen hinausbewegt, sodass keine Vorschau angezeigt werden soll. Es wird auch direkt vor dem Entfernen des Previewer aufgerufen.

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

Registrierung und Nutzung

Wenn Sie Ihr IConnectionPreviewer erstellt haben, um sie zu registrieren. Dadurch wird der Renderer mit einem String verknüpft, sodass und übergeben es an Ihre Injection-Konfiguration. Sie können auch die IConnectionPreviewer-Klasse (d.h. Konstruktor) direkt in Ihre Injection einfügen Konfiguration.

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

Weitere Informationen zur Registrierung findest du unter Abgeleitete Klassen einfügen.