working on canvas

src/canvas/canvas.js

@@ -5,6 +5,7 @@ import { Button, Tooltip } from "antd"
 
 import Widget from "./widgets/base"
 import Cursor from "./constants/cursor"
+import { UID } from "../utils/uid"
 
 
 class Canvas extends React.Component {
@@ -15,10 +16,7 @@ class Canvas extends React.Component {
         this.canvasRef = React.createRef()  
         this.canvasContainerRef = React.createRef()
 
-        /**
-         * @type {Widget[]}
-         */
-        this.widgets = []
+        this.widgetRefs = {}
 
         this.modes = {
             DEFAULT: '',
@@ -40,6 +38,7 @@ class Canvas extends React.Component {
         }
 
         this.resetTransforms = this.resetTransforms.bind(this)
+        this.renderWidget = this.renderWidget.bind(this)
 
         // this.updateCanvasDimensions = this.updateCanvasDimensions.bind(this) 
     }
@@ -49,7 +48,16 @@ class Canvas extends React.Component {
 
         // this.widgets.push(new Widget())
 
-        this.setState({widgets: [new Widget()]})
+        // let widgetRef = React.createRef()
+
+        // this.widgetRefs[widgetRef.current.__id] = widgetRef
+
+        // // Update the state to include the new widget's ID
+        // this.setState((prevState) => ({
+        //     widgetIds: [...prevState.widgetIds, widgetRef.current.__id]
+        // }))
+
+        this.addWidget(Widget)
 
     }
 
@@ -234,6 +242,31 @@ class Canvas extends React.Component {
         }, this.applyTransform)
     }
 
+    /**
+     * 
+     * @param {Widget} widgetComponentType - don't pass <Widget /> instead pass Widget
+     */
+    addWidget(widgetComponentType){
+        const widgetRef = React.createRef()
+
+        const id = `${widgetComponentType.widgetType}_${UID()}`
+
+        // Store the ref in the instance variable
+        this.widgetRefs[id] = widgetRef
+        console.log("widget ref: ", this.widgetRefs)
+        // Update the state to include the new widget's type and ID
+        this.setState((prevState) => ({
+          widgets: [...prevState.widgets, { id, type: widgetComponentType }]
+        }))
+    }
+
+    renderWidget(widget){
+        const { id, type: ComponentType } = widget
+        console.log("widet: ", this.widgetRefs, id)
+    
+        return <ComponentType key={id} id={id} ref={this.widgetRefs[id]} />
+    }
+
     render() {
         return (
             <div className="tw-relative tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
@@ -254,9 +287,7 @@ class Canvas extends React.Component {
                             ref={this.canvasRef}>
                         <div className="tw-relative tw-w-full tw-h-full">
                             {
-                                this.state.widgets.map((wid, index) => {
-                                    return <React.Fragment key={index}>{React.cloneElement(wid, {ref:wid.elementRef})}</React.Fragment>
-                                })
+                                this.state.widgets.map(this.renderWidget)
                             }
                         </div>
                     </div>

src/canvas/widgets/base.js

@@ -6,23 +6,21 @@ import Layouts from "../constants/layouts"
 import Cursor from "../constants/cursor"
 
 
-function UID(){
-    return Date.now().toString(36) + Math.random().toString(36).substr(2)
-}
 
 /**
  * Base class to be extended
  */
 class Widget extends React.Component{
 
-    constructor(props, _type="widget"){
+    static widgetType = "widget"
 
+    constructor(props){
         super(props)
-        
-        // const _type="widget"
-        this.type = _type
+
+        const {id} = props
+        console.log("Id: ", id)
         // this id has to be unique inside the canvas, it will be set automatically and should never be changed
-        this.__id = `${_type}_${UID()}`
+        this.__id = id
         this._zIndex = 0
 
         this._selected = false
@@ -68,6 +66,13 @@ class Widget extends React.Component{
             width: 100
         } 
 
+        this.state = {
+            attrs: { // attributes
+                // replace this with this.props
+            },
+            zIndex: 0
+        }
+
     }
 
 
@@ -79,11 +84,12 @@ class Widget extends React.Component{
     }
 
     componentDidMount(){
-        this.elementRef?.addEventListener("click", this.mousePress)
+        console.log("mounted: ")
+        this.elementRef.current?.addEventListener("click", this.mousePress)
     }
 
     componentWillUnmount(){
-        this.elementRef?.removeEventListener("click", this.mousePress)
+        this.elementRef.current?.removeEventListener("click", this.mousePress)
     }
 
     mousePress(event){
@@ -155,10 +161,10 @@ class Widget extends React.Component{
 
         return (
             
-            <div data-id={this.__id} className="tw-relative tw-w-fit tw-h-fit" style={style}
+            <div data-id={this.__id} ref={this.elementRef} className="tw-relative tw-w-fit tw-h-fit" style={style}
                 >
 
-                {this.render()}
+                {this.renderContent()}
                 <div className="tw-absolute tw-bg-transparent tw-scale-[1.1] tw-opacity-35 
                                 tw-w-full tw-h-full tw-top-0 tw-border-2 tw-border-solid tw-border-black">
                     

src/utils/uid.js

@@ -0,0 +1,4 @@
+
+export function UID(){
+    return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}