Komentarz do obszaru roboczego to element graficzny, do którego możesz wpisywać tekst. Zwykle służy on do dokumentowania elementów kodu, podobnie jak komentarze w tekstowym języku programowania.
Włącz komentarze z obszaru roboczego
Aby włączyć komentarze z obszaru roboczego w swojej aplikacji, musisz zapewnić użytkownikom jakiś sposób ich tworzenia. Jednym ze sposobów jest dodanie pozycji menu kontekstowego, która tworzy komentarz do obszaru roboczego. Za pomocą tego kodu możesz rejestrować domyślne elementy menu kontekstowego, aby tworzyć, usuwać i powielać komentarze w obszarze roboczym:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
Możesz też utworzyć własne opcje menu kontekstowego lub dodać inny sposób dodawania komentarzy do obszaru roboczego. Więcej informacji o opcjach menu kontekstowego znajdziesz w artykule Menu kontekstowe.
Wizualizacja komentarzy
Wygląd komentarzy w obszarze roboczym możesz dostosować na kilka sposobów. Korzystają one z CSS, a nie motywów. Można kontrolować większość kolorów i rozmiarów różnych części komentarza, ale nie można kontrolować umiejscowienia.
Kolor zmiennych CSS
Możesz ustawić zmienną CSS commentFillColour, aby zmienić kolor tła obszaru tekstowego. Możesz ustawić zmienną CSS commentBorderColour, aby zmienić kolor górnego paska komentarza i obramowania komentarza.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
Klasy CSS
Do różnych elementów widoku komentarza są przypisane różne klasy CSS, co pozwala zmieniać ich styl.
| Klasy CSS | Obraz |
|---|---|
| blocklyComment, blocklyDraggable | 
|
| blocklySelected, blocklyCommentSummary |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklyCommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
Podstawowe użycie CSS
W większości przypadków możesz zastosować atrybuty niestandardowe za pomocą odpowiedniej klasy CSS:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS dla tekstu
W przypadku tekstu musisz jednak podać więcej szczegółów, aby zastąpić kod CSS wygenerowany przez mechanizm renderowania.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
CSS dla wybranych wyróżnień
Aby wyróżnić komentarz po jego wybraniu, do zmian należy zastosować CSS w zależności od tego, czy komentarz jest zwinięty czy nie. Gdy jest zwinięta, możesz zastosować kod CSS do elementu blocklyCommentTopbarBackground. W przeciwnym razie zastosuj go do interfejsu 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;
}
Ikony
Klasy blocklyFoldoutIcon, blocklyDeleteIcon i blocklyResizeHandle są stosowane do elementów <image>. Oznacza to, że jeśli chcesz zmienić kolor lub kształt ikony, możesz dodać inny obraz do folderu z multimediami.
| Nazwa obrazu | Obraz |
|---|---|
| oldout-arrow.svg | |
| Usuń ikonę.svg | |
| resize-handle.svg | |
Ikona usuwania
Ikona usuwania jest domyślnie ukryta. Jeśli chcesz go włączyć, musisz użyć CSS.
.blocklyDeleteIcon {
display: block;
}