팝업 풍선 사용

기본 제공 아이콘은 팝업 풍선 스타일 UI를 사용하여 추가 정보 또는 편집기를 표시합니다. 맞춤 아이콘은 이 동작을 복제하여 일관된 모양과 느낌을 유지할 수도 있습니다.

아이콘에 풍선이 표시되어야 하는 경우 IHasBubble 인터페이스를 구현해야 합니다.

풍선 표시 또는 숨기기

풍선을 사용하는 아이콘은 setBubbleVisible 메서드를 구현하여 풍선을 표시하거나 숨겨야 합니다.

// Implement the setBubbleVisible method of the IHasBubble interface.
async setBubbleVisible(visible) {
  // State is already correct.
  if (!!this.myBubble === visible) return;

  // Wait for queued renders to finish so that the icon will be correctly
  // positioned before displaying the bubble.
  await Blockly.renderManagement.finishQueuedRenders();

  if (visible) {
    this.myBubble = new MyBubble(this.getAnchorLocation(), this.getOwnerRect());
  } else {
    this.myBubble?.dispose();
  }
}

// Implement helper methods for getting the anchor location and bounds.

// Returns the location of the middle of this icon in workspace coordinates.
getAnchorLocation() {
  const size = this.getSize();
  const midIcon = new Blockly.utils.Coordinate(size.width / 2, size.height / 2);
  return Blockly.utils.Coordinate.sum(this.workspaceLocation, midIcon);
}

// Returns the rect the bubble should avoid overlapping, i.e. the block this
// icon is appended to.
getOwnerRect() {
  const bbox = this.sourceBlock.getSvgRoot().getBBox();
  return new Blockly.utils.Rect(
      bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width);
}

블록 드래그 처리

아이콘의 위치가 변경되면 풍선이 자동으로 함께 이동하지 않습니다. 풍선의 위치를 업데이트하거나 숨겨야 합니다. 이는 IIcon 인터페이스의 onLocationChange 메서드 내에서 실행할 수 있습니다.

onLocationChange(blockOrigin) {
  super.onLocationChange(blockOrigin);
  this.myBubble?.setAnchorLocation(this.getAnchorLocation());
}

풍선의 공개 상태를 반환합니다.

IHasBubble 인터페이스를 사용하려면 풍선이 표시되는지 여부를 반환하는 bubbleIsVisible 메서드도 구현해야 합니다.

isBubbleVisible() {
  return !!this.myBubble;
}