আইকন সহ পপ-আপ বুদবুদ ব্যবহার করুন

অন্তর্নির্মিত আইকনগুলি অতিরিক্ত তথ্য বা সম্পাদক প্রদর্শন করতে একটি পপ-আপ-বাবল-স্টাইল UI ব্যবহার করে। কাস্টম আইকনগুলি একটি সামঞ্জস্যপূর্ণ চেহারা এবং অনুভূতি বজায় রাখতে এই আচরণের প্রতিলিপিও করতে পারে।

যদি আপনার আইকনটি একটি বুদ্বুদ দেখায় তবে আপনাকে 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;
}