chore: update dependency version

package.json

@@ -24,22 +24,22 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
-    "@types/node": "^22.7.7",
-    "@typescript-eslint/parser": "^8.10.0",
-    "eslint": "^9.13.0",
+    "@eslint/js": "^9.16.0",
+    "@types/node": "^22.10.1",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
     "eslint-plugin-i": "^2.29.1",
-    "eslint-plugin-n": "^17.11.1",
-    "eslint-plugin-regexp": "^2.6.0",
+    "eslint-plugin-n": "^17.14.0",
+    "eslint-plugin-regexp": "^2.7.0",
     "jscpd": "^4.0.5",
-    "prettier": "^3.3.3",
-    "terser": "^5.36.0",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9",
+    "prettier": "^3.4.2",
+    "terser": "^5.37.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.17.0",
+    "vite": "^5.4.11",
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "globals": "^15.11.0"
+    "globals": "^15.13.0"
   }
 }

packages/docs/cn/src/article/visual.md

@@ -114,6 +114,8 @@ class Container extends Vertex {
 }
 ```
 
+
+
 ## 四：基础图形的封装
 
 在多数二维绘图业务场景中，复杂图形往往可以简化为基础图形的组合。核心的基础元素包括圆形、多边形以及贝塞尔曲线，它们是实现图形构建的基本单位。
@@ -248,8 +250,18 @@ class Graphics extends Container {
   };
 }
 ```
+表示该图形是填充还是描边的。
+
+接下来是绘制各种基础图形了，绘制图形的时候，我们会将图形的绘制数据和绘制方法进行分离处理。可以理解为。
+
+1. 生成绘制图形的数据：`state`
+2. 执行绘制图形的方法：`action`
+
+`Graphics` 类作为绘制各种图形的容器，会接收`state`和`action`,生成真正即将要绘制的数据，最后通过`render`方法，统一遍历所有的数据。进行绘制到页面上。
+
+### 1.圆
 
-接下来是绘制各种基础图形了，先从最简单的圆形开始。`Graphics` 类事绘制各种图形的容器，因此所有的基础图形绘制方法都在 `Graphics` 类上。增加绘制圆形的方法：
+首先在 `Graphics` 类上实现绘制方法：
 
 ```ts
   /**

packages/ranuts/src/utils/visual/application.ts

@@ -13,8 +13,6 @@ export class Application {
     const { view = document.createElement('canvas') } = options || {};
     this.view = view;
     this.renderer = getRenderer(options);
-    // this.start();
-    // this.render();
   }
   public render = (): void => {
     this.renderer.render(this.stage);

packages/ranuts/src/utils/visual/render/index.ts

@@ -1,6 +1,6 @@
 import { RENDERER_TYPE } from '@/utils/visual/enums';
 import { CanvasRenderer } from '@/utils/visual/render/canvasRenderer';
-import { WebGLRenderer } from '@/utils/visual/render/webGLRenderer';
+import { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
 import type { Renderer } from '@/utils/visual/render/render';
 import type { IApplicationOptions } from '@/utils/visual/types';
 

packages/ranuts/src/utils/visual/render/render.ts

@@ -10,7 +10,7 @@ export abstract class Renderer {
   public canvasEle: HTMLCanvasElement;
   public screen = new Rectangle();
   constructor(options: IApplicationOptions) {
-    const { view } = options;
+    const { view = document.createElement('canvas') } = options;
     this.canvasEle = view;
     this.screen.width = view.width;
     this.screen.height = view.height;

packages/ranuts/src/utils/visual/vertex/container.ts

@@ -3,7 +3,7 @@ import { Transform } from '@/utils/visual/math';
 import { CONTAINER } from '@/utils/visual/enums';
 import type { CanvasRenderer } from '@/utils/visual/render/canvasRenderer';
 import type { Point } from '@/utils/visual/vertex/point';
-import type { WebGLRenderer } from '@/utils/visual/render/webGLRenderer';
+import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer';
 import type { BatchRenderer } from '@/utils/visual/render/batchRenderer';
 import type { Batch } from '@/utils/visual/render/utils/batch/index';