epx-frame 3.5.0-shpgy.1

package/src/frame/components/custom-bpmn/CustomContextPad.js

@@ -0,0 +1,58 @@
+// CustomContextPad.js
+export default class CustomContextPad {
+  constructor (config, contextPad, create, elementFactory, injector, translate) {
+    this.create = create
+    this.elementFactory = elementFactory
+    this.translate = translate
+
+    if (config.autoPlace !== false) {
+      this.autoPlace = injector.get('autoPlace', false)
+    }
+
+    contextPad.registerProvider(this) // 定义这是一个contextPad
+  }
+
+  getContextPadEntries (element) {
+    const {
+      autoPlace,
+      create,
+      elementFactory,
+      translate
+    } = this
+
+    function appendTask (event, element) {
+      if (autoPlace) {
+        const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
+        autoPlace.append(element, shape)
+      } else {
+        appendTaskStart(event, element)
+      }
+    }
+
+    function appendTaskStart (event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
+      create.start(event, shape, element)
+    }
+
+    return {
+      'append.append-task': {
+        group: 'model',
+        className: 'bpmn-icon-task',
+        title: translate('Create UserTask'),
+        action: {
+          click: appendTask,
+          dragstart: appendTaskStart
+        }
+      }
+    }
+  }
+}
+
+CustomContextPad.$inject = [
+  'config',
+  'contextPad',
+  'create',
+  'elementFactory',
+  'injector',
+  'translate'
+]

package/src/frame/components/custom-bpmn/CustomPalette.js

@@ -0,0 +1,257 @@
+// CustomPalette.js
+export default class CustomPalette {
+  constructor (bpmnFactory, create, elementFactory, palette, translate) {
+    this.bpmnFactory = bpmnFactory
+    this.create = create
+    this.elementFactory = elementFactory
+    this.translate = translate
+
+    palette.registerProvider(this)
+  }
+
+  getPaletteEntries (element) {
+    const {
+      bpmnFactory,
+      create,
+      elementFactory,
+      translate
+    } = this
+
+    const addManualTaskConfig = {
+      name: '新增记录',
+      img: require('./img/xinzeng.png'),
+      typeId: '1'
+    }
+
+    const removeManualTaskConfig = {
+      name: '删除记录',
+      img: require('./img/shanchu.png'),
+      typeId: '2'
+    }
+
+    const updateManualTaskConfig = {
+      name: '更新记录',
+      img: require('./img/gengxin.png'),
+      typeId: '3'
+    }
+    const dataSyncTaskConfig = {
+      name: '数据同步',
+      img: require('./img/tongbu.png'),
+      typeId: '4'
+    }
+    const machineManualTaskConfig = {
+      name: '数据加工',
+      img: require('./img/jiagong.png'),
+      typeId: '5'
+    }
+    const searchManualTaskConfig = {
+      name: '数据查询',
+      img: require('./img/chaxun.png'),
+      typeId: '6'
+    }
+    const sendMessageTaskConfig = {
+      name: '消息发送',
+      img: require('./img/fasong.png'),
+      typeId: '7'
+    }
+    const callingInterfaceTaskConfig = {
+      name: '调用接口',
+      img: require('./img/jiekou.png'),
+      typeId: '8'
+    }
+    const callingRuleTaskConfig = {
+      name: '调用业务规则',
+      img: require('./img/ywgz.png'),
+      typeId: '9'
+    }
+    const processTaskConfig = {
+      name: '发起业务流程',
+      img: require('./img/ywgz.png'),
+      typeId: '10'
+    }
+    const loopStartConfig = {
+      name: '循环开始',
+      img: require('./img/xunhuanstart.png'),
+      typeId: '11'
+    }
+    const loopEndConfig = {
+      name: '循环结束',
+      img: require('./img/xunhuanend.png'),
+      typeId: '12'
+    }
+
+    function createTask () {
+      return function (event) {
+        const businessObject = bpmnFactory.create('bpmn:UserTask')
+        const shape = elementFactory.createShape({
+          type: 'bpmn:UserTask',
+          businessObject
+        })
+        create.start(event, shape)
+      }
+    }
+
+    function createManualTask (config) {
+      return function (event) {
+        const businessObject = bpmnFactory.create('bpmn:ManualTask')
+        businessObject.name = config.name
+        businessObject.className = config.className || ''
+        businessObject.img = config.img
+        const shape = elementFactory.createShape({
+          typeId: config.typeId,
+          type: 'bpmn:ManualTask',
+          businessObject
+        })
+        create.start(event, shape)
+      }
+    }
+
+    function createInclusiveGateway (config) {
+      return function (event) {
+        const businessObject = bpmnFactory.create('bpmn:InclusiveGateway')
+        businessObject.name = config.name
+        businessObject.className = config.className || ''
+        const shape = elementFactory.createShape({
+          typeId: config.typeId,
+          type: 'bpmn:InclusiveGateway',
+          businessObject
+        })
+        create.start(event, shape)
+      }
+    }
+
+    return {
+      'create.task': {
+        group: 'model',
+        className: 'bpmn-icon-task',
+        title: translate('Create UserTask'),
+        action: {
+          dragstart: createTask(),
+          click: createTask()
+        }
+      },
+      'definetask-separator': {
+        group: 'definetask',
+        separator: true
+      },
+      'create.createManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-xinzengjilu', // 样式名
+        title: translate('新增记录'), // 鼠标悬浮到节点上显示的文字
+        // imageUrl: require('../../../assets/bpmn/add.png'),
+        action: {
+          dragstart: createManualTask(addManualTaskConfig),
+          click: createManualTask(addManualTaskConfig)
+        }
+      },
+      'create.createMachineManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-shujujiagong',
+        // className: 'bpmn-icon-service-task',
+        title: translate('数据加工'),
+        action: {
+          dragstart: createManualTask(machineManualTaskConfig),
+          click: createManualTask(machineManualTaskConfig)
+        }
+      },
+      'create.createSearchManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-shujuchaxun',
+        title: translate('数据查询'),
+        action: {
+          dragstart: createManualTask(searchManualTaskConfig),
+          click: createManualTask(searchManualTaskConfig)
+        }
+      },
+      'create.dataSyncManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-shujutongbu',
+        title: translate('数据同步'),
+        action: {
+          dragstart: createManualTask(dataSyncTaskConfig),
+          click: createManualTask(dataSyncTaskConfig)
+        }
+      },
+      'create.createMessageManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-xiaoxifasong',
+        title: translate('消息发送'),
+        action: {
+          dragstart: createManualTask(sendMessageTaskConfig),
+          click: createManualTask(sendMessageTaskConfig)
+        }
+      },
+      'create.createRemoveManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-shanchujilu',
+        title: translate('删除记录'),
+        action: {
+          dragstart: createManualTask(removeManualTaskConfig),
+          click: createManualTask(removeManualTaskConfig)
+        }
+      },
+      'create.createUpdateManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-gengxinjilu',
+        title: translate('更新记录'),
+        action: {
+          dragstart: createManualTask(updateManualTaskConfig),
+          click: createManualTask(updateManualTaskConfig)
+        }
+      },
+      'create.callingInterfaceManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-tiaoyongjiekou',
+        title: translate('调用接口'),
+        action: {
+          dragstart: createManualTask(callingInterfaceTaskConfig),
+          click: createManualTask(callingInterfaceTaskConfig)
+        }
+      },
+      'create.callingRuleManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-yewuguize',
+        title: translate('调用业务规则'),
+        action: {
+          dragstart: createManualTask(callingRuleTaskConfig),
+          click: createManualTask(callingRuleTaskConfig)
+        }
+      },
+      'create.processManualTask': {
+        group: 'definetask',
+        className: 'epx-icon-lc-yewuguize',
+        title: translate('发起业务流程'),
+        action: {
+          dragstart: createManualTask(processTaskConfig),
+          click: createManualTask(processTaskConfig)
+        }
+      },
+      'create.loopStartInclusiveGateway': {
+        group: 'definetask',
+        className: 'epx-icon-xunhuankaishi',
+        title: translate('循环开始'),
+        action: {
+          dragstart: createInclusiveGateway(loopStartConfig),
+          click: createInclusiveGateway(loopStartConfig)
+        }
+      },
+      'create.loopEndInclusiveGateway': {
+        group: 'definetask',
+        className: 'epx-icon-xunhuanjieshu',
+        title: translate('循环结束'),
+        action: {
+          dragstart: createInclusiveGateway(loopEndConfig),
+          click: createInclusiveGateway(loopEndConfig)
+        }
+      }
+    }
+  }
+}
+
+CustomPalette.$inject = [
+  'bpmnFactory',
+  'create',
+  'elementFactory',
+  'palette',
+  'translate'
+]

package/src/frame/components/custom-bpmn/CustomRenderer.js

@@ -0,0 +1,115 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
+import {
+  append as svgAppend,
+  create as svgCreate,
+  classes
+} from 'tiny-svg'
+
+const HIGH_PRIORITY = 1500
+
+export default class CustomRenderer extends BaseRenderer {
+  constructor (eventBus, bpmnRenderer, modeling) {
+    super(eventBus, HIGH_PRIORITY)
+    this.bpmnRenderer = bpmnRenderer
+    this.modeling = modeling
+  }
+
+  canRender (element) {
+    // ignore labels
+    return !element.labelTarget
+  }
+
+  drawShape (parentNode, element) {
+    const type = element.type // 获取到类型
+    if (type === 'bpmn:UserTask' || type === 'bpmn:Task') {
+      const { $attrs } = element.businessObject
+      if ($attrs.ID) {
+        parentNode.parentNode.setAttribute('process-id', $attrs.ID)
+
+        const isWait = !$attrs.END_TIME.trim()
+        if (isWait) {
+          classes(parentNode).add('wait')
+        } else {
+          classes(parentNode).add('pass')
+        }
+        const a = svgCreate('a', {
+        })
+        a.setAttribute('xlink:href', '#')
+        const text = svgCreate('text', {
+          x: 50,
+          y: 20,
+          class: 'process_status',
+          'pointer-events': 'auto',
+          'font-size': '12',
+          fill: isWait ? '#E6A23C' : '#67C23A',
+          'text-anchor': 'middle'
+        })
+        text.innerHTML = isWait ? '等待审核' : $attrs.OPERATION
+        svgAppend(parentNode.parentNode, a)
+        svgAppend(a, text)
+      }
+    } else if (type === 'bpmn:ExclusiveGateway' || type === 'bpmn:ParallelGateway') {
+      const { $attrs = {} } = element.businessObject
+      if ($attrs.flow) {
+        classes(parentNode).add('pass')
+      }
+    } else if (type === 'bpmn:StartEvent' || type === 'bpmn:EndEvent') {
+      const { $attrs = {} } = element.businessObject
+      if ($attrs.flow) {
+        classes(parentNode).add('pass')
+      }
+    }
+    const shape = this.bpmnRenderer.drawShape(parentNode, element)
+    return shape
+  }
+
+  drawConnection (parentNode, element) {
+    const type = element.type // 获取到类型
+    // <path xmlns="http://www.w3.org/2000/svg" d="M788.48 512L312.32 786.92352V237.09696z" p-id="1843" style="&#10;    fill: green;&#10;"/>
+    if (type === 'bpmn:SequenceFlow') {
+      const { $attrs = {} } = element.businessObject
+      if ($attrs.flow) {
+        const waypoint = element.waypoints[element.waypoints.length - 1]
+        classes(parentNode).add('pass')
+        classes(parentNode).add('flow')
+        // 判断是否x大于y
+        let pathD = `M ${waypoint.x - 12} ${waypoint.y - 8} L ${waypoint.x} ${waypoint.y} L ${waypoint.x - 12} ${waypoint.y + 8} Z`
+        if (element.waypoints.length > 2) {
+        // 判断朝上还是朝下
+          const lastWayPoint = element.waypoints[element.waypoints.length - 2]
+          const nextWayPoint = element.waypoints[element.waypoints.length - 1]
+          const absX = nextWayPoint.x - lastWayPoint.x
+          const absY = nextWayPoint.y - lastWayPoint.y
+          if (absY === 0) {
+          // 左
+            if (absX < 0) {
+              pathD = `M ${waypoint.x + 12} ${waypoint.y - 8} L ${waypoint.x} ${waypoint.y} L ${waypoint.x + 12} ${waypoint.y + 8} Z`
+            }
+          }
+          if (absX === 0) {
+          // 上
+            if (absY < 0) {
+              pathD = `M ${waypoint.x - 8} ${waypoint.y + 12} L ${waypoint.x} ${waypoint.y} L ${waypoint.x + 8} ${waypoint.y + 12} Z`
+            } else {
+            // 下
+              pathD = `M ${waypoint.x - 8} ${waypoint.y - 12} L ${waypoint.x} ${waypoint.y} L ${waypoint.x + 8} ${waypoint.y - 12} Z`
+            }
+          }
+        }
+        const path = svgCreate('path', { // `M ${waypoint.x - 10} ${waypoint.y - 4} L ${waypoint.x} ${1 + waypoint.y} L ${waypoint.x - 10} ${waypoint.y + 6} Z`,
+          d: pathD,
+          style: 'fill: #67C23A;storke: #67C23A'
+        })
+        svgAppend(parentNode.parentNode, path)
+      }
+      const shape = this.bpmnRenderer.drawShape(parentNode, element)
+      return shape
+    }
+  }
+
+  getShapePath (shape) {
+    return this.bpmnRenderer.getShapePath(shape)
+  }
+}
+
+CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'modeling']

package/src/frame/components/custom-bpmn/CustomRendererBpmn.js

@@ -0,0 +1,45 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer' // 引入默认的renderer
+import {
+  append as svgAppend,
+  create as svgCreate,
+  remove as svgRemove
+//   classes
+} from 'tiny-svg'
+const HIGH_PRIORITY = 1500 // 最高优先级
+export default class CustomRenderer extends BaseRenderer { // 继承BaseRenderer
+  constructor (eventBus, bpmnRenderer) {
+    super(eventBus, HIGH_PRIORITY)
+    this.bpmnRenderer = bpmnRenderer
+  }
+
+  canRender (element) {
+    // ignore labels
+    return !element.labelTarget
+  }
+
+  drawShape (parentNode, element) { // 核心函数就是绘制shape
+    if (element.type === 'bpmn:ManualTask' && element.businessObject.img) {
+      const href = typeof (element.businessObject.img) === 'string' ? element.businessObject.img : element.businessObject.img.default
+      const image = svgCreate('image', {
+        x: 0,
+        y: 3,
+        width: 40,
+        height: 20
+      })
+      image.setAttribute('href', href)
+      svgAppend(parentNode.parentNode, image)
+    }
+    const shape = this.bpmnRenderer.drawShape(parentNode, element)
+
+    if (element.type === 'bpmn:ManualTask' && element.businessObject.img) {
+      svgRemove(parentNode.getElementsByTagName('*')[parentNode.getElementsByTagName('*').length - 1])
+    }
+    return shape
+  }
+
+  getShapePath (shape) {
+    return this.bpmnRenderer.getShapePath(shape)
+  }
+}
+
+CustomRenderer.$inject = ['eventBus', 'bpmnRenderer']