bpmn js 小记

以下代码均在 Angular 框架下编写和测试

Bpmn流程图中的一些事件

预先准备

    // 根据情况去初始化这几个变量
    modeler: BpmnModeler;
    // 初始化 modeler 之后，可以通过 this.modeler.get('modeling') 来获取modeling
    modeling: any;
    // XML 格式的字符串
    diagramContent: string;
    // 初始化 modeler 之后，可以通过 this.modeler.get('elementRegistry') 来获取elementRegistry
    elementRegistry: any;
    // canvas（是指渲染流程图的元素），这里以<div id="canvas"></div>为例
    const canvas = document.getElementById('canvas');

    /**
     * 根据图形Id选择图形对象
     */
    selectShapeById(id) {
        return this.elementRegistry.get(id);
    }

选择图形

    this.modeler.on('selection.changed', async (event: any) => {
        // 被选择的图形
        const element = event.newSelection && event.newSelection.length > 0 ? event.newSelection[0] : null;
            // 这里做类型判断，bpmn:Task就是User Task
            if (_this.is(element, 'bpmn:Task')) {
                // TODO 这里写想要做的事情
            }
    });

图形被删除时

    this.modeler.on('shape.removed', (event: any) => {
        const element = event.element;
        // TODO 这里写想要做的事情
    });

图形被更改时

    this.modeler.on('element.changed', function (context: any) {
        const element = context.element;
        // 这里做类型判断，bpmn:Task就是User Task
        if (_this.is(element, 'bpmn:Task')) {
            // TODO 这里写想要做的事情
        }
    });

右键图形时

    const _this = this;
    canvas.addEventListener('contextmenu', function(event: MouseEvent) {
        const shape = _this.selectShapeById(event['delegateTarget'].dataset.elementId);
        // 这里做类型判断，bpmn:Task就是User Task
        if (shape.type !== 'bpmn:UserTask') {
            // TODO 这里写想要做的事情
        }
        // 不显示原生的右键快捷菜单
        event.preventDefault();
    });

使用代码清除图形的选择状态

    this.modeler.get('selection').select([]);

后续有新内容再更新