Add warning limit for import on sprites

GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts

@@ -460,7 +460,7 @@ namespace gdjs {
       };
       // @ts-ignore
       renderer.view.onwheel = function (event) {
-        manager.onMouseWheel(event.deltaY);
+        manager.onMouseWheel(-event.deltaY);
       };
 
       //Touches

newIDE/app/src/InstancesEditor/index.js

@@ -158,7 +158,7 @@ export default class InstancesEditor extends Component<Props> {
 
     this.pixiRenderer.view.onwheel = event => {
       if (this.keyboardShortcuts.shouldZoom()) {
-        this.zoomBy(event.deltaY / 5000);
+        this.zoomBy(-event.deltaY / 5000);
       } else if (this.keyboardShortcuts.shouldScrollHorizontally()) {
         this.viewPosition.scrollBy(-event.deltaY / 10, 0);
       } else {

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

@@ -28,7 +28,9 @@ export class ResourcesEditorContainer extends React.Component<RenderEditorContai
   }
 
   forceUpdateEditor() {
-    // No updates to be done.
+    console.log('forceUpdateEditor resource editor container');
+    const { resources } = this.props;
+    if (this.editor && resources) this.editor.updateResources(resources);
   }
 
   render() {

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

@@ -48,7 +48,9 @@ export class SceneEditorContainer extends React.Component<RenderEditorContainerP
   }
 
   forceUpdateEditor() {
-    if (this.editor) this.editor.forceUpdateObjectsList();
+    console.log('forceUpdateEditor scene editor container');
+    const { resources } = this.props;
+    if (this.editor && resources) this.editor.updateResources(resources);
   }
 
   getLayout(): ?gdLayout {
@@ -93,6 +95,7 @@ export class SceneEditorContainer extends React.Component<RenderEditorContainerP
         ref={editor => (this.editor = editor)}
         project={project}
         layout={layout}
+        resources={this.props.resources}
         initialInstances={layout.getInitialInstances()}
         initialUiSettings={serializeToJSObject(layout.getAssociatedSettings())}
         isActive={isActive}

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

@@ -173,6 +173,7 @@ export type PreferencesValues = {|
   autosaveOnPreview: boolean,
   useNewInstructionEditorDialog: boolean,
   useGDJSDevelopmentWatcher: boolean,
+  useResourcesWatcher: boolean,
   eventsSheetUseAssignmentOperators: boolean,
   showEffectParameterNames: boolean,
   projectLastUsedPaths: { [string]: { [ResourceKind]: string } },
@@ -203,6 +204,7 @@ export type Preferences = {|
   setAutosaveOnPreview: (enabled: boolean) => void,
   setUseNewInstructionEditorDialog: (enabled: boolean) => void,
   setUseGDJSDevelopmentWatcher: (enabled: boolean) => void,
+  setUseResourcesWatcher: (enabled: boolean) => void,
   setEventsSheetUseAssignmentOperators: (enabled: boolean) => void,
   setShowEffectParameterNames: (enabled: boolean) => void,
   getLastUsedPath: (project: gdProject, kind: ResourceKind) => string,
@@ -253,6 +255,7 @@ export const initialPreferences = {
     autosaveOnPreview: true,
     useNewInstructionEditorDialog: true,
     useGDJSDevelopmentWatcher: true,
+    useResourcesWatcher: true,
     eventsSheetUseAssignmentOperators: false,
     showEffectParameterNames: false,
     projectLastUsedPaths: {},
@@ -277,6 +280,7 @@ export const initialPreferences = {
   setAutosaveOnPreview: () => {},
   setUseNewInstructionEditorDialog: (enabled: boolean) => {},
   setUseGDJSDevelopmentWatcher: (enabled: boolean) => {},
+  setUseResourcesWatcher: (enabled: boolean) => {},
   setEventsSheetUseAssignmentOperators: (enabled: boolean) => {},
   setShowEffectParameterNames: (enabled: boolean) => {},
   getLastUsedPath: (project: gdProject, kind: ResourceKind) => '',

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

@@ -39,6 +39,7 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
     setAutosaveOnPreview,
     setUseNewInstructionEditorDialog,
     setUseGDJSDevelopmentWatcher,
+    setUseResourcesWatcher,
     setEventsSheetUseAssignmentOperators,
     getDefaultEditorMosaicNode,
     setDefaultEditorMosaicNode,
@@ -256,19 +257,34 @@ const PreferencesDialog = ({ i18n, onClose }: Props) => {
             />
           </Line>
           {Window.isDev() && (
-            <Line>
-              <Toggle
-                onToggle={(e, check) => setUseGDJSDevelopmentWatcher(check)}
-                toggled={values.useGDJSDevelopmentWatcher}
-                labelPosition="right"
-                label={
-                  <Trans>
-                    Watch changes in game engine (GDJS) sources and auto import
-                    them (dev only)
-                  </Trans>
-                }
-              />
-            </Line>
+            <div>
+              <Line>
+                <Toggle
+                  onToggle={(e, check) => setUseGDJSDevelopmentWatcher(check)}
+                  toggled={values.useGDJSDevelopmentWatcher}
+                  labelPosition="right"
+                  label={
+                    <Trans>
+                      Watch changes in game engine (GDJS) sources and auto
+                      import them (dev only)
+                    </Trans>
+                  }
+                />
+              </Line>
+              <Line>
+                <Toggle
+                  onToggle={(e, check) => setUseResourcesWatcher(check)}
+                  toggled={values.useResourcesWatcher}
+                  labelPosition="right"
+                  label={
+                    <Trans>
+                      Watch changes in resources and check the possible warning
+                      on them (dev only because WIP)
+                    </Trans>
+                  }
+                />
+              </Line>
+            </div>
           )}
         </Column>
       )}

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

@@ -50,6 +50,7 @@ export default class PreferencesProvider extends React.Component<Props, State> {
       this
     ),
     setUseGDJSDevelopmentWatcher: this._setUseGDJSDevelopmentWatcher.bind(this),
+    setUseResourcesWatcher: this._setUseResourcesWatcher.bind(this),
     setEventsSheetUseAssignmentOperators: this._setEventsSheetUseAssignmentOperators.bind(
       this
     ),
@@ -141,6 +142,18 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
+  _setUseResourcesWatcher(useResourcesWatcher: boolean) {
+    this.setState(
+      state => ({
+        values: {
+          ...state.values,
+          useResourcesWatcher,
+        },
+      }),
+      () => this._persistValuesToLocalStorage(this.state)
+    );
+  }
+
   _setEventsSheetUseAssignmentOperators(
     eventsSheetUseAssignmentOperators: boolean
   ) {

newIDE/app/src/MainFrame/index.js

@@ -114,9 +114,11 @@ import {
 import { type HotReloadPreviewButtonProps } from '../HotReload/HotReloadPreviewButton';
 import HotReloadLogsDialog from '../HotReload/HotReloadLogsDialog';
 import { useDiscordRichPresence } from '../Utils/UpdateDiscordRichPresence';
+import { ResourcesWatcher } from '../ResourcesLoader/ResourcesWatcher.js';
 import { useResourceFetcher } from '../ProjectsStorage/ResourceFetcher';
 import { delay } from '../Utils/Delay';
 import { type ExtensionShortHeader } from '../Utils/GDevelopServices/Extension';
+import PixiResourcesLoader from '../ObjectsRendering/PixiResourcesLoader';
 
 const GD_STARTUP_TIMES = global.GD_STARTUP_TIMES || [];
 
@@ -2110,6 +2112,7 @@ const MainFrame = (props: Props) => {
                   isActive: isCurrentTab,
                   extraEditorProps: editorTab.extraEditorProps,
                   project: currentProject,
+                  resources: state.resources,
                   ref: editorRef => (editorTab.editorRef = editorRef),
                   setToolbar: setEditorToolbar,
                   onChangeSubscription: () => openSubscriptionDialog(true),
@@ -2347,6 +2350,27 @@ const MainFrame = (props: Props) => {
       {state.gdjsDevelopmentWatcherEnabled &&
         renderGDJSDevelopmentWatcher &&
         renderGDJSDevelopmentWatcher()}
+
+      {state.currentProject && (
+        <ResourcesWatcher
+          project={state.currentProject}
+          updateResource={resources => {
+            setState(state => ({
+              ...state,
+              resources: resources,
+            }));
+
+            const editorTab = getCurrentTab(state.editorTabs);
+            if (editorTab && editorTab.editorRef) {
+              PixiResourcesLoader.deleteResourcesCache(
+                state.currentProject,
+                resources
+              );
+              editorTab.editorRef.forceUpdateEditor();
+            }
+          }}
+        />
+      )}
       {!!hotReloadLogs.length && (
         <HotReloadLogsDialog
           logs={hotReloadLogs}

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/SpritesList.js

@@ -67,12 +67,21 @@ const AddSpriteButton = SortableElement(({ displayHint, onAdd }) => {
 });
 
 const SortableSpriteThumbnail = SortableElement(
-  ({ sprite, project, resourcesLoader, selected, onSelect, onContextMenu }) => {
+  ({
+    sprite,
+    project,
+    resourcesLoader,
+    selected,
+    onDelete,
+    onSelect,
+    onContextMenu,
+  }) => {
     return (
       <ImageThumbnail
         selectable
         selected={selected}
         onSelect={onSelect}
+        deleteSprite={onDelete}
         onContextMenu={onContextMenu}
         resourceName={sprite.getImageName()}
         resourcesLoader={resourcesLoader}
@@ -89,6 +98,7 @@ const SortableList = SortableContainer(
     project,
     resourcesLoader,
     onAddSprite,
+    onDeleteSprite,
     selectedSprites,
     onSelectSprite,
     onSpriteContextMenu,
@@ -107,6 +117,7 @@ const SortableList = SortableContainer(
                 selected={!!selectedSprites[sprite.ptr]}
                 onContextMenu={(x, y) => onSpriteContextMenu(x, y, sprite)}
                 onSelect={selected => onSelectSprite(sprite, selected)}
+                onDelete={selected => onDeleteSprite(i)}
                 resourcesLoader={resourcesLoader}
                 project={project}
               />
@@ -178,6 +189,12 @@ export default class SpritesList extends Component<Props, void> {
     this.forceUpdate();
   };
 
+  onDeleteSprite = (spriteIndex: number) => {
+    const { direction } = this.props;
+
+    direction.removeSprite(spriteIndex);
+  };
+
   onAddSprite = () => {
     const {
       resourceSources,
@@ -327,6 +344,7 @@ export default class SpritesList extends Component<Props, void> {
           project={this.props.project}
           onSortEnd={this.onSortEnd}
           onAddSprite={this.onAddSprite}
+          onDeleteSprite={this.onDeleteSprite}
           selectedSprites={this.props.selectedSprites}
           onSelectSprite={this.props.onSelectSprite}
           onSpriteContextMenu={this.props.onSpriteContextMenu}

newIDE/app/src/ObjectsRendering/PixiResourcesLoader.js

@@ -25,6 +25,9 @@ export default class PixiResourcesLoader {
       texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
     }
   }
+  static deleteResourcesCache(project: gdProject, resources: Array<string>) {
+    ResourcesLoader.burstUrlsCacheForResources(project, resources);
+  }
 
   /**
    * (Re)load the PIXI texture represented by the given resources.
@@ -69,17 +72,28 @@ export default class PixiResourcesLoader {
 
     loader.load((loader, loadedResources) => {
       loader.onProgress.detach(progressCallbackId);
-
       //Store the loaded textures so that they are ready to use.
       for (const resourceName in loadedResources) {
         if (loadedResources.hasOwnProperty(resourceName)) {
           const resource = resourcesManager.getResource(resourceName);
           if (resource.getKind() !== 'image') continue;
-
-          loadedTextures[resourceName] = loadedResources[resourceName].texture;
+          let statusCode = '';
+          if (
+            loadedResources[resourceName].texture.baseTexture.realWidth >
+              2048 ||
+            loadedResources[resourceName].texture.baseTexture.realHeight > 2048
+          ) {
+            statusCode = 'WARNING_IMAGE_EXCEEDED_2048_PIXELS';
+            console.log('TROP GRAND 2');
+          }
+          loadedTextures[resourceName] = {
+            pixi: loadedResources[resourceName].texture,
+            statusCode: statusCode,
+          };
+          ResourcesLoader.setStatusCode(project, resourceName, statusCode);
           PixiResourcesLoader._initializeTexture(
             resource,
-            loadedTextures[resourceName]
+            loadedTextures[resourceName].pixi
           );
         }
       }
@@ -97,7 +111,7 @@ export default class PixiResourcesLoader {
    */
   static getPIXITexture(project: gdProject, resourceName: string) {
     if (loadedTextures[resourceName]) {
-      return loadedTextures[resourceName];
+      return loadedTextures[resourceName].pixi;
     }
 
     if (!project.getResourcesManager().hasResource(resourceName))
@@ -114,7 +128,7 @@ export default class PixiResourcesLoader {
 
     PixiResourcesLoader._initializeTexture(
       resource,
-      loadedTextures[resourceName]
+      loadedTextures[resourceName].pixi
     );
     return loadedTextures[resourceName];
   }
@@ -128,15 +142,14 @@ export default class PixiResourcesLoader {
    */
   static getPIXIVideoTexture(project: gdProject, resourceName: string) {
     if (loadedTextures[resourceName]) {
-      return loadedTextures[resourceName];
+      return loadedTextures[resourceName].pixi;
     }
 
     if (!project.getResourcesManager().hasResource(resourceName))
       return invalidTexture;
 
     const resource = project.getResourcesManager().getResource(resourceName);
     if (resource.getKind() !== 'video') return invalidTexture;
-
     loadedTextures[resourceName] = PIXI.Texture.from(
       ResourcesLoader.getResourceFullUrl(project, resourceName, {
         disableCacheBurst: true, // Disable cache bursting for video because it prevent the video to be recognized as such (for a local file)
@@ -149,7 +162,6 @@ export default class PixiResourcesLoader {
         },
       }
     );
-
     return loadedTextures[resourceName];
   }
 
@@ -222,6 +234,21 @@ export default class PixiResourcesLoader {
     return invalidTexture;
   }
 
+  static setResourceStatusCode(project: gdProject, resourceName: string) {
+    let statusCode = '';
+    if (
+      loadedTextures[resourceName].pixi.texture.baseTexture.realWidth > 2048 ||
+      loadedTextures[resourceName].pixi.texture.baseTexture.realHeight > 2048
+    ) {
+      statusCode = 'WARNING_IMAGE_EXCEEDED_2048_PIXELS';
+    }
+    return (loadedTextures[resourceName].statusCode = statusCode);
+  }
+
+  static getResourceStatusCode(project: gdProject, resourceName: string) {
+    if (!loadedTextures[resourceName].statusCode) return;
+    return loadedTextures[resourceName].statusCode;
+  }
   /**
    * Get the the data from a json resource in the IDE.
    */