planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

solved warning

Browse source
This commit is contained in:
smfahim25 2025-02-02 16:38:02 +06:00
parent 1cf062f326
commit 2c4835c04a
1 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/Canvas/Canvas.jsx
View file

@ -1,4 +1,4 @@
import { useEffect, useContext, useState, useRef } from "react"; import { useEffect, useContext, useState, useRef, useCallback } from "react";
import { AspectRatio } from "@/components/ui/aspect-ratio"; import { AspectRatio } from "@/components/ui/aspect-ratio";
import OpenContext from "../Context/openContext/OpenContext"; import OpenContext from "../Context/openContext/OpenContext";
import CanvasContext from "../Context/canvasContext/CanvasContext"; import CanvasContext from "../Context/canvasContext/CanvasContext";
@ -30,25 +30,28 @@ export default function Canvas() {
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const containerRef = useRef(null); const containerRef = useRef(null);
const handleZoom = (newZoom) => { const handleZoom = useCallback(
const zoom = Math.min(Math.max(newZoom, 0), 100); (newZoom) => {
setZoomLevel(zoom); const zoom = Math.min(Math.max(newZoom, 0), 100);
setZoomLevel(zoom);
if (canvasRef.current && canvas) { if (canvasRef.current && canvas) {
const scale = zoom / 100; const scale = zoom / 100;
// Update canvas dimensions // Update canvas dimensions
const newWidth = canvasRef.current.offsetWidth * scale; const newWidth = canvasRef.current.offsetWidth * scale;
const newHeight = canvasRef.current.offsetHeight * scale; const newHeight = canvasRef.current.offsetHeight * scale;
canvas.setWidth(newWidth); canvas.setWidth(newWidth);
canvas.setHeight(newHeight); canvas.setHeight(newHeight);
setCanvasWidth(newWidth); setCanvasWidth(newWidth);
setCanvasHeight(newHeight); setCanvasHeight(newHeight);
canvas.renderAll(); canvas.renderAll();
} }
}; },
[canvas, canvasRef, setCanvasHeight, setCanvasWidth]
);
useEffect(() => { useEffect(() => {
if (!canvas) return; if (!canvas) return;
@ -154,7 +157,7 @@ export default function Canvas() {
window.removeEventListener("resize", handleResize); window.removeEventListener("resize", handleResize);
} }
}; };
}, [canvas, setActiveObject, zoomLevel]); }, [canvas, setActiveObject, zoomLevel, handleZoom]);
useEffect(() => { useEffect(() => {
import("fabric").then((fabricModule) => { import("fabric").then((fabricModule) => {