647 lines
29 KiB
TypeScript
647 lines
29 KiB
TypeScript
|
import { useState, useEffect, useMemo } from 'react';
|
|||
|
|
import { Entity } from '@esengine/ecs-framework';
|
|||
|
|
import { EntityStoreService, MessageHub } from '@esengine/editor-core';
|
|||
|
|
import { PropertyInspector } from './PropertyInspector';
|
|||
|
|
import { BehaviorTreeNodeProperties } from './BehaviorTreeNodeProperties';
|
|||
|
|
import { FileSearch, ChevronDown, ChevronRight, X, Settings, Box, AlertTriangle, Copy, File as FileIcon, Folder, Clock, HardDrive } from 'lucide-react';
|
|||
|
|
import { BehaviorTreeNode, useBehaviorTreeStore } from '../stores/behaviorTreeStore';
|
|||
|
|
import { ICON_MAP } from '../presentation/config/editorConstants';
|
|||
|
|
import { useNodeOperations } from '../presentation/hooks/useNodeOperations';
|
|||
|
|
import { useCommandHistory } from '../presentation/hooks/useCommandHistory';
|
|||
|
|
import { NodeFactory } from '../infrastructure/factories/NodeFactory';
|
|||
|
|
import { BehaviorTreeValidator } from '../infrastructure/validation/BehaviorTreeValidator';
|
|||
|
|
import { TauriAPI } from '../api/tauri';
|
|||
|
|
import '../styles/EntityInspector.css';
|
|||
|
|
|
|||
|
|
interface InspectorProps {
|
|||
|
|
entityStore: EntityStoreService;
|
|||
|
|
messageHub: MessageHub;
|
|||
|
|
projectPath?: string | null;
|
|||
|
|
isExecuting?: boolean;
|
|||
|
|
executionMode?: 'idle' | 'running' | 'paused' | 'step';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AssetFileInfo {
|
|||
|
|
name: string;
|
|||
|
|
path: string;
|
|||
|
|
extension?: string;
|
|||
|
|
size?: number;
|
|||
|
|
modified?: number;
|
|||
|
|
isDirectory: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type InspectorTarget =
|
|||
|
|
| { type: 'entity'; data: Entity }
|
|||
|
|
| { type: 'remote-entity'; data: any; details?: any }
|
|||
|
|
| { type: 'behavior-tree-node'; data: BehaviorTreeNode }
|
|||
|
|
| { type: 'asset-file'; data: AssetFileInfo; content?: string }
|
|||
|
|
| null;
|
|||
|
|
|
|||
|
|
export function Inspector({ entityStore: _entityStore, messageHub, projectPath, isExecuting, executionMode }: InspectorProps) {
|
|||
|
|
const [target, setTarget] = useState<InspectorTarget>(null);
|
|||
|
|
const [expandedComponents, setExpandedComponents] = useState<Set<number>>(new Set());
|
|||
|
|
const [componentVersion, setComponentVersion] = useState(0);
|
|||
|
|
|
|||
|
|
// 行为树节点操作相关
|
|||
|
|
const nodeFactory = useMemo(() => new NodeFactory(), []);
|
|||
|
|
const validator = useMemo(() => new BehaviorTreeValidator(), []);
|
|||
|
|
const { commandManager } = useCommandHistory();
|
|||
|
|
const nodeOperations = useNodeOperations(nodeFactory, validator, commandManager);
|
|||
|
|
const { nodes, connections, isExecuting: storeIsExecuting } = useBehaviorTreeStore();
|
|||
|
|
|
|||
|
|
// 优先使用传入的 isExecuting，否则使用 store 中的
|
|||
|
|
const isRunning = isExecuting ?? storeIsExecuting;
|
|||
|
|
|
|||
|
|
// 当节点数据更新时，同步更新 target 中的节点
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (target?.type === 'behavior-tree-node') {
|
|||
|
|
const updatedNode = nodes.find(n => n.id === target.data.id);
|
|||
|
|
if (updatedNode) {
|
|||
|
|
const currentDataStr = JSON.stringify(target.data.data);
|
|||
|
|
const updatedDataStr = JSON.stringify(updatedNode.data);
|
|||
|
|
if (currentDataStr !== updatedDataStr) {
|
|||
|
|
setTarget({ type: 'behavior-tree-node', data: updatedNode });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [nodes]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const handleEntitySelection = (data: { entity: Entity | null }) => {
|
|||
|
|
if (data.entity) {
|
|||
|
|
setTarget({ type: 'entity', data: data.entity });
|
|||
|
|
} else {
|
|||
|
|
setTarget(null);
|
|||
|
|
}
|
|||
|
|
setComponentVersion(0);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRemoteEntitySelection = (data: { entity: any }) => {
|
|||
|
|
setTarget({ type: 'remote-entity', data: data.entity });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEntityDetails = (event: Event) => {
|
|||
|
|
const customEvent = event as CustomEvent;
|
|||
|
|
const details = customEvent.detail;
|
|||
|
|
if (target?.type === 'remote-entity') {
|
|||
|
|
setTarget({ ...target, details });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleBehaviorTreeNodeSelection = (data: { node: BehaviorTreeNode }) => {
|
|||
|
|
setTarget({ type: 'behavior-tree-node', data: data.node });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAssetFileSelection = async (data: { fileInfo: AssetFileInfo }) => {
|
|||
|
|
const fileInfo = data.fileInfo;
|
|||
|
|
|
|||
|
|
if (fileInfo.isDirectory) {
|
|||
|
|
setTarget({ type: 'asset-file', data: fileInfo });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const textExtensions = ['txt', 'json', 'md', 'ts', 'tsx', 'js', 'jsx', 'css', 'html', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'log', 'btree', 'ecs'];
|
|||
|
|
const isTextFile = fileInfo.extension && textExtensions.includes(fileInfo.extension.toLowerCase());
|
|||
|
|
|
|||
|
|
if (isTextFile) {
|
|||
|
|
try {
|
|||
|
|
const content = await TauriAPI.readFileContent(fileInfo.path);
|
|||
|
|
setTarget({ type: 'asset-file', data: fileInfo, content });
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to read file content:', error);
|
|||
|
|
setTarget({ type: 'asset-file', data: fileInfo });
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
setTarget({ type: 'asset-file', data: fileInfo });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleComponentChange = () => {
|
|||
|
|
setComponentVersion((prev) => prev + 1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const unsubEntitySelect = messageHub.subscribe('entity:selected', handleEntitySelection);
|
|||
|
|
const unsubRemoteSelect = messageHub.subscribe('remote-entity:selected', handleRemoteEntitySelection);
|
|||
|
|
const unsubNodeSelect = messageHub.subscribe('behavior-tree:node-selected', handleBehaviorTreeNodeSelection);
|
|||
|
|
const unsubAssetFileSelect = messageHub.subscribe('asset-file:selected', handleAssetFileSelection);
|
|||
|
|
const unsubComponentAdded = messageHub.subscribe('component:added', handleComponentChange);
|
|||
|
|
const unsubComponentRemoved = messageHub.subscribe('component:removed', handleComponentChange);
|
|||
|
|
|
|||
|
|
window.addEventListener('profiler:entity-details', handleEntityDetails);
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
unsubEntitySelect();
|
|||
|
|
unsubRemoteSelect();
|
|||
|
|
unsubNodeSelect();
|
|||
|
|
unsubAssetFileSelect();
|
|||
|
|
unsubComponentAdded();
|
|||
|
|
unsubComponentRemoved();
|
|||
|
|
window.removeEventListener('profiler:entity-details', handleEntityDetails);
|
|||
|
|
};
|
|||
|
|
}, [messageHub, target]);
|
|||
|
|
|
|||
|
|
const handleRemoveComponent = (index: number) => {
|
|||
|
|
if (target?.type !== 'entity') return;
|
|||
|
|
const entity = target.data;
|
|||
|
|
const component = entity.components[index];
|
|||
|
|
if (component) {
|
|||
|
|
entity.removeComponent(component);
|
|||
|
|
messageHub.publish('component:removed', { entity, component });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleComponentExpanded = (index: number) => {
|
|||
|
|
setExpandedComponents((prev) => {
|
|||
|
|
const newSet = new Set(prev);
|
|||
|
|
if (newSet.has(index)) {
|
|||
|
|
newSet.delete(index);
|
|||
|
|
} else {
|
|||
|
|
newSet.add(index);
|
|||
|
|
}
|
|||
|
|
return newSet;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePropertyChange = (component: any, propertyName: string, value: any) => {
|
|||
|
|
if (target?.type !== 'entity') return;
|
|||
|
|
const entity = target.data;
|
|||
|
|
messageHub.publish('component:property:changed', {
|
|||
|
|
entity,
|
|||
|
|
component,
|
|||
|
|
propertyName,
|
|||
|
|
value
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleNodePropertyChange = (propertyName: string, value: any) => {
|
|||
|
|
if (target?.type !== 'behavior-tree-node') return;
|
|||
|
|
const node = target.data;
|
|||
|
|
|
|||
|
|
nodeOperations.updateNodeData(node.id, {
|
|||
|
|
...node.data,
|
|||
|
|
[propertyName]: value
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCopyNodeInfo = () => {
|
|||
|
|
if (target?.type !== 'behavior-tree-node') return;
|
|||
|
|
const node = target.data;
|
|||
|
|
|
|||
|
|
const childrenInfo = node.children.map((childId, index) => {
|
|||
|
|
const childNode = nodes.find(n => n.id === childId);
|
|||
|
|
return ` ${index + 1}. ${childNode?.template.displayName || '未知'} (ID: ${childId})`;
|
|||
|
|
}).join('\n');
|
|||
|
|
|
|||
|
|
const incomingConnections = connections.filter(conn => conn.to === node.id);
|
|||
|
|
const outgoingConnections = connections.filter(conn => conn.from === node.id);
|
|||
|
|
|
|||
|
|
const connectionInfo = [
|
|||
|
|
incomingConnections.length > 0 ? `输入连接: ${incomingConnections.length}个` : '',
|
|||
|
|
...incomingConnections.map(conn => {
|
|||
|
|
const fromNode = nodes.find(n => n.id === conn.from);
|
|||
|
|
return ` 来自: ${fromNode?.template.displayName || '未知'} (${conn.from})`;
|
|||
|
|
}),
|
|||
|
|
outgoingConnections.length > 0 ? `输出连接: ${outgoingConnections.length}个` : '',
|
|||
|
|
...outgoingConnections.map(conn => {
|
|||
|
|
const toNode = nodes.find(n => n.id === conn.to);
|
|||
|
|
return ` 到: ${toNode?.template.displayName || '未知'} (${conn.to})`;
|
|||
|
|
})
|
|||
|
|
].filter(Boolean).join('\n');
|
|||
|
|
|
|||
|
|
const nodeInfo = `
|
|||
|
|
节点信息
|
|||
|
|
========
|
|||
|
|
名称: ${node.template.displayName}
|
|||
|
|
类型: ${node.template.type}
|
|||
|
|
分类: ${node.template.category}
|
|||
|
|
类名: ${node.template.className || '无'}
|
|||
|
|
节点ID: ${node.id}
|
|||
|
|
|
|||
|
|
子节点 (${node.children.length}个):
|
|||
|
|
${childrenInfo || ' 无'}
|
|||
|
|
|
|||
|
|
连接信息:
|
|||
|
|
${connectionInfo || ' 无连接'}
|
|||
|
|
|
|||
|
|
属性数据:
|
|||
|
|
${JSON.stringify(node.data, null, 2)}
|
|||
|
|
`.trim();
|
|||
|
|
|
|||
|
|
navigator.clipboard.writeText(nodeInfo).then(() => {
|
|||
|
|
messageHub.publish('notification:show', {
|
|||
|
|
type: 'success',
|
|||
|
|
message: '节点信息已复制到剪贴板'
|
|||
|
|
});
|
|||
|
|
}).catch(() => {
|
|||
|
|
const textarea = document.createElement('textarea');
|
|||
|
|
textarea.value = nodeInfo;
|
|||
|
|
textarea.style.position = 'fixed';
|
|||
|
|
textarea.style.opacity = '0';
|
|||
|
|
document.body.appendChild(textarea);
|
|||
|
|
textarea.select();
|
|||
|
|
document.execCommand('copy');
|
|||
|
|
document.body.removeChild(textarea);
|
|||
|
|
messageHub.publish('notification:show', {
|
|||
|
|
type: 'success',
|
|||
|
|
message: '节点信息已复制到剪贴板'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const renderRemoteProperty = (key: string, value: any) => {
|
|||
|
|
if (value === null || value === undefined) {
|
|||
|
|
return (
|
|||
|
|
<div key={key} className="property-field">
|
|||
|
|
<label className="property-label">{key}</label>
|
|||
|
|
<span className="property-value-text">null</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeof value === 'object' && !Array.isArray(value)) {
|
|||
|
|
return (
|
|||
|
|
<div key={key} className="property-field">
|
|||
|
|
<label className="property-label">{key}</label>
|
|||
|
|
<div className="property-value-object">
|
|||
|
|
{Object.entries(value).map(([subKey, subValue]) => (
|
|||
|
|
<div key={subKey} className="property-subfield">
|
|||
|
|
<span className="property-sublabel">{subKey}:</span>
|
|||
|
|
<span className="property-value-text">{String(subValue)}</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={key} className="property-field">
|
|||
|
|
<label className="property-label">{key}</label>
|
|||
|
|
<span className="property-value-text">{String(value)}</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatFileSize = (bytes?: number): string => {
|
|||
|
|
if (!bytes) return '0 B';
|
|||
|
|
const units = ['B', 'KB', 'MB', 'GB'];
|
|||
|
|
let size = bytes;
|
|||
|
|
let unitIndex = 0;
|
|||
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|||
|
|
size /= 1024;
|
|||
|
|
unitIndex++;
|
|||
|
|
}
|
|||
|
|
return `${size.toFixed(2)} ${units[unitIndex]}`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatDate = (timestamp?: number): string => {
|
|||
|
|
if (!timestamp) return '未知';
|
|||
|
|
const date = new Date(timestamp * 1000);
|
|||
|
|
return date.toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const renderAssetFile = (fileInfo: AssetFileInfo, content?: string) => {
|
|||
|
|
const IconComponent = fileInfo.isDirectory ? Folder : FileIcon;
|
|||
|
|
const iconColor = fileInfo.isDirectory ? '#dcb67a' : '#90caf9';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="entity-inspector">
|
|||
|
|
<div className="inspector-header">
|
|||
|
|
<IconComponent size={16} style={{ color: iconColor }} />
|
|||
|
|
<span className="entity-name">{fileInfo.name}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="inspector-content">
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">文件信息</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">类型</label>
|
|||
|
|
<span className="property-value-text">
|
|||
|
|
{fileInfo.isDirectory ? '文件夹' : fileInfo.extension ? `.${fileInfo.extension}` : '文件'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
{fileInfo.size !== undefined && !fileInfo.isDirectory && (
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label"><HardDrive size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />大小</label>
|
|||
|
|
<span className="property-value-text">{formatFileSize(fileInfo.size)}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{fileInfo.modified !== undefined && (
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label"><Clock size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />修改时间</label>
|
|||
|
|
<span className="property-value-text">{formatDate(fileInfo.modified)}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">路径</label>
|
|||
|
|
<span className="property-value-text" style={{
|
|||
|
|
fontFamily: 'Consolas, Monaco, monospace',
|
|||
|
|
fontSize: '11px',
|
|||
|
|
color: '#666',
|
|||
|
|
wordBreak: 'break-all'
|
|||
|
|
}}>
|
|||
|
|
{fileInfo.path}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{content && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">文件预览</div>
|
|||
|
|
<div className="file-preview-content">
|
|||
|
|
{content}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!content && !fileInfo.isDirectory && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div style={{
|
|||
|
|
padding: '20px',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
color: '#666',
|
|||
|
|
fontSize: '13px'
|
|||
|
|
}}>
|
|||
|
|
此文件类型不支持预览
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const renderBehaviorTreeNode = (node: BehaviorTreeNode) => {
|
|||
|
|
const IconComponent = node.template.icon ? (ICON_MAP as any)[node.template.icon] : Box;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="entity-inspector">
|
|||
|
|
<div className="inspector-header">
|
|||
|
|
{IconComponent && <IconComponent size={16} style={{ color: node.template.color || '#999' }} />}
|
|||
|
|
<span className="entity-name">{node.template.displayName || '未命名节点'}</span>
|
|||
|
|
<button
|
|||
|
|
onClick={handleCopyNodeInfo}
|
|||
|
|
style={{
|
|||
|
|
marginLeft: 'auto',
|
|||
|
|
background: 'transparent',
|
|||
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
padding: '4px 8px',
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: '4px',
|
|||
|
|
color: '#999',
|
|||
|
|
fontSize: '12px'
|
|||
|
|
}}
|
|||
|
|
title="复制节点信息"
|
|||
|
|
>
|
|||
|
|
<Copy size={14} />
|
|||
|
|
<span>复制信息</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{isRunning && (
|
|||
|
|
<div style={{
|
|||
|
|
padding: '10px 14px',
|
|||
|
|
backgroundColor: 'rgba(255, 152, 0, 0.1)',
|
|||
|
|
borderLeft: '3px solid #ff9800',
|
|||
|
|
margin: '12px',
|
|||
|
|
borderRadius: '4px',
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
gap: '10px',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
color: '#ff9800',
|
|||
|
|
lineHeight: '1.4'
|
|||
|
|
}}>
|
|||
|
|
<AlertTriangle size={16} style={{ flexShrink: 0 }} />
|
|||
|
|
<span>运行时模式：属性修改将在停止后还原</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="inspector-content">
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">基本信息</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">节点类型</label>
|
|||
|
|
<span className="property-value-text">{node.template.type}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">分类</label>
|
|||
|
|
<span className="property-value-text">{node.template.category}</span>
|
|||
|
|
</div>
|
|||
|
|
{node.template.description && (
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">描述</label>
|
|||
|
|
<span className="property-value-text" style={{ color: '#999' }}>{node.template.description}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{node.template.className && (
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">类名</label>
|
|||
|
|
<span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#0e639c' }}>
|
|||
|
|
{node.template.className}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{node.template.properties && node.template.properties.length > 0 && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">属性</div>
|
|||
|
|
<BehaviorTreeNodeProperties
|
|||
|
|
key={node.id}
|
|||
|
|
selectedNode={node}
|
|||
|
|
onPropertyChange={handleNodePropertyChange}
|
|||
|
|
projectPath={projectPath}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{node.children.length > 0 && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">子节点 ({node.children.length})</div>
|
|||
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|||
|
|
{node.children.map((childId, index) => {
|
|||
|
|
const childNode = nodes.find(n => n.id === childId);
|
|||
|
|
const ChildIcon = childNode?.template.icon ? (ICON_MAP as any)[childNode.template.icon] : Box;
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={childId}
|
|||
|
|
className="child-node-item"
|
|||
|
|
style={{
|
|||
|
|
borderLeft: `3px solid ${childNode?.template.color || '#666'}`
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<span className="child-node-index">{index + 1}.</span>
|
|||
|
|
{childNode && ChildIcon && (
|
|||
|
|
<ChildIcon size={14} style={{ color: childNode.template.color || '#999', flexShrink: 0 }} />
|
|||
|
|
)}
|
|||
|
|
<span className="child-node-name">
|
|||
|
|
{childNode?.template.displayName || childId}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">调试信息</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">节点ID</label>
|
|||
|
|
<span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#666', fontSize: '11px' }}>
|
|||
|
|
{node.id}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">位置</label>
|
|||
|
|
<span className="property-value-text" style={{ color: '#999' }}>
|
|||
|
|
({node.position.x.toFixed(0)}, {node.position.y.toFixed(0)})
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!target) {
|
|||
|
|
return (
|
|||
|
|
<div className="entity-inspector">
|
|||
|
|
<div className="empty-inspector">
|
|||
|
|
<FileSearch size={48} style={{ color: '#555', marginBottom: '16px' }} />
|
|||
|
|
<div style={{ color: '#999', fontSize: '14px' }}>未选择对象</div>
|
|||
|
|
<div style={{ color: '#666', fontSize: '12px', marginTop: '8px' }}>
|
|||
|
|
选择实体或节点以查看详细信息
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (target.type === 'behavior-tree-node') {
|
|||
|
|
return renderBehaviorTreeNode(target.data);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (target.type === 'asset-file') {
|
|||
|
|
return renderAssetFile(target.data, target.content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (target.type === 'remote-entity') {
|
|||
|
|
const entity = target.data;
|
|||
|
|
const details = (target as any).details;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="entity-inspector">
|
|||
|
|
<div className="inspector-header">
|
|||
|
|
<Settings size={16} />
|
|||
|
|
<span className="entity-name">运行时实体 #{entity.id}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="inspector-content">
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">基本信息</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">Entity ID</label>
|
|||
|
|
<span className="property-value-text">{entity.id}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">Enabled</label>
|
|||
|
|
<span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
|
|||
|
|
</div>
|
|||
|
|
{entity.name && (
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">Name</label>
|
|||
|
|
<span className="property-value-text">{entity.name}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{details && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">组件详情</div>
|
|||
|
|
{Object.entries(details).map(([key, value]) => renderRemoteProperty(key, value))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (target.type === 'entity') {
|
|||
|
|
const entity = target.data;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="entity-inspector">
|
|||
|
|
<div className="inspector-header">
|
|||
|
|
<Settings size={16} />
|
|||
|
|
<span className="entity-name">{entity.name || `Entity #${entity.id}`}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="inspector-content">
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">基本信息</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">Entity ID</label>
|
|||
|
|
<span className="property-value-text">{entity.id}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="property-field">
|
|||
|
|
<label className="property-label">Enabled</label>
|
|||
|
|
<span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{entity.components.length > 0 && (
|
|||
|
|
<div className="inspector-section">
|
|||
|
|
<div className="section-title">组件</div>
|
|||
|
|
{entity.components.map((component: any, index: number) => {
|
|||
|
|
const isExpanded = expandedComponents.has(index);
|
|||
|
|
const componentName = component.constructor?.name || 'Component';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div key={`${componentName}-${index}-${componentVersion}`} className="component-item">
|
|||
|
|
<div className="component-header" onClick={() => toggleComponentExpanded(index)}>
|
|||
|
|
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
|||
|
|
<span className="component-name">{componentName}</span>
|
|||
|
|
<button
|
|||
|
|
className="component-remove-btn"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleRemoveComponent(index);
|
|||
|
|
}}
|
|||
|
|
title="移除组件"
|
|||
|
|
>
|
|||
|
|
<X size={12} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{isExpanded && (
|
|||
|
|
<div className="component-properties">
|
|||
|
|
<PropertyInspector
|
|||
|
|
component={component}
|
|||
|
|
onChange={(propName: string, value: any) => handlePropertyChange(component, propName, value)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
}
|