File size: 5,659 Bytes
763be49 7df968b 763be49 7df968b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
import React, { useCallback } from 'react';
import { getBlankCanvasDataURL } from '../utils/canvasUtils';
import { CanvasHistoryHook } from './useCanvasHistory';
import { ConfirmModalHook } from './useConfirmModal';
import { ToastMessage } from './useToasts';
interface UseCanvasFileUtilsProps {
canvasState: {
currentDataURL: string | null;
canvasWidth: number;
canvasHeight: number;
};
historyActions: {
updateCanvasState: CanvasHistoryHook['updateCanvasState'];
};
uiActions: {
showToast: (message: string, type: ToastMessage['type']) => void;
setZoomLevel: (zoom: number) => void;
};
confirmModalActions: {
requestConfirmation: ConfirmModalHook['requestConfirmation'];
};
}
export interface CanvasFileUtilsHook {
handleLoadImageFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
handleExportImage: () => void;
handleClearCanvas: () => void;
handleCanvasSizeChange: (newWidth: number, newHeight: number) => void;
}
export const useCanvasFileUtils = ({
canvasState,
historyActions,
uiActions,
confirmModalActions,
}: UseCanvasFileUtilsProps): CanvasFileUtilsHook => {
const { currentDataURL, canvasWidth, canvasHeight } = canvasState;
const { updateCanvasState } = historyActions;
const { showToast, setZoomLevel } = uiActions;
const { requestConfirmation } = confirmModalActions;
const handleLoadImageFile = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const imageDataUrl = e.target?.result as string;
if (imageDataUrl) {
const img = new Image();
img.onload = () => {
let imageToDrawWidth = img.naturalWidth;
let imageToDrawHeight = img.naturalHeight;
if (img.naturalWidth > canvasWidth || img.naturalHeight > canvasHeight) {
const widthRatio = canvasWidth / img.naturalWidth;
const heightRatio = canvasHeight / img.naturalHeight;
const scaleFactor = Math.min(widthRatio, heightRatio);
imageToDrawWidth = Math.max(1, Math.floor(img.naturalWidth * scaleFactor));
imageToDrawHeight = Math.max(1, Math.floor(img.naturalHeight * scaleFactor));
}
const finalCanvasWidth = canvasWidth;
const finalCanvasHeight = canvasHeight;
const tempCanvas = document.createElement('canvas');
tempCanvas.width = finalCanvasWidth;
tempCanvas.height = finalCanvasHeight;
const tempCtx = tempCanvas.getContext('2d');
if (tempCtx) {
tempCtx.fillStyle = '#FFFFFF';
tempCtx.fillRect(0, 0, finalCanvasWidth, finalCanvasHeight);
// Change: Draw image at top-left (0,0)
const drawX = 0;
const drawY = 0;
tempCtx.drawImage(img, drawX, drawY, imageToDrawWidth, imageToDrawHeight);
const compositeDataURL = tempCanvas.toDataURL('image/png');
updateCanvasState(compositeDataURL, finalCanvasWidth, finalCanvasHeight);
setZoomLevel(0.5);
showToast('Image loaded successfully.', 'success');
}
};
img.onerror = () => showToast("Error loading image file for processing.", 'error');
img.src = imageDataUrl;
}
};
reader.onerror = () => showToast("Error reading image file.", 'error');
reader.readAsDataURL(file);
if(event.target) event.target.value = '';
}
}, [canvasWidth, canvasHeight, updateCanvasState, showToast, setZoomLevel]);
const handleExportImage = useCallback(() => {
if (currentDataURL) {
const link = document.createElement('a');
link.href = currentDataURL;
link.download = `paint-masterpiece-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showToast('Image exported!', 'success');
} else {
showToast('No image to export.', 'info');
}
}, [currentDataURL, showToast]);
const handleClearCanvas = useCallback(() => {
requestConfirmation(
"Clear Canvas",
"Are you sure you want to clear the entire canvas? This action cannot be undone from history.",
() => {
const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
setZoomLevel(0.5);
showToast("Canvas cleared.", "info");
},
{ isDestructive: true }
);
}, [requestConfirmation, canvasWidth, canvasHeight, updateCanvasState, setZoomLevel, showToast]);
const handleCanvasSizeChange = useCallback((newWidth: number, newHeight: number) => {
if (newWidth === canvasWidth && newHeight === canvasHeight) {
return;
}
requestConfirmation(
"Confirm Canvas Size Change",
"Changing canvas size will clear the current drawing and history. Are you sure you want to continue?",
() => {
const blankCanvas = getBlankCanvasDataURL(newWidth, newHeight);
updateCanvasState(blankCanvas, newWidth, newHeight);
setZoomLevel(0.5);
showToast(`Canvas resized to ${newWidth}x${newHeight}px. Drawing cleared.`, 'info');
},
{ isDestructive: true }
);
}, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast]);
return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
}; |