### Basic Viewport Initialization and Plugin Activation (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This example shows a complete setup for pixi-viewport, including importing necessary modules, creating a PIXI Application, initializing the viewport with screen and world dimensions, and adding it to the stage. It also demonstrates activating common plugins like drag, pinch, wheel, and decelerate, and adding a simple sprite to the viewport.

```JavaScript
import * as PIXI from "pixi.js";
import { Viewport } from "pixi-viewport";

// or with require
// const PIXI = require('pixi.js')
// const Viewport = require('pixi-viewport').Viewport

const app = new PIXI.Application();
document.body.appendChild(app.view);

// create viewport
const viewport = new Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldWidth: 1000,
  worldHeight: 1000,
  events: app.renderer.events // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
});

// add the viewport to the stage
app.stage.addChild(viewport);

// activate plugins
viewport.drag().pinch().wheel().decelerate();

// add a red box
const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
sprite.tint = 0xff0000;
sprite.width = sprite.height = 100;
sprite.position.set(100, 100);
```

--------------------------------

### Initialize Flems Environment for PixiJS Viewport (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/index.html

Initializes the Flems interactive coding environment, attaching it to the document body. It configures Flems to load several local JavaScript files (e.g., `viewport.js`, `app.js`) and the PixiJS library from a CDN, setting up a complete demonstration of the PixiJS Viewport.

```javascript
async function flems() { Flems(document.body, { files: [ { name: 'viewport.js', content: await load('sample/viewport.js'), }, { name: 'app.js', content: await load('sample/app.js'), }, { name: 'target.js', content: await load('sample/target.js'), }, { name: 'stars.js', content: await load('sample/stars.js'), }, { name: 'random.js', content: await load('sample/random.js'), }, { name: 'viewport.min.js', type: 'script', content: await load('pixi_viewport.umd.cjs'), } ], links: [{ name: 'PIXI', url: 'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.1.2/pixi.min.js', }], console: false, }) } flems()
```

--------------------------------

### Basic HTML/Body Styling (CSS)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/index.html

Applies basic styling to the HTML and body elements, setting their width and height to 100% and removing default margins. This ensures the content fills the entire viewport.

```css
html, body { width: 100%; height: 100%; margin: 0; }
```

--------------------------------

### Installing pixi-viewport via Yarn (Bash)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This command demonstrates how to install the pixi-viewport library using the Yarn package manager. It adds the package as a dependency to your project.

```Bash
yarn add pixi-viewport
```

--------------------------------

### Installing pixi-viewport via npm (Bash)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This command demonstrates how to install the pixi-viewport library using the npm package manager. It adds the package as a dependency to your project.

```Bash
npm i pixi-viewport
```

--------------------------------

### Asynchronous File Loader (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/index.html

Defines an asynchronous utility function `load` that fetches content from a given URL and returns it as plain text. This is used to dynamically load JavaScript files for the Flems environment.

```javascript
async function load(name) { const response = await fetch(name) return await response.text() }
```

--------------------------------

### Defining IBounceState 'start' Property - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IBounceState.html

This property of the `IBounceState` interface defines the starting coordinate of the bounce animation along its axis. It is a numeric value.

```TypeScript
start: number
```

--------------------------------

### Define Snap Force Start Option - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/ISnapOptions.html

Defines an optional `forceStart` property. When set to `true`, the snap animation will begin immediately, even if the viewport is already at the target location. This ensures the snap always executes, regardless of current position.

```typescript
forceStart?: boolean
```

--------------------------------

### Defining IBounceState 'time' Property - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IBounceState.html

This property of the `IBounceState` interface represents the elapsed time in milliseconds since the bounce animation started. It is a numeric value.

```TypeScript
time: number
```

--------------------------------

### Get Event Names from PIXI Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Returns an array listing the names (strings or symbols) of all events for which the PIXI.Container's emitter has registered listeners.

```TypeScript
eventNames(): (string | symbol)[]
```

--------------------------------

### Removing a Plugin - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Removes an installed plugin from the viewport's plugin manager. Once removed, the plugin's functionality will no longer be active.

```TypeScript
remove(name: string): void
```

--------------------------------

### Retrieving Child by Index in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Returns the child DisplayObject at the specified index within the container. The 'index' parameter is the zero-based index to get the child at. It returns the child at the given index, if any.

```TypeScript
getChildAt(index: number): DisplayObject
```

--------------------------------

### Getting Viewport Center in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the current center coordinates of the viewport in world space. This property returns a Point object representing the x and y coordinates.

```TypeScript
get center(): Point
```

--------------------------------

### Accessing Animate time Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `time` property, which tracks the elapsed time since the animation started. It is a protected property initialized to `0`.

```TypeScript
time: number = 0
```

--------------------------------

### Managing Skew in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Gets or sets the skew factor for a PixiJS display object in radians. This property, inherited from PIXI.Container, allows for non-uniform scaling effects.

```TypeScript
get skew(): ObservablePoint<any>
```

```TypeScript
set skew(value: ObservablePoint<any>): void
```

--------------------------------

### Getting World Width in Screen Coordinates (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the total world width as measured in screen coordinates. This property is useful for understanding the mapping between world and screen dimensions.

```TypeScript
get screenWorldWidth(): number
```

--------------------------------

### Following a Target in Pixi Viewport (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

This method allows the viewport to follow a specified DisplayObject target. It uses the target's (x, y) as the center for following; for PIXI.Sprite to work properly, use sprite.anchor.set(0.5). The options.acceleration is not perfect as it doesn't know the velocity of the target, adding acceleration to the start and deceleration to the end of movement when the target is stopped. To cancel the follow, use viewport.plugins.remove('follow'). This method fires a 'moved' event. The 'target' parameter is the DisplayObject to follow, and 'options' provides additional configuration. It returns the Viewport instance for chaining.

```TypeScript
follow(target: DisplayObject, options?: IFollowOptions): Viewport
```

--------------------------------

### Getting Screen Width in World Coordinates (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the width of the screen as measured in world coordinates. This property provides a conversion from screen space to world space for the horizontal dimension.

```TypeScript
get worldScreenWidth(): number
```

--------------------------------

### Getting World Height in Screen Coordinates (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the total world height as measured in screen coordinates. This property is useful for understanding the mapping between world and screen dimensions.

```TypeScript
get screenWorldHeight(): number
```

--------------------------------

### Initializing TSD Theme - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Initializes the theme for the documentation page by adding a CSS class to the `body` element. It attempts to retrieve a stored theme preference from `localStorage` or defaults to 'os' if no preference is found.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Screen Height in World Coordinates (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the height of the screen as measured in world coordinates. This property provides a conversion from screen space to world space for the vertical dimension.

```TypeScript
get worldScreenHeight(): number
```

--------------------------------

### Managing Width in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Gets or sets the width of a PixiJS Container. Setting this value will automatically adjust the container's scale to achieve the desired width, inheriting this behavior from PIXI.Container.

```TypeScript
get width(): number
```

```TypeScript
set width(value: number): void
```

--------------------------------

### Applying Documentation Theme (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IScale.html

This JavaScript snippet dynamically sets the theme for the documentation page. It retrieves a stored theme preference from localStorage or defaults to 'os', then applies the corresponding class to the body element to control the visual style.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Screen Width in World Pixels (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Calculates and returns the width of the screen expressed in world pixels. This getter provides a convenient way to understand the world dimensions visible on the current screen width.

```TypeScript
get screenWidthInWorldPixels(): number
```

--------------------------------

### Getting Screen Height in World Pixels (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Calculates and returns the height of the screen expressed in world pixels. This getter provides a convenient way to understand the world dimensions visible on the current screen height.

```TypeScript
get screenHeightInWorldPixels(): number
```

--------------------------------

### Constructing Follow Plugin - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Initializes a new instance of the `Follow` plugin. This constructor is typically called by `Viewport.follow` and requires a `Viewport` instance, a `DisplayObject` to follow, and optional `IFollowOptions` to configure the plugin's behavior.

```TypeScript
new Follow(parent: Viewport, target: DisplayObject, options?: IFollowOptions): Follow
```

--------------------------------

### Initializing Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IBounceState.html

This JavaScript snippet retrieves a theme preference from local storage and applies it as a class to the document body. If no theme is found in local storage, it defaults to 'os'.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Active Status of PixiJS Drag Plugin

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

The `active` accessor provides a boolean value indicating whether the `Drag` plugin is currently in an active state, meaning it is actively handling drag interactions.

```TypeScript
get active(): boolean
```

--------------------------------

### Enable Zoom Clamping in PIXI Viewport (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Enables clamping of zoom to defined constraints. The minWidth/Height and maxWidth/maxHeight options control the world's apparent size on the screen before clamping. For example, minWidth/Height = 100 prevents zooming out beyond screen size, and maxWidth/Height = 100 prevents zooming in beyond screen size.

```TypeScript
clampZoom(options: IClampZoomOptions): Viewport
```

--------------------------------

### Getting Viewport Height in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the height of the Container (Viewport). This property is inherited from PIXI.Container.

```TypeScript
get height(): number
```

--------------------------------

### Getting Viewport Right Edge in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the world coordinates of the right edge of the screen as seen through the viewport.

```TypeScript
get right(): number
```

--------------------------------

### Getting Child Index in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Returns the index position of a child DisplayObject instance within the container. The 'child' parameter is the DisplayObject instance to identify. It returns the index position of the child display object.

```TypeScript
getChildIndex(child: DisplayObject): number
```

--------------------------------

### Getting Viewport Left Edge in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the world coordinates of the left edge of the screen as seen through the viewport.

```TypeScript
get left(): number
```

--------------------------------

### Initializing Documentation Theme in JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

This JavaScript snippet initializes the theme of the documentation page. It retrieves the 'tsd-theme' from local storage or defaults to 'os' if not found, then applies the corresponding class to the document body.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Viewport Pause Status in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Checks if the viewport is currently paused. When paused, all viewport animations, including deceleration, are suspended.

```TypeScript
get pause(): boolean
```

--------------------------------

### Initializing Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

This snippet initializes the document body's class list based on a theme stored in local storage. If no theme is found, it defaults to 'os'. This is typically used for UI theme persistence.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Property noDecelerate in IMouseEdgesOptions (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IMouseEdgesOptions.html

This optional boolean property, when set to `true`, prevents the MouseEdges plugin from utilizing the decelerate plugin, even if it is installed. This ensures that scrolling stops immediately when the mouse leaves the edge zone without any gradual slowdown.

```TypeScript
noDecelerate?: boolean
```

--------------------------------

### Getting Viewport Top-Left Corner in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the world coordinates of the top-left corner of the viewport. This property returns a Point object.

```TypeScript
get corner(): Point
```

--------------------------------

### Initialize Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Pinch.html

This JavaScript snippet initializes the document body's class list by adding a theme name retrieved from local storage. If no theme is found in local storage, it defaults to 'os'. This is typically used for setting a UI theme on page load.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Initializing Wheel Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Constructs a new instance of the Wheel plugin. This constructor is invoked by `Viewport.wheel` and requires a parent `Viewport` instance and optional `IWheelOptions` for configuration.

```TypeScript
new Wheel(parent: Viewport, options?: IWheelOptions): Wheel
```

--------------------------------

### Initialize TSD Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IDragOptions.html

This JavaScript snippet initializes the theme for the documentation page. It retrieves a theme preference from local storage using the key 'tsd-theme' and applies it as a class to the document's body. If no theme is found in local storage, it defaults to 'os'.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Viewport Position in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the coordinate of the display object (Viewport) relative to its parent's local coordinates. This property is inherited from PIXI.Container.

```TypeScript
get position(): ObservablePoint<any>
```

--------------------------------

### Getting Viewport Dirty Status in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Determines whether the viewport is marked as 'dirty', meaning it requires re-rendering due to a change in its state or content.

```TypeScript
get dirty(): boolean
```

--------------------------------

### Setting Up Animate Position (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Sets up the initial position-related properties for the animation, including `startX`, `startY`, `deltaX`, `deltaY`, and `keepCenter`. This protected method is called during the constructor and returns `void`.

```TypeScript
setupPosition(): void
```

--------------------------------

### Initialize TSD Theme from Local Storage

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/ICompleteViewportOptions.html

This JavaScript snippet initializes the theme for the documentation page. It attempts to retrieve a theme preference from `localStorage` using the key 'tsd-theme'. If no theme is found in local storage, it defaults to 'os' (likely 'operating system' theme). The determined theme class is then added to the `body` element's class list, which typically applies styling.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Initializing TSD Theme from Local Storage (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IAnimateOptions.html

This snippet initializes the theme for the documentation page by adding a class to the `body` element. It retrieves the theme preference from `localStorage` (key "tsd-theme") or defaults to "os" if not found.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Accessing Follow Plugin Options - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Retrieves the configuration options used to initialize the `Follow` plugin. This property provides access to the `IFollowOptions` object, which defines parameters like speed, acceleration, and other following behaviors.

```TypeScript
options: Required<IFollowOptions>
```

--------------------------------

### Initializing TSD Theme in JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IClampZoomOptions.html

This snippet initializes the theme for the documentation viewer by checking local storage for a 'tsd-theme' preference. If no preference is found, it defaults to 'os', ensuring a consistent user interface theme.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Viewport zIndex in PixiJS

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the zIndex of the display object. When a container has 'sortableChildren' set to true, children are automatically sorted by their zIndex, with higher values rendering on top.

```TypeScript
get zIndex(): number
```

--------------------------------

### Initialize Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/ISnapOptions.html

This JavaScript snippet initializes the document body's class list based on a theme preference stored in local storage. If no theme is found, it defaults to 'os'. This ensures the UI theme persists across sessions.

```javascript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Setting Theme from Local Storage - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IViewportTouch.html

This JavaScript snippet initializes the document body's class list by adding a theme preference retrieved from local storage. If no theme is found in local storage, it defaults to 'os'. This is typically used for persistent UI theme settings.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Setting Up Animate Zoom (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Sets up the initial zoom-related properties for the animation, including `startWidth`, `startHeight`, `deltaWidth`, `deltaHeight`, `width`, and `height`. This protected method is called during the constructor and returns `void`.

```TypeScript
setupZoom(): void
```

--------------------------------

### Getting Viewport Local Transform in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the current transformation matrix of the object based on its local factors such as position and scale. This property is readonly and inherited from PIXI.Container.

```TypeScript
get localTransform(): Matrix
```

--------------------------------

### Constructing ClampZoom Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Initializes a new instance of the ClampZoom plugin. This constructor is typically called by `Viewport.clampZoom`. It takes a `Viewport` instance as the parent and an optional `options` object for configuration.

```TypeScript
new ClampZoom(parent: Viewport, options?: {}): ClampZoom
```

--------------------------------

### Including pixi-viewport via Script Tags (HTML)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This HTML snippet shows how to include pixi.js and pixi-viewport directly in an HTML file using <script> tags. It also demonstrates how to instantiate the Viewport object once the libraries are loaded globally.

```HTML
<script src="/directory-to-file/pixi.js"></script>
<script src="/directory-to-file/viewport.min.js"></script>
<!-- or <script type="module" src="/directory-to-file/esm/viewport.es.js"></script> -->
<script>
  const Viewport = new pixi_viewport.Viewport(options);
</script>
```

--------------------------------

### Initializing TSD Theme in JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

This JavaScript snippet adds a CSS class to the document body based on a stored theme preference or defaults to 'os'. It's typically used for setting up the visual theme of the documentation page itself.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Viewport Mask in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the mask currently applied to the display object (Viewport). A mask limits the visibility of the object to the shape of the mask. This property is inherited from PIXI.Container.

```TypeScript
get mask(): null | Container | MaskData
```

--------------------------------

### Importing Viewport (ES Module) (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet illustrates the recommended ES module import syntax for Viewport in pixi-viewport v4+. It allows for tree-shaking and modern JavaScript development practices.

```JavaScript
import { Viewport } from "pixi-viewport";
```

--------------------------------

### Initializing Viewport with Pixi.js v7 Events (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet demonstrates how to initialize the Viewport in pixi-viewport v5+ when using Pixi.js v7's new event system. The options.events property must be set to renderer.events or app.renderer.events for proper event handling, replacing the deprecated options.interaction.

```JavaScript
const viewport = new Viewport({ events: renderer.events });

// or
// const viewport = new Viewport({ events: app.renderer.events });
```

--------------------------------

### Constructing Animate Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Initializes a new instance of the `Animate` plugin. This constructor is typically called by `Viewport.animate` and requires a `Viewport` instance as its parent and an optional `IAnimateOptions` object for configuration.

```TypeScript
new Animate(parent: Viewport, options?: IAnimateOptions): Animate
```

--------------------------------

### Getting Viewport Pivot Point in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the pivot point of the display object (Viewport) in its local space. This point serves as the center for rotation, scaling, and skewing. This property is inherited from PIXI.Container.

```TypeScript
get pivot(): ObservablePoint<any>
```

--------------------------------

### Initialize TSD Theme on Body Class

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

This JavaScript snippet initializes the theme for the document body. It attempts to retrieve a stored theme preference from local storage ('tsd-theme') and applies it as a class to the body. If no preference is found, it defaults to the 'os' theme.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Constructing Snap Plugin in TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Initializes a new instance of the Snap plugin, which allows the viewport to snap to a specific (x, y) coordinate. This constructor is typically invoked by the Viewport.snap method. It requires a parent Viewport instance, target coordinates, and accepts optional configuration options.

```TypeScript
new Snap(parent: Viewport, x: number, y: number, options?: ISnapOptions): Snap
```

--------------------------------

### Applying Stored Theme Preference

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Clamp.html

This JavaScript code snippet is executed on page load to set the visual theme of the documentation. It retrieves the 'tsd-theme' item from localStorage. If a value exists, it's added as a class to the document.body; otherwise, 'os' is used as the default theme.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Property reverse in IMouseEdgesOptions (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IMouseEdgesOptions.html

This optional boolean property, when set to `true`, reverses the direction of the scroll. For example, moving the mouse to the right edge would scroll the viewport left instead of right.

```TypeScript
reverse?: boolean
```

--------------------------------

### Constructing PluginManager - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Initializes a new instance of the PluginManager. This constructor is internally called by the Viewport class to set up plugin management for a specific viewport instance.

```TypeScript
new PluginManager(viewport: Viewport): PluginManager
```

--------------------------------

### Applying Theme from Local Storage (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IFollowOptions.html

This JavaScript snippet applies a theme to the document body by adding a CSS class. It retrieves the theme name from `localStorage` under the key 'tsd-theme', defaulting to 'os' if no theme is found. This is typically used for user interface theme persistence.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Managing Scale in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Gets or sets the scale factors of a PixiJS display object along its local coordinate axes. This property, inherited from PIXI.Container, defaults to (1, 1) and affects the object's size.

```TypeScript
get scale(): ObservablePoint<any>
```

```TypeScript
set scale(value: ObservablePoint<any>): void
```

--------------------------------

### Applying Stored Theme to Document Body - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IViewportTransformState.html

This JavaScript snippet retrieves a theme preference from the browser's local storage. If a theme is found, it is added as a class to the document's body; otherwise, it defaults to 'os'. This ensures the user's preferred theme is applied on page load.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Viewport Force Hit Area in PixiJS (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the custom hit area permanently assigned to the Viewport. If no custom hit area is set, it defaults to a PIXI.Rectangle covering the viewport's world screen dimensions.

```TypeScript
get forceHitArea(): undefined | null | IHitArea
```

--------------------------------

### Setting TSD Theme on Body Class - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IDecelerateSnapshot.html

This JavaScript snippet initializes the theme for the documentation page by adding a CSS class to the `<body>` element. It attempts to retrieve a stored theme preference from `localStorage` under the key 'tsd-theme' and defaults to 'os' if no preference is found, ensuring a consistent theme on page load.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Getting Visible World Bounds of Pixi Viewport (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Retrieves the visible world bounds of the viewport as a Rectangle. This method provides the current rectangular area of the world that is visible through the viewport. It returns a Rectangle object representing the visible bounds.

```TypeScript
getVisibleBounds(): Rectangle
```

--------------------------------

### Handling Pointer Up Event - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Handles the `pointerup` PIXI event for the `Follow` plugin. This method, inherited from `Plugin`, processes input events when a pointer is released from the viewport.

```TypeScript
up(_e: InteractionEvent): boolean
```

--------------------------------

### Configuring Acceleration for Follow Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IFollowOptions.html

Defines the optional `acceleration` property within `IFollowOptions`. This property, if set, controls the rate at which the viewport accelerates and decelerates when following, requiring `speed` to be non-zero. Its default value is `null`.

```TypeScript
acceleration?: null | number
```

--------------------------------

### Accessing Wheel Plugin Options (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Read-only property providing the complete and required configuration options for the Wheel plugin. These options dictate the behavior of wheel-based zooming.

```TypeScript
options: Required<IWheelOptions>
```

--------------------------------

### Handling Pointer Move Event - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Handles the `pointermove` PIXI event for the `Follow` plugin. This method, inherited from `Plugin`, processes input events when a pointer moves across the viewport, which might influence the plugin's state or behavior.

```TypeScript
move(_e: InteractionEvent): boolean
```

--------------------------------

### Handling Pinch Zoom with Wheel (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

A private method that processes wheel events to simulate pinch-to-zoom behavior. It takes a `WheelEvent` as input to determine the zoom direction and magnitude.

```TypeScript
pinch(e: WheelEvent): void
```

--------------------------------

### Accessing Mounted Plugin List - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Provides access to the `list` property, which is an array containing all currently mounted plugins. This list is maintained in a specific, hard-coded priority order.

```TypeScript
list: Plugin[]
```

--------------------------------

### Accessing Mapped Plugins - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Provides access to the `plugins` property, a partial record that maps mounted plugins by their string type (name). This allows for quick lookup of plugins by their identifier.

```TypeScript
plugins: Partial<Record<string, Plugin>>
```

--------------------------------

### Resuming a Viewport Plugin (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet demonstrates how to resume a specific plugin, such as 'drag', using the new plugins object in pixi-viewport v4+. This method replaces the direct viewport.resumePlugin() call from previous versions.

```JavaScript
viewport.plugins.resume('drag')
```

--------------------------------

### Handling Wheel Event - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Handles wheel events on the viewport. This method, inherited from `Plugin`, processes mouse wheel input, which might be used for zooming or other interactions that could affect or be affected by the following behavior.

```TypeScript
wheel(_e: WheelEvent): undefined | boolean
```

--------------------------------

### Applying Theme to Document Body - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IDecelerateOptions.html

This snippet applies a theme class to the document's body element. It retrieves the theme preference from local storage, defaulting to 'os' if no preference is found, and adds it as a class to the body.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Applying Stored Theme to Body Class

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IWheelOptions.html

This JavaScript snippet retrieves the user's preferred theme from local storage using the key 'tsd-theme'. If a theme is found, it's added as a class to the document body; otherwise, it defaults to 'os'. This ensures the page's visual theme persists across sessions.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Accessing Animate startX Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `startX` property, which represents the x-coordinate of the viewport at the beginning of the animation. It is a protected and optional property.

```TypeScript
startX?: number
```

--------------------------------

### Constructing Drag Plugin in PixiJS Viewport

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

This constructor creates a new instance of the `Drag` plugin. It is typically called internally by `Viewport.drag`. It requires a `parent` Viewport instance and accepts an optional `options` object for configuration.

```TypeScript
new Drag(parent: Viewport, options?: {}): Drag
```

--------------------------------

### Retrieving a Plugin - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Retrieves an instantiated plugin by its name. Overloads are provided for specific plugin types, allowing for type-safe access to common viewport plugins. An optional parameter allows ignoring paused plugins.

```TypeScript
get(name: "animate", ignorePaused?: boolean): undefined | null | Animate
```

```TypeScript
get(name: "bounce", ignorePaused?: boolean): undefined | null | Bounce
```

```TypeScript
get(name: "clamp", ignorePaused?: boolean): undefined | null | Clamp
```

```TypeScript
get(name: "clamp-zoom", ignorePaused?: boolean): undefined | null | ClampZoom
```

```TypeScript
get(name: "decelerate", ignorePaused?: boolean): undefined | null | Decelerate
```

```TypeScript
get(name: "drag", ignorePaused?: boolean): undefined | null | Drag
```

```TypeScript
get(name: "follow", ignorePaused?: boolean): undefined | null | Follow
```

```TypeScript
get(name: "mouse-edges", ignorePaused?: boolean): undefined | null | MouseEdges
```

```TypeScript
get(name: "pinch", ignorePaused?: boolean): undefined | null | Pinch
```

```TypeScript
get(name: "snap", ignorePaused?: boolean): undefined | null | Snap
```

```TypeScript
get(name: "snap-zoom", ignorePaused?: boolean): undefined | null | SnapZoom
```

```TypeScript
get(name: "wheel", ignorePaused?: boolean): undefined | null | Wheel
```

```TypeScript
get<T>(name: string, ignorePaused?: boolean): undefined | null | T
```

--------------------------------

### Accessing Parent Viewport - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Provides access to the `Viewport` instance to which this `Follow` plugin is attached. This property is inherited from the base `Plugin` class and is essential for the plugin to interact with its parent viewport.

```TypeScript
parent: Viewport
```

--------------------------------

### Constructing a Plugin instance in PixiJS Viewport (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Plugin.html

Initializes a new instance of the `Plugin` class, associating it with a specific `Viewport` instance. This constructor is fundamental for attaching custom plugin logic to a viewport.

```TypeScript
new Plugin(parent: Viewport): Plugin
```

--------------------------------

### Styling Basic Page Layout and Elements with CSS

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/index.html

This CSS snippet defines global styles for the body, specific classes like .titleCode, .font, and .hljs, and IDs like #code and #canvas. It controls margins, padding, overflow, positioning, font styles, and background colors to structure the web page and its interactive elements, ensuring proper display and responsiveness.

```CSS
body { margin: 0; padding: 0; overflow-x: hidden; height: 200vh; } .titleCode { margin-top: 0.5em; margin-left: 15%; font-size: 2em; } #code { left: 15%; width: 80%; position: absolute; word-wrap: break-word; z-index: -1; } .hljs { display: block; overflow-x: auto; padding: 0.5em; background: rgba(0, 0, 100, 0.02); } .hljs-comment { color: blue; } .font { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 1.25em; } .github-fork-ribbon.right-top:before { background-color: blue; } #canvas { position: absolute; top: 4em; width: 100%; height: calc(100% - 4em); }
```

--------------------------------

### Handling Pointer Down Event - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Handles the `pointerdown` PIXI event for the `Follow` plugin. This method, inherited from `Plugin`, processes input events when a pointer is pressed down on the viewport, potentially affecting the following behavior.

```TypeScript
down(_e: InteractionEvent): boolean
```

--------------------------------

### Adding a Plugin - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/PluginManager.html

Inserts a named plugin or a user-defined plugin into the viewport's plugin order. Plugins are typically added in a default order, but a specific index can be provided for custom placement.

```TypeScript
add(name: string, plugin: Plugin, index?: number): void
```

--------------------------------

### Resuming Follow Plugin - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Resumes the `Follow` plugin after it has been paused. This method, inherited from `Plugin`, re-enables the plugin's active following behavior.

```TypeScript
resume(): void
```

--------------------------------

### Applying Stored Theme to Document Body in JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IViewportOptions.html

This JavaScript snippet retrieves a theme preference from the browser's `localStorage` and applies it as a CSS class to the `document.body` element. If no theme is found in `localStorage`, it defaults to 'os'. This is commonly used for persisting user interface themes across sessions.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Updating Follow Plugin State - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Updates the `Follow` plugin's state on each animation tick. This method, overriding the `Plugin`'s `update`, is responsible for calculating and applying the necessary viewport movements to follow the target based on the elapsed time.

```TypeScript
update(elapsed: number): void
```

--------------------------------

### Handling Viewport Resize - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Handles viewport resize events. This method, inherited from `Plugin`, is called when the viewport's dimensions change, allowing the `Follow` plugin to adjust its calculations or behavior accordingly.

```TypeScript
resize(): void
```

--------------------------------

### Constructing MouseEdges Plugin in TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Initializes a new instance of the MouseEdges plugin, which enables scrolling the viewport when the mouse cursor is near the edges. This constructor is typically invoked by the Viewport.mouseEdges method. It requires a parent Viewport instance and accepts optional configuration options.

```TypeScript
new MouseEdges(parent: Viewport, options?: IMouseEdgesOptions): MouseEdges
```

--------------------------------

### Accessing Animate startWidth Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `startWidth` property, which represents the viewport's width at the beginning of the animation. It is a protected property and can be `null` or a `number`.

```TypeScript
startWidth: null | number = null
```

--------------------------------

### Defining Follow Speed for Follow Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IFollowOptions.html

Defines the optional `speed` property within `IFollowOptions`. This property determines the speed at which the viewport follows its target, measured in pixels per frame. A value of `0` means the viewport teleports instantly to the target. Its default value is `9`.

```TypeScript
speed?: number
```

--------------------------------

### Applying Stored Theme to Document Body - JavaScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/ISnapZoomOptions.html

This JavaScript code snippet dynamically sets the visual theme for the web page. It retrieves a theme name from `localStorage` under the key 'tsd-theme'. If no value is found, it defaults to 'os'. The selected theme name is then added as a class to the `document.body` element, allowing CSS to apply the corresponding styles.

```JavaScript
document.body.classList.add(localStorage.getItem("tsd-theme") || "os")
```

--------------------------------

### Resizing Viewport Screen and World (Viewport, TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Sets the screen and world sizes of the viewport, which are essential for functionalities like pinch, wheel, clamp, and bounce. This method allows for dynamic adjustment of the viewport's dimensions. It returns nothing.

```TypeScript
resize(screenWidth?: number, screenHeight?: number, worldWidth?: number, worldHeight?: number): void
```

--------------------------------

### Accessing ClampZoom Options (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Readonly property holding the configuration options for the ClampZoom plugin. These options define the zoom range and other clamping behaviors, conforming to the `IClampZoomOptions` interface.

```TypeScript
options: Required<IClampZoomOptions>
```

--------------------------------

### Accessing Follow Target - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Retrieves the `DisplayObject` that the `Follow` plugin is currently tracking. This property holds the reference to the object that the viewport will center on.

```TypeScript
target: DisplayObject
```

--------------------------------

### Accessing Follow Velocity - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Provides the current velocity applied to the viewport by the `Follow` plugin. This protected property, of type `IPointData`, represents the instantaneous speed and direction of the viewport's movement due to following the target.

```TypeScript
velocity: IPointData
```

--------------------------------

### Adding a Custom Viewport Plugin (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet demonstrates how to add a custom plugin to the viewport using the new plugins object in pixi-viewport v4+. It allows specifying a name, the plugin instance, and an optional index for ordering.

```JavaScript
viewport.plugins.add('name', plugin, index)
```

--------------------------------

### Initializing Mouse Buttons for PixiJS Drag

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

The `mouseButtons` method is a protected utility used to initialize the internal `mouse` array based on a `buttons` string. This string configures which mouse buttons are required to activate the drag functionality.

```TypeScript
mouseButtons(buttons: string): void
```

--------------------------------

### Handling Wheel Event in SnapZoom (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Processes wheel events for the SnapZoom plugin. This method determines if the wheel event should be handled by the plugin.

```TypeScript
wheel(): boolean
```

--------------------------------

### Handling Viewport Resize in Wheel Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Responds to viewport resize events. This method ensures that the Wheel plugin's internal calculations and behavior adapt correctly to changes in the viewport dimensions.

```TypeScript
resize(): void
```

--------------------------------

### Pausing Follow Plugin - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Pauses the `Follow` plugin, temporarily halting its functionality. This method, inherited from `Plugin`, stops the viewport from actively following the target until `resume()` is called.

```TypeScript
pause(): void
```

--------------------------------

### Completing Animate Animation (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Executes the `complete` method, which finalizes the animation process. This method takes no parameters and returns `void`.

```TypeScript
complete(): void
```

--------------------------------

### Destroying Follow Plugin - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Cleans up and removes the `Follow` plugin. This method, inherited from `Plugin`, should be called when the plugin is no longer needed to release resources and detach it from the viewport.

```TypeScript
destroy(): void
```

--------------------------------

### Accessing Animate startHeight Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `startHeight` property, which represents the viewport's height at the beginning of the animation. It is a protected property and can be `null` or a `number`.

```TypeScript
startHeight: null | number = null
```

--------------------------------

### Requiring Viewport (CommonJS) (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet shows the CommonJS require syntax for Viewport in pixi-viewport v4+. This method is typically used in Node.js environments or older build systems.

```JavaScript
const Viewport = require("pixi-viewport").Viewport;
```

--------------------------------

### Drag Plugin Options in PixiJS Viewport

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

The `options` property holds a read-only copy of the configuration settings (`IDragOptions`) used to initialize this `Drag` plugin instance. These options cannot be modified after initialization.

```TypeScript
options: Readonly<Required<IDragOptions>>
```

--------------------------------

### Configuring Wheel Zoom Smoothing (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Optional property for defining smoothing parameters for wheel-based zooming. If set, it can provide a smoother zoom experience.

```TypeScript
smoothing?: null | IPointData
```

--------------------------------

### Handling ClampZoom Pointer Move (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Handles the `pointermove` PIXI event. This method is used to process continuous pointer movement, such as during dragging or zooming. It takes an `InteractionEvent` and returns a boolean, inherited from the base `Plugin` class.

```TypeScript
move(_e: InteractionEvent): boolean
```

--------------------------------

### Defining IDecelerateOptions Interface - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IDecelerateOptions.html

This TypeScript interface defines the configurable options for deceleration behavior within the pixi-viewport library. It includes properties for bounce, friction, and minimum speed, all of which are optional numbers.

```TypeScript
interface IDecelerateOptions {
    bounce?: number;
    friction?: number;
    minSpeed?: number;
}
```

--------------------------------

### Handling Key Press Events for Wheel Zoom (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Manages keypress events to update the `keyIsPressed` flag, which controls whether wheel events trigger zoom. It takes an array of key codes that can activate zoom.

```TypeScript
handleKeyPresses(codes: string[]): void
```

--------------------------------

### Enabling Pinch-to-Zoom and Two-Finger Drag (Viewport, TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Enables pinch-to-zoom functionality and two-finger touch to drag on the viewport. This method can be configured with optional IPinchOptions to customize its behavior. It returns the Viewport instance for chaining.

```TypeScript
pinch(options?: IPinchOptions): Viewport
```

--------------------------------

### Handling Key Presses for PixiJS Drag

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Drag.html

The `handleKeyPresses` method is a protected utility that processes an array of `codes` (key codes) to determine if any of the specified keys are pressed, updating the `keyIsPressed` boolean accordingly to enable or disable drag.

```TypeScript
handleKeyPresses(codes: string[]): void
```

--------------------------------

### Adding Event Listeners in PixiJS Container (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Adds a listener for a given event. This method allows registering a function to be called when a specific event is emitted. The 'event' parameter is the event name (string or symbol), 'fn' is the listener function to add, and 'context' is an optional context object for the listener. It returns the Viewport instance for chaining.

```TypeScript
on(event: string | symbol, fn: ListenerFn, context?: any): Viewport
```

--------------------------------

### Handling Pointer Move Event in Wheel Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Processes pointer move events for the Wheel plugin. This method determines if the pointer move event should be handled by the plugin.

```TypeScript
move(_e: InteractionEvent): boolean
```

--------------------------------

### Handling Pointer Up Event in SnapZoom (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Handler for pointerup PIXI event. This method processes the `InteractionEvent` to manage the state of the SnapZoom plugin when a pointer is released.

```TypeScript
up(_e: InteractionEvent): boolean
```

--------------------------------

### Resuming Wheel Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Resumes the functionality of the Wheel plugin after it has been paused. This re-enables wheel event processing for zooming.

```TypeScript
resume(): void
```

--------------------------------

### Handling ClampZoom Wheel Event (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Handles wheel events on the viewport's HTML element. This method is crucial for implementing zoom functionality via mouse wheel. It takes a `WheelEvent` and can return `undefined` or a boolean, inherited from the base `Plugin` class.

```TypeScript
wheel(_e: WheelEvent): undefined | boolean
```

--------------------------------

### Accessing Animate startY Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `startY` property, which represents the y-coordinate of the viewport at the beginning of the animation. It is a protected and optional property.

```TypeScript
startY?: number
```

--------------------------------

### Handling Pointer Up Event in Wheel Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Handler for pointerup PIXI event within the Wheel plugin. This method processes the `InteractionEvent` to manage the state when a pointer is released.

```TypeScript
up(_e: InteractionEvent): boolean
```

--------------------------------

### Resetting Follow Plugin - pixi-viewport - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Follow.html

Resets the `Follow` plugin's internal state. This method, inherited from `Plugin`, is called when the viewport is manually moved, allowing the plugin to re-synchronize or adjust its following behavior.

```TypeScript
reset(): void
```

--------------------------------

### Handling ClampZoom Pointer Up (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Handles the `pointerup` PIXI event. This method is called when a pointer is released, typically signifying the end of an interaction like a drag or click. It takes an `InteractionEvent` and returns a boolean, inherited from the base `Plugin` class.

```TypeScript
up(_e: InteractionEvent): boolean
```

--------------------------------

### Pausing a Viewport Plugin (JavaScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/README.md

This snippet demonstrates how to pause a specific plugin, such as 'drag', using the new plugins object in pixi-viewport v4+. This method replaces the direct viewport.pausePlugin() call from previous versions.

```JavaScript
viewport.plugins.pause('drag')
```

--------------------------------

### Setting Radius for Follow Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IFollowOptions.html

Defines the optional `radius` property within `IFollowOptions`. This property specifies a circular area (in world coordinates) around the target where the viewport can move without itself moving. Its default value is `null`.

```TypeScript
radius?: null | number
```

--------------------------------

### Defining IClampZoomOptions.minWidth Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/IClampZoomOptions.html

Defines an optional property `minWidth` within the `IClampZoomOptions` interface. This property specifies the minimum width allowed when clamping zoom, accepting either `null` or a `number`.

```TypeScript
minWidth?: null | number
```

--------------------------------

### Enabling Bounce Effect for PixiJS Viewport

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Viewport.html

Configures the viewport to 'bounce' when it reaches its world boundaries. This feature requires 'screenWidth', 'screenHeight', 'worldWidth', and 'worldHeight' to be properly set for correct operation. It emits various 'bounce' and 'moved' events.

```TypeScript
bounce(options?: IBounceOptions): Viewport
```

--------------------------------

### Accessing Animate options Property (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/Animate.html

Retrieves the `options` property, which holds the configuration for the animation, including `ease` and `time`. It is a readonly property of type `IAnimateOptions` with additional properties.

```TypeScript
options: IAnimateOptions & { ease: any; time: number }
```

--------------------------------

### Resuming ClampZoom Plugin (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/classes/ClampZoom.html

Resumes the ClampZoom plugin after it has been paused, re-enabling its zoom clamping functionality and event handling. This method is inherited from the base `Plugin` class.

```TypeScript
resume(): void
```

--------------------------------

### Define Snap Easing Option - TypeScript

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/interfaces/ISnapOptions.html

Defines an optional `ease` property within the `ISnapOptions` interface. This property accepts an easing function or a string name (referencing http://easings.net/) to control the animation curve of the snap, allowing for custom animation feel.

```typescript
ease?: any
```

--------------------------------

### Checking Key Press for Wheel Zoom (TypeScript)

Source: https://github.com/pixijs-userland/pixi-viewport/blob/master/docs/public/modules.html

Checks if the necessary keys are pressed to enable wheel zoom functionality. This method returns true if the conditions for key-modified zooming are met.

```TypeScript
checkKeyPress(): boolean
```