Antv x6 lets the drag control toolbox float on the canvas, and no nodes are generated when the mouse is pressed in the toolbox area

The project requirement is to let it go, and it is triggered when we 工具箱悬浮在画布drag the control to generate nodes , so every time we press the mouse (drag or click), a node will be generated, which also causes us to click in the toolbox. Mousedown鼠标按下Generate nodes under the toolbox

insert image description here

I have written a lot of methods, such as adding a time stamp on mousedown and enabling dnd.start to drag and drop, and using the time interval judgment in validateNode when the node is generated, or recording a sign when mousedown is done, and clearing a sign when mouseup is done. Delay how many milliseconds before judging whether the flag is still there. If it is still there, it proves that it is a drag event and then triggers dnd.start. But both methods have been tried, and there are some problems. Finally, the boss reminds that it can be realized by the following method:

继承Dnd, rewrite isInsideValidAreathe method, and change the method to not generate nodes on the canvas as long as the dragged node does not leave the toolbox area

The source code of the dnd class
only defines the method of verifying whether the mouse is in the draggable area (I analyzed it myself, anyway, that’s probably what it means hahahaha, please correct me if there is something wrong~)

 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()!,
    })
  }

insert image description here

intersectsWithRect method : returns the area where the canvas area intersects with the scrolling area
containersPoint : determines whether the current xy axis of the mouse is in the area

So we only need to write a method to judge 当前鼠标是否还在拖拽区域中, if it is not generating a node.

We add the most important sentence in this method

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

Then there is this inheritance method in the online editing tool , we can just copy and paste

insert image description here
It really works after trying it!

insert image description here

Antv x6 lets the drag control toolbox float on the canvas, and no nodes are generated when the mouse is pressed in the toolbox area

Guess you like