diff --git a/src/App.tsx b/src/App.tsx index e2ed838..5a29a59 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -112,8 +112,9 @@ function App() { // Use cached uploadedPesData if available, otherwise recalculate if (cachedUploadedPesData) { // Use the exact uploaded data from cache - // Calculate the adjusted offset (same logic as upload) + // Calculate the adjusted offset (same logic as upload hook) if (rotation !== 0) { + // Calculate center shift using the same helper as store selectors const originalCenter = calculatePatternCenter(originalPesData.bounds); const rotatedCenter = calculatePatternCenter( cachedUploadedPesData.bounds, @@ -140,6 +141,7 @@ function App() { } } else if (rotation !== 0) { // Fallback: recalculate if no cached uploaded data (shouldn't happen for new uploads) + // This uses the same transformation logic as usePatternRotationUpload hook console.warn("[App] No cached uploaded data, recalculating rotation"); const rotatedStitches = transformStitchesRotation( originalPesData.stitches, @@ -152,6 +154,7 @@ function App() { const decoded = decodePenData(penData); const rotatedBounds = calculateBoundsFromDecodedStitches(decoded); + // Calculate center shift using the same helper as store selectors const originalCenter = calculatePatternCenter(originalPesData.bounds); const rotatedCenter = calculatePatternCenter(rotatedBounds); const centerShiftX = rotatedCenter.x - originalCenter.x; diff --git a/src/hooks/domain/usePatternRotationUpload.ts b/src/hooks/domain/usePatternRotationUpload.ts index 92d89d3..34b6260 100644 --- a/src/hooks/domain/usePatternRotationUpload.ts +++ b/src/hooks/domain/usePatternRotationUpload.ts @@ -42,6 +42,10 @@ export interface UsePatternRotationUploadReturn { * - Center shift calculation to maintain visual position * - Upload orchestration with proper caching * + * Note: This hook operates on passed parameters rather than store state, + * allowing it to be used as a callback handler. The center calculations + * use the same helpers as the store selectors for consistency. + * * @param params - Upload and store functions * @returns Upload handler function */ @@ -78,7 +82,8 @@ export function usePatternRotationUpload({ // Calculate bounds from the DECODED stitches (the actual data that will be rendered) const rotatedBounds = calculateBoundsFromDecodedStitches(decoded); - // Calculate the center of the rotated pattern + // Calculate the center shift caused by rotation + // Uses the same calculatePatternCenter helper as store selectors const originalCenter = calculatePatternCenter(pesData.bounds); const rotatedCenter = calculatePatternCenter(rotatedBounds); const centerShiftX = rotatedCenter.x - originalCenter.x;