added canvas resizing

src/canvas/fabricCanvas.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import * as fabric from 'fabric'
+
+
+function FabricJSCanvas({ canvasOptions, className = '', onCanvasContextUpdate }) {
+
+    const canvasRef = useRef(null)
+
+    const fabricCanvasRef = useRef(null)
+
+    useEffect(() => {
+
+        const options = {}
+        let canvas = null
+        if (canvasRef.current) {
+            canvas = new fabric.Canvas(canvasRef.current, options)
+            const parent = canvasRef.current.parentNode.parentNode
+            canvas.setDimensions({ width: parent.clientWidth, height: parent.clientHeight })
+            canvas.calcOffset()
+
+            fabricCanvasRef.current = canvas
+            canvasRef.current.parentNode.style.width = "100%"
+            canvasRef.current.parentNode.style.height = "100%"
+            
+            console.log("Parent: ", canvasRef.current.parentNode)
+
+            window.addEventListener("resize", updateCanvasDimensions)
+
+            // make the fabric.Canvas instance available to your app
+            if (onCanvasContextUpdate)
+                onCanvasContextUpdate(canvas)
+        }
+
+        return () => {
+            window.removeEventListener("resize", updateCanvasDimensions)
+        
+            if (onCanvasContextUpdate)
+                onCanvasContextUpdate(null)
+
+            canvas.dispose()
+        }
+    }, [canvasRef])
+
+
+    const updateCanvasDimensions = useCallback(() => {
+        if (!canvasRef.current || !fabricCanvasRef.current)
+            return
+
+        const parent = canvasRef.current.parentNode.parentNode
+
+        fabricCanvasRef.current.setDimensions({ width: parent.clientWidth, height: parent.clientHeight })
+        fabricCanvasRef.current.renderAll()
+
+    }, [fabricCanvasRef, canvasRef])
+
+  
+
+    return <canvas className={className} ref={canvasRef} id='we'/>
+}
+
+
+export default FabricJSCanvas

src/canvas/main.js

@@ -0,0 +1,33 @@
+import { useCallback, useRef, useState } from "react"
+import FabricJSCanvas from "./fabricCanvas"
+
+
+function Canvas(){
+
+    const fabricCanvasRef = useRef()
+
+    const updateCanvasDimensions = useCallback((event) => {
+        console.log("Updating: ", fabricCanvasRef)
+        if (!fabricCanvasRef.current)
+            return
+
+        const parent = event.target
+        
+        fabricCanvasRef.current.setDimensions({ width: parent.clientWidth, height: parent.clientHeight })
+        fabricCanvasRef.current.renderAll()
+
+    }, [fabricCanvasRef])
+
+
+    return (
+        <div className="tw-flex tw-w-full tw-h-full tw-max-h-[100vh] tw-overflow-auto"
+                
+                        >
+            <FabricJSCanvas className="tw-bg-red-200" 
+                            onCanvasContextUpdate={(canvas) => fabricCanvasRef.current = canvas}/>
+        </div>
+    )
+}
+
+
+export default Canvas