Ícone de substituição do comentário

É possível substituir o ícone de comentário integrado. Por exemplo, talvez você queira que o balão pop-up do comentário tenha uma aparência diferente.

Para substituir o ícone de comentário, estenda CommentIcon, substitua os métodos selecionados em ICommentIcon e registre seu novo ícone.

Observação: o Blockly tem três tipos de ícones integrados: comentários, avisos e mutadores. Somente o ícone de comentário pode ser substituído.

Extend CommentIcon

Comece estendendo CommentIcon.

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

Substituir métodos em ICommentIcon e Icon

Para personalizar o ícone, substitua os métodos em ICommentIcon (descritos nas seções a seguir) e Blockly.icons.Icon (descritos em Criar ícones personalizados). Não substitua getType, que precisa retornar 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();
}

Balão

Seu ícone de comentário personalizado precisa implementar a interface IHasBubble para oferecer suporte à serialização. Mesmo que o ícone não tenha tecnicamente uma bolha, armazene as informações de visibilidade na sua classe para que o estado salvo seja mantido. Caso contrário, você vai perder informações do usuário se 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 Usar balões pop-up.

A interface ICommentIcon exige um método getBubbleSize que retorne um tamanho e um setBubbleSize que o defina. O mesmo raciocínio de antes sobre salvar o estado, mesmo que o ícone não tenha tecnicamente uma bolha, também se aplica aqui.

getBubbleSize() {
  return this.bubbleSize;
}

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

ICommentIcon também exige os métodos getBubbleLocation e setBubbleLocation, que recebem e definem a localização do balão no espaço de trabalho.

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

getBubbleLocation() {
  return this.bubbleLocation;
}

Salvar e carregar

Seu í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,
    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));
}

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

Registrar seu ícone

Por fim, cancele o registro do ícone de comentário atual e registre o seu para que o Blockly possa instanciá-lo. Use a string 'comment' para cancelamento do registro e IconTypes.COMMENT para registro.

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

Depois de registrar seu ícone, o Blockly o usará no lugar do ícone de comentário integrado, como quando o usuário clica em "Adicionar comentário" no menu de contexto ou você chama myBlock.setCommentText().