58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
|
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;
|