chore: add docs for ui component

packages/site/docs/.vitepress/config/en.js

@@ -98,6 +98,14 @@ export const en = defineConfig({
             text: 'Camera',
             link: 'camera',
           },
+          {
+            text: 'UI',
+            link: 'ui',
+          },
+          {
+            text: 'Image exporter',
+            link: 'image-exporter',
+          },
           {
             text: 'Shape',
             items: [

packages/site/docs/.vitepress/config/zh.js

@@ -67,10 +67,18 @@ export const zh = defineConfig({
             text: '画布',
             link: 'canvas',
           },
+          {
+            text: 'UI 组件',
+            link: 'ui',
+          },
           {
             text: '相机',
             link: 'camera',
           },
+          {
+            text: '图片导出器',
+            link: 'image-exporter',
+          },
           {
             text: '图形',
             items: [

packages/site/docs/.vitepress/theme/index.js

@@ -1,6 +1,5 @@
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme';
-import '@shoelace-style/shoelace/dist/themes/light.css';
 import './custom.css';
 import Layout from 'genji-theme-vitepress';
 import { h } from 'vue';
@@ -78,24 +77,11 @@ const props = {
     Stats,
     Core,
     UI,
-    GUI
+    GUI,
   },
 };
 
 export default {
   extends: DefaultTheme,
   Layout: () => h(Layout, props),
-  async enhanceApp({ app }) {
-    // @see https://vitepress.dev/guide/ssr-compat#conditional-import
-    if (!import.meta.env.SSR) {
-      // @see https://shoelace.style/tutorials/integrating-with-nextjs/#defining-custom-elements
-      const { setBasePath } = await import(
-        '@shoelace-style/shoelace/dist/utilities/base-path'
-      );
-      setBasePath(
-        'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/',
-      );
-      await import('@shoelace-style/shoelace');
-    }
-  },
 };

packages/site/docs/reference/camera.md

@@ -3,6 +3,23 @@ outline: deep
 publish: false
 ---
 
+See [Lesson 4 - Camera] for more information.
+
+Import the `Camera` class from `@infinite-canvas-tutorial/core`.
+
+```ts
+import { Camera } from '@infinite-canvas-tutorial/core';
+const camera = new Camera(100, 100);
+```
+
+Or get it from the already created [Canvas]:
+
+```ts
+const camera = canvas.camera;
+```
+
+## constructor
+
 ## projectionMatrix
 
 ## viewMatrix
@@ -34,3 +51,6 @@ publish: false
 ## viewport2Canvas
 
 ## canvas2Viewport
+
+[Lesson 4 - Camera]: /guide/lesson-004
+[Canvas]: /reference/canvas

packages/site/docs/reference/canvas.md

@@ -3,11 +3,18 @@ outline: deep
 publish: false
 ---
 
+Import the `Canvas` class from `@infinite-canvas-tutorial/core`.
+
+```ts
+import { Canvas } from '@infinite-canvas-tutorial/core';
+const canvas = new Canvas({});
+```
+
 ## constructor
 
 ```ts
 export interface CanvasConfig {
-    canvas: HTMLCanvasElement;
+    canvas: HTMLCanvasElement | OffscreenCanvas;
     renderer?: 'webgl' | 'webgpu';
     shaderCompilerPath?: string;
     devicePixelRatio?: number;
@@ -16,6 +23,10 @@ export interface CanvasConfig {
 }
 ```
 
+## canvas
+
+In the browser environment, pass in `HTMLCanvasElement`, in the WebWorker environment, pass in `OffscreenCanvas`, and in the Node.js environment, you can use `node-canvas`.
+
 ## render
 
 Creates an animation loop for rendering the canvas.

packages/site/docs/reference/image-exporter.md

@@ -0,0 +1,81 @@
+---
+outline: deep
+publish: false
+---
+
+See [Lesson 10 - Importing and Exporting Images] for more information.
+
+```ts
+import { ImageExporter } from '@infinite-canvas-tutorial/core';
+const exporter = new ImageExporter({ canvas });
+```
+
+## constructor
+
+-   Required parameter `canvas`, the [Canvas] instance.
+-   Optional parameter `defaultFilename`, default value is `g`.
+
+```ts
+export interface ImageExporterOptions {
+    canvas: Canvas;
+    defaultFilename?: string;
+}
+```
+
+## toCanvas
+
+Returns an `HTMLCanvasElement`, which can be called [toDataURL] later.
+
+```ts
+const canvas = await exporter.toCanvas();
+canvas.toDataURL(); // data:image/png;base64,...
+```
+
+The meaning of each configuration item is as follows:
+
+-   `grid` Whether to include a grid
+-   `beforeDrawImage` Called before drawing the content of the canvas, suitable for drawing the background color.
+-   `afterDrawImage` Called after drawing the content of the canvas, suitable for drawing watermarks.
+
+```ts
+export interface CanvasOptions {
+    grid: boolean;
+    beforeDrawImage: (context: CanvasRenderingContext2D) => void;
+    afterDrawImage: (context: CanvasRenderingContext2D) => void;
+}
+```
+
+## toSVG
+
+Generate an SVGElement. The `grid` parameter indicates whether to display the grid.
+
+```ts
+export interface SVGOptions {
+    grid: boolean;
+}
+```
+
+## toSVGDataURL
+
+Generate an SVG's `dataURL`. The `grid` parameter indicates whether to display the grid.
+
+```ts
+export interface SVGOptions {
+    grid: boolean;
+}
+```
+
+## downloadImage
+
+Triggers the browser's download behavior.
+
+```ts
+export interface DownloadImageOptions {
+    dataURL: string;
+    name?: string;
+}
+```
+
+[Lesson 10 - Importing and Exporting Images]: /guide/lesson-010
+[Canvas]: /reference/canvas
+[toDataURL]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

packages/site/docs/reference/ui.md

@@ -0,0 +1,46 @@
+---
+outline: deep
+publish: false
+---
+
+Our canvas includes UI components implemented using Web Components.
+
+```ts
+import '@infinite-canvas-tutorial/ui';
+```
+
+Use this component in HTML:
+
+```html
+<ic-canvas renderer="webgpu"></ic-canvas>
+```
+
+`<ic-canvas>` component supports the following properties, all of which are strings.
+
+## renderer
+
+Support `webgpu` and `webgl` renderers, default to `webgl`.
+
+```html
+<ic-canvas renderer="webgpu"></ic-canvas>
+```
+
+## shaderCompilerPath
+
+Specify the path of the WebGPU shader compiler, which compiles GLSL to WGSL. The default value is `https://unpkg.com/@antv/g-device-api@1.6.8/dist/pkg/glsl_wgsl_compiler_bg.wasm`
+
+## shoelaceBasePath
+
+Our UI components use the Shoelace component library, which specifies the CDN path of Shoelace. The default value is `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn`
+
+## zoom
+
+The zoom level of the canvas, default to `100`.
+
+## mode
+
+The interaction mode of the canvas, default to `CanvasMode.HAND`.
+
+## modes
+
+The interaction mode of the canvas, default to `[CanvasMode.HAND, CanvasMode.SELECT, CanvasMode.DRAW_RECT]`.

packages/site/docs/zh/guide/lesson-017.md

@@ -46,6 +46,8 @@ interface CRDT<T, S> {
 
 ### 数据结构设计
 
+参考 [dgmjs-plugin-yjs]
+
 ## 扩展阅读 {#extended-reading}
 
 -   [Learn Yjs]
@@ -60,6 +62,7 @@ interface CRDT<T, S> {
 -   [An Interactive Intro to CRDTs]
 -   [Building a Collaborative Pixel Art Editor with CRDTs]
 -   [Making CRDTs 98% More Efficient]
+-   [dgmjs-plugin-yjs]
 
 [Movable tree CRDTs and Loro's implementation]: https://news.ycombinator.com/item?id=41099901
 [CRDTs: The Hard Parts]: https://www.youtube.com/watch?v=x7drE24geUw
@@ -77,3 +80,4 @@ interface CRDT<T, S> {
 [Building a Collaborative Pixel Art Editor with CRDTs]: https://jakelazaroff.com/words/building-a-collaborative-pixel-art-editor-with-crdts/
 [Making CRDTs 98% More Efficient]: https://jakelazaroff.com/words/making-crdts-98-percent-more-efficient/
 [Learn Yjs]: https://learn.yjs.dev/
+[dgmjs-plugin-yjs]: https://github.com/dgmjs/dgmjs/tree/main/packages/dgmjs-plugin-yjs

packages/site/docs/zh/reference/camera.md

@@ -3,6 +3,23 @@ outline: deep
 publish: false
 ---
 
+关于相机的相关内容可以参考：[课程 4 - 相机]。
+
+从 `@infinite-canvas-tutorial/core` 中导入 `Camera` 类并创建。
+
+```ts
+import { Camera } from '@infinite-canvas-tutorial/core';
+const camera = new Camera(100, 100);
+```
+
+或者从已经创建的[画布]中获取：
+
+```ts
+const camera = canvas.camera;
+```
+
+## constructor
+
 ## projectionMatrix
 
 ## viewMatrix
@@ -34,3 +51,6 @@ publish: false
 ## viewport2Canvas
 
 ## canvas2Viewport
+
+[课程 4 - 相机]: /zh/guide/lesson-004
+[画布]: /zh/reference/canvas

packages/site/docs/zh/reference/canvas.md

@@ -3,11 +3,20 @@ outline: deep
 publish: false
 ---
 
+从 `@infinite-canvas-tutorial/core` 中导入 `Canvas` 类。
+
+```ts
+import { Canvas } from '@infinite-canvas-tutorial/core';
+const canvas = new Canvas({});
+```
+
 ## constructor
 
+Canvas 的构造函数参数：
+
 ```ts
 export interface CanvasConfig {
-    canvas: HTMLCanvasElement;
+    canvas: HTMLCanvasElement | OffscreenCanvas;
     renderer?: 'webgl' | 'webgpu';
     shaderCompilerPath?: string;
     devicePixelRatio?: number;
@@ -16,6 +25,10 @@ export interface CanvasConfig {
 }
 ```
 
+## canvas
+
+在浏览器环境传入 `HTMLCanvasElement`，在 WebWorker 环境传入 `OffscreenCanvas`，在 Node.js 环境可以使用 `node-canvas`。
+
 ## render
 
 手动创建一个动画循环不断调用 `render` 方法。