שינוי סמלים מובנים

ב-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. המצב צריך להתאים לממשק של 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);