worked on grid configure weights

src/canvas/License.txt

@@ -12,6 +12,7 @@ License in short
 * You are free fork, modify and redistribute it given the original or derived works is kept free and open-source and under the same licese.
 * Another restriction is you can't redistribute in binary or executable formats without asking me first.
 * If you plan on making money on this work or derived work you need permission first.
+* No AI Training on this source code
 
 License was planned to be kept under one AGPL or less restrictive license, but since its difficult for me to continue providing free and open-source software without proper funding. It's under this license.
 

src/canvas/canvas.js

@@ -1011,6 +1011,7 @@ class Canvas extends React.Component {
                 if (parentLayout !== Layouts.PLACE) {
                     // FIXME: need to swap grid col and row as well for this to be effective
                     // swap only for grid and flex placements
+                    /** TODO: Fix and uncomment below later
                     const swapClosest = this.__checkClosestShiftElement({
                         event,
                         parentWidgetId,
@@ -1020,6 +1021,7 @@ class Canvas extends React.Component {
                     if (swapClosest.closestChild) {
                         this.shiftWidgetPosition(parentWidgetId, dragElementID, swapClosest.closestIndex)
                     }
+                    */
                 }
             }, 1)
 

src/canvas/constants/tools.js

@@ -11,6 +11,8 @@ const Tools = {
 
     LAYOUT_MANAGER: "layout_manager",
     UPLOADED_LIST: "uploaded_list",
+
+    CUSTOM: "Custom"
 }
 
 

src/canvas/toolbar.js

@@ -15,8 +15,6 @@ import { AudioOutlined, FileImageOutlined, FileTextOutlined, VideoCameraOutlined
 import { useWidgetContext } from "./context/widgetContext.js"
 
 
-// FIXME: input cursors problem
-// FIXME: Every time the parent attrs are changed a remount happens, which causes input cursor to go to the end
 /**
  * 
  * @param {boolean} isOpen 
@@ -33,7 +31,6 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
     const [toolbarOpen, setToolbarOpen] = useState(isOpen)
     const [toolbarAttrs, setToolbarAttrs] = useState({})
 
-    // TODO: From here
     const focusedInputRef = useRef()
 
     const [cursorPos, setCursorPos] = useState(0) // store cursor position for focused input so during remount if the cursor position goes to end we can use this
@@ -145,7 +142,6 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
         }
 
         if (focusedInputRef.current?.input) {
-            console.log("handling change: ", focusedInputRef.current.input.selectionStart)
             setCursorPos(focusedInputRef.current.input.selectionStart);
         }else{
             setCursorPos(0)
@@ -294,6 +290,18 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
     }
 
 
+    const renderCustomTool = (val) => {
+        return (
+            // NOTE: custom components must accept value and onChange
+            <val.Component 
+                {...val.toolProps}
+                value={val.value}
+                onChange={(value) => handleChange(value, val.onChange)}>
+
+            </val.Component>
+        )
+    }
+
     const renderTool = (keyName, val) => {
 
         return (
@@ -360,6 +368,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
                 )}
 
                 {val.tool === Tools.INPUT_RADIO_LIST && (
+                    // FIXME: problem with maximum recursion error
                     <DynamicRadioInputList
                         defaultInputs={val.value.inputs}
                         defaultSelected={val.value.selectedRadio}
@@ -378,6 +387,12 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
                     )
                 }
 
+                {
+                    val.tool === Tools.CUSTOM && (
+                        renderCustomTool(val)
+                    )
+                }
+
             </>
         )
 

src/canvas/widgets/base.js

@@ -230,10 +230,7 @@ class Widget extends React.Component {
         if (this.state.attrs.styling.backgroundColor)
             this.setWidgetInnerStyle('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff")
 
-        this.load(this.props.initialData || {}, () => {
-            console.log("component remounted: ", this.__id)
-
-        }) // load the initial data
+        this.load(this.props.initialData || {}) // load the initial data
 
         // The elementRect is received only after the elemet is added so, it may not be accurate so use resize handler
         // this.resizeObserver = new MutationObserver(this.handleResizeEvents)
@@ -778,13 +775,6 @@ class Widget extends React.Component {
      */
     setWidgetInnerStyle(key, value) {
 
-        // FIXME: this one clashing with other setWidgetInner style
-
-        const widgetStyle = {
-            ...this.state.widgetInnerStyling,
-            [key]: value
-        }
-
         this.setState((prevState) => ({
             widgetInnerStyling: {
                 ...prevState.widgetInnerStyling,