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. solution-forest/filament-panzoom

ActiveLibrary

solution-forest/filament-panzoom
================================

This is my package filament-panzoom

v1.4.5(6mo ago)85.1k↓92.4%2[1 issues](https://github.com/solutionforest/filament-panzoom/issues)[4 PRs](https://github.com/solutionforest/filament-panzoom/pulls)MITPHPPHP ^8.3CI passing

Since Aug 19Pushed 5d 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 today

READMEChangelog (3)Dependencies (12)Versions (21)Used By (0)

Filament Pan &amp; Zoom
=======================

[](#filament-pan--zoom)

[![filament-panzoom](https://private-user-images.githubusercontent.com/146152931/479917506-f1724153-4344-4579-be41-d9e65de612c1.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQxNzI0MTcsIm5iZiI6MTc3NDE3MjExNywicGF0aCI6Ii8xNDYxNTI5MzEvNDc5OTE3NTA2LWYxNzI0MTUzLTQzNDQtNDU3OS1iZTQxLWQ5ZTY1ZGU2MTJjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyMlQwOTM1MTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00OTkyMWIyOWMyMGM4YjEwZTVmZDI3NzM4YzQ4YTUxZDE1MzBkMWUyMmRmNDNmYzk2NzkxOTNiYmY2YzI5MzI1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.4NnuTeDNXCITpD2H8YQlK7ermeRhsrU6-_bLeyo5c18)](https://private-user-images.githubusercontent.com/146152931/479917506-f1724153-4344-4579-be41-d9e65de612c1.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQxNzI0MTcsIm5iZiI6MTc3NDE3MjExNywicGF0aCI6Ii8xNDYxNTI5MzEvNDc5OTE3NTA2LWYxNzI0MTUzLTQzNDQtNDU3OS1iZTQxLWQ5ZTY1ZGU2MTJjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzIyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyMlQwOTM1MTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00OTkyMWIyOWMyMGM4YjEwZTVmZDI3NzM4YzQ4YTUxZDE1MzBkMWUyMmRmNDNmYzk2NzkxOTNiYmY2YzI5MzI1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.4NnuTeDNXCITpD2H8YQlK7ermeRhsrU6-_bLeyo5c18)

[![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 96% 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

200d 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

[solution-forest/filament-simplelightbox

This is my package filament-simplelightbox

6275.4k1](/packages/solution-forest-filament-simplelightbox)[stephenjude/filament-blog

Filament Blog Builder

20316.9k](/packages/stephenjude-filament-blog)[solutionforest/filamentloginscreen

This is my package filamentloginscreen

302.6k](/packages/solutionforest-filamentloginscreen)[solution-forest/filament-field-group

Filament Field Group is a powerful Laravel package that enhances Filament's form building capabilities. It allows you to easily group and organize form fields, improving the structure and readability of your forms.

291.6k2](/packages/solution-forest-filament-field-group)[awcodes/filament-addons

A set of components / fields to extend Filament Admin.

3013.1k1](/packages/awcodes-filament-addons)[lara-zeus/tartarus

simple multi tenants

112.6k](/packages/lara-zeus-tartarus)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
