vue-node-editer/src/nodeEditer/nodeSvg.js

vue-node-editer

function Node({ x, y, type, image, text }) {
  this.translate = { x, y }
  this.type = type
  this.image = image
  this.text = text
  this.next = []
  this.pre = []
}

function RectNode({ x, y, rect, image, text }) {
  let rectIntData = { key: "rect" }
  let type = Object.assign({}, rectIntData, rect)
  let rectImgIntData = { width: 25, height: 25 }
  image = Object.assign({}, rectImgIntData, image)
  let Obj = Object.assign({}, { x }, { y }, { type }, { image }, { text })
  return new Node(Obj)
}

function polygonNode({ x, y, image, label }) {
  let type = { key: 'polygon' }
  image = { src: image, width: 25, height: 25, x: 47.5, y: 27.5 }
  text = {
    tspan: [
      {
        dy: 11.080000007999999,
        x: 60,
        label: label,
      }
    ]

  }
  let Obj = Object.assign({}, { x }, { y }, { type }, { image }, { text })
  return new Node(Obj)
}

function maxRectNode({ x, y, image, label, handlerInf }) {
  let rect = { width: 200, height: 80, rx: 5, ry: 5, fill: '#e1f0fd' };
  image = { src: image, x: 10, y: 6 };
  let text = {
    tspan:
      [{
        dy: 11.080000007999999,
        x: 100,
        label: label
      }, {
        dy: 14.399999999999999,
        x: 100,
        label: '-----------------------------------------------'
      }, {
        dy: 14.399999999999999,
        x: 100,
        label: handlerInf
      }]
  }
  let Obj = Object.assign({}, { x }, { y }, { rect }, { image }, { text })
  return RectNode(Obj)
}

function minRectNode({ x, y, image, head, label }) {
  let rect = head ? { rx: 20, ry: 20 } : { rx: 5, ry: 5 };
  image = head ? { src: image, x: 15, y: 7.5 } : { src: image, x: 5, y: 6 };
  let text = {
    tspan: [
      {
        dy: 11.080000007999999,
        x: 72.5,
        label: label
      }]
  }
  let Obj = Object.assign({}, { x }, { y }, { rect }, { image }, { text })
  return RectNode(Obj)
}

export default {
  reviewNodeBig({ x, y, handlerInf }) {
    let image = require('../assets/images/editNode/reviewnode.png')
    let label = '审批节点'
    return maxRectNode({ x, y, image, label, handlerInf })
  },

  sendNodeBig({ x, y, handlerInf }) {
    let image = require('../assets/images/editNode/sendnode.png')
    let label = '抄送节点'
    return maxRectNode({ x, y, image, label, handlerInf })
  },

  signNodeBig({ x, y, handlerInf }) {
    let image = require('../assets/images/editNode/signnode.png')
    let label = '签字节点'
    return maxRectNode({ x, y, image, label, handlerInf })
  },

  voteNodeBig({ x, y, handlerInf }) {
    let image = require('../assets/images/editNode/votenode.png')
    let label = '投票节点'
    return maxRectNode({ x, y, image, label, handlerInf })
  },

  checkNodeBig({ x, y, handlerInf }) {
    let image = require('../assets/images/editNode/checknode.png')
    let label = '检查节点'
    return maxRectNode({ x, y, image, label, handlerInf })
  },

  startNode({ x, y }) {
    let image = require('../assets/images/editNode/startnode.png')
    let head = true
    let label = '开始节点'
    return minRectNode({ x, y, image, head, label })
  },

  reviewNode({ x, y }) {
    let image = require('../assets/images/editNode/reviewnode.png')
    let head = false
    let label = '审批节点'
    return minRectNode({ x, y, image, head, label })
  },

  sendNode({ x, y }) {
    let image = require('../assets/images/editNode/sendnode.png')
    let head = false
    let label = '抄送节点'
    return minRectNode({ x, y, image, head, label })
  },

  signNode({ x, y }) {
    let image = require('../assets/images/editNode/signnode.png')
    let head = false
    let label = '签字节点'
    return minRectNode({ x, y, image, head, label })
  },

  voteNode({ x, y }) {
    let image = require('../assets/images/editNode/votenode.png')
    let head = false
    let label = '投票节点'
    return minRectNode({ x, y, image, head, label })
  },

  checkNode({ x, y }) {
    let image = require('../assets/images/editNode/checknode.png')
    let head = false
    let label = '检查节点'
    return minRectNode({ x, y, image, head, label })
  },

  endNode({ x, y }) {
    let image = require('../assets/images/editNode/endnode.png')
    let head = true
    let label = '结束节点'
    return minRectNode({ x, y, image, head, label })
  },

  draftNode({ x, y }) {
    let image = require('../assets/images/editNode/draftnode.png')
    let head = true
    let label = '起草节点'
    return minRectNode({ x, y, image, head, label })
  },

  robotNode({ x, y }) {
    let image = require('../assets/images/editNode/robotnode.png')
    let head = false
    let label = '机器人节点'
    return minRectNode({ x, y, image, head, label })
  },


  freeSubFlowNode({ x, y }) {
    let image = require('../assets/images/editNode/freesubflownode.png')
    let head = false
    let label = '自由子流程节点'
    return minRectNode({ x, y, image, head, label })
  },

  embeddedSubFlowNode({ x, y }) {
    let image = require('../assets/images/editNode/embeddedsubflownode.png')
    let head = false
    let label = '嵌入子流程节点'
    return minRectNode({ x, y, image, head, label })
  },

  adhocSubFlowNode({ x, y }) {
    let image = require('../assets/images/editNode/adhocsubflownode.png')
    let head = false
    let label = '即席子流程节点'
    return minRectNode({ x, y, image, head, label })
  },

  startSubProcessNode({ x, y }) {
    let image = require('../assets/images/editNode/startsubprocessnode.png')
    let head = false
    let label = '启动子流程节点'
    return minRectNode({ x, y, image, head, label })
  },

  recoverSubProcessNode({ x, y }) {
    let image = require('../assets/images/editNode/recoversubprocessnode.png')
    let head = false
    let label = '回收子流程节点'
    return minRectNode({ x, y, image, head, label })
  },

  manualBranchNode({ x, y }) {
    let image = require('../assets/images/editNode/manualbranchnode.png')
    let label = '人工决策'
    return polygonNode({ x, y, image, label })
  },

  autoBranchNode({ x, y }) {
    let image = require('../assets/images/editNode/autobranchnode.png')
    let label = '条件分支'
    return polygonNode({ x, y, image, label })
  }

}