diff --git a/README.md b/README.md index 7ebe74d..4d8fb02 100644 --- a/README.md +++ b/README.md @@ -241,10 +241,10 @@ export class BrightnessControlsComponent { ### Custom Controls with Plus/Minus Buttons -Build your own custom UI by disabling default controls and using the public methods: +Build your own custom UI by disabling default controls and using the public methods with smart min/max behavior: ```typescript -import { Component, viewChild, signal } from '@angular/core'; +import { Component, viewChild, signal, computed } from '@angular/core'; import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom'; @Component({ @@ -265,10 +265,10 @@ import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
- - - - + + + +

Zoom: {{ zoomLevel() }} | Brightness: {{ brightnessLevel() }}

@@ -280,20 +280,51 @@ export class CustomControlsComponent { zoomLevel = signal(1); brightnessLevel = signal(1.0); - zoomIn() { - this.pinchZoom()?.zoomIn(0.5); + // Min/max constants + private readonly MIN_ZOOM = 1; + private readonly MIN_BRIGHTNESS = 1.0; + private readonly MAX_BRIGHTNESS = 2.0; + + // Computed signals for button states + isZoomAtMin = computed(() => this.zoomLevel() <= this.MIN_ZOOM); + isBrightnessAtMin = computed(() => this.brightnessLevel() <= this.MIN_BRIGHTNESS); + + // Smart handlers with min/max and reset behavior + handleZoomIn() { + const pinch = this.pinchZoom(); + if (!pinch) return; + + const maxScale = pinch.maxScale(); + if (this.zoomLevel() >= maxScale) { + // At max, reset to min + pinch.destroy(); + } else { + pinch.zoomIn(0.5); + } } - zoomOut() { - this.pinchZoom()?.zoomOut(0.5); + handleZoomOut() { + const pinch = this.pinchZoom(); + if (!pinch || this.isZoomAtMin()) return; + pinch.zoomOut(0.5); } - brightnessIn() { - this.pinchZoom()?.brightnessIn(); + handleBrightnessIn() { + const pinch = this.pinchZoom(); + if (!pinch) return; + + if (this.brightnessLevel() >= this.MAX_BRIGHTNESS) { + // At max, reset to normal + pinch.resetBrightness(); + } else { + pinch.brightnessIn(); + } } - brightnessOut() { - this.pinchZoom()?.brightnessOut(); + handleBrightnessOut() { + const pinch = this.pinchZoom(); + if (!pinch || this.isBrightnessAtMin()) return; + pinch.brightnessOut(); } onZoomChange(scale: number) { @@ -306,6 +337,11 @@ export class CustomControlsComponent { } ``` +**Smart Control Behavior:** +- **Minus buttons**: Disabled when at minimum value (initial state), prevent going below min +- **Plus buttons**: When at maximum value, clicking resets to minimum instead of being disabled +- This pattern provides intuitive UX - users can't accidentally go below min, and can easily reset from max + ## Configuration Options | Input | Type | Default | Description | diff --git a/src/app/app.component.html b/src/app/app.component.html index 33d18d8..91dea9b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -371,8 +371,9 @@

Custom Zoom & Brightness Controls

- 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. + Build your own custom control UI using the component's public methods. This example demonstrates plus/minus buttons with smart + behavior: minus buttons are disabled when at minimum (initial state), plus buttons reset to minimum when at maximum. Perfect for + integrating controls into your own toolbar or UI layout.

Zoom State: {{ zoomstate() }} | Brightness State: {{ brightnessstate().toFixed(2) }}

- - - - + + + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ade9eaf..edad45c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, signal } from '@angular/core'; +import { Component, signal, computed, viewChild } from '@angular/core'; import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom'; /** @@ -19,6 +19,19 @@ export class AppComponent { zoomstate = signal(1); brightnessstate = signal(1.0); + // Reference to custom controls pinch-zoom instance + customPinch = viewChild('customPinch'); + + // Custom controls configuration + private readonly MIN_ZOOM = 1; + private readonly MIN_BRIGHTNESS = 1.0; + private readonly MAX_BRIGHTNESS = 2.0; + + // Computed signals for button states + isZoomAtMin = computed(() => this.zoomstate() <= this.MIN_ZOOM); + isBrightnessAtMin = computed(() => this.brightnessstate() <= this.MIN_BRIGHTNESS); + isBrightnessAtMax = computed(() => this.brightnessstate() >= this.MAX_BRIGHTNESS); + onZoomChanged(zoom: number): void { this.zoomstate.set(zoom); } @@ -26,4 +39,46 @@ export class AppComponent { onBrightnessChanged(brightness: number): void { this.brightnessstate.set(brightness); } + + // Custom control handlers with min/max and reset behavior + handleZoomIn(): void { + const pinch = this.customPinch(); + if (!pinch) return; + + const maxScale = pinch.maxScale(); + const currentScale = this.zoomstate(); + + if (currentScale >= maxScale) { + // At max, reset to min + pinch.destroy(); + } else { + pinch.zoomIn(0.5); + } + } + + handleZoomOut(): void { + const pinch = this.customPinch(); + if (!pinch || this.isZoomAtMin()) return; + + pinch.zoomOut(0.5); + } + + handleBrightnessIn(): void { + const pinch = this.customPinch(); + if (!pinch) return; + + if (this.isBrightnessAtMax()) { + // At max, reset to normal (1.0) + pinch.resetBrightness(); + } else { + pinch.brightnessIn(); + } + } + + handleBrightnessOut(): void { + const pinch = this.customPinch(); + if (!pinch || this.isBrightnessAtMin()) return; + + pinch.brightnessOut(); + } }