feat(stage): change scale and position of live2d model #275
Conversation
There was a problem hiding this comment.
Summary of Changes
Hello @LemonNekoGH, 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 introduces a significant enhancement to the Live2D model integration by providing users with direct control over its scale and position. I've implemented the necessary UI components, updated the underlying rendering logic to apply these transformations, and ensured that these preferences are saved persistently. This allows for greater personalization of the Live2D model's display within the application.
Highlights
- Live2D Model Customization UI: I've introduced a new section within the Live2D settings page (
Live2DSettings.vue) that provides user interface controls (range sliders) for adjusting the scale and X/Y position of the Live2D model. This allows users to fine-tune the appearance of their model. - Dynamic Model Transformation Logic: The core Live2D model component (
Live2D/Model.vue) has been updated to dynamically apply the user-defined scale and position. This includes refactoring the offset calculation to correctly handle percentage-based values and ensuring the model's transformations are re-applied when settings or container dimensions change. - Persistent Settings and Integration: New settings for Live2D model scale and position (
live2dScale,live2dPosition) have been added to the application's settings store (settings.ts) and are persisted usinglocalStorage. These settings are then propagated through the main stage (index.vue) and settings preview (models/index.vue) components to ensure the Live2D model renders according to user preferences. - Internationalization Support: Localization keys for the new 'Scale And Position' settings, including 'Scale', 'X', and 'Y', have been added to both English (
en/settings.yaml) and Simplified Chinese (zh-Hans/settings.yaml) language files.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and 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 to provide feedback.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
✅ Deploy Preview for airi-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
packages/stage-ui/tsconfig.json
Outdated
| @@ -42,7 +42,8 @@ | |||
| "stories/**/*.d.ts", | |||
| "stories/**/*.mts", | |||
| "stories/**/*.vue", | |||
| "stories/**/*.story.vue" | |||
| "stories/**/*.story.vue", | |||
| "../../apps/stage-tamagotchi/src/components/Widgets/Live2DSettings.vue" | |||
There was a problem hiding this comment.
This change introduces a direct dependency from the stage-ui package to the stage-tamagotchi application. Packages should be self-contained and not depend on applications that consume them. Consider moving the component being referenced into the stage-ui package.
| if (Number.isNaN(xOffset)) | ||
| xOffset = 0 | ||
| if (Number.isNaN(yOffset)) | ||
| yOffset = 0 |
There was a problem hiding this comment.
The isNaN checks are redundant since the initial assignments for xOffset and yOffset on lines 43-44 already handle NaN cases.
✅ Deploy Preview for airi-vtuber ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Close #265
airi-scale-and-position.mp4