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