Blockly hỗ trợ các thao tác sao chép, cắt và dán cho một số thành phần tích hợp sẵn, chẳng hạn như khối, bình luận trên không gian làm việc và bong bóng.
Hành vi mặc định của bảng nhớ tạm
Lõi Blockly đi kèm với phím tắt có thể cắt, sao chép hoặc dán các khối, bình luận trên không gian làm việc và mọi thành phần khác triển khai các giao diện ICopyable, IDraggable và IDeletable. Công cụ này cũng có lựa chọn trình đơn theo bối cảnh để sao chép một khối. Bạn có thể sửa đổi hoặc xoá các lối tắt và mục trong trình đơn mặc định đó nếu cần.
Trong chế độ triển khai bảng nhớ tạm mặc định, các đối tượng có thể sao chép chỉ có thể được dán vào không gian làm việc mà chúng được sao chép hoặc vào không gian làm việc đích nếu chúng được sao chép từ một bảng chọn. Điều này có nghĩa là bạn có thể sao chép một khối từ một trình đơn bật lên vào không gian làm việc đích của trình đơn bật lên đó, nhưng bạn không thể sao chép một khối từ không gian làm việc chính này sang không gian làm việc chính khác.
Sao chép và dán giữa các không gian làm việc và thẻ
Nếu muốn cho phép người dùng sao chép các khối từ một không gian làm việc và dán vào một không gian làm việc khác, hoặc thậm chí vào một không gian làm việc trong bản sao của ứng dụng đang chạy ở một thẻ khác, bạn có thể cài đặt trình bổ trợ @blockly/plugin-cross-tab-copy-paste.
Hành vi tuỳ chỉnh của bảng nhớ tạm
Nếu muốn có hành vi khác, bạn có thể triển khai một bảng tạm tuỳ chỉnh bằng cách gỡ cài đặt các phím tắt đi kèm với Blockly và cài đặt các phím tắt khác hoạt động theo cách khác. Để tạo điều kiện thuận lợi cho việc này, bạn có thể dùng các phương thức trong không gian tên Blockly.clipboard để sao chép, dán hoặc kiểm soát chi tiết hơn, chẳng hạn như đặt không gian làm việc mà một đối tượng được sao chép.
Đối tượng tuỳ chỉnh có thể sao chép
Bạn có thể tạo các mục tuỳ ý tương thích với hệ thống sao chép/dán bằng cách sử dụng 5 giao diện: ICopyable, IDraggable và IDeletable để biểu thị các đối tượng có thể sao chép, ICopyData để biểu thị các đối tượng đã sao chép và IPaster để biểu thị các đối tượng có thể chuyển dữ liệu sao chép trở lại thành các đối tượng có thể sao chép. Mọi loại ICopyable đều cần một IPaster được liên kết có thể dán dữ liệu đó.
Mọi đối tượng triển khai ICopyable,IDraggable và IDeletable, đồng thời có IPaster và ICopyData tương ứng sẽ tự động hoạt động với hệ thống bảng nhớ tạm mặc định.
Có rất ít trường hợp bạn muốn triển khai một đối tượng có thể sao chép tuỳ chỉnh hoặc một đối tượng dán tuỳ chỉnh (ví dụ: trình bổ trợ chọn nhiều), vì các đối tượng có thể sao chép được kết xuất và bạn không thể thêm các đối tượng được kết xuất mới vào Blockly. Các đối tượng được kết xuất duy nhất có thể tồn tại trong một không gian làm việc là các khối, bong bóng và bình luận trong không gian làm việc.
Triển khai một đối tượng có thể sao chép
Để tạo một đối tượng có thể sao chép, bạn cần triển khai các giao diện ICopyable, IDraggable và IDeletable. Hai giao diện sau là bắt buộc để có thể thao tác và xoá một đối tượng được dán.
Có thể chọn
Giao diện ICopyable mở rộng giao diện ISelectable, tức là bạn cũng cần triển khai các phương thức và thuộc tính đó.
Bạn phải chọn được đối tượng vì phím tắt sẽ xem xét đối tượng đã chọn để xác định nội dung cần sao chép.
class MyCopyable implements ISelectable {
constructor(workspace) {
this.id = Blockly.utils.idGenerator.genUid();
this.workspace = workspace;
}
select() {
// Visually indicate this draggable is selected.
}
unselect() {
// Visually indicate this draggable is not selected.
}
}
Có thể sao chép
Bản thân giao diện ICopyable chỉ có một phương thức bắt buộc là toCopyData. Phương thức này trả về một biểu thị có thể chuyển đổi tuần tự thành JSON về trạng thái của đối tượng có thể sao chép. Bạn có thể dùng biểu thị này để tạo lại đối tượng có thể sao chép.
Dữ liệu sao chép cũng phải có thuộc tính paster. Thuộc tính này lưu giữ tên chuỗi đã đăng ký được liên kết với trình dán sẽ dán dữ liệu sao chép này. Để biết thêm thông tin về trình dán, hãy xem bài viết Triển khai trình dán.
class MyCopyable implements ICopyable {
constructor(workspace, state) {
this.workspace = workspace;
this.myState = state;
}
toCopyData() {
return {
// This string matches the string used to register the paster.
paster: 'MY_PASTER',
state: this.myState,
};
}
}
ICopyable cũng có một phương thức không bắt buộc là isCopyable, phương thức này trả về liệu một đối tượng có thể sao chép hay không.
Có thể kéo và xoá
Để biết thông tin về cách triển khai IDraggable và IDeletable, hãy xem phần Đối tượng có thể kéo tuỳ chỉnh.
Triển khai trình dán
Để tạo một trình dán, bạn cần triển khai giao diện IPaster. Nó chỉ có một phương thức paste nhận dữ liệu sao chép của đối tượng mà nó dán, không gian làm việc để dán đối tượng vào và một toạ độ không bắt buộc, là vị trí để dán đối tượng.
class MyPaster implements IPaster {
paste(copyData, workspace, coordinate) {
return new MyCopyable(workspace, copyData.state);
// Optionally position the copyable at the passed coordinate.
// Optionally select the copyable after it is pasted.
}
}
Đăng ký
Sau khi triển khai một trình dán, bạn cần đăng ký trình dán đó để có thể tìm thấy trình dán được liên kết với một dữ liệu sao chép nhất định từ thuộc tính paster của trình dán.
// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());