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 |