You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: translate documentation from Chinese to English (#2111)
Translated all Chinese documentation files in the `site/docs` directory to English. This includes creating new English files for Chinese files that did not have a corresponding English version, and translating existing English files that contained Chinese content.
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
In the previous [getting started tutorial](/en/guide/chapter3), we learned how to add event listeners to shapes. In this tutorial, we will take a deeper look at some useful properties and methods on the event object when a listener is triggered, understand the event propagation path, and finally implement a simple event delegation effect.
This time, our scene is very simple, similar to ul/li in the DOM:
16
16
17
17
```
18
18
Group(ul)
19
19
- Rect(li)
20
20
- Rect(li)
21
21
```
22
22
23
-
我们希望给 ul 下每个 li 增加点击事件监听，最直接的做法当然是：
23
+
We want to add a click event listener to each li under the ul. The most direct way is of course:
24
24
25
25
```js
26
26
li1.addEventListener('click', () => {});
27
27
li2.addEventListener('click', () => {});
28
28
```
29
29
30
-
这没有任何问题，但每次给 ul 添加新的 li 时，都需要添加这样的一个监听器，有没有“一劳永逸”的方法呢？
30
+
There is nothing wrong with this, but every time a new li is added to the ul, such a listener needs to be added. Is there a "once and for all" method?
31
31
32
-
在引入事件委托之前，我们先来看看事件传播机制。由于我们完全兼容 DOM Event API，不妨借用 MDN 上的教程来说明。在下图中，当我们点击 `<video>`元素时，会依次触发捕获（capturing）和冒泡（bubbling）两个阶段，前者从根节点一路进行到目标节点，触发路径上每个节点的 onclick 事件监听器（如有），后者则相反。
32
+
Before introducing event delegation, let's first look at the event propagation mechanism. Since we are fully compatible with the DOM Event API, we might as well use the tutorial on MDN to illustrate. In the figure below, when we click on the `<video>`element, two stages will be triggered in sequence: capturing and bubbling. The former proceeds from the root node all the way to the target node, triggering the onclick event listener of each node on the path (if any), while the latter is the opposite.
在我们的示例场景中，点击每一个 li 时同样也会经历上述传播阶段，因此只需要在父节点 ul 上监听即可，事件自然会冒泡上来，这就是事件委托：
38
+
In our example scene, clicking on each li will also go through the above propagation stages, so you only need to listen on the parent node ul, and the event will naturally bubble up. This is event delegation:
There are many useful properties on the event object. Let's first look at the event propagation path mentioned in the previous section. You can get it through the [composedPath()](/en/api/event/event-object#composedpath) method. When we click on li1, the path will return the following result:
The result is an array that shows the path from the target node that triggered the event to the root node in sequence. Let's look at it from back to front:
-[Canvas](/en/api/canvas/intro)is the canvas object, which can correspond to `window`.
57
+
-[Document](/en/api/builtin-objects/document)is the document, which can correspond to `window.document`.
58
+
-[Group(root)](/en/api/builtin-objects/document#documentelement)is the root node of the document, which can correspond to `window.document.documentElement`.
59
59
60
-
除了事件传播路径，事件对象上其他的常用属性有：
60
+
In addition to the event propagation path, other commonly used properties on the event object are:
As browsers iterate over new features, they get bigger and bigger. Although we want to achieve a "small browser", in sizesensitive 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.
6
+
As browsers continue to iterate and add new features, their size will inevitably increase. Although we aim to create a "small browser," in size-sensitive scenarios, users still prefer to use a minimal feature set. This requires us to reasonably split the existing features and strive to achieve a model of a minimal core + progressive enhancement.
7
7
8
-
The following figure shows the composition of the bundle`@antv/g`.
8
+
The following figure shows the bundle composition of `@antv/g`.
The full version `@antv/g` consists of the following parts.
12
+
The full version of `@antv/g` consists of the following parts:
13
13
14
-
-`@antv/g-lite` Includes [canvas](/en/api/canvas/intro), [basic graphics](/en/api/basic/concept), [event system](/en/api/event/intro), [plugins system](/en/plugins/intro) and other core functions
15
-
- Provides DOM Mutation Observer API
16
-
-`web-animations-api` Provides an animation system compatible with the [Web Animations API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API)
17
-
-`camera-api` Provides full camera motion and animation capabilities
14
+
-`@antv/g-lite`: Contains core features such as the [Canvas](/en/api/canvas/intro), [basic shapes](/en/api/basic/concept), the [event system](/en/api/event/intro), and the [plugin system](/en/plugins/intro).
15
+
- Provides the DOM Mutation Observer API.
16
+
-`web-animations-api`: Provides an animation system compatible with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
17
+
-`camera-api`: Provides full camera actions and animation functions.
18
18
19
19
## Usage
20
20
21
-
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.
21
+
The lite version is used in the same way as the full version for core functions, such as creating a canvas, basic shapes, and using a renderer:
22
22
23
23
```js
24
24
import { Canvas, Circle } from'@antv/g-lite';
25
25
import { Renderer } from'@antv/g-canvas';
26
26
```
27
27
28
-
Calling the element's animation method at this point will have no effect。
28
+
At this point, calling the element's animation method will have no effect:
29
29
30
30
```js
31
31
circle.animate([], {});
32
32
```
33
33
34
-
Manual introduction of `web-animations-api`is required for this to take effect.
34
+
You need to manually import `web-animations-api` for it to take effect:
35
35
36
36
```js
37
37
import { Canvas, Circle } from'@antv/g-lite';
38
38
import'@antv/g';
39
39
```
40
40
41
-
Other progressive features can be introduced on-demand using a similar approach.
41
+
Other progressive features can be imported ondemand in a similar way.
42
42
43
-
## Function Introduction
43
+
## Feature Introduction
44
44
45
-
The following is a detailed description of the functions of each part after splitting.
45
+
The following is a detailed introduction to the functions of each part after splitting.
46
46
47
47
### g-lite
48
48
49
-
Contains core functions such as [canvas](/en/api/canvas/intro), [basic graphics](/en/api/basic/concept), [event system](/en/api/event/intro), [plugins system](/en/plugins/intro).
49
+
Contains core features such as the [Canvas](/en/api/canvas/intro), [basic shapes](/en/api/basic/concept), the [event system](/en/api/event/intro), and the [plugin system](/en/plugins/intro).
50
50
51
-
There is no change in the way the above functions are used, [example](/en/examples/ecosystem/lite/#lite).
51
+
The usage of the above functions has not changed. [Example](/en/examples/ecosystem/lite/#lite):
52
52
53
53
```js
54
54
import { Canvas, Circle } from'@antv/g-lite';
@@ -68,40 +68,42 @@ const circle = new Circle({
68
68
69
69
### camera-api
70
70
71
-
`@antv/g-lite`contains a simple camera implementation, but it does not work with [camera action](/en/api/camera/action) and [camera animation](/en/api/camera/animation).
71
+
`@antv/g-lite`includes a simple camera implementation, but you cannot use [camera actions](/en/api/camera/action) and [camera animations](/en/api/camera/animation):
72
72
73
73
```js
74
74
camera.pan(); // throw new Error('Method not implemented.');
75
75
camera.createLandmark(); // throw new Error('Method not implemented.');
76
76
```
77
77
78
+
It can be used normally after being imported.
79
+
78
80
### web-animations-api
79
81
80
-
Provides [animation capabilities](/en/api/animation/waapi)for base graphics compatible with the [Web Animations API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API). The `object.animate()` method can still be called without this capability, but without any effect.
82
+
Provides basic shapes with [animation capabilities](/en/api/animation/waapi) compatible with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Without this feature, you can still call the `object.animate()` method, but it will have no effect.
81
83
82
84
### dom-mutation-observer-api
83
85
84
-
In the DOM API, we can use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)when we want to sense modifications in the DOM tree nodes, such as new nodes added, attribute values changed.
86
+
In the DOM API, when we want to perceive changes to DOM tree nodes, such as new nodes being added or attribute values changing, we can use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
85
87
86
-
In G we also implement this [API](/en/api/builtin-objects/mutation-observer) to listen to changes in the scene graph.
88
+
In G, we have also implemented this [API](/en/api/builtin-objects/mutation-observer) to listen for changes in the scene graph.
87
89
88
90
### g-compat
89
91
90
-
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.
91
-
92
-
-`getCount` Get the number of child nodes, the new version uses [childElementCount](/en/api/builtin-objects/element#childelementcount)
93
-
-`getParent` Get the parent, the new version uses [parentElement](/en/api/builtin-objects/node#parentelement)
94
-
-`getChildren` Get the list of child nodes, the new version uses [children](/en/api/builtin-objects/element#children)
95
-
-`getFirst` Get the first child node, the new version uses [firstElementChild](/en/api/builtin-objects/element#firstelementchild)
96
-
-`getLast` Get the last child node, the new version uses [lastElementChild](/en/api/builtin-objects/element#lastelementchild)
97
-
-`getChildByIndex` the new version uses `this.children[index]`
98
-
-`add` the new version uses [appendChild](/en/api/builtin-objects/node#appendchild)
99
-
-`setClip`the new version uses [clipPath](/en/api/basic/display-object#clippath)
100
-
-`getClip` ld.
101
-
-`set` Storing key-value pairs on initialized configurations
102
-
-`get` Read values on initialized configuration
103
-
-`show`the new version uses [visibility](/en/api/basic/display-object#visibility)
104
-
-`hide` ld.
105
-
-`moveTo`the new version uses [setPosition](/en/api/basic/display-object#平移)
106
-
-`move` ld.
107
-
-`setZIndex`the new version uses [zIndex](/en/api/basic/display-object#zindex)
92
+
Provides methods on basic shapes that are compatible with older versions. Most of them have implementations compatible with the DOM API in the new version. Therefore, it is not recommended to use these methods, as they may be removed at any time in the future:
93
+
94
+
-`getCount`: Gets the number of child nodes. The new version uses [childElementCount](/en/api/builtin-objects/element#childelementcount).
95
+
-`getParent`: Gets the parent node. The new version uses [parentElement](/en/api/builtin-objects/node#parentelement).
96
+
-`getChildren`: Gets the list of child nodes. The new version uses [children](/en/api/builtin-objects/element#children).
97
+
-`getFirst`: Gets the first child node. The new version uses [firstElementChild](/en/api/builtin-objects/element#firstelementchild).
98
+
-`getLast`: Gets the last child node. The new version uses [lastElementChild](/en/api/builtin-objects/element#lastelementchild).
99
+
-`getChildByIndex`: Gets a child node by index. The new version uses `this.children[index]`.
100
+
-`add`: Adds a child node. The new version uses [appendChild](/en/api/builtin-objects/node#appendchild).
101
+
-`setClip`: Sets the clipping shape. The new version uses [clipPath](/en/api/basic/display-object#clippath).
102
+
-`getClip`: Gets the clipping shape. Same as above.
103
+
-`set`: Stores a key-value pair on the initial configuration.
104
+
-`get`: Reads a value from the initial configuration.
105
+
-`show`: Shows the shape. The new version uses [visibility](/en/api/basic/display-object#visibility).
106
+
-`hide`: Hides the shape. Same as above.
107
+
-`moveTo`: Moves the shape in world coordinates. The new version uses [setPosition](/en/api/basic/display-object#translation).
108
+
-`move`: Same as above.
109
+
-`setZIndex`: Sets the rendering order. The new version uses [zIndex](/en/api/basic/display-object#zindex).
![google-labs-jules[bot]](https://avatars.githubusercontent.com/in/842251?v=4&size=40){kind=avatar}
0 commit comments