fixed styling issues and fixed setParentLayout

src/frameworks/tkinter/widgets/base.js

@@ -31,28 +31,27 @@ export class TkinterBase extends Widget {
             const col = this.getAttrValue("gridManager.col")
             layoutManager = `grid(row=${row}, col=${col})`
         }else{
-            // FIXME: position may not be correct
             layoutManager = `place(x=${this.state.pos.x}, y=${this.state.pos.y})`
         }
 
         return layoutManager
     }
 
-    setParentLayout(parentLayout){
+    setParentLayout(layout){
 
-        if (!parentLayout){
+        if (!layout){
             return {}
         } 
 
-        const {layout, direction, gap} = parentLayout
+        const {layout: parentLayout, direction, gap} = layout
 
         // show attributes related to the layout manager
         let updates = {
-            parentLayout: parentLayout,
+            parentLayout: layout,
         }
         
         this.removeAttr("gridManager")
-        if (layout === Layouts.FLEX || layout === Layouts.GRID) {
+        if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID) {
 
             updates = {
                 ...updates,
@@ -154,7 +153,7 @@ export class TkinterBase extends Widget {
 
             }
 
-        } else if (layout === Layouts.PLACE) {
+        } else if (parentLayout === Layouts.PLACE) {
             updates = {
                 ...updates,
                 positionType: PosType.ABSOLUTE
@@ -204,11 +203,10 @@ export class TkinterBase extends Widget {
             ...layoutUpdates
         }
         
-        console.log("new data: ", newData, data)
 
         this.setState(newData,  () => {
-            let layoutAttrs = this.setParentLayout(parentLayout) || {}
-
+            let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
+            
             // UPdates attrs
             let newAttrs = { ...this.state.attrs, ...layoutAttrs }
 
@@ -257,6 +255,8 @@ export class TkinterWidgetBase extends TkinterBase{
 
         const newAttrs = removeKeyFromObject("layout", this.state.attrs)
 
+        console.log("new attrs: ", newAttrs)
+
         this.state = {
             ...this.state,
             attrs: {

src/frameworks/tkinter/widgets/slider.js

@@ -62,6 +62,27 @@ class Slider extends TkinterWidgetBase{
                         onChange: (value) => this.setAttrValue("scale.default", value)
                     }
                 },
+                orientation: {
+                    label: "Orientation",
+                    tool: Tools.SELECT_DROPDOWN, 
+                    toolProps: {placeholder: "select orientation"},
+                    value: "",
+                    options: [{value: "horizontal", label: "horizontal"}, {value: "vertical", label: "vertical"}],
+                    onChange: (value) => {
+
+                        // const widgetStyling = {
+                        //     transformOrigin: "0 0",
+                        //     transform: value === "horizontal" ? "rotate(0deg)" : "rotate(90deg)"
+                        // }
+
+                        // this.setState((prev) => ({
+                        //     widgetOuterStyling: {...prev, ...widgetStyling}
+                        // }))
+                        // this.setWidgetOuterStyle("transform-origin", "0 0")
+                        // this.setWidgetOuterStyle("transform", value === "horizontal" ? "rotate(0deg)" : "rotate(90deg)")
+                        this.setAttrValue("orientation", value)
+                    }
+                },
 
             }
         }
@@ -81,6 +102,10 @@ class Slider extends TkinterWidgetBase{
         config["to"] = this.getAttrValue("scale.max")
         config["resolution"] = this.getAttrValue("scale.step")
 
+        if (this.getAttrValue("orientation")){
+            config["orientation"] = this.getAttrValue("orientation")
+        }
+
         const defaultValue = this.getAttrValue("defaultValue")
 
         return [
@@ -109,7 +134,8 @@ class Slider extends TkinterWidgetBase{
     renderContent(){
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
+                <div className="flex flex-col items-center justify-center h-screen 
+                                bg-gray-100" style={this.state.widgetInnerStyling}>
                     <div className="w-full max-w-md">
                         <input
                             type="range"
@@ -117,6 +143,7 @@ class Slider extends TkinterWidgetBase{
                             max={this.getAttrValue("scale.max")}
                             step={this.getAttrValue("scale.step")}
                             value={this.getAttrValue("scale.default")}
+                            style={{backgroundColor: this.getAttrValue("styling.troughColor") }}
                             className="tw-pointer-events-none w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
                         />