Utwórz niestandardowe dymki

Dymek to wyskakujący interfejs, który wygląda jak dymek z tekstem w komiksie. Mają „ogon” wskazujący bryłę i „głowę” zawierającą dowolne elementy SVG.

Jeśli wbudowane dymki nie sprawdzają się w Twoim przypadku, możesz utworzyć niestandardowy dymek, podklasyfikując klasę Bubble.

Tworzenie widoku

Widok dymka to wszystkie elementy SVG znajdujące się w „główce” bąbelka. Te elementy są tworzone w konstruktorze bąbelków i powinny być elementami podrzędnymi elementu this.contentContainer, aby zostały automatycznie wyczyszczone po zniszczeniu ikony.

Moduł Blockly.utils.dom zapewnia przejrzysty interfejs do tworzenia instancji 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);
  }
}

Ustaw rozmiar

Rozmiar bąbelka należy ustawić za pomocą parametru setSize, aby jego zewnętrzną krawędź prawidłowo otaczała zawartość bąbelka. Należy go ustawić podczas budowy, a także za każdym razem, gdy zmieni się rozmiar elementów interfejsu.

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
  );
}

Usuwanie bąbelków

Rozmieszczone dymki powinny usuwać wszystkie elementy DOM i odwołania zewnętrzne. Domyślnie wszystkie dane dołączone do pliku this.contentContainer zostają zniszczone, ale inne pliki referencyjne należy wyczyścić ręcznie. Należy to zrobić w metodzie dispose.

dispose() {
  super.dispose();

  // Dispose of other references.
  this.myArbitraryReference.dispose();
}