মন্তব্য আইকন ওভাররাইড

আপনি অন্তর্নির্মিত মন্তব্য আইকন ওভাররাইড করতে পারেন. উদাহরণস্বরূপ, আপনি মন্তব্যের পপ-আপ বুদ্বুদটিকে অন্যরকম দেখতে চাইতে পারেন৷

মন্তব্য আইকন ওভাররাইড করতে, CommentIcon প্রসারিত করুন, ICommentIcon এ নির্বাচিত পদ্ধতিগুলি ওভাররাইড করুন এবং আপনার নতুন আইকন নিবন্ধন করুন৷

দ্রষ্টব্য: ব্লকলিতে তিন ধরণের বিল্ট-ইন আইকন রয়েছে: মন্তব্য, সতর্কতা এবং মিউটেটার। শুধুমাত্র মন্তব্য আইকন ওভাররিডেবল.

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

CommentIcon প্রসারিত করে শুরু করুন।

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ICommentIcon এবং আইকনে ওভাররাইড পদ্ধতি

আপনার আইকন কাস্টমাইজ করতে, আপনি ICommentIcon (নিম্নলিখিত বিভাগে বর্ণিত) এবং Blockly.icons.Icon ( কাস্টম আইকন তৈরি করুন এ বর্ণিত) পদ্ধতিগুলিকে ওভাররাইড করতে পারেন। getType ওভাররাইড করবেন না, যা অবশ্যই Blockly.icons.IconType.COMMENT ফেরত দেবে।

পাঠ্য

ICommentIcon ইন্টারফেসের জন্য মন্তব্যে পাঠ্য থাকা প্রয়োজন। getText পদ্ধতিটি অবশ্যই মন্তব্যের পাঠ্যটি ফিরিয়ে দেবে। setText পদ্ধতিতে অবশ্যই মন্তব্যের পাঠ্য সেট করতে হবে এবং যেকোনো ভিজ্যুয়াল আপডেট করতে হবে।

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

বুদবুদ

আপনার কাস্টম মন্তব্য আইকন অবশ্যই সিরিয়ালাইজেশন সমর্থন করতে IHasBubble ইন্টারফেস প্রয়োগ করতে হবে। এমনকি যদি আপনার আইকনে প্রযুক্তিগতভাবে একটি বুদবুদ না থাকে, তবে আপনার ক্লাসে দৃশ্যমানতার তথ্য সংরক্ষণ করা উচিত যাতে সংরক্ষিত অবস্থা বজায় থাকে। অন্যথায় আপনি ব্যবহারকারীর কাছ থেকে তথ্য হারাবেন যদি আপনি একটি সংরক্ষণ লোড করেন যাতে মন্তব্যটি খোলা ছিল কিনা তা অন্তর্ভুক্ত।

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

বুদবুদ সম্পর্কে আরও তথ্যের জন্য, পপ-আপ বুদবুদ ব্যবহার করুন দেখুন।

ICommentIcon ইন্টারফেসের জন্য একটি getBubbleSize পদ্ধতি প্রয়োজন যা একটি আকার প্রদান করে এবং একটি setBubbleSize যা এটি সেট করে। আপনার আইকনে প্রযুক্তিগতভাবে একটি বুদবুদ না থাকলেও সংরক্ষণের অবস্থার আগের একই যুক্তি এখানেও প্রযোজ্য।

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

ICommentIcon জন্য getBubbleLocation এবং setBubbleLocation পদ্ধতিও প্রয়োজন, যা কর্মক্ষেত্রে বুদবুদের অবস্থান পেতে এবং সেট করে।

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

সংরক্ষণ করুন এবং লোড করুন

আপনার কাস্টম মন্তব্য আইকন অবশ্যই ISerializable ইন্টারফেস বাস্তবায়ন করবে। রাষ্ট্রের উচিত CommentState ইন্টারফেসের সাথে সঙ্গতিপূর্ণ।

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
    x: this.bubbleLocation.x,
    y: this.bubbleLocation.y,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
  this.setBubbleLocation(new Blockly.utils.Coordinate(state.x, state.y));
}

আইকন সিরিয়ালাইজেশন সম্পর্কে আরও তথ্যের জন্য আইকন সংরক্ষণ এবং লোড দেখুন।

আপনার আইকন নিবন্ধন

অবশেষে, বিদ্যমান মন্তব্য আইকনটি নিবন্ধনমুক্ত করুন এবং আপনার মন্তব্য আইকন নিবন্ধন করুন যাতে ব্লকলি এটিকে ইনস্ট্যান্টিয়েট করতে পারে। রেজিস্ট্রেশনের জন্য 'comment' স্ট্রিং এবং নিবন্ধনের জন্য IconTypes.COMMENT ব্যবহার করুন।

Blockly.icons.registry.unregister('comment');
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);

আপনি আপনার আইকনটি নিবন্ধন করার পরে, Blockly এটি অন্তর্নির্মিত মন্তব্য আইকনের জায়গায় ব্যবহার করবে, যেমন ব্যবহারকারী যখন প্রসঙ্গ মেনুতে "মন্তব্য যোগ করুন" ক্লিক করেন বা আপনি myBlock.setCommentText() কল করেন।