יצירת בועות בהתאמה אישית

בועה היא ממשק משתמש קופץ שנראה כמו בועת דיבור שרואים בקומיקס. יש להם "זנב" שמפנה לבלוק, ו "ראש" שמכיל רכיבי svg שרירותיים.

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

יצירת התצוגה

תצוגת בועה כוללת את כל רכיבי ה-svg שנמצאים בתוך ה'ראש' של הבועה. הרכיבים האלה נוצרים בתוך בנאי הבועה, והם צריכים להיות צאצאים של הרכיב this.contentContainer כדי שהם ינוקו באופן אוטומטי כשהסמל מושמד.

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

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

הגדרת הגודל

יש להגדיר את גודל הבועה באמצעות setSize כדי שהגבול החיצוני יקיף בצורה נכונה את תוכן הבועה. יש להגדיר אותה במהלך הבנייה ובכל פעם שגודל האלמנטים של ממשק המשתמש משתנה.

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

נפטרים מהבועה

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

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}