diff --git a/packages/project-editor/features/page/PageEditor.tsx b/packages/project-editor/features/page/PageEditor.tsx index 8bb0e124..bcf2f7c2 100644 --- a/packages/project-editor/features/page/PageEditor.tsx +++ b/packages/project-editor/features/page/PageEditor.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { computed, runInAction, makeObservable } from "mobx"; +import { computed, runInAction, makeObservable, observable } from "mobx"; import { observer } from "mobx-react"; import { IEezObject } from "project-editor/core/object"; import { TreeObjectAdapter } from "project-editor/core/objectAdapter"; @@ -96,7 +96,7 @@ export class PageTabState extends FlowTabState { super(object as Flow); makeObservable(this, { - //_transform: observable, + _transform: observable, transform: computed, frontFace: computed }); 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 4cddd584..03c995b4 100644 --- a/packages/project-editor/features/page/page.tsx +++ b/packages/project-editor/features/page/page.tsx @@ -999,10 +999,6 @@ export class Page extends Flow { customWidget ); - this._lvglWidgetsIncludingUserWidgets.forEach(lvglWidget => - lvglWidget.lvglPostCreate(runtime) - ); - return lvglObj; } else { const obj = customWidget @@ -1027,10 +1023,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/features/style/style.tsx b/packages/project-editor/features/style/style.tsx index 9aeebc12..aaf7fd5f 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/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/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 {