맞춤 도움말 풍선 만들기

도움말 풍선은 만화에서 볼 수 있는 말풍선처럼 보이는 팝업 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();
}