Skip to content

Commit 391306b

Browse files
kiokukioku
authored
Add english translation of the documentation (antvis#4409)
docs: add english translation
1 parent 2134e11 commit 391306b

File tree

114 files changed

+17422
-155
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+17422
-155
lines changed

‎sites/x6-sites/docs/api/graph/background.en.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Background
3+
order: 3
4+
redirect_from:
5+
- /en/docs
6+
- /en/docs/api
7+
- /en/docs/api/graph
8+
---
9+
10+
The background is used to specify the background color or background image of the canvas, supporting [watermark background](#repeat). The background layer is at the bottom of the DOM layer.
11+
12+
## Demo
13+
14+
<code id="api-graph-background" src="@/src/api/background/playground/index.tsx"></code>
15+
16+
## Configuration
17+
18+
### color
19+
20+
The background color, supporting all [CSS background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) property values, such as:
21+
22+
- `red`
23+
- `#f5f5f5`
24+
- `rgba(255, 255, 128, 0.5)`
25+
- `hsla(50, 33%, 25%, 0.75)`
26+
- `radial-gradient(ellipse at center, red, green)`
27+
28+
### image
29+
30+
The URL address of the background image. The default value is `undefined`, indicating no background image.
31+
32+
### position
33+
34+
The position of the background image, supporting all [CSS background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) property values, with a default value of `'center'`.
35+
36+
### size
37+
38+
The size of the background image, supporting all [CSS background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) property values, with a default value of `'auto auto'`.
39+
40+
### repeat
41+
42+
The repeat mode of the background image, supporting all [CSS background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) property values, with a default value of `'no-repeat'`.
43+
44+
Additionally, the following predefined values are supported:
45+
46+
- `watermark`: Watermark effect.
47+
- `flip-x`: Flip the background image horizontally.
48+
- `flip-y`: Flip the background image vertically.
49+
- `flip-xy`: Flip the background image both horizontally and vertically.
50+
51+
### opacity
52+
53+
The opacity of the background, with a value range of `[0, 1]`, and a default value of `1`.
54+
55+
### quality
56+
57+
The quality of the background image, with a value range of `[0, 1]`, and a default value of `1`.
58+
59+
### angle
60+
61+
The rotation angle of the watermark, only valid when [repeat](#repeat) is `'watermark'`, with a default value of `20`.
62+
63+
## Methods
64+
65+
### drawBackground(...)
66+
67+
```ts
68+
drawBackground(options?: Options): this
69+
```
70+
71+
Redraw the background.
72+
73+
| Name | Type | Required | Default Value | Description |
74+
| ---------------- | ------ | :------: | ------------- | ------------------ |
75+
| options.color | string | | - | Background color. |
76+
| options.image | string | | - | Background image address. |
77+
| options.position | string | | - | Background image position. |
78+
| options.size | string | | - | Background image size. |
79+
| options.repeat | string | | - | Background image repeat mode. |
80+
| options.opacity | string | | - | Background image opacity. |
81+
82+
### updateBackground()
83+
84+
```ts
85+
updateBackground(): this
86+
```
87+
88+
Update the background.
89+
90+
### clearBackground()
91+
92+
```ts
93+
clearBackground(): this
94+
```
95+
96+
Clear the background.
97+
98+
## Custom Image Repeat Mode
99+
100+
In addition to the predefined values supported by [repeat](#repeat), you can also customize the image repeat mode.
101+
102+
```ts
103+
function watermark(img, options) {
104+
const width = img.width
105+
const height = img.height
106+
const canvas = document.createElement('canvas')
107+
108+
canvas.width = width * 3
109+
canvas.height = height * 3
110+
111+
const ctx = canvas.getContext('2d')!
112+
const angle = options.angle != null ? -options.angle : -20
113+
const radians = Angle.toRad(angle)
114+
const stepX = canvas.width / 4
115+
const stepY = canvas.height / 4
116+
117+
for (let i = 0; i < 4; i += 1) {
118+
for (let j = 0; j < 4; j += 1) {
119+
if ((i + j) % 2 > 0) {
120+
ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY)
121+
ctx.rotate(radians)
122+
ctx.drawImage(img, -width / 2, -height / 2, width, height)
123+
}
124+
}
125+
}
126+
127+
return canvas
128+
}
129+
130+
Graph.registerBackground('watermark', watermark)
131+
```

‎sites/x6-sites/docs/api/graph/coordinate.en.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Coordinate Systems
3+
order: 7
4+
redirect_from:
5+
- /en/docs
6+
- /en/docs/api
7+
- /en/docs/api/graph
8+
---
9+
10+
## Demo
11+
12+
<code id="api-graph-coord" src="@/src/api/coord/playground/index.tsx"></code>
13+
14+
In position calculations, we often need to perform coordinate conversions. In X6, there are two coordinate systems: the local canvas coordinate system `local` and the graph coordinate system `graph`. Sometimes, we also need to involve the browser coordinate system. Here's a unified explanation:
15+
16+
- `local`: The local canvas coordinate system, which defaults to being consistent with the `graph` coordinate system but will change with canvas scaling and translation. All node coordinates in the canvas are based on the `local` coordinate system.
17+
- `graph`: The graph coordinate system, which is the canvas viewport we see and will not change with canvas scaling and translation.
18+
- `client`: The browser coordinate system, where `e.clientX` and `e.clientY` in mouse events are relative to the browser coordinate system.
19+
- `page`: The page coordinate system, which considers page horizontal and vertical scrolling compared to `client`. `e.pageX` and `e.pageY` in mouse events are relative to the page coordinate system.
20+
21+
## Methods
22+
23+
### pageToLocal(...)
24+
25+
```ts
26+
pageToLocal(rect: Rectangle.RectangleLike): Rectangle
27+
pageToLocal(x: number, y: number, width: number, height: number): Rectangle
28+
pageToLocal(p: Point.PointLike): Point
29+
pageToLocal(x: number, y: number): Point
30+
```
31+
32+
Converts page coordinates to local canvas coordinates.
33+
34+
### localToPage(...)
35+
36+
```ts
37+
localToPage(rect: Rectangle.RectangleLike): Rectangle
38+
localToPage(x: number, y: number, width: number, height: number): Rectangle
39+
localToPage(p: Point.PointLike): Point
40+
localToPage(x: number, y: number): Point
41+
```
42+
43+
Converts local canvas coordinates to page coordinates.
44+
45+
### clientToLocal(...)
46+
47+
```ts
48+
clientToLocal(rect: Rectangle.RectangleLike): Rectangle
49+
clientToLocal(x: number, y: number, width: number, height: number): Rectangle
50+
clientToLocal(p: Point.PointLike): Point
51+
clientToLocal(x: number, y: number): Point
52+
```
53+
54+
Converts browser coordinates to local canvas coordinates.
55+
56+
### localToClient(...)
57+
58+
```ts
59+
localToClient(rect: Rectangle.RectangleLike): Rectangle
60+
localToClient(x: number, y: number, width: number, height: number): Rectangle
61+
localToClient(p: Point.PointLike): Point
62+
localToClient(x: number, y: number): Point
63+
```
64+
65+
Converts local canvas coordinates to browser coordinates.
66+
67+
### localToGraph(...)
68+
69+
```ts
70+
localToGraph(rect: Rectangle.RectangleLike): Rectangle
71+
localToGraph(x: number, y: number, width: number, height: number): Rectangle
72+
localToGraphPoint(p: Point.PointLike): Point
73+
localToGraphPoint(x: number, y: number): Point
74+
```
75+
76+
Converts local canvas coordinates to graph coordinates.
77+
78+
### graphToLocal(...)
79+
80+
```ts
81+
graphToLocal(rect: Rectangle.RectangleLike): Rectangle
82+
graphToLocal(x: number, y: number, width: number, height: number): Rectangle
83+
graphToLocal(p: Point.PointLike): Point
84+
graphToLocal(x: number, y: number): Point
85+
```
86+
87+
Converts graph coordinates to local canvas coordinates.
88+
89+
### snapToGrid(...)
90+
91+
```ts
92+
snapToGrid(p: Point.PointLike): Point
93+
snapToGrid(x: number, y: number): Point
94+
```
95+
96+
Convert browser coordinates to canvas [local coordinates](#clienttolocal) and align to the canvas grid.

‎sites/x6-sites/docs/api/graph/graph.en.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Graph
3+
order: 0
4+
redirect_from:
5+
- /en/docs
6+
- /en/docs/api
7+
- /en/docs/api/graph
8+
---
9+
10+
## Configuration
11+
12+
```ts
13+
new Graph(options: Options)
14+
```
15+
16+
| Option | Type | Required | Description | Default Value |
17+
| --- | --- | :-: | --- | --- |
18+
| container | `HTMLElement` | ✓ | The container of the canvas. | |
19+
| width | `number` | | The width of the canvas, defaults to the container width. | - |
20+
| height | `number` | | The height of the canvas, defaults to the container height. | - |
21+
| scaling | `{ min?: number, max?: number }` | | The minimum and maximum zoom levels of the canvas. | `{ min: 0.01, max: 16 }` |
22+
| [autoResize](/en/docs/tutorial/basic/graph#canvas-size) | `boolean \| Element \| Document` | | Whether to listen to container size changes and automatically update the canvas size. | `false` |
23+
| [panning](/en/docs/api/graph/panning) | `boolean \| PanningManager.Options` | | Whether the canvas can be panned, defaults to disabled. | `false` |
24+
| [mousewheel](/en/docs/api/graph/mousewheel) | `boolean \| MouseWheel.Options` | | Whether the mouse wheel can zoom, defaults to disabled. | `false` |
25+
| [grid](/en/docs/api/graph/grid) | `boolean \| number \| GridManager.Options` | | The grid, defaults to a 10px grid but does not draw the grid background. | `false` |
26+
| [background](/en/docs/api/graph/background) | `false \| BackgroundManager.Options` | | The background, defaults to not drawing the background. | `false` |
27+
| [translating](/en/docs/api/interacting/interaction#moving-range) | `Translating.Options` | | Restricts node movement. | `{ restrict: false }` |
28+
| [embedding](/en/docs/api/interacting/interaction#embedding) | `boolean \| Embedding.Options` | | Whether to enable nested nodes, defaults to disabled. | `false` |
29+
| [connecting](/en/docs/api/interacting/interaction#connecting) | `Connecting.Options` | | The connection options. | `{ snap: false, ... }` |
30+
| [highlighting](/en/docs/api/interacting/interaction#highlighting) | `Highlighting.Options` | | The highlighting options. | `{...}` |
31+
| [interacting](/en/docs/api/interacting/interaction#restrictions) | `Interacting.Options` | | Customizes the interaction behavior of nodes and edges. | `{ edgeLabelMovable: false }` |
32+
| [magnetThreshold](/en/docs/api/graph/view#magnetthreshold) | `number \| onleave` | | The number of times the mouse can move before triggering a connection, or set to `onleave` to trigger a connection when the mouse leaves an element. | `0` |
33+
| [moveThreshold](/en/docs/api/graph/view#movethreshold) | `number` | | The number of times the mouse can move before triggering a `mousemove` event. | `0` |
34+
| [clickThreshold](/en/docs/api/graph/view#clickthreshold) | `number` | | When the mouse moves more than the specified number of times, the mouse click event will not be triggered. | `0` |
35+
| [preventDefaultContextMenu](/en/docs/api/graph/view#preventdefaultcontextmenu) | `boolean` | | Whether to disable the browser's default right-click menu. | `true` |
36+
| [preventDefaultBlankAction](/en/docs/api/graph/view#preventdefaultblankaction) | `boolean` | | Whether to disable the default mouse behavior when clicking on a blank area of the canvas. | `true` |
37+
| [async](/en/docs/api/graph/view#async) | `boolean` | | Whether to render asynchronously. | `true` |
38+
| [virtual](/en/docs/api/graph/view#virtual) | `boolean` | | Whether to only render the visible area of the canvas. | `false` |
39+
| [onPortRendered](/en/docs/api/graph/view#onportrendered) | `(args: OnPortRenderedArgs) => void` | | The callback triggered when a port is rendered. | - |
40+
| [onEdgeLabelRendered](/en/docs/api/graph/view#onedgelabelrendered) | `(args: OnEdgeLabelRenderedArgs) => void` | | The callback triggered when an edge label is rendered. | - |
41+
| [createCellView](/en/docs/api/graph/view#createcellview) | `(cell: Cell) => CellView \| null \| undefined` | | Customizes the view of a cell. | - |

0 commit comments

Comments
 (0)