diff --git a/src/components/AspectCanvas.jsx b/src/components/AspectCanvas.jsx index 0c029b8..6786892 100644 --- a/src/components/AspectCanvas.jsx +++ b/src/components/AspectCanvas.jsx @@ -31,7 +31,7 @@ export function AspectCanvas() { const { setLeftPanelOpen, setRightPanelOpen, setOpenPanel, setCaptureOpen, setOpenSetting, openObjectPanel, setOpenObjectPanel, rightPanelOpen } = useContext(OpenContext); const [selectedRatio, setSelectedRatio] = useState("4:3"); - const { canvasRef, canvas, setCanvas, fabricCanvasRef } = useContext(CanvasContext); + const { canvasRef, canvas, setCanvas, fabricCanvasRef, setCanvasHeight, setCanvasWidth } = useContext(CanvasContext); useEffect(() => { import('fabric').then((fabricModule) => { @@ -53,6 +53,8 @@ export function AspectCanvas() { canvas.setWidth(newWidth); canvas.setHeight(newHeight); + setCanvasWidth(newWidth); + setCanvasHeight(newHeight); // Adjust the background image to fit the updated canvas size const bgImage = canvas.backgroundImage; @@ -97,6 +99,8 @@ export function AspectCanvas() { // Cleanup listener on unmount return () => window.removeEventListener('resize', updateCanvasSize); }, [ + setCanvasWidth, + setCanvasHeight, selectedRatio, canvasRef, canvas, diff --git a/src/components/CanvasSetting.jsx b/src/components/CanvasSetting.jsx index 0710e13..c449aeb 100644 --- a/src/components/CanvasSetting.jsx +++ b/src/components/CanvasSetting.jsx @@ -14,7 +14,7 @@ import { ScrollArea } from './ui/scroll-area'; import RndComponent from './Layouts/RndComponent'; const CanvasSetting = () => { - const { canvas } = useContext(CanvasContext); + const { canvas, canvasHeight, canvasWidth } = useContext(CanvasContext); const { setOpenSetting } = useContext(OpenContext); const bgImgRef = useRef(null); @@ -248,7 +248,9 @@ const CanvasSetting = () => { type="number" value={canvasSettings.width} onChange={(e) => { - handleChange('width', parseInt(e.target.value, 10)); + if (canvasWidth > parseInt(e.target.value)) { + handleChange('width', parseInt(e.target.value, 10)); + } }} /> @@ -262,7 +264,9 @@ const CanvasSetting = () => { type="number" value={canvasSettings.height} onChange={(e) => { - handleChange('height', parseInt(e.target.value, 10)); + if (canvasHeight > parseInt(e.target.value)) { + handleChange('height', parseInt(e.target.value, 10)); + } }} /> diff --git a/src/components/Context/canvasContext/CanvasContextProvider.jsx b/src/components/Context/canvasContext/CanvasContextProvider.jsx index e72289c..8bc708e 100644 --- a/src/components/Context/canvasContext/CanvasContextProvider.jsx +++ b/src/components/Context/canvasContext/CanvasContextProvider.jsx @@ -4,10 +4,12 @@ import CanvasContext from './CanvasContext'; const CanvasContextProvider = ({ children }) => { const canvasRef = useRef(null); const [canvas, setCanvas] = useState(null); + const [canvasHeight, setCanvasHeight] = useState(0); + const [canvasWidth, setCanvasWidth] = useState(0); const fabricCanvasRef = useRef(null); return ( - + {children} )