reviw 0.10.4 → 0.10.6

package/cli.cjs

@@ -21,7 +21,7 @@ const marked = require("marked");
 const yaml = require("js-yaml");
 
 // --- CLI arguments ---------------------------------------------------------
-const VERSION = "0.10.3";
+const VERSION = require("./package.json").version;
 const args = process.argv.slice(2);
 
 const filePaths = [];
@@ -2305,6 +2305,39 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     .fullscreen-content .mermaid svg {
       display: block;
     }
+    /* Minimap */
+    .minimap {
+      position: absolute;
+      top: 70px;
+      right: 20px;
+      width: 200px;
+      height: 150px;
+      background: var(--panel-alpha);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .minimap-content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px;
+    }
+    .minimap-content svg {
+      max-width: 100%;
+      max-height: 100%;
+      opacity: 0.6;
+    }
+    .minimap-viewport {
+      position: absolute;
+      border: 2px solid var(--accent);
+      background: rgba(102, 126, 234, 0.2);
+      pointer-events: none;
+      border-radius: 2px;
+    }
     /* Error toast */
     .mermaid-error-toast {
       position: fixed;
@@ -2470,6 +2503,10 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
     <div class="fullscreen-content" id="fs-content">
       <div class="mermaid-wrapper" id="fs-wrapper"></div>
     </div>
+    <div class="minimap" id="fs-minimap">
+      <div class="minimap-content" id="fs-minimap-content"></div>
+      <div class="minimap-viewport" id="fs-minimap-viewport"></div>
+    </div>
   </div>
   <div class="mermaid-error-toast" id="mermaid-error-toast"></div>
   <div class="copy-toast" id="copy-toast">Copied to clipboard!</div>
@@ -3578,12 +3615,15 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       const fsWrapper = document.getElementById('fs-wrapper');
       const fsContent = document.getElementById('fs-content');
       const fsZoomInfo = document.getElementById('fs-zoom-info');
+      const minimapContent = document.getElementById('fs-minimap-content');
+      const minimapViewport = document.getElementById('fs-minimap-viewport');
       let currentZoom = 1;
       let initialZoom = 1;
       let panX = 0, panY = 0;
       let isPanning = false;
       let startX, startY;
       let svgNaturalWidth = 0, svgNaturalHeight = 0;
+      let minimapScale = 1;
 
       function openFullscreen(mermaidEl) {
         const svg = mermaidEl.querySelector('svg');
@@ -3592,6 +3632,11 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         const clonedSvg = svg.cloneNode(true);
         fsWrapper.appendChild(clonedSvg);
 
+        // Setup minimap
+        minimapContent.innerHTML = '';
+        const minimapSvg = svg.cloneNode(true);
+        minimapContent.appendChild(minimapSvg);
+
         // Get SVG's intrinsic/natural size from viewBox or attributes
         const viewBox = svg.getAttribute('viewBox');
         let naturalWidth, naturalHeight;
@@ -3608,6 +3653,11 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         svgNaturalWidth = naturalWidth;
         svgNaturalHeight = naturalHeight;
 
+        // Calculate minimap scale
+        const minimapMaxWidth = 184; // 200 - 16 padding
+        const minimapMaxHeight = 134; // 150 - 16 padding
+        minimapScale = Math.min(minimapMaxWidth / naturalWidth, minimapMaxHeight / naturalHeight);
+
         clonedSvg.style.width = naturalWidth + 'px';
         clonedSvg.style.height = naturalHeight + 'px';
 
@@ -3628,8 +3678,11 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
         panX = (viewportWidth - scaledWidth) / 2 + 20;
         panY = (viewportHeight - scaledHeight) / 2 + 60;
 
-        updateTransform();
         fsOverlay.classList.add('visible');
+        // Wait for DOM to render before calculating minimap position
+        requestAnimationFrame(() => {
+          updateTransform();
+        });
       }
 
       function closeFullscreen() {
@@ -3639,6 +3692,71 @@ function htmlTemplate(dataRows, cols, title, mode, previewHtml) {
       function updateTransform() {
         fsWrapper.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + currentZoom + ')';
         fsZoomInfo.textContent = Math.round(currentZoom * 100) + '%';
+        updateMinimap();
+      }
+
+      function updateMinimap() {
+        if (!svgNaturalWidth || !svgNaturalHeight) return;
+
+        const viewportWidth = fsContent.clientWidth;
+        const viewportHeight = fsContent.clientHeight;
+
+        // Minimap container dimensions (inner area)
+        const mmWidth = 184;  // 200 - 16 padding
+        const mmHeight = 134; // 150 - 16 padding
+        const mmPadding = 8;
+
+        // SVG thumbnail size in minimap (scaled to fit)
+        const mmSvgWidth = svgNaturalWidth * minimapScale;
+        const mmSvgHeight = svgNaturalHeight * minimapScale;
+        // SVG thumbnail position (centered in minimap)
+        const mmSvgLeft = (mmWidth - mmSvgWidth) / 2 + mmPadding;
+        const mmSvgTop = (mmHeight - mmSvgHeight) / 2 + mmPadding;
+
+        // Calculate which part of the SVG is visible in the viewport
+        // transform: translate(panX, panY) scale(currentZoom)
+        // The viewport shows SVG region starting at (-panX/zoom, -panY/zoom)
+        const svgVisibleLeft = -panX / currentZoom;
+        const svgVisibleTop = -panY / currentZoom;
+        const svgVisibleWidth = viewportWidth / currentZoom;
+        const svgVisibleHeight = viewportHeight / currentZoom;
+
+        // Convert to minimap coordinates
+        let vpLeft = mmSvgLeft + svgVisibleLeft * minimapScale;
+        let vpTop = mmSvgTop + svgVisibleTop * minimapScale;
+        let vpWidth = svgVisibleWidth * minimapScale;
+        let vpHeight = svgVisibleHeight * minimapScale;
+
+        // Clamp to minimap bounds (the viewport rect should stay within minimap)
+        const mmLeft = mmPadding;
+        const mmTop = mmPadding;
+        const mmRight = mmWidth + mmPadding;
+        const mmBottom = mmHeight + mmPadding;
+
+        // Adjust if viewport extends beyond minimap bounds
+        if (vpLeft < mmLeft) {
+          vpWidth -= (mmLeft - vpLeft);
+          vpLeft = mmLeft;
+        }
+        if (vpTop < mmTop) {
+          vpHeight -= (mmTop - vpTop);
+          vpTop = mmTop;
+        }
+        if (vpLeft + vpWidth > mmRight) {
+          vpWidth = mmRight - vpLeft;
+        }
+        if (vpTop + vpHeight > mmBottom) {
+          vpHeight = mmBottom - vpTop;
+        }
+
+        // Ensure minimum size and positive dimensions
+        vpWidth = Math.max(20, vpWidth);
+        vpHeight = Math.max(15, vpHeight);
+
+        minimapViewport.style.left = vpLeft + 'px';
+        minimapViewport.style.top = vpTop + 'px';
+        minimapViewport.style.width = vpWidth + 'px';
+        minimapViewport.style.height = vpHeight + 'px';
       }
 
       // Use multiplicative zoom for consistent behavior

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {