Gesture-frame NPM

<gesture-frame>

A Web Component that supports pinch-zoom and pan for PC and touch devices.

Demo: https://luncheon.github.io/gesture-frame/

Installation

npm i gesture-frame

Usage

<link rel="stylesheet" href="gesture-frame/gesture-frame.css">
<script type="module" src="gesture-frame/gesture-frame.js"></script>

<gesture-frame pan-x pan-y pinch-zoom min-scale="0.01" max-scale="1000" scale="2" offset-x="20" offset-y="20">
  <!-- Content -->
</gesture-frame>

or using module bundler:

import 'gesture-frame/gesture-frame.css';
import 'gesture-frame/gesture-frame.js';

const gestureFrame = document.createElement('gesture-frame');
gestureFrame.pinchZoom = true;
gestureFrame.minScale = 0.01;
gestureFrame.fit({ marginX: 20, marginY: 20 });

If you use TypeScript with import elision and need the custom element type, import it separately.

See:

import { GestureFrame } from 'gesture-frame';
import 'gesture-frame/gesture-frame.css';
import 'gesture-frame/gesture-frame.js'; // when *import elision* is disabled, this line is not necessary.

// type usage
const gestureFrame: GestureFrame = document.createElement('gesture-frame');

// constructor usage
if (gestureFrame instanceof GestureFrame) {
}

HTML Attributes and DOM Element Properties

States (auto-updated by panning and zooming)

HTML Attribute	DOM Element Property	Default	Description
`scale`	`scale`	`1`	Scale.
`offset-x`	`offsetX`	`0`	Left margin.
`offset-y`	`offsetY`	`0`	Top margin.

These attributes can be observed using MutationObserver.

Options

HTML Attribute	DOM Element Property	Default	Description
`min-scale`	`minScale`	`0.1`	Minimum scale.
`max-scale`	`maxScale`	`100`	Maximum scale.
`pan-x` (existence)	`panX`	`false`	Whether horizontal panning is enabled.
`pan-y` (existence)	`panY`	`false`	Whether vertical panning is enabled.
`pinch-zoom` (existence)	`pinchZoom`	`false`	Whether two-finger panning and zooming is enabled. For PC, follows `Ctrl + Wheel` events.
`pan-button`	`panButton`	`0`	Mouse button for panning on PC.
`anchor-leftanchor-rightanchor-topanchor-bottom`(existence)	`anchorLeftanchorRightanchorTopanchorBottom`	`falsefalsefalsefalse`	Edges to which the content is bound. When the element is resized, the content is resized while keeping the distance from the bound edges.* Only up to three anchors can be set; if all anchors are set, only the left and right anchors will be enabled.

DOM Element API

`fit(options?: { marginX?: number, marginY?: number }): void`

Adjust the scale and offset to display the entire content.

`fitX(options?: { margin?: number }): void`

Adjust the scale and offset-x to fit the width.

`fitY(options?: { margin?: number }): void`

Adjust the scale and offset-y to fit the height.

zoom(scaleRatio: number, origin?: { x?: number | `${number}%`, y?: number | `${number}%`): void

Zoom keeping the apparent position of (origin.x, origin.y). Zoom in when scaleRatio > 1 and zoom out when scaleRatio < 1. origin.x and origin.y can be specified as a number (px) or a `${number}%`. The default value for both is "50%" (center).