إدارة العرض

يُعلم نظام إدارة العرض أداة العرض بوقت إعادة عرض العناصر. يتأكد من أنه عند تعديل الكتلة (على سبيل المثال، تعيين قيم الحقول، أو تتم إضافة المدخلات) يتم تحديث شكل القطعة للمطابقة.

حالات العناية

عليك التفاعل مع هذا النظام إذا كنت:

  • إضافة طرق إلى "Blockly" تؤدي إلى تعديل شكل القطعة.
  • إضافة طرق إلى Blockly تعتمد على الحجم أو الموضع المعدَّلَين معلومات عن أحد الأجزاء

آلية العمل

  1. إضافة المحتوى إلى "قائمة المحتوى التالي" تلقائيًا: عندما يتم تعديل حظر، يتم حظر "قوائم الانتظار" a لعرض هذه الكتلة. بعض الأمثلة على التعديلات التي تضع في قائمة انتظار العرض هي:

    • ضبط قيمة حقل
    • إضافة مُدخل أو إزالته
    • الاتصال بمربّع طفل أو إلغاء ربطه

  2. أنشئ مجموعة. عندما يتم وضع القالب في قائمة الانتظار، فإن نظام إدارة العرض وتضيفه، وجميع الوحدات الأساسية الخاصة به، إلى مجموعة من القطع التي يجب المشروع.

  3. اطلب معاودة الاتصال. بعد ذلك، يطلب نظام إدارة العرض استدعاء باستخدام requestAnimationFrame. يُطلِق المتصفّح مباشرةً هذا المرجع قبل رسم الإطار الحالي.

  4. إعادة عرض المجموعة (كشجرة). عند استدعاء requestAnimationFrame callback ، يعرض نظام إدارة العرض كلّ عنصر في المجموعة بدءًا من العناصر الطرفية ووصولاً إلى العناصر الجذرية. وهذا من شأنه التأكد من أن الأجزاء الفرعية لها معلومات دقيقة عن الحجم قبل عرض وحداتها الرئيسية، بحيث يمكن أن تمتد الكتل البرمجية حول أطفالها.

سبب نجاح هذه الطريقة

إنّ الانتظار لإعادة عرض المحتوى يوقف المعالجة إلى أن يتم رسم اللقطة الحالية مباشرةً، ما يسمح لنظام إدارة العرض بإلغاء تكرار طلبات العرض. إذا كانت القوالب فورًا، فقد يتم عرض الجزء نفسه بدون داعٍ عدة مرات على التوالي. بدلاً من ذلك، يتم تجميع طلبات العرض، يتم رسم كتلة تم تغييرها مرة واحدة فقط في نهاية الإطار، بعد أن تكون حالتها الانتهاء منه. تؤدي إزالة تكرار عمليات العرض إلى جعل Blockly أكثر فعالية.

على سبيل المثال، يؤدي إدراج كتلة واحدة بين كتلتين أخريين إلى إضافة 11 عملية عرض إلى "قائمة الانتظار"، ولكن يتم تنفيذ 3 عمليات فقط (عملية واحدة لكل كتلة). وهذا يعني تحسُّنًا في الأداء بمقدار 3.6 مرّة.

كيفية استخدام فئة التدقيق الجديدة

لن يكون عليك عادةً الاهتمام بنظام إدارة العرض، فإنها تعمل تلقائيًا عند تعديل قالب. ولكن هناك بعض الحالات التي عليك التفاعل معه مباشرة.

عدد مرات العرض في قائمة الانتظار

إذا كنت تضيف طريقة جديدة إلى Blockly من المفترض أن تعدّل شكل المربّع، عليك استدعاء BlockSvg.prototype.queueRender لإدراج معالجة المربّع في قائمة الانتظار.

الانتظار إلى أن تكتمل عمليات التصدير

إذا كنت بصدد إضافة طريقة جديدة إلى Blockly تتطلّب تعديل معلومات الحجم أو الموضع المتعلّقة بأحد الأجزاء، عليك انتظار اكتمال renderManagement.finishQueuedRenders() الوعد. يتم حلّ هذا الوعد بعد اكتمال أي عمليات عرض في انتظار المعالجة، أو على الفور إذا لم تكن هناك عمليات عرض في انتظار المعالجة.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

تشغيل عمليات العرض في قائمة الانتظار على الفور

إذا كنت تضيف طريقة جديدة إلى Blockly تتطلب تحديث المقاس أو المعلومات عن موضع الكتلة ولا يمكنك الانتظار حتى لتأطير أي عمليات عرض لاكتمالها، يمكنك استدعاء renderManagement.triggerQueuedRenders لفرض تنفيذ أي عمليات عرض في قائمة الانتظار فورًا.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

بوجه عام، لا تريد إجراء ذلك لأنه أقل أداءً. إنها فقط ضرورية في الحالات التي يسبب فيها التأخير تجربة سيئة للمستخدم. على سبيل المثال، تحتاج علامات الإدراج إلى معلومات عن موضع الإعلان، ومن المهم أن تقدّم علامات الإدراج للمستخدِمين ملاحظات فورية، حتى يتم بدء عملية عرض فورية.

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