Feature: make round move path with cursor's colour.#47
Conversation
…into feature/arrow
…dering and asset loading - Simplified cursor movement path drawing logic by consolidating path scaling and rendering steps. - Enhanced asset loading process with improved font loading handling and vector asset caching. - Streamlined rendering logic for interaction objects to ensure better performance and clarity.
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the path rendering system to use the cursor's color for movement paths and improves the visual appearance with rounded corners. The change involves renaming the path assets file and implementing sophisticated path drawing with smooth rounded corners.
- Renamed asset file from
paths.jsontorenderPaths.jsonfor better naming consistency - Enhanced path rendering with cursor color integration and rounded corner visualization
- Improved code style and structure in path drawing logic
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/tilemap/index.tsx | Updates import to use renamed renderPaths.json asset file |
| src/components/canvas/index.tsx | Implements cursor-colored path rendering with rounded corners and improved drawing logic |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| if (!(reviveAt > 0 && Date.now() < reviveAt && cachedVectorAssets?.stun)) return; | ||
| const stunScale = (zoom / 2) * scale; | ||
| ctx.save(); | ||
| ctx.translate(x - tileSize / 2 / scale, y - tileSize / 2 / scale); | ||
| ctx.fillStyle = 'white'; | ||
| ctx.strokeStyle = 'black'; | ||
| ctx.scale(stunScale, stunScale); | ||
| cachedVectorAssets.stun.forEach(stunPath => { | ||
| ctx.fill(stunPath); | ||
| ctx.stroke(stunPath); | ||
| }); | ||
| ctx.restore(); |
There was a problem hiding this comment.
The negated condition with early return makes the logic harder to follow. Consider using the original positive condition with proper block structure for better readability.
| const scaledPoints = paths?.map(vec => { | ||
| const [vX, vY] = [vec.x + compensation.x, vec.y + compensation.y]; | ||
| return { x: vX * tileSize, y: vY * tileSize }; | ||
| }); | ||
| if (scaledPoints.length <= 1) return; |
There was a problem hiding this comment.
The early return should check for empty paths before the expensive mapping operation. Move this check before line 436 to avoid unnecessary computation when paths is empty.
| const scaledPoints = paths?.map(vec => { | |
| const [vX, vY] = [vec.x + compensation.x, vec.y + compensation.y]; | |
| return { x: vX * tileSize, y: vY * tileSize }; | |
| }); | |
| if (scaledPoints.length <= 1) return; | |
| if (!paths || paths.length <= 1) return; | |
| const scaledPoints = paths.map(vec => { | |
| const [vX, vY] = [vec.x + compensation.x, vec.y + compensation.y]; | |
| return { x: vX * tileSize, y: vY * tileSize }; | |
| }); |
No description provided.