Перейти к содержанию

Блок "Визуализатор JavaScript"

Блок доступен начиная с версии 0.14

Назначение

Блок создает визуализатор в приложении на основе пользовательского JavaScript-кода.

Чтобы начать работать с блоком, его необходимо выбрать в библиотеке и переместить в область графа.

Настройки блока

Работа с настройками блока осуществляется через локальное меню (пункт Настройки):

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

Общие настройки блоков описаны в отдельном разделе.

Группа "Визуализатор JavaScript"

Наименование Тип данных Обязательное Описание Пример
Компонент Выпадающий список Да Меню с выбором компонента, на котором будет происходить отрисовка визуализатора.
Возможные варианты:
- div;
- canvas
Передавать данные в клиентское приложения Флаг Нет Включить передачу данных, пришедших на вход "Данные", в визуализатор
Скрытый Флаг Нет Если флаг включен, визуализатор не будет отображаться на пресете в режиме просмотра
Выполнять в момент открытия пресета Флаг Нет Параметр доступен, если включен флаг "Скрытый". Если флаг включен, код блока выполнится в момент открытия пресета

Входы блока

Название входа Тип Обязательный Описание
Данные Ряд данных Нет Массив данных с типом "Ряд данных" или "Объект"
Настройки визуализатора Строка Нет Описание визуализатора, обычно строка в формате JSON. При передаче в блок переопределяет значение "Код для выполнения" из параметров

Кроме указанных входов, так же доступно создание динамических входов.

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

Название входа Тип Обязательный Описание
Идентификатор Строка Да Идентификатор входа - используется внутри блока для получения доступа к данным входа. Важно: Идентификаторы data и options зарезервированы для уже существующих входов
Имя Строка Да Имя входа для отображения в списке входов блока
Описание Строка Нет Дополнительная информация с описанием входа
Тип Выпадающий список Да Тип данных, которые будут поступать на вход. Поле необходимо для построения корректных связей с другими блоками
Обязательный Флаг Да Обязательность входа. Если вход обязательный и на него не поступили данные, блок не будет рассчитан с ошибкой
Массив Флаг Да Является ли вход массивом данных

Выходы блока

В блоке нет выходов

События блока

Название выхода Тип Описание
Событие нажатия на точку (Данные) JSON Используется для динамического обновления связанных визуализаторов при выборе определенной точки на визуализаторе

Событие нажатия на точку

Если в настройках блока указать событие нажатия на точку, то в момент нажатия на выход блока уйдет информация, заданная в настройках (содержание информации определяет пользователь, работающий с блоком).

Описание работы блока

Блок предназначен для создания сложных визуализаторов, включая анимацию, 3D-сцены и другие продвинутые эффекты.

Способы задания настроек:

  • через интерфейс блока (визуально);
  • передачей JSON на вход блока.

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

Использования шаблонизатора Jinja

Для применения шаблона необходимо понимать структуру данных, которые поступили на вход блока. Первым параметром необходимо указывать идентификатор входа с данными.

Идентификатором для входа "Данные" является ключ input. Вход "Настройки визуализатора" недоступен в качестве данных для шаблона.

Проверка безопасности прикладного кода

При изменении кода внутри блока JS выполняется его проверка на соответствие ограничениям безопасности. В блоке проверяются строковые значения, которые могут содержать потенциально вредоносный HTML-код. Проверка выполняется санитайзером HTML (подробное описание здесь).

Описание работы визуализатора

Блок отображает сформированный в соответствии с входными данными визуализатор:

Настройки визуализатора

Визуализатор не имеет специфических настроек. Общий список доступен на странице Настройки визуализаторов

Написание кода

Подробнее про написание кода в разделе Разработка визуализаторов на JavaScript

Полезные ссылки