Crea un nuovo tipo di icona

Per creare un'icona personalizzata, devi implementare l'interfaccia di IIcon. Questo indica a Blockly come vuoi che venga visualizzata l'icona e cosa vuoi fare se gli utenti fanno clic e così via.

Consigliamo di creare sottoclassi della classe astratta Icon, perché già fornisce implementazioni predefinite di molti metodi in IIcon a riga di comando.

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 . Viene utilizzato per registrare l'icona per la serializzazione e recuperando 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 vista dell'icona

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

Inizializzare la vista

Il metodo initView ti consente di creare gli elementi SVG del tuo che risiedono nel blocco. I nuovi elementi devono essere secondari this.svgRoot in modo che vengano ripuliti automaticamente quando viene visualizzata l'icona viene distrutta.

Il modulo Blockly.utils.dom fornisce un'interfaccia pulita per creare un'istanza dei file 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 renderer può rendere il blocco sufficientemente ampio.

La dimensione è espressa in "unità di lavoro" arbitrarie (che non cambiano come spazio di lavoro cambia la scala).

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

Imposta l'ordine

Le icone hanno un ordine statico all'interno del blocco. Ad esempio, il mutatore integrato le icone vengono sempre visualizzate davanti alle icone dei commenti, che si trovano davanti ai icone di avviso.

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

getWeight() {
  return 10;
}

Nota: il peso viene controllato solo quando l'icona viene aggiunta al blocco, quindi Le ponderazioni dinamiche non sono supportate.

Implementare il comportamento di clic

Molte icone sono interattive e fanno qualcosa quando gli utenti fanno clic. Ad esempio: Le icone integrate mostrano tutte un fumetto quando gli utenti fanno clic su di essi. Puoi utilizza il metodo onClick per implementarlo.

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

Rispondere alle modifiche del blocco

Alcune icone vogliono anche rispondere ai cambiamenti nel blocco, in particolare ai cambiamenti alla modificabilità e alla compressione.

Modificabilità

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

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

Compressione

Alcune icone vengono mostrate quando il blocco viene compresso, ma per impostazione predefinita lo sono . Se vuoi che l'icona venga visualizzata, sostituisci la Metodo isShownWhenCollapsed per restituire true.

isShownWhenCollapsed() {
  return true;
}

e sostituiscilo con il metodo updateCollapsed.

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

Smaltimento dell'icona

Le icone dovrebbero ripulire tutti gli elementi dom o i riferimenti esterni, quando sono smaltito. Per impostazione predefinita, tutto ciò che viene aggiunto a this.svgRoot ottiene ma gli altri riferimenti devono essere ripuliti manualmente. Dovrebbe essere nel metodo dispose.

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

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