FairyGUI Puerts component tool

fairygui-puerts-example.ts

import { FairyGUI } from "csharp";
import View, { Bind, Component } from "../common/fairygui";

// ${pakageName/componentName}
@Component("home/HomePage")
export class LandPage extends View {

    @Bind//使用跟编辑器里相同的名字进行绑定普通组件
    public nameTxt:FairyGUI.GLabel
    //@Trans 绑定特效

    static get inst() {
        if (LandPage._inst == null) LandPage._inst = new LandPage();
        return LandPage._inst as LandPage;
    }

    attach(){
        console.log("landing page attach")
        this.nameTxt.text = "Good"
    }

    open(){
        console.log("open landing page")
    }
}
//you can call
//LandingPage.inst.open()
// or new LandingPage() , component will add to Groot when class instantiation

fairygui.ts

import { FairyGUI, UnityEngine } from 'csharp'

const { Vector2 } = UnityEngine
export const createObject = FairyGUI.UIPackage.CreateObject
interface BindArgs {
    view: string,
    route?: string
}
const PageMap: Map<string, any> = new Map();
export const loadPackage = (packageName, callBack) => {
    FairyGUI.UIPackage.AddPackage(`FairyGUI/${packageName}`);
    callBack()
};
export const Component = (args: string | BindArgs) => {
    let path, route;
    if (typeof args == "string") {
        path = args;
    } else {
        ({ view: path, route } = args);
    }
    return function (target) {
        let { packageName, page } = View.resolve(path);
        let parent = Object.getPrototypeOf(target);
        let proto = target.prototype;
        route && PageMap.set(route, target);
        // 界面和弹窗处理
        let load
        if (parent == View) {
            load = function () {
                this.page = page;
                this.packageName = packageName;
                loadPackage(packageName, this.onUILoaded);
            }
        } else {
            load = function () {
                this.page = page;
                this.packageName = packageName;
                let loadOpts = { fileName: `${path}`, loaded: false, Load: loadFunc };
                let ctx: Dialog = this
                function loadFunc(callBack) {
                    loadPackage(packageName, () => {
                        loadOpts.loaded = true;
                        callBack.call(ctx);
                        ctx.attach()
                    });
                }
                ctx.AddUISource(loadOpts);
            }
        }
        proto.load = load
    }
}

// 获取组件
export const Bind = (target: any, propertyKey: string, descriptor?: PropertyDescriptor) => {
    let privateKey = '_' + propertyKey;
    if (!descriptor) {
        Object.defineProperty(target, propertyKey, {
            configurable: true,
            set: function (value: any) {
                this[privateKey] = value;
            },
            get: function () {
                if (!this[privateKey]) {
                    let c = this.getChild(propertyKey)
                    this[privateKey] = c
                }
                return this[privateKey];
            },
        });
    }
}
// 获取特效
export const Trans = (target: any, propertyKey: string, descriptor?: PropertyDescriptor) => {
    let privateKey = '_' + propertyKey;
    if (!descriptor) {
        Object.defineProperty(target, propertyKey, {
            configurable: true,
            set: function (value: any) {
                this[privateKey] = value;
            },
            get: function () {
                if (!this[privateKey]) {
                    let c = this.view.getTransition(propertyKey)
                    if (!c) return null
                    this[privateKey] = c
                }
                return this[privateKey];
            },
        });
    }
}

// 页面基类
export default class View {

    static _inst: View;

    // 页面
    private _view: FairyGUI.GComponent;
    // 控制器
    _ctrl: FairyGUI.Controller;

    loadCall: Function;
    private packageName: string;
    private page: string;
    private ctrlName: string;
    // 装饰器覆写
    // private readonly load

    static resolve(path: string) {
        if (path.indexOf('/') < 0) throw Error('invalided path:' + path);
        let [packageName, page] = path.split('/');
        return {
            page,
            packageName,
        };
    }

    constructor() {
        this['load']()
    }

    get asCom() {
        return this._view
    }

    get view() {
        return this._view
    }

    set view(v) {
        this._view = v
    }

    get ctrl() {
        return this._ctrl
    }

    set ctrl(v) {
        this._ctrl = v
    }

    attach() { }

    onUILoaded = () => {
        this.view = createObject(this.packageName, this.page).asCom;
        this.view.MakeFullScreen();
        FairyGUI.GRoot.inst.AddChild(this.view);
        this.setupController();
        this.attach();
        this.loadCall && this.loadCall()
    }

    setupController() {
        this.ctrl = this.view.GetController(this.ctrlName || 'ctrl');
    }

    getChild(name: string) {
        if (!this.view) return null
        return this.view.GetChild(name);
    }

    blur() {
    }
    clearBlur() {
    }

    dispose() {
        this.view.Dispose();
    }
}

// 带有动画弹窗
export class Dialog extends FairyGUI.Window {
    // 页面
    _view: FairyGUI.GComponent;
    // 控制器
    _ctrl: FairyGUI.Controller;

    loadCall: Function;

    private packageName: string;
    private page: string;
    private ctrlName: string;

    // 装饰器覆写
    private readonly load: Function

    constructor() {
        super();
        this.load()
    }

    get view() {
        return this._view
    }

    set view(v) {
        this._view = v
    }

    get ctrl() {
        return this._ctrl
    }

    set ctrl(v) {
        this._ctrl = v
    }

    attach() { }

    onInit() {
        const { packageName, page } = this;
        this.view = createObject(packageName, page).asCom;
        this.contentPane = this._view;
        this.view.MakeFullScreen();
        this.SetPivot(0.5, 0.5);
    }

    protected doShowAnimation(): void {
        this.SetScale(0.9, 0.9);
        FairyGUI.GTween.To(new Vector2(0.9, 0.9), Vector2.one, 0.2)
            .SetTarget(this, FairyGUI.TweenPropType.Scale)
            .SetEase(FairyGUI.EaseType.QuadOut)
            .OnComplete(this.onShown);
    }

    onShown = () => {
    }

    onHide() {
    }

    setupController() {
        this.ctrl = this.view.GetController(this.ctrlName || 'ctrl');
    }

    getChild(name: string) {
        return this.view.GetChild(name);
    }

}