覆寫內建圖示

Blockly 有三種內建圖示：註解、警告和更動子。

註解圖示無法覆寫。也就是說，當您呼叫 myBlock.setCommentText() 等方法時，可以指示 Blockly 將自己的註解圖示類別例項化。例如，您希望留言的彈出式對話框看起來不同。

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

註解圖示

如要覆寫註解圖示，您需要建立實作 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 介面。狀態應符合 CommentState 介面。

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);