禁用默认右键

packages/editor-app/src/components/MenuBar.tsx

@@ -20,6 +20,7 @@ interface MenuBarProps {
   onCloseProject?: () => void;
   onExit?: () => void;
   onOpenPluginManager?: () => void;
+  onToggleDevtools?: () => void;
 }
 
 export function MenuBar({
@@ -31,7 +32,8 @@ export function MenuBar({
   onOpenProject,
   onCloseProject,
   onExit,
-  onOpenPluginManager
+  onOpenPluginManager,
+  onToggleDevtools
 }: MenuBarProps) {
   const [openMenu, setOpenMenu] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -64,7 +66,8 @@ export function MenuBar({
         pluginManager: 'Plugin Manager',
         help: 'Help',
         documentation: 'Documentation',
-        about: 'About'
+        about: 'About',
+        devtools: 'Developer Tools'
       },
       zh: {
         file: '文件',
@@ -92,7 +95,8 @@ export function MenuBar({
         pluginManager: '插件管理器',
         help: '帮助',
         documentation: '文档',
-        about: '关于'
+        about: '关于',
+        devtools: '开发者工具'
       }
     };
     return translations[locale]?.[key] || key;
@@ -129,7 +133,9 @@ export function MenuBar({
       { label: t('console'), disabled: true },
       { label: t('viewport'), disabled: true },
       { separator: true },
-      { label: t('pluginManager'), onClick: onOpenPluginManager }
+      { label: t('pluginManager'), onClick: onOpenPluginManager },
+      { separator: true },
+      { label: t('devtools'), onClick: onToggleDevtools }
     ],
     help: [
       { label: t('documentation'), disabled: true },

packages/editor-app/src/components/Viewport.tsx

@@ -35,6 +35,9 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
+    // Set initial cursor style
+    canvas.style.cursor = 'grab';
+
     const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
     if (!gl) {
       console.error('WebGL not supported');
@@ -75,6 +78,7 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
         isDraggingRef.current = true;
         lastMousePosRef.current = { x: e.clientX, y: e.clientY };
         canvas.style.cursor = 'grabbing';
+        e.preventDefault();
       }
     };
 
@@ -100,8 +104,8 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
     };
 
     const handleMouseUp = () => {
-      isDraggingRef.current = false;
-      if (canvas) {
+      if (isDraggingRef.current) {
+        isDraggingRef.current = false;
         canvas.style.cursor = 'grab';
       }
     };
@@ -115,20 +119,21 @@ export function Viewport({ locale = 'en' }: ViewportProps) {
       }
     };
 
+    // Register mousedown and wheel on canvas
     canvas.addEventListener('mousedown', handleMouseDown);
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseup', handleMouseUp);
-    canvas.addEventListener('mouseleave', handleMouseUp);
     canvas.addEventListener('wheel', handleWheel, { passive: false });
 
+    // Register mousemove and mouseup globally to handle dragging outside canvas
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
     return () => {
       window.removeEventListener('resize', resizeCanvas);
       resizeObserver.disconnect();
       canvas.removeEventListener('mousedown', handleMouseDown);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseup', handleMouseUp);
-      canvas.removeEventListener('mouseleave', handleMouseUp);
       canvas.removeEventListener('wheel', handleWheel);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
       if (animationFrameRef.current) {
         cancelAnimationFrame(animationFrameRef.current);
       }