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

כדי ליצור סמל מותאם אישית, צריך להטמיע את הממשק 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);
  }
}

ציון סוג הסמל

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

JavaScriptTypeScript

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

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

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

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

אתחול התצוגה

ה-method 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.
  );
}

החזרת המידה

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

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

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

הגדרת הסדר

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

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

getWeight() {
  return 10;
}

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

הטמעת ההתנהגות לאחר קליק

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

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

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

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

יכולת עריכה

אם הסמל אמור להתנהג באופן שונה, בהתאם לסטטוס של הבלוק ניתנת לעריכה או לא (לדוגמה, לא ניתן ללחיצה כאשר הבלוק לא אפשר לערוך), מטמיעים את השיטה 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 מקבל יימחקו, אך יהיה צורך לנקות קובצי עזר אחרים באופן ידני. זה צריך להיות מתבצעת בשיטה dispose.

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

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