Внешний вид перетаскивания

English · Русский

Настройки компонента @mes/aps@1.23.0. В MES имена записей Settings начинаются с schedule.; см. как заполнить запись.

Во время перетаскивания операции график показывает два элемента: floating следует за указателем, projected показывает место операции на поле диаграммы. Группа dragPhantom меняет их текст и оформление; цвет рамки допустимого места задаёт отдельный ключ. Данные для перетаскивания и сохранение результата обеспечивает приложение.

Текст и стили

В dragPhantom.floating и dragPhantom.projected доступны одинаковые поля:

Поле	Тип в JSON	Что меняет
text	строка	Заменяет подпись операции постоянным текстом
style	объект CSS-свойств	Добавляет или заменяет свойства оформления; имена свойств записываются как fontWeight, backgroundColor
palette	объект состояний	Задаёт цвета и обводку для default, valid, small

По умолчанию text и style не заданы. График берёт подпись операции и рассчитывает положение и размеры. Пустая строка text: "" также оставляет исходную подпись, а не скрывает её. Функции для вычисления текста и стилей доступны разработчику из кода приложения; в JSON их задать нельзя.

В style можно изменить цвет, шрифт или обводку. Изменение width, height и координат заменяет геометрию, которую рассчитал график, и может сделать отображаемое место операции неверным.

Палитра

У каждого состояния доступны необязательные строковые свойства border, backgroundColor, color, boxShadow.

Состояние projected	Когда график выбирает его	Фон по умолчанию	Обводка по умолчанию
default	Нет подходящего доступного интервала	rgba(66,153,225,0.8)	1px solid #4299e1
valid	Операция целиком помещается в доступный интервал строки	rgba(16,185,129,0.85)	1px solid #10b981
small	Операция пересекает доступный интервал, но не помещается в его границы	rgba(239,68,68,0.85)	1px solid #ef4444

Для floating пакет объявляет ту же палитру, но использует только default. color и boxShadow по умолчанию не заданы. График применяет свойства в порядке: рассчитанные положение и размеры, палитра текущего состояния, затем style. Поэтому свойство из style перекрывает одноимённое свойство палитры во всех состояниях.

Рамка допустимого места

Допустимые значения цветов описаны на странице внешнего вида.

appSettings.drawPreferences.availabilabilityColor

Цвет пунктирной рамки зоны, в которую можно перенести операцию при перетаскивании. Имя ключа содержит опечатку, и это фактическое имя.

• Тип: строка CSS-цвета
• По умолчанию: #dd0606
• Взаимодействие: виден только во время перетаскивания.

Пример

Изменить цвет элемента у указателя и цвет подходящего места на поле, сохранив название операции:

{
  "dragPhantom": {
    "floating": {
      "palette": {
        "default": { "backgroundColor": "#245a81", "border": "1px solid #173e59" }
      }
    },
    "projected": {
      "palette": {
        "valid": { "backgroundColor": "#2d8a46", "border": "1px solid #1d5e2e" }
      },
      "style": { "fontWeight": "bold" }
    }
  }
}

Элемент у указателя будет синим. Место, куда операция полностью помещается, будет зелёным с полужирным текстом. Если операция пересекает доступный интервал, но выходит за его границы, сохранится красный цвет по умолчанию. Текст обоих элементов останется подписью операции.