ลูกโป่งคือ UI แบบป๊อปอัปที่ดูเหมือนลูกโป่งคำพูดที่คุณจะเห็นในหนังสือการ์ตูน โดยจะมี "หาง" ที่ชี้ไปยังบล็อก และ "หัว" ที่มีองค์ประกอบ 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
เพื่อให้ขอบด้านนอกล้อมรอบเนื้อหาของลูกโป่งได้อย่างเหมาะสม โดยควรตั้งค่าระหว่างการสร้าง และเมื่อใดก็ตามที่ขนาดขององค์ประกอบ UI เปลี่ยนแปลง
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
);
}
กำจัดฟองสบู่
ลูกโป่งควรทำความสะอาดองค์ประกอบ Dom หรือการอ้างอิงภายนอกเมื่อกำจัด โดยค่าเริ่มต้น ระบบจะทำลายทุกสิ่งที่ต่อท้าย this.contentContainer
แต่จะต้องลบข้อมูลอ้างอิงอื่นๆ ด้วยตนเอง การดําเนินการนี้ควรทำภายในเมธอด dispose
dispose() {
super.dispose();
// Dispose of other references.
this.myArbitraryReference.dispose();
}