Esegui l'override delle icone integrate

Blockly ha tre tipi di icone integrate: commenti, avvisi e mutatori.

Le icone dei commenti possono essere sostituite. Ciò significa che puoi dire a Blockly di creare un'istanza della tua classe di icona dei commenti quando chiami metodi come myBlock.setCommentText(). Puoi procedere in questo modo se, ad esempio, vuoi che il fumetti popup del commento abbia un aspetto diverso.

Le icone di avviso e mutatore non possono essere sostituite.

Icona Commento

Per eseguire l'override dell'icona dei commenti, devi creare un'icona personalizzata che implementi l'interfaccia di ICommentIcon, quindi registrarla.

Implementazione di base

Prima di aggiungere una logica specifica per i commenti, completa l'implementazione di base dell'icona personalizzata.

Tipo

Il metodo getType deve restituire l'icona del commento IconType.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

Testo

L'interfaccia di ICommentIcon richiede che il commento contenga del testo. Il metodo getText deve restituire il testo del commento. Il metodo setText deve impostare il testo del commento e aggiornare le eventuali immagini.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

Fumetto

L'icona di commento personalizzata deve implementare l'interfaccia IHasBubble per supportare la serializzazione. Anche se l'icona tecnicamente non dispone di un fumetto, devi memorizzare le informazioni di visibilità sul corso in modo che lo stato salvato venga mantenuto. In caso contrario, se carichi un salvataggio che include l'apertura o meno del commento, perderai le informazioni dell'utente.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

Per ulteriori informazioni sui fumetti, consulta la sezione Utilizzo dei fumetti popup.

L'interfaccia ICommentIcon richiede anche un metodo getBubbleSize che restituisca una dimensione e un setBubbleSize che la imposti. Lo stesso ragionamento descritto in precedenza per il salvataggio dello stato, anche se l'icona tecnica non ha un fumetto, viene applicata anche qui.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

Salva e carica

L'icona di commento personalizzata deve implementare l'interfaccia ISerializable. Lo stato deve essere conforme all'interfaccia CommentState.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
}

Per maggiori informazioni sulla serializzazione delle icone, consulta Icone di salvataggio e caricamento.

Iscrizione

Infine, devi registrare la tua icona in modo che Blockly possa crearne un'istanza. Assicurati di utilizzare il tipo IconTypes.COMMENT.

Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);