Как создать пример BPMN.io

Question

Может ли кто-нибудь наставить меня на правильный способ начать такой пример? Я привык к разработке проектов ASP.NET и мне нужно создать bpmn modeler с пользовательскими свойствами. Поэтому я нашел BPMN.IO, https://bpmn.io/, который (я думаю) может предоставить мне такой моделер и возможность использовать пользовательские свойства.

На сайте можно найти много примеров, но я почему-то не могу правильно запустить один из них. Например: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel

Какие шаги мне нужно предпринять, чтобы это работало в VS2017? Я не знаком со структурой, которую вижу в этом примере.

Любая помощь приветствуется.

Answer 1

1. Вам нужно будет начать использовать node.js в своем проекте - после установки вы получите папку node_modules в вашем проекте

2. Загрузите образец панели свойств с bpmn.io. У вас будет 4 дополнительные папки в node_modules - bpmn-font, bpmn-js, bpmn-js-properties-panel, bpmn-moddle.

3. Не как часть вашего проекта, у вас должны быть другие папки из примера - связка, CSS, Modeler, панель свойств и расширение панели свойств. Я назвал свою папку "BPMN" (используется в шаге 4)

4. Напишите команду browersify, чтобы взять файлы из части 3 и объединить их в файл BPMN_PropertiesPanel.js. Этот скрипт должен быть включен на вашей странице. Мой это:

browserify BPMN / properties-panel-extension / app / index.js -t [stringify --extensions [.bpmn]] -g [babelify --presets ["env"]] -o Набор инструментов /BPMN/BPMN_PropertiesPanel.js

5. Для изменения файла app.less на файл app.css вам также понадобится командная строка. Мой это:

lessc BPMN / свойства-панель-расширение /css/app.less BPMN/ свойства-панель-расширение /css/app.css

6. Чтобы добавить пользовательские свойства, измените "MagicPropertiesProvider.js"

7. Чтобы добавить пользовательские вкладки на панель свойств, измените "SpellProps.js". Ваша команда browserify соберет эти изменения и выведет их в ваш скрипт.

8. Если вам нужно хранить свои диаграммы в SQL Server, я рекомендую varchar. Сначала я использовал XML, но не смог заставить его работать. Возможно, вам повезет больше, чем мне.

PS - есть все еще зависящие от браузера проблемы с моделером, и он может выдавать ошибки js. Тем не менее, это лучшая диаграмма, которую я смог найти, и выходной XML точен.