t-qflow

This Library provide bpmn modeler and viewer.

Installation

Install t-qflow via npm

npm install --save t-qflow

Demo

Run npm start command, then

• http://localhost:3000 access QflowBpmnViewer
• http://localhost:3000/modeler access QflowBpmnModeler

Usage

xml content example:

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="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" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1">
      <bpmn2:outgoing>SequenceFlow_01ns3sf</bpmn2:outgoing>
    </bpmn2:startEvent>
    <bpmn2:userTask id="UserTask_1r9gfnt" name="demo">
      <bpmn2:incoming>SequenceFlow_01ns3sf</bpmn2:incoming>
    </bpmn2:userTask>
    <bpmn2:sequenceFlow id="SequenceFlow_01ns3sf" sourceRef="StartEvent_1" targetRef="UserTask_1r9gfnt" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="412" y="240" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="UserTask_1r9gfnt_di" bpmnElement="UserTask_1r9gfnt">
        <dc:Bounds x="498" y="218" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="SequenceFlow_01ns3sf_di" bpmnElement="SequenceFlow_01ns3sf">
        <di:waypoint x="448" y="258" />
        <di:waypoint x="498" y="258" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>

when url return json format:

url return format :

{
	"xml" : '',
	...
}

Load modeler :

url must support GET and PUT method

import {QflowBpmnModeler, QflowBpmnViewer} from 't-qflow/lib'
	
<QflowBpmnModeler
    url="xml content url"
    //onError={ onError }
    //onSucess={ onSuccess }
/>

Load Viewer :

import {QflowBpmnModeler, QflowBpmnViewer} from 't-qflow/lib'
	
<QflowBpmnViewer
    url="xml content url"
    //onError={ onError }
    //onSucess={ onSuccess }
/>

when url return text format:

url return format, demo url :

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:bpmn2="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:qflow="http://qflow" 
	id="sample-diagram" 
	targetNamespace="http://bpmn.io/schema/bpmn" 
	xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="Process_1" isExecutable="false">
    ...
  </bpmn2:process>
</bpmn2:definitions>

Load modeler :

url only support GET method

import {QflowBpmnModeler, QflowBpmnViewer} from 't-qflow/lib'
	
<QflowBpmnModeler
    url="xml content url"
    isFileUrl={true}
    //onError={ onError }
    //onSucess={ onSuccess }
/>

Load Viewer :

import {QflowBpmnModeler, QflowBpmnViewer} from 't-qflow/lib'
	
<QflowBpmnViewer
    url="xml content url"
    isFileUrl={true}
    //onError={ onError }
    //onSucess={ onSuccess }
/>