PHPackages solution-forest/filament-panzoom - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. solution-forest/filament-panzoom ActiveLibrary[Utility & Helpers](/categories/utility) solution-forest/filament-panzoom ================================ This is my package filament-panzoom v1.4.5(8mo ago)85.1k↓92.4%2[4 PRs](https://github.com/solutionforest/filament-panzoom/pulls)MITPHPPHP ^8.3CI passing Since Aug 19Pushed 1mo agoCompare [ Source](https://github.com/solutionforest/filament-panzoom)[ Packagist](https://packagist.org/packages/solution-forest/filament-panzoom)[ Docs](https://github.com/solutionforest/filament-panzoom)[ GitHub Sponsors](https://github.com/SolutionForest)[ RSS](/packages/solution-forest-filament-panzoom/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (12)Versions (21)Used By (0) Filament Pan & Zoom ======================= [](#filament-pan--zoom) [![filament-panzoom](https://private-user-images.githubusercontent.com/146152931/479917506-f1724153-4344-4579-be41-d9e65de612c1.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQxOTAyODgsIm5iZiI6MTc3NDE4OTk4OCwicGF0aCI6Ii8xNDYxNTI5MzEvNDc5OTE3NTA2LWYxNzI0MTUzLTQzNDQtNDU3OS1iZTQxLWQ5ZTY1ZGU2MTJjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyMlQxNDMzMDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYjBkMjhlNzM1MTc1YjcwOGIyY2EwYTQ2NjkxMTI0OTcxZDI2YTQxYzdmMTZjM2I0NTBkNzA5MTE0NDA0NGEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.UyFmc6CP_mS-oFxEpjQh_dE0u8cWlQYnptjrv9x6OIs)](https://private-user-images.githubusercontent.com/146152931/479917506-f1724153-4344-4579-be41-d9e65de612c1.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQxOTAyODgsIm5iZiI6MTc3NDE4OTk4OCwicGF0aCI6Ii8xNDYxNTI5MzEvNDc5OTE3NTA2LWYxNzI0MTUzLTQzNDQtNDU3OS1iZTQxLWQ5ZTY1ZGU2MTJjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyMlQxNDMzMDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYjBkMjhlNzM1MTc1YjcwOGIyY2EwYTQ2NjkxMTI0OTcxZDI2YTQxYzdmMTZjM2I0NTBkNzA5MTE0NDA0NGEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.UyFmc6CP_mS-oFxEpjQh_dE0u8cWlQYnptjrv9x6OIs) [![Latest Version on Packagist](https://camo.githubusercontent.com/c0038573e2587e334cd7833a1b939cd4ae6232d29bfc4a2c0dcb06d9e14aa465/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736f6c7574696f6e2d666f726573742f66696c616d656e742d70616e7a6f6f6d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/solution-forest/filament-panzoom)[![GitHub Tests Action Status](https://camo.githubusercontent.com/5ebc9e4fa6eea63f7dea3e7b1e541b20865786262554a1cfe539ac09b2d0f920/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f736f6c7574696f6e666f726573742f66696c616d656e742d70616e7a6f6f6d2f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/solutionforest/filament-panzoom/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/4703dec0fba80ca05190d8f3ef6164a88b2e1965e20d98ec04ab926be46a6469/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f736f6c7574696f6e666f726573742f66696c616d656e742d70616e7a6f6f6d2f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/solutionforest/filament-panzoom/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/c94711ca394bc73d565772ec815a42d09fdc65d692d2a9c9a31baa1d217cc869/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736f6c7574696f6e2d666f726573742f66696c616d656e742d70616e7a6f6f6d2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/solution-forest/filament-panzoom) An interactive image zoom and pan component for Filament PHP. This package provides a beautiful, responsive image viewer with smooth zoom and pan functionality, perfect for viewing receipts, documents, or any images that require detailed inspection. **Features:** - πŸ” Mouse wheel zooming - πŸ–±οΈ Click and drag panning - πŸ–±οΈ Double-click zoom to position (configurable level) - πŸ“± Touch support for mobile devices - ⚑ Smooth transitions and animations - 🎯 Zoom in/out buttons - πŸ”„ Reset view functionality - πŸ“Š Real-time zoom percentage display - 🎨 Modern, clean UI design Filament.PanZoom.Plugin.Video.mov Requirements ------------ [](#requirements) - PHP 8.3+ - Laravel 10.0+ - Filament 3.3+ or 4.0+ Installation ------------ [](#installation) You can install the package via composer: ``` composer require solution-forest/filament-panzoom ``` ### Register the Plugin [](#register-the-plugin) Add the plugin to your Filament Panel Provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`): ``` use SolutionForest\FilamentPanzoom\FilamentPanzoomPlugin; public function panel(Panel $panel): Panel { return $panel ->default() ->id('admin') ->path('admin') // ... other configuration ->plugins([ FilamentPanzoomPlugin::make(), // ... other plugins ]); } ``` ### Optional: Publish Assets [](#optional-publish-assets) Optionally, you can publish the views for customization: ``` php artisan vendor:publish --tag="filament-panzoom-views" ``` You can also publish the config file: ``` php artisan vendor:publish --tag="filament-panzoom-config" ``` Usage ----- [](#usage) ### Filament Version Compatibility [](#filament-version-compatibility) This package supports both **Filament 3.0+** and **Filament 4.0+** with automatic compatibility detection. #### Filament 3.0+ (Legacy) [](#filament-30-legacy) ``` // Forms, Actions & Tables use SolutionForest\FilamentPanzoom\Components\PanZoom; public static function form(Form $form): Form { return $form->schema([ PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->label('Image Preview') ->columnSpanFull(), ]); } // Infolists use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry; public function infolist(Infolist $infolist): Infolist { return $infolist->schema([ PanZoomEntry::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->label('Image Preview'), ]); } ``` #### Filament 4.0+ (Current) [](#filament-40-current) ``` // Forms - Uses Schemas use SolutionForest\FilamentPanzoom\Components\PanZoom; public static function configure(Schema $schema): Schema { return $schema->components([ PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url), // Note: label() and columnSpanFull() methods not available in 4.0+ ]); } // Infolists - Uses Schemas use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry; public static function configure(Schema $schema): Schema { return $schema->components([ PanZoomEntry::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url), ]); } ``` ### Configurable Double-Click Zoom [](#configurable-double-click-zoom) You can customize the double-click zoom level for each component. Double-clicking again will return the image to the original fit-to-container view: ``` // Filament 3.0+ Forms PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->doubleClickZoomLevel(2.5) // Zoom to 2.5x instead of default 3x ->label('Image Preview'); // Filament 4.0+ Forms PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->doubleClickZoomLevel(4.0) // Zoom to 4x for more detail ->columnSpanFull(); // Infolists (both 3.0+ and 4.0+) PanZoomEntry::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->doubleClickZoomLevel(2.0) // Zoom to 2x ->imageId(fn ($record) => 'image-' . $record->id); ``` **Available Zoom Levels:** - **Range**: 0.5x to 5.0x - **Default**: 3.0x (good balance for detail viewing) - **Common values**: - `2.0` - Moderate zoom - `2.5` - Balanced zoom - `3.0` - Default (detailed view) - `4.0` - High zoom - `5.0` - Maximum zoom ### In Blade Views [](#in-blade-views) You can use the component directly in any Blade view (works in both 3.0+ and 4.0+): ``` @include('filament-panzoom::filament-panzoom', [ 'imageUrl' => 'https://example.com/image.jpg', 'imageId' => 'unique-image-id', 'doubleClickZoomLevel' => 2.5 // Custom zoom level (double-click again to return to fit) ]) ``` ### Component Selection Guide [](#component-selection-guide) **⚠️ Important: Choose the correct component for your context!** ContextComponentImportForms (3.0+)`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Forms (4.0+)`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Actions`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Tables`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Infolists (3.0+)`PanZoomEntry``use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry;`Infolists (4.0+)`PanZoomEntry``use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry;`> **Why two components?** Filament has separate component hierarchies for Forms and Infolists. Using the wrong one will cause a TypeError. ### Key Differences: Filament 3.0+ vs 4.0+ [](#key-differences-filament-30-vs-40) FeatureFilament 3.0+Filament 4.0+**Forms Structure**`form(Form $form): Form``configure(Schema $schema): Schema`**Infolists Structure**`infolist(Infolist $infolist): Infolist``configure(Schema $schema): Schema`**Available Methods**`label()`, `columnSpanFull()`, etc.Limited methods (Schemas-based)**Component Base**`Filament\Forms\Components\Component``Filament\Schemas\Components\Component`**Auto-detection**βœ… Yesβœ… Yes### Usage Examples [](#usage-examples) #### Filament 3.0+ Examples [](#filament-30-examples) **In Forms:** ``` public static function form(Form $form): Form { return $form->schema([ PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url) ->label('Image Preview') ->columnSpanFull(), ]); } ``` **In Infolists:** ``` use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry; public function infolist(Infolist $infolist): Infolist { return $infolist->schema([ PanZoomEntry::make('receipt_image') ->imageUrl(fn ($record) => asset('storage/' . $record->image_path)) ->label('Receipt Image') ->imageId(fn ($record) => 'receipt-' . $record->id), ]); } ``` **In Table Actions:** ``` public static function table(Table $table): Table { return $table->actions([ Action::make('viewImage') ->form([ PanZoom::make('image_viewer') ->imageUrl(fn ($record) => $record->image_url) ->label('Image Viewer'), ]) ]); } ``` **In Custom Pages:** ``` protected function getFormSchema(): array { return [ PanZoom::make('document_viewer') ->imageUrl($this->imageUrl) ->label('Document Viewer') ->columnSpanFull(), ]; } ``` #### Filament 4.0+ Examples [](#filament-40-examples) **In Forms (Schemas):** ``` public static function configure(Schema $schema): Schema { return $schema->components([ PanZoom::make('image_preview') ->imageUrl(fn ($record) => $record?->image_url), // Note: label() and columnSpanFull() methods not available in 4.0+ ]); } ``` **In Infolists (Schemas):** ``` use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry; public static function configure(Schema $schema): Schema { return $schema->components([ PanZoomEntry::make('receipt_image') ->imageUrl(fn ($record) => asset('storage/' . $record->image_path)) ->imageId(fn ($record) => 'receipt-' . $record->id), ]); } ``` **In Table Actions:** ``` public static function table(Table $table): Table { return $table->actions([ Action::make('viewImage') ->form([ PanZoom::make('image_viewer') ->imageUrl(fn ($record) => $record->image_url), ]) ]); } ``` **In Custom Pages:** ``` protected function getFormSchema(): array { return [ PanZoom::make('document_viewer') ->imageUrl($this->imageUrl), // Note: columnSpanFull() method not available in 4.0+ ]; } ``` Component Properties -------------------- [](#component-properties) The component accepts the following properties: PropertyTypeRequiredDescription`imageUrl`stringYesThe URL of the image to display`imageId`stringYesUnique identifier for the component instance`doubleClickZoomLevel`floatNoZoom level for double-click (0.5-5.0, default: 3.0)Quick Tips ---------- [](#quick-tips) πŸ’‘ **Pro Tip**: Double-click anywhere on the image to zoom to that exact position (configurable, default 3x). Double-click again to return to fit. Features -------- [](#features) ### Zoom Controls [](#zoom-controls) - **Mouse Wheel**: Scroll to zoom in/out - **Double-Click**: Double-click to zoom to exact position (configurable level, default: 3x). Double-click again to return to fit. - **Zoom Buttons**: Click the + and - buttons in the control panel - **Zoom Range**: 0.5x to 5x magnification ### Pan Controls [](#pan-controls) - **Mouse Drag**: Click and drag to pan around the image - **Touch Support**: Touch and drag on mobile devices ### Reset View [](#reset-view) - **Reset Button**: Click the reset button to return to the original view - **Auto-fit**: Images are automatically fitted to the container on load ### Visual Feedback [](#visual-feedback) - **Zoom Percentage**: Real-time zoom level display - **Cursor States**: Visual feedback for grabbable/grabbing states - **Smooth Transitions**: Animated zoom and pan movements Styling ------- [](#styling) The component uses Tailwind CSS classes and is designed to work seamlessly with Filament's design system. The component is fully responsive and includes: - Modern, clean interface - Smooth hover effects - Mobile-friendly touch controls - Consistent with Filament's design patterns Troubleshooting --------------- [](#troubleshooting) ### Common Issues [](#common-issues) **TypeError: Argument #1 ($component) must be of type Filament\\Infolists\\Components\\Component** - ❌ You're using `PanZoom` in an Infolist - βœ… Use `PanZoomEntry` for Infolists instead **TypeError: Argument #1 ($component) must be of type Filament\\Forms\\Components\\Component** - ❌ You're using `PanZoomEntry` in a Form/Action - βœ… Use `PanZoom` for Forms/Actions instead **Fatal Error: Class was composed with trait conflicts** - βœ… Fixed in v1.2.1+ - update your package **Method not found: label() or columnSpanFull() in Filament 4.0+** - ❌ These methods aren't available in Filament 4.0+ Schemas - βœ… Remove these method calls or use Filament 3.0+ syntax **Undefined type 'Filament\\Schemas\\Components\\Component'** - ❌ Linter error in Filament 3.0+ environment - βœ… This is expected - the package uses runtime detection for compatibility ### Version-Specific Issues [](#version-specific-issues) #### Filament 3.0+ [](#filament-30) - βœ… All methods available (`label()`, `columnSpanFull()`, etc.) - βœ… Traditional Forms/Infolists structure #### Filament 4.0+ [](#filament-40) - ⚠️ Limited methods available (Schemas-based) - ⚠️ Different structure (`configure(Schema $schema)`) - βœ… Automatic compatibility detection ### Quick Reference [](#quick-reference) ContextComponentImportForms (3.0+)`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Forms (4.0+)`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Actions`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Tables`PanZoom``use SolutionForest\FilamentPanzoom\Components\PanZoom;`Infolists (3.0+)`PanZoomEntry``use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry;`Infolists (4.0+)`PanZoomEntry``use SolutionForest\FilamentPanzoom\Infolists\Components\PanZoomEntry;`Browser Support --------------- [](#browser-support) - Chrome 70+ - Firefox 65+ - Safari 12+ - Edge 79+ Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [SolutionForest Team](https://github.com/solutionforest) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 50 β€” FairBetter than 95% of packages Maintenance82 Actively maintained with recent releases Popularity32 Limited adoption so far Community13 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 16 Last Release 248d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9499120912b47a170291b3b795ea0255f060d8500bd2988535e4e6faccee5c8d?d=identicon)[solutionforest](/maintainers/solutionforest) --- Top Contributors [![Jackylwl](https://avatars.githubusercontent.com/u/146152931?v=4)](https://github.com/Jackylwl "Jackylwl (14 commits)")[![lam0819](https://avatars.githubusercontent.com/u/68211972?v=4)](https://github.com/lam0819 "lam0819 (9 commits)")[![carlosmaiello](https://avatars.githubusercontent.com/u/3230041?v=4)](https://github.com/carlosmaiello "carlosmaiello (3 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags laravelsolutionforestfilament-panzoom ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/solution-forest-filament-panzoom/health.svg) ``` [![Health](https://phpackages.com/badges/solution-forest-filament-panzoom/health.svg)](https://phpackages.com/packages/solution-forest-filament-panzoom) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)