init

src/components/CanvasTexturesEditor.tsx

@@ -0,0 +1,57 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from "@chakra-ui/react";
+import { useEffect, useRef } from "react";
+import { fabric } from "fabric";
+import { ICanvasOptions } from "fabric/fabric-impl"; // v6
+const CanvasTexturesEditor = ({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const options: ICanvasOptions = {
+      backgroundImage: "/",
+    };
+    const canvas = new fabric.Canvas(canvasRef.current, options);
+    // make the fabric.Canvas instance available to your app
+    // updateCanvasContext(canvas);
+    return () => {
+      // updateCanvasContext(null);
+      canvas.dispose();
+    };
+  }, []);
+
+  return (
+    <Modal isOpen={open} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <canvas className={"w-full"} height={300} ref={canvasRef}></canvas>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={() => {}}>
+            Close
+          </Button>
+          <Button variant="ghost">Secondary Action</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default CanvasTexturesEditor;