Merge pull request #12299 from carolhmj/geFixReframing

Separate reframing with selected controls and the entire screen
BabylonJS · Mar 31, 2022 · 6b0d029 · 6b0d029
2 parents 5e82447 + 2a02a04
commit 6b0d029
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/packages/tools/guiEditor/src/components/commandBarComponent.tsx b/packages/tools/guiEditor/src/components/commandBarComponent.tsx
@@ -191,7 +191,7 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                             icon={canvasFitIcon}
                             isActive={false}
                             onClick={() => {
-                                this.props.globalState.onFitToWindowObservable.notifyObservers();
+                                this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
                             }}
                         />
                         <CommandButtonComponent

diff --git a/packages/tools/guiEditor/src/diagram/workbench.tsx b/packages/tools/guiEditor/src/diagram/workbench.tsx
@@ -96,7 +96,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         this._visibleRegionContainer.widthInPixels = this._guiSize.width;
         this._visibleRegionContainer.heightInPixels = this._guiSize.height;
         this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
-        this.props.globalState.onFitToWindowObservable.notifyObservers();
+        this.props.globalState.onReframeWindowObservable.notifyObservers();
         this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
     }
 
@@ -127,6 +127,13 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         this._trueRootContainer.clipChildren = true;
     }
 
+    private _reframeWindow() {
+        this._panningOffset = new Vector2(0, 0);
+        const xFactor = this._engine.getRenderWidth() / this.guiSize.width;
+        const yFactor = this._engine.getRenderHeight() / this.guiSize.height;
+        this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
+    }
+
     constructor(props: IWorkbenchComponentProps) {
         super(props);
         const { globalState } = props;
@@ -139,7 +146,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         });
         // Get the canvas element from the DOM.
 
-        globalState.onFitToWindowObservable.add(() => {
+        globalState.onFitControlsToWindowObservable.add(() => {
             if (globalState.selectedControls.length) {
                 let minX = Number.MAX_SAFE_INTEGER;
                 let minY = Number.MAX_SAFE_INTEGER;
@@ -183,13 +190,14 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                 const yFactor = this._engine.getRenderHeight() / height;
                 this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
             } else {
-                this._panningOffset = new Vector2(0, 0);
-                const xFactor = this._engine.getRenderWidth() / this.guiSize.width;
-                const yFactor = this._engine.getRenderHeight() / this.guiSize.height;
-                this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
+                this._reframeWindow();
             }
         });
 
+        globalState.onReframeWindowObservable.add(() => {
+            this._reframeWindow();
+        });
+
         globalState.onOutlineChangedObservable.add(() => {
             this.updateNodeOutlines();
         });
@@ -398,7 +406,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
 
         this._isOverGUINode = [];
         this.props.globalState.setSelection([]);
-        this.props.globalState.onFitToWindowObservable.notifyObservers();
+        this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
     }
 
     public updateNodeOutlines() {
@@ -850,7 +858,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
         });
         this.props.globalState.onNewSceneObservable.notifyObservers(this.props.globalState.guiTexture.getScene());
         this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
-        this.props.globalState.onFitToWindowObservable.notifyObservers();
+        this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
     }
 
     // removes all controls from both GUIs, and re-adds the controls from the original to the GUI editor
@@ -887,7 +895,7 @@ export class WorkbenchComponent extends React.Component<IWorkbenchComponentProps
                     break;
                 case "f": //fit to window
                 case "F":
-                    this.props.globalState.onFitToWindowObservable.notifyObservers();
+                    this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
                     break;
                 case "ArrowUp": // move up
                     this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);

diff --git a/packages/tools/guiEditor/src/globalState.ts b/packages/tools/guiEditor/src/globalState.ts
@@ -72,7 +72,8 @@ export class GlobalState {
         this._tool = newTool;
         this.onToolChangeObservable.notifyObservers();
     }
-    onFitToWindowObservable = new Observable<void>();
+    onFitControlsToWindowObservable = new Observable<void>();
+    onReframeWindowObservable = new Observable<void>();
     onLoadObservable = new Observable<File>();
     onSaveObservable = new Observable<void>();
     onSnippetLoadObservable = new Observable<void>();