Comentários do Workspace

Um comentário do espaço de trabalho é um elemento gráfico em que você pode inserir texto. Normalmente, ele é usado para documentar coisas sobre seu código, assim como comentários em uma linguagem de programação baseada em texto.

Observação: não é possível adicionar comentários do espaço de trabalho ao menu flutuante.

Ativar comentários no espaço de trabalho

Para ativar os comentários do espaço de trabalho no seu aplicativo, você precisa dar aos usuários uma maneira de criá-los. Uma maneira de fazer isso é adicionar um item de menu de contexto que cria um comentário no espaço de trabalho. É possível registrar itens padrão do menu de contexto para criar, excluir e duplicar comentários do espaço de trabalho com o seguinte código:

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

Você também pode criar suas próprias opções de menu de contexto ou adicionar outra maneira para o usuário adicionar comentários do espaço de trabalho. Para mais informações sobre as opções do menu de contexto, consulte Menus de contexto.

Personalizar visualmente os comentários

Há várias maneiras de personalizar a aparência dos comentários do espaço de trabalho. Eles usam CSS, não temas. É possível controlar a maioria das cores e tamanhos de diferentes partes do comentário, mas não como elas são posicionadas.

Variáveis CSS de cor

É possível definir a variável CSS commentFillColour para mudar a cor de fundo da área de texto. Você pode definir a variável CSS commentBorderColour para mudar a cor da barra superior e da borda do comentário.

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

Classes CSS

Há diferentes classes CSS atribuídas a diferentes elementos da visualização de comentários, o que permite modificar o estilo dos elementos.

Classes CSS	Imagem
blocklyComment, blocklyDraggable
blocklySelected, blocklyCommentHighlight
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview, blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

Uso básico do CSS

Na maioria dos casos, é possível aplicar seus atributos personalizados com a classe CSS adequada:

.blocklyCommentTopbarBackground {
  height: 50px;
}

CSS para texto

No entanto, para texto, você precisa ser mais específico para substituir o CSS gerado pelo renderizador.

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

CSS para destaques selecionados

Para destacar o comentário quando ele é selecionado, o objeto a que o CSS deve ser aplicado muda dependendo se o comentário está recolhido ou não. Quando ele está recolhido, aplique o CSS ao blocklyCommentTopbarBackground, caso contrário, aplique ao blocklyCommentHighlight.

/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
  stroke: #fc3;
  stroke-width: 3px;
}

/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
  stroke: none;
}

/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
  stroke: #fc3;
  stroke-width: 3px;
}

Ícones

As classes blocklyFoldoutIcon, blocklyDeleteIcon e blocklyResizeHandle são aplicadas a elementos <image>. Isso significa que, se você quiser mudar a cor ou o formato de um ícone, inclua uma imagem diferente na sua pasta de mídia.

Nome da imagem	Imagem
foldout-icon.svg
delete-icon.svg
resize-handle.svg

Excluir ícone

O ícone de exclusão fica oculto por padrão. Se quiser ativar, use CSS para torná-lo visível:

.blocklyDeleteIcon {
  display: block;
}

Tamanho padrão

Para definir o tamanho padrão do comentário, defina a propriedade estática Blockly.comments.CommentView.defaultCommentSize:

Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(200, 200);