Crea un nuovo tipo di icona

Per creare un'icona personalizzata, è necessario implementare l'interfaccia di IIcon. Questo indica a Blockly come vuoi che venga visualizzata l'icona, cosa vuoi che faccia se l'utente fa clic e così via.

Ti consigliamo di creare una sottoclasse della classe astratta Icon, in quanto 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 dell'icona. Viene utilizzata 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');
  }

Crea la visualizzazione dell'icona

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

Inizializzare la vista

Il metodo initView consente di creare gli elementi SVG dell'icona che risiedono nel blocco. I nuovi elementi devono essere elementi secondari dell'elemento this.svgRoot, in modo che vengano eliminati automaticamente quando l'icona viene eliminata.

Il modulo Blockly.utils.dom fornisce un'interfaccia pulita per la creazione di istanze delle immagini 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.
  );
}

Restituisci la taglia

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

Le dimensioni sono indicate in "unità dell'area di lavoro" arbitrarie (che non cambiano quando l'area 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 mutatore integrate vengono sempre mostrate davanti alle icone dei commenti, 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: la ponderazione viene controllata solo quando l'icona viene aggiunta al blocco, perciò le ponderazioni dinamiche non sono supportate.

Implementa il comportamento del clic

Molte icone sono interattive e, facendo clic, eseguono un'azione. Ad esempio, le icone integrate mostrano tutte una bolla quando ci fai clic sopra. Puoi utilizzare il metodo onClick per implementarla.

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

Rispondere alle modifiche al blocco

Alcune icone vogliono anche rispondere alle modifiche nel blocco, in particolare alle modifiche alla modificabilità e allo stato di compressione.

Modificabilità

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

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

Comprimi

Alcune icone vengono mostrate quando il blocco è compresso, ma non per impostazione predefinita. Se vuoi che l'icona venga visualizzata, sostituisci il metodo isShownWhenCollapsed per restituire true.

isShownWhenCollapsed() {
  return true;
}

quindi 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.
}

Smaltire l'icona

Quando vengono eliminate, le icone devono eliminare tutti gli elementi dom o i riferimenti esterni. Per impostazione predefinita, tutto ciò che viene aggiunto a this.svgRoot viene eliminato, ma gli altri riferimenti devono essere eliminati manualmente. Questa operazione deve essere eseguita all'interno del metodo dispose.

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

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