sasp-flow-render 1.0.1

package/src/views/popup/js/controls/CustomContextPad.js

@@ -0,0 +1,310 @@
+export default function CustomContextPad(config, contextPad, create,globalConnect,connect,modeling, elementFactory, injector, translate) { //控件点击出现的小弹窗 overla
+        this.create = create;
+        this.globalConnect = globalConnect;
+        this.connect = connect;
+        this.modeling = modeling;
+        this.elementFactory = elementFactory;
+        this.translate = translate;
+        if (config.autoPlace !== false) {
+            this.autoPlace = injector.get('autoPlace', false);
+        }
+
+        contextPad.registerProvider(this);
+    }
+
+CustomContextPad.$inject = [
+    'config',
+    'contextPad',
+    'create',
+    'globalConnect',
+    'connect',
+    'modeling',
+    'elementFactory',
+    'injector',
+    'translate',
+];
+
+CustomContextPad.prototype.getContextPadEntries= function(element)  {
+        const {
+            autoPlace,
+            create,
+            globalConnect,
+            connect,
+            modeling,
+            elementFactory,
+            translate,
+        } = this;
+
+       let businessObject = element.businessObject;
+
+        function startConnect(event, element) { //连线
+            connect.start(event, element);
+        }
+
+        function appendUserTask(event, element) {
+            if (autoPlace) {
+                const shape = elementFactory.createShape({type: 'bpmn:UserTask'});
+                autoPlace.append(element, shape);
+                createManyDeal(shape);
+            } else {
+                appendUserTaskStart(event);
+            }
+        }
+
+        function createManyDeal(shape){
+            let bpmnFactory= modeling._elementFactory._bpmnFactory;
+            shape.businessObject.assignee = "${assignee}";
+            shape.businessObject.loopCharacteristics = bpmnFactory.create("bpmn:MultiInstanceLoopCharacteristics",{
+                "isSequential":"false", // 并行执行还是顺序执行，这里是并行执行
+                "collection":"assigneeList_" + shape.id,
+                "elementVariable":"assignee",
+            });
+            shape.businessObject.loopCharacteristics.completionCondition = bpmnFactory.create("bpmn:FormalExpression",{
+                body:"${nrOfCompletedInstances/nrOfInstances == 1}"
+            })
+        }
+
+        function appendUserTaskStart(event) {
+            const shape = elementFactory.createShape({type: 'bpmn:UserTask'});
+            create.start(event, shape, element);
+            createManyDeal(shape);
+        }
+
+        function appendDraft(event, element) {
+            if (autoPlace) {
+                const shape = elementFactory.createShape({type: 'bpmn:UserTask',nodeType:'draft'});
+                autoPlace.append(element, shape);
+            } else {
+                appendDraftStart(event);
+            }
+        }
+
+        function appendDraftStart(event) {
+            const shape = elementFactory.createShape({type: 'bpmn:UserTask',nodeType:'draft'});
+            create.start(event, shape, element);
+        }
+
+        function appendGateway(event, element) {
+            if (autoPlace) {
+                const shape = elementFactory.createShape({type: 'bpmn:InclusiveGateway'});
+                autoPlace.append(element, shape);
+            } else {
+                appendGatewayStart(event);
+            }
+        }
+
+        function appendGatewayStart(event) {
+            const shape = elementFactory.createShape({type: 'bpmn:InclusiveGateway'});
+            create.start(event, shape, element);
+        }
+
+        function appendEnd(event, element) {
+            if (autoPlace) {
+                const shape = elementFactory.createShape({type: 'bpmn:EndEvent'});
+                autoPlace.append(element, shape);
+            } else {
+                appendEndStart(event);
+            }
+        }
+
+        function appendEndStart(event) {
+            const shape = elementFactory.createShape({type: 'bpmn:EndEvent'});
+            create.start(event, shape, element);
+        }
+
+
+     function removeElement(e) { //删除
+            modeling.removeElements([ element ]);
+      }
+
+      let ccp = this;
+    function editElement(event, element){ //编辑
+        ccp.editBtnCallBack && ccp.editBtnCallBack(element);
+            // window.editNodeElement = element;
+    }
+
+    const noPadTypeArr= ["bpmn:SequenceFlow","bpmn:EndEvent","bpmn:Participant","bpmn:Lane"]; //不需要单独需要
+    const gateWayArr = ["bpmn:ExclusiveGateway","bpmn:ParallelGateway","bpmn:InclusiveGateway"]; //网关类型
+    if(element.type != 'label'){
+        if(noPadTypeArr.indexOf(element.type) == -1){ //如果是连线
+            if(['bpmn:BoundaryEvent','bpmn:IntermediateCatchEvent'].indexOf(element.type) > -1){
+                //自定义编辑节点
+                if(element.outgoing.length == 0){
+                    return {
+                        //自定义编辑节点
+                        'append.edit':{
+                            group:'event',
+                            className: 'icon-custom demo-icon-edit',
+                            title:translate('Append NodeEdit'),
+                            action:{
+                                click:editElement
+                            }
+                        },
+                        'append.user-task':{
+                            group: 'tools',
+                            className: 'icon-custom demo-user-task',
+                            title: translate('Append UserTask'),
+                            action: {
+                                click: appendUserTask,
+                                dragstart: appendUserTaskStart
+                            }
+                        },
+                        'create.connect': {//连线工具
+                            group: 'gateway',
+                            className: 'icon-custom demo-global-connect-tool',
+                            title: translate('Activate the global connect tool'),
+                            action: {
+                                click: startConnect,
+                                dragstart: startConnect
+                            }
+                        },
+                    }
+                }else {
+                    return{
+                        //自定义编辑节点
+                        'append.edit':{
+                            group:'gateway',
+                            className: 'icon-custom demo-icon-edit',
+                            title:translate('Append NodeEdit'),
+                            action:{
+                                click:editElement
+                            }
+                        }
+                    }
+                }
+            }else {
+                let btnObj = {
+                    'append.delete': {
+                        group: 'tools',
+                        className: 'bpmn-icon-trash',
+                        title: translate('Remove'),
+                        action: {
+                            click: removeElement
+                        }
+                    },
+                    //自定义编辑节点
+                    'append.edit':{
+                        group:'gateway',
+                        className: 'icon-custom demo-icon-edit',
+                        title:translate('Append NodeEdit'),
+                        action:{
+                            click:editElement
+                        }
+                    }
+                };
+                if(element.type=="bpmn:StartEvent"){
+                    if(element.outgoing.length==0){
+                        btnObj["append.user-task"]={
+                            group: 'model',
+                            className: 'bpmn-icon-manual',
+                            title: "添加草稿",
+                            action: {
+                                click: appendDraft,
+                                dragstart: appendDraftStart
+                            }
+                        };
+                    }
+                }else{
+                    btnObj = {
+                        'append.end-event':{
+                            group: 'event',
+                            className: 'icon-custom demo-end-pad',
+                            title: translate('Create EndEvent'),
+                            action: {
+                                click: appendEnd,
+                                dragstart: appendEnd
+                            }
+                        },
+                        'append.exclusive-gateway':{
+                            group: 'gateway',
+                            className: 'icon-custom demo-gateway',
+                            title: translate('Append Gateway'),
+                            action: {
+                                click: appendGateway,
+                                dragstart: appendGatewayStart
+                            }
+                        },
+                        'create.connect': {//连线工具
+                            group: 'tools',
+                            className: 'icon-custom demo-global-connect-tool',
+                            title: translate('Activate the global connect tool'),
+                            action: {
+                                click: startConnect,
+                                dragstart: startConnect
+                            }
+                        },
+
+                        'append.delete': {
+                            group: 'tools',
+                            className: 'bpmn-icon-trash',
+                            title: translate('Remove'),
+                            action: {
+                                click: removeElement
+                            }
+                        },
+                        //自定义编辑节点
+                        'append.edit':{
+                            group:'gateway',
+                            className: 'icon-custom demo-icon-edit',
+                            title:translate('Append NodeEdit'),
+                            action:{
+                                click:editElement
+                            }
+                        },
+                        'append.user-task':{
+                            group: 'model',
+                            className: 'icon-custom demo-user-task',
+                            title: translate('Append UserTask'),
+                            action: {
+                                click: appendUserTask,
+                                dragstart: appendUserTaskStart
+                            }
+                        }
+                    };
+                }
+                return btnObj;
+            }
+        }else if(element.type == 'bpmn:EndEvent'|| (element.type == 'bpmn:SequenceFlow' && element.source && gateWayArr.indexOf(element.source.type) > -1)){
+            return{
+                //自定义编辑节点
+                'append.edit':{
+                    group:'gateway',
+                    className: 'icon-custom demo-icon-edit',
+                    title:translate('Append NodeEdit'),
+                    action:{
+                        click:editElement
+                    }
+                },
+                'append.delete': {
+                    group: 'tools',
+                    className: 'bpmn-icon-trash',
+                    title: translate('Remove'),
+                    action: {
+                        click: removeElement
+                    }
+                }
+            };
+        }else {
+            return{
+                'append.delete': {
+                    group: 'tools',
+                    className: 'bpmn-icon-trash',
+                    title: translate('Remove'),
+                    action: {
+                        click: removeElement
+                    }
+                }
+            };
+        }
+    }
+};
+
+const propertiesConfig = { //节点默认名称
+    'StartEvent': "开始",
+    "UserTask":"用户任务",
+    "EndEvent":"结束",
+    "ParallelGateway":"条件流转",
+    "Participant":"泳道",
+    "Group":"公共流程"
+};
+

package/src/views/popup/js/controls/CustomPalette.js

@@ -0,0 +1,303 @@
+export default function CustomPalette(bpmnFactory,create,spaceTool,lassoTool,handTool,globalConnect,elementFactory, palette, translate) {
+    this.bpmnFactory = bpmnFactory;
+    this.create = create;
+    this.spaceTool = spaceTool; //工具栏
+    this.lassoTool = lassoTool;
+    this.handTool = handTool;
+    this.globalConnect = globalConnect;
+    this.elementFactory = elementFactory;
+    this.translate = translate;
+
+    palette.registerProvider(this);
+
+}
+
+
+CustomPalette.prototype.getPaletteEntries = function(element) {
+        const {
+            bpmnFactory,
+            create,
+            spaceTool,
+            elementFactory,
+            handTool,
+            globalConnect,
+            lassoTool,
+            translate
+        } = this;
+
+        function createControls(key) {
+            return function (event) {
+                const businessObject = bpmnFactory.create('bpmn:'+key);
+                //设置默认默默认名称
+                if(propertiesConfig[key] && !businessObject['name']){
+                    businessObject['name'] = propertiesConfig[key];
+                }
+                const shape = elementFactory.createShape({type: 'bpmn:' + key,businessObject}); //拖动点击时候触发
+                businessObject.assignee = "${assignee}";
+                businessObject.loopCharacteristics = bpmnFactory.create("bpmn:MultiInstanceLoopCharacteristics",{
+                    "isSequential":"false", // 并行执行还是顺序执行，这里是并行执行
+                    "collection":"assigneeList_" + shape.id,
+                    "elementVariable":"assignee",
+                });
+                businessObject.loopCharacteristics.completionCondition = bpmnFactory.create("bpmn:FormalExpression",{
+                    body:"${nrOfCompletedInstances/nrOfInstances == 1}"
+                })
+                create.start(event, shape);
+            }
+        }
+
+        function createStart(key) {
+            return function (event) {
+                // 判断是否已存在开始节点，存在则提示无法添加
+                if(window.currentFlowStartNodeNum>0){
+                    console.log("开始节点已存在，无需添加！");
+                    return;
+                }
+
+                //开始与草稿同时添加，但无法添加关联关系，在shape.add监听中进行手动连线
+                const businessObject = bpmnFactory.create('bpmn:'+key);
+                //设置默认默默认名称
+                if(propertiesConfig[key] && !businessObject['name']){
+                    businessObject['name'] = propertiesConfig[key];
+                }
+                const shape = elementFactory.createShape({type: 'bpmn:' + key,x:0,y:22,businessObject}); //拖动点击时候触发
+                const draftObject = bpmnFactory.create('bpmn:UserTask');
+                if(propertiesConfig["UserTask"] && !draftObject['name']){
+                    draftObject['name'] = propertiesConfig[key];
+                }
+                draftObject["name"]="开启任务";
+                const draftShape = elementFactory.createShape({type: 'bpmn:UserTask',x:100,y:0,nodeType:'draft',draftObject}); //拖动点击时候触发
+                // 设置全局变量，告知为第一次手动添加开始节点，用于在add监听中手动连线
+                window.ifFirstCreateStartNode = true;
+                create.start(event, [shape,draftShape]);
+            }
+        }
+
+        function createGroupControls(event) { //添加公共流程块节点
+                const businessObject = bpmnFactory.create('bpmn:Group');
+                //设置默认默默认名称
+                if(propertiesConfig['Group']){
+                    businessObject['name'] = propertiesConfig['Group'];
+                    businessObject['custom'] = 1;
+                }
+                const shape = elementFactory.createShape({type: 'bpmn:Group' ,businessObject}); //拖动点击时候触发
+                create.start(event, shape);
+
+        }
+
+
+        function createSubprocess(event) { //子流程专用事件
+            const businessObject = bpmnFactory.create('bpmn:SubProcess');
+            businessObject['name'] = "子流程";
+            const subProcess = elementFactory.createShape({
+                type: 'bpmn:SubProcess',
+                x: 0,
+                y: 0,
+                isExpanded: true
+            },businessObject);
+
+            const startEvent = elementFactory.createShape({ //子流程中默认开始节点
+                type: 'bpmn:StartEvent',
+                x: 40,
+                y: 82,
+                parent: subProcess
+            });
+
+
+            create.start(event, [ subProcess, startEvent ], {
+                hints: {
+                    autoSelect: [ startEvent ]
+                }
+            });
+        }
+
+        return {
+
+            //重写tools
+            'create.hand-tool': {
+                group: 'tools',
+                className: 'icon-custom demo-hand-tool',
+                title: translate('Activate the hand tool'),
+                action: {
+                    click: (event =>{
+                        handTool.activateHand(event);
+                    })
+                }
+            },
+
+            'create.lasso-tool': { //套索工具
+                group: 'tools',
+                className: 'icon-custom demo-lasso-tool',
+                title: translate('Activate the lasso tool'),
+                action: {
+                    click: (event =>{
+                        lassoTool.activateSelection(event);
+                    })
+                }
+            },
+
+            'create.space-tool': { //创建/删除空间
+                group: 'tools',
+                className: 'icon-custom demo-space-tool',
+                title: translate('Activate the create/remove space tool'),
+                action: {
+                    click: (event =>{
+                        spaceTool.activateSelection(event);
+                    })
+                }
+            },
+
+            //下划线
+            'create.tool-separator-diy': {
+                group: 'tools',
+                separator: true
+            },
+
+            'create.global-connect-tool': { //连线工具
+                group: 'tools',
+                className: 'icon-custom demo-global-connect-tool',
+                title: translate('Activate the global connect tool'),
+                action: {
+                    click:(event =>{
+                        globalConnect.toggle(event);
+                    })
+                }
+            },
+
+            //自定义定时器
+            'create.intermediate-event-catch-timer':{ //自定义定时器组件
+                group: 'event',
+                className: 'icon-custom demo-data-timer',
+                title: translate('Create Timer'),
+                action:{
+                    dragstart:createControls("IntermediateCatchEvent"),
+                    click: createControls("IntermediateCatchEvent")
+                }
+            },
+
+            'create.start-event': { //自定义开始节点
+                group: 'event',
+                className: 'icon-custom demo-start',
+                title: translate('Create StartEvent'),
+                action: {
+                    dragstart: createStart("StartEvent"),
+                    click: createStart("StartEvent")
+                }
+            },
+
+            //自定义公共区域模块
+            'create.public-process-block':{
+                group: 'activity',
+                className: 'icon-custom demo-process-block',
+                title:translate('Create process block'),
+                action: {
+                    dragstart: createGroupControls,
+                    click: createGroupControls
+                }
+            },
+
+
+
+            'create.end-event': { //自定义结束节点
+                group: 'event',
+                className: 'icon-custom demo-end',
+                title: translate('Create EndEvent'),
+                action: {
+                    dragstart: createControls("EndEvent"),
+                    click: createControls("EndEvent")
+                }
+            },
+
+            'create.data-store': { //自定义数据操作节点
+                group: 'activity',
+                className: 'icon-custom demo-data-store',
+                title: translate('Create DataStoreReference'),
+                action: {
+                    dragstart: createControls("DataStoreReference"),
+                    click: createControls("DataStoreReference")
+                }
+            },
+
+            'create.user-task': { //自定义用户任务节点
+                group: 'event',
+                className: 'icon-custom demo-user-task',
+                title: translate('Create UserTask'),
+                action: {
+                    dragstart: createControls("UserTask"),
+                    click: createControls("UserTask")
+                }
+            },
+
+            //自定义网关闭节点
+            'create.exclusive-gateway': {
+                group: 'gateway',
+                className:'icon-custom demo-gateway',
+                title:translate('Create ExclusiveGateway'),
+                action: {
+                    dragstart: createControls("InclusiveGateway"),
+                    click: createControls("InclusiveGateway")
+                }
+            },
+
+            //子流程  subprocess-expanded
+            'create.subprocess-expanded': {
+                group: 'activity',
+                className: 'icon-custom demo-subprocess',
+                title: translate('Create expanded SubProcess'),
+                action: {
+                    dragstart: createSubprocess,
+                    click: createSubprocess
+                }
+            },
+
+
+            //自定义泳道
+            'create.participant-expanded': {
+                group: 'collaboration',
+                className: 'icon-custom demo-participant',
+                title: translate('Create Pool/Participant'),
+                action: {
+                    dragstart: createControls("Participant"),
+                    click: createControls("Participant")
+                }
+            },
+
+
+
+            //自定义分组
+            'create.group':{
+                group: 'artifact',
+                className: 'icon-custom demo-group',
+                title:translate('Create Group'),
+                action: {
+                    dragstart: createControls("Group"),
+                    click: createControls("Group")
+                }
+            }
+
+
+        }
+}
+
+const propertiesConfig = { //节点默认名称
+    'StartEvent': "开始",
+    "UserTask":"用户任务",
+    "EndEvent":"结束",
+    "ParallelGateway":"条件流转",
+    "Participant":"泳道",
+    "Group":"公共流程"
+};
+
+
+
+CustomPalette.$inject = [
+    'bpmnFactory',
+    'create',
+    'spaceTool',
+    'lassoTool',
+    'handTool',
+    'globalConnect',
+    'elementFactory',
+    'palette',
+    'translate'
+];