複製貼上

複製貼上系統是由三個項目建構而成:ICopyable 物件、代表複製物件的 ICopyData,以及可將複製資料轉換回可複製的物件的 IPaster 物件。每個類型的 ICopyable 都需要相關聯的 IPaster,才能貼上該資料。

這類系統可透過內容選單選項鍵盤快速鍵向使用者顯示。

您很少需要導入自訂可複製或自訂貼上功能 (例如多重選取外掛程式跨分頁複製貼上外掛程式),因為通常會轉譯可複製的物件,而且您無法將新的轉譯物件新增至 Blockly。工作區中唯一可顯示的物件是區塊、氣泡和工作區註解。

實作可複製的

如要建立可複製的物件,您必須實作 ICopyable 介面。

可選取

ICopyable 介面會擴充 ISelectable 介面,因此您也需要實作這些方法和屬性。

因為鍵盤快速鍵會查看所選物件,以便判斷要複製哪些項目,因此必須能夠選取。

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

可複製

ICopyable 介面本身只有一個方法 toCopyData,可傳回可複製物件狀態的 JSON 可序列化表示法,可用於重新建立可複製物件。

複製資料也必須包含 paster 屬性,這個屬性保留與執行者相關聯的已註冊字串名稱,該字串應貼上此複製資料。如要進一步瞭解貼上器,請參閱「實作貼上器」。

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

實作貼上工具

如要建立過去的裝飾,您必須實作 IPaster 介面。它只有一個方法 paste,可接收要貼上的項目的複製資料、要貼上項目的工作區,以及選用的座標,也就是要貼上項目的位置。

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

註冊

實作貼上器後,您必須註冊貼上器,才能從其 paster 屬性中找到與指定複製資料相關聯的貼上器。

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());