sfms3.0-ui/src/views/mes/processroute/components/graphbase.data.ts

import { Graph, Node, Path, Cell } from '@antv/x6'
//工艺节点的定义
export const process_node = ref({
  width: 120,
  height: 40,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: 'rgba(255,255,255,0.8)',
      refWidth: 1,
      refHeight: 1
    },
    // image: {
    //   'xlink:href':
    //     'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
    //   width: 16,
    //   height: 16,
    //   x: 12,
    //   y: 12,
    // },
    title: {
      text: 'Node',
      refX: 5,
      refY: 5,
      fill: 'rgba(0,0,0,0.85)',
      fontSize: 12,
      'text-anchor': 'start'
    },
    text: {
      text: 'this is content text',
      refX: 5,
      refY: 25,
      fontSize: 12,
      fill: 'rgba(0,0,0,0.6)',
      'text-anchor': 'start'
    }
  },
  ports: {
    groups: {
      in: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      out: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  },
  tools: [
    {
      name: 'button-remove',
      args: {
        x: '100%',
        y: 0,
        offset: { x: -10, y: 10 }
      }
    }
  ],
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    // {
    //   tagName: 'image',
    //   selector: 'image',
    // },
    {
      tagName: 'text',
      selector: 'title'
    },
    {
      tagName: 'text',
      selector: 'text'
    }
  ]
})
//--------开始结束节点的定义---------------------

export const base_node = ref({
  width: 66,
  height: 36,
  inherit: 'rect', // 继承于 rect 节点
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#EFF4FF',
      refWidth: 2,
      refHeight: 2
    },
    text: {
      fontSize: 12,
      fill: '#262626'
    }
  },
  ports: {
    groups: {
      in: {
        position: 'left',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      },
      out: {
        position: 'right',
        attrs: {
          circle: {
            magnet: true,
            stroke: '#8f8f8f',
            r: 5
          }
        }
      }
    }
  }
})

export const start_node = ref({
  id: 'startNode',
  label: '开始',
  x: 50,
  y: 200,
  attrs: {
    body: {
      rx: 20,
      ry: 26
    }
  },
  shape: 'base-node',
  ports: [{ id: 'out', group: 'out' }]
})
//结束节点的定义
export const end_node = ref({
  id: 'endNode',
  x: 200,
  y: 200,
  label: '结束',
  attrs: {
    body: {
      rx: 20,
      ry: 26
    }
  },
  shape: 'base-node',
  ports: [{ id: 'in', group: 'in' }]
})
export const createGraph = (graphContainer: any) => {
  const ret = ref<Graph>()
  ret.value= new Graph({
    container: graphContainer,
    autoResize: true,
    background: { color: '#F2F7FA' }, // 创建画布时初始化背景相关配置对象
    grid: { size: 10, visible: true, type: 'mesh' }, //创建画布时，通过配置对象来设置背景网格
    mousewheel: {
      enabled: true,
      modifiers: 'ctrl',
      factor: 1.1,
      maxScale: 1.5,
      minScale: 0.5
    },
    connecting: {
      snap: true,
      allowBlank: false,
      allowLoop: false,
      allowNode: false,
      highlight: true,

      createEdge() {
        return this.createEdge({
          attrs: {
            line: {
              stroke: '#8f8f8f',
              strokeWidth: 1
            }
          }
        })
      },
      validateMagnet({ magnet }) {
        return magnet.getAttribute('port-group') !== 'in'
      },
      validateConnection({ sourceMagnet, targetMagnet }) {
        // 只能从输出链接桩创建连接
        if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') {
          return false
        }
        // 只能连接到输入链接桩
        if (!targetMagnet || targetMagnet.getAttribute('port-group') !== 'in') {
          return false
        }
        return true
      }
    },
    panning: {
      enabled: true
    },
    highlighting: {
      // 连接桩可以被连接时在连接桩外围围渲染一个包围框
      magnetAvailable: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#fff',
            stroke: '#A4DEB1',
            strokeWidth: 4
          }
        }
      }
    }
    //selecting:{enabled: true, multiple: true,rubberEdge: true,rubberNode: true,modifiers: 'shift',rubberband: true}
  })
  // ret.value.on('node:click', ({ e, x, y, node, view }) => {
  //   //nodeClick(e, x, y, node, view)
  //   nodeClick(e, x, y, node, view)
  // })
  // ret.value.on('node:removed', ({ node, index, options }) => {
  //   nodeRemoved(node, index, options)
  // })
  ret.value.on('edge:mouseenter', ({ cell }) => {
    cell.addTools([
      {
        name: 'vertices',
        args: {
          d: 'M 10 -8 -10 0 10 8 Z',
          fill: '#333',
          stroke: '#fff',
          'stroke-width': 2,
          cursor: 'move'
        }
      },
      {
        name: 'button-remove',
        args: { distance: 20 }
      }
    ])
  })
  ret.value.on('edge:mouseleave', ({ cell }) => {
    cell.removeTools()
  })
  return ret.value
}
//注册节点
export const registerNodes = () => {
  //-----图形定制化节点-------------------
  Graph.registerNode('process-node', process_node.value, true)
  Graph.registerNode('base-node', base_node.value, true)
}
//获取新的节点
export const getNewNode = (id: string, title: string, contentText: string) => {
  return {
    id: id,
    width: 120,
    height: 40,
    x: 100,
    y: 100,
    attrs: {
      title: {
        text: title
      },
      text: {
        text: contentText
      }
    },
    shape: 'process-node',
    ports: [
      { id: 'in', group: 'in' },
      { id: 'out', group: 'out' }
    ]
  }
}