- Moved brightness control styles from container SASS to BrightnessControlsComponent
- Moved zoom control styles from container SASS to ZoomControlsComponent
- Fixed Angular view encapsulation issue preventing styles from applying
- Added @brianpooe/ngx-pinch-zoom path mapping to tsconfig.json
- Updated app component to import from @brianpooe/ngx-pinch-zoom
This fixes the issue where control icons were not visible due to Angular's
view encapsulation preventing parent component styles from applying to
child presentational components. Each component now contains its own styles.
- Removed removeBasicStyles() call from destroy()
- Keeps layout styles (display: flex, alignItems, justifyContent) intact
- Only resets zoom state and removes event listeners
- Component remains visually correct after calling destroy()
This allows destroy() to be used as a manual reset method without
breaking the component's visual layout. The component can now be
safely reset without removing essential flex container styles.
- Added zoom state reset (scale=1, moveX=0, moveY=0) before cleanup
- Explicitly sets transform to 'none' and transition to 'none'
- Prevents image from appearing enlarged/overflowed after destroy
- Ensures clean state restoration before removing event listeners
This fixes the issue where calling destroy() would enlarge the image
and cause overflow instead of properly resetting the component state.
- Added null checks in getImageElement() for this.element
- Updated getImageHeight() and getImageWidth() to use optional chaining
- Added guards in isDragging() for this.element and this.parentElement
- Returns safe defaults (0, false, undefined) when service not initialized
This fixes TypeError in zoneless mode where computed signals are evaluated
immediately during template rendering, before ngOnInit() runs. The guards
ensure methods return safe values until the service is properly initialized.
Critical for Angular 20 zoneless change detection compatibility.
- Added explicit provideZonelessChangeDetection() from @angular/core
- Follows official Angular 20 zoneless documentation
- Explicit configuration is better than implicit defaults
- Enables zoneless mode for optimal performance with signals
- Removed provideZonelessChangeDetection() call
- In Angular 20+, zoneless is stable and default when no zone provider specified
- No Zone.js dependency needed - cleaner and more performant
- Aligns with official Angular 20 zoneless documentation
- Added provideZonelessChangeDetection() to enable zoneless mode
- Resolves NG0908 error (Angular requires Zone.js)
- Modern approach that works perfectly with signals-based library
- No Zone.js dependency needed for the example app
Documentation updates:
- Corrected library README to reflect IvyPinchService and TouchesService are Angular services, not utility classes
- Updated CHANGELOG to accurately describe service architecture
- All services now correctly documented as using Angular's DI system
Example app modernization:
- Converted AppComponent to standalone component (removed NgModule)
- Updated to use Angular 20 signals (signal() for state)
- Updated main.ts to use bootstrapApplication instead of bootstrapModule
- Fixed template to call signal values as functions
- Added JSDoc documentation
All features demonstrated:
- Click-to-zoom functionality
- Brightness control
- Combined workflows (click-to-zoom + brightness)
- All configuration options
- Programmatic control methods
- 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
Converted core utility classes to Angular services with @Injectable decorators
for better consistency with Angular best practices and modern DI patterns.
**Breaking Changes:**
This is a fresh start with no backward compatibility.
1. **IvyPinch → IvyPinchService**
- Added @Injectable() decorator
- Constructor removed, replaced with init(properties, callback) method
- Now injected via Angular DI instead of instantiated with 'new'
- Injected TouchesService instead of creating new Touches instance
- Provided at component level for proper instance scoping
2. **Touches → TouchesService**
- Added @Injectable() decorator
- Constructor removed, replaced with init(properties) method
- Now injected via Angular DI instead of instantiated with 'new'
- Provided at component level for proper instance scoping
3. **PinchZoomComponent Updates**
- Added IvyPinchService and TouchesService to providers array
- Injected services via inject() function
- Changed from 'new IvyPinch()' to 'ivyPinchService.init()'
- Updated all references from this.pinchZoom to this.ivyPinchService
4. **Removed Backward Compatibility**
- Deleted ivypinch.ts (re-export shim)
- Deleted touches.ts (re-export shim)
- Clean break for fresh start with Angular 20 patterns
**Benefits:**
- Fully consistent with Angular service architecture
- Better dependency injection throughout
- Each component gets properly scoped service instances
- Cleaner, more testable code
- No ambiguity about utility classes vs services
- Professional Angular patterns from top to bottom
**Technical Details:**
Services are provided at component level (not root) to ensure each
PinchZoomComponent instance gets its own IvyPinchService and TouchesService
with isolated state.
All builds passing (library + example app).
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.
Consolidated ivypinch.ts and ivypinch.improved.ts into a single, well-documented file.
**Changes:**
1. **Added comprehensive JSDoc documentation to ivypinch.ts:**
- File-level @fileoverview with architecture description
- Section headers for code organization (8 major sections)
- JSDoc comments for all properties (30+ documented)
- JSDoc comments for all methods (50+ documented)
- Algorithm explanations for complex methods (pinch, pan, wheel zoom)
- Mathematical formulas with inline examples
- @param and @returns tags for all methods
- @public/@private visibility markers
- Cross-references using {@link} tags
- Usage examples in @example blocks
2. **Documentation Highlights:**
- **Transform mathematics**: Matrix format, hardware acceleration benefits
- **Fixed-point zooming**: How pinch center stays visually fixed
- **Two pinch modes**: Fixed vs. draggable pinch with trade-offs
- **Pan constraints**: Algorithm for preventing gaps at edges
- **Wheel zoom**: Snapping behavior and cursor-centered zooming
- **Coordinate calculations**: Touch vs. mouse event handling
- **Public API**: Detailed docs for component integration
3. **Removed ivypinch.improved.ts:**
- Eliminated duplicate file to maintain single source of truth
- Prevents sync issues between two copies
- All educational content now in production file
- IDE tooltips will show documentation
- TypeDoc can generate API docs from JSDoc
4. **Fixed property initialization order:**
- Moved defaultMaxScale before maxScale
- Resolved TypeScript initialization error
**Benefits:**
✅ Single source of truth (no duplicate files to sync)
✅ IDE tooltips show documentation on hover
✅ Better developer onboarding
✅ TypeDoc-ready for API documentation generation
✅ No bundle size impact (JSDoc stripped at build time)
✅ Easier to maintain (update docs with code)
✅ Professional documentation standards
**File Stats:**
- Lines: 1,559 (781 original + 778 JSDoc)
- Properties documented: 30+
- Methods documented: 50+
- Code sections: 8 major areas
- No runtime impact (comments don't affect bundle)
All builds passing (library + app). Documentation quality matches enterprise standards.
Restructured the ngx-pinch-zoom library following Angular best practices:
**Architecture Changes:**
1. **Models Layer** (new):
- zoom-config.model.ts - Configuration interfaces for zoom behavior
- transform-state.model.ts - Transform state and metadata interfaces
- brightness-state.model.ts - Brightness configuration and state
- click-to-zoom.model.ts - Click-to-zoom configuration and events
- All models exported via barrel file for clean imports
2. **Services Layer** (new):
- BrightnessService (@Injectable)
* Signal-based reactive brightness state management
* Computed state with atMin/atMax bounds checking
* Increase/decrease/setValue/reset methods
* Configuration management with min/max/step
- ZoomStateService (@Injectable)
* Signal-based reactive zoom/transform state management
* Computed extended state with isZoomedIn, atMaxScale, atMinScale
* Transform state updates and limit management
* Exposes readonly signals for reactive consumption
3. **Components Layer** (refactored):
- ZoomControlsComponent (dumb/presentational)
* Pure component with no business logic
* Input: isZoomedIn signal
* Output: toggle event
* Accessibility: ARIA labels, keyboard support
- BrightnessControlsComponent (dumb/presentational)
* Pure component with no business logic
* Inputs: atMin, atMax signals
* Outputs: increase, decrease events
* Accessibility: ARIA labels, keyboard support
- PinchZoomComponent (smart/container)
* Orchestrates services and child components
* Injects BrightnessService and ZoomStateService
* Delegates brightness logic to BrightnessService
* Uses child components for UI rendering
* Effects for reactive state synchronization
**Benefits:**
✅ Separation of Concerns - Clear boundaries between presentation and business logic
✅ Testability - Services can be unit tested in isolation, components easily mocked
✅ Reusability - Services and dumb components can be reused across the application
✅ Type Safety - Strong TypeScript interfaces throughout all layers
✅ Reactive Patterns - Signal-based state with computed values
✅ Maintainability - Easier to locate and fix bugs, simpler to add features
✅ Angular Best Practices - Dependency injection, smart/dumb pattern, service layer
**Technical Details:**
- Smart/Dumb component pattern for better separation of concerns
- Dependency Injection for all services (scoped to component instance)
- Signal-based reactive state management (Angular 20+)
- Effects for state synchronization and side effects
- Computed signals for derived state
- Barrel exports for clean import paths
- Backward compatible - all existing interfaces preserved
- Bundle size: 272.62 kB (minimal increase of ~6 kB for architecture improvements)
**Files Changed:**
- Modified: pinch-zoom.component.ts (refactored to use services)
- Modified: pinch-zoom.component.html (uses child components)
- Modified: public-api.ts (exports new models, services, components)
- Added: 4 model files + index
- Added: 2 service files + index
- Added: 2 component files + index
All builds passing (app + library). No breaking changes to public API.
Add real-world implementation example of click-to-zoom feature to maintainer documentation:
**IMPLEMENTATION_GUIDE.md:**
- Complete step-by-step implementation guide showing how click-to-zoom was added
- Explains each component (input signals, IvyPinch method, template, CSS)
- Includes code snippets from actual implementation
- Shows real-world usage for anomaly detection use case
- Provides testing checklist
**docs/README.md:**
- Added click-to-zoom to "Where do I find...?" quick reference table
- Added to "How do I...?" task guide
- Helps maintainers quickly locate click-to-zoom documentation
This serves as a template for future feature additions and helps maintainers understand how to add similar interactive features to the library.
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
Add comprehensive brightness control feature with the following capabilities:
- Input signals for configuration (enableBrightnessControl, brightnessStep, minBrightness, maxBrightness)
- brightnessChanged output signal for reactive updates
- brightnessIn() and brightnessOut() methods for adjusting brightness
- resetBrightness() method to restore default value
- UI controls positioned at bottom center alongside zoom controls
- Keyboard accessibility (Enter/Space) and ARIA labels
- Visual feedback with disabled states at min/max brightness
- CSS brightness filter applied via reactive effect
Added complete documentation suite for library maintainers:
Documentation Files:
- docs/README.md - Documentation index and learning paths
- docs/QUICK_REFERENCE.md - Fast lookup guide with code locations
- docs/ARCHITECTURE.md - Deep technical dive into system design
- docs/IMPLEMENTATION_GUIDE.md - Step-by-step examples for features/fixes
Enhanced Code Readability:
- ivypinch.improved.ts - Heavily commented reference version
- 800+ lines of inline documentation
- Section-organized code structure
- Mathematical formulas explained
- Every state variable documented
- Method purposes and algorithms detailed
Documentation Coverage:
✅ Component architecture and data flow
✅ Signal-based reactivity patterns
✅ Transform mathematics with formulas
✅ Touch gesture detection algorithms
✅ Event system and state machines
✅ Constraint system (zoom/pan limits)
✅ Performance optimization techniques
✅ Common bug fixes with solutions
✅ Feature implementation examples
✅ Debugging techniques and tools
✅ Testing strategies
This documentation enables new maintainers to:
- Understand how the library works internally
- Add new features following established patterns
- Fix bugs efficiently with debugging guides
- Optimize performance with best practices
- Navigate the codebase quickly
For maintainers: Start with docs/README.md for learning paths
