Feature/render pipeline (#232)

* refactor(engine): 重构2D渲染管线坐标系统

* feat(engine): 完善2D渲染管线和编辑器视口功能

* feat(editor): 实现Viewport变换工具系统

* feat(editor): 优化Inspector渲染性能并修复Gizmo变换工具显示

* feat(editor): 实现Run on Device移动预览功能

* feat(editor): 添加组件属性控制和依赖关系系统

* feat(editor): 实现动画预览功能和优化SpriteAnimator编辑器

* feat(editor): 修复SpriteAnimator动画预览功能并迁移CI到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(editor): 修复SpriteAnimator动画预览并迁移到pnpm

* feat(ci): 迁移项目到pnpm并修复CI构建问题

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 迁移CI工作流到pnpm并添加WASM构建支持

* chore: 移除 network 相关包

* chore: 移除 network 相关包

packages/editor-app/src/presentation/components/menu/NodeContextMenu.tsx

@@ -63,7 +63,7 @@ export const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
                     {onDeleteNode && (
                         <div
                             onClick={onDeleteNode}
-                            style={{...menuItemStyle, color: '#f48771'}}
+                            style={{ ...menuItemStyle, color: '#f48771' }}
                             onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5a1a1a'}
                             onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
                         >

packages/editor-app/src/presentation/components/menu/QuickCreateMenu.tsx

@@ -67,13 +67,13 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
     }, [filteredTemplates, expandedCategories, searchTextLower]);
 
     const flattenedTemplates = React.useMemo(() => {
-        return categoryGroups.flatMap(group =>
+        return categoryGroups.flatMap((group) =>
             group.isExpanded ? group.templates : []
         );
     }, [categoryGroups]);
 
     const toggleCategory = (category: string) => {
-        setExpandedCategories(prev => {
+        setExpandedCategories((prev) => {
             const newSet = new Set(prev);
             if (newSet.has(category)) {
                 newSet.delete(category);
@@ -86,7 +86,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
 
     useEffect(() => {
         if (allTemplates.length > 0 && expandedCategories.size === 0) {
-            const categories = new Set(allTemplates.map(t => t.category || '未分类'));
+            const categories = new Set(allTemplates.map((t) => t.category || '未分类'));
             setExpandedCategories(categories);
         }
     }, [allTemplates, expandedCategories.size]);

packages/editor-app/src/presentation/components/toolbar/EditorToolbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Play, Pause, Square, SkipForward, RotateCcw, Trash2, Undo, Redo } from 'lucide-react';
+import { Play, Pause, Square, SkipForward, RotateCcw, Trash2, Undo, Redo, Box } from 'lucide-react';
 
 type ExecutionMode = 'idle' | 'running' | 'paused' | 'step';
 
@@ -7,6 +7,7 @@ interface EditorToolbarProps {
     executionMode: ExecutionMode;
     canUndo: boolean;
     canRedo: boolean;
+    showGizmos: boolean;
     onPlay: () => void;
     onPause: () => void;
     onStop: () => void;
@@ -16,12 +17,14 @@ interface EditorToolbarProps {
     onRedo: () => void;
     onResetView: () => void;
     onClearCanvas: () => void;
+    onToggleGizmos: () => void;
 }
 
 export const EditorToolbar: React.FC<EditorToolbarProps> = ({
     executionMode,
     canUndo,
     canRedo,
+    showGizmos,
     onPlay,
     onPause,
     onStop,
@@ -30,7 +33,8 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
     onUndo,
     onRedo,
     onResetView,
-    onClearCanvas
+    onClearCanvas,
+    onToggleGizmos
 }) => {
     return (
         <div style={{
@@ -200,6 +204,27 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
                 清空
             </button>
 
+            {/* Gizmo 开关按钮 */}
+            <button
+                onClick={onToggleGizmos}
+                style={{
+                    padding: '8px 12px',
+                    backgroundColor: showGizmos ? '#4a9eff' : '#3c3c3c',
+                    border: 'none',
+                    borderRadius: '4px',
+                    color: showGizmos ? '#fff' : '#cccccc',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px'
+                }}
+                title="显示/隐藏选择边框 (Gizmos)"
+            >
+                <Box size={14} />
+                Gizmos
+            </button>
+
             {/* 分隔符 */}
             <div style={{
                 width: '1px',