force renderTkinterLayout error if its not defined for elements with layout

src/frameworks/tkinter/widgets/base.js

@@ -31,7 +31,26 @@ export class TkinterBase extends Widget {
             }
         }
 
-        this.renderTkinterLayout = this.renderTkinterLayout.bind(this)
+        this.renderTkinterLayout = this.renderTkinterLayout.bind(this) // this must be called if droppableTags is not set to null
+
+        const originalRenderContent = this.renderContent.bind(this);
+        this.renderContent = () => {
+            this._calledRenderTkinterLayout = false
+
+            const content = originalRenderContent()
+
+            if (
+                this.droppableTags !== null &&
+                this.droppableTags !== undefined &&
+                !this._calledRenderTkinterLayout
+            ) {
+                throw new Error(
+                `class ${this.constructor.name}: renderTkinterLayout() must be called inside renderContent() when droppableTags is not null`
+                )
+            }
+
+            return content
+        }
     }
 
  
@@ -374,7 +393,6 @@ export class TkinterBase extends Widget {
                                 value: this.state.packAttrs.anchor,
                                 onChange: (value) => {
                                     this.setAttrValue("flexManager.anchor", value, () => {
-                                       console.log("set anchor: ", this.state.attrs.flexManager) 
                                         // this.props.parentWidgetRef.current.forceRerender()
                                     })   
                                     this.updateState((prevState) => ({packAttrs: {...prevState.packAttrs, anchor: value}}), () => {
@@ -652,6 +670,7 @@ export class TkinterBase extends Widget {
      * Helps with pack layout manager and grid manager
      */
     renderTkinterLayout(){
+        this._calledRenderTkinterLayout = true // NOTE: this is set so subclass are forced to call this method if droppable tags are not null
         const {layout, direction, gap} = this.getLayout()
 
         if (layout === Layouts.FLEX){
@@ -674,7 +693,7 @@ export class TkinterBase extends Widget {
         if (layout === Layouts.GRID){
 
 
-            const {gridManager, flexManager, positioning, ...restAttrs} =  this.state.attrs
+            const {positioning, ...restAttrs} =  this.state.attrs
 
             const updates = {
                 attrs: {
@@ -1075,7 +1094,7 @@ export class TkinterWidgetBase extends TkinterBase{
 
                             //     widgetInnerStyling: widgetStyle
                             // })
-                            this.setAttrValue("padding.padX", value)
+                            this.setAttrValue("padding.padY", value)
                         }
                     },
                 },

src/frameworks/tkinter/widgets/frame.js

@@ -69,7 +69,7 @@ class Frame extends TkinterBase{
 
                             //     widgetInnerStyling: widgetStyle
                             // })
-                            this.setAttrValue("padding.padX", value)
+                            this.setAttrValue("padding.padY", value)
                         }
                     },
                 },
@@ -132,8 +132,6 @@ class Frame extends TkinterBase{
 
         const {layout} = this.getParentLayout()
 
-        console.log("parent layout: ", layout)
-
         const config = {
             bg: `"${bg}"` 
         }
@@ -174,7 +172,7 @@ class Frame extends TkinterBase{
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" 
                     ref={this.styleAreaRef}
                     style={this.getInnerRenderStyling()}>
-                    {this.props.children}
+                    {this.renderTkinterLayout()} {/*This is required for pack layouts, so if your widget accepts child widgets, ensure to add this */}
                 </div>
             </div>
         )

src/frameworks/tkinter/widgets/toplevel.js

@@ -137,7 +137,7 @@ class TopLevel extends TkinterBase{
                 <div className="tw-p-2 tw-w-full tw-h-full tw-content-start"
                     ref={this.styleAreaRef}
                     style={this.state.widgetInnerStyling}>
-                    {this.props.children}
+                    {this.renderTkinterLayout()}
                 </div>
             </div>
         )