The following analysis using Sigmajs framework source code analysis, interested students can go to see. This paper mainly introduces the event mechanism of Canvas and some design ideas.

Graphic events, design ideas and implementation introduction.

Graphical events need to support the following:

  • Supports various event types
  • Event triggering mechanism
  • Event conflict problem

The event type

  • mouse
    • mousedown
    • mousemove
    • mouseup
    • mouseenter
    • mouseleave
    • dblclick
    • contextmenu
    • click
    • wheel
      • drag Do secondary development based on MouseDown Move Leave.
      • dragstart
      • dragend

  • touch
    • touchstart
    • touchend
    • touchcancel
    • touchmove

Event triggering mechanism

Events can be divided into two types according to different triggering sources:

  • Graphically triggered
  • Canvas trigger

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

Take click as an example: clicking the mouse on the Canvas triggers the Canvas DOM event, and then collides with the graph. If there is a graph click, there is no Canvas click. Examples of pseudocode:

Canvas.addEventListener("click", Function (){// MouseCoords == CanvasCoords // getShapeAtPoint(Shapes,CanvasCoords) if(true) this.emit("clickGraph",false); return } this.emit("clickCanvas",false); // }, false);Copy the code

Event conflict problem

Conflict between Drag and click

Since canvas is a DOM node, not every pixel can be identified as a DOM object, so it is impossible to set whether the graph can be dragged through dragable. In this case, clicking and dragging will conflict when using the touchpad.

In the process of using mousedown and mouseup simulation, a judgment is made to determine the distance and time difference between the two. Click or Drag events.

Conflict between click and dbclick

It’s not really a conflict problem, but the implementation of DBClick based on click needs to have a handle on the click event so that it can be easily identified. Take a look at 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)); }Copy the code

other

In terms of the bubbling of events, there are graphics and canvases in Sigma, and the canvases are layered. The order of events that exist in each other (bubbling).

The last

Visual architecture design, source code learning, daily development. I’m going to share it step by step. Please check out my follow-up if it’s helpful. If you need me, you can add my contact information (on my homepage, you can join the group chat).