mdv-live 0.5.20 → 0.5.21

package/CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.21] - 2026-05-22
+
+### Fixed — Marp スライドが横長ペインで上下に見切れる
+
+ウィンドウ表示（split モード）で、スライドペインがスライドのアスペクト比
+（16:9）より横長になると、スライド（特に全面画像）の上下が見切れていた。
+
+- 原因: スライドペイン内の `.marpit` に確定した高さがなく、active SVG の
+  `max-height: 100%` が無効化されていた。SVG が「幅 100%」だけで決まるため、
+  ペインが 16:9 より横長だと縦にあふれて上下がクリップされていた
+  （フルスクリーン表示は `.marpit` が `height: 100vh` を持つため影響なし）。
+- 修正: `.marpit` に `height: 100%` を与え、active SVG を
+  `width/height: auto` + `max-width/height: 100%` の真の "contain" に変更。
+  ペインが横長・縦長どちらでもスライド全体が必ず収まる。
+
+### Added — トラックパッドのピンチズーム / パン
+
+Marp スライド表示で、トラックパッドのピンチ操作（macOS では ctrl+wheel、
+マウスの ctrl+スクロールも同様）でスライドを拡大・縮小できるように。
+
+- 二本指スクロールでパン（ペインのネイティブ overflow スクロール）。ピンチと
+  パンは分離（ctrl 付き wheel のみズーム）。
+- カーソル位置を中心にズーム。ズーム範囲は fit（等倍）〜6倍。
+- ダブルクリック / `0` キーで全体表示（fit）に復帰。`=` / `-` キーでも増減。
+- スライド送り・フルスクリーン切替・ペインのリサイズで自動的に fit に追従。
+- ズーム計算（contain fit / クランプ / wheel→zoom）は DOM 非依存の
+  `src/static/lib/marpZoom.js` に分離し、単体テスト（`tests/test-marp-zoom.js`、
+  12 件）を追加。
+
 ## [0.5.20] - 2026-05-18
 
 ### Fixed — Presenter View のノート編集が毎回 STALE エラー

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.20",
+  "version": "0.5.21",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/static/app.js

@@ -1206,6 +1206,136 @@
         }
     };
 
+    // ============================================================
+    // Marp Slide Zoom (trackpad pinch-to-zoom + pan)
+    // ============================================================
+    //
+    // At fit (zoom === 1) the slide is sized entirely by the CSS "contain"
+    // rules so the whole slide — image and all — is always visible. Zooming
+    // past 1 switches the active SVG to explicit pixel dimensions
+    // (fitSize * zoom); the pane's native overflow then lets a two-finger
+    // scroll pan around the enlarged slide. macOS trackpad pinch arrives as a
+    // `wheel` event with `ctrlKey` set, so ctrl+scroll on a mouse zooms too.
+    const MarpZoom = {
+        area: null,
+        zoom: 1,
+        onWheel: null,
+        onDblClick: null,
+        ro: null,
+
+        // Pure zoom math lives in lib/marpZoom.js (globalThis.MDVMarpZoom) so
+        // it can be unit-tested without a DOM. If that script failed to load,
+        // the CSS-only fit still works; we just skip wiring the gestures.
+        lib() { return (typeof globalThis !== 'undefined') ? globalThis.MDVMarpZoom : null; },
+
+        init(area) {
+            this.detach();
+            if (!this.lib()) return;
+            this.area = area;
+            this.zoom = 1;
+            this.onWheel = (e) => {
+                // Plain two-finger scroll is left to the pane so it pans the
+                // zoomed slide natively. Only a pinch (ctrlKey) zooms.
+                if (!e.ctrlKey) return;
+                e.preventDefault();
+                this.zoomTo(this.lib().zoomForWheel(this.zoom, e.deltaY), e.clientX, e.clientY);
+            };
+            // Double-click anywhere on the slide snaps back to fit.
+            this.onDblClick = () => this.reset();
+            area.addEventListener('wheel', this.onWheel, { passive: false });
+            area.addEventListener('dblclick', this.onDblClick);
+            // Re-apply the pixel size when the pane is resized (window resize,
+            // dragging the notes splitter) so a zoomed slide tracks the new
+            // fit instead of freezing at a stale size.
+            if (typeof ResizeObserver !== 'undefined') {
+                this.ro = new ResizeObserver(() => {
+                    if (!this.lib().isFit(this.zoom)) this.zoomTo(this.zoom);
+                });
+                this.ro.observe(area);
+            }
+        },
+
+        detach() {
+            if (this.area && this.onWheel) {
+                this.area.removeEventListener('wheel', this.onWheel);
+                this.area.removeEventListener('dblclick', this.onDblClick);
+            }
+            if (this.ro) { this.ro.disconnect(); this.ro = null; }
+            this.area = null;
+            this.onWheel = null;
+            this.onDblClick = null;
+            this.zoom = 1;
+        },
+
+        activeSvg() {
+            return this.area
+                ? this.area.querySelector('.marpit > svg[data-marpit-svg].active')
+                : null;
+        },
+
+        // Slide dimensions at fit (zoom 1), resolved the same way the CSS
+        // "contain" rule does — so the 1.0 → 1.01 transition doesn't jump.
+        fitSize(svg) {
+            const cs = getComputedStyle(this.area);
+            const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+            const padY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+            const aw = this.area.clientWidth - padX;
+            const ah = this.area.clientHeight - padY;
+            const vb = svg.viewBox && svg.viewBox.baseVal;
+            const ratio = (vb && vb.width) ? vb.height / vb.width : 9 / 16;
+            return this.lib().containFit(aw, ah, ratio);
+        },
+
+        // Apply `z` around a focal point (defaults to the pane centre). The
+        // before/after rects already fold in centring and scroll offsets, so
+        // the point under the cursor stays put as the slide grows.
+        zoomTo(z, focalX, focalY) {
+            const svg = this.activeSvg();
+            if (!svg) return;
+            z = this.lib().clampZoom(z);
+            if (this.lib().isFit(z)) { this.reset(); return; }
+
+            if (focalX == null) {
+                const r = this.area.getBoundingClientRect();
+                focalX = r.left + r.width / 2;
+                focalY = r.top + r.height / 2;
+            }
+            const before = svg.getBoundingClientRect();
+            const relX = before.width ? (focalX - before.left) / before.width : 0.5;
+            const relY = before.height ? (focalY - before.top) / before.height : 0.5;
+
+            this.zoom = z;
+            const fit = this.fitSize(svg);
+            svg.style.width = (fit.w * z) + 'px';
+            svg.style.height = (fit.h * z) + 'px';
+            this.area.classList.add('marp-zoomed');
+
+            const after = svg.getBoundingClientRect();
+            this.area.scrollLeft += (after.left + relX * after.width) - focalX;
+            this.area.scrollTop += (after.top + relY * after.height) - focalY;
+        },
+
+        // Step zoom for keyboard (+/-): dir > 0 zooms in, else out.
+        nudge(dir) {
+            if (!this.lib()) return;
+            this.zoomTo(this.lib().zoomForStep(this.zoom, dir));
+        },
+
+        // Back to fit: clear the pixel sizing on every slide (the active one
+        // may have changed since we zoomed) and hand sizing back to CSS.
+        reset() {
+            this.zoom = 1;
+            if (!this.area) return;
+            this.area.querySelectorAll('.marpit > svg[data-marpit-svg]').forEach(s => {
+                s.style.width = '';
+                s.style.height = '';
+            });
+            this.area.classList.remove('marp-zoomed');
+            this.area.scrollLeft = 0;
+            this.area.scrollTop = 0;
+        }
+    };
+
     // ============================================================
     // Presenter View (separate window with speaker notes)
     // ============================================================
@@ -1523,6 +1653,8 @@
         gotoSlide(index) {
             const slides = elements.content.querySelectorAll('.marpit > svg[data-marpit-svg]');
             if (!slides.length || index < 0 || index >= slides.length) return;
+            // Each slide opens at fit; clear any zoom carried from the last one.
+            MarpZoom.reset();
             slides.forEach((s, i) => s.classList.toggle('active', i === index));
             const panels = elements.content.querySelectorAll(
                 '#marpNotesArea > .speaker-notes-panel'
@@ -1619,6 +1751,12 @@
                 MarpSplitHandle.attach(splitEl, handleEl);
             }
 
+            // Enable trackpad pinch-to-zoom / pan on the slide pane.
+            const slideArea = document.getElementById('marpSlideArea');
+            if (slideArea) {
+                MarpZoom.init(slideArea);
+            }
+
             // Add navigation controls. The nav is appended to .content (NOT
             // marpit) so its `position: fixed` doesn't get clipped by the
             // grid container's overflow:hidden rule.
@@ -1692,6 +1830,8 @@
             );
 
             const showSlide = (index) => {
+                // Each slide opens at fit; clear any zoom from the last one.
+                MarpZoom.reset();
                 slides.forEach((slide, i) => {
                     slide.classList.toggle('active', i === index);
                 });
@@ -1731,6 +1871,11 @@
             const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
             const shrinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
             const toggleFullscreen = () => {
+                // Snap back to fit across the transition: the fullscreen and
+                // windowed panes have different sizes, and the fullscreen CSS
+                // owns the fit there, so a leftover pixel zoom would mis-size
+                // the slide. The user can re-pinch on either side.
+                MarpZoom.reset();
                 document.body.classList.toggle('marp-fullscreen');
                 const isFullscreen = document.body.classList.contains('marp-fullscreen');
                 if (fullscreenBtn) {
@@ -1826,6 +1971,17 @@
                     // shortcut and must not also open the presenter view.
                     e.preventDefault();
                     PresenterView.open();
+                } else if ((e.key === '+' || e.key === '=') && !e.metaKey && !e.ctrlKey) {
+                    // Keyboard zoom (centre-anchored) mirrors the pinch gesture.
+                    // Skip Cmd/Ctrl which the browser owns for page zoom.
+                    e.preventDefault();
+                    MarpZoom.nudge(1);
+                } else if ((e.key === '-' || e.key === '_') && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.nudge(-1);
+                } else if (e.key === '0' && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.reset();
                 } else if (e.key === 'Escape') {
                     e.preventDefault();
                     if (document.body.classList.contains('marp-fullscreen')) {
@@ -1843,6 +1999,7 @@
             // 800ms save timer doesn't fire after the editor element is gone.
             InlineNotesPanel.detach();
             MarpSplitHandle.detach();
+            MarpZoom.detach();
             elements.content.classList.remove('marp-viewer');
             document.body.classList.remove('marp-fullscreen');
             if (marpKeyHandler) {

package/src/static/index.html

@@ -181,6 +181,7 @@
     <script src="/static/lib/apiClient.js"></script>
     <script src="/static/lib/saveQueue.js"></script>
     <script src="/static/lib/tabRegistry.js"></script>
+    <script src="/static/lib/marpZoom.js"></script>
     <script src="/static/app.js"></script>
 </body>
 </html>

package/src/static/lib/marpZoom.js

@@ -0,0 +1,84 @@
+/**
+ * Pure math for the Marp slide zoom (src/static/app.js → MarpZoom).
+ *
+ * Imported from a `<script>` tag (no module loader), so the functions are
+ * exposed on `globalThis.MDVMarpZoom`. Kept DOM-free so the contain/clamp
+ * logic — the part that decides whether the whole slide stays visible — can
+ * be unit-tested without a browser (see tests/test-marp-zoom.js).
+ */
+(function () {
+  'use strict';
+
+  const ZOOM_MIN = 1;
+  const ZOOM_MAX = 6;
+
+  // Per-wheel-delta zoom sensitivity. Pinch deltas are small and frequent;
+  // the exponential keeps each step proportional so the gesture feels even
+  // across the whole range instead of accelerating near the top. Tuned for a
+  // snappy pinch (a 120-delta notch ≈ +62%; was 0.0015 ≈ +20%, 0.0025 ≈ +35%).
+  const WHEEL_FACTOR = 0.004;
+
+  // Keyboard +/- step ratio (zoom in / zoom out).
+  const STEP_IN = 1.25;
+  const STEP_OUT = 0.8;
+
+  /**
+   * "Contain" fit: the largest w×h with aspect `ratio` (= height/width) that
+   * fits inside areaW×areaH. Mirrors the CSS `max-width/height:100%` +
+   * `width/height:auto` resolution so the JS-driven zoom (≥1) starts exactly
+   * where the CSS fit (=1) leaves off — no jump at the 1.0 boundary.
+   *
+   * @param {number} areaW  available content width (px)
+   * @param {number} areaH  available content height (px)
+   * @param {number} ratio  slide height / slide width (e.g. 720/1280)
+   * @returns {{w:number,h:number}} fitted slide size, never below 1px
+   */
+  function containFit(areaW, areaH, ratio) {
+    if (!(areaW > 0) || !(areaH > 0) || !(ratio > 0)) {
+      return { w: 1, h: 1 };
+    }
+    let w = areaW;
+    let h = areaW * ratio;
+    if (h > areaH) {
+      h = areaH;
+      w = areaH / ratio;
+    }
+    return { w: Math.max(1, w), h: Math.max(1, h) };
+  }
+
+  /** Clamp a zoom level to [ZOOM_MIN, ZOOM_MAX]. */
+  function clampZoom(z) {
+    if (!Number.isFinite(z)) return ZOOM_MIN;
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z));
+  }
+
+  /**
+   * Next zoom level for a wheel/pinch delta. Negative deltaY (pinch open /
+   * scroll up) zooms in. Result is already clamped.
+   */
+  function zoomForWheel(current, deltaY) {
+    return clampZoom(current * Math.exp(-deltaY * WHEEL_FACTOR));
+  }
+
+  /** Next zoom level for a keyboard step. dir > 0 zooms in, else out. */
+  function zoomForStep(current, dir) {
+    return clampZoom(current * (dir > 0 ? STEP_IN : STEP_OUT));
+  }
+
+  /** True when a zoom level is effectively the fit (no pixel sizing needed). */
+  function isFit(z) {
+    return z <= ZOOM_MIN + 0.001;
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVMarpZoom = {
+      ZOOM_MIN,
+      ZOOM_MAX,
+      containFit,
+      clampZoom,
+      zoomForWheel,
+      zoomForStep,
+      isFit,
+    };
+  }
+})();

package/src/static/styles.css

@@ -1080,24 +1080,38 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
 .marp-slide-area {
     overflow: auto;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    /* `safe` keeps the slide reachable when zoomed larger than the pane:
+       plain `center` would push the overflowing top/left out of the scroll
+       range so you could never scroll back to them. */
+    align-items: safe center;
+    justify-content: safe center;
     padding: 20px;
     min-height: 0;
 }
 
+/* The pane is the trackpad-zoom focus target. Pinch (ctrl+wheel) zooms the
+   slide; two-finger scroll then pans via the pane's native overflow. */
+.marp-slide-area.marp-zoomed { cursor: grab; }
+.marp-slide-area.marp-zoomed.marp-panning { cursor: grabbing; }
+
 .marp-slide-area .marpit {
+    /* Definite height (the pane's height is definite) so the active SVG's
+       `max-height: 100%` actually clamps — without it the SVG was sized by
+       width alone and overflowed vertically on wide/short panes. */
     width: 100%;
-    max-height: 100%;
+    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: safe center;
+    justify-content: safe center;
 }
 
 .marp-slide-area .marpit > svg[data-marpit-svg] {
     display: none;
+    /* width:auto + height:auto + the two max-* caps give "contain": the SVG
+       (intrinsic 16:9 viewBox) scales down to fit BOTH pane dimensions. */
     max-width: 100%;
     max-height: 100%;
+    width: auto;
     height: auto;
     box-shadow: 0 4px 20px rgba(0,0,0,0.15);
     border-radius: 4px;
@@ -1107,6 +1121,14 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     display: block;
 }
 
+/* When zoomed past fit, MarpZoom sets explicit px width/height on the active
+   SVG. The caps must be lifted or they'd clamp it back to the pane size. */
+.marp-slide-area.marp-zoomed .marpit { width: auto; height: auto; }
+.marp-slide-area.marp-zoomed .marpit > svg[data-marpit-svg].active {
+    max-width: none;
+    max-height: none;
+}
+
 .marp-split-handle {
     cursor: row-resize;
     background: var(--border);