Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wip prevent highlight if outside of canvas #6092

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Wip prevent highlight if outside of canvas #6092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions newIDE/app/src/InstancesEditor/HighlightedInstance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default class HighlightedInstance {
}

setInstance(instance: gdInitialInstance | null) {
console.log('setting instance', instance);
this.isHighlightedInstanceOf3DObject = instance
? this.isInstanceOf3DObject(instance)
: false;
Expand Down
34 changes: 32 additions & 2 deletions newIDE/app/src/InstancesEditor/InstancesRenderer/LayerRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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() ||
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's reasonable to check on each frame if there's dialog open (DOM query). I think it should at least be cached for the current frame.

!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(
Expand All @@ -405,6 +429,7 @@ export default class LayerRenderer {
renderedInstance._pixiObject.addEventListener(
'rightclick',
interactionEvent => {
console.log('rightclick');
const {
data: { global: viewPoint, originalEvent: event },
} = interactionEvent;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -455,6 +484,7 @@ export default class LayerRenderer {
}
);
renderedInstance._pixiObject.addEventListener('panend', event => {
console.log('panend');
this.onMoveInstanceEnd();
});
}
Expand Down
1 change: 1 addition & 0 deletions newIDE/app/src/InstancesEditor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
21 changes: 12 additions & 9 deletions newIDE/app/src/UI/DragAndDrop/CustomDragLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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}`
);
Expand All @@ -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;
};

Expand All @@ -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;
}

Expand Down