إنشاء عارض جديد

ملاحظة: إذا لم تكن قد قرأت مستندات مفاهيم العارض أو إكمال الدرس التطبيقي حول ترميز العارضين المخصّصين الذي ننصحك بتنفيذها أولاً.

لإنشاء عارض مخصّص، يجب تصنيف Renderer ضمن فئة فرعية. الصف. راجِع مستندات مفاهيم العارض للاطّلاع على مزيد من المعلومات. معلومات حول ماهية العارض ووظيفته.

class CustomRenderer extends Blockly.blockRendering.Renderer {
  constructor() {
    super();
  }
}

وبدون أي تخصيص، سيبدو العارض التلقائي على النحو التالي:

يمكنك أيضًا ضبط فئة فرعية لأحد برامج العرض المضمَّنة الأخرى. ثم تجاوز أجزاء منها.

class CustomRenderer extends Blockly.thrasos.Renderer {
  constructor() {
    super();
  }
}

تصنيف مكونات العارض الأخرى ضمن فئات فرعية

ويتم تحديد الشكل الفعلي للقطعة من خلال المكونات الفرعية للعارض.

توفر الفئة Renderer تلقائيًا إصدارات العمل من كل مكوّنات العارض. يتيح لك هذا تعديل مكونًا واحدًا، دون الحاجة إلى القلق بشأن العناصر الأخرى.

على سبيل المثال، إذا كنت تريد تغيير أشكال الاتصالات، يمكنك إلغاء الثوابت بدون الحاجة إلى لمس المكونات الأخرى.

ويمكنك الاطّلاع على مستندات مكوِّنات العارض لمعرفة المزيد. المعلومات حول ما يفعله كل مكون فردي.

إلغاء طرق المصنع

بعد تصنيف مكوّنات العارض فرعيًا، عليك إجراء ما يلي: إلغاء طرق المصنع Renderer للمكونات التي إلى فئة فرعية. يتيح ذلك لأداة العرض توصيل المكوّنات المختلفة بشكل صحيح

هناك طريقة لكل نوع من أنواع المكونات:

• makeConstants_
• makeRenderInfo_
• makePathObject (ملاحظة: لا تتوفّر شرطة سفلية)
• makeDrawer_

تسجيل العارض

وأخيرًا، بعد الانتهاء من إنشاء العارض المخصّص، لتسجيله. يؤدي هذا إلى ربط العارض بسلسلة لتتمكن من ضبطها إلى إعدادات الحقن.

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

const workspace = Blockly.inject(blocklyDiv, {
  renderer: 'custom_renderer',
});