Improve custom controls example with intelligent button behavior:
- Minus buttons disabled when at minimum (initial state)
- Plus buttons reset to minimum when at maximum
- Prevents going below min values
- Provides intuitive UX with disabled states
Implementation:
- Added computed signals: isZoomAtMin, isBrightnessAtMin, isBrightnessAtMax
- Created handler methods: handleZoomIn/Out, handleBrightnessIn/Out
- Handlers check limits and reset when appropriate
- Template binds [disabled] to computed signals
Benefits:
- Users can't accidentally go below minimum
- Easy reset from maximum with single click
- Clear visual feedback via disabled buttons
- Clean pattern for custom toolbar integration
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
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
- Added original author: Nikita Drozhzhin (drozhzhin-n-e/ngx-pinch-zoom)
- Added Angular 19/20 fork contributors: Konstantin Schütte and Björn Schmidt (medDV-GmbH)
- Structured credits to show development lineage: Original → Fork → Current
- Updated all three documentation files with consistent attribution
Updated documentation to more accurately reflect what was preserved from the
original library versus what was rebuilt for Angular 20.
**Key Changes:**
**package.json:**
- Updated description to clarify "rebuilt with modern signals" rather than
"complete rewrite"
- Emphasizes core logic is "adapted from original" with "extensive enhancements"
**README.md Credits Section:**
Now clearly separated into two parts:
1. **What's From the Original:**
- Core pinch-to-zoom mathematics and transform algorithms (IvyPinch)
- Touch and mouse gesture detection logic (Touches)
- Original zoom/pan calculations and constraints
2. **What's New in This Version:**
- Complete Angular 20 signals API migration
- Professional architecture (models/, services/, containers/, presentational/)
- Smart/Dumb component pattern
- New features: brightness control, click-to-zoom
- Service-based state management
- 778 lines of JSDoc documentation
**CHANGELOG.md:**
- Changed from "Complete Rewrite" to "Major Modernization"
- Added explanation: "core zoom/pan mathematics from the original library have
been preserved and enhanced, while the Angular implementation has been
completely rebuilt"
- Credits section now explicitly lists what was retained from original
**Library README.md:**
- Added "Core Logic Attribution" section
- Added "Modernization & New Features" section
- Clearer separation of original work vs new work
**Rationale:**
This is more accurate and gives proper credit to the original developers for
their excellent core zoom algorithms while still highlighting the significant
work done to:
- Migrate to Angular 20 signals
- Redesign the architecture
- Add new features (brightness, click-to-zoom)
- Add comprehensive documentation
The core math and gesture detection logic from Nikita Drozhzhin's original
work remains the foundation, enhanced with modern Angular patterns and new
capabilities.
Updated package name from `ngx-pinch-zoom` to `@brianpooe/ngx-pinch-zoom`
to properly scope the package under the @brianpooe npm organization.
**Changes:**
- projects/ngx-pinch-zoom/package.json: name → @brianpooe/ngx-pinch-zoom
- README.md: All import examples updated to use scoped package name
- CHANGELOG.md: Installation command updated
- projects/ngx-pinch-zoom/README.md: Import examples updated
- ivypinch.ts: Deprecation notice updated with scoped package name
- touches.ts: Deprecation notice updated with scoped package name
Library builds successfully as @brianpooe/ngx-pinch-zoom.
This commit updates all documentation to reflect the complete Angular 20 rewrite
and establishes proper attribution for the original library authors.
**Package Changes:**
1. **package.json**
- Changed name from @meddv/ngx-pinch-zoom to ngx-pinch-zoom
- Updated author to Brian Pooe
- Removed contributors (moved to Credits section in docs)
- Updated repository URLs to brianpooe/ngx-pinch-zoom
- Enhanced description highlighting modern architecture
- Added keywords: Angular signals, smart components, anomaly detection
2. **Main README.md**
- Updated all import examples from @meddv/ngx-pinch-zoom to ngx-pinch-zoom
- Added comprehensive Architecture section with folder structure
- Added Design Patterns section (Smart/Dumb, Services, Signals, DI)
- Added detailed Credits section acknowledging original authors:
* Nikita Drozhzhin - Original creator
* Konstantin Schütte - Angular 19 fork maintainer
* Björn Schmidt - Angular 19 fork contributor
- Updated GitHub issues link to brianpooe repository
3. **CHANGELOG.md**
- Updated version date to 2025-11-16
- Changed title to "Complete Rewrite: Angular 20 + Professional Architecture"
- Reorganized features to highlight new capabilities:
* Click to Zoom for anomaly detection
* Brightness Control
* Professional Architecture
* Smart/Dumb Components
- Added Architecture Changes section with folder structure
- Added comprehensive Credits section with original authors
- Updated migration guide npm install command
4. **Library README.md** (projects/ngx-pinch-zoom/README.md)
- Complete rewrite with focus on architecture and quality
- Added detailed folder structure documentation
- Added Design Patterns section explaining:
* Smart/Dumb Component Pattern
* Service-Based Architecture
* Signal-Based Reactivity
* Modern Dependency Injection
- Added Code Quality section (778 lines JSDoc, strict mode, etc.)
- Added Use Cases section (anomaly detection, medical imaging, etc.)
- Added Credits section with full attribution
5. **Deprecated Re-export Files**
- Updated @deprecated comments in ivypinch.ts and touches.ts
- Changed import examples from @meddv/ngx-pinch-zoom to ngx-pinch-zoom
**Key Documentation Themes:**
- Emphasizes this is a **complete rewrite**, not just an update
- Proper attribution to original authors in Credits sections
- Highlights professional Angular architecture patterns
- Documents the clean folder structure (models/, services/, components/)
- Explains smart/dumb component pattern explicitly
- Shows real-world use cases (anomaly detection, defect inspection)
All references to @meddv and medDV-GmbH have been removed from ownership
positions and properly attributed in Credits sections.
Implement click-to-zoom feature perfect for anomaly detection and defect inspection workflows:
**New Input Signals:**
- enableClickToZoom: Enable/disable click-to-zoom (default: false)
- clickToZoomScale: Target zoom scale when clicking (default: 2.5)
**Implementation:**
- Click any point on image to zoom to that exact location
- Click again to zoom out back to original view
- Cursor changes to zoom-in icon when feature is enabled
- Smooth animated transitions
- Respects zoom limits (min/max scale)
- Works alongside existing touch/pinch zoom
**Use Cases:**
- Anomaly detection: Click suspicious areas to examine closely
- Defect inspection: Quickly zoom to specific spots
- Detail review: Fast workflow for inspecting multiple points
**Technical Details:**
- Added IvyPinch.zoomToPoint(clientX, clientY, targetScale) method
- Calculates click position relative to element bounds
- Applies zoom transform centered on clicked point
- Component wrapper method handles event and configuration
- CSS cursor feedback for better UX
Updated documentation with usage examples and testing scenarios.
Document the new brightness control feature across all documentation:
- Update README.md with brightness examples and API documentation
- Add brightness control to QUICK_REFERENCE.md signal architecture
- Include brightness in testing scenarios and configuration tests
- Document new input signals: enableBrightnessControl, brightnessStep, minBrightness, maxBrightness
- Document new output signal: brightnessChanged
- Document new methods: brightnessIn(), brightnessOut(), resetBrightness()
- Document new computed signals: brightness(), isBrightnessControl(), isBrightnessAtMin(), isBrightnessAtMax()
- Add CSS filter effects pattern example to QUICK_REFERENCE.md
