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

لإنشاء رمز مخصّص، عليك تنفيذ واجهة IIcon. يخبر هذا Blockly الطريقة التي تريد أن يتم عرض الرمز بها، وما تريده أن إذا تم النقر عليه، وما إلى ذلك

ننصحك بتصنيف الفئة التجريدية Icon ضمن فئة فرعية، توفّر عمليات تنفيذ تلقائية للعديد من الطرق في IIcon من واجهة pyplot.

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