[Visualization - Source Reading] Interpretation of antvis / g-base - 1

foreword

Analyzing the code written by the big guys helps with personal growth. Today, let's analyze and learn the internal implementation version of G is 0.5.1 . (Actually, I just want to secretly roll for nothing else).

The code is the second design idea behind the landing plan is the top priority; before starting the source code analysis, look at the technical solution of g ( and intercept a self-evaluation of an internal developer ..) [different entrances for each rendering mode , Different versions of G have implementations of Canvas, Group and Shape, and provide external support through a unified interface. 】

Start our source code journey

1. Select the source code of the branch source code [0.5.1] corresponding to the tags (I see that G6 uses this..)

2. Check out some engineering stuff to see how to get started

• package.json looked at some related instructions to use lerna, the package management um--, not the point and then go down.

• Look at the packages below lerna.json, you can understand that the source code probably contains several modules. They are g-base g-canvas g-svg g-math respectively.

3. Let's take a look at the internal source code together

Go to the packages directory and see these files. Here's a description of each module's responsibilities as I understand it.

• g-base
  The content required for drawing is defined and implemented by the interface.
• g-canvas
  2D rendering primitive encapsulation and interactive implementation of canvas
• g-math
  Encapsulate some operations on geometry
• g-svg
  2D rendering primitive encapsulation and interactive implementation of svg
• g-webgl
• g-mobile
  This version of webgl and mobile has no content, and will not be introduced until it is improved.

In-depth analysis of g-base

The content required for drawing is defined and implemented by the interface.

internal structure

• abstract
  Abstraction/definition of internal concepts, including element group, shape.
• animate
  Animation.... about the animation registration and destruction, etc... used D3-timer and d3-ease... about the animation math.
• bbox
  Regarding the coordinate processing of various shapes, the size processing collection is concerned. circle,ellipse,line....
• event
  Canvas event related creation, destruction 'mousedown', 'mouseup', 'dblclick'.....
• util
  Tool class library... To be honest, this piece is so complete (- -,) createbox, color, matrix...
• index.ts
  Overall entrance
• interfaces.ts
  of all interfaces, preview this file to see internal support and exposed API
• types.ts
  Type definitions of internal "structures" such as BBox, SimpleBBox, Ponit.

Take a few snippets of code to see...

Directory: g/packages/g-base/src/event/event-contoller.ts / Look at the fetching of entities, this optimization space is very large. But I didn't finish it. His concept doesn't seem to have any advantages. . If you know, you can communicate.

1. _getShape is just to pull out getShape. getShape is the logic for picking up code
2. _getPointInfo gets point information and then collides
   Looking at the picking of the entity, because each primitive inside G has the concept of a box, it is actually a boundary collision. Hmm, it doesn't seem to be anything. To see the internal bbox, I may not have much time to look here. If you want to discuss, you can add me to the visual group chat.

In-depth analysis of g-canvas

internal structure

g-canvas 2D rendering primitive canvas encapsulation and interactive implementation

• shape
  Various rendering shapes circle/ellipse etc..
• util
  Various tools about whether the entity capture is in-path in the circle or not... etc.
• canvas.ts
  Canvas basic operations get, draw/drawAll.., clear...etc
• group.ts
  Implementation of group-shape (a concept of rendering primitives)
• index.ts
  Overall entrance
• interfaces.ts
  of all interfaces, preview this file to see the internal support and exposed API
• types.ts
  Type definitions of internal "structures" such as BBox, SimpleBBox, Ponit.

look for the code

local refresh drawing

Local refresh drawing. Clear the specified area and then save; then perform clip (path clipping) to draw the child elements within the clipping path. Well, it's local drawing. Consider performance. However, I personally think that layered off-screen will be better. .

The other parts of G will not be analyzed first. For example, g-svg and Canvas are designed and implemented for one purpose, but only the details of API implementation. You can read them carefully.

finally

2022/02/22 Record it.

The last good news: on the evening of D3 , the relevant source code reading, analysis and sharing of 062148a013dd77 will be broadcast live in the group.