$ show anvaka/panzoom
panzoom is a mature, dependency-light JavaScript library that provides pan and zoom interactions for both DOM elements and SVG elements. The main entry point is index.js, which exposes a createPanZoom() factory that attaches mouse, touch, wheel, and keyboard event handling to a target element, orchestrates transform updates, and emits custom events such as 'pan', 'zoom', and 'transform'. Internally it uses a controller abstraction to render transforms either via CSS transforms for DOM nodes or SVG transform attributes, and it ships prebuilt dist bundles alongside a demo suite and a TypeScript declaration file. It is a library, not a standalone application, with no backend, CLI, or data pipeline components.
The LLM identified 5 files worth highlighting for reuse:
Self-contained inertial scrolling model that computes decaying velocity and animated position updates for kinetic panning. It is minimally coupled to the rest of panzoom and can be extracted into any project needing momentum-based motion for pointer or touch interactions.
Implements the controller contract for SVG elements by reading the existing transform matrix, creating one if absent, and applying pan/zoom via SVG transform attributes. This is a clean adapter that isolates SVG-specific rendering concerns and could be reused as a reference for similar element-type controllers.
Implements the controller contract for regular DOM elements using CSS transforms. It handles transform-origin, bounding client rect calculation, and transform string application, demonstrating a reusable pattern for abstracting rendering backends behind a common interface.
A small, isolated utility that prevents text selection while dragging. It works by toggling user-select styles and handling mouse events on the document, making it safely reusable in any browser project that implements custom drag interactions.
Utility for retrieving or creating an SVG transform matrix for a given element. It encapsulates a non-obvious SVG DOM detail (the getCTM/createSVGMatrix dance) and is small enough to be lifted into any SVG manipulation project.