From db7ba76727325b62d55ccd32c032dbe10fd42f18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Pasteau?= <4895034+ClementPasteau@users.noreply.github.com> Date: Fri, 15 Dec 2023 18:34:38 +0100 Subject: [PATCH] Wip prevent highlight if outside of canvas --- .../InstancesEditor/HighlightedInstance.js | 1 + .../InstancesRenderer/LayerRenderer.js | 34 +++++++++++++++++-- newIDE/app/src/InstancesEditor/index.js | 1 + .../app/src/UI/DragAndDrop/CustomDragLayer.js | 21 +++++++----- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/newIDE/app/src/InstancesEditor/HighlightedInstance.js b/newIDE/app/src/InstancesEditor/HighlightedInstance.js index 43d1714380b8..16560d273826 100644 --- a/newIDE/app/src/InstancesEditor/HighlightedInstance.js +++ b/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; diff --git a/newIDE/app/src/InstancesEditor/InstancesRenderer/LayerRenderer.js b/newIDE/app/src/InstancesEditor/InstancesRenderer/LayerRenderer.js index e2b3ccfbd07a..59e4976e99a9 100644 --- a/newIDE/app/src/InstancesEditor/InstancesRenderer/LayerRenderer.js +++ b/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(); }); } diff --git a/newIDE/app/src/InstancesEditor/index.js b/newIDE/app/src/InstancesEditor/index.js index 1eaa7f0f47f5..f9bb68057ddc 100644 --- a/newIDE/app/src/InstancesEditor/index.js +++ b/newIDE/app/src/InstancesEditor/index.js @@ -767,6 +767,7 @@ export default class InstancesEditor extends Component { }; _onOverInstance = (instance: gdInitialInstance) => { + console.log('_onOverInstance'); if (!this.instancesMover.isMoving()) this.highlightedInstance.setInstance(instance); }; diff --git a/newIDE/app/src/UI/DragAndDrop/CustomDragLayer.js b/newIDE/app/src/UI/DragAndDrop/CustomDragLayer.js index 42441b34f9a9..aa4bdd4651d9 100644 --- a/newIDE/app/src/UI/DragAndDrop/CustomDragLayer.js +++ b/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; }