Vue 动态连接线

Posted 2022-11-04 lee576

尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 

 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果

<template>
  <div style="width: 100%; height: 100%">
    <svg ref="bar1" class="bar" :height="50"></svg>
    <svg ref="bar2" class="bar" :height="50"></svg>
  </div>
</template>

<script>
import interact from "interactjs";
import LeaderLine from 'leader-line-vue';
export default 
  data() 
    return 
      line: null
    
  ,
  mounted() 
    if (this.$refs.bar1) 
      this.drowBar(this.$refs.bar1);
    
    if (this.$refs.bar2) 
      this.drowBar(this.$refs.bar2);
    
    this.line = LeaderLine.setLine(this.$refs.bar1, this.$refs.bar2,  startSocket: 'right', endSocket: 'left', path: 'grid', 
       startPlugColor: '#ff3792', 
       endPlugColor: '#fff386',
       gradient: true );
  ,
  methods: 
    drowBar(bar) 
      interact(bar).draggable(
        inertia: false,
        modifiers: [
          interact.modifiers.restrictRect(
            restriction: "parent", // 只能在父元素内拖动
            endOnly: true,
          ),
        ],
        autoScroll: true,
        listeners: 
          move: dragMoveListener,
          end: (event) => 
            let target = event.target;
            let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
            let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
            console.log(target.x);
            target.style.webkitTransform = target.style.transform =
              "translate(" + x + "px, " + y + "px)";
            target.setAttribute("data-x", x);
            target.setAttribute("data-y", y);
            this.line.remove();
            this.line = LeaderLine.setLine(this.$refs.bar1, this.$refs.bar2,  startSocket: 'right', endSocket: 'left', path: 'grid', 
              startPlugColor: '#ff3792', 
              endPlugColor: '#fff386',
              gradient: true );
          ,
        ,
      );
      function dragMoveListener(event) 
        let  x  = event.target.dataset;
        let  y  = event.target.dataset;
        x = (parseFloat(event.target.getAttribute("data-x")) || 0) + event.dx;
        y = (parseFloat(event.target.getAttribute("data-y")) || 0) + event.dy;
        Object.assign(event.target.style, 
          width: `$event.rect.widthpx`,
          height: `$event.rect.heightpx`,
          transform: `translate($xpx, $ypx)`,
        );
        event.target.setAttribute("data-x", x);
        event.target.setAttribute("data-y", y);
      
      interact(bar).resizable(
        // 调整大小的时候确定哪些边可以拖动
        edges:  left: true, right: true, bottom: false, top: false ,
        listeners: 
          end: (event) => 
            let target = event.target
            let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
            let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

            target.setAttribute('width', event.rect.width)
            target.setAttribute('height', event.rect.height)
            target.style.width = event.rect.width + 'px'
            target.style.height = event.rect.height + 'px'
            target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
            target.setAttribute('data-x', x)
            target.setAttribute('data-y', y)
            this.line.remove();
            this.line = LeaderLine.setLine(this.$refs.bar1, this.$refs.bar2,  startSocket: 'right', endSocket: 'left', path: 'grid', 
              startPlugColor: '#ff3792', 
              endPlugColor: '#fff386',
              gradient: true );
          
        ,
        modifiers: [
          // // 拖拽时边缘只能在父容器里面
          // interact.modifiers.restrictEdges(
          //   outer: 'parent'
          // ),
          // // 最小宽高
          // interact.modifiers.restrictSize(
          //   min:  width: this.scale, height: this.barHeight 
          // )
        ],
        inertia: false,
        hold: 1
      )
      
    ,
  ,
  deactivated() 
    // 使用了 keep-alive 时注销掉所有事件
    if (this.$refs.bar) 
      if (interact.isSet(this.$refs.bar)) 
        interact(this.$refs.bar).unset();
      
    
  ,
  beforeDestory() 
    // 组件销毁前注销掉所有事件
    if (this.$refs.bar) 
      if (interact.isSet(this.$refs.bar)) 
        interact(this.$refs.bar).unset();
      
    
  ,
;
</script>

<style lang='less' scoped>
.bar 
  background-color: #0068E6;
  border-radius: 10px;

</style>