Перейти к основному содержимому

ProcessViewer

Отображает BPMN-схему бизнес-процесса.

Позволяет делать следующее:

  • просматривать BPMN-схему бизнес-процесса;
  • выбирать BPMN-элементы на схеме бизнес-процесса;
  • подсвечивать BPMN-элементы на схеме бизнес-процесса разными цветами.
<ProcessViewer Value-var="xml" />

Свойства​

Badge​

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS​

Массив строк-классов CSS-стилей, описанных в файле CSS.css DevTools-проекта или встроенных CSS-стилей Платформы. Пример: // CSS-стиль, определяющий внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme DevTools-проекта CSS={["m-4", "p-4"]}

Тип: array

CombineConfig​

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых фрагментов кода. Запрещено изменять значение

Тип: object

Hidden​

Признак состояния компонента Скрыт

Тип: boolean

HighlightedItems​

Массив объектов, описывающих цвета BPMN-элементов. Каждый объект может содержать поля id (идентификатор BPMN-элемента) и color (цвет из предустановленной палитры: Active, Incident, End, Path, Warning).

Тип: array

Hint​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на белом фоне

Тип: any

Id​

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

OnClick​

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

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример:

OnClick={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnItemClick​

Обработчик события выбора элемента схемы бизнес-процесса

Тип: undefined

OnKeyDown​

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnKeyUp​

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent. Пример: OnKeyUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseDown​

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseDown={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseEnter​

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseEnter={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseLeave​

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseLeave={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseMove​

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseMove={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOut​

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOut={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseOver​

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseOver={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnMouseUp​

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent. Пример: OnMouseUp={() => { // Получение параметра события const event = getEvent(); // Вывод параметра события в консоль console.log(event); }

Тип: undefined

OnUnmount​

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров. Пример:

OnUnmount={() => { // Отмена выполнения периодического действия при размонтировании экранной формы return clearInterval(getValue("pleerInterval")) } }

Тип: undefined

Slot​

Именованное пространство во фрагменте экранной формы.

Тип: string

Tooltip​

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне

Тип: any

TraceId​

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Value​

BPMN-схема в формате xml

Тип: string

Visible​

Признак инверсии состояния компонента Скрыт

Тип: boolean

Значение по умолчанию: True

Примеры​

Данные:

  "xml": "<?xml version="1.0" encoding="UTF-8"?>\n<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_0hbujbh" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.18.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.3.0">\n  <bpmn:process id="Process_18a11ii" isExecutable="true">\n    <bpmn:startEvent id="Event_0dfekbp">\n      <bpmn:outgoing>Flow_1t0it3b</bpmn:outgoing>\n    </bpmn:startEvent>\n    <bpmn:task id="Activity_1j5px29" name="Active">\n      <bpmn:incoming>Flow_1t0it3b</bpmn:incoming>\n      <bpmn:outgoing>Flow_0k78uhx</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1t0it3b" sourceRef="Event_0dfekbp" targetRef="Activity_1j5px29" />\n    <bpmn:task id="Activity_1bsr3eg" name="Incident">\n      <bpmn:incoming>Flow_0k78uhx</bpmn:incoming>\n      <bpmn:outgoing>Flow_1k4t294</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_0k78uhx" sourceRef="Activity_1j5px29" targetRef="Activity_1bsr3eg" />\n    <bpmn:task id="Activity_1dsx2ka" name="End">\n      <bpmn:incoming>Flow_1k4t294</bpmn:incoming>\n      <bpmn:outgoing>Flow_1q493oc</bpmn:outgoing>\n      <bpmn:outgoing>Flow_0ea0nmb</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1k4t294" sourceRef="Activity_1bsr3eg" targetRef="Activity_1dsx2ka" />\n    <bpmn:task id="Activity_15vfr5s" name="Path">\n      <bpmn:incoming>Flow_1q493oc</bpmn:incoming>\n      <bpmn:outgoing>Flow_0zckyb1</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_1q493oc" sourceRef="Activity_1dsx2ka" targetRef="Activity_15vfr5s" />\n    <bpmn:task id="Activity_07kkir2" name="Warning">\n      <bpmn:incoming>Flow_0zckyb1</bpmn:incoming>\n      <bpmn:outgoing>Flow_1slhb1w</bpmn:outgoing>\n    </bpmn:task>\n    <bpmn:sequenceFlow id="Flow_0zckyb1" sourceRef="Activity_15vfr5s" targetRef="Activity_07kkir2" />\n    <bpmn:endEvent id="Event_0dlyreh">\n      <bpmn:incoming>Flow_1slhb1w</bpmn:incoming>\n    </bpmn:endEvent>\n    <bpmn:sequenceFlow id="Flow_1slhb1w" sourceRef="Activity_07kkir2" targetRef="Event_0dlyreh" />\n    <bpmn:exclusiveGateway id="Gateway_070riav" name="void">\n      <bpmn:incoming>Flow_0ea0nmb</bpmn:incoming>\n    </bpmn:exclusiveGateway>\n    <bpmn:sequenceFlow id="Flow_0ea0nmb" sourceRef="Activity_1dsx2ka" targetRef="Gateway_070riav" />\n  </bpmn:process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_18a11ii">\n      <bpmndi:BPMNShape id="Activity_1j5px29_di" bpmnElement="Activity_1j5px29">\n        <dc:Bounds x="220" y="80" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1bsr3eg_di" bpmnElement="Activity_1bsr3eg">\n        <dc:Bounds x="320" y="168" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_1dsx2ka_di" bpmnElement="Activity_1dsx2ka">\n        <dc:Bounds x="420" y="250" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_15vfr5s_di" bpmnElement="Activity_15vfr5s">\n        <dc:Bounds x="520" y="330" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_07kkir2_di" bpmnElement="Activity_07kkir2">\n        <dc:Bounds x="620" y="410" width="100" height="80" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Gateway_070riav_di" bpmnElement="Gateway_070riav" isMarkerVisible="true">\n        <dc:Bounds x="315" y="425" width="50" height="50" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="329" y="485" width="21" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0dfekbp_di" bpmnElement="Event_0dfekbp">\n        <dc:Bounds x="152" y="102" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Event_0dlyreh_di" bpmnElement="Event_0dlyreh">\n        <dc:Bounds x="652" y="522" width="36" height="36" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Flow_1t0it3b_di" bpmnElement="Flow_1t0it3b">\n        <di:waypoint x="188" y="120" />\n        <di:waypoint x="220" y="120" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0k78uhx_di" bpmnElement="Flow_0k78uhx">\n        <di:waypoint x="320" y="120" />\n        <di:waypoint x="370" y="120" />\n        <di:waypoint x="370" y="168" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1k4t294_di" bpmnElement="Flow_1k4t294">\n        <di:waypoint x="420" y="208" />\n        <di:waypoint x="470" y="208" />\n        <di:waypoint x="470" y="250" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1q493oc_di" bpmnElement="Flow_1q493oc">\n        <di:waypoint x="520" y="290" />\n        <di:waypoint x="570" y="290" />\n        <di:waypoint x="570" y="330" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0ea0nmb_di" bpmnElement="Flow_0ea0nmb">\n        <di:waypoint x="420" y="290" />\n        <di:waypoint x="340" y="290" />\n        <di:waypoint x="340" y="425" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0zckyb1_di" bpmnElement="Flow_0zckyb1">\n        <di:waypoint x="620" y="370" />\n        <di:waypoint x="670" y="370" />\n        <di:waypoint x="670" y="410" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_1slhb1w_di" bpmnElement="Flow_1slhb1w">\n        <di:waypoint x="670" y="490" />\n        <di:waypoint x="670" y="522" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</bpmn:definitions>", "xml2": "\n<?xml version="1.0" encoding="UTF-8"?>\n<semantic:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:semantic="http://www.omg.org/spec/BPMN/20100524/MODEL" id="_1275940932088" targetNamespace="http://www.trisotech.com/definitions/_1275940932088" exporter="Camunda Modeler" exporterVersion="1.16.0">\n  <semantic:message id="_1275940932310" />\n  <semantic:message id="_1275940932433" />\n  <semantic:process id="_6-1" isExecutable="false">\n    <semantic:laneSet id="ls_6-438">\n      <semantic:lane id="_6-448" name="delivery boy">\n        <semantic:flowNodeRef>_6-514</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-565</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-616</semantic:flowNodeRef>\n      </semantic:lane>\n      <semantic:lane id="_6-446" name="pizza chef">\n        <semantic:flowNodeRef>_6-463</semantic:flowNodeRef>\n      </semantic:lane>\n      <semantic:lane id="_6-650" name="clerk">\n        <semantic:flowNodeRef>OrderReceivedEvent</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-652</semantic:flowNodeRef>\n        <semantic:flowNodeRef>_6-674</semantic:flowNodeRef>\n        <semantic:flowNodeRef>CalmCustomerTask</semantic:flowNodeRef>\n      </semantic:lane>\n    </semantic:laneSet>\n    <semantic:startEvent id="OrderReceivedEvent" name="Order received">\n      <semantic:outgoing>_6-630</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932310" />\n    </semantic:startEvent>\n    <semantic:parallelGateway id="_6-652" name="">\n      <semantic:incoming>_6-630</semantic:incoming>\n      <semantic:outgoing>_6-691</semantic:outgoing>\n      <semantic:outgoing>_6-693</semantic:outgoing>\n    </semantic:parallelGateway>\n    <semantic:intermediateCatchEvent id="_6-674" name="„where is my pizza?“">\n      <semantic:incoming>_6-691</semantic:incoming>\n      <semantic:incoming>_6-746</semantic:incoming>\n      <semantic:outgoing>_6-748</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932433" />\n    </semantic:intermediateCatchEvent>\n    <semantic:task id="CalmCustomerTask" name="Calm customer">\n      <semantic:incoming>_6-748</semantic:incoming>\n      <semantic:outgoing>_6-746</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-463" name="Bake the pizza">\n      <semantic:incoming>_6-693</semantic:incoming>\n      <semantic:outgoing>_6-632</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-514" name="Deliver the pizza">\n      <semantic:incoming>_6-632</semantic:incoming>\n      <semantic:outgoing>_6-634</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-565" name="Receive payment">\n      <semantic:incoming>_6-634</semantic:incoming>\n      <semantic:outgoing>_6-636</semantic:outgoing>\n    </semantic:task>\n    <semantic:endEvent id="_6-616" name="">\n      <semantic:incoming>_6-636</semantic:incoming>\n      <semantic:terminateEventDefinition />\n    </semantic:endEvent>\n    <semantic:sequenceFlow id="_6-630" name="" sourceRef="OrderReceivedEvent" targetRef="_6-652" />\n    <semantic:sequenceFlow id="_6-691" name="" sourceRef="_6-652" targetRef="_6-674" />\n    <semantic:sequenceFlow id="_6-693" name="" sourceRef="_6-652" targetRef="_6-463" />\n    <semantic:sequenceFlow id="_6-746" name="" sourceRef="CalmCustomerTask" targetRef="_6-674" />\n    <semantic:sequenceFlow id="_6-748" name="" sourceRef="_6-674" targetRef="CalmCustomerTask" />\n    <semantic:sequenceFlow id="_6-632" name="" sourceRef="_6-463" targetRef="_6-514" />\n    <semantic:sequenceFlow id="_6-634" name="" sourceRef="_6-514" targetRef="_6-565" />\n    <semantic:sequenceFlow id="_6-636" name="" sourceRef="_6-565" targetRef="_6-616" />\n  </semantic:process>\n  <semantic:message id="_1275940932198" />\n  <semantic:process id="_6-2" isExecutable="false">\n    <semantic:startEvent id="_6-61" name="Hungry for pizza">\n      <semantic:outgoing>_6-125</semantic:outgoing>\n    </semantic:startEvent>\n    <semantic:task id="SelectAPizzaTask" name="Select a pizza">\n      <semantic:incoming>_6-125</semantic:incoming>\n      <semantic:outgoing>_6-178</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-127" name="Order a pizza">\n      <semantic:incoming>_6-178</semantic:incoming>\n      <semantic:outgoing>_6-420</semantic:outgoing>\n    </semantic:task>\n    <semantic:eventBasedGateway id="_6-180" name="">\n      <semantic:incoming>_6-420</semantic:incoming>\n      <semantic:incoming>_6-430</semantic:incoming>\n      <semantic:outgoing>_6-422</semantic:outgoing>\n      <semantic:outgoing>_6-424</semantic:outgoing>\n    </semantic:eventBasedGateway>\n    <semantic:intermediateCatchEvent id="_6-202" name="pizza received">\n      <semantic:incoming>_6-422</semantic:incoming>\n      <semantic:outgoing>_6-428</semantic:outgoing>\n      <semantic:messageEventDefinition messageRef="_1275940932198" />\n    </semantic:intermediateCatchEvent>\n    <semantic:intermediateCatchEvent id="_6-219" name="60 minutes">\n      <semantic:incoming>_6-424</semantic:incoming>\n      <semantic:outgoing>_6-426</semantic:outgoing>\n      <semantic:timerEventDefinition>\n        <semantic:timeDate />\n      </semantic:timerEventDefinition>\n    </semantic:intermediateCatchEvent>\n    <semantic:task id="_6-236" name="Ask for the pizza">\n      <semantic:incoming>_6-426</semantic:incoming>\n      <semantic:outgoing>_6-430</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-304" name="Pay the pizza">\n      <semantic:incoming>_6-428</semantic:incoming>\n      <semantic:outgoing>_6-434</semantic:outgoing>\n    </semantic:task>\n    <semantic:task id="_6-355" name="Eat the pizza">\n      <semantic:incoming>_6-434</semantic:incoming>\n      <semantic:outgoing>_6-436</semantic:outgoing>\n    </semantic:task>\n    <semantic:endEvent id="_6-406" name="Hunger satisfied">\n      <semantic:incoming>_6-436</semantic:incoming>\n    </semantic:endEvent>\n    <semantic:sequenceFlow id="_6-125" name="" sourceRef="_6-61" targetRef="SelectAPizzaTask" />\n    <semantic:sequenceFlow id="_6-178" name="" sourceRef="SelectAPizzaTask" targetRef="_6-127" />\n    <semantic:sequenceFlow id="_6-420" name="" sourceRef="_6-127" targetRef="_6-180" />\n    <semantic:sequenceFlow id="_6-430" name="" sourceRef="_6-236" targetRef="_6-180" />\n    <semantic:sequenceFlow id="_6-422" name="" sourceRef="_6-180" targetRef="_6-202" />\n    <semantic:sequenceFlow id="_6-424" name="" sourceRef="_6-180" targetRef="_6-219" />\n    <semantic:sequenceFlow id="_6-428" name="" sourceRef="_6-202" targetRef="_6-304" />\n    <semantic:sequenceFlow id="_6-426" name="" sourceRef="_6-219" targetRef="_6-236" />\n    <semantic:sequenceFlow id="_6-434" name="" sourceRef="_6-304" targetRef="_6-355" />\n    <semantic:sequenceFlow id="_6-436" name="" sourceRef="_6-355" targetRef="_6-406" />\n  </semantic:process>\n  <semantic:collaboration id="C1275940932557">\n    <semantic:participant id="_6-53" name="Pizza Customer" processRef="_6-2" />\n    <semantic:participant id="_6-438" name="Pizza vendor" processRef="_6-1" />\n    <semantic:participant id="Participant_0spaerz" processRef="Process_1ysvtrx" />\n    <semantic:messageFlow id="_6-638" name="pizza order" sourceRef="_6-127" targetRef="OrderReceivedEvent" />\n    <semantic:messageFlow id="_6-642" name="" sourceRef="_6-236" targetRef="_6-674" />\n    <semantic:messageFlow id="_6-646" name="receipt" sourceRef="_6-565" targetRef="_6-304" />\n    <semantic:messageFlow id="_6-648" name="money" sourceRef="_6-304" targetRef="_6-565" />\n    <semantic:messageFlow id="_6-640" name="pizza" sourceRef="_6-514" targetRef="_6-202" />\n    <semantic:messageFlow id="_6-750" name="" sourceRef="CalmCustomerTask" targetRef="_6-236" />\n    <semantic:messageFlow id="Flow_02y3fro" sourceRef="SelectAPizzaTask" targetRef="Activity_01ig7ny" />\n    <semantic:messageFlow id="Flow_0ddycer" sourceRef="_6-127" targetRef="Activity_101um1a" />\n    <semantic:messageFlow id="Flow_0i1j9fo" sourceRef="_6-127" targetRef="Activity_0vwy5n9" />\n  </semantic:collaboration>\n  <semantic:process id="Process_1ysvtrx" isExecutable="false">\n    <semantic:subProcess id="Activity_01ig7ny" triggeredByEvent="true" />\n    <semantic:subProcess id="Activity_101um1a" />\n    <semantic:subProcess id="Activity_0vwy5n9" />\n  </semantic:process>\n  <bpmndi:BPMNDiagram id="Trisotech.Visio-_6" name="Untitled Diagram" documentation="" resolution="96.00000267028808">\n    <bpmndi:BPMNPlane bpmnElement="C1275940932557">\n      <bpmndi:BPMNShape id="Trisotech.Visio__6-53" bpmnElement="_6-53" isHorizontal="true">\n        <dc:Bounds x="152" y="82" width="1044" height="418" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-61" bpmnElement="_6-61">\n        <dc:Bounds x="206" y="166" width="30" height="30" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="181" y="196" width="81" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-74" bpmnElement="SelectAPizzaTask">\n        <dc:Bounds x="285" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-127" bpmnElement="_6-127">\n        <dc:Bounds x="405" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-180" bpmnElement="_6-180">\n        <dc:Bounds x="518" y="160" width="42" height="42" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-202" bpmnElement="_6-202">\n        <dc:Bounds x="787" y="165" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="768" y="197" width="71" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-219" bpmnElement="_6-219">\n        <dc:Bounds x="588" y="254" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="577" y="286" width="54" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-236" bpmnElement="_6-236">\n        <dc:Bounds x="657" y="236" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-304" bpmnElement="_6-304">\n        <dc:Bounds x="866" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-355" bpmnElement="_6-355">\n        <dc:Bounds x="974" y="147" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-406" bpmnElement="_6-406">\n        <dc:Bounds x="1096" y="165" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="1072" y="197" width="80" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-125" bpmnElement="_6-125">\n        <di:waypoint x="236" y="181" />\n        <di:waypoint x="254" y="181" />\n        <di:waypoint x="285" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-178" bpmnElement="_6-178">\n        <di:waypoint x="368" y="181" />\n        <di:waypoint x="405" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-420" bpmnElement="_6-420">\n        <di:waypoint x="488" y="181" />\n        <di:waypoint x="506" y="181" />\n        <di:waypoint x="518" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-430" bpmnElement="_6-430">\n        <di:waypoint x="740" y="270" />\n        <di:waypoint x="758" y="270" />\n        <di:waypoint x="758" y="322" />\n        <di:waypoint x="716" y="322" />\n        <di:waypoint x="689" y="322" />\n        <di:waypoint x="500" y="322" />\n        <di:waypoint x="500" y="181" />\n        <di:waypoint x="518" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-422" bpmnElement="_6-422">\n        <di:waypoint x="560" y="181" />\n        <di:waypoint x="578" y="181" />\n        <di:waypoint x="787" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-424" bpmnElement="_6-424">\n        <di:waypoint x="539" y="202" />\n        <di:waypoint x="539" y="270" />\n        <di:waypoint x="588" y="270" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-428" bpmnElement="_6-428">\n        <di:waypoint x="819" y="181" />\n        <di:waypoint x="866" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-426" bpmnElement="_6-426">\n        <di:waypoint x="620" y="270" />\n        <di:waypoint x="638" y="270" />\n        <di:waypoint x="657" y="270" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-434" bpmnElement="_6-434">\n        <di:waypoint x="950" y="181" />\n        <di:waypoint x="974" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-436" bpmnElement="_6-436">\n        <di:waypoint x="1058" y="181" />\n        <di:waypoint x="1076" y="181" />\n        <di:waypoint x="1096" y="181" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6-438" bpmnElement="_6-438" isHorizontal="true">\n        <dc:Bounds x="152" y="442" width="905" height="337" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-650" bpmnElement="_6-650" isHorizontal="true">\n        <dc:Bounds x="182" y="442" width="875" height="114" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-446" bpmnElement="_6-446" isHorizontal="true">\n        <dc:Bounds x="182" y="556" width="875" height="114" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-448" bpmnElement="_6-448" isHorizontal="true">\n        <dc:Bounds x="182" y="670" width="875" height="109" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6_OrderReceivedEvent" bpmnElement="OrderReceivedEvent">\n        <dc:Bounds x="219" y="475" width="30" height="30" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="198" y="505" width="73" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-652" bpmnElement="_6-652">\n        <dc:Bounds x="280" y="469" width="42" height="42" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-674" bpmnElement="_6-674">\n        <dc:Bounds x="358" y="474" width="32" height="32" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="343" y="506" width="63" height="27" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6_CalmCustomerTask" bpmnElement="CalmCustomerTask">\n        <dc:Bounds x="426" y="456" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-463" bpmnElement="_6-463">\n        <dc:Bounds x="392" y="591" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-514" bpmnElement="_6-514">\n        <dc:Bounds x="604" y="699" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-565" bpmnElement="_6-565">\n        <dc:Bounds x="743" y="699" width="83" height="68" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Trisotech.Visio__6__6-616" bpmnElement="_6-616">\n        <dc:Bounds x="862" y="717" width="32" height="32" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-630" bpmnElement="_6-630">\n        <di:waypoint x="249" y="490" />\n        <di:waypoint x="280" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-691" bpmnElement="_6-691">\n        <di:waypoint x="322" y="490" />\n        <di:waypoint x="340" y="490" />\n        <di:waypoint x="358" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-693" bpmnElement="_6-693">\n        <di:waypoint x="301" y="511" />\n        <di:waypoint x="301" y="626" />\n        <di:waypoint x="392" y="625" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-746" bpmnElement="_6-746">\n        <di:waypoint x="510" y="490" />\n        <di:waypoint x="526" y="490" />\n        <di:waypoint x="526" y="544" />\n        <di:waypoint x="331" y="544" />\n        <di:waypoint x="331" y="490" />\n        <di:waypoint x="358" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-748" bpmnElement="_6-748">\n        <di:waypoint x="390" y="490" />\n        <di:waypoint x="408" y="490" />\n        <di:waypoint x="426" y="490" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-632" bpmnElement="_6-632">\n        <di:waypoint x="475" y="625" />\n        <di:waypoint x="493" y="625" />\n        <di:waypoint x="493" y="733" />\n        <di:waypoint x="604" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-634" bpmnElement="_6-634">\n        <di:waypoint x="688" y="733" />\n        <di:waypoint x="743" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-636" bpmnElement="_6-636">\n        <di:waypoint x="826" y="733" />\n        <di:waypoint x="844" y="733" />\n        <di:waypoint x="862" y="733" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNShape id="Participant_0spaerz_di" bpmnElement="Participant_0spaerz" isHorizontal="true">\n        <dc:Bounds x="152" y="840" width="878" height="380" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_01ig7ny_di" bpmnElement="Activity_01ig7ny" isExpanded="true">\n        <dc:Bounds x="200" y="860" width="350" height="200" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_101um1a_di" bpmnElement="Activity_101um1a">\n        <dc:Bounds x="580" y="860" width="100" height="80" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape id="Activity_0vwy5n9_di" bpmnElement="Activity_0vwy5n9" isExpanded="true">\n        <dc:Bounds x="580" y="960" width="350" height="200" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-638" bpmnElement="_6-638">\n        <di:waypoint x="446" y="215" />\n        <di:waypoint x="446" y="322" />\n        <di:waypoint x="234" y="322" />\n        <di:waypoint x="234" y="475" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="313" y="297" width="55" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-642" bpmnElement="_6-642">\n        <di:waypoint x="685" y="304" />\n        <di:waypoint x="685" y="394" />\n        <di:waypoint x="374" y="394" />\n        <di:waypoint x="374" y="474" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-646" bpmnElement="_6-646" messageVisibleKind="non_initiating">\n        <di:waypoint x="798" y="699" />\n        <di:waypoint x="798" y="502" />\n        <di:waypoint x="922" y="502" />\n        <di:waypoint x="922" y="215" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="843" y="477" width="34" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-648" bpmnElement="_6-648">\n        <di:waypoint x="894" y="215" />\n        <di:waypoint x="894" y="478" />\n        <di:waypoint x="770" y="478" />\n        <di:waypoint x="771" y="699" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="815" y="453" width="34" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-640" bpmnElement="_6-640">\n        <di:waypoint x="646" y="699" />\n        <di:waypoint x="646" y="454" />\n        <di:waypoint x="803" y="454" />\n        <di:waypoint x="803" y="197" />\n        <bpmndi:BPMNLabel>\n          <dc:Bounds x="712" y="429" width="26" height="14" />\n        </bpmndi:BPMNLabel>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Trisotech.Visio__6__6-750" bpmnElement="_6-750">\n        <di:waypoint x="468" y="456" />\n        <di:waypoint x="468" y="418" />\n        <di:waypoint x="712" y="418" />\n        <di:waypoint x="712" y="304" />\n        <bpmndi:BPMNLabel />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_02y3fro_di" bpmnElement="Flow_02y3fro">\n        <di:waypoint x="327" y="215" />\n        <di:waypoint x="327" y="860" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0ddycer_di" bpmnElement="Flow_0ddycer">\n        <di:waypoint x="488" y="181" />\n        <di:waypoint x="530" y="181" />\n        <di:waypoint x="530" y="900" />\n        <di:waypoint x="580" y="900" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge id="Flow_0i1j9fo_di" bpmnElement="Flow_0i1j9fo">\n        <di:waypoint x="447" y="215" />\n        <di:waypoint x="447" y="588" />\n        <di:waypoint x="647" y="588" />\n        <di:waypoint x="647" y="960" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_1dt967q">\n    <bpmndi:BPMNPlane id="BPMNPlane_1f9o77s" bpmnElement="Activity_101um1a" />\n  </bpmndi:BPMNDiagram>\n</semantic:definitions>\n"
}

Скрипты:


      setState({HighlightedItems: [
        // {id: "_6-61", color: 'Active'},
        // {id: "SelectAPizzaTask", color: 'Incident'},
        // {id: "_6-638", color: 'Incident'},
        // {id: "OrderReceivedEvent", color: 'End'},
        // {id: "_6-180", color: 'Warning'},
        // {id: "_6-219", color: 'Path'},
        // {id: "_6-640", color: 'Path'},
        // {id: "_6-236", color: 'Active'},
        // {id: "_6-304", color: 'Incident'},
        // {id: "_6-616", color: 'Path'},
        // {id: "Activity_01ig7ny", color: 'Warning'},
        // {id: "Flow_02y3fro", color: 'Warning'},
        // {id: "Activity_101um1a", color: 'End'},
        // {id: "Activity_0vwy5n9", color: 'Active'},
        {id: 'Event_0dfekbp', color: 'Active'},
        {id: 'Activity_1j5px29', color: 'Incident'},
        {id: 'Flow_0zckyb1', color: 'Incident'},
        {id: 'Activity_1bsr3eg', color: 'Path'},
        {id: 'Activity_1dsx2ka', color: 'Warning'},
        {id: 'Activity_15vfr5s', color: 'End'},
        {id: 'Activity_07kkir2', color: 'Active'},
        {id: 'Gateway_070riav', color: 'Incident'},
        {id: 'Event_0dlyreh', color: 'Path'},
        {id: 'Flow_0ea0nmb', color: 'Path'},
      ]})

JSX:

<ProcessViewer
  OnItemClick={() => { console.log(getEvent()); }}
  HighlightedItems-var="HighlightedItems"
  Value-var="xml"
/>