From 62022017564c51d324ea1f180b559bb767285531 Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Sun, 13 Oct 2024 00:44:24 +0200 Subject: [PATCH 01/10] #584 --- packages/project-editor/lvgl/widgets/Tab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/project-editor/lvgl/widgets/Tab.tsx b/packages/project-editor/lvgl/widgets/Tab.tsx index 57681e41..bde4c195 100644 --- a/packages/project-editor/lvgl/widgets/Tab.tsx +++ b/packages/project-editor/lvgl/widgets/Tab.tsx @@ -241,7 +241,7 @@ export class LVGLTabWidget extends LVGLWidget { build.line( `lv_obj_t *obj = lv_tabview_add_tab(${parentObj}, _(${escapeCString( this.tabName ?? "" - )});` + )}));` ); } else { build.line( From cd6b95429efe2a9ec0342167e869a65070c4b7ef Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Sun, 13 Oct 2024 00:45:33 +0200 Subject: [PATCH 02/10] #585 --- .../project-editor/lvgl/style-catalog.tsx | 24 ++++++------- .../project-editor/lvgl/style-definition.tsx | 35 ++++++++++++++++++- 2 files changed, 46 insertions(+), 13 deletions(-) diff --git a/packages/project-editor/lvgl/style-catalog.tsx b/packages/project-editor/lvgl/style-catalog.tsx index 921f3124..54d4c039 100644 --- a/packages/project-editor/lvgl/style-catalog.tsx +++ b/packages/project-editor/lvgl/style-catalog.tsx @@ -660,9 +660,9 @@ const grid_column_align_property_info: LVGLPropertyInfo = makeEnumPropertyInfo( CENTER: LV_GRID_ALIGN_CENTER, END: LV_GRID_ALIGN_END, STRETCH: LV_GRID_ALIGN_STRETCH, - EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, - AROUND: LV_GRID_ALIGN_SPACE_AROUND, - BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN + SPACE_EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, + SPACE_AROUND: LV_GRID_ALIGN_SPACE_AROUND, + SPACE_BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN }, "LV_GRID_ALIGN_" ); @@ -683,9 +683,9 @@ const grid_row_align_property_info: LVGLPropertyInfo = makeEnumPropertyInfo( CENTER: LV_GRID_ALIGN_CENTER, END: LV_GRID_ALIGN_END, STRETCH: LV_GRID_ALIGN_STRETCH, - EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, - AROUND: LV_GRID_ALIGN_SPACE_AROUND, - BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN + SPACE_EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, + SPACE_AROUND: LV_GRID_ALIGN_SPACE_AROUND, + SPACE_BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN }, "LV_GRID_ALIGN_" ); @@ -803,9 +803,9 @@ const grid_cell_x_align_property_info: LVGLPropertyInfo = makeEnumPropertyInfo( CENTER: LV_GRID_ALIGN_CENTER, END: LV_GRID_ALIGN_END, STRETCH: LV_GRID_ALIGN_STRETCH, - EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, - AROUND: LV_GRID_ALIGN_SPACE_AROUND, - BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN + SPACE_EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, + SPACE_AROUND: LV_GRID_ALIGN_SPACE_AROUND, + SPACE_BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN }, "LV_GRID_ALIGN_" ); @@ -857,9 +857,9 @@ const grid_cell_y_align_property_info: LVGLPropertyInfo = makeEnumPropertyInfo( CENTER: LV_GRID_ALIGN_CENTER, END: LV_GRID_ALIGN_END, STRETCH: LV_GRID_ALIGN_STRETCH, - EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, - AROUND: LV_GRID_ALIGN_SPACE_AROUND, - BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN + SPACE_EVENLY: LV_GRID_ALIGN_SPACE_EVENLY, + SPACE_AROUND: LV_GRID_ALIGN_SPACE_AROUND, + SPACE_BETWEEN: LV_GRID_ALIGN_SPACE_BETWEEN }, "LV_GRID_ALIGN_" ); diff --git a/packages/project-editor/lvgl/style-definition.tsx b/packages/project-editor/lvgl/style-definition.tsx index 23df2d13..e807d847 100644 --- a/packages/project-editor/lvgl/style-definition.tsx +++ b/packages/project-editor/lvgl/style-definition.tsx @@ -92,7 +92,40 @@ export class LVGLStylesDefinition extends EezObject { } } ], - defaultValue: {} + defaultValue: {}, + + beforeLoadHook(object, jsObject) { + if (jsObject.definition) { + Object.keys(jsObject.definition).forEach(part => { + Object.keys(jsObject.definition[part]).forEach(state => { + Object.keys(jsObject.definition[part][state]).forEach( + propertyName => { + if ( + propertyName == "grid_column_align" || + propertyName == "grid_row_align" || + propertyName == "grid_cell_x_align" || + propertyName == "grid_cell_y_align" + ) { + const value = + jsObject.definition[part][state][ + propertyName + ]; + if ( + value == "EVENLY" || + value == "AROUND" || + value == "BETWEEN" + ) { + jsObject.definition[part][state][ + propertyName + ] = "SPACE_" + value; + } + } + } + ); + }); + }); + } + } }; override makeEditable() { From debb7fc920512900545eaf4b692b20790727c9ef Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Sun, 13 Oct 2024 21:56:11 +0200 Subject: [PATCH 03/10] lvgl page post create refactoring --- .../features/page/PagesNavigation.tsx | 24 +++---- .../project-editor/features/page/page.tsx | 8 --- packages/project-editor/flow/component.tsx | 2 - packages/project-editor/lvgl/page-runtime.ts | 23 +++++-- .../project-editor/lvgl/widgets/Keyboard.tsx | 62 +++++++++---------- .../lvgl/widgets/UserWidget.tsx | 36 ++++++----- .../project-editor/store/layout-models.tsx | 24 ++++--- 7 files changed, 95 insertions(+), 84 deletions(-) diff --git a/packages/project-editor/features/page/PagesNavigation.tsx b/packages/project-editor/features/page/PagesNavigation.tsx index c2e7d9b5..9858d7f5 100644 --- a/packages/project-editor/features/page/PagesNavigation.tsx +++ b/packages/project-editor/features/page/PagesNavigation.tsx @@ -185,7 +185,7 @@ export const PageStructure = observer( ); } - onLockAll = () => { + onLockAll = action(() => { if (!this.treeAdapter) { return; } @@ -202,9 +202,9 @@ export const PageStructure = observer( }); this.context.undoManager.setCombineCommands(false); - }; + }); - onUnlockAll = () => { + onUnlockAll = action(() => { if (!this.treeAdapter) { return; } @@ -221,7 +221,7 @@ export const PageStructure = observer( }); this.context.undoManager.setCombineCommands(false); - }; + }); get isAnyHidden() { if (!this.treeAdapter) { @@ -236,7 +236,7 @@ export const PageStructure = observer( ); } - onHideAll = () => { + onHideAll = action(() => { if (!this.treeAdapter) { return; } @@ -253,9 +253,9 @@ export const PageStructure = observer( }); this.context.undoManager.setCombineCommands(false); - }; + }); - onShowAll = () => { + onShowAll = action(() => { if (!this.treeAdapter) { return; } @@ -272,7 +272,7 @@ export const PageStructure = observer( }); this.context.undoManager.setCombineCommands(false); - }; + }); renderItem = (itemId: string) => { if (!this.treeAdapter) { @@ -302,11 +302,11 @@ export const PageStructure = observer( : "Lock this widget" } iconSize={14} - onClick={() => + onClick={action(() => this.context.updateObject(widget, { locked: !widget.locked }) - } + )} style={{ visibility: widget.locked ? "visible" : "hidden" }} @@ -319,7 +319,7 @@ export const PageStructure = observer( } title={widget.hiddenInEditor ? "Show" : "Hide"} iconSize={14} - onClick={() => { + onClick={action(() => { const hiddenInEditor = !widget.hiddenInEditor; this.context.undoManager.setCombineCommands( @@ -349,7 +349,7 @@ export const PageStructure = observer( this.context.undoManager.setCombineCommands( false ); - }} + })} style={{ visibility: widget.hiddenInEditor ? "visible" diff --git a/packages/project-editor/features/page/page.tsx b/packages/project-editor/features/page/page.tsx index ae6e556e..d2bc88bf 100644 --- a/packages/project-editor/features/page/page.tsx +++ b/packages/project-editor/features/page/page.tsx @@ -996,10 +996,6 @@ export class Page extends Flow { customWidget ); - this._lvglWidgetsIncludingUserWidgets.forEach(lvglWidget => - lvglWidget.lvglPostCreate(runtime) - ); - return lvglObj; } else { const obj = customWidget @@ -1024,10 +1020,6 @@ export class Page extends Flow { .filter(component => component instanceof Widget) .map((widget: Widget) => widget.lvglCreate(runtime, obj)); - this._lvglWidgetsIncludingUserWidgets.forEach(lvglWidget => - lvglWidget.lvglPostCreate(runtime) - ); - return obj; } } diff --git a/packages/project-editor/flow/component.tsx b/packages/project-editor/flow/component.tsx index b59f1c96..a2b90dd5 100644 --- a/packages/project-editor/flow/component.tsx +++ b/packages/project-editor/flow/component.tsx @@ -3897,8 +3897,6 @@ export class Widget extends Component { ) { return 0; } - - lvglPostCreate(runtime: LVGLPageRuntime) {} } //////////////////////////////////////////////////////////////////////////////// diff --git a/packages/project-editor/lvgl/page-runtime.ts b/packages/project-editor/lvgl/page-runtime.ts index 27f958ea..f9cc592e 100644 --- a/packages/project-editor/lvgl/page-runtime.ts +++ b/packages/project-editor/lvgl/page-runtime.ts @@ -340,6 +340,19 @@ export abstract class LVGLPageRuntime { lvglStyle.lvglRemoveStyleFromObject(this, targetObj); } } + + postCreateCallbacks: (() => void)[] = []; + + addPostCreateCallback(callback: () => void) { + this.postCreateCallbacks.push(callback); + } + + lvglCreatePage() { + const pageObj = this.page.lvglCreate(this, 0); + this.postCreateCallbacks.forEach(callback => callback()); + this.postCreateCallbacks = []; + return pageObj; + } } //////////////////////////////////////////////////////////////////////////////// @@ -451,7 +464,7 @@ export class LVGLPageEditorRuntime extends LVGLPageRuntime { this.createStyles(); - const pageObj = this.page.lvglCreate(this, 0); + const pageObj = this.lvglCreatePage(); if (!pageObj) { console.error("pageObj is undefined"); } @@ -633,7 +646,7 @@ export class LVGLNonActivePageViewerRuntime extends LVGLPageRuntime { this.createStyles(); - const pageObj = this.page.lvglCreate(this, 0); + const pageObj = this.lvglCreatePage(); this.wasm._lvglScreenLoad(-1, pageObj); runInAction(() => { this.page._lvglRuntime = this; @@ -859,7 +872,7 @@ export class LVGLPageViewerRuntime extends LVGLPageRuntime { this.createStyles(); - const pageObj = this.page.lvglCreate(this, 0); + const pageObj = this.lvglCreatePage(); this.wasm._lvglAddScreenLoadedEventHandler(pageObj); @@ -1116,7 +1129,7 @@ export class LVGLStylesEditorRuntime extends LVGLPageRuntime { } }); - const pageObj = this.page.lvglCreate(this, 0); + const pageObj = this.lvglCreatePage(); if (!pageObj) { console.error("pageObj is undefined"); return; @@ -1334,7 +1347,7 @@ export class LVGLReflectEditorRuntime extends LVGLPageRuntime { -(new Date().getTimezoneOffset() / 60) * 100 ); - const pageObj = this.page.lvglCreate(this, 0); + const pageObj = this.lvglCreatePage(); if (!pageObj) { console.error("pageObj is undefined"); return; diff --git a/packages/project-editor/lvgl/widgets/Keyboard.tsx b/packages/project-editor/lvgl/widgets/Keyboard.tsx index 1393963f..bd7ff4b8 100644 --- a/packages/project-editor/lvgl/widgets/Keyboard.tsx +++ b/packages/project-editor/lvgl/widgets/Keyboard.tsx @@ -201,41 +201,41 @@ export class LVGLKeyboardWidget extends LVGLWidget { KEYBOARD_MODES[this.mode] ); - return obj; - } - - override lvglPostCreate(runtime: LVGLPageRuntime) { - if (this.textarea) { - const lvglIdentifier = ProjectEditor.getProjectStore( - this - ).lvglIdentifiers.getIdentifierByName( - ProjectEditor.getFlow(this), - this.textarea - ); + runtime.addPostCreateCallback(() => { + if (this.textarea) { + const lvglIdentifier = ProjectEditor.getProjectStore( + this + ).lvglIdentifiers.getIdentifierByName( + ProjectEditor.getFlow(this), + this.textarea + ); - if (lvglIdentifier) { - const textareaWidget = lvglIdentifier.object; + if (lvglIdentifier) { + const textareaWidget = lvglIdentifier.object; - if ( - textareaWidget instanceof LVGLTextareaWidget && - (runtime instanceof LVGLPageViewerRuntime || - runtime instanceof LVGLNonActivePageViewerRuntime) - ) { - setTimeout(() => { - if ( - this._lvglObj && - textareaWidget._lvglObj && - runtime.isMounted - ) { - runtime.wasm._lvglSetKeyboardTextarea( - this._lvglObj, - textareaWidget._lvglObj - ); - } - }); + if ( + textareaWidget instanceof LVGLTextareaWidget && + (runtime instanceof LVGLPageViewerRuntime || + runtime instanceof LVGLNonActivePageViewerRuntime) + ) { + setTimeout(() => { + if ( + this._lvglObj && + textareaWidget._lvglObj && + runtime.isMounted + ) { + runtime.wasm._lvglSetKeyboardTextarea( + this._lvglObj, + textareaWidget._lvglObj + ); + } + }); + } } } - } + }); + + return obj; } override lvglBuildObj(build: LVGLBuild) { diff --git a/packages/project-editor/lvgl/widgets/UserWidget.tsx b/packages/project-editor/lvgl/widgets/UserWidget.tsx index 4fa64cb5..83cb0c1d 100644 --- a/packages/project-editor/lvgl/widgets/UserWidget.tsx +++ b/packages/project-editor/lvgl/widgets/UserWidget.tsx @@ -459,23 +459,25 @@ export class LVGLUserWidgetWidget extends LVGLWidget { if (runtime.wasm.assetsMap) { const flow = runtime.wasm.assetsMap.flows[savedUserWidgetContext.pageIndex]; - const componentPath = getObjectPathAsString(this); - const componentIndex = flow.componentIndexes[componentPath]; - - runtime.lvglCreateContext = { - widgetIndex: - savedUserWidgetContext.widgetIndex + widgetIndex + 1, - pageIndex: - runtime.wasm.assetsMap.flowIndexes[ - getObjectPathAsString(this.userWidgetPage!) - ], - flowState: savedUserWidgetContext.flowState - ? runtime.wasm._lvglGetFlowState( - savedUserWidgetContext.flowState, - componentIndex - ) - : 0 - }; + if (flow) { + const componentPath = getObjectPathAsString(this); + const componentIndex = flow.componentIndexes[componentPath]; + + runtime.lvglCreateContext = { + widgetIndex: + savedUserWidgetContext.widgetIndex + widgetIndex + 1, + pageIndex: + runtime.wasm.assetsMap.flowIndexes[ + getObjectPathAsString(this.userWidgetPage!) + ], + flowState: savedUserWidgetContext.flowState + ? runtime.wasm._lvglGetFlowState( + savedUserWidgetContext.flowState, + componentIndex + ) + : 0 + }; + } } const rect = this.getLvglCreateRect(); diff --git a/packages/project-editor/store/layout-models.tsx b/packages/project-editor/store/layout-models.tsx index 7796c427..0b7e556c 100644 --- a/packages/project-editor/store/layout-models.tsx +++ b/packages/project-editor/store/layout-models.tsx @@ -377,7 +377,8 @@ export class LayoutModels extends AbstractLayoutModels { children: [ { type: "row", - weight: 20, + weight: 0, + width: 350, children: [ { type: "tabset", @@ -422,7 +423,7 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "tabset", - weight: 60, + weight: 100, enableDeleteWhenEmpty: false, enableClose: false, id: LayoutModels.EDITOR_MODE_EDITORS_TABSET_ID, @@ -430,7 +431,8 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "row", - weight: 25, + weight: 0, + width: 420, children: [ { type: "tabset", @@ -479,7 +481,8 @@ export class LayoutModels extends AbstractLayoutModels { children: [ { type: "row", - weight: 20, + weight: 0, + width: 350, children: [ { type: "tabset", @@ -507,7 +510,7 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "tabset", - weight: 60, + weight: 1, enableClose: false, enableDeleteWhenEmpty: false, id: LayoutModels.EDITOR_MODE_EDITORS_TABSET_ID, @@ -515,7 +518,8 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "row", - weight: 25, + weight: 0, + width: 420, children: [ { type: "tabset", @@ -549,7 +553,8 @@ export class LayoutModels extends AbstractLayoutModels { children: [ { type: "row", - weight: 25, + weight: 0, + width: 320, children: [ { type: "tabset", @@ -590,7 +595,7 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "tabset", - weight: 60, + weight: 1, enableClose: false, enableDeleteWhenEmpty: false, id: LayoutModels.RUNTIME_MODE_EDITORS_TABSET_ID, @@ -598,7 +603,8 @@ export class LayoutModels extends AbstractLayoutModels { }, { type: "row", - weight: 25, + weight: 0, + width: 320, children: [ { type: "tabset", From b070a9a5eb2ea2ec435ab2a95bc25ddee1027182 Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Mon, 14 Oct 2024 23:03:08 +0200 Subject: [PATCH 04/10] fix dynamic CSS for some widget types --- .../project-editor/features/style/style.tsx | 3 ++- .../components/widgets/dashboard/index.tsx | 21 +++++++++++++------ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/project-editor/features/style/style.tsx b/packages/project-editor/features/style/style.tsx index ae137caa..396acb5d 100644 --- a/packages/project-editor/features/style/style.tsx +++ b/packages/project-editor/features/style/style.tsx @@ -1071,7 +1071,8 @@ export class Style extends EezObject { cssDeclarations: computed, cssPreview: computed, - classNames: computed + classNames: computed, + dynamicCSS: observable }); } diff --git a/packages/project-editor/flow/components/widgets/dashboard/index.tsx b/packages/project-editor/flow/components/widgets/dashboard/index.tsx index 2e700a50..137ae665 100644 --- a/packages/project-editor/flow/components/widgets/dashboard/index.tsx +++ b/packages/project-editor/flow/components/widgets/dashboard/index.tsx @@ -226,7 +226,8 @@ export class TextDashboardWidget extends Widget { @@ -1154,7 +1157,8 @@ export class RadioWidget extends Widget { className={classNames( "form-check", this.style.classNames, - this.style.getConditionalClassNames(flowContext) + this.style.getConditionalClassNames(flowContext), + this.style.getDynamicCSSClassName(flowContext) )} style={{ opacity: style.opacity }} > @@ -1300,7 +1304,8 @@ export class SwitchDashboardWidget extends Widget { className={classNames( "form-check form-switch", this.style.classNames, - this.style.getConditionalClassNames(flowContext) + this.style.getConditionalClassNames(flowContext), + this.style.getDynamicCSSClassName(flowContext) )} style={{ opacity: style.opacity }} > @@ -1993,7 +1998,8 @@ export class ButtonDashboardWidget extends Widget {