diff --git a/image-ai/src/features/editor/hooks/use-editor.ts b/image-ai/src/features/editor/hooks/use-editor.ts index b1531ee..afb97fa 100644 --- a/image-ai/src/features/editor/hooks/use-editor.ts +++ b/image-ai/src/features/editor/hooks/use-editor.ts @@ -2,8 +2,13 @@ import { fabric } from "fabric"; import { useCallback, useState } from "react"; import { useAutoResize } from "./use-auto-resize"; + +interface UseEditorProps { + initialCanvas: fabric.Canvas; + initialContainer: HTMLDivElement; +} export const useEditor = () => { - const[canvas, setCanvas] = useState(null); + const[canvas, setCanvas] = useState(null); const[container, setContatiner] = useState(null); useAutoResize({ @@ -11,10 +16,8 @@ export const useEditor = () => { container, }); - const init = useCallback(({ initialCanvas,initialContainer}: { - initialCanvas: fabric.Canvas; - initialContainer: HTMLDivElement, - }) => { + const init = useCallback( + ({initialCanvas,initialContainer}: UseEditorProps) => { fabric.Object.prototype.set({ cornerColor: "#FFF", cornerStyle: "circle", @@ -23,7 +26,8 @@ export const useEditor = () => { transparentCorners: false, borderOpacityWhenMoving: 1, cornerStrokeColor: "#3b82f6", - }) + } + ) const initialWorkspace = new fabric.Rect({ width: 900, @@ -34,7 +38,7 @@ export const useEditor = () => { hasControls: false, shadow: new fabric.Shadow({ color: "rgba(0,0,0,0.8)", - blur: 5, + blur: 5 }) }) @@ -57,8 +61,7 @@ export const useEditor = () => { initialCanvas.add(test); initialCanvas.centerObject(test); }, - [] -); + []); return { init }; }; \ No newline at end of file