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",