diff --git a/.github/workflows/Build.yaml b/.github/workflows/Build.yaml index 5360dd2..df29726 100644 --- a/.github/workflows/Build.yaml +++ b/.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 diff --git a/.github/workflows/Publish.yaml b/.github/workflows/Publish.yaml index 8abce32..9bf3bba 100644 --- a/.github/workflows/Publish.yaml +++ b/.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 diff --git a/package.json b/package.json index 528b8b4..7ceffdb 100644 --- a/package.json +++ b/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", diff --git a/src/components/Camera/ManualCamera/ManualCamera.useHandlers.ts b/src/components/Camera/ManualCamera/ManualCamera.useHandlers.ts index 8d4f96f..f82364b 100644 --- a/src/components/Camera/ManualCamera/ManualCamera.useHandlers.ts +++ b/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 { const { cameraPosition, canvasSize } = state; const { tileSize, mapDimensions } = computed; + const lastHoveredTileRef = useRef(null); + const getTilePositionByMousePosition = (mousePosition: Position) => { if (cameraPosition && canvasSize) { const position = getTilePosition(mousePosition, cameraPosition, tileSize, canvasSize); @@ -24,6 +27,32 @@ export function useHandlers(): Partial { 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 { handleClick, handleDoubleClick, handleContextMenu, + handleMouseMove, }; }