Implemented: Adding widgets and actions using context menu #659

eez-open · Dec 8, 2024 · 05377da · 05377da
1 parent cc0a139
commit 05377da
Show file tree

Hide file tree

Showing 29 changed files with 872 additions and 190 deletions.
diff --git a/packages/eez-studio-ui/_stylesheets/project-editor.less b/packages/eez-studio-ui/_stylesheets/project-editor.less
@@ -293,6 +293,9 @@
             margin: 2px;
             padding: 4px;
             cursor: grab;
+            &[draggable="false"] {
+                cursor: pointer;
+            }
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -523,7 +526,13 @@
     }
 
     .EezStudio_PropertiesPanel_Body {
+        height: 100%;
         overflow: auto;
+
+        .EezStudio_PropertyGrid_NothingSelected {
+            height: 100%;
+            background-color: @panelHeaderColor;
+        }
     }
 }
 
@@ -3824,3 +3833,23 @@
     white-space: nowrap;
     border-radius: 4px;
 }
+
+.EezStudio_ProjectEditor_SelectComponentDialog {
+    .modal-content {
+        width: 530px;
+        max-height: calc(100vh - 200px);
+        .modal-body {
+            padding: 0;
+            overflow: hidden;
+            display: flex;
+            .EezStudio_ComponentsPalette_Enclosure {
+                height: unset;
+            }
+        }
+    }
+}
+
+.EezStudio_PageStructure_NoPageSelected {
+    height: 100%;
+    background-color: @panelHeaderColor;
+}
diff --git a/packages/eez-studio-ui/dialog.tsx b/packages/eez-studio-ui/dialog.tsx
@@ -317,7 +317,6 @@ export const BootstrapDialog = observer(
         additionalFooterControl?: React.ReactNode;
         backdrop?: "static" | boolean;
         className?: string;
-        modalContentStyle?: React.CSSProperties;
     }> {
         div: HTMLDivElement | null = null;
         form: HTMLFormElement | null = null;

diff --git a/packages/home/settings.tsx b/packages/home/settings.tsx
@@ -114,6 +114,16 @@ ipcRenderer.on("mru-changed", async (sender: any, mru: IMruItem[]) => {
 
 ////////////////////////////////////////////////////////////////////////////////
 
+const getShowComponentsPaletteInProjectEditor = function () {
+    return ipcRenderer.sendSync("getShowComponentsPaletteInProjectEditor");
+};
+
+const setShowComponentsPaletteInProjectEditor = function (value: boolean) {
+    ipcRenderer.send("setShowComponentsPaletteInProjectEditor", value);
+};
+
+////////////////////////////////////////////////////////////////////////////////
+
 class SettingsController {
     activetLocale = getLocale();
     activeDateFormat = getDateFormat();
@@ -130,6 +140,9 @@ class SettingsController {
     pythonUseCustomPath: boolean = false;
     pythonCustomPath: string = "";
 
+    _showComponentsPaletteInProjectEditor: boolean =
+        getShowComponentsPaletteInProjectEditor();
+
     constructor() {
         this.pythonUseCustomPath =
             window.localStorage.getItem("pythonUseCustomPath") == "1"
@@ -397,6 +410,15 @@ class SettingsController {
         }
         showDialog(<CompactDatabaseDialog database={this.selectedDatabase} />);
     };
+
+    get showComponentsPaletteInProjectEditor() {
+        return this._showComponentsPaletteInProjectEditor;
+    }
+
+    set showComponentsPaletteInProjectEditor(value: boolean) {
+        this._showComponentsPaletteInProjectEditor = value;
+        setShowComponentsPaletteInProjectEditor(value);
+    }
 }
 
 export const settingsController = new SettingsController();

diff --git a/packages/home/tabs-store.tsx b/packages/home/tabs-store.tsx
@@ -622,6 +622,9 @@ export class ProjectEditorTab implements IHomeTab {
                 projectStore.navigationStore.selectedPanel.selectAll();
             }
         };
+        const onToggleComponentsPalette = () => {
+            projectStore.layoutModels.toggleComponentsPalette();
+        };
         const onResetLayoutModels = () => {
             if (!this.runMode) {
                 projectStore.layoutModels.reset();
@@ -674,6 +677,7 @@ export class ProjectEditorTab implements IHomeTab {
         ipcRenderer.on("delete", deleteSelection);
         ipcRenderer.on("select-all", selectAll);
 
+        ipcRenderer.on("toggleComponentsPalette", onToggleComponentsPalette);
         ipcRenderer.on("resetLayoutModels", onResetLayoutModels);
 
         ipcRenderer.on("reload-project", onReloadProject);
@@ -698,6 +702,10 @@ export class ProjectEditorTab implements IHomeTab {
             ipcRenderer.removeListener("delete", deleteSelection);
             ipcRenderer.removeListener("select-all", selectAll);
 
+            ipcRenderer.removeListener(
+                "toggleComponentsPalette",
+                onToggleComponentsPalette
+            );
             ipcRenderer.removeListener(
                 "resetLayoutModels",
                 onResetLayoutModels

diff --git a/packages/main/menu.ts b/packages/main/menu.ts
@@ -728,6 +728,19 @@ function buildViewMenu(win: IWindow | undefined) {
             type: "separator"
         });
 
+        viewSubmenu.push({
+            label: settings.showComponentsPaletteInProjectEditor
+                ? "Hide Components Palette"
+                : "Show Components Palette",
+            click: function (item) {
+                if (win) {
+                    win.browserWindow.webContents.send(
+                        "toggleComponentsPalette"
+                    );
+                }
+            }
+        });
+
         viewSubmenu.push({
             label: "Reset Layout",
             click: function (item) {

diff --git a/packages/main/settings.ts b/packages/main/settings.ts
@@ -59,6 +59,8 @@ class Settings {
 
     _loaded: boolean = false;
 
+    showComponentsPaletteInProjectEditor: boolean = true;
+
     async loadSettings() {
         if (this._loaded) {
             return;
@@ -89,7 +91,8 @@ class Settings {
             locale: observable,
             dateFormat: observable,
             timeFormat: observable,
-            isDarkTheme: observable
+            isDarkTheme: observable,
+            showComponentsPaletteInProjectEditor: observable
         });
 
         reaction(
@@ -182,6 +185,11 @@ class Settings {
         if (settingsJs.isDarkTheme != undefined) {
             this.isDarkTheme = settingsJs.isDarkTheme;
         }
+
+        if (settingsJs.showComponentsPaletteInProjectEditor != undefined) {
+            this.showComponentsPaletteInProjectEditor =
+                settingsJs.showComponentsPaletteInProjectEditor;
+        }
     }
 }
 
@@ -467,3 +475,26 @@ ipcMain.on("setIsDarkTheme", function (event: any, value: boolean) {
 });
 
 ////////////////////////////////////////////////////////////////////////////////
+
+function getShowComponentsPaletteInProjectEditor() {
+    return settings.showComponentsPaletteInProjectEditor;
+}
+
+function setShowComponentsPaletteInProjectEditor(value: boolean) {
+    runInAction(() => {
+        settings.showComponentsPaletteInProjectEditor = value;
+    });
+}
+
+ipcMain.on("getShowComponentsPaletteInProjectEditor", function (event: any) {
+    event.returnValue = getShowComponentsPaletteInProjectEditor();
+});
+
+ipcMain.on(
+    "setShowComponentsPaletteInProjectEditor",
+    function (event: any, value: boolean) {
+        setShowComponentsPaletteInProjectEditor(value);
+    }
+);
+
+////////////////////////////////////////////////////////////////////////////////
diff --git a/packages/project-editor/core/objectAdapter.ts b/packages/project-editor/core/objectAdapter.ts
@@ -12,7 +12,7 @@ import { createTransformer } from "mobx-utils";
 import { map, find, each, pickBy } from "lodash";
 
 import { stringCompare } from "eez-studio-shared/string";
-import { Rect } from "eez-studio-shared/geometry";
+import { Point, Rect } from "eez-studio-shared/geometry";
 
 import {
     getProperty,
@@ -24,7 +24,8 @@ import {
     getParent,
     getId,
     EezObject,
-    setKey
+    setKey,
+    getKey
 } from "project-editor/core/object";
 
 import {
@@ -54,7 +55,9 @@ import {
     addItem,
     isObjectReferencable,
     canContain,
-    getProjectEditorDataFromClipboard
+    getProjectEditorDataFromClipboard,
+    getAncestorOfType,
+    getAddItemName
 } from "project-editor/store";
 
 import { DragAndDropManager } from "project-editor/core/dd";
@@ -555,6 +558,7 @@ export class TreeObjectAdapter {
             add?: boolean;
             pasteSelection?: () => void;
             duplicateSelection?: () => void;
+            atPoint?: Point;
         },
         editable?: boolean,
         additionalMenuItems?: Electron.MenuItem[]
@@ -594,12 +598,13 @@ export class TreeObjectAdapter {
         if (
             editable &&
             parentObject &&
+            !(parentObject instanceof ProjectEditor.FlowClass) &&
             canAdd(parentObject) &&
             !(actions?.add === false)
         ) {
             menuItems.push(
                 new MenuItem({
-                    label: "Add",
+                    label: `Add ${getAddItemName(parentObject)}...`,
                     click: async () => {
                         const aNewObject = await addItem(parentObject!);
                         if (aNewObject) {
@@ -757,7 +762,29 @@ export class TreeObjectAdapter {
             menuItems = menuItems.concat(additionalMenuItems);
         }
 
+        console.log("selectedObject", selectedObject);
+        console.log("parentObject", parentObject);
+        if (
+            editable &&
+            getAncestorOfType(
+                selectedObject || parentObject,
+                ProjectEditor.FlowClass.classInfo
+            ) &&
+            getKey(parentObject) != "localVariables"
+        ) {
+            ProjectEditor.newComponentMenuItem(
+                selectedObject || parentObject,
+                menuItems,
+                actions?.atPoint
+            );
+        }
+
         if (menuItems.length > 0) {
+            // remove separator at the end
+            if (menuItems[menuItems.length - 1].type == "separator") {
+                menuItems.splice(menuItems.length - 1, 1);
+            }
+
             const menu = new Menu();
             menuItems.forEach(menuItem => menu.append(menuItem));
             return menu;

diff --git a/packages/project-editor/features/changes/flow-viewer.tsx b/packages/project-editor/features/changes/flow-viewer.tsx
@@ -773,6 +773,17 @@ class FlowDocument implements IDocument {
         targetObjectId: string,
         connectionInput: string
     ) {}
+
+    connectToNewTarget(
+        sourceObjectId: string,
+        connectionOutput: string,
+        atPoint: Point
+    ) {}
+    connectToNewSource(
+        targetObjectId: string,
+        connectionInput: string,
+        atPoint: Point
+    ) {}
 }
 
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/packages/project-editor/features/page/PagesNavigation.tsx b/packages/project-editor/features/page/PagesNavigation.tsx
@@ -428,7 +428,12 @@ export const PageStructure = observer(
                         />
                     </Body>
                 </VerticalHeaderWithBody>
-            ) : null;
+            ) : (
+                <div
+                    className="EezStudio_PageStructure_NoPageSelected"
+                    onContextMenu={e => e.preventDefault()}
+                ></div>
+            );
         }
     }
 );

diff --git a/packages/project-editor/features/style/StylesTreeNavigation.tsx b/packages/project-editor/features/style/StylesTreeNavigation.tsx
@@ -71,7 +71,7 @@ const AddButton = observer(
         render() {
             return (
                 <IconAction
-                    title="Add Item"
+                    title="Add Style..."
                     icon="material:add"
                     iconSize={16}
                     onClick={this.onAdd}

diff --git a/packages/project-editor/features/style/style.tsx b/packages/project-editor/features/style/style.tsx
@@ -867,7 +867,6 @@ const propertiesMap: { [propertyName: string]: PropertyInfo } = {};
 for (const property of properties) {
     propertiesMap[property.name] = property;
 }
-console.log(propertiesMap);
 
 ////////////////////////////////////////////////////////////////////////////////