Feat/editor

.gitignore

@@ -35,4 +35,6 @@ stats.html
 vite-test/dist
 examples/spine38.html
 examples/loader.html
-package-lock.json
+package-lock.json
+
+pnpm-lock.yaml

Makefile

@@ -0,0 +1,15 @@
+clean: 
+	@lerna clean
+
+install:
+	@npm install --force
+	@lerna bootstrap
+
+build: clean install
+	@npm run build spine-base -- --types
+	@npm run build -- --types
+
+link:
+	@node scripts/link.js
+
+all: build link

examples/src/addChildAt.ts

@@ -0,0 +1,56 @@
+import { RendererSystem } from "@eva/plugin-renderer";
+import { Game, GameObject, RESOURCE_TYPE, resource } from "@eva/eva.js"
+import { Img, ImgSystem } from "@eva/plugin-renderer-img";
+export const name = 'image';
+export async function init(canvas) {
+  resource.addResource([
+    {
+      name: 'imageName',
+      type: RESOURCE_TYPE.IMAGE,
+      src: {
+        image: {
+          type: 'png',
+          url: 'https://gw.alicdn.com/tfs/TB1DNzoOvb2gK0jSZK9XXaEgFXa-658-1152.webp',
+        },
+      },
+      preload: true,
+    },
+  ]);
+  const game = new Game({
+    systems: [
+      new RendererSystem({
+        canvas,
+        width: 750,
+        height: 1000,
+      }),
+      new ImgSystem(),
+    ],
+  });
+
+
+
+  window.test = (index: number) => {
+
+    const image = new GameObject('image', {
+      size: { width: 500, height: 500 },
+      origin: { x: 0, y: 0 },
+      position: {
+        x: Math.random() * 650,
+        y: Math.random() * 800,
+      },
+      anchor: {
+        x: 0,
+        y: 0,
+      },
+    });
+
+    image.addComponent(
+      new Img({
+        resource: 'imageName',
+      }),
+    );
+
+    game.scene.addChildAt(image, index);
+
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.2.7",
+  "version": "1.2.7-editor.12",
   "workspace": "packages",
   "name": "eva.js",
   "scripts": {
@@ -65,6 +65,7 @@
     "lerna": "^3.22.1",
     "minimist": "^1.2.5",
     "prettier": "^2.2.1",
+    "reflect-metadata": "^0.1.13",
     "reset.css": "^2.0.2",
     "rollup": "^2.40.0",
     "rollup-plugin-inject": "^3.0.2",

packages/eva.js/__tests__/decorators.spec.ts

@@ -1,26 +1,19 @@
-import { type } from '@eva/inspector-decorator'
-import {decorators, System} from '../lib';
+import { Field, getPropertiesOf } from '@eva/inspector-decorator';
+import { decorators, System } from '../lib';
 
-const {componentObserver} = decorators;
+const { componentObserver } = decorators;
 
 describe('decorators', () => {
   it('ide decorator should collect props', () => {
     class Test {
-      static IDEProps: any = {};
-
-      @type('string') public name: string = 'Test';
-      @type('size') public size: number[] = [10, 10];
+      @Field() public name: string = 'Test';
+      @Field(() => Number) public size: number[] = [10, 10];
     }
-    expect(Test.IDEProps).toEqual({
-      name: {
-        key: 'name',
-        type: 'string'
-      },
-      size: {
-        key: 'size',
-        type: 'size'
-      }
-    });
+    const attrs = getPropertiesOf(Test);
+    expect(attrs.children[0].type).toBe('string');
+    expect(attrs.children[0].isArray).toBe(false);
+    expect(attrs.children[1].type).toBe('number');
+    expect(attrs.children[1].isArray).toBe(true);
   });
 
   it('class use component observer decorator', () => {

packages/eva.js/lib/core/GameObject.ts

@@ -112,6 +112,24 @@ class GameObject {
     gameObject.scene = this.scene;
   }
 
+  /**
+   *
+   * @param gameObject Child GameObject
+   * @param index Add to index in children
+   */
+  addChildAt(gameObject: GameObject, index: number) {
+    if (index > this.transform.children.length) {
+      throw new Error(
+        gameObject.name + 'addChildAt: The index 18 supplied is out of bounds ' + this.transform.children.length,
+      );
+    }
+    gameObject.transform.childIndex = index;
+    this.addChild(gameObject);
+    // packages/eva.js/lib/core/GameObject.ts > addChildAt
+    // packages/plugin-renderer/lib/Transform.ts > change
+    // packages/eva.js/lib/core/Transform.ts > addChild
+  }
+
   /**
    * Remove child gameObject
    * @param gameObject - child gameobject
@@ -135,7 +153,7 @@ class GameObject {
   addComponent<T extends Component<ComponentParams>>(C: T): T;
   addComponent<T extends Component<ComponentParams>>(C: ComponentConstructor<T>, obj?: ComponentParams): T;
   addComponent<T extends Component<ComponentParams>>(C: T | ComponentConstructor<T>, obj?: ComponentParams): T {
-    if (this.destroyed) return
+    if (this.destroyed) return;
     const componentName = getComponentName(C);
     if (this._componentCache[componentName]) return;
 
@@ -238,8 +256,8 @@ class GameObject {
   /** Destory this gameObject */
   destroy() {
     if (!this.transform) {
-      console.error('Cannot destroy gameObject that have already been destroyed.')
-      return
+      console.error('Cannot destroy gameObject that have already been destroyed.');
+      return;
     }
     Array.from(this.transform.children).forEach(({ gameObject }) => {
       gameObject.destroy();
@@ -250,7 +268,7 @@ class GameObject {
       this._removeComponent(key);
     }
     this.components.length = 0;
-    this.destroyed = true
+    this.destroyed = true;
   }
 }
 

packages/eva.js/lib/core/Transform.ts

@@ -1,4 +1,4 @@
-import {type, step} from '@eva/inspector-decorator';
+import { Field } from '@eva/inspector-decorator';
 import Component from './Component';
 import type { ComponentParams } from './Component';
 
@@ -10,9 +10,6 @@ interface Vector2 {
   y: number;
 }
 
-/**
- * Two dimensional size
- */
 interface Size2 {
   width: number;
   height: number;
@@ -56,6 +53,9 @@ class Transform extends Component<TransformParams> {
   readonly name: string = 'Transform';
   private _parent: Transform = null;
 
+  /** only used in addChildAt */
+  childIndex: number = -1;
+
   /** Whether this transform in a scene object */
   inScene: boolean = false;
 
@@ -77,13 +77,18 @@ class Transform extends Component<TransformParams> {
     this.rotation = params.rotation || this.rotation;
   }
 
-  @type('vector2') @step(1) position: Vector2 = {x: 0, y: 0};
-  @type('size') @step(1) size: Size2 = {width: 0, height: 0};
-  @type('vector2') @step(0.1) origin: Vector2 = {x: 0, y: 0};
-  @type('vector2') @step(0.1) anchor: Vector2 = {x: 0, y: 0};
-  @type('vector2') @step(0.1) scale: Vector2 = {x: 1, y: 1};
-  @type('vector2') @step(0.1) skew: Vector2 = {x: 0, y: 0};
-  @type('number') @step(0.1) rotation: number = 0;
+  @Field({ type: 'vector2', step: 0.01 }) position = { x: 0, y: 0 };
+  @Field({
+    type: 'size2',
+    step: 0.01,
+    min: 0,
+  })
+  size: Size2 = { width: 0, height: 0 };
+  @Field({ type: 'vector2', step: 0.01 }) origin: Vector2 = { x: 0, y: 0 };
+  @Field({ type: 'vector2', step: 0.01 }) anchor: Vector2 = { x: 0, y: 0 };
+  @Field({ type: 'vector2', bindable: true, step: 0.01, min: 0 }) scale: Vector2 = { x: 1, y: 1 };
+  @Field({ type: 'vector2', step: 0.01 }) skew: Vector2 = { x: 0, y: 0 };
+  @Field({ step: 0.01 }) rotation: number = 0;
 
   set parent(val: Transform) {
     if (val) {
@@ -108,14 +113,18 @@ class Transform extends Component<TransformParams> {
    * @param child - child gameObject's transform component
    */
   addChild(child: Transform) {
-    if (child.parent === this) {
-      const index = this.children.findIndex(item => item === child);
-      this.children.splice(index, 1);
-    } else if (child.parent) {
+    if (child.parent) {
       child.parent.removeChild(child);
     }
     child._parent = this;
-    this.children.push(child);
+    if (child.childIndex > -1) {
+      // packages/eva.js/lib/core/GameObject.ts > addChildAt
+      // packages/plugin-renderer/lib/Transform.ts > change
+      // packages/eva.js/lib/core/Transform.ts > addChild
+      this.children.splice(child.childIndex, 0, child);
+    } else {
+      this.children.push(child);
+    }
   }
 
   /**