יצירת סוג סמל חדש

כדי ליצור סמל מותאם אישית, עליך להטמיע את הממשק של IIcon. הקוד הזה מציין ל-Blockly איך אתם רוצים שהסמל שלכם יוצג, מה תרצו שהוא יעשה אם ילחצו עליו וכו'.

מומלץ לעשות מחלקה משנית למחלקה המופשטת Icon, כי היא כבר כוללת הטמעות ברירת מחדל של הרבה שיטות בממשק IIcon.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ציון סוג הסמל

השיטה getType מחזירה ערך שמייצג את סוג הסמל. הוא משמש לרישום הסמל לעריכה בסדרה, ולאחזור הסמל מ-getIcon.

JavaScript

  getType() {
    return new Blockly.icons.IconType('my_icon');
  }

TypeScript

  getType(): Blockly.icons.IconType<MyIcon> {
    return new Blockly.icons.IconType<MyIcon>('my_icon');
  }

יצירת התצוגה של הסמל

תצוגת הסמל מתייחסת לרכיבי ה-SVG הקיימים בבלוק.

אתחול התצוגה

השיטה initView היא המקום שבו יוצרים את רכיבי ה-SVG של הסמל שנמצאים בבלוק. רכיבים חדשים צריכים להיות צאצאים של האלמנט this.svgRoot, כדי שהם ינוקו באופן אוטומטי כשהסמל מושמד.

המודול Blockly.utils.dom מספק ממשק נקי ליצירת קובצי SVG.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

החזרת המידה

השיטה getSize מחזירה את גודל הסמל, כך שהמעבד יכול להגדיל את הבלוק כך שהוא יהיה רחב מספיק.

הגודל נקבע לפי 'יחידות של Workspace' שרירותיות (שלא משתנות בהתאם לקנה המידה של סביבת העבודה).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

קביעת הסדר

לסמלים יש סדר סטטי בתוך הבלוק. לדוגמה, סמלי השינויים המובנים תמיד מוצגים לפני סמלי התגובות ומוצגים לפני סמלי האזהרה.

הסדר נשלט על ידי הערך שהוחזר על ידי method getWeight. סמלים עם משקלים חיוביים יותר מוצגים אחרי סמלים עם משקלים פחות חיוביים.

getWeight() {
  return 10;
}

הערה: המשקל מסומן רק כשהסמל מצורף לבלוק, ולכן אין תמיכה במשקלים דינמיים.

הטמעה של התנהגות מסוג קליק

סמלים רבים הם אינטראקטיביים ומבצעים פעולה כלשהי כשלוחצים עליהם. לדוגמה, לחיצה על הסמלים המובנים תציג בועה. כדי לעשות זאת, אפשר להשתמש ב-method onClick.

onClick() {
  // Do something when clicked.
}

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

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

אפשרות עריכה

אם אופן הפעולה של הסמל צריך להיות שונה אם הבלוק ניתן לעריכה או לא (למשל, אם אי אפשר לערוך את הבלוק), תוכלו להטמיע את ה-method updateEditable. השיטה הזו מופעלת באופן אוטומטי כשהסטטוס שניתן לעריכה של החסימה משתנה.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

מצב מכווץ

חלק מהסמלים מוצגים כשהבלוק מכווץ, אבל כברירת מחדל הם לא מוצגים. כדי שהסמל יוצג, צריך לשנות את השיטה isShownWhenCollapsed כדי להחזיר את הערך true.

isShownWhenCollapsed() {
  return true;
}

ואז לשנות את השיטה updateCollapsed.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

הסרת הסמל

הסמלים צריכים לנקות את רכיבי ה-dom או ההפניות החיצוניות כשהם נמחקים. כברירת מחדל, כל מה שמוסיפים אל this.svgRoot נמחק, אבל צריך לנקות הפניות אחרות באופן ידני. צריך לעשות זאת ב-method dispose.

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}