Внедрение верификации дизайнера процессов на основе Bpmn-js

bpmnlintВведение

Он проверяет ваши графики на соответствие определенному набору правил и сообщает о них как об ошибках или предупреждениях. Он может проверять вашу диаграмму BPMN из командной строки или черезbpmn-js-bpmnlintинтегрировать его в нашуВ BPMN Modeler:

Основные правила

В основе библиотеки лежат правила обнаружения определенных шаблонов в диаграммах BPMN. Каждое правило определяется фрагментом кода, который обнаруживает и сообщает от отсутствующих меток до факта обнаружения определенного шаблона моделирования, подверженного ошибкам.

Чтобы дать вам лучшее представление о том, какими могут быть правила, вот сегоднядовстроенная библиотекасписок правил в:

Название правила	описывать
`conditional-flows`	Отчеты исходящие потоки с отсутствующими условиями.
`end-event-required`
`fake-join`
`label-required`	Сообщить об отсутствующих тегах.
`no-complex-gateway`	Сообщайте о сложных шлюзах.
`no-disconnected`	Сообщает о несвязанных элементах.
`no-gateway-join-fork`	Сообщает как о разветвленных, так и о присоединенных шлюзах.
`no-implicit-split`	Сообщает о неявных разбиениях.
`no-inclusive-gateway`	Шлюзы, включенные в отчет.
`single-blank-start-event`	Несколько пустых начальных событий в диапазоне отчетов.
`single-event-definition`	Сообщает о событиях с несколькими определениями.
`start-event-required`	Сообщить о пропущенных начальных событиях.

с нуля до bpmnlint

Давайте лучше разберемся с конфигурацией и расширяемостью bpmnlint. Сначала проверьте и запуститеbpmnlint-playgroundЭто проект, специально разработанный для проектов проверки моделей.

git clone git@github.com:bpmn-io/bpmnlint-playground.git

cd bpmnlint-playground

npm install
npm start

При выполнении,npm startОткроется окно браузера с приложением браузера, которое уже поддерживает lint.

Настроить доступные правила

Один.bpmnlintrcПомещение в текущий рабочий каталог определяет файл, какие правила применять и следует ли рассматривать его как ошибку или предупреждение. держать одного на детской площадке.bpmnlintrcчто-то похожее на это:

{
  "extends": [
    "bpmnlint:recommended",
    "plugin:playground/recommended"
  ],
  "rules": {
    "playground/no-manual-task": "warn"
  }
}

ДолженextendsБлок рассказывает BPMnlint унаследован из двух предопределенных наборов правил:bpmnlint:recommendedа такжеplayground/recommended, последний предоставляется плагином для игровой площадки.

ДолженrulesБлоки переопределяют отчеты для определенных правил. Пример будет установленplayground/no-manual-taskкак предупреждение (не ошибка). Мы можем выбрать любое правило, напримервстроенныйПравила, вы также можете закрыть его:

{
  ...
  "rules": {
    ...
    "bpmnlint/label-required": "off"
  }
}

В приложении спортивного поля мы видим, что короткий бархат больше не сообщается о стартовом событии без метки.

Создание пользовательских правил

Настройка отчетов для существующих правил полезна, но подходит не для всех вариантов использования. Иногда пользователи или организации хотят идентифицировать специфичные для предметной области шаблоны, связанные с их конкретным стилем моделирования. bpmnlint решает эту проблему, позволяя вам добавлять собственные правила и наборы правил.

Например, что, если бы мы захотели создать правило, которое применяет смайлики к меткам каждого узла потока? Прыгаем на «детскую площадку»pluginпапкаа такжеemoji-label-requiredсуществуетrules/emoji-label-required.jsСоздайте правила в файле:

const {
  isAny
} = require('bpmnlint-utils');

const emojiRegex = require('emoji-regex');

/**
 * Detect and report missing emojis in element names.
 */
module.exports = function() {

  function check(node, reporter) {
    if (isAny(node, [
      'bpmn:FlowNode',
      'bpmn:SequenceFlow',
      'bpmn:Participant',
      'bpmn:Lane'
    ])) {

      const name = (node.name || '').trim();

      if (!emojiRegex().test(name)) {
        reporter.report(node.id, 'Element must have an emoji');
      }
    }
  }

  return {
    check
  };
};

Правило раскрываетcheck(node, reporter)Функция сообщается только тогда, когда в тегах BPMN отсутствуют эмодзи. ДолженРегулярное выражение эмодзиУтилита выполнит наши проверки. Мы должны установить его как зависимость в каталоге плагинов для запуска правила:

cd plugin
npm install emoji-regex

Затем нам нужно настроить конфигурацию, чтобы использоватьemoji-label-requiredправило. Поскольку это не встроенное правило, мы добавляем к нему префикс (в данном случаеplayground):

{
  "rules": {
    ...
    "playground/emoji-label-required": "error"
  }
}

Вернувшись в приложение для игровой площадки, короткошерстный теперь сообщит об ошибке тега без смайликов:Проверьте наличие эмодзи на этикетке.

На этом мы завершаем наш краткий обзор масштабируемости bpmnlint.

Представление содержитСмайлики Теги"Игровая площадка"ветвь,ДолженветвьСодержит реализацию, описанную в этой записи блога. Чтобы узнать больше об упаковке и тестировании правил, см.Пример плагина.

Выше приведено официальное руководство по BPMN.

Первое решение

1. Скачать зависимости

Добавьте следующие зависимости в package.json

"bpmnlint": "^6.4.0",
"bpmn-js-bpmnlint": "^0.15.0",
"bpmnlint-loader": "^0.1.4",
"file-drops": "^0.4.0",

2. Создайте новый файл правил

новое в проекте.bpmnlintrcфайл и используйтеextendsБлоки наследуют общую конфигурацию:

{
  "extends": "bpmnlint:recommended"
}

использоватьrulesБлокировать добавление или пользовательские правила:

{
  "extends": "bpmnlint:recommended",
  "rules": {
    "label-required": "off"
  }
}

3. Настройте загрузчик в`webpack.config.js`

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.bpmnlintrc$/,
        use: [
          {
            loader: 'bpmnlint-loader',
          }
        ]
      }
    ]
  }
};

Это гарантирует, что ваша сборка может использоватьконфигурационный файл bpmnlint.

4. Интегрировать линтер вbpmn-js

import lintModule from 'bpmn-js-bpmnlint';

import BpmnModeler from 'bpmn-js/lib/Modeler';

import bpmnlintConfig from './.bpmnlintrc';

var modeler = new BpmnModeler({
  linting: {
    bpmnlint: bpmnlintConfig
  },
  additionalModules: [
    lintModule
  ]
});

Если проект запускает сообщение об ошибке.bpmnlintrcНе удалось распознать, вы можете использовать второе решение

Второй вариант

Добавьте следующие зависимости на основе первого решения:

npm i -g bpmnlint bpmnlint-pack-config

Затем выполните в командной строке:

bpmnlint-pack-config -c .bpmnlintrc -o packed-config.js -t es

генерироватьpacked-config.jsдокумент

После этого таким же образом импортируйте файл правил вbpmn-jsсередина

import * as bpmnlintConfig from './packed-config';

var modeler = new BpmnModeler({
  linting: {
    bpmnlint: bpmnlintConfig
  },
  additionalModules: [
    lintModule
  ]
});

Конвертировано вpacked-config.jsПреимущество файла в том, что вы можете написать свою логику

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

Может контролировать, проверять ли

import fileDrop from 'file-drops';

var modeler = new BpmnModeler({
    linting: {
        bpmnlint: bpmnlintConfig,
        active: that.getUrlParam('linting')
    },
    additionalModules: [
        lintModule
    ],
});

modeler.on('linting.toggle', function(event) {
    const active = event.active;
    that.setUrlParam('linting', active);
});

const dndHandler = fileDrop('Drop BPMN Diagram here.', function(files) {
    this.bpmnModeler.importXML(files[0].contents);
});
document.querySelector('body').addEventListener('dragover', dndHandler);


// 流程校验使用
setUrlParam = (name, value) => {

    var url = new URL(window.location.href);

    if (value) {
        url.searchParams.set(name, 1);
    } else {
        url.searchParams.delete(name);
    }

    window.history.replaceState({}, null, url.href);
}
// 流程校验使用
getUrlParam = (name) => {
    var url = new URL(window.location.href);

    return url.searchParams.has(name);
}

Основной код является эта часть, а окончательный рендеринг выглядит следующим образом: