Самый подробный учебник по bpmn.js во всей сети - свойства

JavaScript
Самый подробный учебник по bpmn.js во всей сети - свойства

предисловие

В: Что такое bpmn.js?

"

bpmn.jsЭто набор инструментов рендеринга BPMN2.0 и средство веб-моделирования, которое позволяет выполнять функцию рисования блок-схем во внешнем интерфейсе.

В: Почему я пишу эту серию учебников? 🤔️

"

Из-за потребностей бизнеса компании его необходимо использовать в проектеbpmn.js, Однако из-заbpmn.jsРазработчики игры зарубежные друзья,поэтому отечественных методических материалов мало и нет подробных документов.Поэтому много способов использования и много ям приходится искать самому.Поразмыслив,решил написать серию учебные материалы об этом. чтобы помочь большеbpmn.jsПользователи или разработчики, которые ищут хороший способ рисовать блок-схемы, в то же время для них это еще и своего рода консолидация.

Поскольку это серия статей, она может часто обновляться.Пожалуйста, простите меня, если вы случайно смахнули его, и это не то, что вам нужно😊.

Не просите похвалы👍 не просите сердца❤️ Я просто надеюсь, что смогу вам немного помочь.

Характеристики

Ха-ха, вот оно, наконец, здесь 😂.

заставить всех ждатьPropertiesСтатья 🎉.

На самом деле Линь Дуань использовал его на работе.bpmn.jsСодержание статьи ограничивается статьями, написанными ранее, и считается, что фактические знания полностью извлекаются... Тогда кому-то будет любопытно спросить... Зачем вообщеProperties-panelНе используется такая важная функция 🤔️?

На самом деле это связано с использованием нашей команды:

первый контакт сbpmn.jsЭто потому, что его нужно использовать для рисования рабочего процесса для реализации такой функции механизма принятия решений.И наш подход заключается в том, что интерфейс проходитbpmn.jsнарисовать блок-схему, т.Start,UserTask,BusinessRuleTaskи т. д. Здесь я называю их узлами.Каждый узел соответствуетxmlМетка в файле, традиционный подход может заключаться в сохранении атрибутов каждой ноды в метку, например, у меня тут начальная нодаxmlЭтикетка:

<startEvent id="StartEvent_1y45yut" name="开始" roles="admin"></startEvent>

Затем добавьте предыдущее имя к этому узлу под названием "权限(roles)” настраиваемый атрибут, этот атрибут будет сохранен вxml, и останется на нем при экспорте этого файла.

Хотя мы также связываем много информации с каждым узлом, эта информация не хранится напрямую вxmlв метке. Вместо этого каждый узел будет иметьid, в фоновом режиме есть таблица, предназначенная для хранения дополнительной информации о каждом узле, поэтому каждый раз, когда вы нажимаете на узел, вы передаете этоidДля вызова данных, хранящихся в фоновом режиме, для получения атрибутов, соответствующих узлам, справа появляется ящик для отображения информации об этих атрибутах и ​​может быть изменен.После сохранения модификации он также называется фоновым интерфейсом для изменить информацию в таблице.Поэтому основная логика по-прежнему сосредоточена в фоновом режиме.Поэтому дляxmlОперация действительно не лишняя, естественно бесполезнаProperties-panel.

Но мой подход, вы также можете понять, что «ящик», который появляется справа, является моим собственнымProperties-panel, потому что он также действует как атрибут, связанный с узлом.

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

Прочитав эту главу, вы узнаете:

  • чтоbpmn properties🤔️?
  • Как читатьbpmn properties🤔️?
  • Как изменитьbpmn properties🤔️?
  • использоватьupdatePropertiesМетод 🤔️?

bpmn propertiesЗнакомство с атрибутами и их основное использование

1. Что такоеbpmn properties🤔️?

Давайте сначала разберемся, что такоеbpmn properties🤔️?

мы используемbpmn.jsКаждый нарисованный узел фактически называетсяdiagram element(Элементы графика, легко ли понять 😁)

пока вbpmnкаждый в файлеxmlэтикетка называет этоBPMN element.

Будуdiagram elementа такжеBPMN elementНекоторые свойства связаныbusinessObjectАтрибуты Из названия также можно узнать, что это объект (Объект), к этому объекту можно добавить некоторые специальные атрибуты, и эти атрибуты могут быть непосредственно вставлены вBPMN elementВверх.

Например 🌰:

я нарисовалStartEventузел, который соответствует:

  • diagram element:

    {
	id: "StartEvent_1y45yut",
	type: "bpmn:StartEvent",
	businessObject: {
		$type: "bpmn:StartEvent",
		name: "开始"
	}
}

  • BPMN element:

    <startEvent id="StartEvent_1y45yut" name="开始"></startEvent>

Подобные свойстваbpmn properties, вы можете использовать его для достижения ваших бизнес-потребностей.

2. Как читатьbpmn properties🤔️?

Не знаю, помните ли вы фрагмент кода, который я использовал в «Событиях»:

addModelerListener () {
       // 监听 modeler
      const bpmnjs = this.bpmnModeler
      const that = this
      const events = ['shape.added', 'shape.move.end', 'shape.removed']
      events.forEach(function(event) {
        that.bpmnModeler.on(event, e => {
          var elementRegistry = bpmnjs.get('elementRegistry')
          var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
          if (event === 'shape.added') {
            console.log('新增了shape')
          } else if (event === 'shape.move.end') {
            console.log('移动了shape')
          } else if (event === 'shape.removed') {
            console.log('删除了shape')
          }
        })
      })
    }

Этот метод помещен в将字符串转换成图显示出来После этого он используется для привязки событий к элементам.

из них полезныеelementRegistry.

Итак, если вhtml, вы можете использовать этот метод, чтобы получитьbpmn properties:

<body>
  <div id="canvas"></div>
<script>
  var bpmnJS = new BpmnJS({
  	container: '#canvas'
  });
  bpmnJS.importXML(xmlStr, function(err) {
    if (!err) {
      var elementRegistry = bpmnJs.get('elementRegistry')
      var startEventElement = elementRegistry.get('StartEvent_1y45yut'),
          startEvent = startEventElement.businessObject;
     	console.log(startEvent.name) // 开始
  	}
  }
</script>

и в некоторыхclassв, напримерCustomRenderer.js, вы можете напрямую использовать.способ получить:

export default class CustomRenderer extends BaseRenderer {
	drawShape (parentNode, element) {
		// element.businessObject
		// or 解构
		// const { businessObject } = element
	}
}

3. Как модифицироватьbpmn properties🤔️?

ВыbpmnВ файле вы можете увидеть такой фрагмент кода:

<bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_1" targetRef="Task_1" name="FOO &gt; BAR?">
      <bpmn:conditionExpression xsi:type="bpmn:tFormalExpression"><![CDATA[${foo > bar}]]></bpmn:conditionExpression>
    </bpmn:sequenceFlow>

внутриxsi:type,sourceRefЧто это за атрибуты 🤔️ Как узнать, какие теги имеют какие атрибуты 🤔️?

Вы действительно можете дать это в официальномbpmn.jsonнайти в:

"дескриптор метамодели"

Его можно установить следующим образом:

var moddle = bpmnJS.get('moddle');

// 创建一个BPMN element , 并且载入到导出的xml里
var newCondition = moddle.create('bpmn:FormalExpression', {
  body: '${ value > 100 }'
});

// 写入属性, 但是不支持撤销 
sequenceFlow.conditionExpression = newCondition;

Вышеупомянутый метод 👆 не поддерживает отмену, если вы хотите иметь возможность отменить/повторить, вы можете сделать это следующим образом:

var modeling = bpmnJS.get('modeling');

modeling.updateProperties(sequenceFlowElement, {
  conditionExpression: newCondition
});

то есть черезmodeling.updateProperties()Сюда.

этоmodelingКажется, что это нужно представить, в любом случае, если я используюCDNУдаленно импортировать следующееjsКажется, это неправильноUncaught Error: No provider for "modeling"!.

<script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script>

Конечно, если вы используетеnpmЕсли скачать, то проблем нет.

Первым параметром этого метода являетсяdiagram element, то есть мы упоминали ранее сelementRegistryПолученный объект.

Второй параметр — это свойство, которое нужно изменить, этоMapструктура.

4. ИспользуйтеupdatePropertiesметод

Например 🌰, я хочу нажать на типbpmn:Taskузел, измените егоnameсвойства, я могу сделать это:

  • Добавить событие клика к узлу
  • Определите тип узла какbpmn:Task, выполнять последующую обработку только на этом типе узла
  • использоватьupdatePropertiesвозобновитьname 
    createNewDiagram () {
        // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
                // console.error(err)
            } else {
                // 这里是成功之后的回调, 可以在这里做一系列事情
                this.success()
            }
        })
    },
    success () {
        this.addModelerListener() // 添加监听事件
    },
    addModelerListener () {
    		const eventBus = this.bpmnModeler.get('eventBus')
      	const modeling = this.bpmnModeler.get('modeling')
      	const elementRegistry = this.bpmnModeler.get('elementRegistry');
      	const eventTypes = ['element.click', 'element.changed'];
      	eventTypes.forEach(function(eventType) {
          	eventBus.on(eventType, function (e) {
              	if (!e || !e.element) {
                  console.log('无效的e', e)
                  return
                }
              	if (eventType === 'element.click') {
                  console.log('点击了element', e)
                  var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
                  if (shape.type === 'bpmn:Task') {
                    modeling.updateProperties(shape, {
                    	name: '我是修改后的Task名称'
                  	})
                  }
                }
            })
        })
    }

Конечно, вы также можете изменить несколько свойств одновременно:

modeling.updateProperties(startEventElement, {
	name: '我是修改后的虚线节点',
	isInterrupting: false
})

Я нахожу предыдущийmeta-model descriptorзнаниеStartEventесть еще одинisInterruptingатрибут, поэтому я попытался изменить его, и это оказалось успешным, изменив начальный узел на узел с пунктирной линией в качестве границы:

bpmnModeler5.png
bpmnModeler5.png

Конечно, вы также можете добавить некоторыеmeta-model descriptorНекоторые пользовательские свойства в:

modeling.updateProperties(shape, {
	name: '我是修改后的虚线节点',
	isInterrupting: false,
	customText: '我是自定义的text属性'
})

Однако они будут помещены в$attrsсередина:

bpmnModeler6.png
bpmnModeler6.png

И таким образом, это также может быть непосредственно модифицировано дляbpmnФайл:

bpmnModeler7.png
bpmnModeler7.png

послесловие

В этой главе в основном представленыbpmn propertiesКонцепция и метод работы... На самом деле, до этого я даже не умела даватьxmlДобавить атрибуты в теги и даже не знатьupdatePropertiesКак пользоваться 😂...

К счастью, у меня толстая кожа и мне не стыдно просить, и я спросил у некоторых друзей в группе...

Ха-ха-ха, благодаря ручному брату Aite @NetEase-Fu Chao, а также🤗🤗🤗, в исследованииbpmn.jsПомощь, оказанная мне атрибутами, конечно, я также знаю, что многие друзья надеются, что я могу быстро обновить предыдущую статью оproperties-panelСодержание...

Но я очень устала сегодня... Дай мне расслабиться, давай завтра поработаем лучше😁.

(Эм... ни за что, последнее слово за мной...)

Наконец, если вы также правыbpmn.jsЕсли вам интересно, вы можете присоединиться к нашей группе обмена bpmn.js👇👇👇, вместе учиться и вместе добиваться успехов.

Подпишитесь на официальный аккаунт Лин Дайдао и выберите «группу bpmn.js» в меню «Другое».

LinDaiDai公众号二维码.jpg
Официальный аккаунт LinDaiDai QR code.jpg

Полный каталог серии можно найти здесь:"Самый подробный учебник по bpmn.js во всей сети"

Рекомендации по сериалу:

«Описание BPMN.JS Exchange Group».

"Самый подробный учебник по bpmn.js во всей сети - основы"

"Самый подробный учебный материал по bpmn.js во всей сети - http запрос"

"Самый подробный учебный материал по bpmn.js во всей сети - мероприятия"

"Самый подробный учебник по bpmn.js во всей сети - рендерер"

"Самый подробный учебник по bpmn.js во всей сети - contextPad"

"Самый подробный учебник по bpmn.js во всей сети - редактирование и удаление узлов"

"Самый подробный учебный материал по bpmn.js во всей сети - компоненты пакета"

Категории