zoom ctrl-wheel pinch multi-sheet lite v1.7
表示倍率（ズーム）
setZoom()、倍率ボックス、ポインター位置を中心にしたCtrl/Cmd+ホイールやトラックパッドのピンチで、シートを10%〜400%に拡大縮小します。変わるのは表示だけで、列幅・印刷・エクスポートは100%のまま。倍率はシートごとに保持されます。
デモの解説
v1.7.0で、Excelと同じ表示倍率（ズーム）が加わりました。10%〜400%をシートごとに設定でき、両エディションで利用できます。変わるのは表示だけです。行の高さ・列幅・フォントは100%のシートpxのままなので、測る・印刷する・書き出すものは何も変わらず、罫線もどの倍率でも1pxの太さを保ちます。
- グリッドの上でCtrl/Cmd+ホイール、またはトラックパッドのピンチで、ポインター位置を中心に拡大縮小します。ポインターの下のセルは動きません。マウス1ノッチで約15%、倍率を整数%に丸めないのでピンチも滑らかです
- − / ＋ ボタンはExcelに近い段階で倍率を切り替え、セレクトとスライダーは
ws.setZoom()を直接呼びます。アンカーを渡さなければ、Excelの倍率ボックスと同じく左上のセルが固定されます - ツールバーは
grid.onZoomChangeですべての変化に追従します。ツールバー自身が受け取らないホイールやピンチによる変化も含みます - ステータス行は
getColumnWidth(1)を表示します。B列はどの倍率でもシート上は64pxのままで、変わるのは画面上の大きさだけです - 倍率はExcelの
sheetView@zoomScaleと同じくシートごとに持ちます。日別明細タブはsetZoom(0.75)で75%にしてあります。シートの切り替えは「変化」ではないため、デモはworkbook.onActiveSheetChangeでgetZoom()を読み直しています - 倍率はxlsxに保存され、85%で保存したブックは85%で開きます。印刷・PDF・HTML出力は倍率の影響を受けません
getCellRect()などで自前の要素を重ねる場合、その矩形は100%のシートpxなのでgetZoom()を掛けてください。createReogrid({ wheelZoom: false })でCtrl/Cmd+ホイールをブラウザのページズームに戻せます
主要 API
ws.setZoom(1.25) 表示を拡大縮小します（10%〜400%にクランプ）。アンカー（canvasのCSS px）を渡すと、その位置のシートが動きません
ws.getZoom() シートの倍率（1 = 100%）。シートを切り替えたら読み直します
grid.onZoomChange(fn) アクティブシートの倍率が実際に変わるたびに発火 — Ctrl/Cmd+ホイール、ピンチ、setZoom()、xlsxの読み込み
grid.workbook.onActiveSheetChange(fn) シートの切り替えは倍率の変化ではないので、ここでgetZoom()を読み直して倍率表示を合わせます
ws.getColumnWidth(c) どの倍率でも100%のシートpxのまま。画面上のpxはgetZoom()を掛けて求めます
createReogrid({ wheelZoom: false }) Ctrl/Cmd+ホイールをブラウザのページズームに任せます。setZoom()はそのまま使えます
ソースコード
TypeScript