Substituir ícones integrados

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

Os ícones de comentários podem ser substituídos. Isso significa que você pode pedir para o Blockly instanciar sua própria classe de ícone de comentário ao chamar métodos como myBlock.setCommentText(): Isso pode ser feito se, por exemplo, você quiser balão pop-up do comentário para ficar diferente.

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

Ícone de comentário

Para substituir o ícone de comentário, você precisa criar um ícone personalizado que implemente a interface ICommentIcon e registrá-la.

Implementação básica

Antes de adicionar a lógica específica de comentários, conclua o 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. Método setText deve 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. oferecer suporte à serialização. Mesmo que tecnicamente o ícone não tenha um balão, você deve armazenar as informações de visibilidade em sua classe para que os arquivos é mantido. Caso contrário, você perderá informações do usuário se carregar um salvamento que mostra 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 um setBubbleSize que o define. O mesmo raciocínio o estado de salvamento do estado, mesmo se o ícone não tiver tecnicamente um balão aplica-se aqui como muito bem.

getBubbleSize() {
  return this.bubbleSize;
}

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

Salvar e carregar

Seu ícone de comentário personalizado precisa implementar a ISerializable. interface gráfica do usuário. O estado precisa estar em conformidade com CommentState. interface gráfica do usuário.

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.

Registro

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

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