From 757197fe2670724e4fc5063396bd8f6c0c844353 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 16 Nov 2025 14:45:10 +0000
Subject: [PATCH] feat: Add custom controls example with plus/minus buttons

Add comprehensive examples demonstrating custom zoom and brightness controls:
- New example in app.component.html showing plus/minus buttons for both features
- Updated README with custom controls section showing how to build custom UI
- Demonstrates disabling default controls and using public methods
- Useful for integrating controls into custom toolbars or layouts

Public methods used:
- zoomIn(value) / zoomOut(value) for zoom control
- brightnessIn() / brightnessOut() for brightness control
---
 README.md                  | 67 ++++++++++++++++++++++++++++++++++++++
 src/app/app.component.html | 29 +++++++++++++++++
 2 files changed, 96 insertions(+)

diff --git a/README.md b/README.md
index d61649b..7ebe74d 100644
--- a/README.md
+++ b/README.md
@@ -239,6 +239,73 @@ export class BrightnessControlsComponent {
 }
 ```
 
+### Custom Controls with Plus/Minus Buttons
+
+Build your own custom UI by disabling default controls and using the public methods:
+
+```typescript
+import { Component, viewChild, signal } from '@angular/core';
+import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
+
+@Component({
+    selector: 'app-custom-controls',
+    standalone: true,
+    imports: [PinchZoomComponent],
+    template: `
+        <pinch-zoom
+            #pinchZoom
+            [disableZoomControl]="'disable'"
+            [enableBrightnessControl]="false"
+            [zoomControlScale]="0.5"
+            [brightnessStep]="0.1"
+            (zoomChanged)="onZoomChange($event)"
+            (brightnessChanged)="onBrightnessChange($event)"
+        >
+            <img src="image.jpg" />
+        </pinch-zoom>
+
+        <div class="custom-controls">
+            <button (click)="zoomOut()">Zoom -</button>
+            <button (click)="zoomIn()">Zoom +</button>
+            <button (click)="brightnessOut()">Brightness -</button>
+            <button (click)="brightnessIn()">Brightness +</button>
+        </div>
+
+        <p>Zoom: {{ zoomLevel() }} | Brightness: {{ brightnessLevel() }}</p>
+    `,
+})
+export class CustomControlsComponent {
+    pinchZoom = viewChild<PinchZoomComponent>('pinchZoom');
+
+    zoomLevel = signal(1);
+    brightnessLevel = signal(1.0);
+
+    zoomIn() {
+        this.pinchZoom()?.zoomIn(0.5);
+    }
+
+    zoomOut() {
+        this.pinchZoom()?.zoomOut(0.5);
+    }
+
+    brightnessIn() {
+        this.pinchZoom()?.brightnessIn();
+    }
+
+    brightnessOut() {
+        this.pinchZoom()?.brightnessOut();
+    }
+
+    onZoomChange(scale: number) {
+        this.zoomLevel.set(scale);
+    }
+
+    onBrightnessChange(brightness: number) {
+        this.brightnessLevel.set(brightness);
+    }
+}
+```
+
 ## Configuration Options
 
 | Input                     | Type                              | Default                 | Description                               |
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6c79e0b..33d18d8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -366,4 +366,33 @@
             <button class="btn btn-small btn-outline btn-rounded" (click)="myPinch.destroy()">destroy()</button>
         </div>
     </div>
+
+    <!-- Custom Controls with Plus/Minus Buttons -->
+    <div class="demo">
+        <h2>Custom Zoom & Brightness Controls</h2>
+        <p>
+            Build your own custom control UI using the component's public methods. This example demonstrates plus/minus buttons for both zoom
+            and brightness, with default controls disabled. Perfect for integrating controls into your own toolbar or UI layout.
+        </p>
+        <p>Zoom State: {{ zoomstate() }} | Brightness State: {{ brightnessstate().toFixed(2) }}</p>
+        <pinch-zoom
+            #customPinch="pinchZoom"
+            [disableZoomControl]="'disable'"
+            [zoomControlScale]="0.5"
+            [enableBrightnessControl]="false"
+            [brightnessStep]="0.1"
+            (zoomChanged)="onZoomChanged($event)"
+            (brightnessChanged)="onBrightnessChanged($event)"
+        >
+            <img
+                src="https://images.unsplash.com/photo-1577234162223-98e9caa94705?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80"
+            />
+        </pinch-zoom>
+        <div class="actions">
+            <button class="btn btn-small btn-blue btn-rounded" (click)="customPinch.zoomOut(0.5)">Zoom -</button>
+            <button class="btn btn-small btn-blue btn-rounded" (click)="customPinch.zoomIn(0.5)">Zoom +</button>
+            <button class="btn btn-small btn-green btn-rounded" (click)="customPinch.brightnessOut()">Brightness -</button>
+            <button class="btn btn-small btn-green btn-rounded" (click)="customPinch.brightnessIn()">Brightness +</button>
+        </div>
+    </div>
 </div>