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

ב-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 נדרשת גם method 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);