Talk about the Canvas event mechanism (non-API layer, partial framework design)

The following analysis uses the Sigmajs framework source code for analysis, and interested students can check it out. This article mainly introduces the event mechanism of Canvas and some design ideas.

---

Graphic events, design ideas and implementation introduction.

Graphics events need to support the following:

• Various event types supported
• event trigger mechanism
• event conflict problem

event type

• mouse

  • mousedown
  • mousemove
  • mouseup
  • mouseenter
  • mouseleave
  • dblclick
  • contextmenu
  • click
  • wheel
  • • drag does secondary development based on mousedown move leave.
  • • dragstart
  • • dragend

  

• touch

  • touchstart
  • touchend
  • touchcancel
  • touchmove

event trigger mechanism

According to the trigger source of the event, it can be divided into two types:

• trigger on the graph
• Triggered on Canvas

All events are implemented on the basis of Canvas's DOM event triggering.

Take click as an example:
The mouse clicks on the canvas to trigger the Canvas DOM event, and then collides with the graphic. If there is a graphic click, it is a canvas click. Pseudo code example:

Canvas.addEventListener("click", function(){
      // MouseCoords == CanvasCoords
      // getShapeAtPoint(Shapes,CanvasCoords)
      if(true){
          // 如果碰撞到图形
          this.emit("clickGraph",false);
          return
      }
      this.emit("clickCanvas",false);
      // 
}, false);

event conflict problem

Conflict between drag and click

Since canvas is a DOM node, not every graphic element can be identified as a DOM object, so it is impossible to set whether the graphic can be dragged or not through dragable. At this time, the click and drag when using the touchpad will conflict.

Simulate in the process of using mousedown and mouseup, and make a judgment on the distance and time difference between the two.
Specifically click or drag event.

Conflict between click and dbclick

In fact, it is not a conflict problem, but the implementation of dbclick is based on click, so it is necessary to have a handle on the click event to facilitate identification. Please see the code example:

handleClick(e: MouseEvent): void {
    if (!this.enabled) return;

    this.clicks++;

    if (this.clicks === 2) {
      this.clicks = 0;
      if (typeof this.doubleClickTimeout === "number") {
        clearTimeout(this.doubleClickTimeout);
        this.doubleClickTimeout = null;
      }
      return this.handleDoubleClick(e);
    }

    setTimeout(() => {
      this.clicks = 0;
      this.doubleClickTimeout = null;
    }, DOUBLE_CLICK_TIMEOUT);

    if (this.draggedEvents < DRAGGED_EVENTS_TOLERANCE) this.emit("click", getMouseCoords(e, this.container));
  }
  

other

Regarding the bubbling of events, there are graphs and canvases in Sigma, and the canvases are layered. There is a sequential (bubbling) sequence of events to each other.

finally

Visualization related architecture design, source code learning, daily development. I will share in depth step by step. If it helps you, please follow my follow-up content. Students in need can add my contact information (on my homepage, pull you into the group chat).