Fixed: [EEZ Flow] Properties panel doesn't show action's properties w…

…hen double clicking action widget #595
eez-open · Nov 1, 2024 · 93a00f7 · 93a00f7
1 parent 5680f7d
commit 93a00f7
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 9 deletions.
diff --git a/packages/project-editor/project-editor-create.tsx b/packages/project-editor/project-editor-create.tsx
@@ -128,6 +128,7 @@ import { FlowTabState } from "project-editor/flow/flow-tab-state";
 import { Color } from "project-editor/features/style/theme";
 import { UserProperty } from "./flow/user-property";
 import { LVGLActionComponent } from "project-editor/lvgl/actions";
+import { FlowEditor } from "project-editor/flow/editor/editor";
 
 export const conditionalStyleConditionProperty = makeExpressionProperty(
     {
@@ -240,7 +241,8 @@ export async function createProjectEditor(
         checkProperty,
         conditionalStyleConditionProperty,
         FlowTabStateClass: FlowTabState,
-        BuildFileClass: BuildFile
+        BuildFileClass: BuildFile,
+        FlowEditorClass: FlowEditor
     };
 
     ConditionalStyle.classInfo.properties.push(

diff --git a/packages/project-editor/project-editor-interface.tsx b/packages/project-editor/project-editor-interface.tsx
@@ -103,8 +103,9 @@ import type { PropertyInfo } from "project-editor/core/object";
 import type { migrateLvglVersion } from "project-editor/lvgl/migrate";
 import type { FlowTabState } from "project-editor/flow/flow-tab-state";
 import type { Color } from "project-editor/features/style/theme";
-import type { UserProperty } from "./flow/user-property";
-import type { LVGLActionComponent } from "./lvgl/actions";
+import type { UserProperty } from "project-editor/flow/user-property";
+import type { LVGLActionComponent } from "project-editor/lvgl/actions";
+import type { FlowEditor } from "project-editor/flow/editor/editor";
 
 export interface IProjectEditor {
     homeTabs?: Tabs;
@@ -190,6 +191,7 @@ export interface IProjectEditor {
     conditionalStyleConditionProperty: PropertyInfo;
     FlowTabStateClass: typeof FlowTabState;
     BuildFileClass: typeof BuildFile;
+    FlowEditorClass: typeof FlowEditor;
 }
 
 export const ProjectEditor: IProjectEditor = {} as any;
diff --git a/packages/project-editor/store/editor.ts b/packages/project-editor/store/editor.ts
@@ -360,6 +360,15 @@ export class EditorsStore {
                         );
                     }
                 }
+
+                if (
+                    this.projectStore.navigationStore.selectedPanel instanceof
+                    ProjectEditor.FlowEditorClass
+                ) {
+                    this.projectStore.navigationStore.setSelectedPanel(
+                        undefined
+                    );
+                }
             }
         });
 

diff --git a/packages/project-editor/store/navigation.ts b/packages/project-editor/store/navigation.ts
@@ -17,6 +17,7 @@ import {
     findPropertyByChildObject,
     getAncestorOfType
 } from "project-editor/store/helper";
+import type { PageTabState } from "project-editor/features/page/PageEditor";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -489,6 +490,23 @@ export class NavigationStore {
             navigationStore.selectedPanel.selectedObject !== undefined
         ) {
             objects = [navigationStore.selectedPanel.selectedObject];
+        } else if (
+            this.projectStore.editorsStore &&
+            this.projectStore.editorsStore.activeEditor &&
+            this.projectStore.editorsStore.activeEditor.object instanceof
+                ProjectEditor.FlowClass
+        ) {
+            const editor = this.projectStore.editorsStore.activeEditor;
+            const pageTabState = editor.state as PageTabState;
+            if (
+                pageTabState &&
+                pageTabState.selectedObjects != undefined &&
+                pageTabState.selectedObjects.length > 0
+            ) {
+                objects = pageTabState.selectedObjects;
+            } else {
+                objects = [];
+            }
         } else {
             objects = [];
         }

diff --git a/packages/project-editor/ui-components/List.tsx b/packages/project-editor/ui-components/List.tsx
@@ -10,6 +10,7 @@ interface ListProps {
     listAdapter: TreeAdapter;
     tabIndex?: number;
     onFocus?: () => void;
+    onBlur?: () => void;
     onEditItem?: (itemId: string) => void;
     renderItem?: (itemId: string) => React.ReactNode;
     onFilesDrop?: (files: File[]) => void;
@@ -18,13 +19,15 @@ interface ListProps {
 export const List = observer(
     class List extends React.Component<ListProps, {}> {
         render() {
-            const { tabIndex, onFocus, onEditItem, renderItem } = this.props;
+            const { tabIndex, onFocus, onBlur, onEditItem, renderItem } =
+                this.props;
 
             return (
                 <Tree
                     treeAdapter={this.props.listAdapter}
                     tabIndex={tabIndex}
                     onFocus={onFocus}
+                    onBlur={onBlur}
                     onEditItem={onEditItem}
                     renderItem={renderItem}
                     onFilesDrop={this.props.onFilesDrop}

diff --git a/packages/project-editor/ui-components/ListNavigation.tsx b/packages/project-editor/ui-components/ListNavigation.tsx
@@ -326,12 +326,17 @@ export const ListNavigation = observer(
                 this.listAdapter.allRows.map(row => row.item)
             );
         }
-        onFocus() {
+        onFocus = () => {
             const navigationStore = this.context.navigationStore;
             if (isPartOfNavigation(this.props.navigationObject)) {
                 navigationStore.setSelectedPanel(this);
             }
-        }
+        };
+        onBlur = () => {
+            if (this.context.navigationStore.selectedPanel === this) {
+                this.context.navigationStore.setSelectedPanel(undefined);
+            }
+        };
 
         onSearchChange(event: any) {
             this.searchText = ($(event.target).val() as string).trim();
@@ -401,7 +406,8 @@ export const ListNavigation = observer(
                     <List
                         listAdapter={this.listAdapter}
                         tabIndex={0}
-                        onFocus={this.onFocus.bind(this)}
+                        onFocus={this.onFocus}
+                        onBlur={this.onBlur}
                         onEditItem={this.editable ? onEditItem : undefined}
                         renderItem={renderItem}
                         onFilesDrop={this.props.onFilesDrop}

diff --git a/packages/project-editor/ui-components/Tree.tsx b/packages/project-editor/ui-components/Tree.tsx
@@ -175,6 +175,7 @@ interface TreeProps {
     treeAdapter: TreeAdapter;
     tabIndex?: number;
     onFocus?: () => void;
+    onBlur?: () => void;
     onEditItem?: (itemId: string) => void;
     renderItem?: (itemId: string) => React.ReactNode;
     onFilesDrop?: (files: File[]) => void;
@@ -835,8 +836,14 @@ export const Tree = observer(
         };
 
         render() {
-            const { treeAdapter, tabIndex, onFocus, onEditItem, renderItem } =
-                this.props;
+            const {
+                treeAdapter,
+                tabIndex,
+                onFocus,
+                onBlur,
+                onEditItem,
+                renderItem
+            } = this.props;
 
             const className = classNames("EezStudio_Tree", {
                 "drag-source":
@@ -850,6 +857,7 @@ export const Tree = observer(
                     tabIndex={tabIndex}
                     onKeyDown={this.onKeyDown}
                     onFocus={onFocus}
+                    onBlur={onBlur}
                     onDragOver={this.onDragOver}
                     onDragLeave={this.onDragLeave}
                     onDrop={this.onDrop}