mirror of
https://github.com/trafficlunar/blockmatic.git
synced 2026-06-28 14:44:12 +00:00
feat: add cursor onto tiles
This commit is contained in:
parent
98b901ca75
commit
e1b3f3a091
2 changed files with 39 additions and 7 deletions
22
src/components/cursor.tsx
Normal file
22
src/components/cursor.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { Rect } from "react-konva";
|
||||
|
||||
function Cursor({ mousePosition }: { mousePosition: Position }) {
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
if (mousePosition) {
|
||||
const snappedX = Math.floor(mousePosition.x / 16) * 16;
|
||||
const snappedY = Math.floor(mousePosition.y / 16) * 16;
|
||||
|
||||
setPosition({
|
||||
x: snappedX,
|
||||
y: snappedY,
|
||||
});
|
||||
}
|
||||
}, [mousePosition]);
|
||||
|
||||
return <Rect x={position.x} y={position.y} width={16} height={16} stroke={"white"} strokeWidth={0.5} dash={[2.5]} />;
|
||||
}
|
||||
|
||||
export default Cursor;
|
||||
Loading…
Add table
Add a link
Reference in a new issue