Quản lý quá trình kết xuất

Hệ thống quản lý kết xuất sẽ cho trình kết xuất biết thời điểm kết xuất lại các khối. Mã này đảm bảo rằng khi một khối được sửa đổi (ví dụ: đặt các giá trị của trường, hoặc dữ liệu đầu vào được thêm vào) hình dạng của khối sẽ được cập nhật cho phù hợp.

Thời điểm cần chăm sóc

Bạn cần tương tác với hệ thống này nếu:

  • Thêm các phương thức vào Blockly để sửa đổi hình dạng của khối.
  • Thêm các phương thức vào Blockly dựa trên thông tin cập nhật về kích thước hoặc vị trí của một khối.

Cách hoạt động

  1. Tự động đưa vào hàng đợi. Mỗi khi một khối được sửa đổi, Blockly sẽ "thêm hàng đợi" a hiển thị cho khối đó. Sau đây là một số ví dụ về các nội dung sửa đổi đưa vào hàng đợi kết xuất:

    • Đặt giá trị của trường
    • Thêm hoặc xoá thông tin đầu vào
    • Kết nối hoặc ngắt kết nối một khối con

  2. Tạo một tập hợp. Khi một khối được đưa vào hàng đợi, hệ thống quản lý kết xuất thêm khối đó và tất cả các khối mẹ của thuộc tính này vào một tập hợp khối cần được kết xuất lại.

  3. Yêu cầu gọi lại. Sau đó, hệ thống quản lý kết xuất sẽ yêu cầu một bằng cách sử dụng requestAnimationFrame. Lệnh gọi lại này nhận được được trình duyệt gọi ngay trước khi vẽ khung hiện tại.

  4. Kết xuất lại tập hợp (dưới dạng cây). Khi lệnh gọi lại requestAnimationFrame được gọi, hệ thống quản lý kết xuất sẽ kết xuất mọi khối trong tập hợp từ khối lá đến khối gốc. Điều này đảm bảo rằng các khối con có thông tin kích thước chính xác trước khi các khối mẹ được kết xuất để các khối mẹ có thể kéo giãn xung quanh các khối con.

Lý do khiến tính năng này hoạt động

Việc chờ kết xuất lại các khối cho đến ngay trước khi khung hình hiện tại được vẽ cho phép hệ thống quản lý kết xuất loại bỏ các yêu cầu kết xuất trùng lặp. Nếu các khối luôn kết xuất ngay lập tức, nên có thể cùng một khối sẽ được kết xuất một cách không cần thiết nhiều lần trong một hàng. Thay vào đó, các yêu cầu kết xuất được phân theo lô và mỗi yêu cầu khối đã thay đổi chỉ được vẽ một lần ở cuối khung, sau khi trạng thái của nó đã hoàn tất. Việc loại bỏ trùng lặp các thao tác kết xuất giúp Blockly hoạt động hiệu quả hơn nhiều.

Ví dụ: việc chèn một khối giữa hai khối khác sẽ tạo ra 11 lượt kết xuất, nhưng chỉ có 3 lượt kết xuất thực sự xảy ra (một lượt cho mỗi khối). Tức là hiệu suất tăng 3,6 lần.

Cách sử dụng

Thường thì bạn không cần quan tâm đến hệ thống quản lý kết xuất vì nó sẽ tự động hoạt động khi bạn sửa đổi một khối. Tuy nhiên, có một vài trường hợp bạn phải tương tác trực tiếp với nó.

Kết xuất hàng đợi

Nếu bạn đang thêm một phương thức mới vào Blockly, phương thức này sẽ cập nhật hình dạng của nên bạn cần gọi BlockSvg.prototype.queueRender để xếp hàng đợi kết xuất chặn.

Chờ quá trình kết xuất hoàn tất

Nếu bạn thêm một phương thức mới vào Blockly và phương thức này yêu cầu bạn phải cập nhật kích thước hoặc thông tin định vị của một khối, bạn phải đợi renderManagement.finishQueuedRenders() lời hứa. Lời hứa này sẽ hết hạn sau mọi lượt kết xuất đang chờ xử lý đã hoàn tất hoặc ngay lập tức nếu không có lượt kết xuất nào đang xếp hàng chờ.

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

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

Kích hoạt lượt hiển thị trong hàng đợi ngay lập tức

Nếu bạn thêm một phương thức mới vào Blockly và phương thức này yêu cầu bạn phải cập nhật kích thước hoặc thông tin định vị về một khối, và bạn không thể đợi đến khung hình cho bất kỳ quá trình kết xuất nào hoàn tất, bạn có thể gọi renderManagement.triggerQueuedRenders để buộc mọi kết xuất trong hàng đợi diễn ra ngay lập tức.

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

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

Nhìn chung, bạn sẽ không muốn thực hiện việc này vì làm như vậy sẽ kém hiệu quả hơn. Điều này chỉ cần thiết trong trường hợp độ trễ gây ra trải nghiệm không tốt cho người dùng. Ví dụ: điểm chèn cần thông tin định vị và điều quan trọng là điểm chèn phải cung cấp cho người dùng phản hồi tức thì để kích hoạt quá trình kết xuất tức thì.

Ngoài ra, có một vài vị trí trong lõi sẽ kích hoạt quá trình kết xuất tức thì vì lý do tương thích ngược. Chúng tôi dự định loại bỏ các tính năng này trong phiên bản 11.