Sprite Quick Config in Preview #2567
Conversation
Summary of ChangesHello @Overu, 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 enhances the sprite editing experience by introducing a "Sprite Quick Config" feature, primarily focusing on visibility control. It adds a new interactive button to the sprite transformer in the preview, allows users to easily hide or show sprites via a context menu option, and provides a clear visual cue in the sprite list when a sprite is not visible. These changes aim to streamline sprite management and improve user feedback within the editor. 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a quick configuration feature for sprites in the preview. Specifically, it adds a menu item to toggle a sprite's visibility and displays an icon for hidden sprites. It also adds a new configuration button to the transformer on the stage, though its functionality seems to be a work in progress. The changes are well-structured. I've left a few comments with suggestions for improvement, mainly concerning code clarity and maintainability. This includes correcting some typos (e.g., configor to configurator), replacing magic numbers with named constants, using a more descriptive name for a history action, and simplifying a conditional expression. These changes should make the code easier to read and maintain.
| const configorTagImg = new Image() | ||
| configorTagImg.src = rotatorCirclePng |
There was a problem hiding this comment.
There seems to be a typo in configorTagImg; it should likely be configuratorTagImg. This typo also appears in ConfigorButton and configorButton. It would be good to correct this for consistency and clarity.
Additionally, configorTagImg is using rotatorCirclePng as its image source. If this is a placeholder, it should be replaced with the correct configuration icon.
| this.rect = new Konva.Rect({ | ||
| width: 20, | ||
| height: 20, | ||
| cornerRadius: 10, | ||
|
|
||
| shadowEnabled: true, | ||
| shadowColor: 'rgba(51, 51, 51, 0.2)', | ||
| shadowBlur: 4, | ||
| shadowOffsetY: 2, | ||
|
|
||
| stroke: 'rgba(217, 223, 229, 1)', | ||
| strokeWidth: 0.5, | ||
| fill: '#fff' | ||
| }) | ||
|
|
||
| this.image = new Konva.Image({ | ||
| width: 20, | ||
| height: 20, | ||
| cornerRadius: 10, | ||
| image: configorTagImg, | ||
| rotation: 0 | ||
| }) |
There was a problem hiding this comment.
The dimensions and corner radius are hardcoded here. These magic numbers are also implicitly used in the positioning logic within the update method. To improve maintainability and readability, it's recommended to define these values as constants. For example:
const BUTTON_SIZE = 20;
const BUTTON_RADIUS = 10;You can then use these constants both here for the button's shape and in the update method for positioning (e.g., this.width() / 2 - BUTTON_SIZE / 2).
| function toggleSpriteVisible() { | ||
| const name = props.sprite.name | ||
| const action = { name: { en: `Configure sprite ${name}`, zh: `修改精灵 ${name} 配置` } } |
There was a problem hiding this comment.
The action name Configure sprite ${name} is a bit generic for an action that only toggles visibility. A more descriptive name like Toggle visibility for sprite ${name} would make the user's action history clearer and more accurate.
const action = { name: { en: `Toggle visibility for sprite ${name}`, zh: `切换精灵 ${name} 的可见性` } }
| <slot name="img" :style="imgStyle"></slot> | ||
| <UIBlockItemTitle size="medium"> | ||
| {{ name }} | ||
| <template v-if="visible != null ? !visible : false" #suffix> |
There was a problem hiding this comment.
The condition v-if="visible != null ? !visible : false" is unnecessarily complex. It can be simplified to v-if="visible === false" for better readability, as it achieves the same result: the icon should only be shown when visible is explicitly false.
<template v-if="visible === false" #suffix>
…improved modularity
1 participant
Updates #2513