Комментарии к рабочей области

Комментарий рабочей области — это графический элемент, в который можно ввести текст. Обычно он используется для документирования информации о вашем коде, точно так же, как комментарии в текстовом языке программирования.

Комментарий к рабочей области

Включить комментарии к рабочей области

Чтобы включить комментарии рабочей области в вашем приложении, вам необходимо предоставить пользователям возможность их создавать. Один из способов сделать это — добавить пункт контекстного меню, который создает комментарий к рабочей области. Вы можете зарегистрировать элементы контекстного меню по умолчанию для создания, удаления и дублирования комментариев рабочей области с помощью следующего кода:

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

Вы также можете создать свои собственные параметры контекстного меню или добавить для пользователя другой способ добавления комментариев к рабочей области. Дополнительные сведения о параметрах контекстного меню см. в разделе Контекстные меню .

Визуально настраивайте комментарии

Существует несколько способов настроить внешний вид комментариев рабочей области. Они используют CSS, а не темы . Можно управлять большинством цветов и размеров различных частей комментария, но не их расположением.

Цветовые переменные CSS

Вы можете установить переменную CSS commentFillColour , чтобы изменить цвет фона текстовой области. Вы можете установить переменную CSS commentBorderColour чтобы изменить цвет верхней панели комментария и границы комментария.

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

Комментарий к рабочей области с измененными цветами

CSS-классы

Разным элементам представления комментариев назначены разные классы CSS, которые позволяют изменять стиль элементов.

CSS-класс(ы) Изображение
блочный комментарий, блочныйDraggable Комментарий к рабочей области
блоклиселектед, блокликомментхиглайт Выбранный комментарийВыбранный свернутый комментарий
блочныйСвернутый Свернутый комментарий к рабочей области
блочныйКомментарийTopbar Верхняя панель комментариев рабочей области
блочныйFoldoutIcon Значок раскладки
блочныйкомментпревью, блочныйтекст Предварительный просмотр комментариев
блочныйDeleteIcon Удалить значок
блочныйтекст Текст
блочныйResizeHandle Изменить размер значка

Базовое использование CSS

В большинстве случаев вы можете применить свои пользовательские атрибуты с помощью соответствующего класса CSS:

.blocklyCommentTopbarBackground {
  height: 50px;
}

Комментарий к рабочей области с более высокой верхней панелью.

CSS для текста

Однако для текста вам необходимо быть более конкретным, чтобы переопределить CSS, созданный средством визуализации.

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

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

Комментарий к рабочей области с синим текстом предварительного просмотра.

Комментарий к рабочей области с синим текстом ввода.

CSS для выбранных основных моментов

А для выделения комментария, когда он выбран, объект, к которому должен быть применен CSS, изменяется в зависимости от того, свернут комментарий или нет. Когда он свернут, вы применяете CSS blocklyCommentTopbarBackground , в противном случае применяете его 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;
}

Иконки

Классы blocklyFoldoutIcon , blocklyDeleteIcon и blocklyResizeHandle применяются к элементам <image> . Это означает, что если вы хотите изменить цвет или форму значка, вы можете включить другое изображение в папку мультимедиа .

Название изображения Изображение
складной-arrow.svg Значок раскладки
удалить-icon.svg Удалить значок
изменить размер-handle.svg Изменить размер значка

Удалить значок

Значок удаления по умолчанию скрыт. Если вы хотите включить его, вам нужно использовать CSS, чтобы сделать его видимым:

.blocklyDeleteIcon {
  display: block;
}