복사하여 붙여넣기

Blockly는 블록, 작업공간 댓글, 풍선과 같은 여러 내장 구성요소의 복사, 잘라내기, 붙여넣기 작업을 지원합니다.

기본 클립보드 동작

Blockly 코어에는 ICopyable, IDraggable, IDeletable 인터페이스를 구현하는 블록, 작업 공간 댓글, 기타 구성요소를 잘라내거나 복사하거나 붙여넣을 수 있는 단축키가 함께 제공됩니다. 블록을 복제하는 컨텍스트 메뉴 옵션도 제공됩니다. 필요에 따라 이러한 기본 바로가기 및 메뉴 항목을 수정하거나 삭제할 수 있습니다.

기본 클립보드 구현에서 복사 가능한 객체는 복사된 워크스페이스에만 붙여넣을 수 있습니다. 플라이아웃에서 복사된 경우 대상 워크스페이스에 붙여넣을 수 있습니다. 즉, 플라이아웃에서 해당 플라이아웃의 타겟 작업 공간으로 블록을 복사할 수 있지만 한 기본 작업 공간에서 다른 기본 작업 공간으로 블록을 복사할 수는 없습니다.

작업공간과 탭 간에 복사하여 붙여넣기

사용자가 한 워크스페이스에서 블록을 복사하여 다른 워크스페이스에 붙여넣거나 다른 탭에서 실행되는 애플리케이션의 복사본에 있는 워크스페이스에 붙여넣도록 허용하려면 @blockly/plugin-cross-tab-copy-paste 플러그인을 설치하면 됩니다.

맞춤 클립보드 동작

다른 동작을 원하는 경우 Blockly와 함께 제공되는 단축키를 제거하고 다르게 작동하는 다른 단축키를 설치하여 맞춤 클립보드를 구현할 수 있습니다. 이를 용이하게 하기 위해 Blockly.clipboard 네임스페이스의 메서드를 사용하여 복사, 붙여넣기 또는 객체가 복사된 워크스페이스 설정과 같은 세부적인 제어를 할 수 있습니다.

맞춤 복사 가능 객체

ICopyable, IDraggable, IDeletable(복사할 수 있는 객체 표현), ICopyData(복사된 객체 표현), IPaster(복사 데이터를 복사 가능한 객체로 다시 변환할 수 있는 객체 표현)의 5가지 인터페이스를 사용하여 임의의 항목을 복사/붙여넣기 시스템과 호환되도록 할 수 있습니다. 모든 유형의 ICopyable에는 해당 데이터를 붙여넣을 수 있는 연결된 IPaster이 필요합니다.

ICopyable,IDraggable, IDeletable를 구현하고 해당 IPaster 및 ICopyData가 있는 객체는 기본 클립보드 시스템과 자동으로 작동합니다.

복사 가능한 객체는 렌더링되고 렌더링된 새 객체를 Blockly에 추가할 수 없으므로 맞춤 복사 가능 또는 맞춤 붙여넣기 (예: 다중 선택 플러그인)를 구현해야 하는 상황은 거의 없습니다. 작업공간 내에 있을 수 있는 렌더링된 객체는 블록, 풍선, 작업공간 댓글뿐입니다.

복사 가능한 항목 구현

복사 가능한 객체를 만들려면 ICopyable, IDraggable, IDeletable 인터페이스를 구현해야 합니다. 붙여넣은 객체를 조작하고 삭제할 수 있도록 후자의 두 인터페이스가 필요합니다.

선택 가능

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

ICopyable에는 객체를 현재 복사할 수 있는지 여부를 반환하는 선택적 메서드 isCopyable도 있습니다.

드래그 가능 및 삭제 가능

IDraggable 및 IDeletable 구현에 관한 자세한 내용은 맞춤 드래그 가능 요소를 참고하세요.

붙여넣기 구현

paster를 만들려면 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());