This commit is contained in:
dgflash
2025-08-16 10:30:20 +08:00
parent afced51c53
commit 0f41fb85b1
11 changed files with 239 additions and 264 deletions

View File

@@ -1,53 +0,0 @@
/*
* @Author: dgflash
* @Date: 2021-11-18 11:21:32
* @LastEditors: dgflash
* @LastEditTime: 2023-01-09 11:52:38
*/
import { Node } from "cc";
import { UIConfig } from "./UIConfig";
/*** 界面回调参数对象定义 */
export interface UICallbacks {
/**
* 节点添加到层级以后的回调
* @param node 当前界面节点
* @param params 外部传递参数
*/
onAdded?: (node: Node, params: any) => void,
/**
* 窗口节点 destroy 之后回调
* @param node 当前界面节点
* @param params 外部传递参数
*/
onRemoved?: (node: Node | null, params: any) => void,
/**
* 如果指定onBeforeRemoved则next必须调用否则节点不会被正常删除。
*
* 比如希望节点做一个FadeOut然后删除则可以在`onBeforeRemoved`当中播放action动画动画结束后调用next
* @param node 当前界面节点
* @param next 回调方法
*/
onBeforeRemove?: (node: Node, next: Function) => void,
/** 网络异常时,窗口加载失败回调 */
onLoadFailure?: () => void;
}
/** 本类型仅供gui模块内部使用请勿在功能逻辑中使用 */
export class ViewParams {
/** 界面唯一编号 */
uiid: string = null!;
/** 界面配置 */
config: UIConfig = null!;
/** 传递给打开界面的参数 */
params: any = null!;
/** 窗口事件 */
callbacks: UICallbacks = null!;
/** 是否在使用状态 */
valid: boolean = true;
/** 界面根节点 */
node: Node = null!;
}

View File

@@ -1,13 +0,0 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "82d3af5c-ef52-4490-8f79-777aac7079bc",
"files": [],
"subMetas": {},
"userData": {
"moduleId": "project:///assets/script/core/gui/layer/Defines.js",
"importerSettings": 4,
"simulateGlobals": []
}
}

View File

@@ -1,13 +0,0 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "d8f1f191-0fb7-41cc-8781-4a43a977f3f2",
"files": [],
"subMetas": {},
"userData": {
"moduleId": "project:///assets/script/core/gui/layer/DelegateComponent.js",
"importerSettings": 4,
"simulateGlobals": []
}
}

View File

@@ -5,8 +5,8 @@
* @LastEditTime: 2023-07-24 17:14:57
*/
import { UICallbacks, ViewParams } from "./Defines";
import { LayerPopUp } from "./LayerPopup";
import { UICallbacks, UIParams } from "./LayerUIElement";
import { UIConfig } from "./UIConfig";
/** 模式弹窗数据 */
@@ -45,23 +45,23 @@ export class LayerDialog extends LayerPopUp {
/** 显示模式弹窗 */
private show(uiid: string, config: UIConfig, params?: any, callbacks?: UICallbacks) {
let vp = this.ui_cache.get(config.prefab);
if (vp == null) {
vp = new ViewParams();
vp.uiid = uiid;
vp.valid = true;
vp.config = config;
let uip = this.ui_cache.get(config.prefab);
if (uip == null) {
uip = new UIParams();
uip.uiid = uiid;
uip.valid = true;
uip.config = config;
}
vp.params = params || {};
vp.callbacks = callbacks ?? {};
this.ui_nodes.set(vp.config.prefab, vp);
uip.params = params || {};
uip.callbacks = callbacks ?? {};
this.ui_nodes.set(uip.config.prefab, uip);
this.load(vp, config.bundle);
this.load(uip, config.bundle);
}
protected onCloseWindow(vp: ViewParams) {
super.onCloseWindow(vp);
protected onCloseWindow(uip: UIParams) {
super.onCloseWindow(uip);
setTimeout(this.next.bind(this), 0);
}

View File

@@ -3,7 +3,7 @@ import { GameElementConfig } from "./UIConfig";
const { ccclass } = _decorator;
/** 窗口事件触发组件 */
/** 游戏元素组件 */
@ccclass('LayerGameElement')
export class LayerGameElement extends Component {
/** 视图参数 */

View File

@@ -1,8 +1,7 @@
import { Camera, Layers, Node, ResolutionPolicy, SafeArea, Widget, screen, view, warn } from "cc";
import { resLoader } from "../../common/loader/ResLoader";
import { oops } from "../../Oops";
import { UICallbacks } from "./Defines";
import { DelegateComponent } from "./DelegateComponent";
import { LayerUIElement, UICallbacks } from "./LayerUIElement";
import { LayerDialog } from "./LayerDialog";
import { LayerCustomType, LayerTypeCls, UIConfigMap, Uiid } from "./LayerEnum";
import { LayerGame } from "./LayerGame";
@@ -271,19 +270,19 @@ export class LayerManager {
*/
removeByNode(node: Node, isDestroy: boolean = true) {
if (node instanceof Node) {
let comp = node.getComponent(DelegateComponent);
if (comp && comp.vp) {
let comp = node.getComponent(LayerUIElement);
if (comp && comp.params) {
// 释放显示的界面
if (node.parent) {
let uiid = this.configs[comp.vp.uiid];
let uiid = this.configs[comp.params.uiid];
this.remove(uiid, isDestroy);
}
// 释放缓存中的界面
else if (isDestroy) {
let layer = this.uiLayers.get(comp.vp.config.layer);
let layer = this.uiLayers.get(comp.params.config.layer);
if (layer) {
// @ts-ignore 注:不对外使用
layer.removeCache(comp.vp.config.prefab);
layer.removeCache(comp.params.config.prefab);
}
}
}

View File

@@ -7,9 +7,9 @@
import { BlockInputEvents, EventTouch, Layers, Node } from "cc";
import { ViewUtil } from "../../utils/ViewUtil";
import { PromptResType } from "../GuiEnum";
import { ViewParams } from "./Defines";
import { LayerUI } from "./LayerUI";
import { UIConfig } from "./UIConfig";
import { UIParams } from "./LayerUIElement";
/* 弹窗层,允许同时弹出多个窗口 */
export class LayerPopUp extends LayerUI {
@@ -20,7 +20,7 @@ export class LayerPopUp extends LayerUI {
constructor(name: string) {
super(name);
this.layer = Layers.Enum.UI_2D;
this.on(Node.EventType.CHILD_ADDED, this.onChildAdded, this);
this.on(Node.EventType.CHILD_REMOVED, this.onChildRemoved, this);
@@ -38,11 +38,11 @@ export class LayerPopUp extends LayerUI {
}
}
protected async showUi(vp: ViewParams): Promise<boolean> {
const r = await super.showUi(vp);
protected async showUi(uip: UIParams): Promise<boolean> {
const r = await super.showUi(uip);
if (r) {
// 界面加载完成显示时,启动触摸非窗口区域关闭
this.openVacancyRemove(vp.config);
this.openVacancyRemove(uip.config);
// 界面加载完成显示时,层级事件阻挡
this.black.enabled = true;
@@ -50,8 +50,8 @@ export class LayerPopUp extends LayerUI {
return r;
}
protected onCloseWindow(vp: ViewParams) {
super.onCloseWindow(vp);
protected onCloseWindow(uip: UIParams) {
super.onCloseWindow(uip);
// 界面关闭后,关闭触摸事件阻挡、关闭触摸非窗口区域关闭、关闭遮罩
this.setBlackDisable();

View File

@@ -1,9 +1,8 @@
import { instantiate, Node, Prefab, SafeArea, Widget } from "cc";
import { Collection } from "db://oops-framework/libs/collection/Collection";
import { oops } from "../../Oops";
import { UICallbacks, ViewParams } from "./Defines";
import { DelegateComponent } from "./DelegateComponent";
import { Uiid } from "./LayerEnum";
import { LayerUIElement, UICallbacks, UIParams } from "./LayerUIElement";
import { UIConfig } from "./UIConfig";
/** 界面层对象 */
@@ -11,9 +10,9 @@ export class LayerUI extends Node {
/** 全局窗口打开失败 */
onOpenFailure: Function = null!;
/** 显示界面节点集合 */
protected ui_nodes = new Collection<string, ViewParams>();
protected ui_nodes = new Collection<string, UIParams>();
/** 被移除的界面缓存数据 */
protected ui_cache = new Map<string, ViewParams>();
protected ui_cache = new Map<string, UIParams>();
/**
* UI基础层允许添加多个预制件节点
@@ -43,19 +42,19 @@ export class LayerUI extends Node {
}
// 检查缓存中是否存界面
let vp = this.ui_cache.get(config.prefab);
if (vp == null) {
vp = new ViewParams();
vp.uiid = uiid.toString();
vp.config = config;
let uip = this.ui_cache.get(config.prefab);
if (uip == null) {
uip = new UIParams();
uip.uiid = uiid.toString();
uip.config = config;
}
this.ui_nodes.set(config.prefab, vp);
this.ui_nodes.set(config.prefab, uip);
vp.params = params ?? {};
vp.callbacks = callbacks ?? {};
vp.valid = true;
uip.params = params ?? {};
uip.callbacks = callbacks ?? {};
uip.valid = true;
this.load(vp, config.bundle)
this.load(uip, config.bundle)
}
/**
@@ -63,7 +62,7 @@ export class LayerUI extends Node {
* @param vp 显示参数
* @param bundle 远程资源包名,如果为空就是默认本地资源包
*/
protected async load(vp: ViewParams, bundle?: string) {
protected async load(vp: UIParams, bundle?: string) {
// 加载界面资源超时提示
const timerId = setTimeout(this.onLoadingTimeoutGui, oops.config.game.loadingTimeoutGui);
@@ -80,8 +79,8 @@ export class LayerUI extends Node {
if (vp.config.safeArea) vp.node.addComponent(SafeArea);
// 窗口事件委托
const dc = vp.node.addComponent(DelegateComponent);
dc.vp = vp;
const dc = vp.node.addComponent(LayerUIElement);
dc.params = vp;
dc.onCloseWindow = this.onCloseWindow.bind(this);
// 显示界面
@@ -104,35 +103,35 @@ export class LayerUI extends Node {
}
/** 窗口关闭事件 */
protected onCloseWindow(vp: ViewParams) {
protected onCloseWindow(vp: UIParams) {
this.ui_nodes.delete(vp.config.prefab);
}
/**
* 创建界面节点
* @param vp 视图参数
* @param uip 视图参数
*/
protected async showUi(vp: ViewParams): Promise<boolean> {
protected async showUi(uip: UIParams): Promise<boolean> {
// 触发窗口添加事件
const comp = vp.node.getComponent(DelegateComponent)!;
const comp = uip.node.getComponent(LayerUIElement)!;
const r: boolean = await comp.add();
if (r) {
vp.node.parent = this;
uip.node.parent = this;
// 标记界面为使用状态
vp.valid = true;
uip.valid = true;
}
else {
console.warn(`路径为【${vp.config.prefab}】的自定义预处理逻辑异常.检查预制上绑定的组件中 onAdded 方法,返回true才能正确完成窗口显示流程`);
this.failure(vp);
console.warn(`路径为【${uip.config.prefab}】的自定义预处理逻辑异常.检查预制上绑定的组件中 onAdded 方法,返回true才能正确完成窗口显示流程`);
this.failure(uip);
}
return r;
}
/** 打开窗口失败逻辑 */
protected failure(vp: ViewParams) {
this.onCloseWindow(vp);
vp.callbacks && vp.callbacks.onLoadFailure && vp.callbacks.onLoadFailure();
protected failure(uip: UIParams) {
this.onCloseWindow(uip);
uip.callbacks && uip.callbacks.onLoadFailure && uip.callbacks.onLoadFailure();
this.onOpenFailure && this.onOpenFailure();
}
@@ -159,7 +158,7 @@ export class LayerUI extends Node {
}
const childNode = vp.node;
const comp = childNode.getComponent(DelegateComponent)!;
const comp = childNode.getComponent(LayerUIElement)!;
comp.remove(release);
}
@@ -174,7 +173,7 @@ export class LayerUI extends Node {
this.onCloseWindow(vp);
this.ui_cache.delete(prefabPath);
const childNode = vp.node;
const comp = childNode.getComponent(DelegateComponent)!;
const comp = childNode.getComponent(LayerUIElement)!;
if (comp) {
comp.remove(true);
}
@@ -207,7 +206,7 @@ export class LayerUI extends Node {
*/
clear(isDestroy: boolean): void {
// 清除所有显示的界面
this.ui_nodes.forEach((value: ViewParams, key: string) => {
this.ui_nodes.forEach((value: UIParams, key: string) => {
this.remove(value.config.prefab, isDestroy);
value.valid = false;
});
@@ -215,7 +214,7 @@ export class LayerUI extends Node {
// 清除缓存中的界面
if (isDestroy) {
this.ui_cache.forEach((value: ViewParams, prefabPath: string) => {
this.ui_cache.forEach((value: UIParams, prefabPath: string) => {
this.removeCache(prefabPath);
});
}

View File

@@ -1,122 +1,169 @@
/*
* @Author: dgflash
* @Date: 2022-09-01 18:00:28
* @LastEditors: dgflash
* @LastEditTime: 2023-01-09 11:55:03
*/
import { Component, Node, _decorator } from "cc";
import { oops } from "../../Oops";
import { ViewParams } from "./Defines";
const { ccclass } = _decorator;
const EventOnAdded: string = "onAdded";
const EventOnBeforeRemove: string = "onBeforeRemove";
const EventOnRemoved: string = "onRemoved";
/** 窗口事件触发组件 */
@ccclass('DelegateComponent')
export class DelegateComponent extends Component {
/** 视图参数 */
vp: ViewParams = null!;
/** 关闭窗口之前 */
onCloseWindowBefore: Function = null!;
/** 界面关闭回调 - 包括关闭动画播放完(辅助框架内存业务流程使用) */
onCloseWindow: Function = null!;
/** 窗口添加 */
add(): Promise<boolean> {
return new Promise(async (resolve, reject) => {
// 触发窗口组件上添加到父节点后的事件
for (let i = 0; i < this.node.components.length; i++) {
const component: any = this.node.components[i];
const func = component[EventOnAdded];
if (func) {
if (await func.call(component, this.vp.params) == false) {
resolve(false);
return;
}
}
}
// 触发外部窗口显示前的事件(辅助实现自定义动画逻辑)
if (typeof this.vp.callbacks.onAdded === "function") {
this.vp.callbacks.onAdded(this.node, this.vp.params);
}
resolve(true);
});
}
/** 删除节点该方法只能调用一次将会触发onBeforeRemoved回调 */
remove(isDestroy?: boolean) {
if (this.vp.valid) {
// 触发窗口移除舞台之前事件
this.applyComponentsFunction(this.node, EventOnBeforeRemove, this.vp.params);
// 通知外部对象窗口组件上移除之前的事件(关闭窗口前的关闭动画处理)
if (typeof this.vp.callbacks.onBeforeRemove === "function") {
this.vp.callbacks.onBeforeRemove(
this.node,
this.onBeforeRemoveNext.bind(this, isDestroy));
}
else {
this.removed(this.vp, isDestroy);
}
}
else {
this.removed(this.vp, isDestroy);
}
}
/** 窗口关闭前动画处理完后的回调方法,主要用于释放资源 */
private onBeforeRemoveNext(isDestroy?: boolean) {
if (this.onCloseWindowBefore) {
this.onCloseWindowBefore();
this.onCloseWindowBefore = null!;
}
this.removed(this.vp, isDestroy);
}
/** 窗口组件中触发移除事件与释放窗口对象 */
private removed(vp: ViewParams, isDestroy?: boolean) {
vp.valid = false;
if (vp.callbacks && typeof vp.callbacks.onRemoved === "function") {
vp.callbacks.onRemoved(this.node, vp.params);
}
// 界面移除舞台事件
this.onCloseWindow && this.onCloseWindow(vp);
if (isDestroy) {
// 释放界面显示对象
this.node.destroy();
// 释放界面相关资源
oops.res.release(vp.config.prefab, vp.config.bundle);
oops.log.logView(`【界面管理】释放【${vp.config.prefab}】界面资源`);
}
else {
this.node.removeFromParent();
}
// 触发窗口组件上窗口移除之后的事件
this.applyComponentsFunction(this.node, EventOnRemoved, this.vp.params);
}
onDestroy() {
this.vp = null!;
}
protected applyComponentsFunction(node: Node, funName: string, params: any) {
for (let i = 0; i < node.components.length; i++) {
const component: any = node.components[i];
const func = component[funName];
if (func) {
func.call(component, params);
}
}
}
/*
* @Author: dgflash
* @Date: 2022-09-01 18:00:28
* @LastEditors: dgflash
* @LastEditTime: 2023-01-09 11:55:03
*/
import { Component, Node, _decorator } from "cc";
import { oops } from "../../Oops";
import { UIConfig } from "./UIConfig";
const { ccclass } = _decorator;
const EventOnAdded: string = "onAdded";
const EventOnBeforeRemove: string = "onBeforeRemove";
const EventOnRemoved: string = "onRemoved";
/** 窗口元素组件 */
@ccclass('LayerUIElement')
export class LayerUIElement extends Component {
/** 视图参数 */
params: UIParams = null!;
/** 关闭窗口之前 */
onCloseWindowBefore: Function = null!;
/** 界面关闭回调 - 包括关闭动画播放完(辅助框架内存业务流程使用) */
onCloseWindow: Function = null!;
/** 窗口添加 */
add(): Promise<boolean> {
return new Promise(async (resolve, reject) => {
// 触发窗口组件上添加到父节点后的事件
for (let i = 0; i < this.node.components.length; i++) {
const component: any = this.node.components[i];
const func = component[EventOnAdded];
if (func) {
if (await func.call(component, this.params.params) == false) {
resolve(false);
return;
}
}
}
// 触发外部窗口显示前的事件(辅助实现自定义动画逻辑)
if (typeof this.params.callbacks.onAdded === "function") {
this.params.callbacks.onAdded(this.node, this.params.params);
}
resolve(true);
});
}
/** 删除节点该方法只能调用一次将会触发onBeforeRemoved回调 */
remove(isDestroy?: boolean) {
if (this.params.valid) {
// 触发窗口移除舞台之前事件
this.applyComponentsFunction(this.node, EventOnBeforeRemove, this.params.params);
// 通知外部对象窗口组件上移除之前的事件(关闭窗口前的关闭动画处理)
if (typeof this.params.callbacks.onBeforeRemove === "function") {
this.params.callbacks.onBeforeRemove(
this.node,
this.onBeforeRemoveNext.bind(this, isDestroy));
}
else {
this.removed(this.params, isDestroy);
}
}
else {
this.removed(this.params, isDestroy);
}
}
/** 窗口关闭前动画处理完后的回调方法,主要用于释放资源 */
private onBeforeRemoveNext(isDestroy?: boolean) {
if (this.onCloseWindowBefore) {
this.onCloseWindowBefore();
this.onCloseWindowBefore = null!;
}
this.removed(this.params, isDestroy);
}
/** 窗口组件中触发移除事件与释放窗口对象 */
private removed(uip: UIParams, isDestroy?: boolean) {
uip.valid = false;
if (uip.callbacks && typeof uip.callbacks.onRemoved === "function") {
uip.callbacks.onRemoved(this.node, uip.params);
}
// 界面移除舞台事件
this.onCloseWindow && this.onCloseWindow(uip);
if (isDestroy) {
// 释放界面显示对象
this.node.destroy();
// 释放界面相关资源
oops.res.release(uip.config.prefab, uip.config.bundle);
oops.log.logView(`【界面管理】释放【${uip.config.prefab}】界面资源`);
}
else {
this.node.removeFromParent();
}
// 触发窗口组件上窗口移除之后的事件
this.applyComponentsFunction(this.node, EventOnRemoved, this.params.params);
}
private applyComponentsFunction(node: Node, funName: string, params: any) {
for (let i = 0; i < node.components.length; i++) {
const component: any = node.components[i];
const func = component[funName];
if (func) {
func.call(component, params);
}
}
}
onDestroy() {
this.params = null!;
this.onCloseWindowBefore = null!;
this.onCloseWindow = null!;
}
}
/** 本类型仅供gui模块内部使用请勿在功能逻辑中使用 */
export class UIParams {
/** 界面唯一编号 */
uiid: string = null!;
/** 界面配置 */
config: UIConfig = null!;
/** 传递给打开界面的参数 */
params: any = null!;
/** 窗口事件 */
callbacks: UICallbacks = null!;
/** 是否在使用状态 */
valid: boolean = true;
/** 界面根节点 */
node: Node = null!;
}
/*** 界面回调参数对象定义 */
export interface UICallbacks {
/**
*
* @param node
* @param params
*/
onAdded?: (node: Node, params: any) => void,
/**
* destroy
* @param node
* @param params
*/
onRemoved?: (node: Node | null, params: any) => void,
/**
* onBeforeRemovednext必须调用
*
* FadeOut然后删除`onBeforeRemoved`action动画next
* @param node
* @param next
*/
onBeforeRemove?: (node: Node, next: Function) => void,
/** 网络异常时,窗口加载失败回调 */
onLoadFailure?: () => void;
}

View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.24",
"importer": "typescript",
"imported": true,
"uuid": "e7207ab9-8ef7-49af-9c19-84f4d6a2e589",
"files": [],
"subMetas": {},
"userData": {}
}

View File

@@ -2,7 +2,7 @@ import { Node, __private } from "cc";
import { oops } from "../../core/Oops";
import { resLoader } from "../../core/common/loader/ResLoader";
import { UICallbacks } from "../../core/gui/layer/Defines";
import { DelegateComponent } from "../../core/gui/layer/DelegateComponent";
import { LayerUIElement } from "../../core/gui/layer/LayerUIElement";
import { Uiid } from "../../core/gui/layer/LayerEnum";
import { UIConfig } from "../../core/gui/layer/UIConfig";
import { ViewUtil } from "../../core/utils/ViewUtil";
@@ -97,15 +97,15 @@ export class ModuleUtil {
return;
}
const comp = node.getComponent(DelegateComponent);
const comp = node.getComponent(LayerUIElement);
if (comp) {
if (comp.vp.callbacks.onBeforeRemove) {
if (comp.params.callbacks.onBeforeRemove) {
comp.onCloseWindowBefore = () => {
ent.remove(ctor, isDestroy);
if (onRemoved) onRemoved();
};
}
else if (comp.vp.callbacks.onRemoved) {
else if (comp.params.callbacks.onRemoved) {
comp.onCloseWindow = () => {
ent.remove(ctor, isDestroy);
if (onRemoved) onRemoved();