استخدام الفقاعات المنبثقة

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

إذا كان من المفترض أن يعرض رمزك فقاعة، عليك تنفيذ واجهة 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 أيضًا تنفيذ طريقة bubbleIsVisible تُظهر ما إذا كانت الفقاعة مرئية أم لا.

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