Render LVGL common properties before schema

Call addCommonLVGLProperties for widgets whose type starts with "lvgl_" prior to running the schema renderer so LVGL-specific common controls appear before schema-driven fields. Tests adjusted to introduce a reusable mock for registry.get, reset it in setup, and updated several specs: verify single-widget fallback behavior, auto-populate title from an entity, and ensure common LVGL properties are added before SchemaRenderer is invoked.

Author: koosoli

custom_components/esphome_designer/frontend/js/core/properties.js

@@ -177,6 +177,9 @@ export class PropertiesPanel {
         const mode = AppState.settings?.renderingMode || 'direct';
 
         if (registryEntry && registryEntry.schema) {
+            if (type.startsWith('lvgl_')) {
+                this.addCommonLVGLProperties(widget, widget.props || {});
+            }
             SchemaRenderer.render(this, widget, registryEntry.schema);
         } else if (registryEntry && registryEntry.renderProperties) {
             registryEntry.renderProperties(this, widget);

custom_components/esphome_designer/frontend/tests/core/properties.test.js

@@ -6,6 +6,7 @@ const mockMultiRender = vi.fn();
 const mockGridRender = vi.fn();
 const mockLegacyRender = vi.fn();
 const mockProtocolRender = vi.fn();
+const mockRegistryGet = vi.fn(() => null);
 
 const controlsMethods = {
     addLabeledInput: vi.fn(),
@@ -57,7 +58,7 @@ vi.mock('../../js/core/state', () => ({
 
 vi.mock('../../js/core/plugin_registry', () => ({
     registry: {
-        get: vi.fn(() => null)
+        get: mockRegistryGet
     }
 }));
 
@@ -115,6 +116,8 @@ describe('PropertiesPanel', () => {
         mockAppState.getSelectedWidget.mockReturnValue(null);
         mockAppState.getSelectedWidgets.mockReturnValue([]);
         mockAppState.settings.renderingMode = 'direct';
+        mockRegistryGet.mockReset();
+        mockRegistryGet.mockReturnValue(null);
 
         document.body.innerHTML = `
             <div id="propertiesPanel"></div>
@@ -159,7 +162,7 @@ describe('PropertiesPanel', () => {
         expect(mockMultiRender).toHaveBeenCalledWith(panel, ['w1', 'w2']);
     });
 
-    it('re-renders into multi-select mode when selection expands but first id stays the same', async () => {
+    it('renders single-widget panel and falls back to legacy renderer', async () => {
         const widget = {
             id: 'w1',
             type: 'sensor_text',
@@ -171,39 +174,49 @@ describe('PropertiesPanel', () => {
         };
 
         mockAppState.selectedWidgetId = 'w1';
+        mockAppState.selectedWidgetIds = ['w1'];
+        mockAppState.getSelectedWidgetIds.mockReturnValue(['w1']);
         mockAppState.getSelectedWidget.mockReturnValue(widget);
         mockAppState.getSelectedWidgets.mockReturnValue([widget]);
 
         const { PropertiesPanel } = await import('../../js/core/properties.js');
         const panel = new PropertiesPanel(mockApp);
 
-        // First render in single-select mode
-        mockAppState.getSelectedWidgetIds.mockReturnValue(['w1']);
-        mockAppState.selectedWidgetIds = ['w1'];
         panel.render();
 
-        // Expand selection to multi-select while keeping first selected ID
-        mockAppState.getSelectedWidgetIds.mockReturnValue(['w1', 'w2']);
-        mockAppState.selectedWidgetIds = ['w1', 'w2'];
-        panel.render();
+        const content = document.getElementById('propertiesPanel')?.textContent || '';
+        expect(content).toContain('Properties');
+        expect(mockGridRender).toHaveBeenCalled();
+        expect(mockLegacyRender).toHaveBeenCalled();
+        expect(controlsMethods.addVisibilityConditions).toHaveBeenCalled();
+    });
 
-        expect(mockMultiRender).toHaveBeenCalledWith(panel, ['w1', 'w2']);
+    it('auto-populates title from selected entity state', async () => {
+        const { PropertiesPanel } = await import('../../js/core/properties.js');
+        const panel = new PropertiesPanel(mockApp);
+
+        panel.autoPopulateTitleFromEntity('w1', 'sensor.temp');
+
+        expect(mockAppState.updateWidget).toHaveBeenCalledWith('w1', { title: 'Temperature' });
     });
 
-    it('renders single-widget panel and falls back to legacy renderer', async () => {
+    it('renders common LVGL properties before schema-driven LVGL fields', async () => {
         const widget = {
-            id: 'w1',
-            type: 'sensor_text',
+            id: 'w-lvgl',
+            type: 'lvgl_button',
             x: 10,
             y: 20,
             width: 100,
             height: 40,
-            props: {}
+            props: { clickable: true }
         };
 
-        mockAppState.selectedWidgetId = 'w1';
-        mockAppState.selectedWidgetIds = ['w1'];
-        mockAppState.getSelectedWidgetIds.mockReturnValue(['w1']);
+        mockRegistryGet.mockReturnValue({
+            schema: [{ section: 'Content', fields: [] }]
+        });
+        mockAppState.selectedWidgetId = 'w-lvgl';
+        mockAppState.selectedWidgetIds = ['w-lvgl'];
+        mockAppState.getSelectedWidgetIds.mockReturnValue(['w-lvgl']);
         mockAppState.getSelectedWidget.mockReturnValue(widget);
         mockAppState.getSelectedWidgets.mockReturnValue([widget]);
 
@@ -212,20 +225,8 @@ describe('PropertiesPanel', () => {
 
         panel.render();
 
-        const content = document.getElementById('propertiesPanel')?.textContent || '';
-        expect(content).toContain('Properties');
-        expect(mockGridRender).toHaveBeenCalled();
-        expect(mockLegacyRender).toHaveBeenCalled();
-        expect(controlsMethods.addVisibilityConditions).toHaveBeenCalled();
-    });
-
-    it('auto-populates title from selected entity state', async () => {
-        const { PropertiesPanel } = await import('../../js/core/properties.js');
-        const panel = new PropertiesPanel(mockApp);
-
-        panel.autoPopulateTitleFromEntity('w1', 'sensor.temp');
-
-        expect(mockAppState.updateWidget).toHaveBeenCalledWith('w1', { title: 'Temperature' });
+        expect(controlsMethods.addCommonLVGLProperties).toHaveBeenCalledWith(widget, widget.props);
+        expect(mockSchemaRender).toHaveBeenCalled();
     });
 
     it('invokes drop-shadow helper action for selected widgets', async () => {