覆寫內建圖示

Blockly 有三種內建圖示：註解、警告和異動項目。

註解圖示可覆寫。這意味著您可以指示 Blockly 如要呼叫自己的註解圖示類別，例如 myBlock.setCommentText()。舉例來說，假設您需要 該留言的彈出式泡泡介面看起來也不一樣。

警告和可變動者圖示無法覆寫。

註解圖示

如要覆寫註解圖示，您必須建立自訂圖示， ICommentIcon 介面，然後進行註冊。

基本導入

新增註解專屬邏輯之前，請先完成 基本導入。

類型

getType 方法必須傳回註解圖示 IconType。

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

文字

ICommentIcon 介面要求註解含有文字。 getText 方法必須傳回註解的文字。setText 方法 必須設定註解的文字並更新所有影像內容。

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

泡泡

自訂註解圖示必須導入 IHasBubble 介面 支援序列化作業即使圖示從技術上沒有以泡泡為依據 應將瀏覽權限資訊儲存在課程中 都會進行維護否則在載入時將會遺失使用者的資訊 並儲存註解，記錄註解是否為開啟狀態。

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

如要進一步瞭解對話框，請參閱「使用彈出式說明圖示」。

ICommentIcon 介面也需要 getBubbleSize 方法，該方法會傳回以下值： 大小，以及用來設定該尺寸的 setBubbleSize。先前提過 儲存狀態也會是如此

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

儲存並載入

自訂註解圖示必須實作 ISerializable 存取 API狀態應符合 CommentState 存取 API

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

如需更多有關圖示序列化的資訊，請參閱 儲存及載入圖示。

註冊

最後，您必須註冊圖示， Blockly 可以將其例項化。成為 請務必使用 IconTypes.COMMENT 類型。

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);