import React, { useRef, useEffect } from 'react';
import { fabric } from 'fabric';
// import { Fabric } from 'react-fabricjs';


export type customCanvasProps = {
  jsonData: Record<string,any>
}

const CustomCanvas: React.FC<customCanvasProps>  = ({ jsonData }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = new fabric.Canvas(canvasRef.current);

    // 通过JSON数据创建Fabric对象
    if (jsonData) {
      canvas.loadFromJSON(jsonData, () => {
        canvas.renderAll();
      });
    }

    // 如果需要添加其他元素或者自定义操作，可以在这里进行

    return () => {
      // 在组件卸载时清理
      canvas.dispose();
    };
  }, [jsonData]);

  return <Fabric ref={canvasRef} />;
};

export default CustomCanvas;
