내장 아이콘은 팝업 풍선 스타일의 UI를 사용하여 추가 정보나 편집기를 표시합니다. 맞춤 아이콘은 일관된 디자인을 유지하기 위해 이 동작을 복제할 수도 있습니다.
아이콘에 도움말 풍선이 표시되어야 한다면 IHasBubble
인터페이스를 구현해야 합니다.
도움말 풍선 표시 또는 숨기기
도움말 풍선을 사용하는 아이콘은 setBubbleVisible
메서드를 구현하여 도움말 풍선을 표시하거나 숨겨야 합니다.
// Implement the setBubbleVisible method of the IHasBubble interface.
setBubbleVisible(visible) {
// State is already correct.
if (!!this.myBubble === visible) return;
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
인터페이스에서는 도움말 풍선이 표시되는지 여부를 반환하는 isBubbleVisible
메서드도 구현해야 합니다.
isBubbleVisible() {
return !!this.myBubble;
}