Issue with Mouse.insideBounds & rotated geometry #45
Description
I'm having trouble with Mouse.insideBounds when a light rotation is applied to the geometry.
I've tried to simplify the code as much as possible, below is an array of cards (set pixelZoom to 1 if your screen is too small) representing the hand of a player.
The cards change background to green when hovered over. The cards on the bottom right seem to work fine mostly, but the cards on the left not. You need to hover above them, at least their bottom half doesn't work.
If the rotation is removed (see comment in code), no issue at all.
import {
useType,
useNewComponent,
useChild,
Canvas,
Vector,
Geometry,
Polygon,
Mouse,
useDraw,
} from "@hex-engine/2d";
export default function Root() {
useType(Root);
const canvas = useNewComponent(() => Canvas({ backgroundColor: "#444" }));
canvas.fullscreen({ pixelZoom: 2 });
const canvasCenter = new Vector(
canvas.element.width / 2,
canvas.element.height / 2
);
for (let i = 9; i >= 0; i--) {
useChild(() => Card(
new Vector(0, -800).rotateMutate(-(i-4.5) * 0.04).addMutate(canvasCenter).addYMutate(950),
(i - 4.5) * 0.03) // Set this to 0 and the problem disappears
);
}
}
function Card(position: Vector, rotation: number) {
useType(Card);
const geo = useNewComponent(() => Geometry({
shape: Polygon.rectangle(new Vector(40, 60)),
position: position.clone(),
rotation
}));
const mouse = useNewComponent(Mouse);
useDraw((context) => {
context.fillStyle = "#6666ff";
if (mouse.isInsideBounds) {
context.fillStyle = "green";
}
context.strokeStyle = "red";
geo.shape.draw(context, "fill");
geo.shape.draw(context, "stroke");
});
}I'm a bit baffled, because the cards on the middle have a very low rotation of 0.015 and the problem still happens.