daily update

src/ui/uiManager.js

@@ -1,10 +1,13 @@
-class UIManager {
+import Views from './themes/views.js';
+export default class UIManager {
     constructor(stage) {
+        UIManager.#views = Views;
+
         if(!stage) {
             stage = Laya.stage;
         }
-
         this.#stage = stage;
+        this.#stage.bgColor = this.#configs.bgColor;
 
         stage.addChild(this.#viewLayer);
         this.#viewLayer.zOrder = 1;
@@ -27,6 +30,7 @@ class UIManager {
     }
 
     static #instance = {};
+    static #views;
     #stage;
     #loading;
     #currentView;
@@ -35,22 +39,39 @@ class UIManager {
     #popupLayer = new Laya.Panel();
     #viewMap = new Map();
     #class = new Map();
-    theme;
+    #theme = 'default';
 
+    static get inst() {
+        return this.getInstance();
+    }
     static getInstance(name="default") {
         return this.#instance[name] || (this.#instance[name] = new UIManager());
     }
 
+    static get pages() {
+        return this.#views.pages;
+    }
+
+    static get popups() {
+        return this.#views.popups;
+    }
+
+    static theme(theme, prop) {
+        return this.#views.themes[theme][prop];
+    }
+
     async setLoading(loading) {
-        const view = await this.getView(loading);
+        const className = this.#pages[loading];
+        const view = await this.getView(className, null, null, loading);
         view.top = view.bottom = view.left = view.right = 0;
         view.zOrder = 4;
         this.#loading = view;
     }
 
     async switchView(viewName, args, actions) {
+        const className = this.#pages[viewName];
         // get view instance
-        const view = await this.getView(viewName, args, actions?.load);
+        const view = await this.getView(className, args, actions?.load, viewName, 'pages');
 
         view.top = view.bottom = view.left = view.right = 0;
         // close current view
@@ -70,9 +91,9 @@ class UIManager {
         await view.show?.();
     }
 
-    async getView(viewName, args, preload) {
+    async getView(className, args, preload, viewName, type) {
         // check if view is already loaded
-        let view = await this.#viewMap.get(viewName);
+        let view = await this.#viewMap.get(className);
 
         if(this.#loading) {
             this.#stage.addChild(this.#loading);
@@ -81,7 +102,7 @@ class UIManager {
 
         if(!view) {
             // load view
-            const ViewClass = await this.loadView(viewName);
+            const ViewClass = await this.loadView(className);
             const resourceList = await ViewClass.load?.(args);
             const scanedResourceList = this.#loading? this.scanResource(ViewClass.uiView): [];
             if(preload) {
@@ -94,7 +115,7 @@ class UIManager {
             // create view
             view = new ViewClass();
             // add view to map
-            this.#viewMap.set(viewName, view);
+            this.#viewMap.set(className, view);
         } else {
             // load resource
             const resourceList = await view.constructor.load?.(args);
@@ -103,15 +124,16 @@ class UIManager {
 
         this.#loading?.removeSelf();
 
+        this.#config(view, viewName, type);
         // return view
         return view;
     }
 
-    async loadView(viewName) {
+    async loadView(className) {
         // load view
-        if(this.#class.has(viewName)) return this.#class.get(viewName);
-        const c = (await import(`./themes/${viewName}.js`)).default;
-        this.#class.set(viewName, c);
+        if(this.#class.has(className)) return this.#class.get(className);
+        const c = (await import(`./themes/${className}.js`)).default;
+        this.#class.set(className, c);
         return c;
     }
 
@@ -126,7 +148,8 @@ class UIManager {
     }
 
     async showDialog(dialogName, args, actions) {
-        const dialog = await this.getView(dialogName, args, actions?.load);
+        const className = this.#pages[dialogName];
+        const dialog = await this.getView(className, args, actions?.load, viewName, 'pages');
 
         dialog.init(args);
         this.#dialogLayer.addChild(dialog);
@@ -145,7 +168,8 @@ class UIManager {
     }
 
     async popup(type, args) {
-        const popup = await this.getView(type, args);
+        const className = this.#popups[type];
+        const popup = await this.getView(className, args, null, type, 'popups');
         this.#popupLayer.addChild(popup);
         await popup.popup(args, this.#popupLayer);
         this.#popupLayer.removeChild(popup);
@@ -155,6 +179,40 @@ class UIManager {
         this.#dialogLayer.removeChildren();
     }
 
+    #config(view, key, type) {
+        const config = this.#configs?.[type]?.[key];
+        if(!config) return;
+        if(view.config) return view.config(config);
+        const applyConfig = (target, config) => {
+            if(!target) return;
+            if(typeof config == 'string') {
+                config = this.#configs?.class?.[config];
+            }
+            for(const key in config) target[key] = config[key];
+        };
+
+        if(config.names)
+            for(const name in config.names)
+                this.#deepGetChildsByName(view, name)
+                    .forEach(child => applyConfig(child, config.names[name]));
+
+        if(config.vars)
+            for(const key in config.vars)
+                applyConfig(view[key], config.vars[key]);
+
+    }
+
+    #deepGetChildsByName(parent, name) {
+        const list = [];
+        if(!parent || !parent._childs) return list;
+
+        for(const child of parent._childs) {
+            if(child.name == name) list.push(child);
+            if(child._childs) list.push(...this.#deepGetChildsByName(child, name));
+        }
+        return list;
+    }
+
     #cutPath(path) {
         path = ''+path;
         let index = path.length;
@@ -216,4 +274,31 @@ class UIManager {
     get currentView() {
         return this.#currentView;
     }
+
+    get theme() {
+        return this.#theme;
+    }
+    set theme(value) {
+        this.#theme = value;
+        this.#stage.bgColor = this.#configs.bgColor;
+    }
+
+    get #pages() {
+        return UIManager.theme(this.#theme, 'pages');
+    }
+    get #popups() {
+        return UIManager.theme(this.#theme, 'popups');
+    }
+    get #configs() {
+        return UIManager.theme(this.#theme, 'configs');
+    }
+    get common() {
+        return this.#configs?.common;
+    }
+    gradeColor(grade) {
+        return this.common?.['grade'+grade];
+    }
+    gradeFilter(grade) {
+        return this.common?.['filter'+grade];
+    }
 }