image-ai/src/features/editor/components/editor.tsx

@@ -5,7 +5,6 @@ import { useEditor } from "@/features/editor/hooks/use-editor";
 import { useEffect, useRef } from "react";
 
 export const Editor = () => {
-  
   const { init } = useEditor();
 
   const canvasRef = useRef(null);

image-ai/src/features/editor/hooks/use-auto-resize.ts

@@ -1,79 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { fabric } from "fabric";
-
-interface UseAutoResizeProps {
-    canvas: fabric.Canvas | null;
-    container: HTMLDivElement | null;
-};
-
-export const useAutoResize = ({canvas,container}:
-UseAutoResizeProps) => {
-    const autoZoom = useCallback(() => {
-        if(!canvas || !container) return;
-
-        const width = container.offsetWidth;
-        const height = container.offsetHeight;
-
-        canvas.setWidth(width);
-        canvas.setHeight(height);
-
-        const center = canvas.getCenter();
-
-        const zoomRatio = 0.85;
-        const localWorkspace = canvas.getObjects()
-        .find((object) => object.name === "clip");
-
-        //@ts-ignore
-        const scale = fabric.util.findScaleToFit(localWorkspace, {
-            width : width,
-            height: height,
-        });
-
-        const zoom = zoomRatio * scale;
-
-        canvas.setViewportTransform(fabric.iMatrix.concat());
-        canvas.zoomToPoint(new fabric.Point(center.left,center.top),zoom);
-        
-        if (!localWorkspace) return;
-
-        const workspaceCenter = localWorkspace.getCenterPoint();
-        const viewportTransform = canvas.viewportTransform;
-
-        if( canvas.width === undefined || 
-            canvas.height === undefined ||
-            !viewportTransform) {
-                return;
-            }
-        
-        viewportTransform[4] = canvas.width / 2 - workspaceCenter.x *
-        viewportTransform[0];
-
-        viewportTransform[5] = canvas.height / 2 - workspaceCenter.y *
-        viewportTransform[3];
-
-        canvas.setViewportTransform(viewportTransform);
-
-        localWorkspace.clone((cloned: fabric.Rect) => {
-            canvas.clipPath = cloned;
-            canvas.requestRenderAll();
-        });
-    },[canvas, container]);
-    
-    useEffect(() => {
-        let resizeObserver: ResizeObserver | null = null;
-        
-        if (canvas && container) {
-            resizeObserver = new ResizeObserver(() => {
-                autoZoom();
-            });
-        
-        resizeObserver.observe(container);
-        }
-
-        return () => {
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-        };
-    }, [canvas,container,autoZoom]);
-};

image-ai/src/features/editor/hooks/use-editor.ts

@@ -1,23 +1,14 @@
 import { fabric } from "fabric";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
-import { useAutoResize } from "./use-auto-resize";
 
-
-interface UseEditorProps {
-    initialCanvas: fabric.Canvas;
-    initialContainer: HTMLDivElement;
-}
 export const useEditor = () => {
-    const[canvas, setCanvas] = useState<fabric.Canvas | null>(null);
+    const init = useCallback(({
-    const[container, setContatiner] = useState<HTMLDivElement | null>(null);
+        initialCanvas,
-
+        initialContainer,
-    useAutoResize({
+    }: {
-        canvas,
+        initialCanvas: fabric.Canvas;
-        container,
+        initialContainer: HTMLDivElement,
-    });
+    }) => {
-    
-    const init = useCallback(
-        ({initialCanvas,initialContainer}: UseEditorProps) => {
         fabric.Object.prototype.set({
             cornerColor: "#FFF",
             cornerStyle: "circle",
@@ -26,8 +17,7 @@ export const useEditor = () => {
             transparentCorners: false,
             borderOpacityWhenMoving: 1,
             cornerStrokeColor: "#3b82f6",
-        }
+        })
-    )
 
         const initialWorkspace = new fabric.Rect({
             width: 900,
@@ -38,7 +28,7 @@ export const useEditor = () => {
             hasControls: false,
             shadow: new fabric.Shadow({
                 color: "rgba(0,0,0,0.8)",
-                blur: 5
+                blur: 5,
             })
         })
 
@@ -49,9 +39,6 @@ export const useEditor = () => {
         initialCanvas.centerObject(initialWorkspace);
         initialCanvas.clipPath = initialWorkspace; // clip the canvas to the workspace
 
-        setCanvas(initialCanvas);
-        setContatiner(initialContainer);
-
         const test = new fabric.Rect({
             height: 100,
             width: 100,
@@ -61,7 +48,8 @@ export const useEditor = () => {
         initialCanvas.add(test);
         initialCanvas.centerObject(test);
     },
-    []);
+    []
+);
 
     return { init };
 };