#982

Author: mvladic

packages/project-editor/lvgl/widgets/Container.tsx

@@ -9,16 +9,27 @@ import {
     PropertyType
 } from "project-editor/core/object";
 
-import { ProjectType } from "project-editor/project/project";
+import { findLvglStyle, ProjectType } from "project-editor/project/project";
 
 import { LVGLTabviewWidget, LVGLTabWidget, LVGLWidget } from "./internal";
 import { getDropdown, getTabview } from "../widget-common";
 import { getProjectStore, Message } from "project-editor/store";
-import { getLvglParts } from "../lvgl-versions";
+import { getLvglParts, getLvglStylePropName } from "../lvgl-versions";
 import { Rect } from "eez-studio-shared/geometry";
 import { AutoSize } from "project-editor/flow/component";
 import { IResizeHandler } from "project-editor/flow/flow-interfaces";
+import {
+    bg_opa_property_info,
+    border_width_property_info,
+    LVGLPropertyInfo,
+    pad_bottom_property_info,
+    pad_left_property_info,
+    pad_right_property_info,
+    pad_top_property_info,
+    radius_property_info
+} from "../style-catalog";
 import type { LVGLCode } from "project-editor/lvgl/to-lvgl-code";
+import { ProjectEditor } from "project-editor/project-editor-interface";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -56,58 +67,13 @@ export class LVGLContainerWidget extends LVGLWidget {
             }
         ],
 
+
         defaultValue: {
             left: 0,
             top: 0,
             width: 300,
             height: 200,
-            clickableFlag: true,
-            localStyles: {
-                definition: {
-                    MAIN: {
-                        DEFAULT: {
-                            pad_left: 0,
-                            pad_top: 0,
-                            pad_right: 0,
-                            pad_bottom: 0,
-                            bg_opa: 0,
-                            border_width: 0,
-                            radius: 0
-                        }
-                    }
-                }
-            },
-            containerVersion: 1
-        },
-
-        beforeLoadHook: (object, jsObject) => {
-            if (jsObject.containerVersion == undefined) {
-                const definition = LVGLContainerWidget.classInfo.defaultValue.localStyles.definition;
-
-                Object.keys(definition).forEach(part => {
-                    Object.keys(definition[part]).forEach(state => {
-                        Object.keys(definition[part][state]).forEach(propertyName => {
-                            if (jsObject.localStyles?.definition?.[part]?.[state]?.[propertyName] == undefined) {
-                                if (!jsObject.localStyles) {
-                                    jsObject.localStyles = {};
-                                }
-                                if (!jsObject.localStyles.definition) {
-                                    jsObject.localStyles.definition = {};
-                                }
-                                if (!jsObject.localStyles.definition[part]) {
-                                    jsObject.localStyles.definition[part] = {};
-                                }
-                                if (!jsObject.localStyles.definition[part][state]) {
-                                    jsObject.localStyles.definition[part][state] = {};
-                                }
-                                jsObject.localStyles.definition[part][state][propertyName] = definition[part][state][propertyName];
-                            }
-                        });
-                    });
-                });
-
-                jsObject.containerVersion = 1;
-            }
+            clickableFlag: true
         },
 
         check: (widget: LVGLTabviewWidget, messages: IMessage[]) => {
@@ -186,6 +152,8 @@ export class LVGLContainerWidget extends LVGLWidget {
         }
     });
 
+    containerVersion: number;
+
     override makeEditable() {
         super.makeEditable();
 
@@ -257,6 +225,35 @@ export class LVGLContainerWidget extends LVGLWidget {
         return super.getResizeHandlers();
     }
 
+    isStyleOverriden(propertyInfo: LVGLPropertyInfo) {
+        if (this.localStyles.getPropertyValue(propertyInfo, "MAIN", "DEFAULT") != undefined) {
+            return true;
+        }
+
+        if (this.useStyle) {
+            const lvglStyle = findLvglStyle(ProjectEditor.getProject(this), this.useStyle);
+            if (lvglStyle) {
+                if (lvglStyle.fullDefinition?.["MAIN"]?.["DEFAULT"]?.[propertyInfo.name] != undefined) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    buildStyleIfNotOverriden(code: LVGLCode, propertyInfo: LVGLPropertyInfo) {
+        if (!this.isStyleOverriden(propertyInfo)) {
+            const stylePropName = getLvglStylePropName(code.project, propertyInfo.name);
+
+            code.callObjectFunction(
+                `lv_obj_set_style_${stylePropName}`,
+                0,
+                code.or(code.constant("LV_PART_MAIN"), code.constant("LV_STATE_DEFAULT"))
+            );
+        }
+    }
+
     override toLVGLCode(code: LVGLCode) {
         const tabview = getTabview(this);
         if (tabview) {
@@ -282,5 +279,15 @@ export class LVGLContainerWidget extends LVGLWidget {
         }
 
         code.createObject(`lv_obj_create`);
+
+        if (this.containerVersion !== 1) {
+            this.buildStyleIfNotOverriden(code, pad_left_property_info);
+            this.buildStyleIfNotOverriden(code, pad_top_property_info);
+            this.buildStyleIfNotOverriden(code, pad_right_property_info);
+            this.buildStyleIfNotOverriden(code, pad_bottom_property_info);
+            this.buildStyleIfNotOverriden(code, bg_opa_property_info);
+            this.buildStyleIfNotOverriden(code, border_width_property_info);
+            this.buildStyleIfNotOverriden(code, radius_property_info);
+        }
     }
 }