內容選單

內容選單包含您可以對工作區中某些元素採取的動作清單。按一下滑鼠右鍵和長按畫面就會顯示內容選單。

如想新增使用者可以執行的新動作類型，建議您建立自訂內容選單選項。例如，整理工作區中的所有區塊，或下載區塊的圖片。如果您認為不常使用這個動作，不妨使用內容選單。否則，建議您建立方便存取動作的方式。

導入新選項

如要實作新的內容選單選項，您必須提供 RegistryItem 介面。

id 屬性應為專用字串，用於指出內容選單選項的功能。

const deleteOption = {
  id: 'deleteElement',
};

scopeType 屬性會指示 Blockly 選單選項可能會顯示的內容，以及要傳遞至 displayText、preconditionFn 和 callback 的資訊。內容選單的範圍可限定為區塊、工作區註解和工作區。

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

如果您想讓內容選單在多個範圍內運作，請複製內容選單選項，並為每個範圍重新定義範圍參數。

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

displayText 是選單選項中應向使用者顯示的內容。顯示文字可以是字串、HTML，或可傳回字串或 HTML 的函式。

const deleteOption = {
  displayText: 'Delete block',
};

如果您想顯示 Blockly.Msg 的翻譯，就需要使用函式。如果您嘗試直接指派這個值，系統可能不會載入訊息，因此您會改為取得 undefined 的值。

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

如果您使用函式，也會傳遞 Scope 值，讓您存取內容選單相關聯的元素 (例如區塊或工作區)。您可以在顯示文字中加入元素相關資訊。

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

weight 會決定內容選單項目的顯示順序。清單中的正數值越低，正值越低。 (您可以想像，權重較高的選項是「較大」的選項，因此它們會衝到底部)。

const deleteOption = {
  weight: 10;
}

內建內容選單選項的權重會從 1 開始遞增，加 1。

除了 scopeType 之外，您也可以使用 preconditionFn 來限制內容選單選項的顯示方式和方式。

這個方法應會傳回一組字串：'enabled'、'disabled' 或 'hidden'。

preconditionFn 也會傳遞 Scope，可用於判斷選項的狀態。

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

callback 屬性會執行內容選單項目的操作。並傳遞 Scope 和 PointerEvent。PointerEvent 是觸發開啟內容選單的原始事件，而不是選取選項的事件。您可以利用事件找出點擊發生的位置。舉例來說，您可以在點擊位置建立新區塊。

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

您需要先註冊才能使用內容選單選項。這個步驟應該在載入網頁後執行一次。可能會在插入工作區前後發生。

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

區塊提供額外的修改內容選單，可用來覆寫其 customContextMenu 屬性。這個方法會採用 ContextMenuOption 物件的陣列 (從已註冊的選單項目中彙整)，然後修改該陣列以決定最終顯示的選項組合。

工作區也提供類似的 configureContextMenu 方法。

如要移除內容選單中的選項，您可以使用 ID 取消註冊。

Blockly.ContextMenuRegistry.registry.unregister('someID');

預設選項的 ID 位於 contextmenu_items.ts 中。

如要修改現有的選項，可以從註冊資料庫取得項目，然後就地修改。

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';