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

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

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

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

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

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

  // Wait for queued renders to finish so that the icon will be correctly
  // positioned before displaying the bubble.
  await Blockly.renderManagement.finishQueuedRenders();

  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);
}

ब्लॉक को खींचने और छोड़ने से जुड़ी समस्या ठीक करें

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

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

बबल की 'किसको दिखे' सेटिंग दिखाएं

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

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