refactor: reorganize package structure and decouple framework packages (#338)
* refactor: reorganize package structure and decouple framework packages ## Package Structure Reorganization - Reorganized 55 packages into categorized subdirectories: - packages/framework/ - Generic framework (Laya/Cocos compatible) - packages/engine/ - ESEngine core modules - packages/rendering/ - Rendering modules (WASM dependent) - packages/physics/ - Physics modules - packages/streaming/ - World streaming - packages/network-ext/ - Network extensions - packages/editor/ - Editor framework and plugins - packages/rust/ - Rust WASM engine - packages/tools/ - Build tools and SDK ## Framework Package Decoupling - Decoupled behavior-tree and blueprint packages from ESEngine dependencies - Created abstracted interfaces (IBTAssetManager, IBehaviorTreeAssetContent) - ESEngine-specific code moved to esengine/ subpath exports - Framework packages now usable with Cocos/Laya without ESEngine ## CI Configuration - Updated CI to only type-check and lint framework packages - Added type-check:framework and lint:framework scripts ## Breaking Changes - Package import paths changed due to directory reorganization - ESEngine integrations now use subpath imports (e.g., '@esengine/behavior-tree/esengine') * fix: update es-engine file path after directory reorganization * docs: update README to focus on framework over engine * ci: only build framework packages, remove Rust/WASM dependencies * fix: remove esengine subpath from behavior-tree and blueprint builds ESEngine integration code will only be available in full engine builds. Framework packages are now purely engine-agnostic. * fix: move network-protocols to framework, build both in CI * fix: update workflow paths from packages/core to packages/framework/core * fix: exclude esengine folder from type-check in behavior-tree and blueprint * fix: update network tsconfig references to new paths * fix: add test:ci:framework to only test framework packages in CI * fix: only build core and math npm packages in CI * fix: exclude test files from CodeQL and fix string escaping security issue
This commit is contained in:
YHH
GitHub
@@ -0,0 +1,36 @@
|
||||
import type { IJsonModel, IJsonTabNode, IJsonBorderNode as FlexBorderNode } from 'flexlayout-react';
|
||||
|
||||
export interface IJsonRowNode {
|
||||
type: 'row';
|
||||
id?: string;
|
||||
weight?: number;
|
||||
children: IJsonLayoutNode[];
|
||||
}
|
||||
|
||||
export interface IJsonTabsetNode {
|
||||
type: 'tabset';
|
||||
id?: string;
|
||||
weight?: number;
|
||||
selected?: number;
|
||||
children: IJsonTabNode[];
|
||||
}
|
||||
|
||||
export type IJsonLayoutNode = IJsonRowNode | IJsonTabsetNode | IJsonTabNode;
|
||||
|
||||
export type { FlexBorderNode as IJsonBorderNode };
|
||||
|
||||
export function isTabsetNode(node: IJsonLayoutNode): node is IJsonTabsetNode {
|
||||
return node.type === 'tabset';
|
||||
}
|
||||
|
||||
export function isRowNode(node: IJsonLayoutNode): node is IJsonRowNode {
|
||||
return node.type === 'row';
|
||||
}
|
||||
|
||||
export function isTabNode(node: IJsonLayoutNode): node is IJsonTabNode {
|
||||
return node.type === 'tab';
|
||||
}
|
||||
|
||||
export function hasChildren(node: IJsonLayoutNode): node is IJsonRowNode | IJsonTabsetNode {
|
||||
return node.type === 'row' || node.type === 'tabset';
|
||||
}
|
||||
168
packages/editor/editor-app/src/shared/layout/LayoutBuilder.ts
Normal file
168
packages/editor/editor-app/src/shared/layout/LayoutBuilder.ts
Normal file
@@ -0,0 +1,168 @@
|
||||
import type { IJsonModel, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
|
||||
import type { FlexDockPanel } from './types';
|
||||
|
||||
// 布局比例配置 | 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 {
|
||||
// 根据布局配置分组面板 | 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(
|
||||
centerPanels,
|
||||
bottomPanels,
|
||||
rightTopPanels,
|
||||
rightBottomPanels,
|
||||
activePanelId
|
||||
);
|
||||
|
||||
return {
|
||||
global: {
|
||||
tabEnableClose: true,
|
||||
tabEnableRename: false,
|
||||
tabSetEnableMaximize: true,
|
||||
borderSize: 200,
|
||||
tabSetMinWidth: 100,
|
||||
tabSetMinHeight: 100,
|
||||
splitterSize: 6,
|
||||
splitterExtra: 4
|
||||
},
|
||||
borders: [],
|
||||
layout: {
|
||||
type: 'row',
|
||||
weight: 100,
|
||||
children: mainRowChildren
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
private static buildLayout(
|
||||
centerPanels: FlexDockPanel[],
|
||||
bottomPanels: FlexDockPanel[],
|
||||
rightTopPanels: FlexDockPanel[],
|
||||
rightBottomPanels: FlexDockPanel[],
|
||||
activePanelId?: string
|
||||
): (IJsonTabSetNode | IJsonRowNode)[] {
|
||||
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
|
||||
|
||||
// 构建左侧区域（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 = centerPanels.findIndex((p) => p.id === activePanelId);
|
||||
if (index !== -1) {
|
||||
activeTabIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
// 计算底部面板的权重 | 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: centerWeight,
|
||||
selected: activeTabIndex,
|
||||
enableMaximize: true,
|
||||
children: centerPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
component: p.id,
|
||||
enableClose: p.closable !== false
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
// 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 (rightTopPanels.length > 0) {
|
||||
rightColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: DEFAULT_RIGHT_TOP_HEIGHT_RATIO,
|
||||
enableMaximize: true,
|
||||
children: rightTopPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
component: p.id,
|
||||
enableClose: p.closable !== false
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
if (rightBottomPanels.length > 0) {
|
||||
rightColumnChildren.push({
|
||||
type: 'tabset',
|
||||
weight: DEFAULT_RIGHT_BOTTOM_HEIGHT_RATIO,
|
||||
enableMaximize: true,
|
||||
children: rightBottomPanels.map((p) => ({
|
||||
type: 'tab',
|
||||
name: p.title,
|
||||
id: p.id,
|
||||
component: p.id,
|
||||
enableClose: p.closable !== false
|
||||
}))
|
||||
});
|
||||
}
|
||||
|
||||
if (rightColumnChildren.length > 0) {
|
||||
mainRowChildren.push({
|
||||
type: 'row',
|
||||
weight: DEFAULT_RIGHT_PANEL_WEIGHT,
|
||||
children: rightColumnChildren
|
||||
} as IJsonRowNode);
|
||||
}
|
||||
|
||||
return mainRowChildren;
|
||||
}
|
||||
}
|
||||
148
packages/editor/editor-app/src/shared/layout/LayoutMerger.ts
Normal file
148
packages/editor/editor-app/src/shared/layout/LayoutMerger.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
import type { IJsonModel, IJsonTabNode } from 'flexlayout-react';
|
||||
import type { FlexDockPanel } from './types';
|
||||
import type { IJsonLayoutNode, IJsonBorderNode, IJsonTabsetNode } from './FlexLayoutTypes';
|
||||
import { hasChildren, isTabNode, isTabsetNode } from './FlexLayoutTypes';
|
||||
|
||||
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);
|
||||
|
||||
// 构建面板位置映射 | 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;
|
||||
}
|
||||
|
||||
return mergedLayout;
|
||||
}
|
||||
|
||||
private static collectPanelIds(layout: IJsonModel): Set<string> {
|
||||
const panelIds = new Set<string>();
|
||||
const collect = (node: IJsonLayoutNode) => {
|
||||
if (isTabNode(node) && node.id) {
|
||||
panelIds.add(node.id);
|
||||
}
|
||||
if (hasChildren(node)) {
|
||||
node.children.forEach((child) => collect(child as IJsonLayoutNode));
|
||||
}
|
||||
};
|
||||
|
||||
if (layout.layout) {
|
||||
collect(layout.layout as IJsonLayoutNode);
|
||||
}
|
||||
|
||||
if (layout.borders) {
|
||||
layout.borders.forEach((border: IJsonBorderNode) => {
|
||||
if (border.children) {
|
||||
border.children.forEach((child) => collect(child as IJsonLayoutNode));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return panelIds;
|
||||
}
|
||||
|
||||
private static clearBorders(layout: IJsonModel): void {
|
||||
if (layout.borders) {
|
||||
layout.borders = layout.borders.map((border: IJsonBorderNode) => ({
|
||||
...border,
|
||||
children: []
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
private static removePanels(node: IJsonLayoutNode, removedPanelIds: string[]): boolean {
|
||||
if (!hasChildren(node)) return false;
|
||||
|
||||
const originalLength = node.children.length;
|
||||
node.children = node.children.filter((child) => {
|
||||
if (isTabNode(child)) {
|
||||
return !removedPanelIds.includes(child.id || '');
|
||||
}
|
||||
return true;
|
||||
}) as any;
|
||||
|
||||
if (isTabsetNode(node) && node.children.length < originalLength) {
|
||||
if (node.selected !== undefined && node.selected >= node.children.length) {
|
||||
node.selected = Math.max(0, node.children.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
node.children.forEach((child) => this.removePanels(child as IJsonLayoutNode, removedPanelIds));
|
||||
|
||||
return node.children.length < originalLength;
|
||||
}
|
||||
|
||||
private static findNewPanels(node: IJsonLayoutNode, newPanelIds: string[]): IJsonTabNode[] {
|
||||
const newPanelTabs: IJsonTabNode[] = [];
|
||||
const find = (n: IJsonLayoutNode) => {
|
||||
if (isTabNode(n) && n.id && newPanelIds.includes(n.id)) {
|
||||
newPanelTabs.push(n);
|
||||
}
|
||||
if (hasChildren(n)) {
|
||||
n.children.forEach((child) => find(child as IJsonLayoutNode));
|
||||
}
|
||||
};
|
||||
find(node);
|
||||
return newPanelTabs;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将新面板添加到中心区域
|
||||
* 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)) {
|
||||
// 检查是否是中心 tabset（包含 center 位置的面板）
|
||||
// Check if this is center tabset (contains center position panels)
|
||||
const hasCenterPanel = node.children?.some((child) => {
|
||||
const id = child.id || '';
|
||||
const position = panelPositionMap.get(id);
|
||||
return position === 'center' || position === undefined;
|
||||
});
|
||||
|
||||
if (hasCenterPanel && node.children) {
|
||||
node.children.push(...newPanelTabs);
|
||||
node.selected = node.children.length - 1;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
if (hasChildren(node)) {
|
||||
for (const child of node.children) {
|
||||
if (this.addNewPanelsToCenter(child as IJsonLayoutNode, newPanelTabs, panelPositionMap)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
3
packages/editor/editor-app/src/shared/layout/index.ts
Normal file
3
packages/editor/editor-app/src/shared/layout/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './types';
|
||||
export * from './LayoutMerger';
|
||||
export * from './LayoutBuilder';
|
||||
74
packages/editor/editor-app/src/shared/layout/types.ts
Normal file
74
packages/editor/editor-app/src/shared/layout/types.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
/**
|
||||
* 面板布局位置
|
||||
* 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