Конструктор выражений предназначен для создания, редактирования и проверки выражений, используемых в параметрах действий и в действии «Вычислить выражение» на схеме робота. С помощью конструктора выражений можно формировать выражения из операторов, значений, переменных, свойств элементов и результатов действий.

Вызов конструктора выражений

Конструктор выражений вызывается по кнопке «Настроить выражение»:

  • из параметров действий с типами Строка, Число, Логический, Объект;

  • из действия «Вычислить выражение выражение» на схеме робота.

Интерфейс конструктора

Окно конструктора выражений включает следующие области:

  1. поле ввода выражения;
  2. верхнюю панель операторов;
  3. строку с типом результата выражения;
  4. левую панель доступных в проекте переменных, свойств элементов и результатов действий;
  5. область списка ошибок;
  6. кнопки «Сохранить» и  «Отменить».

Создание выражения

Выражение формируется из отдельных блоков ввода. Каждый блок является независимым редактируемым элементом.

В блоке ввода допускается ввод:

  • числовых значений;
  • строковых значений в двойных кавычках;
  • логических значений (true, false);
  • операторов;
  • переменных, свойств элементов и результатов действий через символ @.

Автодополнение

Автодополнение отображается при вводе выражения и фильтруется по мере ввода текста.

  • По умолчанию предлагаются операторы.
  • При вводе символа @ предлагаются переменные, свойства элементов и результаты действий.
  • При вводе символа точки предлагаются методы.

Меню блоков ввода

Для каждого блока ввода доступно меню со следующими действиями:

  • очистить блок (Ctrl+Shift+Backspace)
  • удалить блок (Ctrl+Shift+Del)
  • открыть скобку
  • закрыть скобку
  • вставить блок слева (Alt+←)
  • вставить блок справа (Alt+→)
  • вставить значение переменной, свойства, результата (@), для обращения к переменным, свойствам, результатам (Ctrl+2)
  • вставить текст (")" для вставки строки (в блок добавляются двойные кавычки, курсор устанавливается между них) 
  • вызвать метод (.)
  • перенести строку (Shift+Enter)

Навигация между блоками

Навигация между блоками осуществляется с помощью клавиатуры:

  • ← – переход к предыдущему блоку при расположении курсора в начале блока;
  • → – переход к следующему блоку при расположении курсора в конце блока;
  • Tab – переход к следующему блоку;
  • Shift + Tab – переход к предыдущему блоку;
  • Shift + Enter – перенос строки (также выполняется автоматически при достижении ширины области).

Верхняя панель

Верхняя панель содержит набор операторов. При выборе оператора он вставляется в новый блок ввода. В всплывающей подсказке отображаются название оператора, тип операнда и тип результата. 

Левая панель

Левая панель содержит вкладки:

  • Переменные;
  • Свойства;
  • Результаты.

По клику на элемент выполняется вставка ссылки в новый блок ввода.

Во вкладках Переменные и Результаты доступна фильтрация по типам:

  • Логический;
  • Строка;
  • Число.

Проверка выражения и ошибки

При вводе выражения система автоматически выполняет проверку корректности введённого выражения. Ошибочные фрагменты выражения подсвечиваются в поле ввода, а список ошибок отображается в нижней части окна конструктора.

При выборе ошибки в списке курсор автоматически перемещается к соответствующему месту выражения.

Если выражение содержит ошибки, кнопка «Сохранить» недоступна.

Сохранение выражения

Созданное в конструкторе выражение при сохранении преобразуется в действие «Выражение». Если конструктор был вызван из параметра действия и выражение отсутствовало, действие «Выражение» размещается на схеме перед действием, в параметре которого было написано выражение.


<script>
  AJS.toInit(function() {
    var toc        = document.querySelector('.toc-float');
    var aside      = toc.closest('.cell.aside');
    var mainHeader = document.getElementById('main-header');
    var auiHeader  = document.querySelector('nav.aui-header');
    var marginTop  = 10; // дополнительный отступ сверху

    // Вставка заголовка, если ещё не вставлен
    function insertHeader() {
      if (!toc.querySelector('.toc-header')) {
        var header = document.createElement('div');
        header.textContent = 'На этой странице:';
        header.className = 'toc-header';
        header.style.fontWeight = 'bold';
        header.style.marginBottom = '10px';
        toc.insertBefore(header, toc.firstChild);
      }
    }

    // Применение inline-стилей
    function applyStyles() {
      insertHeader();

      // Получаем ширину родителя
      var asideRect = aside.getBoundingClientRect();

      // Вычисляем вертикальный отступ
      var offset = 0;
      if (mainHeader) {
        var mhRect = mainHeader.getBoundingClientRect();
        if (mhRect.bottom > 0 && mhRect.top < window.innerHeight) {
          offset = mhRect.bottom;
        }
      }
      if (offset === 0 && auiHeader) {
        var ahRect = auiHeader.getBoundingClientRect();
        offset = ahRect.bottom;
      }
      var topOffset = Math.max(offset + marginTop, asideRect.top);

      Object.assign(toc.style, {
        position:     'fixed',
        top:          topOffset + 'px',
        left:         asideRect.left + 'px',
        width:        asideRect.width + 'px',
        maxHeight:    (window.innerHeight - topOffset - 20) + 'px',
        overflowY:    'auto',
        boxSizing:    'border-box',
        border:       '1px solid #ddd',
        borderRadius: '4px',
        padding:      '15px',
        zIndex:       'auto'
      });
    }

    // Инициалный вызов
    applyStyles();

    // Обновление при скролле, ресайзе окна
    window.addEventListener('scroll', applyStyles);
    window.addEventListener('resize', applyStyles);

    // Наблюдатель за изменением размеров родителя
    if (window.ResizeObserver) {
      new ResizeObserver(applyStyles).observe(aside);
    }
  });
</script>