Update instance properties panel after a layer was created or renamed (#4420)

newIDE/app/src/LayersList/index.js

@@ -19,6 +19,7 @@ import { FullSizeMeasurer } from '../UI/FullSizeMeasurer';
 import Background from '../UI/Background';
 import { type HotReloadPreviewButtonProps } from '../HotReload/HotReloadPreviewButton';
 import RaisedButtonWithSplitMenu from '../UI/RaisedButtonWithSplitMenu';
+import useForceUpdate from '../Utils/UseForceUpdate';
 
 const SortableLayerRow = SortableElement(LayerRow);
 
@@ -124,15 +125,16 @@ type Props = {|
     newName: string,
     cb: (done: boolean) => void
   ) => void,
+  onCreateLayer: () => void,
   unsavedChanges?: ?UnsavedChanges,
 
   // Preview:
   hotReloadPreviewButtonProps: HotReloadPreviewButtonProps,
 |};
 
-type State = {|
+export type LayersListInterface = {
-  effectsEditedLayer: ?gdLayer,
+  forceUpdate: () => void,
-|};
+};
 
 const hasLightingLayer = (layout: gdLayout) => {
   const layersCount = layout.getLayersCount();
@@ -143,41 +145,48 @@ const hasLightingLayer = (layout: gdLayout) => {
   );
 };
 
-export default class LayersList extends Component<Props, State> {
+const LayersList = React.forwardRef<Props, LayersListInterface>(
-  _addLayer = () => {
+  (props, ref) => {
-    const { layersContainer } = this.props;
+    const forceUpdate = useForceUpdate();
-    const name = newNameGenerator('Layer', name =>
-      layersContainer.hasLayerNamed(name)
-    );
-    layersContainer.insertNewLayer(name, layersContainer.getLayersCount());
-    this._onLayerModified();
-  };
 
-  _addLightingLayer = () => {
+    React.useImperativeHandle(ref, () => ({
-    const { layersContainer } = this.props;
+      forceUpdate,
-    const name = newNameGenerator('Lighting', name =>
+    }));
-      layersContainer.hasLayerNamed(name)
-    );
-    layersContainer.insertNewLayer(name, layersContainer.getLayersCount());
-    const layer = layersContainer.getLayer(name);
-    layer.setLightingLayer(true);
-    layer.setFollowBaseLayerCamera(true);
-    layer.setAmbientLightColor(200, 200, 200);
-    this._onLayerModified();
-  };
 
-  _onLayerModified = () => {
+    const addLayer = () => {
-    if (this.props.unsavedChanges)
+      const { layersContainer } = props;
-      this.props.unsavedChanges.triggerUnsavedChanges();
+      const name = newNameGenerator('Layer', name =>
-    this.forceUpdate();
+        layersContainer.hasLayerNamed(name)
-  };
+      );
+      layersContainer.insertNewLayer(name, layersContainer.getLayersCount());
+      onLayerModified();
+      props.onCreateLayer();
+    };
+
+    const addLightingLayer = () => {
+      const { layersContainer } = props;
+      const name = newNameGenerator('Lighting', name =>
+        layersContainer.hasLayerNamed(name)
+      );
+      layersContainer.insertNewLayer(name, layersContainer.getLayersCount());
+      const layer = layersContainer.getLayer(name);
+      layer.setLightingLayer(true);
+      layer.setFollowBaseLayerCamera(true);
+      layer.setAmbientLightColor(200, 200, 200);
+      onLayerModified();
+      props.onCreateLayer();
+    };
+
+    const onLayerModified = () => {
+      if (props.unsavedChanges) props.unsavedChanges.triggerUnsavedChanges();
+      forceUpdate();
+    };
 
-  render() {
     // Force the list to be mounted again if layersContainer
     // has been changed. Avoid accessing to invalid objects that could
     // crash the app.
-    const listKey = this.props.layersContainer.ptr;
+    const listKey = props.layersContainer.ptr;
-    const isLightingLayerPresent = hasLightingLayer(this.props.layersContainer);
+    const isLightingLayerPresent = hasLightingLayer(props.layersContainer);
 
     return (
       <Background>
@@ -188,22 +197,22 @@ export default class LayersList extends Component<Props, State> {
               // using SortableVirtualizedItemList.
               <SortableLayersListBody
                 key={listKey}
-                layersContainer={this.props.layersContainer}
+                layersContainer={props.layersContainer}
-                onEditEffects={this.props.onEditLayerEffects}
+                onEditEffects={props.onEditLayerEffects}
-                onEdit={this.props.onEditLayer}
+                onEdit={props.onEditLayer}
-                onRemoveLayer={this.props.onRemoveLayer}
+                onRemoveLayer={props.onRemoveLayer}
-                onRenameLayer={this.props.onRenameLayer}
+                onRenameLayer={props.onRenameLayer}
                 onSortEnd={({ oldIndex, newIndex }) => {
-                  const layersCount = this.props.layersContainer.getLayersCount();
+                  const layersCount = props.layersContainer.getLayersCount();
-                  this.props.layersContainer.moveLayer(
+                  props.layersContainer.moveLayer(
                     layersCount - 1 - oldIndex,
                     layersCount - 1 - newIndex
                   );
-                  this._onLayerModified();
+                  onLayerModified();
                 }}
                 helperClass="sortable-helper"
                 useDragHandle
-                unsavedChanges={this.props.unsavedChanges}
+                unsavedChanges={props.unsavedChanges}
                 width={width}
               />
             )}
@@ -213,13 +222,13 @@ export default class LayersList extends Component<Props, State> {
               <RaisedButtonWithSplitMenu
                 label={<Trans>Add a layer</Trans>}
                 primary
-                onClick={this._addLayer}
+                onClick={addLayer}
                 icon={<Add />}
                 buildMenuTemplate={i18n => [
                   {
                     label: i18n._(t`Add lighting layer`),
                     enabled: !isLightingLayerPresent,
-                    click: this._addLightingLayer,
+                    click: addLightingLayer,
                   },
                 ]}
               />
@@ -229,4 +238,6 @@ export default class LayersList extends Component<Props, State> {
       </Background>
     );
   }
-}
+);
+
+export default LayersList;

newIDE/app/src/SceneEditor/index.js

@@ -12,7 +12,7 @@ import ObjectsRenderingService from '../ObjectsRendering/ObjectsRenderingService
 import InstancesEditor from '../InstancesEditor';
 import InstancePropertiesEditor from '../InstancesEditor/InstancePropertiesEditor';
 import InstancesList from '../InstancesEditor/InstancesList';
-import LayersList from '../LayersList';
+import LayersList, { type LayersListInterface } from '../LayersList';
 import LayerRemoveDialog from '../LayersList/LayerRemoveDialog';
 import LayerEditorDialog from '../LayersList/LayerEditorDialog';
 import VariablesEditorDialog from '../VariablesList/VariablesEditorDialog';
@@ -177,7 +177,7 @@ export default class SceneEditor extends React.Component<Props, State> {
   contextMenu: ?ContextMenuInterface;
   editorMosaic: ?EditorMosaic;
   _objectsList: ?ObjectsListInterface;
-  _layersList: ?LayersList;
+  _layersList: ?LayersListInterface;
   _propertiesEditor: ?InstancePropertiesEditor;
   _instancesList: ?InstancesList;
 
@@ -688,6 +688,11 @@ export default class SceneEditor extends React.Component<Props, State> {
   ) => {
     this.props.initialInstances.moveInstancesToLayer(oldName, newName);
     done(true);
+    this.forceUpdatePropertiesEditor();
+  };
+
+  _onCreateLayer = () => {
+    this.forceUpdatePropertiesEditor();
   };
 
   _onDeleteObject = (i18n: I18nType) => (
@@ -1309,6 +1314,7 @@ export default class SceneEditor extends React.Component<Props, State> {
             onEditLayer={this.editLayer}
             onRemoveLayer={this._onRemoveLayer}
             onRenameLayer={this._onRenameLayer}
+            onCreateLayer={this._onCreateLayer}
             layersContainer={layout}
             unsavedChanges={this.props.unsavedChanges}
             ref={layersList => (this._layersList = layersList)}

newIDE/app/src/stories/componentStories/LayoutEditor/LayersList.stories.js

@@ -35,6 +35,7 @@ export const Default = () => (
     onRenameLayer={(oldName, newName, cb) => {
       cb(true);
     }}
+    onCreateLayer={action('onCreateLayer')}
     layersContainer={testProject.testLayout}
     hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
   />
@@ -58,6 +59,7 @@ export const SmallWidthAndHeight = () => (
       onRenameLayer={(oldName, newName, cb) => {
         cb(true);
       }}
+      onCreateLayer={action('onCreateLayer')}
       layersContainer={testProject.testLayout}
       hotReloadPreviewButtonProps={fakeHotReloadPreviewButtonProps}
     />