आइकॉन के साथ पॉप-अप बबल का इस्तेमाल करना

बिल्ट-इन आइकॉन अतिरिक्त जानकारी या एडिटर दिखाने के लिए पॉप-अप-बबल-स्टाइल यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करते हैं. कस्टम आइकॉन एक जैसा व्यवहार बनाए रखने के लिए इस व्यवहार की नकल कर सकते हैं.

अगर आपका आइकॉन बबल दिखाता है, तो आपको IHasBubble इंटरफ़ेस लागू करना होगा.

बबल दिखाएं या छिपाएं

बबल का इस्तेमाल करने वाले आइकॉन को, बबल दिखाने या छिपाने के लिए, setBubbleVisible तरीका लागू करना चाहिए.

// Implement the setBubbleVisible method of the IHasBubble interface.
setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

  if (visible) {
    this.myBubble = new MyBubble(this.getAnchorLocation(), this.getOwnerRect());
  } else {
    this.myBubble?.dispose();
  }
}

// Implement helper methods for getting the anchor location and bounds.

// Returns the location of the middle of this icon in workspace coordinates.
getAnchorLocation() {
  const size = this.getSize();
  const midIcon = new Blockly.utils.Coordinate(size.width / 2, size.height / 2);
  return Blockly.utils.Coordinate.sum(this.workspaceLocation, midIcon);
}

// Returns the rect the bubble should avoid overlapping, i.e. the block this
// icon is appended to.
getOwnerRect() {
  const bbox = this.sourceBlock.getSvgRoot().getBBox();
  return new Blockly.utils.Rect(
      bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width);
}

ब्लॉक को खींचकर छोड़ने का मुकाबला करें

जब आइकॉन जगह में बदलाव करता है, तो बबल अपने-आप उसके साथ नहीं हिलता. आपको बबल की जगह अपडेट करनी होगी या उसे छिपाना होगा. ऐसा IIcon इंटरफ़ेस के onLocationChange तरीके में किया जा सकता है.

onLocationChange(blockOrigin) {
  super.onLocationChange(blockOrigin);
  this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}

बबल दिखाना दिखाएं

IHasBubble इंटरफ़ेस के लिए, आपको एक isBubbleVisible तरीका लागू करना होगा जिससे यह पता चले कि बबल दिखेगा या नहीं.

isBubbleVisible() {
  return !!this.myBubble;
}