يحدِّد نظام إدارة العرض أداة العرض الوقت الذي يجب فيه عرض الحظر. فإنه يتأكد من أنه عند تعديل كتلة (على سبيل المثال، تعيين قيم الحقول، أو إضافة المدخلات) يتم تحديث شكل الكتلة لمطابقتها.
حالات الرعاية
يجب التفاعل مع هذا النظام في حال:
- تتم إضافة طرق إلى Blackly تعدِّل شكل المربّع.
- إضافة طرق إلى حظر تعتمد على الحجم المُعدَّل أو معلومات تحديد الموضع حول قطعة معيّنة
آلية العمل
إضافة إلى قائمة المحتوى التالي تلقائيًا: كلما تم تعديل كتلة، يقوم Bluely "بإدراج" عرض لهذه المجموعة في قائمة الانتظار. في ما يلي بعض الأمثلة على التعديلات التي تضع العرض في قائمة انتظار:
- تعيين قيمة الحقل
- إضافة إدخال أو إزالته
- ربط مجمّع أطفال أو إلغاء ربطه
إنشاء مجموعة: عندما يتم وضع كتلة في قائمة الانتظار، يضيفها نظام إدارة العرض وجميع كتلها الرئيسية إلى مجموعة من الكتل التي يجب عرضها.
اطلب معاودة الاتصال. بعد ذلك، يطلب نظام إدارة العرض معاودة الاتصال باستخدام
requestAnimationFrame. ويطلب المتصفح هذا رد الاتصال مباشرةً قبل رسم الإطار الحالي.اعرض المجموعة (على شكل شجرة). عند استدعاء استدعاء
requestAnimationFrame، يعرض نظام إدارة العرض كل كتلة في المجموعة بدءًا من مجموعات الورق وحتى كتل الجذر. يضمن ذلك توفّر معلومات دقيقة حول الحجم في قوالب الحِزم الأصلية قبل عرض قوالب الحِزم الأصلية عليها.
سبب نجاح هذا التنسيق
إنّ انتظار عرض المربّعات حتى قبل رسم الإطار الحالي مباشرةً يتيح لنظام إدارة العرض إزالة تكرار طلبات العرض. إذا تم عرض القوالب على الفور دائمًا، قد يتم عرض نفس القطعة عدة مرات على التوالي بدون داعٍ. بدلاً من ذلك، يتم تجميع طلبات العرض، ويتم رسم كل كتلة متغيرة فقط مرة واحدة في نهاية الإطار، بعد الانتهاء من حالتها. من خلال إزالة البيانات المكررة عن عمليات العرض، تصبح لعبة Blockly أكثر فعالية.
على سبيل المثال، يؤدي إدراج قالب واحد بين قائمتين أخريين إلى عرض 11 قالبًا، لكن تظهر 3 فقط في الواقع (واحدة لكل كتلة). وهذا يؤدي إلى تعزيز الأداء بمقدار 3.6 مرة.
كيفية استخدام فئة التدقيق الجديدة
لن تحتاج عادةً إلى الاهتمام بنظام إدارة العرض، لأنه يعمل تلقائيًا عند تعديل قالب. لكن هناك بعض الحالات التي يتعين عليك فيها التفاعل معها مباشرة.
عمليات العرض في قائمة المحتوى التالي
إذا كنت تضيف طريقة جديدة إلى تطبيق Openly والتي من المفترض أن تعدّل شكل الحظر، عليك استدعاء الدالة BlockSvg.prototype.queueRender لإضافة الحظر إلى قائمة الانتظار.
انتظار انتهاء عمليات العرض
إذا كنت تضيف طريقة جديدة إلى تطبيق Blockly تتطلّب تعديل المقاس أو
معلومات تحديد موضع المجموعة، عليك انتظار
وعد renderManagement.finishQueuedRenders(). ويتم حل هذا الوعد بعد اكتمال أي عمليات عرض في قائمة الانتظار أو على الفور في حال عدم وجود أي عمليات عرض في قائمة الانتظار.
import * as renderManagement from './renderManagement.js';
function async myNewMethod() {
block.somethingThatModifiesTheShape();
// Await the promise.
await renderManagement.finishQueuedRenders();
myThingThatReliesOnPositioningInfo();
}
تشغيل عمليات العرض في قائمة الانتظار على الفور
إذا كنت تضيف طريقة جديدة إلى حظر تتطلب تعديل حجم القطعة أو موضعها ولا يمكنك الانتظار حتى اكتمال الإطار التالي لإكمال أي عمليات عرض، يمكنك طلب الرمز renderManagement.triggerQueuedRenders لفرض أي عمليات عرض في قائمة الانتظار على الفور.
import * as renderManagement from './renderManagement.js';
function async myNewMethod() {
block.somethingThatModifiesTheShape();
// Trigger an immediate render.
renderManagement.triggerQueuedRenders();
myThingThatReliesOnPositioningInfo();
}
بوجه عام، لا تريد إجراء ذلك لأنه أقل أداءًا. إنه ضروري فقط في الحالات التي يتسبب فيها التأخير في تجربة مستخدم سيئة. على سبيل المثال، تحتاج علامات الإدراج إلى معلومات عن موضع الإدراج، ومن المهم أن توفّر علامات الإدراج للمستخدمين ملاحظات فورية، حتى يشغّلوا عرضًا فوريًا.
وهناك أيضًا بضعة مواضع أساسية تؤدي فيها إلى تشغيل عمليات العرض الفورية لأسباب تتعلق بالتوافق مع الأنظمة القديمة. ومن المقرر إزالتها في الإصدار 11.