fix: fixed problem related to widget selection

src/canvas/canvas.js

@@ -96,10 +96,10 @@ class Canvas extends React.Component {
         this.canvasContainerRef.current.addEventListener("mousemove", this.mouseMoveEvent)
 
 
-        this.canvasRef.current.addEventListener("selection:created", () => {
-            console.log("selected")
-            this.currentMode = this.modes.DEFAULT
-        })
+        // this.canvasRef.current.addEventListener("selection:created", () => {
+        //     console.log("selected")
+        //     this.currentMode = this.modes.DEFAULT
+        // })
 
         this.canvasContainerRef.current.addEventListener('wheel', (event) => {
             this.wheelZoom(event)

src/canvas/widgets/base.js

@@ -119,37 +119,32 @@ class Widget extends React.Component{
     mousePress(event){
         // event.preventDefault()
         if (!this._disableSelection){
-            this.setState((prev) => ({
-                ...prev,
-                selected: false
-            }))
 
-            const widgetSelected = new CustomEvent("selection:created", {
-                detail: {
-                    event,
-                    id: this.__id,
-                    element: this
-                },
-                // bubbles: true // Allow the event to bubble up the DOM tree
-            })
-            // document.dispatchEvent(widgetSelected)
-            // console.log("dispatched", this.canvas)
-            this.canvas.dispatchEvent(widgetSelected)
+            // const widgetSelected = new CustomEvent("selection:created", {
+            //     detail: {
+            //         event,
+            //         id: this.__id,
+            //         element: this
+            //     },
+            //     // bubbles: true // Allow the event to bubble up the DOM tree
+            // })
+            // this.canvas.dispatchEvent(widgetSelected)
         }
     }
 
     select(){
-        this.setState((prev) => ({
-            ...prev,
+        this.setState({
             selected: true
-        }))
+        })
+        console.log("selected")
     }
 
     deSelect(){
-        this.setState((prev) => ({
-            ...prev,
+        this.setState({
             selected: false
-        }))
+        })
+        console.log("DeSelected")
+
     }
 
     isSelected(){
@@ -240,7 +235,7 @@ class Widget extends React.Component{
                             <EditableDiv value={this.state.widgetName} onChange={onWidgetNameChange}
                                         maxLength={40}
                                         className="tw-text-sm tw-w-fit tw-max-w-[160px] tw-text-clip tw-min-w-[150px] 
-                                                    tw-overflow-hidden tw-absolute tw--top-4"
+                                                    tw-overflow-hidden tw-absolute tw--top-4 tw-h-6"
                                 />
                         }
                     </div>

src/components/editableDiv.js

@@ -13,9 +13,19 @@ function EditableDiv({value, onChange, maxLength=Infinity, className='', inputCl
     }, [value])
 
     const handleInput = (event) => {
-        console.log("value: ", event.target.value)
+
+        console.log("Event key: ", event.key)
         onChange(event.target.value)
 
+        // if (event.key === "")
+    }
+
+    const handleEnterKey = (event) => {
+        console.log("Event key: ", event.key)
+
+        if (event.key === "Enter"){
+            setIsEditable(false)
+        }
     }
 
     const handleDoubleClick = () => {
@@ -38,6 +48,7 @@ function EditableDiv({value, onChange, maxLength=Infinity, className='', inputCl
                     onInput={handleInput}
                     maxLength={maxLength}
                     ref={inputRef}
+                    onKeyDown={handleEnterKey}
                     className={`${!isEditable && "tw-hidden"} 
                                     tw-outline-none tw-bg-transparent 
                                     tw-border-none tw-p-1