feat: Implement incremental brightness control

Update brightness toggle to increment by step amounts rather than jumping to max:
- Click repeatedly increases brightness by brightnessStep increments
- When max brightness is reached, clicking resets to normal (1.0)
- Provides smooth, granular control for detail visibility
- Updated README and examples to explain incremental behavior

README.md

@@ -167,7 +167,7 @@ When enabled:
 
 ### Brightness Control
 
-Enable brightness controls alongside zoom controls:
+Enable brightness controls with a single toggle button:
 
 ```typescript
 import { Component } from '@angular/core';
@@ -196,6 +196,12 @@ export class BrightnessComponent {
 }
 ```
 
+**How the brightness button works:**
+- Click repeatedly to increase brightness by `brightnessStep` increments
+- Icon changes from outline sun (normal) to filled sun (brightened)
+- When max brightness is reached, clicking resets back to normal (1.0)
+- Consistent UX pattern with the zoom control
+
 Programmatic brightness control:
 
 ```typescript

projects/ngx-pinch-zoom/src/lib/components/containers/pinch-zoom/pinch-zoom.container.ts

@@ -302,12 +302,12 @@ export class PinchZoomComponent implements OnInit, OnDestroy {
     }
 
     toggleBrightness(): void {
-        if (this.isBrightened()) {
-            // If brightness is increased, reset to normal
+        if (this.isBrightnessAtMax()) {
+            // If at max brightness, reset to normal
             this.brightnessService.reset();
         } else {
-            // If brightness is normal, set to max
-            this.brightnessService.setValue(this.maxBrightness());
+            // Increment brightness by step until max
+            this.brightnessService.increase();
         }
     }
 

src/app/app.component.html

@@ -287,8 +287,8 @@
     <div class="demo">
         <h2>enableBrightnessControl: true</h2>
         <p>
-            Enable brightness controls alongside zoom controls. Perfect for brightening dark images or examining details in shadows.
-            Controls appear at the bottom center of the image.
+            Enable brightness control button alongside zoom control. Click repeatedly to increment brightness until max, then reset to normal.
+            Icon changes from outline sun (normal) to filled sun (brightened). Controls appear at the bottom center of the image.
         </p>
         <p>Brightness State: {{ brightnessstate().toFixed(2) }}</p>
         <pinch-zoom [enableBrightnessControl]="true" (brightnessChanged)="onBrightnessChanged($event)">
@@ -301,7 +301,10 @@
     <!-- brightnessStep -->
     <div class="demo">
         <h2>brightnessStep: 0.2</h2>
-        <p>Brightness adjustment increment. Larger steps for faster adjustments. Default is 0.1.</p>
+        <p>
+            Brightness adjustment increment. Each click increases brightness by this amount. Larger steps = fewer clicks to reach max.
+            Default is 0.1.
+        </p>
         <p>Brightness State: {{ brightnessstate().toFixed(2) }}</p>
         <pinch-zoom [enableBrightnessControl]="true" [brightnessStep]="0.2" (brightnessChanged)="onBrightnessChanged($event)">
             <img
@@ -313,7 +316,9 @@
     <!-- minBrightness & maxBrightness -->
     <div class="demo">
         <h2>minBrightness: 0.5, maxBrightness: 1.5</h2>
-        <p>Limit the brightness range. Default range is 0.1 to 2.0.</p>
+        <p>
+            Limit the brightness range. Click button to increment from 1.0 to max (1.5), then reset to 1.0. Default range is 0.1 to 2.0.
+        </p>
         <p>Brightness State: {{ brightnessstate().toFixed(2) }}</p>
         <pinch-zoom
             [enableBrightnessControl]="true"
@@ -331,8 +336,8 @@
     <div class="demo">
         <h2>Combined: Click-to-zoom + Brightness Control</h2>
         <p>
-            Perfect for defect inspection and anomaly detection workflows. Click to zoom in on suspicious areas, adjust brightness to see
-            details.
+            Perfect for defect inspection and anomaly detection workflows. Click image to zoom in on suspicious areas, use brightness button
+            to incrementally brighten the image for better detail visibility. Each feature uses a single button for clean UX.
         </p>
         <p>Zoom State: {{ zoomstate() }} | Brightness State: {{ brightnessstate().toFixed(2) }}</p>
         <pinch-zoom