استخدام فقاعات منبثقة مع رموز

تستخدم الأيقونات المضمنة واجهة مستخدم على شكل فقاعة منبثقة لعرض معلومات إضافية أو والمحررين. يمكن للرموز المخصصة أيضًا تكرار هذا السلوك، للحفاظ على الشكل والأسلوب المتسقين.

إذا كان يجب أن يعرض رمزك فقاعة، فأنت بحاجة إلى تنفيذ 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;
}