File size: 5,299 Bytes
763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 7df968b 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 02ce812 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 69ae4e4 763be49 02ce812 |
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 |
import React, { useCallback } from 'react';
import { getBlankCanvasDataURL } from '../utils/canvasUtils';
import { CanvasHistoryHook } from './useCanvasHistory';
import { ConfirmModalHook } from './useConfirmModal';
import { ToastMessage } from './useToasts';
import { TFunction } from '../types';
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'];
};
t: TFunction;
}
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,
t,
}: 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);
showToast(t('imageLoadedSuccess'), 'success');
}
};
img.onerror = () => showToast(t('imageLoadError'), 'error');
img.src = imageDataUrl;
}
};
reader.onerror = () => showToast(t('imageReadError'), 'error');
reader.readAsDataURL(file);
if(event.target) event.target.value = '';
}
}, [canvasWidth, canvasHeight, updateCanvasState, showToast, t]);
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(t('imageExported'), 'success');
} else {
showToast(t('noImageToExport'), 'info');
}
}, [currentDataURL, showToast, t]);
const handleClearCanvas = useCallback(() => {
const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
showToast(t("canvasCleared"), "info");
}, [canvasWidth, canvasHeight, updateCanvasState, showToast, t]);
const handleCanvasSizeChange = useCallback((newWidth: number, newHeight: number) => {
if (newWidth === canvasWidth && newHeight === canvasHeight) {
return;
}
requestConfirmation(
t('confirmCanvasSizeChangeTitle'),
t('confirmCanvasSizeChangeMessage'),
() => {
const blankCanvas = getBlankCanvasDataURL(newWidth, newHeight);
updateCanvasState(blankCanvas, newWidth, newHeight);
setZoomLevel(0.5);
showToast(t('canvasResized', { width: newWidth, height: newHeight }), 'info');
},
{ isDestructive: true }
);
}, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast, t]);
return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
};
|