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

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

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

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

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

يمكنك أيضًا تصنيف إحدى برامج العرض المضمنة الأخرى ثم إلغاء أجزاء منها.

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

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

ويتم تحديد الشكل الفعلي للكتلة من خلال المكوّنات الفرعية الخاصة بالعارض.

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

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

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

إلغاء الإعدادات الأصلية

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

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

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

تسجيل العارض

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

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

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