feat: try to refactor ecs with becsy

Author: xiaoiver

README.md

@@ -94,8 +94,9 @@ pnpm run dev
 -   Drawing dots grid.
 -   Drawing wireframe for Geometry.
 
-<img src="./screenshots/lesson5.png" width="300" alt="Lesson 5 grids">
-<img src="./screenshots/lesson5-2.png" width="300" alt="Lesson 5 wireframe">
+|                Grid                |                 Wireframe                 |
+| :--------------------------------: | :---------------------------------------: |
+| ![Grid](./screenshots/lesson5.png) | ![Wireframe](./screenshots/lesson5-2.png) |
 
 ## Lesson 6 - Event system [🔗](https://infinitecanvas.cc/guide/lesson-006)
 
@@ -167,7 +168,9 @@ pnpm run dev
     -   Support `fillRule` property
 -   Draw some hand-drawn shapes
 
-<img src="./screenshots/lesson13.png" width="300" alt="Lesson 13 - path">
+|                Path and rough shapes                 |                 Fill rule                  |
+| :--------------------------------------------------: | :----------------------------------------: |
+| ![Path and rough shapes](./screenshots/lesson13.png) | ![Fill rule](./screenshots/lesson13-2.png) |
 
 ## Lesson 14 - Canvas mode and auxiliary UI [🔗](https://infinitecanvas.cc/guide/lesson-014)
 

README.zh_CN.md

@@ -94,8 +94,9 @@ pnpm run dev
 -   绘制点网格
 -   为 Geometry 绘制 wireframe
 
-<img src="./screenshots/lesson5.png" width="300" alt="Lesson 5 grids">
-<img src="./screenshots/lesson5-2.png" width="300" alt="Lesson 5 wireframe">
+|                Grid                |                 Wireframe                 |
+| :--------------------------------: | :---------------------------------------: |
+| ![Grid](./screenshots/lesson5.png) | ![Wireframe](./screenshots/lesson5-2.png) |
 
 ## 课程 6 - 事件系统 [🔗](https://infinitecanvas.cc/zh/guide/lesson-006)
 
@@ -167,7 +168,9 @@ pnpm run dev
     -   支持 `fillRule` 属性
 -   实现一些手绘风格图形
 
-<img src="./screenshots/lesson13.png" width="300" alt="Lesson 13 - path">
+|                Path and rough shapes                 |                 Fill rule                  |
+| :--------------------------------------------------: | :----------------------------------------: |
+| ![Path and rough shapes](./screenshots/lesson13.png) | ![Fill rule](./screenshots/lesson13-2.png) |
 
 ## 课程 14 - 画布模式 [🔗](https://infinitecanvas.cc/zh/guide/lesson-014)
 

packages/core/src/plugins/Painter.ts

@@ -143,9 +143,10 @@ export class Painter implements Plugin {
           fill: 'transparent',
           stroke: 'black',
           selectable: true,
+          sizeAttenuation: true,
         });
       }
-      this.#activePenLayer.appendChild(toPaint);
+      root.appendChild(toPaint);
     };
 
     const onMove = (state: PenState) => {
@@ -181,7 +182,7 @@ export class Painter implements Plugin {
       this.#cancelEvent.detail = state;
       root.dispatchEvent(this.#cancelEvent);
 
-      this.#activePenLayer.removeChild(toPaint);
+      root.removeChild(toPaint);
     };
 
     this.#pen.on(PenEvent.START, onStart);

packages/ecs/examples/main.ts

@@ -1,4 +1,15 @@
-import { App, Commands, Transform } from '../src';
+import {
+  App,
+  Entity,
+  Commands,
+  System,
+  StartUp,
+  Transform,
+  Parent,
+  Children,
+  DefaultPlugins,
+  GlobalTransform,
+} from '../src';
 
 const $canvas = document.getElementById('canvas') as HTMLCanvasElement;
 const resize = (width: number, height: number) => {
@@ -12,38 +23,45 @@ const resize = (width: number, height: number) => {
 };
 resize(window.innerWidth, window.innerHeight);
 
-let started = false;
+let parent_entity: Entity;
+let child_entity: Entity;
+let grandchild_entity: Entity;
+
+class StartUpSystem extends System {
+  commands = new Commands(this);
+
+  q = this.query(
+    (q) => q.using(Parent, Children, Transform, GlobalTransform).write,
+  );
+  q2 = this.query((q) => q.current.with(Parent).read);
+
+  initialize(): void {
+    const parent = this.commands.spawn(new Transform());
+    const child = this.commands.spawn(new Transform());
+    parent.addChild(child.id());
+
+    const grandchild = this.commands.spawn(new Transform());
+    child.addChild(grandchild.id());
+
+    parent_entity = parent.id().hold();
+    child_entity = child.id().hold();
+    grandchild_entity = grandchild.id().hold();
+    this.commands.execute();
+
+    parent_entity.write(Transform).scale.x = 2;
+    child_entity.write(Transform).scale.x = 3;
+  }
+
+  execute(): void {
+    // expect(parent_entity?.read(Parent).children).toBe([child_entity]);
+  }
+}
 
 const app = new App({
   canvas: $canvas,
 })
-  .addSystems(({ commands }) => {
-    if (started) return;
-    started = true;
-
-    const parent = commands.spawn(Transform);
-    const child = commands.spawn(Transform);
-    const grandChild = commands.spawn(Transform);
-    parent.appendChild(child);
-    child.appendChild(grandChild);
-
-    commands.execute();
-
-    parent.id().set(Transform, (transform) => {
-      transform.position.set(100, 100);
-      return transform;
-    });
-
-    console.log(parent.id().get(Transform)?.worldTransform);
-    console.log(child.id().get(Transform)?.worldTransform);
-    console.log(grandChild.id().get(Transform)?.worldTransform);
-    child.id().set(Transform, (transform) => {
-      transform.position.set(200, 200);
-      return transform;
-    });
-
-    child.removeChild(grandChild);
-  })
+  .addPlugins(...DefaultPlugins)
+  .addSystems(StartUp, StartUpSystem)
   .run();
 
 // window.addEventListener('resize', () => {

packages/ecs/package.json

@@ -38,17 +38,16 @@
   "dependencies": {
     "@antv/g-device-api": "^1.6.12",
     "@antv/util": "^3.3.10",
+    "@lastolivegames/becsy": "^0.16.0",
     "@loaders.gl/core": "^4.2.2",
     "@loaders.gl/images": "^4.2.2",
     "@pixi/math": "^7.4.2",
     "bezier-easing": "^2.1.0",
     "bidi-js": "^1.0.3",
     "d3-color": "^3.1.0",
-    "directed": "^0.1.6",
     "earcut": "^3.0.0",
     "eventemitter3": "^5.0.1",
     "gl-matrix": "^3.4.3",
-    "koota": "^0.2.2",
     "libtess": "^1.2.2",
     "potpack": "^2.0.0",
     "rbush": "^3.0.1",