Créer des icônes personnalisées

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 soit affichée, ce que vous voulez qu'elle fasse si l'on clique dessus, etc.

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

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 de l'icône

La méthode getType renvoie une valeur représentant le type de l' icône. Elle permet d'enregistrer l'icône pour la sérialisation et de la récupérer à 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

La vue de l'icône fait référence aux éléments SVG qui se trouvent sur le bloc.

Initialiser la vue

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

Le Blockly.utils.dom module fournit une interface propre pour instancier des 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, afin que le moteur de rendu puisse rendre le bloc suffisamment large.

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

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

Définir l'ordre

Les icônes ont un ordre statique dans le bloc. Par exemple, les icônes de mutateur intégrées sont toujours affichées devant les icônes de commentaire, qui sont affichées devant les icônes d'avertissement.

L'ordre est contrôlé par la valeur renvoyée par la getWeight méthode. Les icônes avec des pondérations plus positives sont affichées après les icônes avec des pondérations moins positives.

getWeight() {
  return 10;
}

Remarque : La pondération n'est vérifiée que lorsque l'icône est ajoutée au bloc. Les pondérations dynamiques ne sont donc pas prises en charge.

Implémenter le comportement onclick

De nombreuses icônes sont interactives et effectuent une action lorsque l'on clique dessus. Par exemple, les icônes intégrées affichent toutes une bulle lorsque l'on clique dessus. Vous pouvez utiliser la onClick méthode pour implémenter ce comportement.

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

Répondre aux modifications de bloc

Certaines icônes souhaitent également répondre aux modifications du bloc, en particulier aux modifications de l'état modifiable et de l'état réduit.

Modifiable

Si votre icône doit se comporter différemment selon que le bloc est modifiable ou non (par exemple, ne pas être cliquable lorsque le bloc n'est pas modifiable), implémentez la updateEditable méthode. Cette méthode est appelée automatiquement lorsque l'état modifiable du bloc change.

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

Réduit

Certaines icônes s'affichent lorsque le bloc est réduit, mais ce n'est pas le cas par défaut. Si vous souhaitez que votre icône s'affiche, remplacez la isShownWhenCollapsed méthode pour renvoyer true.

isShownWhenCollapsed() {
  return true;
}

Remplacez ensuite la updateCollapsed méthode.

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'elles sont supprimées. Par défaut, tout ce qui est ajouté à this.svgRoot est détruit, mais les autres références doivent être nettoyées manuellement. Cela doit être fait dans la dispose méthode.

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

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