連線預覽工具

連線預覽器會為待處理的連線建立視覺預覽畫面。這可讓您瞭解拖曳的區塊在放置時會連結至何處。

預設的連線預覽工具會在區塊連結處放置插入標記。它也會強調連線，並在將要取代和中斷的區塊上套用淡出效果。

內建預覽工具的示範

待處理連線的類型

有兩種待處理的連線。在某些情況下，已放置的區塊會取代現有區塊，而現有區塊會遭到中斷。在另一種情況下，系統會插入已刪除的區塊，但不會中斷其他區塊。

替換

當拖曳的區塊上的連線要連結至已包含區塊的連線，且現有區塊無處可重新連結時，就會發生替換。拖曳的方塊放置後，系統會中斷已取代的方塊，並將拖曳的方塊連結至該位置。

根據預設，我們會在要替換的區塊上加入淡出效果，以此表示這項操作。

內建替換預覽畫面

插入

插入作業會在兩種情況下發生。當拖曳的區塊上的連線要連結至空白的連線時，就會發生這種情況。當拖曳的區塊連線至已連結區塊時，就會發生這種情況。但這類連線可插入兩個現有區塊之間，因此現有區塊不會中斷連線。

根據預設，我們會建立插入標記，並醒目顯示要連結的連線，以此表示這項資訊。

內建插入預覽畫面

建立自訂預覽工具

如果您想使用其他視覺效果來預覽待處理的連線，可以建立自訂 IConnectionPreviewer 實作項目。

建造和處置

您需要為 IConnectionPreviewer 實作建構函式和處置方法。

每當區塊拖曳作業開始時，系統就會呼叫建構函式，並傳遞正在拖曳的區塊。如果您需要根據區塊初始化任何狀態，可以在建構函式中執行這項操作。

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

每當拖曳區塊結束時，系統都會呼叫 dispose 方法。如果您需要在 IConnectionPreviewer 例項處置時解參任何狀態，請在此執行此操作。

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

建立預覽畫面

您的 IConnectionPreviewer 需要實作用於視覺預覽連線的邏輯。

替換

如要預覽替換項目，請實作 previewReplacement 方法。

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

插入

如要預覽插入內容，請實作 previewConnection 方法。

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

如果您想根據拖曳的方塊是否連結到空白輸入內容，或是否插入方塊之間，顯示不同的預覽畫面，可以檢查 staticConn 目前是否已連結到其他連線。如果 staticConn 目前已連線，則 draggedConn 會插入區塊之間。

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 預覽

您可以將 CSS 套用至區塊，預覽連線。舉例來說，您可以將 blocklyReplaceable CSS 類別新增至區塊，藉此切換預設的替換淡出效果。

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

轉譯器預覽

您可以實作具有特殊預覽鉤子的自訂轉譯器，藉此預覽連線。

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

隱藏預覽畫面

IConnectionPreviewer 必須能夠隱藏預覽畫面。當拖曳的區塊超出所有連線的範圍時，系統就會呼叫這個方法，因此不會顯示預覽畫面。系統也會在預覽器處置前呼叫此方法。

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

註冊和使用

最後，完成 IConnectionPreviewer 建立作業後，您需要註冊該項目。這會將轉譯器與字串建立關聯，以便您將其傳遞至設定選項。您也可以直接將 IConnectionPreviewer 類別 (即建構函式) 傳遞至設定選項。

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

如要進一步瞭解註冊功能，請參閱「插入子類別」。