連線預覽工具

連線預覽工具會為待處理的連線建立視覺預覽畫面。這項服務 會顯示拖曳方塊連接的位置 已捨棄。

預設連線預覽工具會放置插入標記 方塊將會相互連接這個模式也能醒目顯示連結，並淡出 對被取代並取消連結的區塊有何影響。

待處理連線的種類

待處理連線有兩種，在某個情況下 並取代現有封鎖條件，然後取消現有封鎖。另一個 就會在不影響其他區塊的情況下插入已捨棄的區塊。

替換

拖曳區塊上的連線開始連線時，就會執行取代作業 可連至已包含區塊的連線 才能重新附加拖放拖曳的方塊時，新的方塊會遭到取代 ，拖曳的方塊會中斷連線。

根據預設，我們會在此區塊上套用淡出效果 會遭到取代。

插入

插入作業會在兩種情況發生。當拖曳路徑上拖曳時 方塊將連至一個空白的連線。這項作業會在 拖曳區塊上的連線會連結至 但可以在兩個現有區塊之間插入 還是無法中斷連線

根據預設，我們會建立插入標記，並反白顯示 以互相連線

建立自訂預覽工具

如果想用不同的圖像來預覽待處理的連線，您可以 建立自訂 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 類別 (亦即建構函式) 直接附加至插入項目 此外還會從 0 自動調整資源配置 您完全不必調整資源調度設定

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

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