Fix preview scaling and automate asset placement #2
Conversation
Summary of ChangesHello @Sunwood-ai-labs, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience by improving the responsiveness of the canvas preview, streamlining the asset management workflow with automatic placement, and resolving UI layering issues with dropdown menus. These changes ensure a more fluid and intuitive interaction with the application's core features, making the interface more robust and user-friendly. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
There is a problem with the Gemini CLI PR review. Please check the action logs for details. |
There was a problem hiding this comment.
Code Review
This pull request introduces several valuable UI improvements. The canvas preview scaling has been fixed to correctly fit within its container, which is a great enhancement. Dropdown menus are now correctly rendered in portals to avoid being clipped by other elements. The feature to automatically place uploaded assets is a nice productivity boost. My review focuses on this new auto-placement logic, where I found a critical issue that prevents it from working correctly with multiple files. I've also included a suggestion to improve code maintainability. The other changes look solid.
|
|
||
| visualAssets.forEach((asset) => { | ||
| const state = useProjectStore.getState(); | ||
| const cellIndex = determineTargetCell(state.project, state.activeCell); |
There was a problem hiding this comment.
There's a logical error here that prevents the auto-assignment of multiple assets from working correctly. By passing state.activeCell to determineTargetCell, and since setActiveCell is also called within the loop, every asset in visualAssets will be assigned to the same cell, overwriting the previous one. This results in only the last asset being placed on the grid.
To fix this, you should call determineTargetCell without the activeCell argument. This will allow it to find the next available empty cell in each iteration of the loop.
| const cellIndex = determineTargetCell(state.project, state.activeCell); | |
| const cellIndex = determineTargetCell(state.project); |
| } | ||
|
|
||
| function autoAssignAssetsToCells(assets: Asset[]) { | ||
| const visualAssets = assets.filter((asset) => asset.type === "image" || asset.type === "logo" || asset.type === "video"); |
There was a problem hiding this comment.
For better readability and maintainability, you can define an array of visual asset types and use Array.prototype.includes() to check if the asset type is one of them. This makes it easier to add or remove types in the future.
| const visualAssets = assets.filter((asset) => asset.type === "image" || asset.type === "logo" || asset.type === "video"); | |
| const visualAssets = assets.filter((asset) => ["image", "logo", "video"].includes(asset.type)); |
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68fe1eaedf30832cabdff527ff3d3832