Creare icone personalizzate

Per creare un'icona personalizzata, devi implementare l'interfaccia IIcon. In questo modo, Blockly saprà come vuoi che venga visualizzata l'icona, cosa vuoi che faccia se viene selezionata e così via.

Ti consigliamo di creare una sottoclasse della classe astratta Icon, perché fornisce già implementazioni predefinite di molti metodi nell'interfaccia 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);
  }
}

Specifica il tipo di icona

Il metodo getType restituisce un valore che rappresenta il tipo di icona. Viene utilizzato per registrare l'icona per la serializzazione e recuperare l'icona da getIcon.

JavaScript

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

TypeScript

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

Creare la visualizzazione dell'icona

La visualizzazione dell'icona si riferisce agli elementi SVG presenti nel blocco.

Inizializzare la visualizzazione

Il metodo initView prevede la creazione degli elementi SVG della tua icona che si trovano sul blocco. I nuovi elementi devono essere elementi secondari di this.svgRoot in modo che vengano puliti automaticamente quando l'icona viene eliminata.

Il modulo Blockly.utils.dom fornisce un'interfaccia pulita per l'istanza di 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.
  );
}

Restituisce la taglia

Il metodo getSize restituisce le dimensioni dell'icona, in modo che il renderer possa rendere il blocco abbastanza largo.

Le dimensioni sono in "unità di spazio di lavoro" arbitrarie (che non cambiano man mano che lo spazio di lavoro cambia scala).

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

Imposta l'ordine

Le icone hanno un ordine statico all'interno del blocco. Ad esempio, le icone dei mutatori integrati vengono sempre mostrate davanti alle icone dei commenti, che vengono mostrate davanti alle icone di avviso.

L'ordine è controllato dal valore restituito dal metodo getWeight. Le icone con ponderazioni più positive vengono visualizzate dopo quelle con ponderazioni meno positive.

getWeight() {
  return 10;
}

Nota:il peso viene controllato solo quando l'icona viene aggiunta al blocco, quindi i pesi dinamici non sono supportati.

Implementare il comportamento al clic

Molte icone sono interattive e svolgono un'azione quando vengono selezionate. Ad esempio, le icone integrate mostrano tutte una bolla quando vengono selezionate. Per implementare questa funzionalità, puoi utilizzare il metodo onClick.

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

Rispondere alle modifiche del blocco

Alcune icone vogliono anche rispondere alle modifiche apportate al blocco, in particolare quelle relative alla modificabilità e al livello di compressione.

Modificabilità

Se l'icona deve comportarsi in modo diverso a seconda che il blocco sia modificabile o meno (ad esempio, non essere cliccabile quando il blocco non è modificabile), implementa il metodo updateEditable. Questo metodo viene chiamato automaticamente quando lo stato di modificabilità del blocco cambia.

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

Compressione

Alcune icone vengono mostrate quando il blocco è compresso, ma per impostazione predefinita non lo sono. Se vuoi che la tua icona venga mostrata, esegui l'override del metodo isShownWhenCollapsed per restituire true.

isShownWhenCollapsed() {
  return true;
}

e poi esegui l'override del metodo updateCollapsed.

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

Elimina l'icona

Le icone devono eliminare eventuali elementi DOM o riferimenti esterni quando vengono eliminate. Per impostazione predefinita, tutto ciò che viene aggiunto a this.svgRoot viene eliminato, ma gli altri riferimenti devono essere puliti manualmente. Questa operazione deve essere eseguita all'interno del metodo dispose.

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

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