Files
pixelheros/assets/script/game/map/IBoxComp.ts
walkpan 25cd0b419e fix(ui): 动态调整信息框时同步更新名称位置
修复当信息框内容行数变化时,名称标签位置未同步调整的问题。新增 updateNamePosition 方法,根据显示行数动态计算名称的垂直位置,确保视觉布局的一致性。
2026-03-27 20:14:04 +08:00

139 lines
5.4 KiB
TypeScript

import { _decorator, Label, Node, NodeEventType, UITransform } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { HeroInfo } from "../common/config/heroSet";
import { IType, SkillSet } from "../common/config/SkillSet";
import { oops } from "db://oops-framework/core/Oops";
const { ccclass, property } = _decorator;
@ccclass('IBoxComp')
@ecs.register('IBoxComp', false)
export class IBoxComp extends CCComp {
@property(Node)
Line1: Node = null!
@property(Node)
Line2: Node = null!
@property(Node)
Line3: Node = null!
@property(Node)
Line4: Node = null!
@property(Node)
Line5: Node = null!
private readonly baseHeight: number = 100;
private readonly extraLineHeight: number = 50;
private readonly nameBaseY: number = 50;
private readonly nameExtraLineOffsetY: number = 25;
onAdded(args: {
heroUuid?: number;
heroLv?: number;
skills?: Record<number, { uuid: number; lv: number; cd: number; ccd: number }>;
}) {
this.renderHeroInfo(args);
}
onLoad() {
this.node.on(NodeEventType.TOUCH_END, this.onTapClose, this);
}
onDestroy() {
this.node.off(NodeEventType.TOUCH_END, this.onTapClose, this);
}
reset() {
this.node.destroy();
}
private renderHeroInfo(args: {
heroUuid?: number;
heroLv?: number;
skills?: Record<number, { uuid: number; lv: number; cd: number; ccd: number }>;
}) {
const heroUuid = Math.floor(args?.heroUuid ?? 0);
const heroLv = Math.max(1, Math.floor(args?.heroLv ?? 1));
const hero = HeroInfo[heroUuid];
if (!hero) {
this.setHeroName("");
this.applyLineData([{ text: "暂无技能信息" }]);
return;
}
this.setHeroName(hero.name);
const runtimeSkills = args?.skills ? Object.values(args.skills) : [];
const sourceSkills = runtimeSkills.length > 0 ? runtimeSkills : Object.values(hero.skills ?? {});
const lineData = sourceSkills.map(skill => {
const skillId = Math.floor(skill?.uuid ?? 0);
if (!skillId) return null;
const config = SkillSet[skillId];
if (!config) return null;
const runtimeLv = runtimeSkills.length > 0 ? Math.max(0, Math.floor(skill.lv ?? 0)) : Math.max(0, Math.floor((skill.lv ?? 1) + heroLv - 2));
const cd = Number(skill?.cd ?? 0);
return {
text: `${config.name} Lv.${runtimeLv} CD:${cd}s ${config.info}`,
iType: config.IType
};
}).filter(item => !!item) as Array<{ text: string; iType: IType }>;
this.applyLineData(lineData.length > 0 ? lineData : [{ text: "暂无技能信息" }]);
}
private applyLineData(skillLines: Array<{ text: string; iType?: IType }>) {
const lines = [this.Line1, this.Line2, this.Line3, this.Line4, this.Line5];
const showCount = Math.max(1, Math.min(lines.length, skillLines.length));
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (!line) continue;
const active = i < showCount;
line.active = active;
if (!active) continue;
const data = skillLines[i];
const text = data?.text ?? "";
const noteNode = line.getChildByName("note");
const label = noteNode?.getComponent(Label) || noteNode?.getComponentInChildren(Label) || line.getComponentInChildren(Label);
if (label) label.string = text;
this.updateLineTypeIcon(line, data?.iType);
}
const targetHeight = this.baseHeight + Math.max(0, showCount - 1) * this.extraLineHeight;
this.updateIBoxHeight(targetHeight);
this.updateNamePosition(showCount);
}
private updateIBoxHeight(height: number) {
const bgNode = this.node.getChildByName("Bg");
const bgTransform = bgNode?.getComponent(UITransform);
if (bgTransform) {
bgTransform.setContentSize(bgTransform.contentSize.width, height);
}
}
private setHeroName(name: string) {
const bgNode = this.node.getChildByName("Bg");
const nameNode = bgNode?.getChildByName("name");
const valNode = nameNode?.getChildByName("val");
const label = valNode?.getComponent(Label) || valNode?.getComponentInChildren(Label);
if (label) {
label.string = name;
}
}
private updateNamePosition(showCount: number) {
const bgNode = this.node.getChildByName("Bg");
const nameNode = bgNode?.getChildByName("name");
if (!nameNode) return;
const targetY = this.nameBaseY + Math.max(0, showCount - 1) * this.nameExtraLineOffsetY;
const current = nameNode.position;
nameNode.setPosition(current.x, targetY, current.z);
}
private updateLineTypeIcon(line: Node, iType?: IType) {
const meleeNode = line.getChildByName("Melee");
const remoteNode = line.getChildByName("remote");
const supportNode = line.getChildByName("support");
if (meleeNode) meleeNode.active = iType === IType.Melee;
if (remoteNode) remoteNode.active = iType === IType.remote;
if (supportNode) supportNode.active = iType === IType.support;
}
private onTapClose() {
oops.gui.removeByNode(this.node);
}
}