workflow-editor 0.9.68-dw → 0.9.68

package/packages/workflow-editor/src/util.js

@@ -0,0 +1,489 @@
+
+import { getLanguageWithLocale } from 'imatrix-ui/src/utils/util'
+import i18n from '../../../src/i18n/i18n'
+import newAutoTask from './json-object-templates/auto-task'
+import newCopyTask from './json-object-templates/copy-task'
+import newDecision from './json-object-templates/decision'
+import newEnd from './json-object-templates/end'
+import newFork from './json-object-templates/fork'
+import newHumanDecision from './json-object-templates/human-decision'
+import newHumanTask from './json-object-templates/human-task'
+import newJoin from './json-object-templates/join'
+import newProcess from './json-object-templates/process'
+import newStart from './json-object-templates/start'
+import newSubprocess from './json-object-templates/subprocess'
+import newTransition from './json-object-templates/transition'
+function getStore() {
+  return window.$store
+}
+function getI18n() {
+  if (!window.$locale) {
+    i18n.locale = 'cn'
+  } else {
+    i18n.locale = window.$locale
+  }
+  return i18n
+}
+// 组件的初始信息
+export function getComponentList() {
+  return [
+    {
+      name: 'Start',
+      label: getI18n().t('workflowEditor.task.start'),
+      icon: 'start',
+      type: 'success',
+      round: true,
+      width: 48,
+      height: 48,
+      color: '#67C23A'
+    }, {
+      name: 'HumanTask',
+      label: getI18n().t('workflowEditor.task.humanTask'),
+      icon: 'human-task',
+      type: '',
+      round: false,
+      width: 80,
+      height: 40,
+      color: '#000'
+    }, {
+      name: 'Decision',
+      label: getI18n().t('workflowEditor.task.conditionJudgment'),
+      icon: 'decision',
+      type: '',
+      round: false,
+      width: 48,
+      height: 48,
+      color: '#999'
+    },
+    {
+      name: 'Fork',
+      label: getI18n().t('workflowEditor.task.branch'),
+      icon: 'fork',
+      type: '',
+      round: false,
+      width: 48,
+      height: 48,
+      color: '#999'
+    },
+    {
+      name: 'Join',
+      label: getI18n().t('workflowEditor.task.converge'),
+      icon: 'join',
+      type: '',
+      round: false,
+      width: 48,
+      height: 48,
+      color: '#999'
+    },
+    {
+      name: 'Subprocess',
+      label: getI18n().t('workflowEditor.task.subprocess'),
+      icon: 'subprocess',
+      type: 'warning',
+      round: false,
+      width: 80,
+      height: 40,
+      color: '#0777D4'
+    },
+    {
+      name: 'HumanDecision',
+      label: getI18n().t('workflowEditor.task.manualJudgment'),
+      icon: 'human-decision',
+      type: '',
+      round: false,
+      width: 48,
+      height: 48,
+      color: '#999'
+    },
+    {
+      name: 'CopyTask',
+      label: getI18n().t('workflowEditor.task.cCtask'),
+      icon: 'copy-task',
+      type: '',
+      round: false,
+      width: 80,
+      height: 40,
+      color: '#0777D4'
+    },
+    {
+      name: 'AutoTask',
+      label: getI18n().t('workflowEditor.task.autoTask'),
+      icon: 'human-task',
+      type: '',
+      round: false,
+      width: 80,
+      height: 40,
+      color: '#0777D4'
+    },
+    {
+      name: 'End',
+      label: getI18n().t('workflowEditor.task.end'),
+      icon: 'end',
+      type: 'danger',
+      round: true,
+      width: 48,
+      height: 48,
+      color: '#F56C6C'
+    }
+  ]
+}
+function getComponentInfo(name) {
+  const component = getComponentList().filter(item => {
+    return item.name === name
+  })
+  if (component.length > 0) {
+    return component[0]
+  } else {
+    return null
+  }
+}
+// 根据环节id找到环节对象
+function getParent(parent) {
+  const taches = getStore().getters['wfEditor/taches']
+  const tache = taches.filter(tache => {
+    return tache.id === parent
+  })
+  return tache[0]
+}
+function getJoint(parent, position) {
+  // 如果parent只是一个名称的时候需要先找到环节对象
+  if (typeof (parent) === 'string') {
+    parent = getParent(parent)
+  }
+  switch (position) {
+    case 'up':
+    case 'top':
+      return { position: 'up', x: parent.x + parent.width / 2, y: parent.y }
+    case 'right':
+      return { position: 'right', x: parent.x + parent.width, y: parent.y + parent.height / 2 }
+    case 'down':
+    case 'bottom':
+      return { position: 'down', x: parent.x + parent.width / 2, y: parent.y + parent.height }
+    case 'left':
+      return { position: 'left', x: parent.x, y: parent.y + parent.height / 2 }
+    default:
+      return { position: '', x: parent.x, y: parent.y }
+  }
+}
+// 根据鼠标的位置clientX,clientY算出对应的SVG中的坐标
+function getMousePosition(evt) {
+  const CTM = document.getElementById('svg').getScreenCTM()
+  return {
+    x: (evt.clientX - CTM.e) / CTM.a,
+    y: (evt.clientY - CTM.f) / CTM.d
+  }
+}
+// 根据svg中鼠标按下的位置算出对应在html中的鼠标位置
+function getClientMousePosition() {
+  const CTM = document.getElementById('svg').getScreenCTM()
+  const mouseDownPosition = getStore().getters['wfEditor/mouseDownPosition']
+  return {
+    x: mouseDownPosition.x * CTM.a + CTM.e,
+    y: mouseDownPosition.y * CTM.d + CTM.f
+  }
+}
+function getMouseOffset(event, tache) {
+  if (event.target.classList.contains('draggable')) {
+    const offset = getMousePosition(event)
+    offset.x -= tache.x
+    offset.y -= tache.y
+    return offset
+  }
+}
+function getVirtualRegion(startPoint, endPoint) {
+  if (!startPoint || !endPoint) {
+    return {}
+  }
+  const { x: x1, y: y1 } = startPoint
+  const { x: x2, y: y2 } = endPoint
+  var area = {
+    x: 0,
+    y: 0,
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1)
+  }
+  if (x1 <= x2) {
+    if (y1 <= y2) { // p2在p1的右下方
+      area.x = x1
+      area.y = y1
+    } else { // p2在p1的右上方
+      area.x = x1
+      area.y = y2
+    }
+  } else {
+    if (y1 >= y2) { // p2在p1的左上方
+      area.x = x2
+      area.y = y2
+    } else {
+      area.x = x2
+      area.y = y1
+    }
+  }
+  return area
+}
+// 根据选中的环节裁剪选择区域
+function getRealRegion(taches) {
+  let minX, minY
+  minX = minY = 10000
+  let maxX, maxY
+  maxX = maxY = 0
+  for (const tache of taches) {
+    if (minX > tache.x) {
+      minX = tache.x
+    }
+    if (minY > tache.y) {
+      minY = tache.y
+    }
+    if (maxX < (tache.x + tache.width)) {
+      maxX = tache.x + tache.width
+    }
+    if (maxY < (tache.y + tache.height)) {
+      maxY = tache.y + tache.height
+    }
+  }
+  return {
+    x: minX - 10,
+    y: minY - 10,
+    width: maxX - minX + 20,
+    height: maxY - minY + 20
+  }
+}
+function startDragTache(event, vm) {
+  // 清除选中的环节或者流向
+  clearAllSelectedComponents()
+  // 清除选择区域
+  vm.$parent.region = null
+  // 不是显示流转历史的时候，需要选中当前环节
+  if (!vm.$parent.showHistory) {
+    vm.model.isSelected = true
+  }
+
+  getStore().getters['wfEditor/selectedTaches'].push(vm.model)
+
+  const mouseDownPosition = getMousePosition(event)
+  getStore().commit('wfEditor/setMouseDownPosition', mouseDownPosition)
+  getStore().commit('wfEditor/setMovingTache', true)
+}
+function endDragTache() {
+  getStore().commit('wfEditor/setMovingTache', false)
+  getStore().commit('wfEditor/setMouseDownPosition', null)
+}
+function unselectTaches() {
+  for (const tache of getStore().getters['wfEditor/selectedTaches']) {
+    tache.isSelected = false
+  }
+  getStore().commit('wfEditor/setSelectedTaches', [])
+}
+/**
+ * 包括选中的环节（可能有多个）和流向（0个或1个）
+ */
+function clearAllSelectedComponents() {
+  unselectTaches()
+  if (getStore().getters['wfEditor/selectedTransition']) {
+    getStore().getters['wfEditor/selectedTransition'].isSelected = false
+  }
+  getStore().commit('wfEditor/setSelectedTransition', null)
+}
+
+/**
+ * 通过xml-js库生成的js对象包含_text属性，需要把这个属性去掉，把值复制给父属性
+ * 如x:{_text:50}需要变成x:50
+ * @param {包含_text属性的对象} obj
+ */
+function removeTextProperty(obj) {
+  const keys = Object.getOwnPropertyNames(obj)
+  keys.forEach(function (key) {
+    if (typeof obj[key] === 'object') {
+      if (obj[key]._text !== undefined) {
+        obj[key] = obj[key]._text
+        return
+      } else {
+        if (Object.keys(obj[key]).length > 0) {
+          removeTextProperty(obj[key])
+        } else {
+          // 如果是空对象就转换为字符串，js-xml库会把每个xml节点都转换为对象，对底层的空节点应该是字符串，其他类型应该给默认值，true，0等
+          // variables和events节点不是最底层节点，有时候也会为空，不能处理他们
+          const specialNodes = ['variables', 'events', 'autoFilledFields']
+          if (specialNodes.indexOf(key) < 0) {
+            obj[key] = ''
+          }
+        }
+      }
+    }
+  })
+}
+function generateTaches(type, arr) {
+  if (!arr) arr = []
+  if (!Array.isArray(arr)) {
+    arr = [arr]
+  }
+  const taches = getStore().getters['wfEditor/taches']
+  for (const task of arr) {
+    const tache = {
+      id: task.attr.id,
+      name: task.attr.name,
+      // +号是把文本转换成数字的快捷方式
+      x: task.g.x,
+      y: task.g.y,
+      width: task.g.width,
+      height: task.g.height,
+      type: type,
+      isSelected: false,
+      ref: task
+    }
+    taches.push(tache)
+  }
+}
+function generateTransitions(type, arr) {
+  if (!arr) arr = []
+  if (!Array.isArray(arr)) {
+    arr = [arr]
+  }
+  const transitions = getStore().getters['wfEditor/transitions']
+  for (const transition of arr) {
+    const remark = transition.basicProperties.remark || ''
+    const model = {
+      id: transition.attr.id,
+      startJoint: { parent: findTacheById(transition.attr.from), position: transition.g.fromJoint },
+      endJoint: { parent: findTacheById(transition.attr.to), position: transition.g.toJoint },
+      isSelected: false,
+      remark: remark,
+      lineInfo: {
+        type: transition.g.lineType,
+        controlPoint: null
+      },
+      ref: transition
+    }
+    // 曲线的话会有控制点，如果以后要存多个控制点，就以'x1,y1 x2,y2 x3,y3'的形式来保存，目前只有一个控制点
+    if (transition.g.lineType === 'CurveLine' && transition.g.coordinate) {
+      const point = transition.g.coordinate.split(',')
+      model.lineInfo.controlPoint = {
+        x: point[0],
+        y: point[1]
+      }
+    } else if (transition.g.lineType === 'BrokenLine' && transition.g.coordinate) {
+      const points = transition.g.coordinate.split(';')
+      const controlPoints = []
+      points.forEach(pointXY => {
+        if (pointXY !== '') {
+          const point = pointXY.split(',')
+          controlPoints.push({ x: point[0], y: point[1] })
+        }
+      })
+      model.lineInfo.controlPoint = controlPoints
+    }
+    transitions.push(model)
+  }
+}
+function initializeProcessData(process) {
+  if (!process) return
+  generateTaches('HumanTask', process.humanTask)
+  generateTaches('Decision', process.decision)
+  generateTaches('Fork', process.fork)
+  generateTaches('Join', process.join)
+  generateTaches('Subprocess', process.subprocess)
+  generateTaches('HumanDecision', process.humanDecision)
+  generateTaches('CopyTask', process.copyTask)
+  generateTaches('AutoTask', process.autoTask)
+  generateTaches('Start', process.start)
+  generateTaches('End', process.end)
+  generateTransitions('Transition', process.transition)
+}
+function findOutgoingTransitionsByTacheId(tacheId) {
+  const transitions = getStore().getters['wfEditor/transitions']
+  const result = transitions.filter(transition => {
+    return transition.startJoint.parent.id === tacheId || transition.ref.attr.from === tacheId
+  })
+  return result
+}
+
+function findIncomingTransitionsByTacheId(tacheId) {
+  const transitions = getStore().getters['wfEditor/transitions']
+  const result = transitions.filter(transition => {
+    return transition.endJoint.parent.id === tacheId || transition.ref.attr.to === tacheId
+  })
+  return result
+}
+
+function findTacheById(tacheId) {
+  const taches = getStore().getters['wfEditor/taches']
+  const tache = taches.filter(tache => {
+    return tache.ref.attr.id === tacheId
+  })
+  if (tache.length > 0) {
+    return tache[0]
+  } else {
+    return null
+  }
+}
+function deepCopy(source) {
+  return JSON.parse(JSON.stringify(source))
+}
+
+function updateTransitionsWhenTacheIdChanged(newId, oldId) {
+  const incomingTransitions = findIncomingTransitionsByTacheId(oldId)
+  incomingTransitions.map(item => {
+    item.ref.attr.to = newId
+    item.ref.attr.id = 'flow_' + item.ref.attr.from + '_to_' + item.ref.attr.to
+    item.id = item.ref.attr.id
+  })
+  const outgoingTransitions = findOutgoingTransitionsByTacheId(oldId)
+  outgoingTransitions.map(item => {
+    item.ref.attr.from = newId
+    item.ref.attr.id = 'flow_' + item.ref.attr.from + '_to_' + item.ref.attr.to
+    item.id = item.ref.attr.id
+  })
+  return true
+}
+function validateTacheCode(vm) {
+  const tache = findTacheById(vm.formModel.id)
+  if (tache && tache.id !== vm.id) {
+    vm.$alert(getI18n().t('workflowEditorMessage.itIsTheSameAsTheExistingLink', { name: tache.name }))
+    // 编码重复，立即还原id
+    vm.formModel.id = vm.id
+    return
+  }
+  // 环节编码不重复的时候，就需要更新流入流向的to和流出流向的from属性了，同时把编码值回传给父组件
+  updateTransitionsWhenTacheIdChanged(vm.formModel.id, vm.id)
+  //  支持.snyc修饰符的写法
+  vm.$emit('update:id', vm.formModel.id)
+}
+
+function watchShowName(vm, newVal) {
+  let showName = ''
+  if (vm.processI18n && vm.model.ref && vm.model.ref.basicProperties && vm.model.ref.basicProperties.i18nKey) {
+    const i18nKey = vm.model.ref.basicProperties.i18nKey
+    const language = getLanguageWithLocale()
+    if (vm.processI18n[i18nKey]) {
+      showName = vm.processI18n[i18nKey][language]
+    }
+    if (!showName) {
+      showName = newVal
+    }
+  } else {
+    showName = newVal
+  }
+  return showName
+}
+export {
+  clearAllSelectedComponents, deepCopy, endDragTache, findIncomingTransitionsByTacheId, findOutgoingTransitionsByTacheId, findTacheById, getClientMousePosition, getComponentInfo, getI18n, getJoint, getMouseOffset, getMousePosition, getRealRegion, getVirtualRegion, initializeProcessData, removeTextProperty, startDragTache, updateTransitionsWhenTacheIdChanged,
+  validateTacheCode, watchShowName
+}
+
+const processTemplate = {
+  newProcess,
+  newHumanTask,
+  newDecision,
+  newStart,
+  newEnd,
+  newTransition,
+  newSubprocess,
+  newFork,
+  newJoin,
+  newHumanDecision,
+  newCopyTask,
+  newAutoTask
+}
+
+export { processTemplate }
+