Anula íconos integrados

Blockly tiene tres tipos de íconos integrados: comentarios, advertencias y mutadores.

Los íconos de comentarios se pueden anular. Esto significa que puedes pedirle a Blockly que cree una instancia tu propia clase de ícono de comentario cuando llamas a métodos como myBlock.setCommentText() Es posible que desees hacer esto, por ejemplo, si quieres la burbuja emergente del comentario para que 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, lo registras.

Implementación básica

Antes de agregar lógica específica de comentarios, completa el 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 debes definir el texto del comentario y actualizar las imágenes.

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 técnicamente tu icono no tiene una burbuja, debes almacenar la información de visibilidad en tu clase para que se guarden se mantenga ese estado. De lo contrario, perderás la información del usuario si realizas la carga un elemento guardado que indique 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 también requiere un método getBubbleSize que muestre un tamaño y un setBubbleSize que lo establece. El mismo razonamiento que vimos antes guardar el estado incluso si, técnicamente, tu icono no tiene un cuadro se aplica aquí, como en la nube.

getBubbleSize() {
  return this.bubbleSize;
}

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

Guardar y cargar

Tu ícono de comentario personalizado debe implementar la ISerializable. interfaz de usuario. El estado debe cumplir con el CommentState interfaz de usuario.

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 Guardar y cargar íconos.

Registro

Por último, debes registrar tu ícono para que Blockly pueda crear una instancia. Sé asegúrate de usar el tipo IconTypes.COMMENT.

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