কাস্টম বুদবুদ তৈরি করুন

একটি বুদ্বুদ হল একটি পপ আপ UI যা দেখতে একটি স্পিচ বাবলের মতো যা আপনি একটি কমিকে দেখতে পাবেন৷ তাদের একটি "টেইল" আছে যা একটি ব্লকের দিকে নির্দেশ করে এবং একটি "মাথা" যাতে স্বেচ্ছাচারী এসভিজি উপাদান রয়েছে।

যদি অন্তর্নির্মিত বুদবুদগুলি আপনার ব্যবহারের ক্ষেত্রে কাজ না করে, তাহলে আপনি Bubble শ্রেণীকে সাবক্লাস করে একটি কাস্টম বুদবুদ তৈরি করতে পারেন।

ভিউ তৈরি করুন

বুদবুদের দৃশ্য হল বুদবুদের "মাথার" ভিতরে থাকা সমস্ত svg উপাদান। এই উপাদানগুলি বুদবুদের কন্সট্রাক্টরের ভিতরে তৈরি করা হয়েছে, এবং এগুলি this.contentContainer উপাদানের সন্তান হওয়া উচিত যাতে আইকনটি ধ্বংস হয়ে গেলে এগুলি স্বয়ংক্রিয়ভাবে পরিষ্কার হয়ে যায়৷

Blockly.utils.dom মডিউল svgs ইনস্ট্যান্টিয়েট করার জন্য একটি পরিষ্কার ইন্টারফেস প্রদান করে।

class MyBubble extends Blockly.bubbles.Bubble {
  // See the Blockly.bubbles.Bubble class for information about what these
  // parameters are.
  constructor(workspace, anchor, ownerRect) {
    super(workspace, anchor, ownerRect);

    this.text = Blockly.utils.dom.createSvgElement(
          Blockly.utils.Svg.TEXT,
          {'class': 'my-bubble-class'},
          this.contentContainer);
    const node = Blockly.utils.dom.createTextNode('some text');
    this.text.appendChild(node);
  }
}

আকার সেট করুন

বুদবুদের আকার setSize ব্যবহার করে সেট করা দরকার যাতে বাইরের সীমানাটি বুদবুদের বিষয়বস্তুকে সঠিকভাবে ঘিরে রাখতে পারে। এটি নির্মাণের সময় সেট করা উচিত এবং যখনই UI উপাদানগুলির আকার পরিবর্তন হয়।

constructor(workspace, anchor, ownerRect) {
  // Create the view elements... (see above)

  const bbox = this.text.getBBox();
  this.setSize(
    new Blockly.utils.Size(
      bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
      bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
    ),
    true
  );
}

বুদবুদ নিষ্পত্তি

বুদবুদ যেকোন ডোম উপাদান বা বাহ্যিক রেফারেন্স পরিষ্কার করা উচিত যখন তারা নিষ্পত্তি করা হয়। ডিফল্টরূপে, this.contentContainer এ যুক্ত করা যেকোনো কিছু ধ্বংস হয়ে যায়, তবে অন্যান্য রেফারেন্স ম্যানুয়ালি পরিষ্কার করতে হবে। এটি dispose পদ্ধতির মধ্যে করা উচিত।

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}