结合给定数据使用JointJS自动绘制元素

向右看齐 2022-10-12 15:53 70阅读 0赞

我们给定一串数据，然后结合数据用 JointJS 在画布中绘制出元素

data.js

export default [{ 
      id: 1,
      type: 'start',
      name: '事件',
      prev: [],
      next: [2, 5, 6]
    }, { 
      id: 2,
      type: 'field',
      name: '字段1',
      prev: [1],
      next: [4]
    }, { 
      id: 4,
      type: 'field',
      name: '字段2',
      prev: [2],
      next: [3]
    }, { 
      id: 5,
      type: 'field',
      name: '字段3',
      prev: [1],
      next: [4]
    }, { 
      id: 6,
      type: 'field',
      name: '字段4',
      prev: [1],
      next: [4]
    }, { 
      id: 3,
      type: 'end',
      name: '结束',
      prev: [4],
      next: []
    }]

vue 文件

import { dia, layout, shapes} from 'jointjs'
    import dagre from 'dagre'
    import graphlib from '@dagrejs/graphlib'
    import data from "./data"
    export default { 
      data() { 
        return { 
          graph: null,
          paper: null,
          items: data,
          nodeSet: { }
        }
      },
      mounted() { 
        this.init()
        this.render()
      },
      methods: { 
        init() { 
          const canvasRect = this.$refs.canvas.getClientRects()[0]
          this.graph = new dia.Graph()
          this.paper = new dia.Paper({ 
            el: this.$refs.canvas,
            model: this.graph,
            width: canvasRect.width,
            height: canvasRect.height,
            gridSize: 1
          })
          // See https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.Paper.events
          this.paper.on('element:pointerclick', (cell) => { 
            Object.keys(this.nodeSet).forEach(item => { 
              if (this.nodeSet[item].id === cell.model.id) { 
                console.log(item) // 当前点击元素id
                console.log(data[item]) // 当前点击元素内容
              }
            })
          })
        },
        render() { 
          const { nodes, links, nodeSet} = this
    
          nodes.forEach((node) => { 
            const option = { 
              size: { 
                width: 100,
                height: 40
              },
              attrs: { 
                body: { 
                  fill: '#ddd',
                  strokeWidth: 1,
                  stroke: '#ccc'
                },
                label: { 
                  text: node.name,
                  fill: '#333'
                }
              }
            }
            let item
            if (node.type === 'start' || node.type === 'end') { 
              item = new shapes.standard.Ellipse(option)
            } else { 
              item = new shapes.standard.Rectangle(option)
            }
            item.addTo(this.graph)
    
            nodeSet[node.id] = item
          })
    
          links.forEach(([from, to]) => { 
            const link = new shapes.standard.Link({ 
              source: nodeSet[from],
              target: nodeSet[to],
              attrs: { 
                line: { 
                  stroke: '#aaa'
                }
              }
            })
            link.addTo(this.graph)
          })
          this.doLayout()
        },
        doLayout() { 
          layout.DirectedGraph.layout(this.graph, { 
            dagre: dagre,
            graphlib: graphlib,
            setLinkVertices: false,
            rankDir: 'LR', //节点方向 有几个选项 "TB" (top-to-bottom) / "BT" (bottom-to-top) / "LR" (left-to-right) / "RL" (right-to-left)
            align: 'DL',
            rankSep: 50,
            marginX: 60,
            marginY: 60,
            nodeSep: 50,
            edgeSep: 20
          })
        }
      },
      computed: { 
        nodes() { 
          const nodes = []
    
          this.items.forEach(item => { 
            nodes.push(item)
          })
    
          return nodes
        },
        links() { 
          const links = []
    
          this.items.forEach(item => { 
            item.next.forEach(p => { 
              links.push([item.id, p])
            })
          })
    
          return links
        }
      }
    }
    </script>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221005/d5b6a1cce6b44605862b4d6eec709412.png