Feature/ecs behavior tree (#188)

* feat(behavior-tree): 完全 ECS 化的行为树系统 * feat(editor-app): 添加行为树可视化编辑器 * chore: 移除 Cocos Creator 扩展目录 * feat(editor-app): 行为树编辑器功能增强 * fix(editor-app): 修复 TypeScript 类型错误 * feat(editor-app): 使用 FlexLayout 重构面板系统并优化资产浏览器 * feat(editor-app): 改进编辑器UI样式并修复行为树执行顺序 * feat(behavior-tree,editor-app): 添加装饰器系统并优化编辑器性能 * feat(behavior-tree,editor-app): 添加属性绑定系统 * feat(editor-app,behavior-tree): 优化编辑器UI并改进行为树功能 * feat(editor-app,behavior-tree): 添加全局黑板系统并增强资产浏览器功能 * feat(behavior-tree,editor-app): 添加运行时资产导出系统 * feat(behavior-tree,editor-app): 添加SubTree系统和资产选择器 * feat(behavior-tree,editor-app): 优化系统架构并改进编辑器文件管理 * fix(behavior-tree,editor-app): 修复SubTree节点错误显示空节点警告 * fix(editor-app): 修复局部黑板类型定义文件扩展名错误
2025-10-27 09:29:11 +08:00
parent 0cd99209c4
commit 009f8af4e1
234 changed files with 21824 additions and 15295 deletions
--- a/packages/editor-app/src/components/ContextMenu.tsx
+++ b/packages/editor-app/src/components/ContextMenu.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react';
+import '../styles/ContextMenu.css';
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  separator?: boolean;
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItem[];
+  position: { x: number; y: number };
+  onClose: () => void;
+}
+
+export function ContextMenu({ items, position, onClose }: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+
+  useEffect(() => {
+    if (menuRef.current) {
+      const menu = menuRef.current;
+      const rect = menu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let x = position.x;
+      let y = position.y;
+
+      if (x + rect.width > viewportWidth) {
+        x = Math.max(0, viewportWidth - rect.width - 10);
+      }
+
+      if (y + rect.height > viewportHeight) {
+        y = Math.max(0, viewportHeight - rect.height - 10);
+      }
+
+      if (x !== position.x || y !== position.y) {
+        setAdjustedPosition({ x, y });
+      }
+    }
+  }, [position]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      ref={menuRef}
+      className="context-menu"
+      style={{
+        left: `${adjustedPosition.x}px`,
+        top: `${adjustedPosition.y}px`
+      }}
+    >
+      {items.map((item, index) => {
+        if (item.separator) {
+          return <div key={index} className="context-menu-separator" />;
+        }
+
+        return (
+          <div
+            key={index}
+            className={`context-menu-item ${item.disabled ? 'disabled' : ''}`}
+            onClick={() => {
+              if (!item.disabled) {
+                item.onClick();
+                onClose();
+              }
+            }}
+          >
+            {item.icon && <span className="context-menu-icon">{item.icon}</span>}
+            <span className="context-menu-label">{item.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}