fuyao-bpm-editor v0.0.4

Bpmn React Component

BpmnViewer example

 <BpmnViewer style={{'height': '100vh'}} xml={xml} />

BpmnEditor example with panel

class App extends React.PureComponent {

  protected readonly panelRef =  React.createRef<HTMLDivElement>();
  protected readonly ref = React.createRef<HTMLDivElement>();

  state = {
    bpmModeler: null
  };

  componentDidMount() {
    this.setState({
      bpmModeler: new BpmnModeler({
        container: this.ref.current,
        propertiesPanel: {
            parent: this.panelRef.current
        },
        additionalModules: [BpmnPropertiesPanelModule, BpmnPropertiesProviderModule]
      })
    })
  }

  render() {
    const xml = getXml();
    
    return (
      <BpmnEditor xml={xml} bpmModeler={this.state.bpmModeler}>
          <div ref={this.ref} style={{ 'height': '100vh' }}/>
          <div className='bjs-property-panel' ref={this.panelRef} />
      </BpmnEditor>
    );

  }