【Panzoom】ピンチインピンチアウトで拡大縮小を実装

先日手がけたサイトにて
「スマートフォンレイアウト時は地図をピンチインピンチアウトで拡大縮小してほしい」
という要望をいただき実装したので使用したパッケージのお話をしようと思います。

Panzoomパッケージ

割と直球そのままなパッケージ名ですが、panのほうが移動、zoomが拡大縮小ですね。
撮影用語でカメラ位置を固定し水平に振るカメラワークをパンといいますが、そのパンです。

公式サンプルサイト
https://timmywil.com/panzoom/demo/

サンプルサイト右上アイコンからGitHubのリポジトリにもアクセスできます。
これから記載する導入方法もリポジトリのreadmeに書かれています……英語で。

私が探す限り日本語で使い方を説明しているページは見当たらなかったため、今回記事を書いてみた次第です。
似たパッケージもあったのですが試した結果当時は使いづらかったということでこちらを使用しました。

導入方法

（CDNでの導入も本家には書かれていますが、動作確認ができなかったためnpmのみ記載します）

npmでのインストールの場合

$ npm install --save @panzoom/panzoom

yarnを使っていれば

$ yarn add @panzoom/panzoom

でパッケージを追加できます

使用するときの読み込みは

import Panzoom from '@panzoom/panzoom'

で行うとGIThubのREADMEや公式サンプルに記載されている記述が割とそのまま試せます。

通常反映

弊社マスコットキャラクター・ロージーに見本になっていただきました。
PCでもズームが確認できるようにボタンを用意しました。
タッチデバイスならピンチインピンチアウトの動作でもズームイン、ズームアウトが可能です
cssは主に画像の大きさ、位置の初期状態と「どのエリアがpanzoomの対象になるのか」がわかりやすいように背景色などを設定しています。

jsの実行コードの説明

const elem = document.querySelector('.js-panzoom');
const panzoom = Panzoom(elem);

動かしたい要素を取得（今回は.js-panzoomというクラスを付けたimg要素）
取得した要素を引数に設定して実行します。
実行すると、動かしたい要素ががマウスのドラッグアンドドロップやスワイプ動作で動かせるようになります。
さらにピンチインピンチアウトで拡大縮小ができるようになります！目的達成！
（デフォルトでは親要素にoverflow: hiddenがかかるため親要素の領域からはみ出すとはみ出した分は非表示になります。）

カスタマイズがしたい

さて、これだけでもいいのですが、

「拡大は〇倍までにしたい」
「親のエリアからはみ出して見えない部分が出ないでほしい」

などの希望があったりすると思います。
そんな時はオプションを設定することで実現が可能になる場合もあります。

panzoomで用意されているオプションやオブジェクトをいくつか紹介します。

オプション

このような形式で指定します。

const panzoom = Panzoom(elem, {key: value});

※10番の公式デモサンプル
 ※11番の公式デモサンプル
 ※12番の公式デモサンプル

上記で機能説明していないものもありますが、以下のオプションが設定されています

共通オプション（MiscOptions）

animate、canvas、duration、easing、exclude、excludeClass、force、handleStartEvent、noBind、origin、overflow、pinchAndPan、setTransform、silent、startX、startY、startScale、touchAction

panのみのオプション（PanOnlyOptions）

contain、cursor、disablePan、disableXAxis、disableYAxis、relative、panOnlyWhenZoomed、roundPixels

zoomのみのオプション（ZoomOnlyOptions）

disableZoom、focal、minScale、maxScale、step

後述するオブジェクトの引数で使用できるオプションはこれらの組み合わせからなっています。

※各オプションについて詳しくは公式GitHubのsrc/types.tsをご覧ください

オブジェクト（一部抜粋）

このような形式で使用します。

const panzoom = Panzoom(elem);

zoomInBtn.addEventListener('click', panzoom.zoomIn);

panBtn.addEventListener('click', (e) => {
  panzoom.pan(100,100, { relative: true });
})