إنشاء نوع رمز جديد

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

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

التخلص من الرمز

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

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

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