Substituir ícones integrados

O Blockly tem três tipos de ícones integrados: comentários, avisos e mutadores.

Os ícones de comentários podem ser modificados. Isso significa que você pode solicitar que o Blockly instancie sua própria classe de ícone de comentário ao chamar métodos como myBlock.setCommentText(). Você pode fazer isso se, por exemplo, quiser que o balão pop-up do comentário tenha uma aparência diferente.

Os ícones de aviso e mutador não podem ser modificados.

Ícone "Comentário"

Para substituir o ícone de comentário, crie um ícone personalizado que implemente a interface ICommentIcon e faça o registro dele.

Implementação básica

Antes de adicionar uma lógica específica de comentário, conclua a implementação básica do seu ícone personalizado.

Tipo

O método getType precisa retornar o ícone de comentário IconType.

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

Texto

A interface ICommentIcon exige que o comentário tenha texto. O método getText precisa retornar o texto do comentário. O método setText precisa definir o texto do comentário e atualizar os recursos visuais.

getText() {
  return this.text;
}

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

Bolha

Seu ícone de comentário personalizado precisa implementar a interface IHasBubble para oferecer suporte à serialização. Mesmo que seu ícone não tenha tecnicamente um balão, você precisa armazenar as informações de visibilidade na classe para que o estado salvo seja mantido. Caso contrário, você perderá informações do usuário ao carregar um salvamento que inclua se o comentário estava aberto ou não.

bubbleIsVisible() {
  return this.bubbleVisible;
}

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

Para mais informações sobre balões, consulte Como usar balões pop-up.

A interface ICommentIcon também requer um método getBubbleSize que retorna um tamanho e uma setBubbleSize que o define. O mesmo raciocínio do estado de salvamento anterior, mesmo que o ícone não tenha tecnicamente um balão, também se aplica aqui.

getBubbleSize() {
  return this.bubbleSize;
}

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

Salvar e carregar

O ícone de comentário personalizado precisa implementar a interface ISerializable. O estado precisa estar em conformidade com a interface 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));
}

Para mais informações sobre a serialização de ícones, consulte Salvar e carregar ícones.

Inscrição

Por fim, você precisa registrar seu ícone para que o Blockly possa instanciá-lo. Use o tipo IconTypes.COMMENT.

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