As browsers iterate over new features, they get bigger and bigger. Although we want to achieve a "small browser", in size sensitive scenarios, users still want to use a minimal feature set. This requires that we split the existing features in a reasonable way, trying to achieve a minimal core + incremental enhancements model.

The following figure shows the composition of the bundle @antv/g.

The full version @antv/g consists of the following parts.

• @antv/g-lite Includes canvas, basic graphics, event system, plugins system and other core functions
• @antv/g-camera-api Provides full camera motion and animation capabilities
• @antv/g-web-animations-api Provides an animation system compatible with the Web Animations API
• @antv/g-css-typed-om-api Provides CSS Typed OM API
• @antv/g-css-layout-api Provides CSS Layout API]
• @antv/g-dom-mutation-observer-api Provides DOM Mutation Observer API

Usage

The Lite version is identical to the full version in the use of core functions, such as creating canvases, basic graphics, using the renderer, etc.

import { Canvas, Circle } from '@antv/g-lite';
import { Renderer } from '@antv/g-canvas';

Calling the element's animation method at this point will have no effect。

circle.animate([], {});

Manual introduction of @antv/g-web-animations-api is required for this to take effect.

import { Canvas, Circle } from '@antv/g-lite';
import '@antv/g-web-animations-api';

Other progressive features can be introduced on-demand using a similar approach.

Function Introduction

The following is a detailed description of the functions of each part after splitting.

g-lite

Contains core functions such as canvas, basic graphics, event system, plugins system.

There is no change in the way the above functions are used, example.

import { Canvas, Circle } from '@antv/g-lite';
import { Renderer } from '@antv/g-canvas';

const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer: new Renderer(),
});

const circle = new Circle({
    style: { r: 100 },
});

g-camera-api

@antv/g-lite contains a simple camera implementation, but it does not work with camera action and camera animation.

camera.pan(); // throw new Error('Method not implemented.');
camera.createLandmark(); // throw new Error('Method not implemented.');

g-web-animations-api

Provides animation capabilities for base graphics compatible with the Web Animations API. The object.animate() method can still be called without this capability, but without any effect.

g-css-typed-om-api

The CSS Typed OM API allows parsed property values to be manipulated using JS, which is also the basis of CSS Houdini. In the case of width: '50%', the property value in string form is parsed to CSS.percent(50), facilitating the next calculation.

We provide similar capabilities.

g-css-layout-api

Reference CSS Layout API provides layout capabilities.

g-dom-mutation-observer-api

In the DOM API, we can use MutationObserver when we want to sense modifications in the DOM tree nodes, such as new nodes added, attribute values changed.

In G we also implement this API to listen to changes in the scene graph.

g-compat

Methods compatible with older versions are provided on the base graphics, most of which have DOM API-compatible implementations in newer versions. The use of these methods is therefore not recommended and may be removed at any time subsequently.

• getCount Get the number of child nodes, the new version uses childElementCount
• getParent Get the parent, the new version uses parentElement
• getChildren Get the list of child nodes, the new version uses children
• getFirst Get the first child node, the new version uses firstElementChild
• getLast Get the last child node, the new version uses lastElementChild
• getChildByIndex the new version uses this.children[index]
• add the new version uses appendChild
• setClip the new version uses clipPath
• getClip ld.
• set Storing key-value pairs on initialized configurations
• get Read values on initialized configuration
• show the new version uses visibility
• hide ld.
• moveTo the new version uses setPosition
• move ld.
• setZIndex the new version uses zIndex