preface

Analyzing the code written by the bigwigs contributes to personal growth. The internal implementation of G is 0.5.1. (Actually I just want to secretly roll for no other reason).

The code is the second design idea behind the landing scheme is the most important; Take a look at g’s technical solution (and a snippet of internal developer self-evaluation…) before starting source code analysis. Canvas, Group and Shape are implemented in different versions of G, which are supported by a unified interface.

Start our source code journey

1. Select the source of the branch source [0.5.1] corresponding to the tags (I see G6 is using this..)

2. Look at some engineering stuff to see how to start

  • Package. json looks at some of the instructions used by Lerna to manage packages well — not the point.

  • Json (lerna.json) Packages (lerna.json) G-base G-Canvas G-SVG G-math.

3. Take a look at the internal source code

Go into the Packages directory and see these files. Here is a description of each module’s responsibilities as I understand them.

  • g-base

The content required by drawing is defined and realized by interface.

  • g-canvas

2D rendering pixel encapsulation and interactive implementation of canvas

  • g-math

Some operations of geometric figures are encapsulated

  • g-svg

2D rendering primitives encapsulated and interactive SVG implementation

  • g-webgl
  • g-mobile

Webgl and Mobile versions have no content and will not be introduced until they are perfected.

Let’s take a closer look at g-base

The content required by drawing is defined and realized by interface.

The internal structure

  • abstract

Abstractions/definitions of internal concepts, including Element Groups, shapes, etc.

  • animate

Animation… About animation registration destruction and so on… D3-timer and D3-ease… The math part about animation.

  • bbox

Coordinate processing about all kinds of shape, size processing set aspects. circle,ellipse,line….

  • event

Canvas event related creation, destruction of ‘mousedown’,’mouseup’,’dblclick’…..

  • util

Tool class library… Createbox (–,) createBox, color, matrix…

  • index.ts

The whole entrance

  • interfaces.ts

All interface definitions, preview this file to see internal support and exposed apis

  • types.ts

Type definitions for internal “constructs” such as BBox,SimpleBBox,Ponit, etc.

Take a look at some code…

Contents: g/packages/ G-base/SRC /event/event-contoller.ts / But I didn’t finish it. His concept doesn’t seem to have much advantage. Have understand can exchange next.

  1. _getShape is just to pull out getShape. GetShape is the logic for picking up code
  2. _getPointInfo gets the point information and goes to the collision

Looking at the pick up of entities, because each pixel in G has the concept of box, it is actually a boundary collision. Well, it doesn’t seem to matter. To look at the internal bbox, I probably won’t have much time to look at it on my end. You can join our visual group chat if you want to discuss.

Dig deeper into g-Canvas

The internal structure

G-canvas 2D rendering pixel Canvas encapsulation and interactive implementation

  • shape

Various render shapes circle/ellipse etc..

  • util

All kinds of tools about whether entity capture is in the path in-path is in the circle… , etc.

  • canvas.ts

Canvas basic operations get,draw/drawAll.. ,clear… , etc.

  • group.ts

Implementation of Group-Shape (a rendering metaconcept)

  • index.ts

The whole entrance

  • interfaces.ts

All interface definitions, preview this file to see internal support and exposed apis

  • types.ts

Type definitions for internal “constructs” such as BBox,SimpleBBox,Ponit, etc.

Look at the code

Local refresh drawing

Partial refresh drawing. Clear the specified region and then save; Then clip(path clipping) draws the child elements within the clipping path. Well, local drawing. Consider performance. But personally I think it’s better to split the screen.

The rest of G will not be analyzed.. G-svg and Canvas, for example, are designed and implemented for one purpose, just API implementation details. You can read it carefully.

The last

2022/02/22 Take note.

The last piece of good news :2022/02/25 evening in the group D3 related source reading analysis sharing.