تخصيص متقدم

تتيح لك Blockly تخصيص وظائف معيّنة من خلال استبدال فئات Blockly ذات الصلة.

فئات قابلة للاستبدال

يمكن استبدال فئات Blockly التالية:

فئة Blockly	الواجهة	اسم نوع السجل
Blockly.dragging.Dragger	Blockly.IDragger	blockDragger
Blockly.ConnectionChecker	Blockly.IConnectionChecker	connectionChecker
Blockly.InsertionMarkerPreviewer	Blockly.IConnectionPreviewer	connectionPreviewer
Blockly.HorizontalFlyout	Blockly.IFlyout	flyoutsHorizontalToolbox
Blockly.VerticalFlyout	Blockly.IFlyout	flyoutsVerticalToolbox
Blockly.MetricsManager	Blockly.IMetricsManager	metricsManager
Blockly.Toolbox	Blockly.IToolbox	toolbox
Blockly.VariableMap	Blockly.IVariableMap	variableMap
Blockly.VariableModel	Blockly.IVariableModel	--

للحصول على معلومات حول كيفية استبدال أداة عرض، اطّلِع على إنشاء أدوات عرض مخصّصة.

إنشاء صف بديل

لإنشاء فئة بديلة، نفِّذ الدوال في الواجهة المقابلة. يمكنك تنفيذ كل هذه الدوال في فئة جديدة، أو توسيع فئة Blockly وتجاوز الدوال التي تريد تغييرها فقط. الشرط الوحيد هو أن تنفّذ أنت (أو الفئة الأساسية) جميع الدوال في الواجهة وتلتزم بأي متطلبات موضّحة في التعليقات على الواجهة.

لتوضيح أنّك تستخدم واجهة معيّنة لأداة فحص الأنواع، أضِف تعليقًا توضيحيًا إلى صفك باستخدام علامة @implements {InterfaceName} JSDoc (في JavaScript) أو الكلمة الرئيسية implements (في TypeScript).

إخبار Blockly بفئة الاستبدال

هناك طريقتان لإعلام Blockly بفئة الاستبدال: تسجيلها كفئة تلقائية من نوعها (الطريقة المفضّلة) أو إدخالها باستخدام خيار الإعداد plugins.

تسجيل الصف البديل كصف تلقائي

الطريقة المفضّلة لإخبار Blockly عن فئة الاستبدال هي تسجيلها كإعداد تلقائي لنوعها. لإجراء ذلك، استدعِ الدالة Blockly.registry.register باستخدام الاسم Blockly.registry.DEFAULT واضبط المَعلمة opt_allowOverrides على true.

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

إدخال فئة الاستبدال

يمكنك أيضًا إدخال فئات بديلة باستخدام plugins خيار الإعداد. هذا عنصر يستخدِم أسماء أنواع السجلّ كأسماء سمات وفئات بديلة أو أسماء مسجّلة كقيم سمات.

(على الرغم من اسم السمة plugins، لا تحتاج فئتك إلى أن تكون مجمّعة وموزّعة من خلال npm مثل المكوّنات الإضافية المستخدَمة لتوسيع Blockly.)

إما أن تنقل صفك البديل إلى Blockly.inject:

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

أو سجِّل صفك باستخدام Blockly.registry.register ومرِّر الاسم المسجَّل إلى Blockly.inject. يكون ذلك مفيدًا إذا كنت تخزّن خيارات الإعدادات بتنسيق JSON فقط.

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', CustomMetricsManagerClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}