added memo to fix rerendering

src/canvas/canvas.js

@@ -174,7 +174,7 @@ class Canvas extends React.Component {
 
                     const selectedLength = this.state.selectedWidgets.length
 
-                    console.log("selected widget: ", selectedWidget)
+                    // console.log("selected widget: ", selectedWidget)
 
                     if (selectedLength === 0 || (selectedLength === 1 && selectedWidget.__id !== this.state.selectedWidgets[0].__id)){
                         this.state.selectedWidgets[0]?.deSelect() // deselect the previous widget before adding the new one
@@ -264,9 +264,7 @@ class Canvas extends React.Component {
                     const newPosX = x + (deltaX/this.state.zoom) // account for the zoom, since the widget is relative to canvas
                     const newPosY = y + (deltaY/this.state.zoom) // account for the zoom, since the widget is relative to canvas
                     widget.setPos(newPosX, newPosY)
-                    // this.checkAndExpandCanvas(newPosX, newPosY,  widget)
                 })
-                // this.fitCanvasToBoundingBox(10)
             }
 
 
@@ -391,7 +389,7 @@ class Canvas extends React.Component {
 
         this.setState({
             selectedWidgets: [],
-            toolbarAttrs: {},
+            toolbarAttrs: null,
             // toolbarOpen: 
         })
 
@@ -518,6 +516,8 @@ class Canvas extends React.Component {
         if (this.state.selectedWidgets.length === 0 || widgetId !== this.state.selectedWidgets[0].__id)
             return
 
+        // console.log("updating...")
+
         this.setState({
             toolbarAttrs: this.state.selectedWidgets.at(0).getToolbarAttrs()
         })

src/canvas/toolbar.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { memo, useEffect, useState } from "react"
 
 import { ColorPicker, Input, InputNumber, Select } from "antd"
 
@@ -14,7 +14,7 @@ import Tools from "./constants/tools.js"
  * @param {string} widgetType 
  * @param {object} attrs - widget attributes 
  */
-function CanvasToolBar({ isOpen, widgetType, attrs = {} }) {
+const  CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
 
     const [toolbarOpen, setToolbarOpen] = useState(isOpen)
     const [toolbarAttrs, setToolbarAttrs] = useState(attrs)
@@ -27,24 +27,6 @@ function CanvasToolBar({ isOpen, widgetType, attrs = {} }) {
         setToolbarAttrs(attrs)
     }, [attrs])
 
-    // const handleTextInputChange = (e) => {
-    //     activeWidget?.setWidgetName(e.target.value) // Update widget's internal state
-    //     const updatedWidget = { ...activeWidget } // Create a shallow copy of the widget
-    //     setActiveWidget(updatedWidget) // Update the state with the modified widget
-    // }
-
-
-    // const handleChange = (attrPath, value, callback) => {
-    //     // console.log("Value: ", attrPath, value)
-    //     activeWidget?.setAttrValue(attrPath, value) // Update widget's internal state
-    //     const updatedWidget = { ...activeWidget }
-
-    //     if (callback) {
-    //         callback(value)
-    //     }
-
-    //     setActiveWidget(updatedWidget)
-    // }
 
     const handleChange = (value, callback) => {
         if (callback) {
@@ -148,7 +130,7 @@ function CanvasToolBar({ isOpen, widgetType, attrs = {} }) {
         </div>
     )
 
-}
+})
 
 
 

src/canvas/widgets/base.js

@@ -186,7 +186,7 @@ class Widget extends React.Component {
                     height: {
                         label: "Height",
                         tool: Tools.NUMBER_INPUT,
-                        toolProps: {placeholder: "width", max: this.maxSize.height, min: this.minSize.height}, 
+                        toolProps: {placeholder: "height", max: this.maxSize.height, min: this.minSize.height}, 
                         value: this.state.size.height || 100,
                         onChange: (value) => this.setWidgetSize(null, value)
                     },
@@ -510,6 +510,10 @@ class Widget extends React.Component {
         })
     }
 
+    handleDragStart = (event) => {
+        console.log("dragging event: ", event)
+    }
+
     renderContent() {
         // throw new NotImplementedError("render method has to be implemented")
         return (
@@ -519,6 +523,7 @@ class Widget extends React.Component {
         )
     }
 
+
     /**
      * This is an internal methods don't override
      * @returns {HTMLElement}