beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: canvasLoading

Browse source
This commit is contained in:
httpjamesm 2023-10-17 22:21:02 -04:00
parent f29e7dbce7
commit 5de978918d
No known key found for this signature in database
2 changed files with 41 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/TransformMenu.tsx
View file

@ -32,8 +32,8 @@ const TransformMenu = () => {
const { const {
canvasRef, canvasRef,
originalSizeCanvasRef, originalSizeCanvasRef,
cropLoading, canvasLoading,
setCropLoading, setCanvasLoading,
// setNonFilteredFileURL // setNonFilteredFileURL
setTransformationPerformed, setTransformationPerformed,
} = useContext(ImageEditorOverlayContext); } = useContext(ImageEditorOverlayContext);
@ -71,8 +71,6 @@ const TransformMenu = () => {
context.clearRect(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height);
setCropLoading(true);
canvas.width = newWidth; canvas.width = newWidth;
canvas.height = newHeight; canvas.height = newHeight;
@ -88,8 +86,6 @@ const TransformMenu = () => {
newHeight newHeight
); );
setCropLoading(false);
// setNonFilteredFileURL(canvas.toDataURL()); // setNonFilteredFileURL(canvas.toDataURL());
}; };
}; };
@ -102,7 +98,6 @@ const TransformMenu = () => {
context.resetTransform(); context.resetTransform();
context.imageSmoothingEnabled = false; context.imageSmoothingEnabled = false;
const img = new Image(); const img = new Image();
// img.src = fileURL;
img.src = canvas.toDataURL(); img.src = canvas.toDataURL();
img.onload = () => { img.onload = () => {
@ -173,11 +168,13 @@ const TransformMenu = () => {
marginBottom: '0.5rem', marginBottom: '0.5rem',
}}> }}>
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<CropSquareIcon />} startIcon={<CropSquareIcon />}
onClick={() => { onClick={() => {
setCanvasLoading(true);
cropCanvas(canvasRef.current, 1, 1); cropCanvas(canvasRef.current, 1, 1);
cropCanvas(originalSizeCanvasRef.current, 1, 1); cropCanvas(originalSizeCanvasRef.current, 1, 1);
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label={'Square (1:1)'} label={'Square (1:1)'}
@ -189,10 +186,12 @@ const TransformMenu = () => {
}}> }}>
{PRESET_ASPECT_RATIOS.map((ratio, index) => ( {PRESET_ASPECT_RATIOS.map((ratio, index) => (
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
key={index} key={index}
startIcon={ratio.icon} startIcon={ratio.icon}
onClick={() => { onClick={() => {
setCanvasLoading(true);
cropCanvas( cropCanvas(
canvasRef.current, canvasRef.current,
ratio.width, ratio.width,
@ -203,6 +202,7 @@ const TransformMenu = () => {
ratio.width, ratio.width,
ratio.height ratio.height
); );
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label={`${ratio.width}:${ratio.height}`} label={`${ratio.width}:${ratio.height}`}
@ -215,10 +215,11 @@ const TransformMenu = () => {
}}> }}>
{PRESET_ASPECT_RATIOS.map((ratio, index) => ( {PRESET_ASPECT_RATIOS.map((ratio, index) => (
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
key={index} key={index}
startIcon={ratio.icon} startIcon={ratio.icon}
onClick={() => { onClick={() => {
setCanvasLoading(true);
cropCanvas( cropCanvas(
canvasRef.current, canvasRef.current,
ratio.height, ratio.height,
@ -229,6 +230,7 @@ const TransformMenu = () => {
ratio.height, ratio.height,
ratio.width ratio.width
); );
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label={`${ratio.height}:${ratio.width}`} label={`${ratio.height}:${ratio.width}`}
@ -241,22 +243,26 @@ const TransformMenu = () => {
marginBottom: '1rem', marginBottom: '1rem',
}}> }}>
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<RotateLeftIcon />} startIcon={<RotateLeftIcon />}
onClick={() => { onClick={() => {
setCanvasLoading(true);
rotateCanvas(canvasRef.current, -90); rotateCanvas(canvasRef.current, -90);
rotateCanvas(originalSizeCanvasRef.current, -90); rotateCanvas(originalSizeCanvasRef.current, -90);
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label="Rotate Left 90˚" label="Rotate Left 90˚"
/> />
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<RotateRightIcon />} startIcon={<RotateRightIcon />}
onClick={() => { onClick={() => {
setCanvasLoading(true);
rotateCanvas(canvasRef.current, 90); rotateCanvas(canvasRef.current, 90);
rotateCanvas(originalSizeCanvasRef.current, 90); rotateCanvas(originalSizeCanvasRef.current, 90);
setTransformationPerformed(true); setTransformationPerformed(true);
setCanvasLoading(false);
}} }}
label="Rotate Right 90˚" label="Rotate Right 90˚"
/> />
@ -267,21 +273,25 @@ const TransformMenu = () => {
marginBottom: '1rem', marginBottom: '1rem',
}}> }}>
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<FlipIcon />} startIcon={<FlipIcon />}
onClick={() => { onClick={() => {
setCanvasLoading(true);
flipCanvas(canvasRef.current, 'vertical'); flipCanvas(canvasRef.current, 'vertical');
flipCanvas(originalSizeCanvasRef.current, 'vertical'); flipCanvas(originalSizeCanvasRef.current, 'vertical');
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label="Flip Vertically" label="Flip Vertically"
/> />
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<FlipIcon />} startIcon={<FlipIcon />}
onClick={() => { onClick={() => {
setCanvasLoading(true);
flipCanvas(canvasRef.current, 'horizontal'); flipCanvas(canvasRef.current, 'horizontal');
flipCanvas(originalSizeCanvasRef.current, 'horizontal'); flipCanvas(originalSizeCanvasRef.current, 'horizontal');
setCanvasLoading(false);
setTransformationPerformed(true); setTransformationPerformed(true);
}} }}
label="Flip Horizontally" label="Flip Horizontally"

27
apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
View file

@ -40,10 +40,10 @@ export const ImageEditorOverlayContext = createContext(
{} as { {} as {
canvasRef: MutableRefObject<HTMLCanvasElement>; canvasRef: MutableRefObject<HTMLCanvasElement>;
originalSizeCanvasRef: MutableRefObject<HTMLCanvasElement>; originalSizeCanvasRef: MutableRefObject<HTMLCanvasElement>;
cropLoading: boolean;
setCropLoading: Dispatch<SetStateAction<boolean>>;
// setNonFilteredFileURL: Dispatch<SetStateAction<string>>; // setNonFilteredFileURL: Dispatch<SetStateAction<string>>;
setTransformationPerformed: Dispatch<SetStateAction<boolean>>; setTransformationPerformed: Dispatch<SetStateAction<boolean>>;
setCanvasLoading: Dispatch<SetStateAction<boolean>>;
canvasLoading: boolean;
} }
); );
@ -56,8 +56,6 @@ const ImageEditorOverlay = (props: IProps) => {
const [fileURL, setFileURL] = useState<string>(''); const [fileURL, setFileURL] = useState<string>('');
const [cropLoading, setCropLoading] = useState<boolean>(false);
const [currentRotationAngle, setCurrentRotationAngle] = useState(0); const [currentRotationAngle, setCurrentRotationAngle] = useState(0);
const [currentTab, setCurrentTab] = useState<'transform' | 'colours'>( const [currentTab, setCurrentTab] = useState<'transform' | 'colours'>(
@ -73,6 +71,8 @@ const ImageEditorOverlay = (props: IProps) => {
const [transformationPerformed, setTransformationPerformed] = const [transformationPerformed, setTransformationPerformed] =
useState(false); useState(false);
const [canvasLoading, setCanvasLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (!canvasRef.current || !originalSizeCanvasRef.current) { if (!canvasRef.current || !originalSizeCanvasRef.current) {
return; return;
@ -122,6 +122,7 @@ const ImageEditorOverlay = (props: IProps) => {
}; };
const loadCanvas = async () => { const loadCanvas = async () => {
setCanvasLoading(true);
setTransformationPerformed(false); setTransformationPerformed(false);
resetFilters(); resetFilters();
setCurrentRotationAngle(0); setCurrentRotationAngle(0);
@ -142,7 +143,6 @@ const ImageEditorOverlay = (props: IProps) => {
img.src = fileURL; img.src = fileURL;
} }
// setNonFilteredFileURL(img.src);
img.onload = () => { img.onload = () => {
const scale = Math.min( const scale = Math.min(
parentRef.current?.clientWidth / img.width, parentRef.current?.clientWidth / img.width,
@ -162,6 +162,8 @@ const ImageEditorOverlay = (props: IProps) => {
const oSCtx = originalSizeCanvasRef.current.getContext('2d'); const oSCtx = originalSizeCanvasRef.current.getContext('2d');
oSCtx?.drawImage(img, 0, 0, img.width, img.height); oSCtx?.drawImage(img, 0, 0, img.width, img.height);
setCanvasLoading(false);
}; };
}; };
@ -213,7 +215,10 @@ const ImageEditorOverlay = (props: IProps) => {
display="flex" display="flex"
alignItems="center" alignItems="center"
justifyContent="center"> justifyContent="center">
{fileURL === null && <CircularProgress />} {(fileURL === null || canvasLoading) && (
<CircularProgress />
)}
<canvas <canvas
ref={canvasRef} ref={canvasRef}
// height={originalHeight} // height={originalHeight}
@ -223,7 +228,9 @@ const ImageEditorOverlay = (props: IProps) => {
// maxWidth: '100%', // maxWidth: '100%',
// maxHeight: '1000px', // maxHeight: '1000px',
display: display:
fileURL === null ? 'none' : 'block', fileURL === null || canvasLoading
? 'none'
: 'block',
position: 'absolute', position: 'absolute',
// transform: `translate(${cropOffsetX}px, ${cropOffsetY}px)`, // transform: `translate(${cropOffsetX}px, ${cropOffsetY}px)`,
}} }}
@ -274,7 +281,7 @@ const ImageEditorOverlay = (props: IProps) => {
marginBottom: '0.5rem', marginBottom: '0.5rem',
}}> }}>
<EnteMenuItem <EnteMenuItem
disabled={cropLoading} disabled={canvasLoading}
startIcon={<CropOriginalIcon />} startIcon={<CropOriginalIcon />}
onClick={() => { onClick={() => {
loadCanvas(); loadCanvas();
@ -288,8 +295,8 @@ const ImageEditorOverlay = (props: IProps) => {
value={{ value={{
originalSizeCanvasRef, originalSizeCanvasRef,
canvasRef, canvasRef,
cropLoading, setCanvasLoading,
setCropLoading, canvasLoading,
// setNonFilteredFileURL, // setNonFilteredFileURL,
setTransformationPerformed, setTransformationPerformed,
}}> }}>