Puedes anular el ícono de comentario integrado. Por ejemplo, es posible que desees que la burbuja emergente del comentario se vea diferente.
Para anular el ícono de comentario, extiende CommentIcon, anula los métodos seleccionados en ICommentIcon y registra tu nuevo ícono.
Ícono de Extend Comment
Comienza por extender CommentIcon.
class MyCommentIcon extends Blockly.icons.CommentIcon {
constructor(sourceBlock) {
super(sourceBlock);
}
}
Anula los métodos en ICommentIcon y Icon
Para personalizar tu ícono, puedes anular métodos en ICommentIcon (descritos en las siguientes secciones) y Blockly.icons.Icon (descritos en Crea íconos personalizados).
No anules getType, que debe devolver Blockly.icons.IconType.COMMENT.
Texto
La interfaz ICommentIcon requiere que el comentario tenga texto.
El método getText debe devolver el texto del comentario. El método setText debe establecer el texto del comentario y actualizar cualquier elemento visual.
getText() {
return this.text;
}
setText(text) {
this.text = text;
this.myRenderMethod();
}
Burbuja
Tu ícono de comentario personalizado debe implementar la interfaz IHasBubble para admitir la serialización. Incluso si tu ícono no tiene técnicamente una burbuja, debes almacenar la información de visibilidad en tu clase para que se mantenga el estado guardado. De lo contrario, perderás información del usuario si cargas un guardado que incluye si el comentario estaba abierto 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 requiere un método getBubbleSize que muestre un tamaño y un setBubbleSize que lo establezca. El mismo razonamiento anterior de guardar el estado, incluso si tu ícono técnicamente no tiene una burbuja, también se aplica aquí.
getBubbleSize() {
return this.bubbleSize;
}
setBubbleSize(size) {
this.bubbleSize = size;
this.myRenderMethod();
}
ICommentIcon también requiere métodos getBubbleLocation y setBubbleLocation, que obtienen y establecen la ubicación de la burbuja en el espacio de trabajo.
setBubbleLocation(location) {
this.bubbleLocation = location;
}
getBubbleLocation() {
return this.bubbleLocation;
}
Cómo guardar y cargar
El ícono de comentario personalizado debe implementar la interfaz ISerializable. El estado debe cumplir con la interfaz 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 obtener más información sobre la serialización de íconos, consulta Cómo guardar y cargar íconos.
Registra tu ícono
Por último, anula el registro del ícono de comentario existente y registra tu ícono de comentario para que Blockly pueda crear una instancia de él. Usa la cadena 'comment' para cancelar el registro y IconTypes.COMMENT para registrar.
Blockly.icons.registry.unregister('comment');
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);
Después de registrar tu ícono, Blockly lo usará en lugar del ícono de comentario integrado, por ejemplo, cuando el usuario haga clic en "Agregar comentario" en el menú contextual o cuando llames a myBlock.setCommentText().