Wip prevent highlight if outside of canvas

newIDE/app/src/InstancesEditor/HighlightedInstance.js

@@ -43,6 +43,7 @@ export default class HighlightedInstance {
   }
 
   setInstance(instance: gdInitialInstance | null) {
+    console.log('setting instance', instance);
     this.isHighlightedInstanceOf3DObject = instance
       ? this.isInstanceOf3DObject(instance)
       : false;

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

@@ -12,6 +12,8 @@ import { makeDoubleClickable } from './PixiDoubleClickEvent';
 import Rectangle from '../../Utils/Rectangle'; // TODO (3D): add support for zMin/zMax/depth.
 import { rotatePolygon, type Polygon } from '../../Utils/PolygonHelper';
 import Rendered3DInstance from '../../ObjectsRendering/Renderers/Rendered3DInstance';
+import { shouldPreventRenderingInstanceEditors } from '../../UI/MaterialUISpecificUtil';
+import { isMouseOnSceneEditorCanvas } from '../../UI/DragAndDrop/CustomDragLayer';
 const gd: libGDevelop = global.gd;
 
 export default class LayerRenderer {
@@ -379,19 +381,41 @@ export default class LayerRenderer {
       renderedInstance._pixiObject.eventMode = 'static';
       panable(renderedInstance._pixiObject);
       makeDoubleClickable(renderedInstance._pixiObject);
+      renderedInstance._pixiObject.addEventListener('mousemove', event => {
+        console.log('mousemove');
+        if (
+          shouldPreventRenderingInstanceEditors() ||
+          !isMouseOnSceneEditorCanvas({ x: event.clientX, y: event.clientY })
+        ) {
+          this.onOutInstance(instance);
+          return;
+        }
+      });
       renderedInstance._pixiObject.addEventListener('click', event => {
+        console.log('click');
         if (event.data.originalEvent.button === 0)
           this.onInstanceClicked(instance);
       });
       renderedInstance._pixiObject.addEventListener('doubleclick', () => {
+        console.log('double click');
         this.onInstanceDoubleClicked(instance);
       });
-      renderedInstance._pixiObject.addEventListener('mouseover', () => {
+      renderedInstance._pixiObject.addEventListener('mouseover', event => {
+        console.log('mouseover', event);
+        if (
+          shouldPreventRenderingInstanceEditors() ||
+          !isMouseOnSceneEditorCanvas({ x: event.clientX, y: event.clientY })
+        ) {
+          return;
+        }
+
+        console.log('onoverinstance');
         this.onOverInstance(instance);
       });
       renderedInstance._pixiObject.addEventListener(
         'mousedown',
         (event: PIXI.InteractionEvent) => {
+          console.log('mousedown');
           if (event.data.originalEvent.button === 0) {
             const viewPoint = event.data.global;
             const scenePoint = this.viewPosition.toSceneCoordinates(
@@ -405,6 +429,7 @@ export default class LayerRenderer {
       renderedInstance._pixiObject.addEventListener(
         'rightclick',
         interactionEvent => {
+          console.log('rightclick');
           const {
             data: { global: viewPoint, originalEvent: event },
           } = interactionEvent;
@@ -430,6 +455,7 @@ export default class LayerRenderer {
         }
       );
       renderedInstance._pixiObject.addEventListener('touchstart', event => {
+        console.log('touchstart');
         if (shouldBeHandledByPinch(event.data && event.data.originalEvent)) {
           return null;
         }
@@ -441,12 +467,15 @@ export default class LayerRenderer {
         );
         this.onDownInstance(instance, scenePoint[0], scenePoint[1]);
       });
-      renderedInstance._pixiObject.addEventListener('mouseout', () => {
+      renderedInstance._pixiObject.addEventListener('mouseout', event => {
+        console.log('mouseout');
+        console.log('onoutinstance');
         this.onOutInstance(instance);
       });
       renderedInstance._pixiObject.addEventListener(
         'panmove',
         (event: PanMoveEvent) => {
+          console.log('panmove');
           if (shouldBeHandledByPinch(event.data && event.data.originalEvent)) {
             return null;
           }
@@ -455,6 +484,7 @@ export default class LayerRenderer {
         }
       );
       renderedInstance._pixiObject.addEventListener('panend', event => {
+        console.log('panend');
         this.onMoveInstanceEnd();
       });
     }

newIDE/app/src/InstancesEditor/index.js

@@ -767,6 +767,7 @@ export default class InstancesEditor extends Component<Props> {
   };
 
   _onOverInstance = (instance: gdInitialInstance) => {
+    console.log('_onOverInstance');
     if (!this.instancesMover.isMoving())
       this.highlightedInstance.setInstance(instance);
   };

newIDE/app/src/UI/DragAndDrop/CustomDragLayer.js

@@ -72,15 +72,12 @@ type InternalCustomDragLayerProps = {|
   isDragging?: boolean,
 |};
 
-const shouldHidePreviewBecauseDraggingOnSceneEditorCanvas = ({
-  x,
-  y,
-}: XYCoord) => {
+export const isMouseOnSceneEditorCanvas = ({ x, y }: XYCoord) => {
   const swipeableDrawerContainer = document.querySelector(
     `#${swipeableDrawerContainerId}`
   );
-  // If the swipeable drawer exists, we are on mobile, and we want to show the preview
-  // only when the user is dragging in the drawer, otherwise they are on the canvas.
+  // If the swipeable drawer exists, we are on mobile, and we consider that if we are not on
+  // the drawer, we are on the canvas.
   // (the drawer is on top of the canvas)
   if (swipeableDrawerContainer) {
     const drawerRect = swipeableDrawerContainer.getBoundingClientRect();
@@ -90,13 +87,14 @@ const shouldHidePreviewBecauseDraggingOnSceneEditorCanvas = ({
       y >= drawerRect.top &&
       y <= drawerRect.bottom
     ) {
+      // Inside the drawer, not on the canvas.
       return false;
     }
+    // Outside the drawer, on the canvas.
     return true;
   }
 
-  // Otherwise, we are on desktop, and we want to hide the preview when the user
-  // is dragging on the canvas.
+  // Otherwise, we are on desktop, so we can check if we are on the canvas.
   const activeCanvas = document.querySelector(
     `#scene-editor[data-active=true] #${instancesEditorId}`
   );
@@ -108,9 +106,12 @@ const shouldHidePreviewBecauseDraggingOnSceneEditorCanvas = ({
       y >= canvasRect.top &&
       y <= canvasRect.bottom
     ) {
+      // Inside the canvas.
       return true;
     }
   }
+
+  // Otherwise, we are not on the canvas.
   return false;
 };
 
@@ -127,7 +128,9 @@ const CustomDragLayer = ({
     () => {
       if (!item || !clientOffset) return null;
 
-      if (shouldHidePreviewBecauseDraggingOnSceneEditorCanvas(clientOffset)) {
+      // We don't want to show the preview if the mouse is on the scene editor canvas,
+      // as we already have the instance dragged.
+      if (isMouseOnSceneEditorCanvas(clientOffset)) {
         return null;
       }