feat: add individual corner radius support

[MinCrohn]

Purpose of Change

This PR enhances TextureStyle for rect types to support individual corner radius values (topLeft, topRight, etc.).

Usage Example

// Old way (still supported)
const background1 = {
  type: 'background',
  source: { type: 'rect', fill: 'blue', radius: 10 } // Applies 10px radius to all corners
};

// New way (individual corners)
const background2 = {
  type: 'background',
  source: {
    type: 'rect',
    fill: 'red',
    radius: { topLeft: 20, topRight: 0, bottomRight: 20, bottomLeft: 0 } // Different radii per corner
  }
};

[gemini-code-assist]

Summary of Changes

Hello @MinCrohn, I'm Gemini Code Assist¹! 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 TextureStyle functionality for rect types by introducing the ability to specify individual corner radii for each corner. This provides greater flexibility in UI design, allowing for more complex and nuanced rounded rectangle shapes. The changes involve updating the data schema, modifying texture creation logic to handle both single and individual radius values, and ensuring proper caching and accessibility of these new properties throughout the system.

Highlights

• Individual Corner Radius Support: The TextureStyle for rect types now accepts an object for the radius property, allowing different radii for topLeft, topRight, bottomRight, and bottomLeft corners.
• Schema Definition: A new EachRadius Zod schema has been introduced to formally define the structure for specifying individual corner radii.
• Dynamic Texture Slicing: The texture slicing metadata (topHeight, leftWidth, etc.) is now dynamically calculated based on the maximum of the individual corner radii when an EachRadius object is provided, ensuring correct rendering for complex shapes.
• Improved Cache Key Generation: The cacheKey utility now uses JSON.stringify for configuration values to ensure proper and unique caching when the radius property is an object.
• Sourceable Mixin Enhancement: The Sourceable mixin now directly assigns texture slice metadata properties to the instance, making them readily accessible for rendering and layout purposes.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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

1. 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. ↩

[gemini-code-assist]

Code Review

This pull request introduces support for individual corner radii, which is a great enhancement. The changes to the data schema, texture caching, and mixin are well-implemented. However, I've identified two high-severity issues in the rect.js texture creation logic that could lead to rendering errors. Specifically, the calculation for the 9-slice metadata can produce NaN values, and the logic for drawing rounded rectangles doesn't correctly use the parsed radius values, potentially leading to errors when partial radius objects are provided. Please address these points to ensure the new feature is robust.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a valuable enhancement by adding support for individual corner radii on rect textures. The changes are well-structured, touching upon the data schema, texture generation logic, and cache key creation. The modification in Sourceable.js to automatically apply 9-slice metadata is a nice touch. I've identified one high-severity issue in the calculation of the slice dimensions that could lead to visual glitches with borders. My feedback includes a specific suggestion to address this.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a valuable enhancement by adding support for individual corner radii on rect textures. The implementation is well-executed, with necessary updates to the data schema, texture creation logic, and caching mechanism. The code is clear and the changes are logically structured. I have one minor suggestion to improve code clarity and correctness.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces support for individual corner radii on rect textures, which is a great enhancement. The implementation is solid, covering schema updates, texture creation, caching, and application to display objects. I've identified a few areas for improvement, primarily concerning input validation for radius values to prevent negative numbers and a more precise calculation of the 9-slice dimensions to better match PixiJS's default stroke behavior. These changes will improve the robustness and accuracy of the new feature.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces support for individual corner radii in the TextureStyle for rect types. The changes include modifications to rect.js, utils.js, primitive-schema.js, and Sourceable.js to accommodate the new feature. The cacheKey function in utils.js is updated to stringify the config values, and the TextureStyle schema in primitive-schema.js is updated to allow for individual radius values. The createRect function in rect.js is modified to handle both uniform and individual corner radii. The Sourceable mixin is updated to assign texture metadata. I have identified a potential issue with the getSliceDimension function in rect.js where it might not handle undefined radius values correctly, and have provided a code suggestion to address this.