Sao chép và dán

Hệ thống sao chép và dán được xây dựng từ 3 thành phần: đối tượng ICopyable, ICopyData đại diện cho các đối tượng đã sao chép và đối tượng IPaster 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 cần có một IPaster được liên kết có thể dán dữ liệu đó.

Các hệ thống này được hiển thị cho người dùng thông qua các tuỳ chọn trình đơn theo bối cảnh và phím tắt.

Có rất ít trường hợp bạn muốn triển khai một tuỳ chọn sao chép tuỳ chỉnh hoặc tuỳ chọn dán tuỳ chỉnh (ví dụ: trình bổ trợ đa lựa chọn hoặc trình bổ trợ sao chép dán giữa các bảng), vì thường thì các đối tượng có thể sao chép sẽ được kết xuất và bạn không thể thêm các đối tượng kết xuất mới vào Blockly. Các đối tượng hiển thị duy nhất có thể tồn tại trong không gian làm việc là các khối, bong bóng trò chuyện và nhận xét 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 giao diện ICopyable.

Có thể chọn

Giao diện ICopyable mở rộng giao diện ISelectable, nghĩa 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 có thể chọn đối tượng vì phím tắt sẽ xem đố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 là toCopyData. Phương thức này trả về một bản trình bày có thể chuyển đổi tuần tự JSON của trạng thái đối tượng có thể sao chép. Phương thức này có thể được dùng để tạo lại đối tượng có thể sao chép.

Dữ liệu sao chép cũng phải bao gồm thuộc tính paster. Thuộc tính này chứa tên chuỗi đã đăng ký 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 phần 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,
    };
  }
}

Triển khai một trình tương tác

Để tạo một trình dán, bạn cần triển khai giao diện IPaster. Phương thức này chỉ có một phương thức paste, lấy dữ liệu sao chép của nội dung cần dán, không gian làm việc để dán nội dung đó và một toạ độ không bắt buộc, là vị trí để dán nội dung đó.

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());