رمز إلغاء التعليق

يمكنك تجاهل رمز التعليق المضمّن. على سبيل المثال، قد تريد أن يظهر المربع المنبثق الخاص بالتعليق بشكل مختلف.

مربّع مع تمييز أيقونة التعليق

لتجاوز رمز التعليق، عليك توسيع CommentIcon، وتجاوز الطرق المحدّدة في ICommentIcon، وتسجيل الرمز الجديد.

Extend CommentIcon

ابدأ بتمديد CommentIcon.

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

تجاوز الطرق في ICommentIcon وIcon

لتخصيص الرمز، يمكنك تجاهل الطرق في 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));
}

لمزيد من المعلومات حول تسلسل الرموز، يُرجى الاطّلاع على حفظ الرموز وتحميلها.

تسجيل الرمز

أخيرًا، ألغِ تسجيل رمز التعليق الحالي وسجِّل رمز التعليق الخاص بك حتى يتمكّن Blockly من إنشاء مثيل له. استخدِم السلسلة 'comment' لإلغاء التسجيل وIconTypes.COMMENT للتسجيل.

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

بعد تسجيل الرمز، سيستخدمه Blockly بدلاً من رمز التعليق المضمّن، مثلاً عندما ينقر المستخدم على "إضافة تعليق" في قائمة السياق أو عند استدعاء myBlock.setCommentText().