添加控制器和动画装饰器

CHANGELOG.md

@@ -14,3 +14,5 @@
 - 修改资源加载器，自定义加载批次，支持按加载批次释放资源，详情见 [资源管理](./docs/Asset.md)
 ## 1.0.32
 - 修复热更新manifest文件cdn缓存导致检测不到更新的问题
+## 1.0.33
+- UI模块添加fgui控制器和动画装饰器，详情见 [UI模块](./docs/UI.md)

docs/UI.md

@@ -112,7 +112,21 @@
    }
    ```
    
+6. 控制器和动画装饰器
 
+   ```typescript
+   import { Window, _uidecorator } from 'kunpocc';
+   const { uiclass, uiprop, uiclick, uicontrol, uitransition } = _uidecorator;
+   
+   @uiclass("Window", "Home", "MyWindow")
+   export class MyWindow extends Window {
+       // FairyGUI 组件属性装饰器
+       @uicontrol private control: Controller;
+       @uitransition private transition: Transition;
+   }
+   ```
+
+   
 #### *三、创建窗口*
 
 1. 新建窗口类

package.json

@@ -1,6 +1,6 @@
 {
     "name": "kunpocc",
-    "version": "1.0.32",
+    "version": "1.0.33",
     "description": "基于creator3.0+的kunpocc库",
     "main": "./dist/kunpocc.cjs",
     "module": "./dist/kunpocc.mjs",

src/ui/PropsHelper.ts

@@ -14,6 +14,8 @@ interface IPropsConfig {
 interface IPropsInfo {
     props: (string | number)[];
     callbacks: (string | number)[];
+    controls: string[];
+    transitions: string[];
 }
 
 /** @internal */
@@ -46,6 +48,14 @@ export class PropsHelper {
         // 设置回调
         const callbacks = propsInfo.callbacks;
         this.serializationCallbacksNode(component, callbacks);
+
+        // 设置控制器
+        const controls = propsInfo.controls;
+        this.serializationControlsNode(component, controls);
+
+        // 设置动画
+        const transitions = propsInfo.transitions;
+        this.serializationTransitionsNode(component, transitions);
     }
 
     /** 给界面中定义的属性赋值 @internal */
@@ -89,5 +99,39 @@ export class PropsHelper {
             }
         }
     }
+
+    /** 给界面中定义的控制器赋值 @internal */
+    private static serializationControlsNode(component: GComponent, controls: string[]) {
+        const controlsCount = controls.length;
+        let index = 0;
+        while (index < controlsCount) {
+            const propName = controls[index] as string;
+            const controlName = controls[index + 1] as string;
+            const controller = component.getController(controlName);
+            if (!controller) {
+                warn(`无法对UI类（${component.name}）的（${propName}）设置控制器，请检查配置是否正确`);
+                break;
+            }
+            (component as any)[propName] = controller;
+            index += 2;
+        }
+    }
+
+    /** 给界面中定义的动画赋值 @internal */
+    private static serializationTransitionsNode(component: GComponent, transitions: string[]) {
+        const transitionsCount = transitions.length;
+        let index = 0;
+        while (index < transitionsCount) {
+            const propName = transitions[index] as string;
+            const transitionName = transitions[index + 1] as string;
+            const transition = component.getTransition(transitionName);
+            if (!transition) {
+                warn(`无法对UI类（${component.name}）的（${propName}）设置动画，请检查配置是否正确`);
+                break;
+            }
+            (component as any)[propName] = transition;
+            index += 2;
+        }
+    }
 }
 

src/ui/UIDecorator.ts

@@ -10,7 +10,10 @@ export namespace _uidecorator {
     const UIPropMeta = "__uipropmeta__"
     /** @internal */
     const UICBMeta = "__uicbmeta__"
-
+    /** @internal */
+    const UIControlMeta = "__uicontrolmeta__"
+    /** @internal */
+    const UITransitionMeta = "__uitransitionmeta__"
 
     interface IUIInfoBase {
         /** 构造函数 */
@@ -19,6 +22,10 @@ export namespace _uidecorator {
         props: Record<string, 1>;
         /** 方法 */
         callbacks: Record<string, Function>;
+        /** 控制器 */
+        controls: Record<string, 1>;
+        /** 动画 */
+        transitions: Record<string, 1>;
     }
 
     /**
@@ -58,6 +65,8 @@ export namespace _uidecorator {
                 ctor: ctor,
                 props: ctor[UIPropMeta] || null,
                 callbacks: ctor[UICBMeta] || null,
+                controls: ctor[UIControlMeta] || null,
+                transitions: ctor[UITransitionMeta] || null,
                 res: {
                     group: groupName,
                     pkg: pkgName,
@@ -100,6 +109,8 @@ export namespace _uidecorator {
                 ctor: ctor,
                 props: ctor[UIPropMeta] || null,
                 callbacks: ctor[UICBMeta] || null,
+                controls: ctor[UIControlMeta] || null,
+                transitions: ctor[UITransitionMeta] || null,
                 res: {
                     pkg: pkg,
                     name: name,
@@ -138,6 +149,8 @@ export namespace _uidecorator {
                 ctor: ctor,
                 props: ctor[UIPropMeta] || null,
                 callbacks: ctor[UICBMeta] || null,
+                controls: ctor[UIControlMeta] || null,
+                transitions: ctor[UITransitionMeta] || null,
                 res: {
                     pkg: pkg,
                     name: name,
@@ -158,6 +171,30 @@ export namespace _uidecorator {
         ObjectHelper.getObjectProp(target.constructor, UIPropMeta)[name] = 1;
     }
 
+    /**
+     * UI控制器装饰器
+     * @param {Object} target 实例成员的类的原型
+     * @param {string} name 属性名
+     * 
+     * example: @uicontrol node: GObject
+     */
+    export function uicontrol(target: Object, name: string): any {
+        // debug("属性装饰器:", target.constructor, name);
+        ObjectHelper.getObjectProp(target.constructor, UIControlMeta)[name] = 1;
+    }
+
+    /**
+     * UI动画装饰器
+     * @param {Object} target 实例成员的类的原型
+     * @param {string} name 属性名
+     * 
+     * example: @uitransition node: GObject
+     */
+    export function uitransition(target: Object, name: string): any {
+        // debug("属性装饰器:", target.constructor, name);
+        ObjectHelper.getObjectProp(target.constructor, UITransitionMeta)[name] = 1;
+    }
+
     /**
      * 方法装饰器 (给点击事件用)
      * @param {Object} target 实例成员的类的原型