Comentários do Workspace

Um comentário do espaço de trabalho é um elemento gráfico em que é possível inserir texto. Em geral, ele é usado para documentar coisas sobre o 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 flyout.

Ativar comentários do espaço de trabalho

Para ativar os comentários do espaço de trabalho no aplicativo, é preciso oferecer aos usuários alguma maneira de criá-los. Uma maneira de fazer isso é adicionando um item de menu de contexto que cria um comentário de espaço de trabalho. É possível registrar itens do menu de contexto padrão 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();

Também é possível criar suas próprias opções de menu de contexto ou adicionar outra maneira de o usuário adicionar comentários ao espaço de trabalho. Para saber mais sobre as opções do menu de contexto, consulte Menus de contexto.

Personalize os comentários visualmente

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

Variáveis CSS coloridas

Você pode 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 de comentários na parte de cima e da borda do comentário.

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

Classes CSS

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

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

Uso básico do CSS

Na maioria dos casos, você pode aplicar os atributos personalizados com a classe CSS adequada:

.blocklyCommentTopbarBackground {
  height: 50px;
}

CSS para texto

No entanto, para textos, é necessário 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 ao qual o CSS deve ser aplicado muda dependendo se o comentário está recolhido ou não. Quando ela estiver recolhida, aplique o CSS à blocklyCommentTopbarBackground. Caso contrário, aplique-a à 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, para mudar a cor ou a forma de um ícone, inclua uma imagem diferente na pasta de mídia.

Nome da imagem	Imagem
flip-arrow.svg
excluir-ícone.svg
resize-handle.svg

Ícone "excluir"

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

.blocklyDeleteIcon {
  display: block;
}