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

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

إذا كان رمزك يعرض فقاعة تفسيرية، يجب تنفيذ واجهة 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);
}

التعامل مع سحب المربّع

عندما يتغير مكان الرمز، لا تتحرك الفقاعة التفسيرية تلقائيًا. عليك إما تعديل موقع الفقاعة التفسيرية أو إخفاؤها. ويمكن إجراء ذلك من داخل طريقة onLocationChange في واجهة IIcon.

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

إعادة مستوى رؤية الفقاعة

تتطلب واجهة IHasBubble أيضًا تنفيذ طريقة isBubbleVisible التي تعرض ما إذا كانت الفقاعة التفسيرية مرئية أم لا.

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