Add english translation of the documentation

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

@@ -0,0 +1,131 @@
+---
+title: Background
+order: 3
+redirect_from:
+  - /en/docs
+  - /en/docs/api
+  - /en/docs/api/graph
+---
+
+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.
+
+## Demo
+
+<code id="api-graph-background" src="@/src/api/background/playground/index.tsx"></code>
+
+## Configuration
+
+### color
+
+The background color, supporting all [CSS background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) property values, such as:
+
+-  `red`
+-  `#f5f5f5`
+-  `rgba(255, 255, 128, 0.5)`
+-  `hsla(50, 33%, 25%, 0.75)`
+-  `radial-gradient(ellipse at center, red, green)`
+
+### image
+
+The URL address of the background image. The default value is `undefined`, indicating no background image.
+
+### position
+
+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'`.
+
+### size
+
+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'`.
+
+### repeat
+
+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'`.
+
+Additionally, the following predefined values are supported:
+
+-  `watermark`: Watermark effect.
+-  `flip-x`: Flip the background image horizontally.
+-  `flip-y`: Flip the background image vertically.
+-  `flip-xy`: Flip the background image both horizontally and vertically.
+
+### opacity
+
+The opacity of the background, with a value range of `[0, 1]`, and a default value of `1`.
+
+### quality
+
+The quality of the background image, with a value range of `[0, 1]`, and a default value of `1`.
+
+### angle
+
+The rotation angle of the watermark, only valid when [repeat](#repeat) is `'watermark'`, with a default value of `20`.
+
+## Methods
+
+### drawBackground(...)
+
+```ts
+drawBackground(options?: Options): this
+```
+
+Redraw the background.
+
+| Name             | Type   | Required | Default Value | Description               |
+| ---------------- | ------ | :------: | ------------- | ------------------ |
+| options.color    | string |          | -             | Background color.         |
+| options.image    | string |          | -             | Background image address. |
+| options.position | string |          | -             | Background image position. |
+| options.size     | string |          | -             | Background image size.     |
+| options.repeat   | string |          | -             | Background image repeat mode. |
+| options.opacity  | string |          | -             | Background image opacity.   |
+
+### updateBackground()
+
+```ts
+updateBackground(): this
+```
+
+Update the background.
+
+### clearBackground()
+
+```ts
+clearBackground(): this
+```
+
+Clear the background.
+
+## Custom Image Repeat Mode
+
+In addition to the predefined values supported by [repeat](#repeat), you can also customize the image repeat mode.
+
+```ts
+function watermark(img, options) {
+  const width = img.width
+  const height = img.height
+  const canvas = document.createElement('canvas')
+
+  canvas.width = width * 3
+  canvas.height = height * 3
+
+  const ctx = canvas.getContext('2d')!
+  const angle = options.angle != null ? -options.angle : -20
+  const radians = Angle.toRad(angle)
+  const stepX = canvas.width / 4
+  const stepY = canvas.height / 4
+
+  for (let i = 0; i < 4; i += 1) {
+    for (let j = 0; j < 4; j += 1) {
+      if ((i + j) % 2 > 0) {
+        ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY)
+        ctx.rotate(radians)
+        ctx.drawImage(img, -width / 2, -height / 2, width, height)
+      }
+    }
+  }
+
+  return canvas
+}
+
+Graph.registerBackground('watermark', watermark)
+```

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

@@ -0,0 +1,96 @@
+---
+title: Coordinate Systems
+order: 7
+redirect_from:
+  - /en/docs
+  - /en/docs/api
+  - /en/docs/api/graph
+---
+
+## Demo
+
+<code id="api-graph-coord" src="@/src/api/coord/playground/index.tsx"></code>
+
+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:
+
+-  `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.
+-  `graph`: The graph coordinate system, which is the canvas viewport we see and will not change with canvas scaling and translation.
+-  `client`: The browser coordinate system, where `e.clientX` and `e.clientY` in mouse events are relative to the browser coordinate system.
+-  `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.
+
+## Methods
+
+### pageToLocal(...)
+
+```ts
+pageToLocal(rect: Rectangle.RectangleLike): Rectangle
+pageToLocal(x: number, y: number, width: number, height: number): Rectangle
+pageToLocal(p: Point.PointLike): Point
+pageToLocal(x: number, y: number): Point
+```
+
+Converts page coordinates to local canvas coordinates.
+
+### localToPage(...)
+
+```ts
+localToPage(rect: Rectangle.RectangleLike): Rectangle
+localToPage(x: number, y: number, width: number, height: number): Rectangle
+localToPage(p: Point.PointLike): Point
+localToPage(x: number, y: number): Point
+```
+
+Converts local canvas coordinates to page coordinates.
+
+### clientToLocal(...)
+
+```ts
+clientToLocal(rect: Rectangle.RectangleLike): Rectangle
+clientToLocal(x: number, y: number, width: number, height: number): Rectangle
+clientToLocal(p: Point.PointLike): Point
+clientToLocal(x: number, y: number): Point
+```
+
+Converts browser coordinates to local canvas coordinates.
+
+### localToClient(...)
+
+```ts
+localToClient(rect: Rectangle.RectangleLike): Rectangle
+localToClient(x: number, y: number, width: number, height: number): Rectangle
+localToClient(p: Point.PointLike): Point
+localToClient(x: number, y: number): Point
+```
+
+Converts local canvas coordinates to browser coordinates.
+
+### localToGraph(...)
+
+```ts
+localToGraph(rect: Rectangle.RectangleLike): Rectangle
+localToGraph(x: number, y: number, width: number, height: number): Rectangle
+localToGraphPoint(p: Point.PointLike): Point
+localToGraphPoint(x: number, y: number): Point
+```
+
+Converts local canvas coordinates to graph coordinates.
+
+### graphToLocal(...)
+
+```ts
+graphToLocal(rect: Rectangle.RectangleLike): Rectangle
+graphToLocal(x: number, y: number, width: number, height: number): Rectangle
+graphToLocal(p: Point.PointLike): Point
+graphToLocal(x: number, y: number): Point
+```
+
+Converts graph coordinates to local canvas coordinates.
+
+### snapToGrid(...)
+
+```ts
+snapToGrid(p: Point.PointLike): Point
+snapToGrid(x: number, y: number): Point
+```
+
+Convert browser coordinates to canvas [local coordinates](#clienttolocal) and align to the canvas grid.

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

@@ -0,0 +1,41 @@
+---
+title: Graph
+order: 0
+redirect_from:
+  - /en/docs
+  - /en/docs/api
+  - /en/docs/api/graph
+---
+
+## Configuration
+
+```ts
+new Graph(options: Options)
+```
+
+| Option | Type | Required | Description | Default Value |
+| --- | --- | :-: | --- | --- |
+| container | `HTMLElement` | ✓ | The container of the canvas. |  |
+| width | `number` |  | The width of the canvas, defaults to the container width. | - |
+| height | `number` |  | The height of the canvas, defaults to the container height. | - |
+| scaling | `{ min?: number, max?: number }` |  | The minimum and maximum zoom levels of the canvas. | `{ min: 0.01, max: 16 }` |
+| [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` |
+| [panning](/en/docs/api/graph/panning) | `boolean \| PanningManager.Options` |  | Whether the canvas can be panned, defaults to disabled. | `false` |
+| [mousewheel](/en/docs/api/graph/mousewheel) | `boolean \| MouseWheel.Options` |  | Whether the mouse wheel can zoom, defaults to disabled. | `false` |
+| [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` |
+| [background](/en/docs/api/graph/background) | `false \| BackgroundManager.Options` |  | The background, defaults to not drawing the background. | `false` |
+| [translating](/en/docs/api/interacting/interaction#moving-range) | `Translating.Options` |  | Restricts node movement. | `{ restrict: false }` |
+| [embedding](/en/docs/api/interacting/interaction#embedding) | `boolean \| Embedding.Options` |  | Whether to enable nested nodes, defaults to disabled. | `false` |
+| [connecting](/en/docs/api/interacting/interaction#connecting) | `Connecting.Options` |  | The connection options. | `{ snap: false, ... }` |
+| [highlighting](/en/docs/api/interacting/interaction#highlighting) | `Highlighting.Options` |  | The highlighting options. | `{...}` |
+| [interacting](/en/docs/api/interacting/interaction#restrictions) | `Interacting.Options` |  | Customizes the interaction behavior of nodes and edges. | `{ edgeLabelMovable: false }` |
+| [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` |
+| [moveThreshold](/en/docs/api/graph/view#movethreshold) | `number` |  | The number of times the mouse can move before triggering a `mousemove` event. | `0` |
+| [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` |
+| [preventDefaultContextMenu](/en/docs/api/graph/view#preventdefaultcontextmenu) | `boolean` |  | Whether to disable the browser's default right-click menu. | `true` |
+| [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` |
+| [async](/en/docs/api/graph/view#async) | `boolean` |  | Whether to render asynchronously. | `true` |
+| [virtual](/en/docs/api/graph/view#virtual) | `boolean` |  | Whether to only render the visible area of the canvas. | `false` |
+| [onPortRendered](/en/docs/api/graph/view#onportrendered) | `(args: OnPortRenderedArgs) => void` |  | The callback triggered when a port is rendered. | - |
+| [onEdgeLabelRendered](/en/docs/api/graph/view#onedgelabelrendered) | `(args: OnEdgeLabelRenderedArgs) => void` |  | The callback triggered when an edge label is rendered. | - |
+| [createCellView](/en/docs/api/graph/view#createcellview) | `(cell: Cell) => CellView \| null \| undefined` |  | Customizes the view of a cell. | - |