gitmaps 1.1.15 → 1.1.17

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

@@ -69,6 +69,13 @@ describe('low zoom preview helpers', () => {
     expect(markers.some((m) => m.color === '#ef4444')).toBe(true);
   });
 
+  test('whole-file added/deleted states create full-height rail markers', () => {
+    const added = collectPreviewDiffMarkers({ status: 'added' }, 20);
+    const deleted = collectPreviewDiffMarkers({ status: 'deleted' }, 20);
+    expect(added[0]?.height).toBe(1);
+    expect(deleted[0]?.height).toBe(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

@@ -135,11 +135,20 @@ export function getPreviewScrollMetrics(file: any, height: number, zoom: number,
 }
 
 export function collectPreviewDiffMarkers(file: any, totalLines: number) {
-  const markers: Array<{ ratio: number; color: string }> = [];
+  const markers: Array<{ ratio: number; color: string; height?: number }> = [];
   const safeTotal = Math.max(1, totalLines);
   const added = file?.addedLines instanceof Set ? Array.from(file.addedLines) : [];
   const deletedBefore = file?.deletedBeforeLine instanceof Map ? Array.from(file.deletedBeforeLine.keys()) : [];
 
+  if (file?.status === 'added') {
+    markers.push({ ratio: 0, color: '#22c55e', height: 1 });
+    return markers;
+  }
+  if (file?.status === 'deleted') {
+    markers.push({ ratio: 0, color: '#ef4444', height: 1 });
+    return markers;
+  }
+
   for (const line of added) {
     markers.push({ ratio: Math.max(0, Math.min(1, (line - 1) / safeTotal)), color: '#22c55e' });
   }
@@ -185,9 +194,9 @@ export function renderLowZoomPreviewCanvas(
   ctx.fill();
 
   const accentWidth = Math.max(6, width * 0.012);
-  const scrollbarWidth = 6;
-  const markerLaneWidth = 4;
-  const rightRailWidth = scrollbarWidth + markerLaneWidth + 8;
+  const scrollbarWidth = 7;
+  const markerLaneWidth = 8;
+  const rightRailWidth = scrollbarWidth + markerLaneWidth + 12;
   ctx.fillStyle = accentColor;
   ctx.fillRect(0, 0, accentWidth, height);
 
@@ -238,23 +247,29 @@ export function renderLowZoomPreviewCanvas(
     ctx.fillText(line, leftInset, y);
   });
 
-  const trackX = width - scrollbarWidth - 4;
-  const markerX = trackX - markerLaneWidth - 3;
+  const trackX = width - scrollbarWidth - 5;
+  const markerX = trackX - markerLaneWidth - 4;
   const trackY = scrollMetrics.trackPadding;
   const trackHeight = scrollMetrics.trackHeight;
 
   ctx.fillStyle = 'rgba(255,255,255,0.08)';
+  roundRect(ctx, markerX, trackY, markerLaneWidth, trackHeight, 3);
+  ctx.fill();
+
+  ctx.fillStyle = 'rgba(255,255,255,0.12)';
   roundRect(ctx, trackX, trackY, scrollbarWidth, trackHeight, scrollbarWidth / 2);
   ctx.fill();
 
   const markers = collectPreviewDiffMarkers(file, scrollMetrics.totalLines);
   for (const marker of markers) {
-    const y = trackY + marker.ratio * trackHeight;
+    const markerHeight = marker.height === 1 ? trackHeight : 5;
+    const y = marker.height === 1 ? trackY : trackY + marker.ratio * Math.max(0, trackHeight - markerHeight);
     ctx.fillStyle = marker.color;
-    ctx.fillRect(markerX, Math.max(trackY, y), markerLaneWidth, 3);
+    roundRect(ctx, markerX, Math.max(trackY, y), markerLaneWidth, markerHeight, 2);
+    ctx.fill();
   }
 
-  ctx.fillStyle = 'rgba(196,181,253,0.9)';
+  ctx.fillStyle = 'rgba(196,181,253,0.96)';
   roundRect(ctx, trackX, scrollMetrics.thumbY, scrollbarWidth, scrollMetrics.thumbHeight, scrollbarWidth / 2);
   ctx.fill();
 }

package/app/lib/viewport-culling.ts

@@ -23,7 +23,7 @@
  */
 import { measure } from 'measure-fn';
 import type { CanvasContext } from './context';
-import { estimatePreviewMaxScroll, getLowZoomScale, renderLowZoomPreviewCanvas } from './low-zoom-preview';
+import { collectPreviewDiffMarkers, estimatePreviewMaxScroll, getLowZoomScale, getPreviewScrollMetrics, renderLowZoomPreviewCanvas } from './low-zoom-preview';
 import { materializeViewport } from './xydraw-bridge';
 
 // ── Culling state ──────────────────────────────────────────
@@ -204,6 +204,11 @@ function createPillCard(ctx: CanvasContext, file: any, path: string, x: number,
     canvas.style.cssText = 'display:block;width:100%;height:100%;pointer-events:none;';
     pill.appendChild(canvas);
 
+    const diffOverlay = document.createElement('div');
+    diffOverlay.className = 'file-pill-diff-overlay';
+    diffOverlay.style.cssText = 'position:absolute;top:10px;right:15px;bottom:10px;width:12px;pointer-events:none;z-index:2;';
+    pill.appendChild(diffOverlay);
+
     (pill as any)._fileData = file;
     updatePillCardLayout(ctx, pill, zoom, isChanged);
 
@@ -223,8 +228,10 @@ function updatePillCardLayout(ctx: CanvasContext, pill: HTMLElement, zoom: numbe
     const scale = getLowZoomScale(zoom);
     const path = pill.dataset.path || '';
     const canvas = pill.querySelector('.file-pill-canvas') as HTMLCanvasElement | null;
+    const diffOverlay = pill.querySelector('.file-pill-diff-overlay') as HTMLElement | null;
     const file = (pill as any)._fileData || ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
     const changed = isChanged ?? pill.dataset.changed === 'true';
+    const scrollTop = getSavedScrollTop(ctx, path);
     pill.dataset.zoomBucket = zoom.toFixed(3);
     pill.style.borderRadius = `${Math.max(6, scale.radius)}px`;
     if (!canvas) return;
@@ -235,10 +242,49 @@ function updatePillCardLayout(ctx: CanvasContext, pill: HTMLElement, zoom: numbe
         width: w,
         height: h,
         zoom,
-        scrollTop: getSavedScrollTop(ctx, path),
+        scrollTop,
         accentColor: getPillColor(path, changed),
         isChanged: changed,
     });
+
+    if (diffOverlay) {
+        const metrics = getPreviewScrollMetrics(file, h, zoom, scrollTop);
+        const markers = collectPreviewDiffMarkers(file, metrics.totalLines);
+        diffOverlay.innerHTML = '';
+        diffOverlay.style.top = `${metrics.trackPadding}px`;
+        diffOverlay.style.bottom = `${metrics.trackPadding}px`;
+        diffOverlay.style.right = '15px';
+        diffOverlay.style.width = '12px';
+        diffOverlay.style.pointerEvents = 'auto';
+
+        for (const marker of markers) {
+            const btn = document.createElement('button');
+            const markerHeight = marker.height === 1 ? metrics.trackHeight : 8;
+            const y = marker.height === 1 ? 0 : marker.ratio * Math.max(0, metrics.trackHeight - markerHeight);
+            btn.type = 'button';
+            btn.className = 'file-pill-diff-marker';
+            btn.title = marker.color === '#22c55e' ? 'Jump to added lines' : 'Jump to deleted lines';
+            btn.style.cssText = `position:absolute;left:0;width:12px;height:${markerHeight}px;top:${y}px;border:none;border-radius:3px;background:${marker.color};box-shadow:0 0 0 1px rgba(255,255,255,0.18),0 0 10px ${marker.color}66;cursor:pointer;padding:0;pointer-events:auto;`;
+            btn.addEventListener('mousedown', (e) => {
+                e.stopPropagation();
+            });
+            btn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const maxScroll = estimatePreviewMaxScroll(file, h, zoom);
+                const next = marker.height === 1 ? 0 : Math.max(0, Math.min(maxScroll, marker.ratio * maxScroll));
+                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, changed);
+            });
+            diffOverlay.appendChild(btn);
+        }
+    }
 }
 
 /**

package/package.json

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