feat: 预制体系统与架构改进 (#303)
* feat(prefab): 实现预制体系统和编辑器 UX 改进 ## 预制体系统 - 新增 PrefabSerializer: 预制体序列化/反序列化 - 新增 PrefabInstanceComponent: 追踪预制体实例来源和修改 - 新增 PrefabService: 预制体核心服务 - 新增 PrefabLoader: 预制体资产加载器 - 新增预制体命令: Create/Instantiate/Apply/Revert/BreakLink ## 预制体编辑模式 - 支持双击 .prefab 文件进入编辑模式 - 预制体编辑模式工具栏 (保存/退出) - 预制体实例指示器和操作菜单 ## 编辑器 UX 改进 - SceneHierarchy 快捷键: F2 重命名, Ctrl+D 复制, ↑↓ 导航 - 支持双击实体名称内联编辑 - 删除实体时显示子节点数量警告 - 右键菜单添加重命名/复制选项及快捷键提示 - 布局持久化和重置功能 ## Bug 修复 - 修复 editor-runtime 组件类重复导致的 TransformComponent 不识别问题 - 修复 .prefab-name 样式覆盖导致预制体工具栏文字不可见 - 修复 Inspector 资源字段高度不正确问题 * feat(editor): 改进编辑器 UX 交互体验 - ContentBrowser: 加载动画 spinner、搜索高亮、改进空状态设计 - SceneHierarchy: 选中项自动滚动到视图、搜索清除按钮 - PropertyInspector: 输入框本地状态管理、Enter/Escape 键处理 - EntityInspector: 组件折叠状态持久化、属性搜索清除按钮 - Viewport: 变换操作实时数值显示 - 国际化: 添加相关文本 (en/zh) * fix(build): 修复 Web 构建资产加载和编辑器 UX 改进 构建系统修复: - 修复 asset-catalog.json 字段名不匹配 (entries vs assets) - 修复 BrowserFileSystemService 支持两种目录格式 - 修复 bundle 策略检测逻辑 (空对象判断) - 修复 module.json 中 assetExtensions 声明和类型推断 行为树修复: - 修复 BehaviorTreeExecutionSystem 使用 loadAsset 替代 loadAssetByPath - 修复 BehaviorTreeAssetType 常量与 module.json 类型名一致 (behavior-tree) 编辑器 UX 改进: - 构建完成对话框添加"打开文件夹"按钮 - 构建完成对话框样式优化 (圆形图标背景、按钮布局) - SceneHierarchy 响应式布局 (窄窗口自动隐藏 Type 列) - SceneHierarchy 隐藏滚动条 错误追踪: - 添加全局错误处理器写入日志文件 (%TEMP%/esengine-editor-crash.log) - 添加 append_to_log Tauri 命令 * feat(render): 修复 UI 渲染和点击特效系统 ## UI 渲染修复 - 修复 GUID 验证 bug，使用统一的 isValidGUID() 函数 - 修复 UI 渲染顺序随机问题，Rust 端使用 IndexMap 替代 HashMap - Web 运行时添加 assetPathResolver 支持 GUID 解析 - UIInteractableComponent.blockEvents 默认值改为 false ## 点击特效系统 - 新增 ClickFxComponent 和 ClickFxSystem - 支持在点击位置播放粒子效果 - 支持多种触发模式和粒子轮换 ## Camera 系统重构 - CameraSystem 从 ecs-engine-bindgen 移至 camera 包 - 新增 CameraManager 统一管理相机 ## 编辑器改进 - 改进属性面板 UI 交互 - 粒子编辑器面板优化 - Transform 命令系统 * feat(render): 实现 Sorting Layer 系统和 Overlay 渲染层 - 新增 SortingLayerManager 管理排序层级 (Background, Default, Foreground, UI, Overlay) - 实现 ISortable 接口，统一 Sprite、UI、Particle 的排序属性 - 修复粒子 Overlay 层被 UI 遮挡问题：添加独立的 Overlay Pass 在 UI 之后渲染 - 更新粒子资产格式：从 sortingOrder 改为 sortingLayer + orderInLayer - 更新粒子编辑器面板支持新的排序属性 - 优化 UI 渲染系统使用新的排序层级 * feat(ci): 集成 SignPath 代码签名服务 - 添加 SignPath 自动签名工作流（Windows） - 配置 release-editor.yml 支持代码签名 - 将构建改为草稿模式，等待签名完成后发布 - 添加证书文件到 .gitignore 防止泄露 * fix(asset): 修复 Web 构建资产路径解析和全局单例移除 ## 资产路径修复 - 修复 Tauri 本地服务器 `/asset?path=...` 路径解析，正确与 root 目录连接 - BrowserPathResolver 支持两种模式： - 'proxy': 使用 /asset?path=... 格式（编辑器 Run in Browser） - 'direct': 使用直接路径 /assets/path.png（独立 Web 构建） - BrowserRuntime 使用 'direct' 模式，无需 Tauri 代理 ## 架构改进 - 移除全局单例 - 移除 globalAssetManager 导出，改用 AssetManagerToken 依赖注入 - 移除 globalPathResolver 导出，改用 PathResolutionService - 移除 globalPathResolutionService 导出 - ParticleUpdateSystem/ClickFxSystem 通过 setAssetManager() 注入依赖 - EngineService 使用 new AssetManager() 替代全局实例 ## 新增服务 - PathResolutionService: 统一路径解析接口 - RuntimeModeService: 运行时模式查询服务 - SerializationContext: EntityRef 序列化上下文 ## 其他改进 - 完善 ServiceToken 注释说明本地定义的意图 - 导出 BrowserPathResolveMode 类型 * fix(build): 添加 world-streaming composite 设置修复类型检查 * fix(build): 移除 world-streaming 引用避免 composite 冲突 * fix(build): 将 const enum 改为 enum 兼容 isolatedModules * fix(build): 添加缺失的 IAssetManager 导入
This commit is contained in:
YHH
GitHub
@@ -1,27 +1,27 @@
|
||||
import type { IJsonModel, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
|
||||
import type { FlexDockPanel } from './types';
|
||||
|
||||
// 固定宽度配置（像素）| Fixed width configuration (pixels)
|
||||
const RIGHT_PANEL_WIDTH = 320;
|
||||
const RIGHT_HIERARCHY_HEIGHT_RATIO = 40;
|
||||
const RIGHT_INSPECTOR_HEIGHT_RATIO = 60;
|
||||
// 布局比例配置 | Layout ratio configuration
|
||||
const DEFAULT_RIGHT_PANEL_WEIGHT = 20; // 右侧面板占 20%
|
||||
const DEFAULT_LEFT_PANEL_WEIGHT = 80; // 左侧面板占 80%
|
||||
const DEFAULT_VIEWPORT_HEIGHT_RATIO = 80; // Viewport 占 80%
|
||||
const DEFAULT_BOTTOM_PANEL_HEIGHT_RATIO = 20; // 底部面板占 20%
|
||||
const DEFAULT_RIGHT_TOP_HEIGHT_RATIO = 40;
|
||||
const DEFAULT_RIGHT_BOTTOM_HEIGHT_RATIO = 60;
|
||||
|
||||
export class LayoutBuilder {
|
||||
static createDefaultLayout(panels: FlexDockPanel[], activePanelId?: string): IJsonModel {
|
||||
const viewportPanels = panels.filter((p) => p.id === 'viewport');
|
||||
const hierarchyPanels = panels.filter((p) => p.id.includes('hierarchy'));
|
||||
const inspectorPanels = panels.filter((p) => p.id.includes('inspector'));
|
||||
const pluginPanels = panels.filter((p) =>
|
||||
!viewportPanels.includes(p) &&
|
||||
!hierarchyPanels.includes(p) &&
|
||||
!inspectorPanels.includes(p)
|
||||
);
|
||||
// 根据布局配置分组面板 | Group panels by layout config
|
||||
const centerPanels = panels.filter((p) => !p.layout?.position || p.layout.position === 'center');
|
||||
const bottomPanels = panels.filter((p) => p.layout?.position === 'bottom');
|
||||
const rightTopPanels = panels.filter((p) => p.layout?.position === 'right-top');
|
||||
const rightBottomPanels = panels.filter((p) => p.layout?.position === 'right-bottom');
|
||||
|
||||
const mainRowChildren = this.buildLayout(
|
||||
viewportPanels,
|
||||
pluginPanels,
|
||||
hierarchyPanels,
|
||||
inspectorPanels,
|
||||
centerPanels,
|
||||
bottomPanels,
|
||||
rightTopPanels,
|
||||
rightBottomPanels,
|
||||
activePanelId
|
||||
);
|
||||
|
||||
@@ -46,30 +46,39 @@ export class LayoutBuilder {
|
||||
}
|
||||
|
||||
private static buildLayout(
|
||||
viewportPanels: FlexDockPanel[],
|
||||
pluginPanels: FlexDockPanel[],
|
||||
hierarchyPanels: FlexDockPanel[],
|
||||
inspectorPanels: FlexDockPanel[],
|
||||
centerPanels: FlexDockPanel[],
|
||||
bottomPanels: FlexDockPanel[],
|
||||
rightTopPanels: FlexDockPanel[],
|
||||
rightBottomPanels: FlexDockPanel[],
|
||||
activePanelId?: string
|
||||
): (IJsonTabSetNode | IJsonRowNode)[] {
|
||||
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
|
||||
|
||||
const leftPanels = [...viewportPanels, ...pluginPanels];
|
||||
if (leftPanels.length > 0) {
|
||||
// 构建左侧区域（Center + Bottom）| Build left area (Center + Bottom)
|
||||
const leftColumnChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
|
||||
|
||||
// Center 面板 | Center panels
|
||||
if (centerPanels.length > 0) {
|
||||
let activeTabIndex = 0;
|
||||
if (activePanelId) {
|
||||
const index = leftPanels.findIndex((p) => p.id === activePanelId);
|
||||
const index = centerPanels.findIndex((p) => p.id === activePanelId);
|
||||
if (index !== -1) {
|
||||
activeTabIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
mainRowChildren.push({
|
||||
// 计算底部面板的权重 | Calculate bottom panels weight
|
||||
const bottomWeight = bottomPanels.length > 0
|
||||
? (bottomPanels[0]?.layout?.weight ?? DEFAULT_BOTTOM_PANEL_HEIGHT_RATIO)
|
||||
: 0;
|
||||
const centerWeight = bottomPanels.length > 0 ? (100 - bottomWeight) : 100;
|
||||
|
||||
leftColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: 100, // 占据剩余空间
|
||||
weight: centerWeight,
|
||||
selected: activeTabIndex,
|
||||
enableMaximize: true,
|
||||
children: leftPanels.map((p) => ({
|
||||
children: centerPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
@@ -79,14 +88,49 @@ export class LayoutBuilder {
|
||||
});
|
||||
}
|
||||
|
||||
// Bottom 面板（独立 tabset）| Bottom panels (separate tabset)
|
||||
if (bottomPanels.length > 0) {
|
||||
const bottomWeight = bottomPanels[0]?.layout?.weight ?? DEFAULT_BOTTOM_PANEL_HEIGHT_RATIO;
|
||||
leftColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: bottomWeight,
|
||||
enableMaximize: true,
|
||||
children: bottomPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
component: p.id,
|
||||
enableClose: p.closable !== false
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
// 如果有左侧内容，添加到主行 | If there's left content, add to main row
|
||||
if (leftColumnChildren.length > 0) {
|
||||
if (leftColumnChildren.length === 1) {
|
||||
// 只有一个面板组，直接添加 | Only one panel group, add directly
|
||||
const node = leftColumnChildren[0] as IJsonTabSetNode;
|
||||
node.weight = DEFAULT_LEFT_PANEL_WEIGHT;
|
||||
mainRowChildren.push(node);
|
||||
} else {
|
||||
// 多个面板组，包装成列 | Multiple panel groups, wrap in column
|
||||
mainRowChildren.push({
|
||||
type: 'row',
|
||||
weight: DEFAULT_LEFT_PANEL_WEIGHT,
|
||||
children: leftColumnChildren
|
||||
} as IJsonRowNode);
|
||||
}
|
||||
}
|
||||
|
||||
// 构建右侧区域（Right-Top + Right-Bottom）| Build right area
|
||||
const rightColumnChildren: IJsonTabSetNode[] = [];
|
||||
|
||||
if (hierarchyPanels.length > 0) {
|
||||
if (rightTopPanels.length > 0) {
|
||||
rightColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: RIGHT_HIERARCHY_HEIGHT_RATIO,
|
||||
weight: DEFAULT_RIGHT_TOP_HEIGHT_RATIO,
|
||||
enableMaximize: true,
|
||||
children: hierarchyPanels.map((p) => ({
|
||||
children: rightTopPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
@@ -96,12 +140,12 @@ export class LayoutBuilder {
|
||||
});
|
||||
}
|
||||
|
||||
if (inspectorPanels.length > 0) {
|
||||
if (rightBottomPanels.length > 0) {
|
||||
rightColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: RIGHT_INSPECTOR_HEIGHT_RATIO,
|
||||
weight: DEFAULT_RIGHT_BOTTOM_HEIGHT_RATIO,
|
||||
enableMaximize: true,
|
||||
children: inspectorPanels.map((p) => ({
|
||||
children: rightBottomPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
@@ -114,7 +158,7 @@ export class LayoutBuilder {
|
||||
if (rightColumnChildren.length > 0) {
|
||||
mainRowChildren.push({
|
||||
type: 'row',
|
||||
width: RIGHT_PANEL_WIDTH, // 使用固定宽度而不是权重
|
||||
weight: DEFAULT_RIGHT_PANEL_WEIGHT,
|
||||
children: rightColumnChildren
|
||||
} as IJsonRowNode);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,10 @@ export class LayoutMerger {
|
||||
|
||||
const newPanelTabs = this.findNewPanels(defaultLayout.layout, newPanelIds);
|
||||
|
||||
if (!this.addNewPanelsToCenter(mergedLayout.layout, newPanelTabs)) {
|
||||
// 构建面板位置映射 | Build panel position map
|
||||
const panelPositionMap = new Map(currentPanels.map((p) => [p.id, p.layout?.position || 'center']));
|
||||
|
||||
if (!this.addNewPanelsToCenter(mergedLayout.layout, newPanelTabs, panelPositionMap)) {
|
||||
return defaultLayout;
|
||||
}
|
||||
|
||||
@@ -102,19 +105,30 @@ export class LayoutMerger {
|
||||
return newPanelTabs;
|
||||
}
|
||||
|
||||
private static addNewPanelsToCenter(node: IJsonLayoutNode, newPanelTabs: IJsonTabNode[]): boolean {
|
||||
/**
|
||||
* 将新面板添加到中心区域
|
||||
* Add new panels to center area
|
||||
*
|
||||
* @param node - 布局节点 | Layout node
|
||||
* @param newPanelTabs - 新面板 tab 数据 | New panel tab data
|
||||
* @param panelPositionMap - 面板位置映射 | Panel position map
|
||||
* @returns 是否成功添加 | Whether successfully added
|
||||
*/
|
||||
private static addNewPanelsToCenter(
|
||||
node: IJsonLayoutNode,
|
||||
newPanelTabs: IJsonTabNode[],
|
||||
panelPositionMap: Map<string, string>
|
||||
): boolean {
|
||||
if (isTabsetNode(node)) {
|
||||
const hasNonSidePanel = node.children?.some((child) => {
|
||||
// 检查是否是中心 tabset（包含 center 位置的面板）
|
||||
// Check if this is center tabset (contains center position panels)
|
||||
const hasCenterPanel = node.children?.some((child) => {
|
||||
const id = child.id || '';
|
||||
return (
|
||||
!id.includes('hierarchy') &&
|
||||
!id.includes('asset') &&
|
||||
!id.includes('inspector') &&
|
||||
!id.includes('console')
|
||||
);
|
||||
const position = panelPositionMap.get(id);
|
||||
return position === 'center' || position === undefined;
|
||||
});
|
||||
|
||||
if (hasNonSidePanel && node.children) {
|
||||
if (hasCenterPanel && node.children) {
|
||||
node.children.push(...newPanelTabs);
|
||||
node.selected = node.children.length - 1;
|
||||
return true;
|
||||
@@ -123,7 +137,7 @@ export class LayoutMerger {
|
||||
|
||||
if (hasChildren(node)) {
|
||||
for (const child of node.children) {
|
||||
if (this.addNewPanelsToCenter(child as IJsonLayoutNode, newPanelTabs)) {
|
||||
if (this.addNewPanelsToCenter(child as IJsonLayoutNode, newPanelTabs, panelPositionMap)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,74 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface FlexDockPanel {
|
||||
id: string;
|
||||
title: string;
|
||||
content: ReactNode;
|
||||
closable?: boolean;
|
||||
/**
|
||||
* 面板布局位置
|
||||
* Panel layout position
|
||||
*/
|
||||
export type PanelLayoutPosition =
|
||||
| 'center' // 中心区域（Viewport 所在的 tabset）| Center area (Viewport's tabset)
|
||||
| 'bottom' // 中心区域下方独立 tabset | Separate tabset below center
|
||||
| 'right-top' // 右侧上方（Hierarchy）| Right top area
|
||||
| 'right-bottom'; // 右侧下方（Inspector）| Right bottom area
|
||||
|
||||
/**
|
||||
* 面板布局配置
|
||||
* Panel layout configuration
|
||||
*/
|
||||
export interface PanelLayoutConfig {
|
||||
/**
|
||||
* 布局位置
|
||||
* Layout position
|
||||
*
|
||||
* @default 'center'
|
||||
*/
|
||||
position?: PanelLayoutPosition;
|
||||
|
||||
/**
|
||||
* 布局权重（百分比）
|
||||
* Layout weight (percentage)
|
||||
*
|
||||
* 仅对 'bottom' 位置有效，表示占父容器的高度比例
|
||||
* Only effective for 'bottom' position, represents height ratio of parent container
|
||||
*
|
||||
* @default 20
|
||||
*/
|
||||
weight?: number;
|
||||
|
||||
/**
|
||||
* 是否需要独立的 tabset（不与其他面板共享）
|
||||
* Whether needs a separate tabset (not shared with other panels)
|
||||
*
|
||||
* 当为 true 时，重新添加面板会使用默认布局而不是合并
|
||||
* When true, re-adding panel will use default layout instead of merging
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
requiresSeparateTabset?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 可停靠面板描述符
|
||||
* Dockable panel descriptor
|
||||
*/
|
||||
export interface FlexDockPanel {
|
||||
/** 面板唯一标识 | Panel unique ID */
|
||||
id: string;
|
||||
|
||||
/** 面板标题 | Panel title */
|
||||
title: string;
|
||||
|
||||
/** 面板内容 | Panel content */
|
||||
content: ReactNode;
|
||||
|
||||
/** 是否可关闭 | Whether closable */
|
||||
closable?: boolean;
|
||||
|
||||
/**
|
||||
* 布局配置
|
||||
* Layout configuration
|
||||
*
|
||||
* 定义面板在布局中的位置和行为
|
||||
* Defines panel's position and behavior in layout
|
||||
*/
|
||||
layout?: PanelLayoutConfig;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user