Icona sostituisci commento

Puoi sostituire l'icona dei commenti integrata. Ad esempio, potresti voler modificare l'aspetto della bolla popup del commento.

Per sostituire l'icona del commento, estendi CommentIcon, sostituisci i metodi selezionati in ICommentIcon e registra la nuova icona.

Nota: Blockly ha tre tipi di icone integrate: commenti, avvisi e mutatori. È possibile eseguire l'override solo dell'icona del commento.

Extend CommentIcon

Inizia estendendo CommentIcon.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

Eseguire l'override dei metodi in ICommentIcon e Icon

Per personalizzare l'icona, puoi eseguire l'override dei metodi in ICommentIcon (descritti nelle sezioni seguenti) e Blockly.icons.Icon (descritti in Creare icone personalizzate). Non eseguire l'override di getType, che deve restituire Blockly.icons.IconType.COMMENT.

Testo

L'interfaccia 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 immagini.

getText() {
  return this.text;
}

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

Fumetto

La tua icona di commento personalizzata deve implementare l'interfaccia IHasBubble per supportare la serializzazione. Anche se tecnicamente la tua icona non ha una bolla, devi memorizzare le informazioni sulla visibilità nella classe in modo che lo stato salvato venga mantenuto. In caso contrario, perderai le informazioni dell'utente se carichi un salvataggio che include l'apertura o meno del commento.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Per saperne di più sulle bolle, vedi Utilizzare le bolle popup.

L'interfaccia ICommentIcon richiede un metodo getBubbleSize che restituisca una dimensione e un metodo setBubbleSize che la imposti. Lo stesso ragionamento fatto in precedenza per il salvataggio dello stato anche se l'icona non ha tecnicamente una bolla si applica anche in questo caso.

getBubbleSize() {
  return this.bubbleSize;
}

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

ICommentIcon richiede anche i metodi getBubbleLocation e setBubbleLocation, che recuperano e impostano la posizione della bolla nello spazio di lavoro.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

Salva e carica

L'icona del 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,
    x: this.bubbleLocation.x,
    y: this.bubbleLocation.y,
  }
}

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

Per ulteriori informazioni sulla serializzazione delle icone, vedi Salvare e caricare le icone.

Registrare l'icona

Infine, annulla la registrazione dell'icona dei commenti esistente e registra la tua icona dei commenti in modo che Blockly possa istanziarla. Utilizza la stringa 'comment' per l'annullamento della registrazione e IconTypes.COMMENT per la registrazione.

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

Dopo aver registrato l'icona, Blockly la utilizzerà al posto dell'icona di commento integrata, ad esempio quando l'utente fa clic su "Aggiungi commento" nel menu contestuale o quando chiami myBlock.setCommentText().