Blockly tiene tres tipos de íconos integrados: comentarios, advertencias y mutadores.
Los íconos de comentarios son reemplazables. Eso significa que puedes indicarle a Blockly que cree una instancia de tu propia clase de ícono de comentario cuando llames a métodos como myBlock.setCommentText(). Es posible que quieras hacerlo si, por ejemplo, quieres que la burbuja emergente del comentario se vea diferente.
Los íconos de advertencia y mutador no se pueden anular.
Ícono de comentario
Para anular el ícono de comentario, debes crear un ícono personalizado que implemente la interfaz ICommentIcon y, luego, registrarlo.
Implementación básica
Antes de agregar una lógica específica para los comentarios, completa la implementación básica de tu ícono personalizado.
Tipo
El método getType debe mostrar el ícono de comentario IconType.
class MyCommentIcon extends Blockly.icons.Icon {
getType() {
return Blockly.icons.IconType.COMMENT;
}
}
Texto
La interfaz ICommentIcon requiere que el comentario tenga texto.
El método getText debe mostrar el texto del comentario. El método setText debe establecer el texto del comentario y actualizar los elementos visuales.
getText() {
return this.text;
}
setText(text) {
this.text = text;
this.myRenderMethod();
}
Cuadro
Tu ícono de comentario personalizado debe implementar la interfaz IHasBubble para admitir la serialización. Incluso si técnicamente tu ícono no tiene un cuadro, debes almacenar la información de visibilidad en tu clase para que se mantenga el estado guardado. De lo contrario, perderás la información del usuario si cargas un elemento guardado que incluya si el comentario se abrió o no.
bubbleIsVisible() {
return this.bubbleVisible;
}
setBubbleVisible(visible: boolean) {
this.bubbleVisible = visible;
}
Para obtener más información sobre las burbujas, consulta Cómo usar burbujas emergentes.
La interfaz ICommentIcon también requiere un método getBubbleSize que muestra un tamaño y un setBubbleSize que lo establezca. También se aplica el mismo razonamiento del estado de guardado anterior, incluso si técnicamente tu ícono no tiene una burbuja.
getBubbleSize() {
return this.bubbleSize;
}
setBubbleSize(size) {
this.bubbleSize = size;
this.myRenderMethod();
}
Guardar y cargar
Tu ícono de comentario personalizado debe implementar la interfaz de ISerializable. El estado debe cumplir con la interfaz de 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 obtener más información sobre la serialización de íconos, consulta Cómo guardar y cargar íconos.
Registro
Por último, debes registrar tu icono para que Blockly pueda crear una instancia de él. Asegúrate de usar el tipo IconTypes.COMMENT.
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);