Créer des bulles personnalisées

Une bulle est une interface utilisateur pop-up qui ressemble à une bulle de texte que vous verriez dans une une bande dessinée. Ils ont une "file" qui pointe vers un bloc et une "tête" contenant éléments SVG arbitraires.

Si les bulles intégrées ne sont pas adaptées à votre cas d'utilisation, Vous pouvez créer une bulle personnalisée en sous-classant la classe Bubble.

Créer la vue

La vue d'une bulle comprend tous les éléments SVG qui se trouvent à l'intérieur de la section "head" des . Ces éléments sont créés à l'intérieur du constructeur de la bulle et ils doivent être des enfants de l'élément this.contentContainer afin d'obtenir automatiquement nettoyées lorsque l'icône est détruite.

Le module Blockly.utils.dom fournit une interface épurée pour instancier les 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);
  }
}

Définir la taille

La taille de la bulle doit être définie à l'aide de setSize afin que la partie externe de bordure peut entourer correctement le contenu de la bulle. Il doit être défini pendant la construction et chaque fois que la taille des éléments de l'interface utilisateur change.

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

Se débarrasser de la bulle

Les bulles doivent nettoyer tous les éléments dom ou références externes lorsqu'elles éliminé. Par défaut, tous les éléments ajoutés à this.contentContainer sont détruit, mais les autres références doivent être nettoyées manuellement. Il doit s'agir dans la méthode dispose.

dispose() {
  super.dispose();

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