workflow-editor 0.0.7-up → 0.0.8-up

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

@@ -1,489 +0,0 @@
-
-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.global
-}
-// 组件的初始信息
-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 }
-