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

refactor(editor): 优化布局管理和行为树文件处理

Browse Source
This commit is contained in:
YHH
2025-11-04 23:53:26 +08:00
parent f9afa22406
commit e03b106652
15 changed files with 958 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/editor-app/src/components/AssetBrowser.tsx
View File

@@ -1,9 +1,9 @@
import { useState, useEffect } from 'react';
import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3, LayoutGrid, List } from 'lucide-react';
import { useState, useEffect, useRef } from 'react';
import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3, LayoutGrid, List, ChevronsUp } from 'lucide-react';
import { Core } from '@esengine/ecs-framework';
import { MessageHub, FileActionRegistry } from '@esengine/editor-core';
import { TauriAPI, DirectoryEntry } from '../api/tauri';
import { FileTree } from './FileTree';
import { FileTree, FileTreeHandle } from './FileTree';
import { ResizablePanel } from './ResizablePanel';
import { ContextMenu, ContextMenuItem } from './ContextMenu';
import '../styles/AssetBrowser.css';
@@ -26,6 +26,8 @@ interface AssetBrowserProps {
export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserProps) {
const messageHub = Core.services.resolve(MessageHub);
const fileActionRegistry = Core.services.resolve(FileActionRegistry);
const detailViewFileTreeRef = useRef<FileTreeHandle>(null);
const treeOnlyViewFileTreeRef = useRef<FileTreeHandle>(null);
const [currentPath, setCurrentPath] = useState<string | null>(null);
const [selectedPath, setSelectedPath] = useState<string | null>(null);
const [assets, setAssets] = useState<AssetItem[]>([]);
@@ -369,6 +371,11 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
const getFileIcon = (asset: AssetItem) => {
if (asset.type === 'folder') {
// 检查是否为框架专用文件夹
const folderName = asset.name.toLowerCase();
if (folderName === 'plugins' || folderName === '.ecs') {
return <Folder className="asset-icon system-folder" style={{ color: '#42a5f5' }} size={20} />;
}
return <Folder className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
}
@@ -421,56 +428,60 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
background: '#252526',
alignItems: 'center'
}}>
<div style={{ display: 'flex', gap: '4px' }}>
<div className="view-mode-buttons">
<button
className={`view-mode-btn ${showDetailView ? 'active' : ''}`}
onClick={() => {
setShowDetailView(true);
localStorage.setItem('asset-browser-detail-view', 'true');
}}
style={{
padding: '6px 12px',
background: showDetailView ? '#0e639c' : 'transparent',
border: '1px solid #3e3e3e',
borderRadius: '3px',
color: showDetailView ? '#ffffff' : '#cccccc',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
gap: '6px',
transition: 'all 0.2s',
fontSize: '12px',
fontWeight: showDetailView ? '500' : 'normal'
}}
title="显示详细视图（树形图 + 资产列表）"
>
<LayoutGrid size={14} />
详细视图
<span className="view-mode-text">详细视图</span>
</button>
<button
className={`view-mode-btn ${!showDetailView ? 'active' : ''}`}
onClick={() => {
setShowDetailView(false);
localStorage.setItem('asset-browser-detail-view', 'false');
}}
style={{
padding: '6px 12px',
background: !showDetailView ? '#0e639c' : 'transparent',
border: '1px solid #3e3e3e',
borderRadius: '3px',
color: !showDetailView ? '#ffffff' : '#cccccc',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
gap: '6px',
transition: 'all 0.2s',
fontSize: '12px',
fontWeight: !showDetailView ? '500' : 'normal'
}}
title="仅显示树形图（查看完整路径）"
>
<List size={14} />
树形图
<span className="view-mode-text">树形图</span>
</button>
</div>
<button
onClick={() => {
if (showDetailView) {
detailViewFileTreeRef.current?.collapseAll();
} else {
treeOnlyViewFileTreeRef.current?.collapseAll();
}
}}
style={{
padding: '6px 8px',
background: 'transparent',
border: '1px solid #3e3e3e',
color: '#cccccc',
cursor: 'pointer',
transition: 'all 0.2s ease',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '3px'
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#2a2d2e';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
}}
title="收起所有文件夹"
>
<ChevronsUp size={14} />
</button>
<input
type="text"
className="asset-search"
@@ -498,6 +509,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
leftOrTop={
<div className="asset-browser-tree">
<FileTree
ref={detailViewFileTreeRef}
rootPath={projectPath}
onSelectFile={handleFolderSelect}
selectedPath={currentPath}
@@ -575,6 +587,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
) : (
<div className="asset-browser-tree-only">
<FileTree
ref={treeOnlyViewFileTreeRef}
rootPath={projectPath}
onSelectFile={handleFolderSelect}
selectedPath={currentPath}

136
packages/editor-app/src/components/FileTree.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Folder, ChevronRight, ChevronDown, File, Edit3, Trash2, FolderOpen, Copy, FileText, FolderPlus, ChevronsDown, ChevronsUp } from 'lucide-react';
import { TauriAPI, DirectoryEntry } from '../api/tauri';
import { MessageHub, FileActionRegistry } from '@esengine/editor-core';
@@ -28,7 +28,11 @@ interface FileTreeProps {
showFiles?: boolean;
}
export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, searchQuery, showFiles = true }: FileTreeProps) {
export interface FileTreeHandle {
collapseAll: () => void;
}
export const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(({ rootPath, onSelectFile, selectedPath, messageHub, searchQuery, showFiles = true }, ref) => {
const [tree, setTree] = useState<TreeNode[]>([]);
const [loading, setLoading] = useState(false);
const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
@@ -48,6 +52,26 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
const [filteredTree, setFilteredTree] = useState<TreeNode[]>([]);
const fileActionRegistry = Core.services.resolve(FileActionRegistry);
const collapseAll = () => {
const collapseNode = (node: TreeNode): TreeNode => {
if (node.type === 'folder') {
return {
...node,
expanded: false,
children: node.children ? node.children.map(collapseNode) : node.children
};
}
return node;
};
const collapsedTree = tree.map(node => collapseNode(node));
setTree(collapsedTree);
};
useImperativeHandle(ref, () => ({
collapseAll
}));
useEffect(() => {
if (rootPath) {
loadRootDirectory(rootPath);
@@ -214,8 +238,72 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
};
const refreshTree = async () => {
if (rootPath) {
await loadRootDirectory(rootPath);
if (!rootPath) return;
// 保存当前展开状态
const expandedPaths = new Set<string>();
const collectExpandedPaths = (nodes: TreeNode[]) => {
for (const node of nodes) {
if (node.type === 'folder' && node.expanded) {
expandedPaths.add(node.path);
if (node.children) {
collectExpandedPaths(node.children);
}
}
}
};
collectExpandedPaths(tree);
// 重新加载根目录，获取最新的文件结构
try {
const entries = await TauriAPI.listDirectory(rootPath);
const children = entriesToNodes(entries);
const rootName = rootPath.split(/[/\\]/).filter((p) => p).pop() || 'Project';
let rootNode: TreeNode = {
name: rootName,
path: rootPath,
type: 'folder',
children: children,
expanded: true,
loaded: true
};
// 恢复展开状态
if (expandedPaths.size > 0) {
const restoreExpandedState = async (node: TreeNode): Promise<TreeNode> => {
if (node.type === 'folder' && expandedPaths.has(node.path)) {
let children = node.children || [];
if (!node.loaded && node.children) {
children = await loadChildren(node);
}
const restoredChildren = await Promise.all(
children.map(child => restoreExpandedState(child))
);
return {
...node,
expanded: true,
loaded: true,
children: restoredChildren
};
} else if (node.type === 'folder' && node.children) {
const restoredChildren = await Promise.all(
node.children.map(child => restoreExpandedState(child))
);
return {
...node,
children: restoredChildren
};
}
return node;
};
rootNode = await restoreExpandedState(rootNode);
}
setTree([rootNode]);
} catch (error) {
console.error('Failed to refresh directory:', error);
}
};
@@ -252,22 +340,6 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
setTree(expandedTree);
};
const collapseAll = () => {
const collapseNode = (node: TreeNode): TreeNode => {
if (node.type === 'folder') {
return {
...node,
expanded: false,
children: node.children ? node.children.map(collapseNode) : node.children
};
}
return node;
};
const collapsedTree = tree.map(node => collapseNode(node));
setTree(collapsedTree);
};
const handleRename = async (node: TreeNode) => {
if (!newName || newName === node.name) {
setRenamingNode(null);
@@ -570,7 +642,11 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
</span>
<span className="tree-icon">
{node.type === 'folder' ? (
<Folder size={16} style={{ color: '#ffa726' }} />
node.name.toLowerCase() === 'plugins' || node.name.toLowerCase() === '.ecs' ? (
<Folder size={16} className="system-folder-icon" style={{ color: '#42a5f5' }} />
) : (
<Folder size={16} style={{ color: '#ffa726' }} />
)
) : (
<File size={16} style={{ color: '#90caf9' }} />
)}
@@ -615,22 +691,6 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
return (
<>
<div className="file-tree-toolbar">
<button
className="file-tree-toolbar-btn"
onClick={expandAll}
title="展开全部文件夹"
>
<ChevronsDown size={14} />
</button>
<button
className="file-tree-toolbar-btn"
onClick={collapseAll}
title="收缩全部文件夹"
>
<ChevronsUp size={14} />
</button>
</div>
<div
className="file-tree"
onContextMenu={(e) => {
@@ -688,4 +748,4 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
)}
</>
);
}
});

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

@@ -1,8 +1,143 @@
import { useCallback, ReactNode, useMemo } from 'react';
import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
import { useCallback, ReactNode, useRef, useEffect, useState } from 'react';
import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode, Action, IJsonTabNode, DockLocation } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';
import '../styles/FlexLayoutDock.css';
/**
* 合并保存的布局和新的默认布局
* 保留用户的布局调整（大小、位置等），同时添加新面板并移除已关闭的面板
*/
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;
@@ -13,9 +148,15 @@ export interface FlexDockPanel {
interface FlexLayoutDockContainerProps {
panels: FlexDockPanel[];
onPanelClose?: (panelId: string) => void;
activePanelId?: string;
}
export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDockContainerProps) {
export function FlexLayoutDockContainer({ panels, onPanelClose, activePanelId }: FlexLayoutDockContainerProps) {
const layoutRef = useRef<Layout>(null);
const previousLayoutJsonRef = useRef<string | null>(null);
const previousPanelIdsRef = useRef<string>('');
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'));
@@ -28,9 +169,20 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
// 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,
@@ -44,6 +196,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
centerColumnChildren.push({
type: 'tabset',
weight: 30,
enableMaximize: true,
children: bottomPanels.map((p) => ({
type: 'tab',
name: p.title,
@@ -65,6 +218,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
leftColumnChildren.push({
type: 'tabset',
weight: 50,
enableMaximize: true,
children: hierarchyPanels.map((p) => ({
type: 'tab',
name: p.title,
@@ -79,6 +233,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
leftColumnChildren.push({
type: 'tabset',
weight: 50,
enableMaximize: true,
children: assetPanels.map((p) => ({
type: 'tab',
name: p.title,
@@ -102,6 +257,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
mainRowChildren.push({
type: 'tabset',
weight: 60,
enableMaximize: true,
children: centerChild.children
} as IJsonTabSetNode);
} else if (centerChild) {
@@ -123,6 +279,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
mainRowChildren.push({
type: 'tabset',
weight: 20,
enableMaximize: true,
children: rightPanels.map((p) => ({
type: 'tab',
name: p.title,
@@ -137,22 +294,168 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
global: {
tabEnableClose: true,
tabEnableRename: false,
tabSetEnableMaximize: false,
tabSetEnableMaximize: true,
tabSetEnableDrop: true,
tabSetEnableDrag: true,
tabSetEnableDivide: true,
borderEnableDrop: true
borderEnableDrop: true,
borderAutoSelectTabWhenOpen: true,
borderAutoSelectTabWhenClosed: true
},
borders: [],
borders: [
{
type: 'border',
location: 'bottom',
size: 200,
children: []
},
{
type: 'border',
location: 'right',
size: 300,
children: []
}
],
layout: {
type: 'row',
weight: 100,
children: mainRowChildren
}
};
}, [panels]);
}, [panels, activePanelId]);
const model = useMemo(() => Model.fromJson(createDefaultLayout()), [createDefaultLayout]);
const [model, setModel] = useState<Model>(() => {
try {
return Model.fromJson(createDefaultLayout());
} catch (error) {
throw new Error(`Failed to create layout model: ${error instanceof Error ? error.message : String(error)}`);
}
});
useEffect(() => {
try {
// 检查面板ID列表是否真的变化了（而不只是标题等属性变化）
const currentPanelIds = panels.map(p => p.id).sort().join(',');
const previousIds = previousPanelIdsRef.current;
// 检查标题是否变化
const currentTitles = new Map(panels.map(p => [p.id, p.title]));
const titleChanges: Array<{ id: string; newTitle: string }> = [];
for (const panel of panels) {
const previousTitle = previousPanelTitlesRef.current.get(panel.id);
if (previousTitle && previousTitle !== panel.title) {
titleChanges.push({ id: panel.id, newTitle: panel.title });
}
}
// 更新标题引用
previousPanelTitlesRef.current = currentTitles;
// 如果只是标题变化，更新tab名称
if (titleChanges.length > 0 && currentPanelIds === previousIds && model) {
titleChanges.forEach(({ id, newTitle }) => {
const node = model.getNodeById(id);
if (node && node.getType() === 'tab') {
model.doAction(Actions.renameTab(id, newTitle));
}
});
return;
}
if (currentPanelIds === previousIds) {
return;
}
// 计算新增和移除的面板
const prevSet = new Set(previousIds.split(',').filter(id => id));
const currSet = new Set(currentPanelIds.split(',').filter(id => id));
const newPanelIds = Array.from(currSet).filter(id => !prevSet.has(id));
const removedPanelIds = Array.from(prevSet).filter(id => !currSet.has(id));
previousPanelIdsRef.current = currentPanelIds;
// 如果已经有布局且只是添加新面板，使用Action动态添加
if (model && newPanelIds.length > 0 && removedPanelIds.length === 0 && previousIds) {
// 找到要添加的面板
const newPanels = panels.filter(p => newPanelIds.includes(p.id));
// 找到中心区域的tabset ID
let centerTabsetId: string | null = null;
model.visitNodes((node: any) => {
if (node.getType() === 'tabset') {
const tabset = node as any;
// 检查是否是中心tabset
const children = tabset.getChildren();
const hasNonSidePanel = children.some((child: any) => {
const id = child.getId();
return !id.includes('hierarchy') &&
!id.includes('asset') &&
!id.includes('inspector') &&
!id.includes('console');
});
if (hasNonSidePanel && !centerTabsetId) {
centerTabsetId = tabset.getId();
}
}
});
if (centerTabsetId) {
// 动态添加tab到中心tabset
newPanels.forEach(panel => {
model.doAction(Actions.addNode(
{
type: 'tab',
name: panel.title,
id: panel.id,
component: panel.id,
enableClose: panel.closable !== false
},
centerTabsetId!,
DockLocation.CENTER,
-1 // 添加到末尾
));
});
// 选中最后添加的面板
const lastPanel = newPanels[newPanels.length - 1];
if (lastPanel) {
setTimeout(() => {
const node = model.getNodeById(lastPanel.id);
if (node) {
model.doAction(Actions.selectTab(lastPanel.id));
}
}, 0);
}
return;
}
}
// 否则完全重建布局
const defaultLayout = createDefaultLayout();
// 如果有保存的布局，尝试合并
if (previousLayoutJsonRef.current && previousIds) {
try {
const savedLayout = JSON.parse(previousLayoutJsonRef.current);
const mergedLayout = mergeLayouts(savedLayout, defaultLayout, panels);
const newModel = Model.fromJson(mergedLayout);
setModel(newModel);
return;
} catch (error) {
// 合并失败，使用默认布局
}
}
// 使用默认布局
const newModel = Model.fromJson(defaultLayout);
setModel(newModel);
} catch (error) {
throw new Error(`Failed to update layout model: ${error instanceof Error ? error.message : String(error)}`);
}
}, [createDefaultLayout, panels]);
const factory = useCallback((node: TabNode) => {
const component = node.getComponent();
@@ -160,9 +463,9 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
return panel?.content || <div>Panel not found</div>;
}, [panels]);
const onAction = useCallback((action: any) => {
const onAction = useCallback((action: Action) => {
if (action.type === Actions.DELETE_TAB) {
const tabId = action.data.node;
const tabId = (action.data as { node: string }).node;
if (onPanelClose) {
onPanelClose(tabId);
}
@@ -170,12 +473,20 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
return action;
}, [onPanelClose]);
const onModelChange = useCallback((newModel: Model) => {
// 保存布局状态以便在panels变化时恢复
const layoutJson = newModel.toJson();
previousLayoutJsonRef.current = JSON.stringify(layoutJson);
}, []);
return (
<div className="flexlayout-dock-container">
<Layout
ref={layoutRef}
model={model}
factory={factory}
onAction={onAction}
onModelChange={onModelChange}
/>
</div>
);