Improve navigation shortcuts in Resources List tab

Author: ClementPasteau

Core/GDCore/Project/ResourcesContainer.cpp

@@ -311,6 +311,20 @@ ResourcesContainer::GetResourcePosition(const gd::String &name) const {
   return gd::String::npos;
 }
 
+Resource &ResourcesContainer::GetResourceAt(std::size_t index) {
+  if (index < resources.size())
+    return *resources[index];
+
+  return badResource;
+}
+
+const Resource &ResourcesContainer::GetResourceAt(std::size_t index) const {
+  if (index < resources.size())
+    return *resources[index];
+
+  return badResource;
+}
+
 void ResourcesContainer::MoveResource(std::size_t oldIndex,
                                       std::size_t newIndex) {
   if (oldIndex >= resources.size() || newIndex >= resources.size())

Core/GDCore/Project/ResourcesContainer.h

@@ -737,6 +737,16 @@ class GD_CORE_API ResourcesContainer {
    */
   std::size_t GetResourcePosition(const gd::String &name) const;
 
+  /**
+   * \brief Return a reference to the resource at the specified position.
+   */
+  Resource &GetResourceAt(std::size_t index);
+
+  /**
+   * \brief Return a reference to the resource at the specified position.
+   */
+  const Resource &GetResourceAt(std::size_t index) const;
+
   /**
    * \brief Move a resource up in the list
    */

GDevelop.js/Bindings/Bindings.idl

@@ -1336,12 +1336,14 @@ interface ResourcesContainer {
     [Value] VectorString FindFilesNotInResources([Const, Ref] VectorString filesToCheck);
     boolean HasResource([Const] DOMString name);
     [Const, Ref] Resource GetResource([Const] DOMString name);
+    [Const, Ref] Resource GetResourceAt(unsigned long index);
     [Const, Ref] DOMString GetResourceNameWithOrigin([Const] DOMString originName, [Const] DOMString originIdentifier);
     [Const, Ref] DOMString GetResourceNameWithFile([Const] DOMString file);
     boolean AddResource([Const, Ref] Resource res);
     void RemoveResource([Const] DOMString name);
     void RenameResource([Const] DOMString oldName, [Const] DOMString name);
     unsigned long GetResourcePosition([Const] DOMString name);
+    unsigned long Count();
     boolean MoveResourceUpInList([Const] DOMString oldName);
     boolean MoveResourceDownInList([Const] DOMString oldName);
     void MoveResource(unsigned long oldIndex, unsigned long newIndex);

GDevelop.js/types.d.ts

@@ -1125,12 +1125,14 @@ export class ResourcesContainer extends EmscriptenObject {
   findFilesNotInResources(filesToCheck: VectorString): VectorString;
   hasResource(name: string): boolean;
   getResource(name: string): Resource;
+  getResourceAt(index: number): Resource;
   getResourceNameWithOrigin(originName: string, originIdentifier: string): string;
   getResourceNameWithFile(file: string): string;
   addResource(res: Resource): boolean;
   removeResource(name: string): void;
   renameResource(oldName: string, name: string): void;
   getResourcePosition(name: string): number;
+  count(): number;
   moveResourceUpInList(oldName: string): boolean;
   moveResourceDownInList(oldName: string): boolean;
   moveResource(oldIndex: number, newIndex: number): void;

GDevelop.js/types/gdresourcescontainer.js

@@ -10,12 +10,14 @@ declare class gdResourcesContainer {
   findFilesNotInResources(filesToCheck: gdVectorString): gdVectorString;
   hasResource(name: string): boolean;
   getResource(name: string): gdResource;
+  getResourceAt(index: number): gdResource;
   getResourceNameWithOrigin(originName: string, originIdentifier: string): string;
   getResourceNameWithFile(file: string): string;
   addResource(res: gdResource): boolean;
   removeResource(name: string): void;
   renameResource(oldName: string, name: string): void;
   getResourcePosition(name: string): number;
+  count(): number;
   moveResourceUpInList(oldName: string): boolean;
   moveResourceDownInList(oldName: string): boolean;
   moveResource(oldIndex: number, newIndex: number): void;

newIDE/app/src/ResourcesEditor/index.js

@@ -23,6 +23,7 @@ import {
   registerOnResourceExternallyChangedCallback,
   unregisterOnResourceExternallyChangedCallback,
 } from '../MainFrame/ResourcesWatcher';
+import { showWarningBox } from '../UI/Messages/MessageBox';
 
 const gd: libGDevelop = global.gd;
 
@@ -84,6 +85,7 @@ export default class ResourcesEditor extends React.Component<Props, State> {
       this.onResourceExternallyChanged.bind(this)
     );
   }
+
   componentWillUnmount() {
     unregisterOnResourceExternallyChangedCallback(
       this.resourceExternallyChangedCallbackId
@@ -126,24 +128,70 @@ export default class ResourcesEditor extends React.Component<Props, State> {
     );
     if (!answer) return;
 
+    const resourcesManager = project.getResourcesManager();
+    const currentIndex = resourcesManager.getResourcePosition(
+      resource.getName()
+    );
+
     onDeleteResource(resource, doRemove => {
       if (!doRemove || !resource) return;
 
-      project.getResourcesManager().removeResource(resource.getName());
+      resourcesManager.removeResource(resource.getName());
+
+      const newCount = resourcesManager.count();
+      const nextResourceToSelect =
+        newCount > 0
+          ? resourcesManager.getResourceAt(Math.min(currentIndex, newCount - 1))
+          : null;
+
       this.setState(
         {
-          selectedResource: null,
+          selectedResource: nextResourceToSelect,
         },
         () => {
-          // Force update of the resources list as otherwise it could render
-          // resource that was just deleted.
-          if (this._resourcesList) this._resourcesList.forceUpdateList();
+          const resourcesList = this._resourcesList;
+          if (resourcesList) {
+            resourcesList.forceUpdateList();
+            resourcesList.focusList();
+          }
+          const propertiesEditor = this._propertiesEditor;
+          if (propertiesEditor) propertiesEditor.forceUpdate();
           this.updateToolbar();
         }
       );
     });
   };
 
+  renameResource = (resource: gdResource, newName: string) => {
+    const { project, onRenameResource } = this.props;
+
+    // Nothing to do if the name is not changed or empty.
+    if (resource.getName() === newName || newName.length === 0) return;
+
+    // Check for duplicate names.
+    const resourcesManager = project.getResourcesManager();
+    if (resourcesManager.hasResource(newName)) {
+      showWarningBox('Another resource with this name already exists', {
+        delayToNextTick: true,
+      });
+      return;
+    }
+
+    onRenameResource(resource, newName, doRename => {
+      if (!doRename) return;
+
+      resource.setName(newName);
+
+      const resourcesList = this._resourcesList;
+      if (resourcesList) {
+        resourcesList.forceUpdateList();
+        resourcesList.focusList();
+      }
+      const propertiesEditor = this._propertiesEditor;
+      if (propertiesEditor) propertiesEditor.forceUpdate();
+    });
+  };
+
   _removeUnusedResources = (resourceKind: ResourceKind) => {
     const { project } = this.props;
     const selectedResourceName = this.state.selectedResource
@@ -238,12 +286,7 @@ export default class ResourcesEditor extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      project,
-      onRenameResource,
-      resourceManagementProps,
-      fileMetadata,
-    } = this.props;
+    const { project, resourceManagementProps, fileMetadata } = this.props;
     const { selectedResource } = this.state;
     const resourcesActionsMenuBuilder = resourceManagementProps.getStorageProviderResourceOperations();
 
@@ -277,7 +320,7 @@ export default class ResourcesEditor extends React.Component<Props, State> {
             project={project}
             fileMetadata={fileMetadata}
             onDeleteResource={this.deleteResource}
-            onRenameResource={onRenameResource}
+            onRenameResource={this.renameResource}
             onSelectResource={this._onResourceSelected}
             selectedResource={selectedResource}
             ref={resourcesList => (this._resourcesList = resourcesList)}

newIDE/app/src/ResourcesList/ResourcePreview/ImagePreview.js

@@ -485,12 +485,11 @@ const ImagePreview = ({
   const containerLoaded = !!containerWidth && !!containerHeight;
   const imageLoaded = !!imageWidth && !!imageHeight && !errored;
 
-  // We display the elements only when the image is loaded and
-  // the zoom is applied to avoid a shift in the image.
+  // We display the elements only when both the container and image are loaded
+  // to avoid a shift in the image.
   // We use "visibility": "hidden" instead of "display": "none"
   // so that the image takes the space of the container whilst being hidden.
-  // TODO: handle a proper loader.
-  const visibility = containerLoaded ? undefined : 'hidden';
+  const visibility = containerLoaded && imageLoaded ? undefined : 'hidden';
 
   const forcedCursor = shouldMoveView ? 'grab' : null;
   const forcedCursorStyle = forcedCursor