Trình đơn theo bối cảnh chứa danh sách các thao tác bạn có thể thực hiện liên quan đến một số phần tử trong không gian làm việc. Một trình đơn theo bối cảnh sẽ xuất hiện khi người dùng nhấp chuột phải và nhấn và giữ.
Bạn nên tạo tuỳ chọn trình đơn theo bối cảnh tuỳ chỉnh nếu muốn thêm một loại thao tác mới mà người dùng có thể thực hiện. Ví dụ: sắp xếp tất cả các khối trong không gian làm việc hoặc tải hình ảnh của các khối xuống. Nếu bạn cho rằng thao tác này sẽ không được sử dụng thường xuyên, thì trình đơn theo bối cảnh là nơi phù hợp để đặt thao tác này. Nếu không, bạn nên tạo một cách dễ khám phá hơn để truy cập thao tác.
Triển khai một lựa chọn mới
Để triển khai tuỳ chọn trình đơn theo bối cảnh mới, bạn cần đáp ứng giao diện RegistryItem.
Mã nhận dạng
Thuộc tính id phải là một chuỗi duy nhất cho biết chức năng của tuỳ chọn trình đơn theo bối cảnh.
const deleteOption = {
id: 'deleteElement',
};
Phạm vi
Thuộc tính scopeType cho Blockly biết ngữ cảnh mà tuỳ chọn trình đơn có thể xuất hiện và thông tin nào cần truyền đến displayText, preconditionFn và callback của đối tượng đó. Trình đơn ngữ cảnh có thể được xác định phạm vi là khối, nhận xét trong không gian làm việc và không gian làm việc.
const deleteOption = {
scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};
Nếu muốn trình đơn theo bối cảnh hoạt động trong nhiều phạm vi, bạn nên sao chép lựa chọn trình đơn theo bối cảnh và xác định lại tham số phạm vi cho từng phạm vi.
const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;
Văn bản hiển thị
displayText là nội dung sẽ hiển thị cho người dùng trong tuỳ chọn trình đơn. Văn bản hiển thị có thể là một chuỗi hoặc HTML hay một hàm trả về một chuỗi hoặc HTML.
const deleteOption = {
displayText: 'Delete block',
};
Nếu muốn hiện bản dịch từ Blockly.Msg, bạn cần sử dụng hàm. Nếu bạn cố gắng chỉ định trực tiếp giá trị, thì tin nhắn có thể sẽ không được tải và bạn sẽ nhận được giá trị là undefined.
const deleteOption = {
displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};
Nếu bạn sử dụng một hàm, hàm đó cũng sẽ được truyền giá trị Scope để cho phép bạn truy cập vào phần tử liên kết với trình đơn theo bối cảnh (ví dụ: khối hoặc không gian làm việc). Bạn có thể sử dụng thuộc tính này để thêm thông tin về phần tử đó vào văn bản hiển thị.
const deleteOption = {
displayText: (scope) => `Delete ${scope.block.type} block`,
}
Cân nặng
weight xác định thứ tự hiển thị các mục trong trình đơn theo bối cảnh.
Các giá trị dương hơn sẽ xuất hiện ở vị trí thấp hơn trong danh sách các giá trị ít dương hơn.
(Bạn có thể hình dung rằng các lựa chọn có trọng số cao hơn sẽ "nặng" hơn nên sẽ chìm xuống dưới cùng.)
const deleteOption = {
weight: 10;
}
Trọng số cho các tuỳ chọn trên trình đơn theo bối cảnh tích hợp sẽ tăng dần theo thứ tự bắt đầu từ 1 và tăng thêm 1.
Điều kiện tiên quyết
Ngoài scopeType, bạn có thể sử dụng preconditionFn để hạn chế thời điểm và cách thức hiển thị tuỳ chọn trình đơn theo bối cảnh.
Phương thức này sẽ trả về một trong tập hợp các chuỗi: 'enabled', 'disabled' hoặc 'hidden'.
| Giá trị | Nội dung mô tả | Bài đăng có hình ảnh |
|---|---|---|
| đang bật | Cho thấy tuỳ chọn này đang hoạt động. | 
|
| đã vô hiệu | Cho thấy tuỳ chọn này không hoạt động. | 
|
| ẩn | Ẩn tuỳ chọn này. |
preconditionFn cũng được truyền Scope mà bạn có thể sử dụng để xác định trạng thái của tuỳ chọn.
const deleteOption = {
preconditionFn: (scope) => {
if (scope.block.isDeletable()) {
return 'enabled';
}
return 'disabled';
}
}
Số nhận cuộc gọi lại
Thuộc tính callback thực hiện thao tác đối với mục trong trình đơn theo bối cảnh. Phương thức này được truyền Scope và PointerEvent. PointerEvent là sự kiện ban đầu đã kích hoạt việc mở trình đơn ngữ cảnh, không phải là sự kiện đã chọn một tuỳ chọn.
Bạn có thể sử dụng sự kiện này để tìm ra nơi lượt nhấp xảy ra. Ví dụ: điều này cho phép bạn tạo một khối mới tại vị trí nhấp.
const deleteOption = {
callback: (scope, e) => {
scope.block.dispose();
}
}
Đăng ký
Để sử dụng tuỳ chọn trình đơn theo bối cảnh, bạn cần đăng ký tuỳ chọn đó. Bạn nên thực hiện việc này khi tải trang. Việc này có thể xảy ra trước hoặc sau khi bạn chèn không gian làm việc.
const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);
Sửa đổi các lựa chọn cho mỗi loại khối
Các khối có thêm một cách khác để sửa đổi trình đơn ngữ cảnh là ghi đè thuộc tính customContextMenu của chúng. Phương thức này sử dụng một mảng gồm các đối tượng ContextMenuOption (được đối chiếu từ các mục trong trình đơn đã đăng ký), sau đó sửa đổi mảng đó tại chỗ để xác định tập hợp tuỳ chọn hiển thị cuối cùng.
Để biết thêm thông tin, hãy xem bài viết Xác định khối, trình đơn theo bối cảnh tuỳ chỉnh.
Không gian làm việc cũng có phương thức configureContextMenu hoạt động tương tự.
Xoá một lựa chọn
Bạn có thể xoá một lựa chọn khỏi trình đơn theo bối cảnh bằng cách huỷ đăng ký theo mã nhận dạng.
Blockly.ContextMenuRegistry.registry.unregister('someID');
Mã nhận dạng cho các tuỳ chọn mặc định nằm trong contextmenu_items.ts.
Sửa đổi một lựa chọn
Bạn có thể sửa đổi một tuỳ chọn hiện có bằng cách lấy mục từ sổ đăng ký rồi sửa đổi tại chỗ.
const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';