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 la tua classe di icone di commento quando chiami metodi come myBlock.setCommentText(). Ti consigliamo di eseguire questa operazione, ad esempio, se vuoi il fumetto popup del commento per avere un aspetto diverso.

Le icone di avviso e mutatore non possono essere sostituite.

Icona dei commenti

Per sostituire l'icona del commento, devi creare un'icona personalizzata che implementi l'interfaccia ICommentIcon e poi registrala.

Implementazione di base

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

Tipo

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

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

Testo

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

getText() {
  return this.text;
}

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

Fumetto

L'icona di commento personalizzata deve implementare l'interfaccia di IHasBubble. per supportare la serializzazione. Anche se tecnicamente l'icona non contiene una bolla, devi archiviare le informazioni di visibilità sul tuo corso in modo che venga mantenuto. In caso contrario, se carichi contenuti, perderai le informazioni dell'utente un salvataggio che include se il commento era aperto o meno.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Per ulteriori informazioni sulle bolle, consulta la sezione Utilizzo delle bolle popup.

L'interfaccia ICommentIcon richiede anche un metodo getBubbleSize che restituisce una dimensione e un setBubbleSize che la imposta. Lo stesso ragionamento visto in precedenza salvare lo stato anche se l'icona non presenta tecnicamente un fumetto viene applicata qui, beh.

getBubbleSize() {
  return this.bubbleSize;
}

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

Salva e carica

L'icona del commento personalizzata deve implementare ISerializable a riga di comando. Lo stato deve essere conforme alle CommentState. a riga di comando.

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 ulteriori informazioni sulla serializzazione delle icone, consulta Salva e carica le icone.

Registrazione

Infine, devi registrare l'icona in modo che Blockly possa crearne un'istanza. Essere assicurati di utilizzare il tipo IconTypes.COMMENT.

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