draggable

드래그 가능한 객체는 작업공간에 존재하는 렌더링된 객체로, 드래그 앤 드롭할 수 있습니다. IDraggable 인터페이스를 구현합니다.

Blockly에 새 드래그 가능 객체를 추가할 수 없는 상황은 극히 드뭅니다 (예: multiselect 플러그인). 또는 기존 객체의 드래그 처리 방식 변경. 새 렌더링된 객체를 Blockly에 추가할 수 없기 때문입니다. 작업공간 내에 존재할 수 있는 렌더링된 객체는 블록, 대화창, 작업공간 주석뿐입니다.

책임

드래그 가능은 드래그를 실행할 때 다음과 같은 여러 작업을 담당합니다.

• svg 요소를 드래그 레이어로 이동
• SVG 요소 번역
• 이동 이벤트 실행

구현

새 드래그 가능한 항목을 만들려면 IRenderedElement 및 IDraggable 인터페이스를 구현해야 합니다. 이를 통해 Blockly는 객체가 표시되고 드래그될 수 있음을 인식합니다.

class MyDraggable extends IRenderedElement, IDraggable {}

루트 SVG 요소 반환

getRootSvg 메서드는 드래그 가능한 항목의 뷰를 구성하는 다른 모든 요소를 보유하는 루트 svg 요소 (일반적으로 group)를 반환합니다.

getSvgRoot() {
  return this.rootSvg;
}

반품 이동성

isMovable 메서드는 객체 드래그를 일시적으로 사용 중지하는 것이 좋으므로 현재 드래그 가능한 항목을 이동할 수 있는지 여부를 반환합니다. isMovable가 false를 반환하면 대신 작업공간이 드래그합니다.

isMovable() {
  return true;
}

반환 위치

getRelativeToSurfaceXY 메서드는 작업공간 좌표에서 드래그 가능한 항목의 상단 시작 모서리 위치를 지정하는 Coordinate를 반환합니다.

작업공간 좌표는 작업공간의 절대 왼쪽, 절대 상단에 원점이 있습니다. 또한 작업공간을 확장하거나 이동할 때 변경되지 않습니다.

getRelativeToSurfaceXY() {
  return this.loc;
}

드래그 시작

startDrag 메서드는 드래그 가능한 곳의 드래그를 초기화합니다. 이 메서드는 드래그 가능 항목을 이동하지 않습니다. 하지만 드래그를 완료하는 데 필요한 데이터를 저장하거나 객체를 구성해야 합니다. 여기에는 revertDrag가 호출되는 경우 드래그를 되돌려야 하는 모든 데이터가 포함됩니다.

또한 svg 요소가 작업공간의 드래그 레이어에 위치하도록 변경하여 다른 요소 위에 있도록 해야 합니다.

또한 이벤트를 받아서, 눌린 키를 확인하는 데 사용할 수 있습니다. 이렇게 하면 예를 들어 일반 드래그와 다르게 이동하면서 드래그를 처리할 수 있습니다.

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

드래그

drag 메서드는 실제로 드래그 가능한 객체를 이동합니다. newLoc는 작업공간 좌표에 있으며 눌린 키를 확인하는 데 사용할 수 있는 이벤트도 전달됩니다.

drag(newLoc, e) {
  this.moveTo(newLoc);
}

드래그 되돌리기

revertDrag 메서드는 드래그를 시작할 때 있던 위치로 드래그 가능 항목을 반환합니다. 예를 들어 움직임을 방지하는 드래그 대상에 드래그 가능한 항목을 드롭하는 경우에 이러한 상황이 발생합니다.

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

드래그 종료

endDrag 메서드는 드래그를 정리하여 저장된 데이터나 객체를 해제하고 드래그 가능한 항목을 원래 레이어로 반환합니다.

revertDrag가 호출되면 항상 revertDrag 다음에 endDrag가 호출됩니다.

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

선택

드래그되는 요소는 드래그가 감지될 때 선택된 요소에 따라 결정됩니다.

ISelectable

드래그 가능한 항목을 선택하려면 ISelectable 인터페이스를 구현해야 합니다.

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

선택 항목 설정

선택된 요소는 Blockly.common.setSelected()를 호출하여 설정할 수 있습니다. 일반적으로 사용자의 pointerdown 이벤트에 대한 응답으로 이 작업을 실행하는 것이 좋습니다.

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

호환성

드래그 가능 항목은 Blockly의 다른 시스템과 상호작용할 수 있도록 추가 인터페이스를 구현할 수 있습니다.

삭제 가능

IDeleteable 인터페이스를 구현하여 Draggable을 휴지통 또는 기타 삭제 대상에 의해 폐기할 수 있습니다.

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

복사 가능

ICopyable 인터페이스를 구현하여 드래그 가능한 항목을 복사할 수 있도록 하고, 붙여넣을 수 있도록 IPaster를 정의할 수 있습니다.

복사하여 붙여넣기에 관한 자세한 내용은 복사 붙여넣기를 참고하세요.