refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 (#216)
* 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
GitHub
190
packages/editor-app/src/shared/layout/LayoutBuilder.ts
Normal file
190
packages/editor-app/src/shared/layout/LayoutBuilder.ts
Normal file
@@ -0,0 +1,190 @@
|
||||
import type { IJsonModel, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
|
||||
import type { FlexDockPanel } from './types';
|
||||
|
||||
export class LayoutBuilder {
|
||||
static createDefaultLayout(panels: FlexDockPanel[], activePanelId?: string): 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)
|
||||
);
|
||||
|
||||
const centerColumnChildren = this.buildCenterColumn(centerPanels, bottomPanels, activePanelId);
|
||||
const mainRowChildren = this.buildMainRow(hierarchyPanels, assetPanels, centerColumnChildren, rightPanels);
|
||||
|
||||
return {
|
||||
global: {
|
||||
tabEnableClose: true,
|
||||
tabEnableRename: false,
|
||||
tabSetEnableMaximize: true,
|
||||
borderSize: 200,
|
||||
tabSetMinWidth: 100,
|
||||
tabSetMinHeight: 100
|
||||
},
|
||||
borders: [],
|
||||
layout: {
|
||||
type: 'row',
|
||||
weight: 100,
|
||||
children: mainRowChildren
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private static buildCenterColumn(
|
||||
centerPanels: FlexDockPanel[],
|
||||
bottomPanels: FlexDockPanel[],
|
||||
activePanelId?: string
|
||||
): (IJsonTabSetNode | IJsonRowNode)[] {
|
||||
const children: (IJsonTabSetNode | IJsonRowNode)[] = [];
|
||||
|
||||
if (centerPanels.length > 0) {
|
||||
let activeTabIndex = 0;
|
||||
if (activePanelId) {
|
||||
const index = centerPanels.findIndex((p) => p.id === activePanelId);
|
||||
if (index !== -1) {
|
||||
activeTabIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
children.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) {
|
||||
children.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
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
|
||||
private static buildMainRow(
|
||||
hierarchyPanels: FlexDockPanel[],
|
||||
assetPanels: FlexDockPanel[],
|
||||
centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[],
|
||||
rightPanels: FlexDockPanel[]
|
||||
): (IJsonTabSetNode | IJsonRowNode)[] {
|
||||
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
|
||||
|
||||
if (hierarchyPanels.length > 0 || assetPanels.length > 0) {
|
||||
const leftColumnChildren = this.buildLeftColumn(hierarchyPanels, assetPanels);
|
||||
mainRowChildren.push({
|
||||
type: 'row',
|
||||
weight: 20,
|
||||
children: leftColumnChildren
|
||||
});
|
||||
}
|
||||
|
||||
if (centerColumnChildren.length > 0) {
|
||||
this.addCenterColumn(mainRowChildren, 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 mainRowChildren;
|
||||
}
|
||||
|
||||
private static buildLeftColumn(
|
||||
hierarchyPanels: FlexDockPanel[],
|
||||
assetPanels: FlexDockPanel[]
|
||||
): IJsonTabSetNode[] {
|
||||
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
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
return leftColumnChildren;
|
||||
}
|
||||
|
||||
private static addCenterColumn(
|
||||
mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[],
|
||||
centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[]
|
||||
): void {
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
132
packages/editor-app/src/shared/layout/LayoutMerger.ts
Normal file
132
packages/editor-app/src/shared/layout/LayoutMerger.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import type { IJsonModel, IJsonTabNode } from 'flexlayout-react';
|
||||
import type { FlexDockPanel } from './types';
|
||||
|
||||
export class LayoutMerger {
|
||||
static merge(savedLayout: IJsonModel, defaultLayout: IJsonModel, currentPanels: FlexDockPanel[]): IJsonModel {
|
||||
const currentPanelIds = new Set(currentPanels.map(p => p.id));
|
||||
const savedPanelIds = this.collectPanelIds(savedLayout);
|
||||
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));
|
||||
|
||||
this.clearBorders(mergedLayout);
|
||||
|
||||
if (removedPanelIds.length > 0) {
|
||||
this.removePanels(mergedLayout.layout, removedPanelIds);
|
||||
}
|
||||
|
||||
if (newPanelIds.length === 0) {
|
||||
return mergedLayout;
|
||||
}
|
||||
|
||||
const newPanelTabs = this.findNewPanels(defaultLayout.layout, newPanelIds);
|
||||
|
||||
if (!this.addNewPanelsToCenter(mergedLayout.layout, newPanelTabs)) {
|
||||
return defaultLayout;
|
||||
}
|
||||
|
||||
return mergedLayout;
|
||||
}
|
||||
|
||||
private static collectPanelIds(layout: IJsonModel): Set<string> {
|
||||
const panelIds = new Set<string>();
|
||||
const collect = (node: any) => {
|
||||
if (node.type === 'tab' && node.id) {
|
||||
panelIds.add(node.id);
|
||||
}
|
||||
if (node.children) {
|
||||
node.children.forEach((child: any) => collect(child));
|
||||
}
|
||||
};
|
||||
|
||||
collect(layout.layout);
|
||||
|
||||
if (layout.borders) {
|
||||
layout.borders.forEach((border: any) => {
|
||||
if (border.children) {
|
||||
collect({ children: border.children });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return panelIds;
|
||||
}
|
||||
|
||||
private static clearBorders(layout: IJsonModel): void {
|
||||
if (layout.borders) {
|
||||
layout.borders = layout.borders.map((border: any) => ({
|
||||
...border,
|
||||
children: []
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private static removePanels(node: any, removedPanelIds: string[]): boolean {
|
||||
if (!node.children) return false;
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
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) => this.removePanels(child, removedPanelIds));
|
||||
|
||||
return node.children.length < originalLength;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private static findNewPanels(node: any, newPanelIds: string[]): IJsonTabNode[] {
|
||||
const newPanelTabs: IJsonTabNode[] = [];
|
||||
const find = (n: any) => {
|
||||
if (n.type === 'tab' && n.id && newPanelIds.includes(n.id)) {
|
||||
newPanelTabs.push(n);
|
||||
}
|
||||
if (n.children) {
|
||||
n.children.forEach((child: any) => find(child));
|
||||
}
|
||||
};
|
||||
find(node);
|
||||
return newPanelTabs;
|
||||
}
|
||||
|
||||
private static addNewPanelsToCenter(node: any, newPanelTabs: IJsonTabNode[]): boolean {
|
||||
if (node.type === 'tabset') {
|
||||
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) {
|
||||
node.children.push(...newPanelTabs);
|
||||
node.selected = node.children.length - 1;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (node.children) {
|
||||
for (const child of node.children) {
|
||||
if (this.addNewPanelsToCenter(child, newPanelTabs)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
3
packages/editor-app/src/shared/layout/index.ts
Normal file
3
packages/editor-app/src/shared/layout/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
export * from './LayoutMerger';
|
||||
export * from './LayoutBuilder';
|
||||
8
packages/editor-app/src/shared/layout/types.ts
Normal file
8
packages/editor-app/src/shared/layout/types.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export interface FlexDockPanel {
|
||||
id: string;
|
||||
title: string;
|
||||
content: ReactNode;
|
||||
closable?: boolean;
|
||||
}
|
||||
Reference in New Issue
Block a user