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);