CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 (#216)

Browse Source 
* refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构

* feat(editor): 添加插件市场功能

* feat(editor): 重构插件市场以支持版本管理和ZIP打包

* feat(editor): 重构插件发布流程并修复React渲染警告

* fix(plugin): 修复插件发布和市场的路径不一致问题

* feat: 重构插件发布流程并添加插件删除功能

* fix(editor): 完善插件删除功能并修复多个关键问题

* fix(auth): 修复自动登录与手动登录的竞态条件问题

* feat(editor): 重构插件管理流程

* feat(editor): 支持 ZIP 文件直接发布插件

- 新增 PluginSourceParser 解析插件源
- 重构发布流程支持文件夹和 ZIP 两种方式
- 优化发布向导 UI

* feat(editor): 插件市场支持多版本安装

- 插件解压到项目 plugins 目录
- 新增 Tauri 后端安装/卸载命令
- 支持选择任意版本安装
- 修复打包逻辑，保留完整 dist 目录结构

* feat(editor): 个人中心支持多版本管理

- 合并同一插件的不同版本
- 添加版本历史展开/折叠功能
- 禁止有待审核 PR 时更新插件

* fix(editor): 修复 InspectorRegistry 服务注册

- InspectorRegistry 实现 IService 接口
- 注册到 Core.services 供插件使用

* feat(behavior-tree-editor): 完善插件注册和文件操作

- 添加文件创建模板和操作处理器
- 实现右键菜单创建行为树功能
- 修复文件读取权限问题（使用 Tauri 命令）
- 添加 BehaviorTreeEditorPanel 组件
- 修复 rollup 配置支持动态导入

* feat(plugin): 完善插件构建和发布流程

* fix(behavior-tree-editor): 完整恢复编辑器并修复 Toast 集成

* fix(behavior-tree-editor): 修复节点选中、连线跟随和文件加载问题并优化性能

* fix(behavior-tree-editor): 修复端口连接失败问题并优化连线样式

* refactor(behavior-tree-editor): 移除调试面板功能简化代码结构

* refactor(behavior-tree-editor): 清理冗余代码合并重复逻辑

* feat(behavior-tree-editor): 完善编辑器核心功能增强扩展性

* fix(lint): 修复ESLint错误确保CI通过

* refactor(behavior-tree-editor): 优化编辑器工具栏和编译器功能

* refactor(behavior-tree-editor): 清理技术债务，优化代码质量

* fix(editor-app): 修复字符串替换安全问题
This commit is contained in:
YHH
2025-11-18 14:46:51 +08:00
committed by GitHub
parent eac660b1a0
commit bce3a6e253
251 changed files with 26144 additions and 8844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
packages/editor-app/src/components/FlexLayoutDockContainer.tsx
View File

@@ -1,149 +1,10 @@
import { useCallback, ReactNode, useRef, useEffect, useState } from 'react';
import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode, Action, IJsonTabNode, DockLocation } from 'flexlayout-react';
import { useCallback, useRef, useEffect, useState } from 'react';
import { Layout, Model, TabNode, IJsonModel, Actions, Action, DockLocation } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';
import '../styles/FlexLayoutDock.css';
import { LayoutMerger, LayoutBuilder, FlexDockPanel } from '../shared/layout';
/**
* 合并保存的布局和新的默认布局
* 保留用户的布局调整（大小、位置等），同时添加新面板并移除已关闭的面板
*/
function mergeLayouts(savedLayout: IJsonModel, defaultLayout: IJsonModel, currentPanels: FlexDockPanel[]): IJsonModel {
// 获取当前所有面板ID
const currentPanelIds = new Set(currentPanels.map(p => p.id));
// 收集保存布局中存在的面板ID
const savedPanelIds = new Set<string>();
const collectPanelIds = (node: any) => {
if (node.type === 'tab' && node.id) {
savedPanelIds.add(node.id);
}
if (node.children) {
node.children.forEach((child: any) => collectPanelIds(child));
}
};
collectPanelIds(savedLayout.layout);
// 同时收集borders中的面板ID
if (savedLayout.borders) {
savedLayout.borders.forEach((border: any) => {
if (border.children) {
collectPanelIds({ children: border.children });
}
});
}
// 找出新增的面板和已移除的面板
const newPanelIds = Array.from(currentPanelIds).filter(id => !savedPanelIds.has(id));
const removedPanelIds = Array.from(savedPanelIds).filter(id => !currentPanelIds.has(id));
// 克隆保存的布局
const mergedLayout = JSON.parse(JSON.stringify(savedLayout));
// 确保borders为空（不保留最小化状态）
if (mergedLayout.borders) {
mergedLayout.borders = mergedLayout.borders.map((border: any) => ({
...border,
children: []
}));
}
// 第一步：移除已关闭的面板
if (removedPanelIds.length > 0) {
const removePanels = (node: any): boolean => {
if (!node.children) return false;
// 过滤掉已移除的tab
if (node.type === 'tabset' || node.type === 'row') {
const originalLength = node.children.length;
node.children = node.children.filter((child: any) => {
if (child.type === 'tab') {
return !removedPanelIds.includes(child.id);
}
return true;
});
// 如果有tab被移除，调整selected索引
if (node.type === 'tabset' && node.children.length < originalLength) {
if (node.selected >= node.children.length) {
node.selected = Math.max(0, node.children.length - 1);
}
}
// 递归处理子节点
node.children.forEach((child: any) => removePanels(child));
return node.children.length < originalLength;
}
return false;
};
removePanels(mergedLayout.layout);
}
// 第二步：如果没有新面板，直接返回清理后的布局
if (newPanelIds.length === 0) {
return mergedLayout;
}
// 第三步：在默认布局中找到新面板的配置
const newPanelTabs: IJsonTabNode[] = [];
const findNewPanels = (node: any) => {
if (node.type === 'tab' && node.id && newPanelIds.includes(node.id)) {
newPanelTabs.push(node);
}
if (node.children) {
node.children.forEach((child: any) => findNewPanels(child));
}
};
findNewPanels(defaultLayout.layout);
// 第四步：将新面板添加到中心区域的第一个tabset
const addNewPanelsToCenter = (node: any): boolean => {
if (node.type === 'tabset') {
// 检查是否是中心区域的tabset（通过检查是否包含非hierarchy/asset/inspector/console面板）
const hasNonSidePanel = node.children?.some((child: any) => {
const id = child.id || '';
return !id.includes('hierarchy') &&
!id.includes('asset') &&
!id.includes('inspector') &&
!id.includes('console');
});
if (hasNonSidePanel && node.children) {
// 添加新面板到这个tabset
node.children.push(...newPanelTabs);
// 选中最后添加的面板
node.selected = node.children.length - 1;
return true;
}
}
if (node.children) {
for (const child of node.children) {
if (addNewPanelsToCenter(child)) {
return true;
}
}
}
return false;
};
// 尝试添加新面板到中心区域
if (!addNewPanelsToCenter(mergedLayout.layout)) {
// 如果没有找到合适的tabset，使用默认布局
return defaultLayout;
}
return mergedLayout;
}
export interface FlexDockPanel {
id: string;
title: string;
content: ReactNode;
closable?: boolean;
}
export type { FlexDockPanel };
interface FlexLayoutDockContainerProps {
panels: FlexDockPanel[];
@@ -158,170 +19,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose, activePanelId }:
const previousPanelTitlesRef = useRef<Map<string, string>>(new Map());
const createDefaultLayout = useCallback((): IJsonModel => {
const hierarchyPanels = panels.filter((p) => p.id.includes('hierarchy'));
const assetPanels = panels.filter((p) => p.id.includes('asset'));
const rightPanels = panels.filter((p) => p.id.includes('inspector'));
const bottomPanels = panels.filter((p) => p.id.includes('console'));
const centerPanels = panels.filter((p) =>
!hierarchyPanels.includes(p) && !assetPanels.includes(p) && !rightPanels.includes(p) && !bottomPanels.includes(p)
);
// Build center column children
const centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
if (centerPanels.length > 0) {
// 找到要激活的tab的索引
let activeTabIndex = 0;
if (activePanelId) {
const index = centerPanels.findIndex((p) => p.id === activePanelId);
if (index !== -1) {
activeTabIndex = index;
}
}
centerColumnChildren.push({
type: 'tabset',
weight: 70,
selected: activeTabIndex,
enableMaximize: true,
children: centerPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
if (bottomPanels.length > 0) {
centerColumnChildren.push({
type: 'tabset',
weight: 30,
enableMaximize: true,
children: bottomPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
// Build main row children
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
// 左侧列：场景层级和资产面板垂直排列（五五分）
if (hierarchyPanels.length > 0 || assetPanels.length > 0) {
const leftColumnChildren: IJsonTabSetNode[] = [];
if (hierarchyPanels.length > 0) {
leftColumnChildren.push({
type: 'tabset',
weight: 50,
enableMaximize: true,
children: hierarchyPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
if (assetPanels.length > 0) {
leftColumnChildren.push({
type: 'tabset',
weight: 50,
enableMaximize: true,
children: assetPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
mainRowChildren.push({
type: 'row',
weight: 20,
children: leftColumnChildren
});
}
if (centerColumnChildren.length > 0) {
if (centerColumnChildren.length === 1) {
const centerChild = centerColumnChildren[0];
if (centerChild && centerChild.type === 'tabset') {
mainRowChildren.push({
type: 'tabset',
weight: 60,
enableMaximize: true,
children: centerChild.children
} as IJsonTabSetNode);
} else if (centerChild) {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerChild.children
} as IJsonRowNode);
}
} else {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerColumnChildren
});
}
}
if (rightPanels.length > 0) {
mainRowChildren.push({
type: 'tabset',
weight: 20,
enableMaximize: true,
children: rightPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
return {
global: {
tabEnableClose: true,
tabEnableRename: false,
tabSetEnableMaximize: true,
tabSetEnableDrop: true,
tabSetEnableDrag: true,
tabSetEnableDivide: true,
borderEnableDrop: true,
borderAutoSelectTabWhenOpen: true,
borderAutoSelectTabWhenClosed: true
},
borders: [
{
type: 'border',
location: 'bottom',
size: 200,
children: []
},
{
type: 'border',
location: 'right',
size: 300,
children: []
}
],
layout: {
type: 'row',
weight: 100,
children: mainRowChildren
}
};
return LayoutBuilder.createDefaultLayout(panels, activePanelId);
}, [panels, activePanelId]);
const [model, setModel] = useState<Model>(() => {
@@ -440,7 +138,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose, activePanelId }:
if (previousLayoutJsonRef.current && previousIds) {
try {
const savedLayout = JSON.parse(previousLayoutJsonRef.current);
const mergedLayout = mergeLayouts(savedLayout, defaultLayout, panels);
const mergedLayout = LayoutMerger.merge(savedLayout, defaultLayout, panels);
const newModel = Model.fromJson(mergedLayout);
setModel(newModel);
return;