Skip to content

Latest commit

 

History

History
106 lines (71 loc) · 4.66 KB

README.md

File metadata and controls

106 lines (71 loc) · 4.66 KB
Raw

<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-left
anchor-right
anchor-top
anchor-bottom
(existence)		 anchorLeft
anchorRight
anchorTop
anchorBottom		 false
false
false
false		 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).

License

WTFPL

Similar Libraries