Créer un type d'icône

Pour créer une icône personnalisée, vous devez implémenter l'interface IIcon. Cela indique à Blockly comment vous souhaitez que votre icône s'affiche, ce que vous voulez qu'elle à faire en cas de clic, etc.

Nous vous recommandons de sous-classer la classe abstraite Icon, car elle fournit des implémentations par défaut de nombreuses méthodes dans IIcon. de commande.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Spécifier le type d'icône

La méthode getType renvoie une valeur représentant le type du . Elle permet d'enregistrer l'icône en vue de la sérialisation. récupération de l'icône à partir de getIcon.

JavaScript

  getType() {
    return new Blockly.icons.IconType('my_icon');
  }

TypeScript

  getType(): Blockly.icons.IconType<MyIcon> {
    return new Blockly.icons.IconType<MyIcon>('my_icon');
  }

Créer la vue de l'icône

L'affichage de l'icône fait référence aux éléments SVG présents dans le bloc.

Initialiser la vue

La méthode initView vous permet de créer les éléments SVG de votre qui se trouvent dans le quartier. Les nouveaux éléments doivent être des enfants du this.svgRoot afin qu'ils soient automatiquement nettoyés lorsque l'icône est détruite.

Le module Blockly.utils.dom fournit une interface épurée pour instancier les SVG.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

Renvoyer la taille

La méthode getSize renvoie la taille de l'icône, de sorte que Le moteur de rendu peut rendre le bloc suffisamment large.

La taille est exprimée en "unités d'espace de travail" arbitraires (qui ne changent pas lorsque l'espace de travail l'échelle des modifications).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

Définir l'ordre

Les icônes ont un ordre statique dans le bloc. Par exemple, le mutateur intégré s'affichent toujours devant les icônes de commentaires, qui apparaissent devant ou d'avertissement.

La commande est contrôlée par la valeur renvoyée par le getWeight. . Les icônes avec plus de pondérations positives s'affichent après les icônes avec moins de pondérations les pondérations positives.

getWeight() {
  return 10;
}

Remarque :la pondération n'est vérifiée que lorsque l'icône est ajoutée au volume. les pondérations dynamiques ne sont pas acceptées.

Implémenter le comportement "onçon"

De nombreuses icônes sont interactives et effectuent une action lorsqu'un utilisateur clique dessus. Par exemple : toutes les icônes intégrées affichent une info-bulle lorsque l'utilisateur clique dessus. Vous pouvez utilisez la méthode onClick pour l'implémenter.

onClick() {
  // Do something when clicked.
}

Répondre aux modifications liées aux blocages

Certaines icônes permettent également de répondre aux modifications apportées au bloc, en particulier à la modification et à la réduction.

Modifiabilité

Si votre icône doit se comporter différemment selon que le blocage est modifiable ou non (par exemple, il n'est pas possible de cliquer sur un bloc modifiable), implémentez la méthode updateEditable. Cette méthode est appelé automatiquement lorsque l'état modifiable du bloc change.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

Réduction

Certaines icônes s'affichent lorsque le bloc est réduit, mais elles sont par défaut non. Si vous souhaitez afficher votre icône, remplacez isShownWhenCollapsed pour renvoyer true.

isShownWhenCollapsed() {
  return true;
}

Remplacez ensuite la méthode updateCollapsed.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

Supprimer l'icône

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

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}