복사 붙여넣기

복사 붙여넣기 시스템은 ICopyable 객체, 복사된 객체를 나타내는 ICopyData, 복사 데이터를 다시 복사 가능한 객체로 전환할 수 있는 IPaster 객체로 구성됩니다. 모든 유형의 ICopyable에는 해당 데이터를 붙여넣을 수 있는 연결된 IPaster가 필요합니다.

이러한 시스템은 컨텍스트 메뉴 옵션과 단축키를 통해 사용자에게 표시됩니다.

일반적으로 복사 가능한 객체가 렌더링되며 새 렌더링된 객체를 Blockly에 추가할 수 없으므로 맞춤 복사 가능 또는 맞춤 붙여넣기 (예: 다중 선택 플러그인 또는 교차 탭 복사 붙여넣기 플러그인)를 구현해야 하는 경우는 거의 없습니다. 작업공간 내에 존재할 수 있는 렌더링된 객체는 블록, 대화창, 작업공간 주석뿐입니다.

복사 가능 구현

복사 가능한 객체를 만들려면 ICopyable 인터페이스를 구현해야 합니다.

선택 가능

ICopyable 인터페이스는 ISelectable 인터페이스를 확장하므로 이러한 메서드와 속성도 구현해야 합니다.

선택할 수 있어야 하는 이유는 단축키가 선택된 객체를 확인하여 복사할 항목을 파악하기 때문입니다.

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.
  }
}

복사 가능

ICopyable 인터페이스 자체에는 복사 가능한 객체의 상태를 JSON으로 직렬화할 수 있는 표현을 반환하는 메서드 toCopyData만 있습니다. 이 메서드는 복사 가능한 객체를 다시 만드는 데 사용할 수 있습니다.

사본 데이터에는 paster 속성도 포함되어야 합니다. 이 속성은 이 사본 데이터를 붙여넣어야 하는 붙여넣기에 연결된 등록된 문자열 이름을 포함합니다. 붙여넣기에 관한 자세한 내용은 파스터 구현을 참고하세요.

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,
    };
  }
}

붙여넣기 구현

붙여넣기를 만들려면 IPaster 인터페이스를 구현해야 합니다. 붙여넣은 항목의 복사 데이터, 항목을 붙여넣을 작업공간, 항목을 붙여넣을 위치인 좌표(선택사항)를 가져오는 메서드 paste 하나만 있습니다.

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.
  }
}

등록

파스터를 구현한 후에는 paster 속성에서 지정된 사본 데이터와 연결된 파스터를 찾을 수 있도록 파스터를 등록해야 합니다.

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