একটি নতুন আইকন টাইপ তৈরি করুন

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

আমরা 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() {
  // Do something when clicked.
}

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

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

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

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

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

ধসে পড়া

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

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();
}