gitmaps 1.1.11 → 1.1.12

package/app/lib/low-zoom-preview.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
+import { estimatePreviewCharsPerLine, estimatePreviewLineCapacity, estimatePreviewMaxScroll, estimateTitleCharsPerLine, getLowZoomPreviewText, getLowZoomScale, wrapPreviewText } from './low-zoom-preview';
 
 describe('low zoom preview helpers', () => {
   test('anchors preview text to approximate saved scroll position', () => {
@@ -42,6 +42,13 @@ describe('low zoom preview helpers', () => {
     expect(estimatePreviewLineCapacity(700, 0.1)).toBeLessThan(estimatePreviewLineCapacity(700, 1));
   });
 
+  test('preview scroll range grows with longer files', () => {
+    const shortFile = { content: Array.from({ length: 8 }, (_, i) => `line-${i}`).join('\n') };
+    const longFile = { content: Array.from({ length: 80 }, (_, i) => `line-${i}`).join('\n') };
+    expect(estimatePreviewMaxScroll(shortFile, 700, 1)).toBeGreaterThanOrEqual(0);
+    expect(estimatePreviewMaxScroll(longFile, 700, 1)).toBeGreaterThan(estimatePreviewMaxScroll(shortFile, 700, 1));
+  });
+
   test('title typography is larger than body typography for readability', () => {
     const scale = getLowZoomScale(0.18);
     expect(scale.titleFont).toBeGreaterThan(scale.bodyFont);

package/app/lib/low-zoom-preview.ts

@@ -1,3 +1,5 @@
+import { getSettings } from './settings';
+
 const PREVIEWABLE_EXTS = new Set([
   'ts', 'tsx', 'js', 'jsx', 'json', 'css', 'scss', 'html', 'md', 'py', 'rs', 'go', 'vue', 'svelte', 'toml', 'yaml', 'yml', 'sh', 'sql', 'txt'
 ]);
@@ -5,8 +7,9 @@ const PREVIEWABLE_EXTS = new Set([
 export function getLowZoomScale(zoom: number) {
   const clampedZoom = Math.max(0.08, Math.min(1, zoom));
   const progress = (clampedZoom - 0.08) / (1 - 0.08);
+  const settings = getSettings();
 
-  const desiredScreenTitle = 8 + progress * 8;
+  const desiredScreenTitle = settings.previewFarTitlePx + progress * (settings.previewNearTitlePx - settings.previewFarTitlePx);
   const desiredScreenBody = 5.5 + progress * 6.5;
   const desiredScreenPadding = 6 + progress * 8;
   const desiredScreenGap = 4 + progress * 4;
@@ -87,12 +90,15 @@ function ellipsizeWrappedLines(lines: string[], maxLines: number) {
 
 export function estimatePreviewLineCapacity(height: number, zoom: number): number {
   const scale = getLowZoomScale(zoom);
+  const settings = getSettings();
   const titleLines = zoom >= 0.35 ? 2 : 1;
   const available = Math.max(
     scale.bodyLineHeight * 2,
     height - scale.padding * 2 - scale.titleLineHeight * titleLines - scale.bodyFont - scale.gap * 3,
   );
-  return Math.max(zoom >= 0.6 ? 20 : zoom >= 0.35 ? 12 : 3, Math.floor(available / scale.bodyLineHeight));
+  const progress = (Math.max(0.08, Math.min(1, zoom)) - 0.08) / (1 - 0.08);
+  const targetLines = settings.previewFarLines + progress * (settings.previewNearLines - settings.previewFarLines);
+  return Math.max(Math.round(targetLines), Math.floor(available / scale.bodyLineHeight));
 }
 
 export function estimateTitleCharsPerLine(width: number, zoom: number): number {
@@ -109,6 +115,13 @@ export function estimatePreviewCharsPerLine(width: number, zoom: number): number
   return Math.max(10, Math.floor(available / avgCharWidth));
 }
 
+export function estimatePreviewMaxScroll(file: any, height: number, zoom: number): number {
+  if (!file || !file.content) return 0;
+  const totalLines = String(file.content).split('\n').length;
+  const visibleLines = estimatePreviewLineCapacity(height, zoom);
+  return Math.max(0, (totalLines - visibleLines) * 20);
+}
+
 export function renderLowZoomPreviewCanvas(
   canvas: HTMLCanvasElement,
   params: {

package/app/lib/settings-modal.tsx

@@ -144,6 +144,26 @@ function SettingsPanel({ settings }: { settings: GitCanvasSettings }) {
                     </SettingsRow>
                 </SettingsSection>
 
+                {/* Preview Mode Section */}
+                <SettingsSection title="Preview Mode">
+                    <SettingsRow label="Far Zoom Title" desc="Filename size when zoomed far out">
+                        <Slider id="settingPreviewFarTitlePx" valueId="previewFarTitlePxValue"
+                            min={6} max={14} step={1} value={settings.previewFarTitlePx} suffix="px" />
+                    </SettingsRow>
+                    <SettingsRow label="Near Zoom Title" desc="Filename size when zoomed in within preview mode">
+                        <Slider id="settingPreviewNearTitlePx" valueId="previewNearTitlePxValue"
+                            min={10} max={24} step={1} value={settings.previewNearTitlePx} suffix="px" />
+                    </SettingsRow>
+                    <SettingsRow label="Far Zoom Lines" desc="Minimum content lines shown when zoomed far out">
+                        <Slider id="settingPreviewFarLines" valueId="previewFarLinesValue"
+                            min={1} max={8} step={1} value={settings.previewFarLines} suffix="" />
+                    </SettingsRow>
+                    <SettingsRow label="Near Zoom Lines" desc="Target content lines shown when zoomed in">
+                        <Slider id="settingPreviewNearLines" valueId="previewNearLinesValue"
+                            min={8} max={40} step={1} value={settings.previewNearLines} suffix="" />
+                    </SettingsRow>
+                </SettingsSection>
+
                 {/* Advanced Section */}
                 <SettingsSection title="Advanced">
                     <SettingsRow label="Max Visible Lines" desc="Lines shown per card before virtual scroll">
@@ -261,6 +281,38 @@ export function openSettingsModal(ctx?: any) {
         updateSettings({ maxVisibleLines: parseInt(maxLinesSlider.value) });
     });
 
+    const previewFarTitleSlider = _modal.querySelector('#settingPreviewFarTitlePx') as HTMLInputElement;
+    const previewFarTitleValue = _modal.querySelector('#previewFarTitlePxValue')!;
+    previewFarTitleSlider?.addEventListener('input', () => {
+        previewFarTitleValue.textContent = `${previewFarTitleSlider.value}px`;
+        updateSettings({ previewFarTitlePx: parseInt(previewFarTitleSlider.value) });
+        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
+    });
+
+    const previewNearTitleSlider = _modal.querySelector('#settingPreviewNearTitlePx') as HTMLInputElement;
+    const previewNearTitleValue = _modal.querySelector('#previewNearTitlePxValue')!;
+    previewNearTitleSlider?.addEventListener('input', () => {
+        previewNearTitleValue.textContent = `${previewNearTitleSlider.value}px`;
+        updateSettings({ previewNearTitlePx: parseInt(previewNearTitleSlider.value) });
+        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
+    });
+
+    const previewFarLinesSlider = _modal.querySelector('#settingPreviewFarLines') as HTMLInputElement;
+    const previewFarLinesValue = _modal.querySelector('#previewFarLinesValue')!;
+    previewFarLinesSlider?.addEventListener('input', () => {
+        previewFarLinesValue.textContent = previewFarLinesSlider.value;
+        updateSettings({ previewFarLines: parseInt(previewFarLinesSlider.value) });
+        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
+    });
+
+    const previewNearLinesSlider = _modal.querySelector('#settingPreviewNearLines') as HTMLInputElement;
+    const previewNearLinesValue = _modal.querySelector('#previewNearLinesValue')!;
+    previewNearLinesSlider?.addEventListener('input', () => {
+        previewNearLinesValue.textContent = previewNearLinesSlider.value;
+        updateSettings({ previewNearLines: parseInt(previewNearLinesSlider.value) });
+        window.dispatchEvent(new CustomEvent('gitcanvas:preview-settings-changed'));
+    });
+
     // Wire switches
     const minimapSwitch = _modal.querySelector('#settingMinimap') as HTMLInputElement;
     minimapSwitch?.addEventListener('change', () => {

package/app/lib/settings.ts

@@ -31,6 +31,14 @@ export interface GitCanvasSettings {
     heatmapEnabled: boolean;
     /** Heatmap time range in days */
     heatmapDays: number;
+    /** Preview mode far-zoom title size (screen px) */
+    previewFarTitlePx: number;
+    /** Preview mode near-zoom title size (screen px) */
+    previewNearTitlePx: number;
+    /** Preview mode far-zoom minimum visible lines */
+    previewFarLines: number;
+    /** Preview mode near-zoom target visible lines */
+    previewNearLines: number;
 }
 
 const DEFAULTS: GitCanvasSettings = {
@@ -46,6 +54,10 @@ const DEFAULTS: GitCanvasSettings = {
     popupFontSize: 14,
     heatmapEnabled: false,
     heatmapDays: 90,
+    previewFarTitlePx: 8,
+    previewNearTitlePx: 16,
+    previewFarLines: 3,
+    previewNearLines: 20,
 };
 
 let _settings: GitCanvasSettings | null = null;

package/app/lib/viewport-culling.ts

@@ -23,7 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
-import { getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
+import { estimatePreviewMaxScroll, getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -632,6 +632,42 @@ export function setupPillInteraction(ctx: CanvasContext) {
     let pillMoveInfos: { pill: HTMLElement; path: string; startLeft: number; startTop: number }[] = [];
     const DRAG_THRESHOLD = 5;
 
+    ctx.canvas.addEventListener('wheel', (e: WheelEvent) => {
+        const pill = (e.target as HTMLElement).closest('.file-pill') as HTMLElement;
+        if (!pill) return;
+        if (e.ctrlKey || e.metaKey) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        const path = pill.dataset.path || '';
+        if (!path) return;
+
+        const file = (pill as any)._fileData || ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+        const zoom = ctx.snap().context.zoom || 1;
+        const height = parseFloat(pill.style.height) || 700;
+        const current = getSavedScrollTop(ctx, path);
+        const maxScroll = estimatePreviewMaxScroll(file, height, zoom);
+        const next = Math.max(0, Math.min(maxScroll, current + e.deltaY));
+        if (next === current) return;
+
+        const key = `scroll:${path}`;
+        const existing = ctx.positions.get(key) || {};
+        ctx.positions.set(key, { ...existing, x: next, y: existing.y || 0 });
+        try {
+            const { debounceSaveScroll } = require('./cards');
+            debounceSaveScroll(ctx, path, next);
+        } catch { }
+        updatePillCardLayout(ctx, pill, zoom, pill.dataset.changed === 'true');
+    }, { passive: false });
+
+    window.addEventListener('gitcanvas:preview-settings-changed', () => {
+        const zoom = ctx.snap().context.zoom || 1;
+        for (const [, pill] of pillCards) {
+            updatePillCardLayout(ctx, pill, zoom, pill.dataset.changed === 'true');
+        }
+    });
+
     ctx.canvas.addEventListener('mousedown', (e: MouseEvent) => {
         if (e.button !== 0) return;
         const pill = (e.target as HTMLElement).closest('.file-pill') as HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"