WIP: refactoring and prepare for handling external layout in-game edition

Author: 4ian

GDJS/Runtime/debugger-client/abstract-debugger-client.ts

@@ -283,6 +283,8 @@ namespace gdjs {
         }
 
         runtimeGame.getSceneStack().replace(sceneName, true);
+        // TODO: handle external layouts.
+
         // TODO: if fatal error, should probably reload. The editor should handle this
         // as it knows the current scene to show.
       } else if (data.command === 'updateInstances') {

newIDE/app/src/EmbeddedGame/EmbeddedGameFrame.js

@@ -8,6 +8,7 @@ type AttachToPreviewOptions = {|
 
 type SwitchToSceneEditionOptions = {|
   sceneName: string,
+  externalLayoutName?: string,
 |};
 
 let onAttachToPreview: null | (AttachToPreviewOptions => void) = null;
@@ -22,15 +23,19 @@ export const attachToPreview = ({
 
 export const switchToSceneEdition = ({
   sceneName,
+  externalLayoutName,
 }: SwitchToSceneEditionOptions) => {
   if (!onSwitchToSceneEdition)
     throw new Error('No EmbeddedGameFrame registered.');
-  onSwitchToSceneEdition({ sceneName });
+  onSwitchToSceneEdition({ sceneName, externalLayoutName });
 };
 
 type Props = {|
   previewDebuggerServer: PreviewDebuggerServer | null,
-  onLaunchPreviewForInGameEdition: ({| sceneName: string |}) => void,
+  onLaunchPreviewForInGameEdition: ({|
+    sceneName: string,
+    externalLayoutName: ?string,
+  |}) => void,
 |};
 
 export const EmbeddedGameFrame = ({
@@ -55,12 +60,13 @@ export const EmbeddedGameFrame = ({
       onSwitchToSceneEdition = (options: SwitchToSceneEditionOptions) => {
         if (!previewDebuggerServer) return;
 
-        const { sceneName } = options;
+        const { sceneName, externalLayoutName } = options;
 
         if (!previewIndexHtmlLocation) {
           console.info('Launching preview for embedded game.');
-          onLaunchPreviewForInGameEdition({ sceneName });
+          onLaunchPreviewForInGameEdition({ sceneName, externalLayoutName });
         } else {
+          // TODO: handle external layouts (and custom objects later).
           console.info(`Switching previews to scene "${sceneName}".`);
           previewDebuggerServer.getExistingDebuggerIds().forEach(debuggerId => {
             previewDebuggerServer.sendMessage(debuggerId, {

newIDE/app/src/ExportAndShare/PreviewLauncher.flow.js

@@ -15,7 +15,10 @@ export type LaunchPreviewOptions = {
   fullLoadingScreen?: boolean,
   forceDiagnosticReport?: boolean,
   numberOfWindows?: number,
-  isForInGameEdition?: { forcedSceneName: string },
+  isForInGameEdition?: {|
+    forcedSceneName: string,
+    forcedExternalLayoutName: ?string,
+  |},
   launchCaptureOptions?: LaunchCaptureOptions,
 };
 export type CaptureOptions = {|

newIDE/app/src/MainFrame/EditorContainers/ExternalLayoutEditorContainer.js

@@ -27,6 +27,9 @@ import {
 } from '../ResourcesWatcher';
 import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
+import { switchToSceneEdition } from '../../EmbeddedGame/EmbeddedGameFrame';
+
+const gameEditorMode = 'embedded-game'; // TODO: move to a preference.
 
 const styles = {
   container: {
@@ -69,6 +72,13 @@ export class ExternalLayoutEditorContainer extends React.Component<
         layout ? layout.getName() : null,
         projectItemName
       );
+
+      if (gameEditorMode === 'embedded-game' && layout && projectItemName) {
+        switchToSceneEdition({
+          sceneName: layout.getName(),
+          externalLayoutName: projectItemName,
+        });
+      }
     }
     this.resourceExternallyChangedCallbackId = registerOnResourceExternallyChangedCallback(
       this.onResourceExternallyChanged.bind(this)
@@ -88,6 +98,13 @@ export class ExternalLayoutEditorContainer extends React.Component<
         layout ? layout.getName() : null,
         projectItemName
       );
+
+      if (gameEditorMode === 'embedded-game' && layout && projectItemName) {
+        switchToSceneEdition({
+          sceneName: layout.getName(),
+          externalLayoutName: projectItemName,
+        });
+      }
     }
   }
 

newIDE/app/src/MainFrame/EditorContainers/SceneEditorContainer.js

@@ -12,6 +12,9 @@ import {
 } from './BaseEditor';
 import { ProjectScopedContainersAccessor } from '../../InstructionOrExpression/EventsScope';
 import { type ObjectWithContext } from '../../ObjectsList/EnumerateObjects';
+import { switchToSceneEdition } from '../../EmbeddedGame/EmbeddedGameFrame';
+
+const gameEditorMode = 'embedded-game'; // TODO: move to a preference.
 
 export class SceneEditorContainer extends React.Component<RenderEditorContainerProps> {
   editor: ?SceneEditor;
@@ -32,13 +35,21 @@ export class SceneEditorContainer extends React.Component<RenderEditorContainerP
     if (this.props.isActive) {
       const { projectItemName } = this.props;
       this.props.setPreviewedLayout(projectItemName);
+
+      if (gameEditorMode === 'embedded-game' && projectItemName) {
+        switchToSceneEdition({ sceneName: projectItemName });
+      }
     }
   }
 
   componentDidUpdate(prevProps: RenderEditorContainerProps) {
     if (!prevProps.isActive && this.props.isActive) {
       const { projectItemName } = this.props;
       this.props.setPreviewedLayout(projectItemName);
+
+      if (gameEditorMode === 'embedded-game' && projectItemName) {
+        switchToSceneEdition({ sceneName: projectItemName });
+      }
     }
   }
 

newIDE/app/src/MainFrame/index.js

@@ -1633,7 +1633,7 @@ const MainFrame = (props: Props) => {
         ? previewState.overridenPreviewLayoutName
         : previewState.previewLayoutName;
       const externalLayoutName = isForInGameEdition
-        ? null
+        ? isForInGameEdition.forcedExternalLayoutName
         : previewState.isPreviewOverriden
         ? previewState.overridenPreviewExternalLayoutName
         : previewState.previewExternalLayoutName;
@@ -1676,6 +1676,7 @@ const MainFrame = (props: Props) => {
         const startTime = Date.now();
         await previewLauncher.launchPreview({
           project: currentProject,
+          // TODO: replace by scene name and external layout name
           layout,
           externalLayout,
           networkPreview: !!networkPreview,
@@ -1789,13 +1790,20 @@ const MainFrame = (props: Props) => {
   );
 
   const onLaunchPreviewForInGameEdition = React.useCallback(
-    ({ sceneName }: {| sceneName: string |}) => {
+    ({
+      sceneName,
+      externalLayoutName,
+    }: {|
+      sceneName: string,
+      externalLayoutName: ?string,
+    |}) => {
       launchPreview({
         networkPreview: false,
         hotReload: false,
         forceDiagnosticReport: false,
         isForInGameEdition: {
           forcedSceneName: sceneName,
+          forcedExternalLayoutName: externalLayoutName,
         },
         numberOfWindows: 0,
       });
@@ -1821,6 +1829,8 @@ const MainFrame = (props: Props) => {
           isForInGameEdition: {
             forcedSceneName:
               runningInGameEditionPreviewStatus.currentSceneName || '',
+            // TODO: add support for forced external layout name.
+            forcedExternalLayoutName: null,
           },
           numberOfWindows: 0,
         });

newIDE/app/src/SceneEditor/index.js

@@ -80,7 +80,6 @@ import { unserializeFromJSObject } from '../Utils/Serializer';
 import { ProjectScopedContainersAccessor } from '../InstructionOrExpression/EventsScope';
 import { type TileMapTileSelection } from '../InstancesEditor/TileSetVisualizer';
 import { extractAsCustomObject } from './CustomObjectExtractor/CustomObjectExtractor';
-import { switchToSceneEdition } from '../EmbeddedGame/EmbeddedGameFrame';
 
 const gd: libGDevelop = global.gd;
 
@@ -249,11 +248,6 @@ export default class SceneEditor extends React.Component<Props, State> {
     this.resourceExternallyChangedCallbackId = registerOnResourceExternallyChangedCallback(
       this.onResourceExternallyChanged.bind(this)
     );
-    if (this.props.isActive) {
-      if (this.props.layout && this.state.gameEditorMode === 'embedded-game') {
-        switchToSceneEdition({ sceneName: this.props.layout.getName() });
-      }
-    }
   }
   componentWillUnmount() {
     unregisterOnResourceExternallyChangedCallback(
@@ -403,10 +397,6 @@ export default class SceneEditor extends React.Component<Props, State> {
           selectedObjectFolderOrObjectsWithContext
         ),
       }));
-
-      if (this.props.layout && this.state.gameEditorMode === 'embedded-game') {
-        switchToSceneEdition({ sceneName: this.props.layout.getName() });
-      }
     }
   }