סמל של תגובה לשינוי

אפשר לשנות את סמל התגובה המובנה. לדוגמה, אם רוצים לשנות את המראה של הבלון הקופץ של ההערה.

כדי לשנות את סמל התגובה, מרחיבים את CommentIcon, משנים את השיטות שנבחרו ב-ICommentIcon ורושמים את הסמל החדש.

הערה: ל-Blockly יש שלושה סוגים של סמלים מובנים: תגובות, אזהרות ושינויים. אפשר לשנות רק את סמל התגובה.

Extend CommentIcon

כדאי להתחיל בהארכת CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

החלפת שיטות ב-ICommentIcon וב-Icon

כדי להתאים אישית את הסמל, אפשר לבטל שיטות ב-ICommentIcon (כפי שמתואר בקטעים הבאים) וב-Blockly.icons.Icon (כפי שמתואר במאמר יצירת סמלים בהתאמה אישית). אל תבטלו את getType, שצריך להחזיר 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();
}

ICommentIcon דורש גם את השיטות getBubbleLocation ו-setBubbleLocation שמקבלות ומגדירות את המיקום של הבועה בסביבת העבודה.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

שמירה וטעינה

הסמל המותאם אישית של התגובה צריך להטמיע את הממשק ISerializable. המדינה צריכה להתאים לממשק CommentState.

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

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

מידע נוסף על סריאליזציה של סמלים זמין במאמר שמירה וטעינה של סמלים.

רישום הסמל

לבסוף, מבטלים את הרישום של סמל התגובה הקיים ורושמים את סמל התגובה שלכם כדי ש-Blockly יוכל ליצור מופע שלו. משתמשים במחרוזת 'comment' לביטול הרישום ובמחרוזת IconTypes.COMMENT לרישום.

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

אחרי שרושמים את הסמל, Blockly ישתמש בו במקום סמל ההערה המובנה, למשל כשהמשתמש לוחץ על 'הוספת הערה' בתפריט ההקשר או כשמפעילים את myBlock.setCommentText().