Display a placeholder for instances with unknown object in the editor (#7933)

Author: D8H

newIDE/app/src/InstancesEditor/InstancesRenderer/LayerRenderer.js

@@ -412,18 +412,26 @@ export default class LayerRenderer {
         this.objectsContainer,
         associatedObjectName
       );
-      if (!associatedObject) return null;
-
       //...so let's create a renderer.
-      renderedInstance = this.renderedInstances[
-        instance.ptr
-      ] = ObjectsRenderingService.createNewInstanceRenderer(
-        this.project,
-        instance,
-        associatedObject.getConfiguration(),
-        this.pixiContainer,
-        this._threeGroup
-      );
+      if (associatedObject) {
+        renderedInstance = this.renderedInstances[
+          instance.ptr
+        ] = ObjectsRenderingService.createNewInstanceRenderer(
+          this.project,
+          instance,
+          associatedObject.getConfiguration(),
+          this.pixiContainer,
+          this._threeGroup
+        );
+      } else {
+        renderedInstance = this.renderedInstances[
+          instance.ptr
+        ] = ObjectsRenderingService.createNewUnknownInstanceRenderer(
+          this.project,
+          instance,
+          this.pixiContainer
+        );
+      }
 
       renderedInstance._pixiObject.eventMode = 'static';
       panable(renderedInstance._pixiObject);

newIDE/app/src/ObjectsRendering/ObjectsRenderingService.js

@@ -78,6 +78,19 @@ const ObjectsRenderingService = {
       );
     }
   },
+  createNewUnknownInstanceRenderer: function(
+    project: gdProject,
+    instance: gdInitialInstance,
+    pixiContainer: PIXI.Container
+  ): RenderedInstance | Rendered3DInstance {
+    return new this.renderers['unknownObjectType'](
+      project,
+      instance,
+      null,
+      pixiContainer,
+      PixiResourcesLoader
+    );
+  },
   createNewInstanceRenderer: function(
     project: gdProject,
     instance: gdInitialInstance,

newIDE/app/src/ObjectsRendering/Renderers/RenderedUnknownInstance.js

@@ -11,20 +11,23 @@ export default class RenderedUnknownInstance extends RenderedInstance {
   constructor(
     project: gdProject,
     instance: gdInitialInstance,
-    associatedObjectConfiguration: gdObjectConfiguration,
+    associatedObjectConfiguration: gdObjectConfiguration | null,
     pixiContainer: PIXI.Container,
     pixiResourcesLoader: Class<PixiResourcesLoader>
   ) {
     super(
       project,
       instance,
+      //$FlowFixMe It's ok because RenderedUnknownInstance don't use it.
       associatedObjectConfiguration,
       pixiContainer,
       pixiResourcesLoader
     );
 
     //This renderer show a placeholder for the object:
-    this._pixiObject = new PIXI.Graphics();
+    this._pixiObject = new PIXI.Sprite(
+      this._pixiResourcesLoader.getInvalidPIXITexture()
+    );
     this._pixiContainer.addChild(this._pixiObject);
   }
 
@@ -42,21 +45,34 @@ export default class RenderedUnknownInstance extends RenderedInstance {
   }
 
   update() {
-    const width = this.getWidth();
-    const height = this.getHeight();
-
-    this._pixiObject.clear();
-    this._pixiObject.beginFill(0x0033ff);
-    this._pixiObject.lineStyle(1, 0xffd900, 1);
-    this._pixiObject.moveTo(-width / 2, -height / 2);
-    this._pixiObject.lineTo(width / 2, -height / 2);
-    this._pixiObject.lineTo(width / 2, height / 2);
-    this._pixiObject.lineTo(-width / 2, height / 2);
-    this._pixiObject.lineTo(-width / 2, -height / 2);
-    this._pixiObject.endFill();
-
-    this._pixiObject.position.x = this._instance.getX() + width / 2;
-    this._pixiObject.position.y = this._instance.getY() + height / 2;
-    this._pixiObject.angle = this._instance.getAngle();
+    // Avoid to use _pixiObject after destroy is called.
+    // It can happen when onRemovedFromScene and update cross each other.
+    if (!this._pixiObject) {
+      return;
+    }
+    const objectTextureFrame = this._pixiObject.texture.frame;
+    // In case the texture is not loaded yet, we don't want to crash.
+    if (!objectTextureFrame) return;
+
+    this._pixiObject.anchor.x = 0.5;
+    this._pixiObject.anchor.y = 0.5;
+    this._pixiObject.rotation = RenderedInstance.toRad(
+      this._instance.getAngle()
+    );
+    this._pixiObject.scale.x = this.getWidth() / objectTextureFrame.width;
+    this._pixiObject.scale.y = this.getHeight() / objectTextureFrame.height;
+    this._pixiObject.position.x = this._instance.getX() + this.getCenterX();
+    this._pixiObject.position.y = this._instance.getY() + this.getCenterY();
+
+    // Do not hide completely an object so it can still be manipulated
+    const alphaForDisplay = Math.max(this._instance.getOpacity() / 255, 0.5);
+    this._pixiObject.alpha = alphaForDisplay;
+
+    this._pixiObject.scale.x =
+      Math.abs(this._pixiObject.scale.x) *
+      (this._instance.isFlippedX() ? -1 : 1);
+    this._pixiObject.scale.y =
+      Math.abs(this._pixiObject.scale.y) *
+      (this._instance.isFlippedY() ? -1 : 1);
   }
 }