Properly preserve pattern filename after deletion for re-upload

Improve the previous fix by actually preserving the original filename
from the cache instead of using a generic fallback. This is a cleaner
solution that maintains the actual pattern name.

Changes:
- Add currentFileName state to App.tsx to track pattern filename
- When loading cached pattern, preserve resumeFileName in currentFileName
- When loading new pattern, pass fileName to handlePatternLoaded callback
- Pass currentFileName to FileUpload component as prop
- Use currentFileName in displayFileName logic (prioritized first)
- Remove generic 'pattern.pes' fallback

Now when you delete a cached pattern and re-upload it, the original
filename (e.g., "mypattern.pes") is preserved instead of using a
generic fallback name. This maintains better traceability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik 2025-12-06 23:42:47 +01:00
parent 085ac1a5f7
commit 4428b8472c
2 changed files with 14 additions and 5 deletions

View file

@ -19,6 +19,7 @@ function App() {
const [pyodideError, setPyodideError] = useState<string | null>(null); const [pyodideError, setPyodideError] = useState<string | null>(null);
const [patternOffset, setPatternOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); const [patternOffset, setPatternOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
const [patternUploaded, setPatternUploaded] = useState(false); const [patternUploaded, setPatternUploaded] = useState(false);
const [currentFileName, setCurrentFileName] = useState<string>(''); // Track current pattern filename
// Initialize Pyodide on mount // Initialize Pyodide on mount
useEffect(() => { useEffect(() => {
@ -43,11 +44,16 @@ function App() {
if (machine.resumedPattern.patternOffset) { if (machine.resumedPattern.patternOffset) {
setPatternOffset(machine.resumedPattern.patternOffset); setPatternOffset(machine.resumedPattern.patternOffset);
} }
// Preserve the filename from cache
if (machine.resumeFileName) {
setCurrentFileName(machine.resumeFileName);
}
} }
}, [machine.resumedPattern, pesData, machine.resumeFileName]); }, [machine.resumedPattern, pesData, machine.resumeFileName]);
const handlePatternLoaded = useCallback((data: PesPatternData) => { const handlePatternLoaded = useCallback((data: PesPatternData, fileName: string) => {
setPesData(data); setPesData(data);
setCurrentFileName(fileName);
// Reset pattern offset when new pattern is loaded // Reset pattern offset when new pattern is loaded
setPatternOffset({ x: 0, y: 0 }); setPatternOffset({ x: 0, y: 0 });
setPatternUploaded(false); setPatternUploaded(false);
@ -185,6 +191,7 @@ function App() {
resumeAvailable={machine.resumeAvailable} resumeAvailable={machine.resumeAvailable}
resumeFileName={machine.resumeFileName} resumeFileName={machine.resumeFileName}
pesData={pesData} pesData={pesData}
currentFileName={currentFileName}
isUploading={machine.isUploading} isUploading={machine.isUploading}
/> />
)} )}

View file

@ -9,7 +9,7 @@ interface FileUploadProps {
isConnected: boolean; isConnected: boolean;
machineStatus: MachineStatus; machineStatus: MachineStatus;
uploadProgress: number; uploadProgress: number;
onPatternLoaded: (pesData: PesPatternData) => void; onPatternLoaded: (pesData: PesPatternData, fileName: string) => void;
onUpload: (penData: Uint8Array, pesData: PesPatternData, fileName: string, patternOffset?: { x: number; y: number }) => void; onUpload: (penData: Uint8Array, pesData: PesPatternData, fileName: string, patternOffset?: { x: number; y: number }) => void;
pyodideReady: boolean; pyodideReady: boolean;
patternOffset: { x: number; y: number }; patternOffset: { x: number; y: number };
@ -17,6 +17,7 @@ interface FileUploadProps {
resumeAvailable: boolean; resumeAvailable: boolean;
resumeFileName: string | null; resumeFileName: string | null;
pesData: PesPatternData | null; pesData: PesPatternData | null;
currentFileName: string;
isUploading?: boolean; isUploading?: boolean;
} }
@ -32,6 +33,7 @@ export function FileUpload({
resumeAvailable, resumeAvailable,
resumeFileName, resumeFileName,
pesData: pesDataProp, pesData: pesDataProp,
currentFileName,
isUploading = false, isUploading = false,
}: FileUploadProps) { }: FileUploadProps) {
const [localPesData, setLocalPesData] = useState<PesPatternData | null>(null); const [localPesData, setLocalPesData] = useState<PesPatternData | null>(null);
@ -39,8 +41,8 @@ export function FileUpload({
// Use prop pesData if available (from cached pattern), otherwise use local state // Use prop pesData if available (from cached pattern), otherwise use local state
const pesData = pesDataProp || localPesData; const pesData = pesDataProp || localPesData;
// When resumeFileName is cleared but we still have pesData, preserve the filename // Use currentFileName from App state, or local fileName, or resumeFileName for display
const displayFileName = resumeFileName || fileName || (pesDataProp ? 'pattern.pes' : ''); const displayFileName = currentFileName || fileName || resumeFileName || '';
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const handleFileChange = useCallback( const handleFileChange = useCallback(
@ -58,7 +60,7 @@ export function FileUpload({
const data = await convertPesToPen(file); const data = await convertPesToPen(file);
setLocalPesData(data); setLocalPesData(data);
setFileName(file.name); setFileName(file.name);
onPatternLoaded(data); onPatternLoaded(data, file.name);
} catch (err) { } catch (err) {
alert( alert(
`Failed to load PES file: ${ `Failed to load PES file: ${