antv x6让拖拽控件工具箱悬浮在画布上，工具箱区域鼠标按下不生成节点

项目需求是让工具箱悬浮在画布上，而我们拖拽控件生成节点是Mousedown鼠标按下时就触发的，所以每次我们按下鼠标（拖拽或者单击）都会生成节点，这也就导致我们在工具箱单击时会在工具箱下边生成节点

在这里插入图片描述

写了好多方法，比如mousedown加时间戳同时开启dnd.start拖拽，等到生成节点的时候在validateNode里使用时间间隔判断啊，又或者在mousedown的时候记录一个标志，在Mouseup的时候清除一个标志，延迟多少毫秒再判断标志是否还在，如果还在，证明是拖拽事件再触发dnd.start,但是这两种方法都试了，都有些问题，最后，大佬提示，可以用如下方法实现：

继承Dnd，重写isInsideValidArea方法，把方法改成只要拖拽的节点不离开工具箱区域，就不会在画布上生成节点

dnd类的源码
源码里只定义了验证鼠标是否在可拖拽区域中的方法（自己分析的，反正大概就这么个意思吧哈哈哈哈，如有不对还请各位大佬温柔指正~）

 protected isInsideValidArea(p: Point.PointLike) {
    
    
    let targetRect: Rectangle
    const targetGraph = this.targetGraph
    const targetScroller = this.targetScroller

    if (targetScroller) {
    
     // 判断是否支持滚动
      if (targetScroller.options.autoResize) {
    
     // 如果支持滚动判断是否是否自动扩充/缩小画布
        targetRect = this.getDropArea(targetScroller.container)
      } else {
    
    
        const outter = this.getDropArea(targetScroller.container)
        targetRect = this.getDropArea(targetGraph.container).intersectsWithRect( // 返回画布区域与滚动区域相交的区域
          outter,
        )!
      }
    } else {
    
    
      targetRect = this.getDropArea(targetGraph.container)
    }

    return targetRect && targetRect.containsPoint(p) // 返回是否有可拖拽区域与当前鼠标（代表节点）是否在此区域中，如果有就生成节点
  }

  protected getDropArea(elem: Element) {
    
     // 返回可拖拽区域的x、y坐标与宽高
    const $elem = this.$(elem)
    const offset = $elem.offset()!
    const scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop
    const scrollLeft =
      document.body.scrollLeft || document.documentElement.scrollLeft

    return Rectangle.create({
    
    
      x:
        offset.left + parseInt($elem.css('border-left-width'), 10) - scrollLeft,
      y: offset.top + parseInt($elem.css('border-top-width'), 10) - scrollTop,
      width: $elem.innerWidth()!,
      height: $elem.innerHeight()!,
    })
  }

在这里插入图片描述

intersectsWithRect方法：返回画布区域与滚动区域相交的区域
containersPoint: 判断鼠标当前的xy轴是否在区域中

所以我们只需要写个方法判断一下当前鼠标是否还在拖拽区域中，如果在就不生成节点即可。

我们在这个方法里边加一最重要的一句

 // 如果还未拖出当前区域，就不在画布上生成节点
  return !dragRect.containsPoint(p) && super.isInsideValidArea(p);

然后在在线编辑工具里有这个继承方法，我们直接复制粘贴即可

在这里插入图片描述
试了下果然好用啊！

在这里插入图片描述

antv x6让拖拽控件工具箱悬浮在画布上，工具箱区域鼠标按下不生成节点

猜你喜欢