ngx-panster - A simple content panning/zooming library
NgxPanster is a simple Angular 17 content panning and zooming library.
Installation
npm install ngx-panster
DEMO
You can find a stackblitz demo here.
Usage
<button (click)="panster.zoomIn(25)">Zoom in</button>
<button (click)="panster.zoomOut(25)">Zoom out</button>
<button (click)="panster.centerContentTop()">Center top</button>
<button (click)="panster.centerContent()">Center</button>
<ngx-panster #panster>
<!-- CONTENT -->
</ngx-panster>
The library uses the Standalone API
import { NgxPansterComponent } from 'ngx-panster';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxPansterComponent],
templateUrl: './app.component.html',
})
export class AppComponent {}
NgxPansterComponent inputs
Name | Description |
---|---|
zoomPercentage: number | Sets the zoom of the content (good use case is with slider to determine the zoom) |
minZoom: number | The minimum zoom percentage allowed. Calling zoomOut will set the zoom to minZoom's value if the new value would be less than minZoom. Defaults to 10 |
maxZoom: number | The maximum zoom percentage allowed. Calling zoomOut will set the zoom to maxZoom's value if the new value would be greater than maxZoom. No default value |
zoomStep: number | Sets the default zoomIn/zoomOut value. Defaults to 25%. |
NgxPansterComponent methods
Method name | Description |
---|---|
zoomIn(percentage: number) | A method that receives a percentage (25 for 25%) and zooms the content in with the given percentage |
zoomOut(percentage: number) | A method that receives a percentage (25 for 25%) and zooms the content out with the given percentage |
centerContent() | A method that centers the content both vertically and horizontally |
centerContentTop() | A method that centers the content both horizontally and aligns it to the top |
centerElementPoint(x: number, y: number) | A method that receives pageX and pageY coordinates and centers them within the pan element. If the x and y coordinates are NOT within the pan element then this function does nothing. |
centerX() | A method that centers the content horizontally |
centerY() | A method that centers the content vertically |