Verbindungsvorschauen

Mit dieser Option wird eine visuelle Vorschau einer ausstehenden Verbindung erstellt. Damit erhalten Sie einen Hinweis darauf, wo der Ziehblock verbunden wird, wenn er gelöscht wird.

In der Standardvorschau werden Einfügungsmarkierungen an den Stellen platziert, an denen die Blöcke verbunden werden. Außerdem werden Verbindungen hervorgehoben und Blöcke, die ersetzt und getrennt werden, ausgeblendet.

Arten von ausstehenden Verbindungen

Es gibt zwei Arten von ausstehenden Verbindungen. In einem Fall ersetzt der gelöschte Block einen vorhandenen Block und der vorhandene Block wird getrennt. Im anderen Fall wird der gelöschte Block eingefügt, ohne andere Blöcke zu trennen.

Ersetzen

Ersetzt wird, wenn eine Verbindung auf dem gezogenen Block mit einer Verbindung verbunden wird, die bereits einen Block hat und der vorhandene Block nirgendwo wieder angehängt werden kann. Wenn der gezogene Block entfernt wird, wird die Verbindung zum ersetzten Block aufgehoben und an seiner Stelle wird der gezogene Block verbunden.

Dies wird standardmäßig durch einen Ausblendungseffekt auf den zu ersetzenden Block angezeigt.

Einfügen

Das Einfügen erfolgt in zwei Fällen. Es tritt auf, wenn eine Verbindung auf dem gezogenen Block mit einer leeren Verbindung verbunden wird. Dies geschieht, wenn eine Verbindung für den gezogenen Block zu einer Verbindung führt, die bereits einen Block hat, aber zwischen den beiden vorhandenen Blöcken eingefügt werden kann, damit der bestehende Block nicht getrennt wird.

Dazu erstellen wir standardmäßig Einfügungsmarkierungen und heben die Verbindungen hervor, die verbunden werden.

Benutzerdefinierte Vorschau erstellen

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

Bau und Entsorgung

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

Der Konstruktor wird immer dann aufgerufen, wenn das Ziehen eines Blocks beginnt, und ihm wird der gezogene Block übergeben. Wenn Sie einen auf dem Block basierenden Status initialisieren müssen, 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 eines Blocks endet. Wenn Sie bei der Löschung Ihrer IConnectionPreviewer-Instanz einen Zustand dereferenzieren müssen, sollten Sie dies hier tun.

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

Vorschau erstellen

Ihr IConnectionPreviewer muss eine Logik für die visuelle Vorschau von Verbindungen implementieren.

Ersetzen

Implementieren Sie die Methode previewReplacement, um eine Vorschau von Ersetzungen zu sehen.

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

Einfügen

Implementieren Sie die Methode previewConnection, um eine Vorschau von Einfügungen anzusehen.

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

Wenn Sie eine andere Vorschau anzeigen möchten, je nachdem, ob der gezogene Block mit einer leeren Eingabe verbunden ist oder ob er zwischen Blöcken eingefügt wird, können Sie prüfen, ob staticConn derzeit mit einer anderen Verbindung verbunden ist. Wenn staticConn derzeit verbunden ist, wird draggedConn 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 sich eine Vorschau von Verbindungen ansehen, indem Sie CSS auf den Block anwenden. Zum Ein-/Ausschalten der Standardausblendung wird beispielsweise die CSS-Klasse blocklyReplaceable in den Block eingefügt.

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

Renderer-Vorschauen

Sie können sich eine Vorschau von Verbindungen ansehen, indem Sie einen benutzerdefinierten Renderer mit speziellen Vorschau-Hooks implementieren.

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

Vorschau ausblenden

Dein IConnectionPreviewer muss die Möglichkeit haben, Vorschauen auszublenden. Dies wird aufgerufen, wenn der gezogene Block aus dem Bereich aller Verbindungen entfernt wird, sodass keine Vorschau angezeigt werden sollte. Sie wird auch unmittelbar vor der Entsorgung der Vorschau aufgerufen.

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

Registrierung und Nutzung

Nachdem Sie die IConnectionPreviewer erstellt haben, müssen Sie sie registrieren. Dadurch wird der Renderer mit einem String verknüpft, sodass Sie ihn an Ihre Injection-Konfiguration übergeben können. Sie können die Klasse IConnectionPreviewer (d.h. den Konstruktor) auch direkt an Ihre Injection-Konfiguration übergeben.

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 finden Sie unter Unterklassen einfügen.