JointJS点击选中元素高亮显示

心已赠人 2022-08-31 12:23 257阅读 0赞

使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。

官方文档相关部分：  
[highlighters][]  
[events][]

主要实现：

// 点击空白区域取消高亮
    this.paper.on('blank:pointerclick', () => { 
      this.graph.getCells().forEach(cell => { 
        highlighters.mask.remove(cell.findView(this.paper))
      })
    })
    // 点击元素
    this.paper.on('element:pointerclick', (cell) => { 
      // 先取消画布中高亮的所有元素
      this.graph.getCells().forEach(cell => { 
        highlighters.mask.remove(cell.findView(this.paper))
      })
      // 然后对点击元素高亮显示
      highlighters.mask.add(cell, {  selector: 'root' }, 'cell-active', { 
        deep: true,
        attrs: { 
          stroke: '#027AFF',
          'stroke-width': 2
        }
      })
    }

具体使用方式

import {  dia, layout, shapes, highlighters } from 'jointjs'
    import dagre from 'dagre'
    import graphlib from '@dagrejs/graphlib'
    ...
    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
          })
          this.paper.on('blank:pointerclick', () => { 
            this.graph.getCells().forEach(cell => { 
              highlighters.mask.remove(cell.findView(this.paper))
            })
          })
          this.paper.on('element:pointerclick', (cell) => { 
            this.graph.getCells().forEach(cell => { 
              highlighters.mask.remove(cell.findView(this.paper))
            })
            highlighters.mask.add(cell, {  selector: 'root' }, 'cell-active', { 
              deep: true,
              attrs: { 
                stroke: '#027AFF',
                'stroke-width': 2
              }
            })
        }
    }
    ...

其他高亮样式可以多看看官方文档

[highlighters]: https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#highlighters
[events]: https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#dia.Paper.events