# Changelog

All notable changes to FlexLove will be documented in this file.

## [Unreleased]

### Added
- **Android 9-Patch Auto-Parsing**: Automatic parsing of *.9.png files
  - Automatically detects and parses Android 9-patch files based on .9.png extension
  - Extracts stretch regions and content padding from 1-pixel border markers
  - Supports multiple non-contiguous stretch regions on both axes
  - Manual insets override auto-parsing for backward compatibility
  - Console logging for transparency ("[FlexLove] Auto-parsed 9-patch: ...")
  - Added `ImageDataReader` module for pixel data extraction
  - Added `NinePatchParser` module with `parse()` function
  - Theme system automatically processes 9-patch files during theme loading
  - Space theme updated to use button.9.png with auto-parsing

- **Corner Radius Support**: Added `cornerRadius` property for rounded corners
  - Supports uniform radius (single number) or individual corners (table)
  - Automatically clips children to parent's rounded corners using stencil buffer
  - Works with backgroundColor, borders, and themes
  - Added `CornerRadiusDemo.lua` example

- **Disable Highlight Property**: Added `disableHighlight` property to control pressed overlay
  - Automatically defaults to `true` when `themeComponent` is set
  - Can be explicitly overridden for custom behavior
  - Added `DisableHighlightDemo.lua` example

- **Theme Layering System**: Improved rendering order for better visual control
  - Layer 1: backgroundColor (behind everything)
  - Layer 2: Theme 9-slice (on top of backgroundColor)
  - Layer 3: Borders (on top of theme)
  - Layer 4: Text (on top of everything)
  - Added `ThemeLayeringDemo.lua` example

- **Rounded Rectangle Helper**: Added `RoundedRect` module for smooth corner rendering
  - `RoundedRect.draw()` - Draw filled or outlined rounded rectangles
  - `RoundedRect.getPoints()` - Generate polygon points for rounded shapes
  - `RoundedRect.stencilFunction()` - Create stencil functions for clipping

### Changed
- **Property Rename**: `background` → `backgroundColor` (breaking change)
  - More explicit and consistent with CSS naming
  - All examples and tests updated

- **Theme Rendering**: Themes now render on top of backgroundColor instead of replacing it
  - Allows tinting themed elements with semi-transparent backgrounds
  - Borders always render on top of themes when specified

- **9-Slice Scaling**: Improved scaling algorithm for theme images
  - Properly handles elements smaller than corner sizes
  - Proportional corner scaling prevents overlap
  - Better handling of edge cases

### Fixed
- Theme images now scale correctly to any element size
- Corner regions no longer overlap when element is too small
- Stencil clipping properly contains children within rounded corners

## Previous Changes

### Theme System
- 9-slice/9-patch theming with state support
- State-based rendering (normal, hover, pressed, disabled, active)
- Flexible atlas organization (separate images, single atlas, or hybrid)
- Theme loading and activation system

### Layout System
- Flexbox layout with full flex properties
- Grid layout system
- Absolute and relative positioning
- Automatic sizing and responsive design

### Event System
- Enhanced event handling with detailed event information
- Support for click, press, release, right-click, middle-click
- Modifier key detection (shift, ctrl, alt, gui)
- Double-click and multi-click detection

### Styling
- Color utilities with hex support
- Text rendering with alignment and auto-scaling
- Text size presets (xs, sm, md, lg, xl, etc.)
- Viewport-relative units (vw, vh, %)
- Border control (individual sides)
- Opacity support

### Animation
- Built-in animation system
- Fade and scale animations
- Custom animation support with easing
- Smooth transitions

## Migration Guide

### Using Android 9-Patch Files

FlexLove now automatically parses Android 9-patch (*.9.png) files. Simply rename your files to include the `.9.png` extension and remove manual insets:

```lua
-- Old (manual insets)
components = {
  button = {
    atlas = "themes/space/button.png",
    insets = { left = 14, top = 14, right = 14, bottom = 14 }
  }
}

-- New (auto-parsed from .9.png file)
components = {
  button = {
    atlas = "themes/space/button.9.png"
    -- insets automatically extracted from 9-patch borders
  }
}

-- Manual override still works
components = {
  button = {
    atlas = "themes/space/button.9.png",
    insets = { left = 20, top = 20, right = 20, bottom = 20 }  -- Overrides auto-parsing
  }
}
```

**9-Patch Format:**
- Top border (row 0): Horizontal stretch regions (black pixels = stretchable)
- Left border (column 0): Vertical stretch regions (black pixels = stretchable)
- Bottom border: Horizontal content padding (optional)
- Right border: Vertical content padding (optional)
- Supports multiple non-contiguous stretch regions for complex scaling patterns

### From `background` to `backgroundColor`

If you're updating existing code, replace all instances of `background` with `backgroundColor`:

```lua
-- Old
Gui.new({
  background = Color.new(0.2, 0.2, 0.2, 1)
})

-- New
Gui.new({
  backgroundColor = Color.new(0.2, 0.2, 0.2, 1)
})
```

### Using Corner Radius

```lua
-- Uniform radius
Gui.new({
  cornerRadius = 10,
  -- ...
})

-- Individual corners
Gui.new({
  cornerRadius = {
    topLeft = 20,
    topRight = 10,
    bottomLeft = 10,
    bottomRight = 20
  },
  -- ...
})
```

### Controlling Highlight Overlay

```lua
-- Regular button (highlight enabled by default)
Gui.new({
  callback = function(element, event) end
})

-- Themed button (highlight disabled by default)
Gui.new({
  themeComponent = "button",
  callback = function(element, event) end
})

-- Override default behavior
Gui.new({
  themeComponent = "button",
  disableHighlight = false,  -- Force enable
  callback = function(element, event) end
})
```

## Compatibility

- **Lua**: 5.1+
- **LÖVE**: 11.x (tested)
- **LuaJIT**: Compatible

## Known Issues

- Some type annotations show warnings in Lua language servers (cosmetic only)
- Theme system requires proper atlas setup for visual feedback
- Very small elements may have visual artifacts with complex corner radii

## Future Plans

- Input field components
- Scrollable containers
- Dropdown menus
- Tooltip system
- More built-in themes
- Performance optimizations
- Additional layout modes