mjpic 1.0.0

package/src/components/layout/Header.tsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { useImageStore } from '@/store/useImageStore';
+import { FolderOpen, Save, Undo, Redo, Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import Konva from 'konva';
+import { SaveDialog } from '@/components/dialogs/SaveDialog';
+
+interface HeaderProps {
+  stageRef: React.MutableRefObject<Konva.Stage | null>;
+}
+
+export const Header = ({ stageRef }: HeaderProps) => {
+  const { undo, redo, loadImage, fileName } = useImageStore();
+  const { t, i18n } = useTranslation();
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+  const [currentPath, setCurrentPath] = useState<string | undefined>(undefined);
+
+  const handleSaveClick = async () => {
+    if (!stageRef.current) return;
+    
+    // Try to get current image path for CLI mode
+    try {
+        const response = await fetch('/api/current-image');
+        const imageData = response.ok ? await response.json() : null;
+        if (imageData && imageData.path) {
+            setCurrentPath(imageData.path);
+        } else {
+            setCurrentPath(undefined);
+        }
+    } catch {
+        setCurrentPath(undefined);
+    }
+    
+    setIsSaveDialogOpen(true);
+  };
+
+  const handleConfirmSave = async (format: string, quality: number, savePath?: string, saveFileName?: string) => {
+    setIsSaveDialogOpen(false);
+    if (!stageRef.current) return;
+    
+    try {
+        // Find the image node to get current scale
+        const imageNode = stageRef.current.findOne('Image') as Konva.Image;
+        // Find the content group (which contains image + border)
+        const contentGroup = stageRef.current.findOne('#content-group') as Konva.Group;
+        
+        if (!imageNode || !contentGroup) {
+            console.error('No image or content group found to save');
+            return;
+        }
+
+        // Store current scale to restore later
+        const currentScaleX = imageNode.scaleX();
+        
+        // Calculate pixelRatio needed to get original resolution
+        // The content is scaled down by currentScaleX to fit screen.
+        // We need to scale it back up by 1/currentScaleX.
+        const pixelRatio = 1 / currentScaleX;
+
+        const dataUrl = contentGroup.toDataURL({ 
+            pixelRatio: pixelRatio,
+            mimeType: format,
+            quality: quality
+        });
+        
+        // Check if we are in CLI mode with an opened file
+        // If savePath is provided (from dialog), use it
+        if (savePath) {
+             // CLI Mode: Save to specific path
+             const saveRes = await fetch('/api/save', {
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json' },
+                 body: JSON.stringify({ data: dataUrl, path: savePath })
+             });
+             
+             if (saveRes.ok) {
+                 alert(t('common.saveSuccess'));
+             } else {
+                 throw new Error('Save API failed');
+             }
+        } else {
+            // Browser Mode or API fail: Download
+            const link = document.createElement('a');
+            link.download = saveFileName || 'mjpic-edit.png'; // Use provided filename
+            link.href = dataUrl;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    } catch (e) {
+        console.error('Save failed:', e);
+        alert('Failed to save image.');
+    }
+  };
+
+  const handleOpen = async () => {
+    // Open file dialog
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        const url = URL.createObjectURL(file);
+        loadImage(url, file.name, file.name);
+      }
+    };
+    input.click();
+  };
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language === 'en' ? 'zh' : 'en';
+    i18n.changeLanguage(newLang);
+  };
+
+  return (
+    <div className="h-12 bg-zinc-900 border-b border-zinc-800 flex items-center px-4 justify-between z-20 shrink-0">
+      <div className="flex items-center gap-4">
+        <h1 className="text-zinc-100 font-bold text-lg mr-4">{t('common.appName')}</h1>
+        <div className="flex items-center gap-2">
+            <button onClick={handleOpen} className="px-3 py-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 text-sm flex items-center gap-1 transition-colors">
+                <FolderOpen size={16} /> {t('common.open')}
+            </button>
+            <button onClick={handleSaveClick} className="px-3 py-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 text-sm flex items-center gap-1 transition-colors">
+                <Save size={16} /> {t('common.save')}
+            </button>
+        </div>
+      </div>
+      
+      <div className="flex items-center gap-1">
+         <button 
+           onClick={toggleLanguage} 
+           className="px-3 py-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 text-sm flex items-center gap-1 transition-colors mr-2"
+           title={i18n.language === 'en' ? 'Switch to Chinese' : 'Switch to English'}
+         >
+            <Languages size={16} />
+            {i18n.language === 'en' ? '中文' : 'English'}
+         </button>
+         <button onClick={undo} className="p-2 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors" title={t('common.undo')}>
+            <Undo size={18} />
+         </button>
+         <button onClick={redo} className="p-2 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors" title={t('common.redo')}>
+            <Redo size={18} />
+         </button>
+      </div>
+      
+      <SaveDialog 
+        isOpen={isSaveDialogOpen} 
+        onClose={() => setIsSaveDialogOpen(false)} 
+        onConfirm={handleConfirmSave}
+        defaultPath={currentPath}
+        defaultFileName={fileName || undefined}
+      />
+    </div>
+  );
+};