liancheng-bpmn-react v0.0.11

liancheng-bpmn-react

Install

$ yarn install

$ npm run dev
$ npm run build

Options

example

编辑组件 BpmnEditor

查看组件 BpmnViewer

onRef 支持的回调

实际使用例子

import { Button } from 'antd';
import { BpmnEditor, BpmnViewer } from 'liancheng-bpmn-react';
import React, { useRef, useState } from 'react';

import './index.less';


export default () => {
  const [value, setValue] = useState('');

  const childRef = useRef();
  const onSaveBtn = async () => {
    childRef?.current?.onReset();
    const xmlValue: string = await childRef?.current?.onExport();
  };

  const onClickNode = (data: any) => {
    console.log('节点点击事件监听', data);
  };
  return (
    <PageContainer back>
      <Button onClick={onSaveBtn} type={'primary'}>
        保存
      </Button>
      <div className={'box'}>
        <div className={'box-bpmnBox'}>
          <BpmnEditor
            onClickNode={onClickNode}
            onRef={childRef}
            value={xml}
            height={600}
            center
          />
        </div>

        <div className={'box-pannel'}>1</div>
      </div>
      <Button onClick={onSaveBtn}>保存</Button>
      <div>
        <BpmnViewer
          onClickNode={onClickNode}
          onRef={childRef}
          value={xml}
          height={600}
          center
        />
      </div>
    </PageContainer>
  );
};

暴露的事件类型汇总

LICENSE

MIT