Save the gameplay test frame position between runs (#9011)

Author: Bouh

newIDE/app/src/GameplayTests/GameplayTestFrame.js

@@ -16,6 +16,7 @@ import {
   isGameplayTestStatusInProgress,
   type GameplayTestDisplayStatus,
 } from './GameplayTestStatusIndicator';
+import PreferencesContext from '../MainFrame/Preferences/PreferencesContext';
 import classes from './GameplayTestFrame.module.css';
 
 /** The status of the run displayed on the gameplay test frame. */
@@ -86,10 +87,18 @@ export const GameplayTestFrameLayout = ({
   children,
 }: GameplayTestFrameLayoutProps): React.Node => {
   const containerRef = React.useRef<HTMLDivElement | null>(null);
-  const [position, setPosition] = React.useState<Position>({
-    left: windowMargin,
-    bottom: windowMargin,
-  });
+  const { values, setGameplayTestFramePosition } = React.useContext(
+    PreferencesContext
+  );
+  // Restore the last position of the frame (it will be clamped to the window
+  // as soon as it is rendered, in case the window is now smaller).
+  const [position, setPosition] = React.useState<Position>(
+    () =>
+      values.gameplayTestFramePosition || {
+        left: windowMargin,
+        bottom: windowMargin,
+      }
+  );
   const [isDragging, setIsDragging] = React.useState<boolean>(false);
   const dragOrigin = React.useRef<{|
     pointerId: number,
@@ -153,13 +162,17 @@ export const GameplayTestFrameLayout = ({
     );
   }, []);
 
-  const onPointerUp = React.useCallback((event: PointerEvent) => {
-    const origin = dragOrigin.current;
-    if (!origin || origin.pointerId !== event.pointerId) return;
+  const onPointerUp = React.useCallback(
+    (event: PointerEvent) => {
+      const origin = dragOrigin.current;
+      if (!origin || origin.pointerId !== event.pointerId) return;
 
-    dragOrigin.current = null;
-    setIsDragging(false);
-  }, []);
+      dragOrigin.current = null;
+      setIsDragging(false);
+      setGameplayTestFramePosition(position);
+    },
+    [position, setGameplayTestFramePosition]
+  );
 
   const isInProgress = runStatus
     ? isGameplayTestStatusInProgress(runStatus.status)

newIDE/app/src/MainFrame/Preferences/PreferencesContext.js

@@ -249,6 +249,7 @@ export type PreferencesValues = {|
   previewCrashReportUploadLevel: string,
   gamesDashboardOrderBy: GamesDashboardOrderBy,
   takeScreenshotOnPreview: boolean,
+  gameplayTestFramePosition: {| left: number, bottom: number |} | null,
   showAiAskButtonInTitleBar: boolean,
   automaticallyUseCreditsForAiRequests: boolean,
   automaticallyApplyAiRequestEditsByProjectId: { [string]: boolean },
@@ -375,6 +376,10 @@ export type Preferences = {|
     orderBy: 'lastModifiedAt' | 'totalSessions' | 'weeklySessions'
   ) => void,
   setTakeScreenshotOnPreview: (enabled: boolean) => void,
+  setGameplayTestFramePosition: (position: {|
+    left: number,
+    bottom: number,
+  |}) => void,
   setShowAiAskButtonInTitleBar: (enabled: boolean) => void,
   setAutomaticallyUseCreditsForAiRequests: (enabled: boolean) => void,
   setAutomaticallyApplyAiRequestEditsForProjectId: (
@@ -444,6 +449,7 @@ export const initialPreferences = {
     previewCrashReportUploadLevel: 'exclude-javascript-code-events',
     gamesDashboardOrderBy: 'lastModifiedAt',
     takeScreenshotOnPreview: true,
+    gameplayTestFramePosition: null,
     showAiAskButtonInTitleBar: true,
     automaticallyUseCreditsForAiRequests: false,
     automaticallyApplyAiRequestEditsByProjectId: {},
@@ -533,6 +539,10 @@ export const initialPreferences = {
     orderBy: 'lastModifiedAt' | 'totalSessions' | 'weeklySessions'
   ) => {},
   setTakeScreenshotOnPreview: (enabled: boolean) => {},
+  setGameplayTestFramePosition: (position: {|
+    left: number,
+    bottom: number,
+  |}) => {},
   setShowAiAskButtonInTitleBar: (enabled: boolean) => {},
   setAutomaticallyUseCreditsForAiRequests: (enabled: boolean) => {},
   setAutomaticallyApplyAiRequestEditsForProjectId: (

newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js

@@ -134,6 +134,7 @@ export const getInitialPreferences = (): {
   showExperimentalExtensions: boolean,
   showInAppTutorialDeveloperMode: boolean,
   takeScreenshotOnPreview: boolean,
+  gameplayTestFramePosition: {| left: number, bottom: number |} | null,
   themeName: any,
   use3DEditor: any,
   useBackgroundSerializerForSaving: boolean,
@@ -396,6 +397,10 @@ export default class PreferencesProvider extends React.Component<Props, State> {
       this
     ): any),
     // $FlowFixMe[method-unbinding]
+    setGameplayTestFramePosition: (this._setGameplayTestFramePosition.bind(
+      this
+    ): any),
+    // $FlowFixMe[method-unbinding]
     setShowAiAskButtonInTitleBar: (this._setShowAiAskButtonInTitleBar.bind(
       this
     ): any),
@@ -1408,6 +1413,18 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
+  _setGameplayTestFramePosition(newValue: {| left: number, bottom: number |}) {
+    this.setState(
+      state => ({
+        values: {
+          ...state.values,
+          gameplayTestFramePosition: newValue,
+        },
+      }),
+      () => this._persistValuesToLocalStorage(this.state)
+    );
+  }
+
   _setShowAiAskButtonInTitleBar(newValue: boolean) {
     this.setState(
       state => ({