{"id":30764676,"url":"https://github.com/solutionforest/filament-panzoom","last_synced_at":"2025-09-04T17:12:16.495Z","repository":{"id":310779164,"uuid":"1040629411","full_name":"solutionforest/filament-panzoom","owner":"solutionforest","description":"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.","archived":false,"fork":false,"pushed_at":"2025-09-03T05:46:42.000Z","size":117,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-03T07:26:51.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solutionforest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"SolutionForest"}},"created_at":"2025-08-19T09:13:46.000Z","updated_at":"2025-09-03T05:44:36.000Z","dependencies_parsed_at":"2025-08-22T01:17:49.953Z","dependency_job_id":null,"html_url":"https://github.com/solutionforest/filament-panzoom","commit_stats":null,"previous_names":["solutionforest/filament-panzoom"],"tags_count":16,"template":false,"template_full_name":"filamentphp/plugin-skeleton","purl":"pkg:github/solutionforest/filament-panzoom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-panzoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-panzoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-panzoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-panzoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solutionforest","download_url":"https://codeload.github.com/solutionforest/filament-panzoom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solutionforest%2Ffilament-panzoom/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273461423,"owners_count":25109917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-04T17:12:13.361Z","updated_at":"2025-09-04T17:12:16.485Z","avatar_url":"https://github.com/solutionforest.png","language":"PHP","funding_links":["https://github.com/sponsors/SolutionForest"],"categories":[],"sub_categories":[],"readme":"# Filament Pan \u0026 Zoom\n![filament-panzoom](https://github.com/user-attachments/assets/f1724153-4344-4579-be41-d9e65de612c1)\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/solution-forest/filament-panzoom.svg?style=flat-square)](https://packagist.org/packages/solution-forest/filament-panzoom)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/solutionforest/filament-panzoom/run-tests.yml?branch=main\u0026label=tests\u0026style=flat-square)](https://github.com/solutionforest/filament-panzoom/actions?query=workflow%3Arun-tests+branch%3Amain)\n[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/solutionforest/filament-panzoom/fix-php-code-style-issues.yml?branch=main\u0026label=code%20style\u0026style=flat-square)](https://github.com/solutionforest/filament-panzoom/actions?query=workflow%3A\"Fix+PHP+code+styling\"+branch%3Amain)\n[![Total Downloads](https://img.shields.io/packagist/dt/solution-forest/filament-panzoom.svg?style=flat-square)](https://packagist.org/packages/solution-forest/filament-panzoom)\n\nAn 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.\n\n**Features:**\n- 🔍 Mouse wheel zooming\n- 🖱️ Click and drag panning\n- 🖱️ Double-click zoom to position (configurable level)\n- 📱 Touch support for mobile devices\n- ⚡ Smooth transitions and animations\n- 🎯 Zoom in/out buttons\n- 🔄 Reset view functionality\n- 📊 Real-time zoom percentage display\n- 🎨 Modern, clean UI design\n\n\nhttps://github.com/user-attachments/assets/a62bb402-cf1c-497b-a3f3-509819db6926\n\n\n## Requirements\n\n- PHP 8.3+\n- Laravel 10.0+\n- Filament 3.3+ or 4.0+\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require solution-forest/filament-panzoom\n```\n\n### Register the Plugin\n\nAdd the plugin to your Filament Panel Provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`):\n\n```php\nuse SolutionForest\\FilamentPanzoom\\FilamentPanzoomPlugin;\n\npublic function panel(Panel $panel): Panel\n{\n    return $panel\n        -\u003edefault()\n        -\u003eid('admin')\n        -\u003epath('admin')\n        // ... other configuration\n        -\u003eplugins([\n            FilamentPanzoomPlugin::make(),\n            // ... other plugins\n        ]);\n}\n```\n\n### Optional: Publish Assets\n\nOptionally, you can publish the views for customization:\n\n```bash\nphp artisan vendor:publish --tag=\"filament-panzoom-views\"\n```\n\nYou can also publish the config file:\n\n```bash\nphp artisan vendor:publish --tag=\"filament-panzoom-config\"\n```\n\n## Usage\n\n### Filament Version Compatibility\n\nThis package supports both **Filament 3.0+** and **Filament 4.0+** with automatic compatibility detection.\n\n#### Filament 3.0+ (Legacy)\n```php\n// Forms, Actions \u0026 Tables\nuse SolutionForest\\FilamentPanzoom\\Components\\PanZoom;\n\npublic static function form(Form $form): Form\n{\n    return $form-\u003eschema([\n        PanZoom::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n            -\u003elabel('Image Preview')\n            -\u003ecolumnSpanFull(),\n    ]);\n}\n\n// Infolists\nuse SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;\n\npublic function infolist(Infolist $infolist): Infolist\n{\n    return $infolist-\u003eschema([\n        PanZoomEntry::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n            -\u003elabel('Image Preview'),\n    ]);\n}\n```\n\n#### Filament 4.0+ (Current)\n```php\n// Forms - Uses Schemas\nuse SolutionForest\\FilamentPanzoom\\Components\\PanZoom;\n\npublic static function configure(Schema $schema): Schema\n{\n    return $schema-\u003ecomponents([\n        PanZoom::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url),\n        // Note: label() and columnSpanFull() methods not available in 4.0+\n    ]);\n}\n\n// Infolists - Uses Schemas\nuse SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;\n\npublic static function configure(Schema $schema): Schema\n{\n    return $schema-\u003ecomponents([\n        PanZoomEntry::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url),\n    ]);\n}\n```\n\n### Configurable Double-Click Zoom\n\nYou can customize the double-click zoom level for each component. Double-clicking again will return the image to the original fit-to-container view:\n\n```php\n// Filament 3.0+ Forms\nPanZoom::make('image_preview')\n    -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n    -\u003edoubleClickZoomLevel(2.5)  // Zoom to 2.5x instead of default 3x\n    -\u003elabel('Image Preview');\n\n// Filament 4.0+ Forms\nPanZoom::make('image_preview')\n    -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n    -\u003edoubleClickZoomLevel(4.0)  // Zoom to 4x for more detail\n    -\u003ecolumnSpanFull();\n\n// Infolists (both 3.0+ and 4.0+)\nPanZoomEntry::make('image_preview')\n    -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n    -\u003edoubleClickZoomLevel(2.0)  // Zoom to 2x\n    -\u003eimageId(fn ($record) =\u003e 'image-' . $record-\u003eid);\n```\n\n**Available Zoom Levels:**\n- **Range**: 0.5x to 5.0x\n- **Default**: 3.0x (good balance for detail viewing)\n- **Common values**:\n  - `2.0` - Moderate zoom\n  - `2.5` - Balanced zoom  \n  - `3.0` - Default (detailed view)\n  - `4.0` - High zoom\n  - `5.0` - Maximum zoom\n\n### In Blade Views\n\nYou can use the component directly in any Blade view (works in both 3.0+ and 4.0+):\n\n```blade\n@include('filament-panzoom::filament-panzoom', [\n    'imageUrl' =\u003e 'https://example.com/image.jpg',\n    'imageId' =\u003e 'unique-image-id',\n    'doubleClickZoomLevel' =\u003e 2.5  // Custom zoom level (double-click again to return to fit)\n])\n```\n\n### Component Selection Guide\n\n**⚠️ Important: Choose the correct component for your context!**\n\n| Context | Component | Import |\n|---------|-----------|--------|\n| Forms (3.0+) | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Forms (4.0+) | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Actions | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Tables | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Infolists (3.0+) | `PanZoomEntry` | `use SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;` |\n| Infolists (4.0+) | `PanZoomEntry` | `use SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;` |\n\n\u003e **Why two components?** Filament has separate component hierarchies for Forms and Infolists. Using the wrong one will cause a TypeError.\n\n### Key Differences: Filament 3.0+ vs 4.0+\n\n| Feature | Filament 3.0+ | Filament 4.0+ |\n|---------|---------------|---------------|\n| **Forms Structure** | `form(Form $form): Form` | `configure(Schema $schema): Schema` |\n| **Infolists Structure** | `infolist(Infolist $infolist): Infolist` | `configure(Schema $schema): Schema` |\n| **Available Methods** | `label()`, `columnSpanFull()`, etc. | Limited methods (Schemas-based) |\n| **Component Base** | `Filament\\Forms\\Components\\Component` | `Filament\\Schemas\\Components\\Component` |\n| **Auto-detection** | ✅ Yes | ✅ Yes |\n\n### Usage Examples\n\n#### Filament 3.0+ Examples\n\n**In Forms:**\n```php\npublic static function form(Form $form): Form\n{\n    return $form-\u003eschema([\n        PanZoom::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url)\n            -\u003elabel('Image Preview')\n            -\u003ecolumnSpanFull(),\n    ]);\n}\n```\n\n**In Infolists:**\n```php\nuse SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;\n\npublic function infolist(Infolist $infolist): Infolist\n{\n    return $infolist-\u003eschema([\n        PanZoomEntry::make('receipt_image')\n            -\u003eimageUrl(fn ($record) =\u003e asset('storage/' . $record-\u003eimage_path))\n            -\u003elabel('Receipt Image')\n            -\u003eimageId(fn ($record) =\u003e 'receipt-' . $record-\u003eid),\n    ]);\n}\n```\n\n**In Table Actions:**\n```php\npublic static function table(Table $table): Table\n{\n    return $table-\u003eactions([\n        Action::make('viewImage')\n            -\u003eform([\n                PanZoom::make('image_viewer')\n                    -\u003eimageUrl(fn ($record) =\u003e $record-\u003eimage_url)\n                    -\u003elabel('Image Viewer'),\n            ])\n    ]);\n}\n```\n\n**In Custom Pages:**\n```php\nprotected function getFormSchema(): array\n{\n    return [\n        PanZoom::make('document_viewer')\n            -\u003eimageUrl($this-\u003eimageUrl)\n            -\u003elabel('Document Viewer')\n            -\u003ecolumnSpanFull(),\n    ];\n}\n```\n\n#### Filament 4.0+ Examples\n\n**In Forms (Schemas):**\n```php\npublic static function configure(Schema $schema): Schema\n{\n    return $schema-\u003ecomponents([\n        PanZoom::make('image_preview')\n            -\u003eimageUrl(fn ($record) =\u003e $record?-\u003eimage_url),\n        // Note: label() and columnSpanFull() methods not available in 4.0+\n    ]);\n}\n```\n\n**In Infolists (Schemas):**\n```php\nuse SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;\n\npublic static function configure(Schema $schema): Schema\n{\n    return $schema-\u003ecomponents([\n        PanZoomEntry::make('receipt_image')\n            -\u003eimageUrl(fn ($record) =\u003e asset('storage/' . $record-\u003eimage_path))\n            -\u003eimageId(fn ($record) =\u003e 'receipt-' . $record-\u003eid),\n    ]);\n}\n```\n\n**In Table Actions:**\n```php\npublic static function table(Table $table): Table\n{\n    return $table-\u003eactions([\n        Action::make('viewImage')\n            -\u003eform([\n                PanZoom::make('image_viewer')\n                    -\u003eimageUrl(fn ($record) =\u003e $record-\u003eimage_url),\n            ])\n    ]);\n}\n```\n\n**In Custom Pages:**\n```php\nprotected function getFormSchema(): array\n{\n    return [\n        PanZoom::make('document_viewer')\n            -\u003eimageUrl($this-\u003eimageUrl),\n        // Note: columnSpanFull() method not available in 4.0+\n    ];\n}\n```\n\n## Component Properties\n\nThe component accepts the following properties:\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `imageUrl` | string | Yes | The URL of the image to display |\n| `imageId` | string | Yes | Unique identifier for the component instance |\n| `doubleClickZoomLevel` | float | No | Zoom level for double-click (0.5-5.0, default: 3.0) |\n\n## Quick Tips\n\n💡 **Pro Tip**: Double-click anywhere on the image to zoom to that exact position (configurable, default 3x). Double-click again to return to fit.\n\n## Features\n\n### Zoom Controls\n- **Mouse Wheel**: Scroll to zoom in/out\n- **Double-Click**: Double-click to zoom to exact position (configurable level, default: 3x). Double-click again to return to fit.\n- **Zoom Buttons**: Click the + and - buttons in the control panel\n- **Zoom Range**: 0.5x to 5x magnification\n\n### Pan Controls\n- **Mouse Drag**: Click and drag to pan around the image\n- **Touch Support**: Touch and drag on mobile devices\n\n### Reset View\n- **Reset Button**: Click the reset button to return to the original view\n- **Auto-fit**: Images are automatically fitted to the container on load\n\n### Visual Feedback\n- **Zoom Percentage**: Real-time zoom level display\n- **Cursor States**: Visual feedback for grabbable/grabbing states\n- **Smooth Transitions**: Animated zoom and pan movements\n\n## Styling\n\nThe component uses Tailwind CSS classes and is designed to work seamlessly with Filament's design system. The component is fully responsive and includes:\n\n- Modern, clean interface\n- Smooth hover effects\n- Mobile-friendly touch controls\n- Consistent with Filament's design patterns\n\n## Troubleshooting\n\n### Common Issues\n\n**TypeError: Argument #1 ($component) must be of type Filament\\Infolists\\Components\\Component**\n- ❌ You're using `PanZoom` in an Infolist\n- ✅ Use `PanZoomEntry` for Infolists instead\n\n**TypeError: Argument #1 ($component) must be of type Filament\\Forms\\Components\\Component**  \n- ❌ You're using `PanZoomEntry` in a Form/Action\n- ✅ Use `PanZoom` for Forms/Actions instead\n\n**Fatal Error: Class was composed with trait conflicts**\n- ✅ Fixed in v1.2.1+ - update your package\n\n**Method not found: label() or columnSpanFull() in Filament 4.0+**\n- ❌ These methods aren't available in Filament 4.0+ Schemas\n- ✅ Remove these method calls or use Filament 3.0+ syntax\n\n**Undefined type 'Filament\\Schemas\\Components\\Component'**\n- ❌ Linter error in Filament 3.0+ environment\n- ✅ This is expected - the package uses runtime detection for compatibility\n\n### Version-Specific Issues\n\n#### Filament 3.0+\n- ✅ All methods available (`label()`, `columnSpanFull()`, etc.)\n- ✅ Traditional Forms/Infolists structure\n\n#### Filament 4.0+\n- ⚠️ Limited methods available (Schemas-based)\n- ⚠️ Different structure (`configure(Schema $schema)`)\n- ✅ Automatic compatibility detection\n\n### Quick Reference\n\n| Context | Component | Import |\n|---------|-----------|--------|\n| Forms (3.0+) | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Forms (4.0+) | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Actions | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Tables | `PanZoom` | `use SolutionForest\\FilamentPanzoom\\Components\\PanZoom;` |\n| Infolists (3.0+) | `PanZoomEntry` | `use SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;` |\n| Infolists (4.0+) | `PanZoomEntry` | `use SolutionForest\\FilamentPanzoom\\Infolists\\Components\\PanZoomEntry;` |\n\n## Browser Support\n\n- Chrome 70+\n- Firefox 65+\n- Safari 12+\n- Edge 79+\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [SolutionForest Team](https://github.com/solutionforest)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolutionforest%2Ffilament-panzoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolutionforest%2Ffilament-panzoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolutionforest%2Ffilament-panzoom/lists"}