아이콘과 함께 팝업 대화창 사용

내장 아이콘은 팝업 풍선 스타일의 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);
}

블록 드래그

아이콘의 위치가 바뀌어도 도움말 풍선은 아이콘과 함께 자동으로 이동하지 않습니다. 도움말 풍선의 위치를 업데이트하거나 풍선을 숨겨야 합니다. 이는 onLocationChange 메서드 내에서 실행 IIcon 인터페이스

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

풍선의 가시성 반환

또한 IHasBubble 인터페이스를 사용하려면 도움말 풍선이 표시되는지 여부를 반환하는 isBubbleVisible 메서드 있습니다.

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