도움말 풍선은 만화에서 볼 수 있는 말풍선처럼 보이는 팝업 UI입니다. 이러한 파일에는 블록을 가리키는 '꼬리'와 임의의 svg 요소를 포함하는 '헤드'가 있습니다.
기본 제공 도움말 풍선이 사용 사례에 적합하지 않으면 Bubble
클래스를 서브클래스화하여 맞춤 도움말 풍선을 만들 수 있습니다.
뷰 만들기
풍선의 뷰는 풍선의 '헤드' 안에 있는 모든 svg 요소입니다. 이러한 요소는 도움말 풍선의 생성자 내에서 생성되며 아이콘이 소멸될 때 자동으로 정리되도록 this.contentContainer
요소의 하위 요소여야 합니다.
Blockly.utils.dom
모듈은 svg를 인스턴스화하는 깔끔한 인터페이스를 제공합니다.
class MyBubble extends Blockly.bubbles.Bubble {
// See the Blockly.bubbles.Bubble class for information about what these
// parameters are.
constructor(workspace, anchor, ownerRect) {
super(workspace, anchor, ownerRect);
this.text = Blockly.utils.dom.createSvgElement(
Blockly.utils.Svg.TEXT,
{'class': 'my-bubble-class'},
this.contentContainer);
const node = Blockly.utils.dom.createTextNode('some text');
this.text.appendChild(node);
}
}
크기 설정
바깥쪽 테두리가 도움말 풍선의 콘텐츠를 적절하게 둘러싸도록 setSize
를 사용하여 풍선의 크기를 설정해야 합니다. 이 속성은 생성 중, 그리고 UI 요소의 크기가 변경될 때마다 설정해야 합니다.
constructor(workspace, anchor, ownerRect) {
// Create the view elements... (see above)
const bbox = this.text.getBBox();
this.setSize(
new Blockly.utils.Size(
bbox.width + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
bbox.height + Blockly.bubbles.Bubble.BORDER_WIDTH * 2,
),
true
);
}
도움말 풍선 삭제
도움말 풍선은 돔 요소 또는 외부 참조를 삭제할 때 정리해야 합니다. 기본적으로 this.contentContainer
에 추가된 모든 내용은 삭제되지만 다른 참조는 수동으로 정리해야 합니다. 이 작업은 dispose
메서드 내에서 실행해야 합니다.
dispose() {
super.dispose();
// Dispose of other references.
this.myArbitraryReference.dispose();
}