chore: add tile hovering

.github/workflows/Build.yaml

@@ -25,15 +25,6 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-
-      - name: Restore node modules cache
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
         run: yarn install

.github/workflows/Publish.yaml

@@ -20,16 +20,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Restore node modules cache
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install Dependencies
         run: yarn install

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-super-tilemap",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": false,
   "description": "React implementation of a low-level 2D tilemap board optimized for high-performance rendering in web browsers",
   "author": "Carlos Cuadra",

src/components/Camera/ManualCamera/ManualCamera.useHandlers.ts

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { Position } from '../../../types/Position';
 import { floorTilePosition, getTilePosition, isTilePositionValid } from '../../../utils/positions';
 import { useTilemapContext } from '../../Tilemap/TilemapContext/useTilemapContext';
@@ -16,6 +17,8 @@ export function useHandlers(): Partial<EventHandlers> {
   const { cameraPosition, canvasSize } = state;
   const { tileSize, mapDimensions } = computed;
 
+  const lastHoveredTileRef = useRef<Position | null>(null);
+
   const getTilePositionByMousePosition = (mousePosition: Position) => {
     if (cameraPosition && canvasSize) {
       const position = getTilePosition(mousePosition, cameraPosition, tileSize, canvasSize);
@@ -24,6 +27,32 @@ export function useHandlers(): Partial<EventHandlers> {
     return null;
   };
 
+  const handleMouseMove = (position: Position) => {
+    const tilePosition = getTilePositionByMousePosition(position);
+    if (!tilePosition) return;
+
+    const result = floorTilePosition(tilePosition);
+    const last = lastHoveredTileRef.current;
+
+    const isValid = isTilePositionValid(result, mapDimensions);
+
+    if (!isValid) {
+      if (last !== null) {
+        contextProps.onTileHoverOut?.(last);
+        lastHoveredTileRef.current = null;
+      }
+      return;
+    }
+
+    if (!last || last.x !== result.x || last.y !== result.y) {
+      if (last) {
+        contextProps.onTileHoverOut?.(last);
+      }
+      contextProps.onTileHover?.(result);
+      lastHoveredTileRef.current = result;
+    }
+  };
+
   const handleClick = (position: Position) => {
     const tilePosition = getTilePositionByMousePosition(position);
     if (tilePosition) {
@@ -65,5 +94,6 @@ export function useHandlers(): Partial<EventHandlers> {
     handleClick,
     handleDoubleClick,
     handleContextMenu,
+    handleMouseMove,
   };
 }