Maintain the active editor in the scene editor

newIDE/app/src/InstancesEditor/FullSizeInstancesEditorWithScrollbars.js

@@ -27,12 +27,13 @@ const styles = {
 type Props = {|
   ...InstancesEditorPropsWithoutSizeAndScroll,
   wrappedEditorRef: ?(?InstancesEditor) => void,
+  onEditorActive?: () => void,
 |};
 
 const noop = () => {};
 
 const FullSizeInstancesEditorWithScrollbars = (props: Props) => {
-  const { wrappedEditorRef, ...otherProps } = props;
+  const { wrappedEditorRef, onEditorActive, ...otherProps } = props;
 
   const editorRef = React.useRef<?InstancesEditor>(null);
   const xScrollbarTrack = React.useRef<?HTMLDivElement>(null);
@@ -361,7 +362,7 @@ const FullSizeInstancesEditorWithScrollbars = (props: Props) => {
   return (
     <FullSizeMeasurer>
       {({ width, height }) => (
-        <div style={styles.container}>
+        <div style={styles.container} onClick={onEditorActive}>
           {width !== undefined && height !== undefined && (
             <InstancesEditor
               onViewPositionChanged={

newIDE/app/src/InstancesEditor/InstancePropertiesEditor/index.js

@@ -32,6 +32,7 @@ type Props = {|
   unsavedChanges?: ?UnsavedChanges,
   i18n: I18nType,
   historyHandler?: HistoryHandler,
+  onEditorActive?: () => void,
 |};
 
 export default class InstancePropertiesEditor extends React.Component<Props> {
@@ -238,7 +239,7 @@ export default class InstancePropertiesEditor extends React.Component<Props> {
     const { instances } = this.props;
 
     return (
-      <Background>
+      <Background onClick={this.props.onEditorActive}>
         {!instances || !instances.length
           ? this._renderEmpty()
           : this._renderInstancesProperties()}

newIDE/app/src/InstancesEditor/InstancesList/index.js

@@ -26,6 +26,7 @@ type Props = {|
   instances: gdInitialInstancesContainer,
   selectedInstances: Array<gdInitialInstance>,
   onSelectInstances: (Array<gdInitialInstance>, boolean) => void,
+  onEditorActive?: () => void,
 |};
 
 type RenderedRowInfo = {
@@ -223,7 +224,7 @@ export default class InstancesList extends Component<Props, State> {
     return (
       <ThemeConsumer>
         {muiTheme => (
-          <div style={styles.container}>
+          <div style={styles.container} onClick={this.props.onEditorActive}>
             <div
               style={{ flex: 1 }}
               onKeyDown={this._keyboardShortcuts.onKeyDown}

newIDE/app/src/LayersList/index.js

@@ -175,6 +175,7 @@ type Props = {|
 
   // Preview:
   hotReloadPreviewButtonProps: HotReloadPreviewButtonProps,
+  onEditorActive?: () => void,
 |};
 
 export type LayersListInterface = {
@@ -234,7 +235,7 @@ const LayersList = React.forwardRef<Props, LayersListInterface>(
     const isLightingLayerPresent = hasLightingLayer(props.layersContainer);
 
     return (
-      <Background>
+      <Background onClick={props.onEditorActive}>
         <ScrollView autoHideScrollbar>
           <FullSizeMeasurer>
             {({ width }) => (

newIDE/app/src/ObjectGroupsList/index.js

@@ -61,6 +61,7 @@ type Props = {|
   onGroupRenamed?: () => void,
   canSetAsGlobalGroup?: boolean,
   unsavedChanges?: ?UnsavedChanges,
+  onEditorActive?: () => void,
 |};
 
 export default class ObjectGroupsList extends React.Component<Props, State> {
@@ -399,7 +400,7 @@ export default class ObjectGroupsList extends React.Component<Props, State> {
       : null;
 
     return (
-      <Background>
+      <Background onClick={this.props.onEditorActive}>
         <div style={styles.listContainer}>
           <AutoSizer>
             {({ height, width }) => (

newIDE/app/src/ObjectsList/index.js

@@ -137,6 +137,7 @@ type Props = {|
   ) => string,
   unsavedChanges?: ?UnsavedChanges,
   hotReloadPreviewButtonProps: HotReloadPreviewButtonProps,
+  onEditorActive?: () => void,
 |};
 
 const ObjectsList = React.forwardRef<Props, ObjectsListInterface>(
@@ -169,6 +170,7 @@ const ObjectsList = React.forwardRef<Props, ObjectsListInterface>(
       getThumbnail,
       unsavedChanges,
       hotReloadPreviewButtonProps,
+      onEditorActive
     }: Props,
     ref
   ) => {
@@ -798,7 +800,7 @@ const ObjectsList = React.forwardRef<Props, ObjectsListInterface>(
     const screenType = useScreenType();
 
     return (
-      <Background maxWidth>
+      <Background maxWidth onClick={onEditorActive}>
         <TagChips
           tags={selectedObjectTags}
           onChange={onChangeSelectedObjectTags}

newIDE/app/src/SceneEditor/index.js

@@ -154,6 +154,7 @@ type State = {|
 
   renamedObjectWithContext: ?ObjectWithContext,
   selectedObjectsWithContext: Array<ObjectWithContext>,
+  activeEditor: string | null,
 |};
 
 type CopyCutPasteOptions = {|
@@ -217,6 +218,8 @@ export default class SceneEditor extends React.Component<Props, State> {
 
       renamedObjectWithContext: null,
       selectedObjectsWithContext: [],
+
+      activeEditor: null,
     };
   }
 
@@ -1354,6 +1357,9 @@ export default class SceneEditor extends React.Component<Props, State> {
                 i18n={i18n}
                 project={project}
                 layout={layout}
+                onEditorActive={() =>
+                  this.setState({ activeEditor: 'instance-properties-editor' })
+                }
                 instances={selectedInstances}
                 editInstanceVariables={this.editInstanceVariables}
                 onEditObjectByName={this.editObjectByName}
@@ -1388,6 +1394,9 @@ export default class SceneEditor extends React.Component<Props, State> {
         renderEditor: () => (
           <LayersList
             project={project}
+            onEditorActive={() =>
+              this.setState({ activeEditor: 'layers-list' })
+            }
             onEditLayerEffects={this.editLayerEffects}
             onEditLayer={this.editLayer}
             onRemoveLayer={this._onRemoveLayer}
@@ -1405,6 +1414,9 @@ export default class SceneEditor extends React.Component<Props, State> {
         title: t`Instances List`,
         renderEditor: () => (
           <InstancesList
+            onEditorActive={() =>
+              this.setState({ activeEditor: 'instances-list' })
+            }
             instances={initialInstances}
             selectedInstances={selectedInstances}
             onSelectInstances={this._onSelectInstances}
@@ -1419,6 +1431,9 @@ export default class SceneEditor extends React.Component<Props, State> {
           <FullSizeInstancesEditorWithScrollbars
             project={project}
             layout={layout}
+            onEditorActive={() =>
+              this.setState({ activeEditor: 'instances-editor' })
+            }
             initialInstances={initialInstances}
             instancesEditorSettings={this.state.instancesEditorSettings}
             onChangeInstancesEditorSettings={this.setInstancesEditorSettings}
@@ -1474,6 +1489,9 @@ export default class SceneEditor extends React.Component<Props, State> {
                   ObjectsRenderingService
                 )}
                 project={project}
+                onEditorActive={() =>
+                  this.setState({ activeEditor: 'objects-list' })
+                }
                 objectsContainer={layout}
                 layout={layout}
                 onSelectAllInstancesOfObjectInLayout={
@@ -1522,6 +1540,9 @@ export default class SceneEditor extends React.Component<Props, State> {
           <I18n>
             {({ i18n }) => (
               <ObjectGroupsList
+                onEditorActive={() =>
+                  this.setState({ activeEditor: 'object-groups-list' })
+                }
                 globalObjectGroups={project.getObjectGroups()}
                 objectGroups={layout.getObjectGroups()}
                 onEditGroup={this.editGroup}