إنشاء رموز مخصّصة

لإنشاء رمز مخصّص، عليك تنفيذ واجهة 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.

JavaScript

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

TypeScript

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.
  }
}

حالة التصغير

تظهر بعض الرموز عندما يتم تصغير الكتلة، ولكن لا يتم عرضها تلقائيًا. إذا أردت عرض الرمز، عليك إلغاء طريقة 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.
}

إتلاف الرمز

يجب أن تنظّف الرموز أي عناصر DOM أو مراجع خارجية عند إتلافها. تلقائيًا، يتم إتلاف أي عناصر يتم إلحاقها بـ this.svgRoot، ولكن يجب تنظيف المراجع الأخرى يدويًا. يجب إجراء ذلك ضمن الـ dispose طريقة.

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

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