مدیریت رندر

سیستم مدیریت رندر به رندر کننده می گوید که چه زمانی بلوک ها را دوباره رندر کند. این اطمینان حاصل می کند که وقتی یک بلوک اصلاح می شود (مثلاً مقادیر فیلد تنظیم می شوند یا ورودی ها اضافه می شوند) شکل بلوک برای مطابقت به روز می شود.

چه زمانی مراقبت کنیم

شما باید با این سیستم تعامل داشته باشید اگر:

افزودن متدهایی به Blockly که شکل بلوک را تغییر می دهند.
افزودن روش هایی به Blockly که بر اندازه به روز شده یا اطلاعات موقعیت یابی یک بلوک متکی هستند.

چگونه کار می کند

صف به صورت خودکار هر زمان که یک بلوک اصلاح شود، Blockly یک رندر برای آن بلوک "صف" می کند. چند نمونه از تغییراتی که یک رندر را در صف قرار می دهند عبارتند از:
- تنظیم مقدار یک فیلد
- افزودن یا حذف یک ورودی
- اتصال یا جدا کردن بلوک کودک
یک مجموعه ایجاد کنید. هنگامی که یک بلوک در صف قرار می گیرد، سیستم مدیریت رندر آن را و تمام بلوک های اصلی آن را به مجموعه ای از بلوک ها اضافه می کند که باید دوباره رندر شوند.
درخواست پاسخ به تماس سپس سیستم مدیریت رندر با استفاده از requestAnimationFrame درخواست پاسخ به تماس می کند. این فراخوانی درست قبل از ترسیم فریم فعلی توسط مرورگر فراخوانی می شود.
مجموعه را دوباره رندر کنید (به صورت درخت). هنگامی که درخواست پاسخگویی requestAnimationFrame فراخوانی می شود، سیستم مدیریت رندر هر بلوک مجموعه را از بلوک های برگ به بلوک های ریشه رندر می کند. این اطمینان حاصل می‌کند که بلوک‌های فرزند قبل از رندر شدن بلوک‌های اصلی، اطلاعات اندازه دقیقی دارند تا بلوک‌های والد بتوانند در اطراف فرزندان خود کشیده شوند.

چرا کار می کند چگونه کار می کند

انتظار برای رندر مجدد بلوک ها تا درست قبل از ترسیم فریم فعلی به سیستم مدیریت رندر اجازه می دهد تا درخواست های رندر را حذف کند. اگر بلوک‌ها همیشه فورا رندر می‌شدند، ممکن است همان بلوک به‌طور غیرضروری چندین بار پشت سر هم رندر شود. در عوض درخواست‌های رندر دسته‌بندی می‌شوند و هر بلوک تغییر یافته فقط یک بار در انتهای فریم ترسیم می‌شود، پس از نهایی شدن حالت آن. حذف عملیات رندر کردن، 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 حذف شوند.