Sao chép và dán

Hệ thống sao chép và dán được xây dựng từ ba đối tượng là đối tượng ICopyable, ICopyData biểu thị đối tượng được sao chép và đối tượng IPaster có thể chuyển dữ liệu sao chép trở lại thành đối tượng có thể sao chép. Mọi loại ICopyable đều cần có một IPaster liên kết để dán dữ liệu đó.

Người dùng sẽ thấy các hệ thống này thông qua các tuỳ chọn trên trình đơn theo bối cảnh và phím tắt.

Có rất ít trường hợp mà bạn muốn triển khai một trình bổ trợ có thể sao chép tuỳ chỉnh hoặc mục cắt tuỳ chỉnh (ví dụ: trình bổ trợ nhiều lựa chọn hoặc trình bổ trợ sao chép dán nhiều thẻ), vì các đối tượng có thể sao chép thường sẽ được hiển thị và bạn không thể thêm đối tượng kết xuất mới vàoBlockly. Các đối tượng được kết xuất 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 tệp 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, có 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 bắt buộc phải chọn lựa chọn vì các phím tắt sẽ xem xét đối tượng được chọn để tìm ra 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ề giá trị biểu diễn chuyển đổi tuần tự JSON cho trạng thái của đối tượng có thể sao chép. Phương thức này có thể 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 nhã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,
    };
  }
}

Triển khai quá trình

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

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 mục lục, bạn cần đăng ký mục này để có thể tìm thấy mục cũ liên kết với một dữ liệu bản sao nhất định từ thuộc tính paster của mục đó.

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());