フレームワーク非依存コア

コアはジェスチャー認識、ズーム / パンの物理演算、そしてトランスフォームのレンダリングを担い、アダプタ が DOM 構造を担います。Svelte アダプタもそうしたアダプタの一つです。コアを直接操作することも、その上に任意の別のフレームワーク向けのアダプタを構築することもできます。

import { createViewer } from 'picola';

const viewer = createViewer({ slides, startIndex: 0 });
viewer.attach({ viewport, track, backdrop });
viewer.on('change', ({ index }) => console.log(index));
viewer.open(0);

Viewer インスタンス

createViewer(options) は Viewer を返します。DOM 構造は attach() を通じて提供し、コアがインタラクションとレンダリングを引き継ぎます。

Member	説明
`attach({ viewport, track, backdrop })`	コアを DOM 要素に接続します。
`open(index)`	指定したスライドでビューワーを開きます。
`close()`	閉じるトランジションを開始します。
`next()` / `prev()`	隣接するスライドへ移動します。
`goTo(index)`	指定したスライドへ移動します。
`updateSlide(index, patch)`	スライドをその場で更新します（例: フル解像度のソースに差し替える）。
`setSlides(slides, index?)`	ズームを保持し、インデックスをクランプしながらスライドセットを置き換えます。
`zoomTo(scale, center?)`	プログラムからズームします。
`toggleUi(visible?)`	UI を表示 / 非表示にします。
`setKeyboardEnabled(enabled)`	キー操作の処理を一時停止 / 再開します。
`on(name, listener)`	イベントを購読します。購読解除用の関数を返します。
`destroy()`	ビューワーを破棄し、リソースを解放します。

さらに status、index、count、slides のゲッターがあります。

イベント

viewer.on(name, listener) で購読します。Svelte アダプタが公開するコールバックプロップのイベントに加えて、コアは次のイベントを発行します。

Event	Payload	発火するタイミング
`opened`	`{ index }`	開くトランジションが完了したとき。
`zoom`	`{ index, scale, fitScale }`	アクティブなスライドのズームレベルが変化したとき。
`dismiss`	`{ progress, offsetY }`	ドラッグで閉じる進捗が更新されたとき。
`ui`	`{ visible }`	UI の表示が切り替わったとき（タップ操作）。
`slideupdate`	`{ index, slide }`	`updateSlide` によってスライドが更新されたとき。
`slideschange`	`{ slides, index }`	`setSlides` によってスライドセットが置き換えられたとき。
`destroy`	—	ビューワーが破棄されたとき。

コールバックプロップとして公開されているイベントは API リファレンスを参照してください。

低レベルのプリミティブ

コアは、独自のアダプタを構築するために、Svelte アダプタの基盤となっているプリミティブもエクスポートします。attachGestures、PanZoom、decodeImage、trapFocus、bindHistory、fitScale、panBounds、rubberBand、zoomAroundPoint に加えて、オプションとイベントの完全な型が含まれます。リファレンス実装となるアダプタについては、リポジトリの src/svelte を参照してください。