Интерактивная блок-схема планировщика брожения для пивоварни.
Интерактивная схема будет функционировать внутри 1с. Соответственно, никакой серверной части, только клиентская.
Можно использовать сторонние библиотеки, но все ссылки в коде должны вести на локальные скрипты.
Никаких js фреймворков.
Нужно:
Отрисовка схемы, события js (выделение, создание блоков и связей, удаление блоков и связей).
В планировщике есть танки и стрелки (перекачки в другой танк).
Верхний блок есть всегда (варка).
Структура данных json для схемы
batch>
tank>
id:1234> //уникальный id, по которому строятся связи
tankName:"12"> //название/номер танка
tankVolume: "4т"> //объем танка
tankFill:"2020"> //заполнение танка
inputs:1> //количество стрелок на входе
terminal:1> //последний танк (признак, что на выходе нет стрелок)
upperLevels:0> //количество танков по цепочке вверх
allowDelete:0> //разрешать удаление
/tank>
link>
from:1234>
to:1235>
allowDelete:1> //разрешать удаление
/link>
/batch>
Функция обновления схемы: из 1с в функцию будут передаваться данные о танках и стрелках (перекачках), в json, как в образце. В соответствии с ними нужно перерисовывать схему (очищать и строить заново).
Общий механизм такой:
1. Мы меняем что-то на схеме.
2. Передаем данные изменений в 1с.
3. На стороне 1с пользователь меняет, заполняет параметры.
4. 1с вызывает функцию обновления схемы, передает новые данные.
Изменение:
Потянув за нижнюю точку блока, можно
1. Перетянуть на пустое место (создать новый танк) - в этом случае отображается контур танка и стрелка к нему.
2. перетянуть на существующий танк (только уровнем ниже, upperLevels> чем у исходного) - в этом случае контур танка не показываем.
3. Вернуть курсор в исходную точку - тогда ничего не делаем.
Конец стрелки следует за курсором до тех пор, пока кнопка мыши не отпущена.
При отпускании кнопки мыши передаем данные в 1с (и перерисовываем схему по команде от 1с).
Удаление
По кнопке del удаляем выделенное (танк или стрелку), только если allowDelete=1.
Выделение:
Мышкой по клику можно выделить
1. Любой танк.
2. Стрелку, если allowDelete=1
При выделении танк или стрелка меняют цвет.
Событие для 1с:
Скрипт должен генерировать события выделения, создания нового танка, удаление танка и удаление стрелки (перекачки).
События вызывают функцию Call1c, в которую нужно передать тип операции (selectTank, selectLink, deleteTank, deleteLink, createLink, createTank), кроме того нужно передать:
1. Выделение танка - id танка или id стрелки
2. Создание нового танка - id исходного танка
3. Создание стрелки - id исходного танка и танка приемника
4. Удаление - id танка или id стрелки
Отрисовка, выравнивание
По вертикали:
Не знаю как прописать это в алгоритм) Должно быть как на рисунке.
По горизонтали:
Первый уровень распределяем (фиксированный отступ между блоками)
Следующие уровни: танк рисуем посередине (между всеми танками откуда приходят стрелки к текущему)
