From 351c806d1b349cddcb4b337a79592d0cd47ef0b5 Mon Sep 17 00:00:00 2001 From: gongxh Date: Fri, 9 May 2025 19:18:29 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=A7=E5=88=B6=E5=99=A8?= =?UTF-8?q?=E5=92=8C=E5=8A=A8=E7=94=BB=E8=A3=85=E9=A5=B0=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 ++ docs/UI.md | 14 ++++++++++++++ package.json | 2 +- src/ui/PropsHelper.ts | 44 +++++++++++++++++++++++++++++++++++++++++++ src/ui/UIDecorator.ts | 39 +++++++++++++++++++++++++++++++++++++- 5 files changed, 99 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5ec9d7..eaa88c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,3 +14,5 @@ - 修改资源加载器，自定义加载批次，支持按加载批次释放资源，详情见 [资源管理](./docs/Asset.md) ## 1.0.32 - 修复热更新manifest文件cdn缓存导致检测不到更新的问题 +## 1.0.33 +- UI模块添加fgui控制器和动画装饰器，详情见 [UI模块](./docs/UI.md) diff --git a/docs/UI.md b/docs/UI.md index 44b00bb..9bb75ee 100644 --- a/docs/UI.md +++ b/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. 新建窗口类 diff --git a/package.json b/package.json index 5eb9b57..3b5d02e 100644 --- a/package.json +++ b/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", diff --git a/src/ui/PropsHelper.ts b/src/ui/PropsHelper.ts index 3639b0e..b418403 100644 --- a/src/ui/PropsHelper.ts +++ b/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; + } + } } diff --git a/src/ui/UIDecorator.ts b/src/ui/UIDecorator.ts index 67e3f8d..9536a22 100644 --- a/src/ui/UIDecorator.ts +++ b/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; /** 方法 */ callbacks: Record; + /** 控制器 */ + controls: Record; + /** 动画 */ + transitions: Record; } /** @@ -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 实例成员的类的原型