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