Онлайн-демонстрация

Нажмите, чтобы посмотреть

Введение

• Vue Flow Design Plus — это инструмент для проектирования процессов, основанный на Vue + Ant Design Vue + JSPlumb. Он предназначен для использования в проектах Vue и является преемником VFD.
• Версия Vue была переписана с использованием нового технического стека и предлагает улучшенный способ работы. Новая версия будет постоянно обновляться и поддерживаться как приоритетная.

Vue3 версия с открытым исходным кодом

• VUE3 FLOW DESIGN — инструмент для проектирования процессов на основе Vue3 + TypeScript + Vite + Ant Design Vue 3 + JSPlumb. Доступен по ссылке vue3-flow-design.

Оптимизация содержания

• Устранение ошибок, оставшихся от предыдущей версии VFD.
• Замена jQuery-UI на собственный код.
• Замена jQuery на собственный код.
• Изменение «that» на «this» и переписывание функций со стрелками.
• Добавление комментариев.
• Постоянная оптимизация и т. д.

Команды управления

• Установите пакеты node_modules: yarn.
• Запустите проект: yarn start.
• Соберите ресурсы проекта в папке dist: npm run build.

Демонстрация эффекта

• Новый интерфейс:
  • Рисунок 01.
• Базовая панель:
  • Рисунок 02.
• Перетаскивание узлов на область рисования и соединение их линиями:
  • Рисунок 03.
• Выравнивание узлов или использование автоматического выравнивания:
  • Рисунок 04.
• Отображение/скрытие сетки:
  • Рисунок 05.
• Настройка свойств узлов и линий:
  • Рисунок 06.
• Перемещение одного или нескольких узлов (удерживая клавишу CTRL):
  • Рисунок 07.
• Изменение порядка выравнивания узлов (удерживая клавишу Ctrl и выбирая узлы по одному):
  • Рисунок 08.
• Очистка холста и перерисовка:
  • Рисунок 09.
• Сохранение диаграммы процесса (создаётся фрагмент данных в формате json, который можно сохранить и использовать для отладки):
  • Рисунок 10.
• Сохранить диаграмму процесса в виде изображения на локальном компьютере:
  • Рисунок 11.
• Масштабирование и перемещение холста:
  • Рисунок 12.
• Установка параметров через настройки страницы (CTRL+ALT+S):
  • Рисунок 13.
• Описание сочетаний клавиш:
  • Рисунок 14 и т.д.