কাস্টম আইকন তৈরি করুন

একটি কাস্টম আইকন তৈরি করতে আপনাকে IIcon ইন্টারফেসটি ইমপ্লিমেন্ট করতে হবে। এটি Blockly-কে বলে দেয় যে আপনি আপনার আইকনটি কীভাবে রেন্ডার করতে চান, ক্লিক করা হলে এটি কী করবে, ইত্যাদি।

আমরা Icon অ্যাবস্ট্রাক্ট ক্লাসটিকে সাবক্লাস করার পরামর্শ দিই, কারণ এটি ইতিমধ্যেই IIcon ইন্টারফেসের অনেক মেথডের ডিফল্ট ইমপ্লিমেন্টেশন প্রদান করে।

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

আইকনের ধরণ নির্দিষ্ট করুন

getType মেথডটি আইকনের ধরন নির্দেশকারী একটি মান রিটার্ন করে। এটি সিরিয়ালাইজেশনের জন্য আইকনটি রেজিস্টার করতে এবং getIcon থেকে আইকনটি পুনরুদ্ধার করতে ব্যবহৃত হয়।

জাভাস্ক্রিপ্ট

getType() {
  return new Blockly.icons.IconType('my_icon');
}

টাইপস্ক্রিপ্ট

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

আইকনের ভিউ তৈরি করুন

আইকনের ভিউ বলতে ব্লকটিতে থাকা SVG এলিমেন্টগুলোকে বোঝায়।

ভিউটি প্রারম্ভিক করুন

initView মেথডটি হলো সেই জায়গা যেখানে আপনি আপনার আইকনের SVG এলিমেন্টগুলো তৈরি করেন, যেগুলো ব্লকের মধ্যে থাকে। নতুন এলিমেন্টগুলোকে this.svgRoot এলিমেন্টের চাইল্ড করা উচিত, যাতে আইকনটি ডেস্ট্রয় হয়ে গেলে সেগুলো স্বয়ংক্রিয়ভাবে মুছে যায়।

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

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

আকার ফেরত দিন

getSize মেথডটি আইকনের আকার রিটার্ন করে, যাতে রেন্ডারার ব্লকটিকে এর জন্য যথেষ্ট প্রশস্ত করে তৈরি করতে পারে।

আকারটি যথেচ্ছ 'ওয়ার্কস্পেস ইউনিট'-এ পরিমাপ করা হয় (যা ওয়ার্কস্পেসের স্কেল পরিবর্তনের সাথে সাথে পরিবর্তিত হয় না)।

getSize() {
  return new Blockly.utils.Size(16, 16);
}

অর্ডার সেট করুন

ব্লকের মধ্যে আইকনগুলোর একটি নির্দিষ্ট ক্রম থাকে। উদাহরণস্বরূপ, বিল্ট-ইন মিউটেটর আইকনগুলো সবসময় কমেন্ট আইকনগুলোর সামনে দেখানো হয়, যেগুলো আবার ওয়ার্নিং আইকনগুলোর সামনে দেখানো হয়।

getWeight মেথড দ্বারা প্রত্যাবর্তিত মান দ্বারা ক্রমটি নিয়ন্ত্রিত হয়। অধিক ধনাত্মক ওয়েটযুক্ত আইকনগুলো কম ধনাত্মক ওয়েটযুক্ত আইকনগুলোর পরে রেন্ডার করা হয়।

getWeight() {
  return 10;
}

দ্রষ্টব্য: ওজন শুধুমাত্র তখনই যাচাই করা হয় যখন আইকনটি ব্লকে যুক্ত করা হয়, তাই ডাইনামিক ওজন সমর্থিত নয়।

onclick আচরণ বাস্তবায়ন করুন

অনেক আইকনই ইন্টারেক্টিভ এবং সেগুলোতে ক্লিক করলে কিছু একটা ঘটে। উদাহরণস্বরূপ, বিল্ট-ইন আইকনগুলোতে ক্লিক করলে একটি বাবল দেখা যায়। এটি বাস্তবায়ন করতে আপনি onClick মেথডটি ব্যবহার করতে পারেন।

onClick() {
  // Do something when clicked.
}

ব্লক পরিবর্তনে সাড়া দিন

কিছু আইকন ব্লকের পরিবর্তনেও সাড়া দিতে চায়, বিশেষ করে সম্পাদনাযোগ্যতা এবং সংকুচিত অবস্থার পরিবর্তনে।

সম্পাদনাযোগ্যতা

ব্লকটি সম্পাদনাযোগ্য কি না তার উপর নির্ভর করে যদি আপনার আইকনের আচরণ ভিন্ন হওয়া প্রয়োজন হয় (উদাহরণস্বরূপ, ব্লকটি সম্পাদনাযোগ্য না হলে আইকনটি ক্লিকযোগ্য না হওয়া), তাহলে updateEditable মেথডটি ইমপ্লিমেন্ট করুন। ব্লকটির সম্পাদনাযোগ্য অবস্থা পরিবর্তিত হলে এই মেথডটি স্বয়ংক্রিয়ভাবে কল হয়।

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

পতনশীলতা

ব্লকটি সংকুচিত থাকলে কিছু আইকন দেখানো হয়, কিন্তু ডিফল্টরূপে সেগুলো দেখানো হয় না। আপনি যদি আপনার আইকনটি দেখাতে চান, তাহলে isShownWhenCollapsed মেথডটিকে ওভাররাইড করে true রিটার্ন করুন।

isShownWhenCollapsed() {
  return true;
}

এবং তারপর updateCollapsed মেথডটি ওভাররাইড করুন।

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

আইকনটি বাতিল করুন

আইকনগুলো ডিসপোজ করার সময় যেকোনো ডম এলিমেন্ট বা এক্সটার্নাল রেফারেন্স মুছে ফেলা উচিত। ডিফল্টভাবে, this.svgRoot এ যা কিছু যুক্ত করা হয় তা ধ্বংস হয়ে যায়, কিন্তু অন্যান্য রেফারেন্স ম্যানুয়ালি মুছে ফেলার প্রয়োজন হয়। এই কাজটি dispose মেথডের মধ্যে করা উচিত।

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}