#563

Author: mvladic

packages/eez-studio-ui/_stylesheets/project-editor.less

@@ -3643,3 +3643,44 @@
         }
     }
 }
+
+.EezStudio_PageZoomButton {
+    padding: 1px 6px;
+
+    background-color: @selectionBackgroundColor;
+    &:hover {
+        background-color: @actionHoverColor;
+    }
+}
+
+.EezStudio_PageZoomButton_DropdownContent {
+    font-size: 0.8rem;
+
+    padding: 0;
+    margin: 0;
+
+    border-radius: 4px;
+    overflow: hidden;
+
+    ul {
+        margin: 0;
+        padding: 5px;
+
+        .EezStudio_PageZoomButton_DropdownContent_ZoomInput {
+            margin: 4px;
+        }
+
+        li {
+            list-style: none;
+            cursor: pointer;
+            &:hover {
+                color: @selectionColor;
+                background-color: @selectionBackgroundColor;
+            }
+
+            .form-check {
+                margin: 2px 16px;
+            }
+        }
+    }
+}

packages/project-editor/core/objectAdapter.ts

@@ -552,10 +552,12 @@ export class TreeObjectAdapter {
 
     createSelectionContextMenu(
         actions?: {
-            pasteSelection: () => void;
-            duplicateSelection: () => void;
+            add?: boolean;
+            pasteSelection?: () => void;
+            duplicateSelection?: () => void;
         },
-        editable?: boolean
+        editable?: boolean,
+        additionalMenuItems?: Electron.MenuItem[]
     ) {
         let menuItems: Electron.MenuItem[] = [];
 
@@ -589,7 +591,12 @@ export class TreeObjectAdapter {
             parentObject = this.object;
         }
 
-        if (editable && parentObject && canAdd(parentObject)) {
+        if (
+            editable &&
+            parentObject &&
+            canAdd(parentObject) &&
+            !(actions?.add === false)
+        ) {
             menuItems.push(
                 new MenuItem({
                     label: "Add",
@@ -739,6 +746,17 @@ export class TreeObjectAdapter {
             );
         }
 
+        if (additionalMenuItems) {
+            if (menuItems.length > 0) {
+                menuItems.push(
+                    new MenuItem({
+                        type: "separator"
+                    })
+                );
+            }
+            menuItems = menuItems.concat(additionalMenuItems);
+        }
+
         if (menuItems.length > 0) {
             const menu = new Menu();
             menuItems.forEach(menuItem => menu.append(menuItem));

packages/project-editor/features/page/PageEditor.tsx

@@ -97,6 +97,7 @@ export class PageTabState extends FlowTabState {
 
         makeObservable(this, {
             _transform: observable,
+            transform: computed,
             frontFace: computed
         });
 
@@ -154,12 +155,20 @@ export class PageTabState extends FlowTabState {
     }
 
     get transform() {
+        if (this.projectStore.uiStateStore.globalFlowZoom) {
+            const newTransform = this._transform.clone();
+            newTransform.scale = this.projectStore.uiStateStore.flowZoom;
+            return newTransform;
+        }
         return this._transform;
     }
 
     set transform(transform: Transform) {
         runInAction(() => {
             this._transform = transform;
+            if (this.projectStore.uiStateStore.globalFlowZoom) {
+                this.projectStore.uiStateStore.flowZoom = transform.scale;
+            }
         });
     }
 
@@ -187,7 +196,9 @@ export class PageTabState extends FlowTabState {
                     x: state.transform.translate.x ?? 0,
                     y: state.transform.translate.y ?? 0
                 },
-                scale: state.transform.scale ?? 1
+                scale: this.projectStore.uiStateStore.globalFlowZoom
+                    ? this.projectStore.uiStateStore.flowZoom
+                    : state.transform.scale ?? 1
             });
         }
 

packages/project-editor/flow/editor/context.tsx

@@ -67,6 +67,10 @@ class ViewState implements IViewState {
         this.flowContext.tabState.resetTransform();
     }
 
+    centerView() {
+        this.flowContext.tabState.centerView();
+    }
+
     getResizeHandlers(): IResizeHandler[] | undefined {
         const isEditor = this.document && !this.document.projectStore.runtime;
 

packages/project-editor/flow/editor/flow-document.tsx

@@ -1,5 +1,6 @@
-import { computed, makeObservable } from "mobx";
+import { computed, makeObservable, runInAction } from "mobx";
 import { intersection } from "lodash";
+import { MenuItem } from "@electron/remote";
 
 import type { Point, Rect } from "eez-studio-shared/geometry";
 import type { IDocument } from "project-editor/flow/flow-interfaces";
@@ -153,7 +154,67 @@ export class FlowDocument implements IDocument {
     }
 
     createContextMenu(objects: TreeObjectAdapter[]) {
-        return this.flow.createSelectionContextMenu();
+        return this.flow.createSelectionContextMenu(
+            {
+                add: false
+            },
+            undefined,
+            objects.length == 0
+                ? [
+                      new MenuItem({
+                          label: "Center View",
+                          click: async () => {
+                              this.flowContext.viewState.centerView();
+                          }
+                      }),
+                      ...(this.projectStore.uiStateStore.globalFlowZoom
+                          ? []
+                          : [
+                                new MenuItem({
+                                    label: "Set the Same Zoom for All Pages",
+                                    click: async () => {
+                                        for (const page of this.projectStore
+                                            .project.pages) {
+                                            if (page != this.flow.object) {
+                                                let uiState =
+                                                    this.projectStore.uiStateStore.getObjectUIState(
+                                                        page,
+                                                        "flow-state"
+                                                    );
+
+                                                if (!uiState) {
+                                                    uiState = {};
+                                                }
+
+                                                uiState.transform = {
+                                                    translate: {
+                                                        x: this.flowContext
+                                                            .viewState.transform
+                                                            .translate.x,
+                                                        y: this.flowContext
+                                                            .viewState.transform
+                                                            .translate.y
+                                                    },
+                                                    scale: this.flowContext
+                                                        .viewState.transform
+                                                        .scale
+                                                };
+
+                                                runInAction(() => {
+                                                    this.projectStore.uiStateStore.updateObjectUIState(
+                                                        page,
+                                                        "flow-state",
+                                                        uiState
+                                                    );
+                                                });
+                                            }
+                                        }
+                                    }
+                                })
+                            ])
+                  ]
+                : undefined
+        );
     }
 
     duplicateSelection = () => {

packages/project-editor/flow/flow-tab-state.tsx

@@ -63,6 +63,16 @@ export abstract class FlowTabState implements IEditorState {
         };
     }
 
+    centerView(transform?: Transform) {
+        if (!transform) {
+            transform = this.transform;
+        }
+        transform.translate = {
+            x: -this.flow.pageRect.width / 2,
+            y: -this.flow.pageRect.height / 2
+        };
+    }
+
     abstract get frontFace(): boolean;
     abstract set frontFace(value: boolean);