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

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

Комментарий к рабочему пространству

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

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

// 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-класс(ы) Изображение
blocklyComment , blocklyDraggable Комментарий к рабочему пространству
blocklySelected , blocklyCommentHighlight Выбранный комментарийВыбранный свернутый комментарий
blocklyCollapsed Свернутый комментарий к рабочему пространству
blocklyCommentTopbar Верхняя панель комментариев к рабочему пространству
blocklyFoldoutIcon Значок раскрытия
blocklyCommentPreview , blocklyText Предварительный просмотр комментариев
blocklyDeleteIcon Удалить значок
blocklyText Текст
blocklyResizeHandle Значок изменения размера

Базовое использование 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> . Это означает, что если вы хотите изменить цвет или форму значка, вы можете добавить другое изображение в папку «Медиа» .

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

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

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

.blocklyDeleteIcon {
  display: block;
}

Размер по умолчанию

Чтобы установить размер комментария по умолчанию, задайте статическое свойство Blockly.comments.CommentView.defaultCommentSize :

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