Tùy chỉnh nâng cao

Blockly cho phép bạn tuỳ chỉnh một số chức năng bằng cách thay thế các lớp Blockly tương ứng.

Lớp có thể thay thế

Bạn có thể thay thế các lớp Blockly sau:

Lớp Blockly Giao diện Tên loại sổ đăng ký
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 --

Để biết thông tin về cách thay thế một trình kết xuất, hãy xem phần Tạo trình kết xuất tuỳ chỉnh.

Tạo một lớp thay thế

Để tạo một lớp thay thế, hãy triển khai các hàm trong giao diện tương ứng. Bạn có thể triển khai tất cả các hàm này trong một lớp mới hoặc mở rộng lớp Blockly và chỉ ghi đè các hàm mà bạn muốn thay đổi. Yêu cầu duy nhất là bạn (hoặc lớp cơ sở) phải triển khai tất cả các hàm trong giao diện và tuân thủ mọi yêu cầu được mô tả trong phần nhận xét trên giao diện.

Để cho trình kiểm tra kiểu biết rằng bạn triển khai một giao diện cụ thể, hãy chú thích lớp của bạn bằng thẻ @implements {InterfaceName} JSDoc (trong JavaScript) hoặc từ khoá implements (trong TypeScript).

Cho Blockly biết về lớp thay thế của bạn

Có hai cách để cho Blockly biết về lớp thay thế của bạn: đăng ký lớp đó làm lớp mặc định của loại (nên dùng) hoặc chèn lớp đó bằng cách sử dụng lựa chọn cấu hình plugins.

Đăng ký lớp thay thế làm lớp mặc định

Cách tốt nhất để cho Blockly biết về lớp thay thế của bạn là đăng ký lớp đó làm mặc định cho loại của lớp. Để thực hiện việc này, hãy gọi Blockly.registry.register bằng tên Blockly.registry.DEFAULT và đặt tham số opt_allowOverrides thành true.

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

Chèn lớp thay thế

Bạn cũng có thể chèn các lớp thay thế bằng cách sử dụng lựa chọn cấu hình plugins. Đây là một đối tượng sử dụng tên loại đăng ký làm tên thuộc tính và các lớp thay thế hoặc tên đã đăng ký làm giá trị thuộc tính.

(Mặc dù có tên thuộc tính plugins, nhưng lớp của bạn không cần được đóng gói và phân phối thông qua npm như các trình bổ trợ dùng để mở rộng Blockly.)

Truyền lớp thay thế của bạn đến Blockly.inject:

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

Hoặc đăng ký lớp của bạn bằng cách sử dụng Blockly.registry.register và truyền tên đã đăng ký đến Blockly.inject. Điều này sẽ hữu ích nếu bạn lưu trữ các lựa chọn cấu hình dưới dạng JSON thuần tuý.

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

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