feat: canvasLoading
This commit is contained in:
httpjamesm
parent
f29e7dbce7
commit
5de978918d
|
|
@ -32,8 +32,8 @@ const TransformMenu = () => {
|
|||
const {
|
||||
canvasRef,
|
||||
originalSizeCanvasRef,
|
||||
cropLoading,
|
||||
setCropLoading,
|
||||
canvasLoading,
|
||||
setCanvasLoading,
|
||||
// setNonFilteredFileURL
|
||||
setTransformationPerformed,
|
||||
} = useContext(ImageEditorOverlayContext);
|
||||
|
|
@ -71,8 +71,6 @@ const TransformMenu = () => {
|
|||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
setCropLoading(true);
|
||||
|
||||
canvas.width = newWidth;
|
||||
canvas.height = newHeight;
|
||||
|
||||
|
|
@ -88,8 +86,6 @@ const TransformMenu = () => {
|
|||
newHeight
|
||||
);
|
||||
|
||||
setCropLoading(false);
|
||||
|
||||
// setNonFilteredFileURL(canvas.toDataURL());
|
||||
};
|
||||
};
|
||||
|
|
@ -102,7 +98,6 @@ const TransformMenu = () => {
|
|||
context.resetTransform();
|
||||
context.imageSmoothingEnabled = false;
|
||||
const img = new Image();
|
||||
// img.src = fileURL;
|
||||
img.src = canvas.toDataURL();
|
||||
|
||||
img.onload = () => {
|
||||
|
|
@ -173,11 +168,13 @@ const TransformMenu = () => {
|
|||
marginBottom: '0.5rem',
|
||||
}}>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<CropSquareIcon />}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
cropCanvas(canvasRef.current, 1, 1);
|
||||
cropCanvas(originalSizeCanvasRef.current, 1, 1);
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label={'Square (1:1)'}
|
||||
|
|
@ -189,10 +186,12 @@ const TransformMenu = () => {
|
|||
}}>
|
||||
{PRESET_ASPECT_RATIOS.map((ratio, index) => (
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
key={index}
|
||||
startIcon={ratio.icon}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
|
||||
cropCanvas(
|
||||
canvasRef.current,
|
||||
ratio.width,
|
||||
|
|
@ -203,6 +202,7 @@ const TransformMenu = () => {
|
|||
ratio.width,
|
||||
ratio.height
|
||||
);
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label={`${ratio.width}:${ratio.height}`}
|
||||
|
|
@ -215,10 +215,11 @@ const TransformMenu = () => {
|
|||
}}>
|
||||
{PRESET_ASPECT_RATIOS.map((ratio, index) => (
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
key={index}
|
||||
startIcon={ratio.icon}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
cropCanvas(
|
||||
canvasRef.current,
|
||||
ratio.height,
|
||||
|
|
@ -229,6 +230,7 @@ const TransformMenu = () => {
|
|||
ratio.height,
|
||||
ratio.width
|
||||
);
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label={`${ratio.height}:${ratio.width}`}
|
||||
|
|
@ -241,22 +243,26 @@ const TransformMenu = () => {
|
|||
marginBottom: '1rem',
|
||||
}}>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<RotateLeftIcon />}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
rotateCanvas(canvasRef.current, -90);
|
||||
rotateCanvas(originalSizeCanvasRef.current, -90);
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label="Rotate Left 90˚"
|
||||
/>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<RotateRightIcon />}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
rotateCanvas(canvasRef.current, 90);
|
||||
rotateCanvas(originalSizeCanvasRef.current, 90);
|
||||
setTransformationPerformed(true);
|
||||
setCanvasLoading(false);
|
||||
}}
|
||||
label="Rotate Right 90˚"
|
||||
/>
|
||||
|
|
@ -267,21 +273,25 @@ const TransformMenu = () => {
|
|||
marginBottom: '1rem',
|
||||
}}>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<FlipIcon />}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
flipCanvas(canvasRef.current, 'vertical');
|
||||
flipCanvas(originalSizeCanvasRef.current, 'vertical');
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label="Flip Vertically"
|
||||
/>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<FlipIcon />}
|
||||
onClick={() => {
|
||||
setCanvasLoading(true);
|
||||
flipCanvas(canvasRef.current, 'horizontal');
|
||||
flipCanvas(originalSizeCanvasRef.current, 'horizontal');
|
||||
setCanvasLoading(false);
|
||||
setTransformationPerformed(true);
|
||||
}}
|
||||
label="Flip Horizontally"
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@ export const ImageEditorOverlayContext = createContext(
|
|||
{} as {
|
||||
canvasRef: MutableRefObject<HTMLCanvasElement>;
|
||||
originalSizeCanvasRef: MutableRefObject<HTMLCanvasElement>;
|
||||
cropLoading: boolean;
|
||||
setCropLoading: Dispatch<SetStateAction<boolean>>;
|
||||
// setNonFilteredFileURL: Dispatch<SetStateAction<string>>;
|
||||
setTransformationPerformed: Dispatch<SetStateAction<boolean>>;
|
||||
setCanvasLoading: Dispatch<SetStateAction<boolean>>;
|
||||
canvasLoading: boolean;
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -56,8 +56,6 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
|
||||
const [fileURL, setFileURL] = useState<string>('');
|
||||
|
||||
const [cropLoading, setCropLoading] = useState<boolean>(false);
|
||||
|
||||
const [currentRotationAngle, setCurrentRotationAngle] = useState(0);
|
||||
|
||||
const [currentTab, setCurrentTab] = useState<'transform' | 'colours'>(
|
||||
|
|
@ -73,6 +71,8 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
const [transformationPerformed, setTransformationPerformed] =
|
||||
useState(false);
|
||||
|
||||
const [canvasLoading, setCanvasLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!canvasRef.current || !originalSizeCanvasRef.current) {
|
||||
return;
|
||||
|
|
@ -122,6 +122,7 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
};
|
||||
|
||||
const loadCanvas = async () => {
|
||||
setCanvasLoading(true);
|
||||
setTransformationPerformed(false);
|
||||
resetFilters();
|
||||
setCurrentRotationAngle(0);
|
||||
|
|
@ -142,7 +143,6 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
img.src = fileURL;
|
||||
}
|
||||
|
||||
// setNonFilteredFileURL(img.src);
|
||||
img.onload = () => {
|
||||
const scale = Math.min(
|
||||
parentRef.current?.clientWidth / img.width,
|
||||
|
|
@ -162,6 +162,8 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
const oSCtx = originalSizeCanvasRef.current.getContext('2d');
|
||||
|
||||
oSCtx?.drawImage(img, 0, 0, img.width, img.height);
|
||||
|
||||
setCanvasLoading(false);
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -213,7 +215,10 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center">
|
||||
{fileURL === null && <CircularProgress />}
|
||||
{(fileURL === null || canvasLoading) && (
|
||||
<CircularProgress />
|
||||
)}
|
||||
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
// height={originalHeight}
|
||||
|
|
@ -223,7 +228,9 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
// maxWidth: '100%',
|
||||
// maxHeight: '1000px',
|
||||
display:
|
||||
fileURL === null ? 'none' : 'block',
|
||||
fileURL === null || canvasLoading
|
||||
? 'none'
|
||||
: 'block',
|
||||
position: 'absolute',
|
||||
// transform: `translate(${cropOffsetX}px, ${cropOffsetY}px)`,
|
||||
}}
|
||||
|
|
@ -274,7 +281,7 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
marginBottom: '0.5rem',
|
||||
}}>
|
||||
<EnteMenuItem
|
||||
disabled={cropLoading}
|
||||
disabled={canvasLoading}
|
||||
startIcon={<CropOriginalIcon />}
|
||||
onClick={() => {
|
||||
loadCanvas();
|
||||
|
|
@ -288,8 +295,8 @@ const ImageEditorOverlay = (props: IProps) => {
|
|||
value={{
|
||||
originalSizeCanvasRef,
|
||||
canvasRef,
|
||||
cropLoading,
|
||||
setCropLoading,
|
||||
setCanvasLoading,
|
||||
canvasLoading,
|
||||
// setNonFilteredFileURL,
|
||||
setTransformationPerformed,
|
||||
}}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue