gitmaps 1.1.16 → 1.1.18

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 ──────────────────────────────────────────
@@ -170,6 +170,12 @@ function getSavedScrollTop(ctx: CanvasContext, path: string): number {
     return saved?.x || 0;
 }
 
+function resolvePreviewFile(ctx: CanvasContext, path: string, fallback?: any) {
+    const commitFile = ctx.commitFilesData?.find(f => f.path === path) || null;
+    const allFile = ctx.allFilesData?.find(f => f.path === path) || null;
+    return commitFile || fallback || allFile || null;
+}
+
 /**
  * Create a lightweight pill placeholder for a file.
  * ~3 DOM nodes vs ~100+ for a full card = massive perf win at low zoom.
@@ -204,6 +210,16 @@ 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:26px;bottom:10px;width:12px;pointer-events:none;z-index:2;';
+    pill.appendChild(diffOverlay);
+
+    const scrollOverlay = document.createElement('div');
+    scrollOverlay.className = 'file-pill-scroll-overlay';
+    scrollOverlay.style.cssText = 'position:absolute;top:10px;right:15px;bottom:10px;width:9px;pointer-events:auto;z-index:3;';
+    pill.appendChild(scrollOverlay);
+
     (pill as any)._fileData = file;
     updatePillCardLayout(ctx, pill, zoom, isChanged);
 
@@ -223,8 +239,11 @@ 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 file = (pill as any)._fileData || ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+    const diffOverlay = pill.querySelector('.file-pill-diff-overlay') as HTMLElement | null;
+    const scrollOverlay = pill.querySelector('.file-pill-scroll-overlay') as HTMLElement | null;
+    const file = resolvePreviewFile(ctx, path, (pill as any)._fileData);
     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 +254,116 @@ function updatePillCardLayout(ctx: CanvasContext, pill: HTMLElement, zoom: numbe
         width: w,
         height: h,
         zoom,
-        scrollTop: getSavedScrollTop(ctx, path),
+        scrollTop,
         accentColor: getPillColor(path, changed),
         isChanged: changed,
     });
+
+    const metrics = getPreviewScrollMetrics(file, h, zoom, scrollTop);
+
+    if (diffOverlay) {
+        const markers = collectPreviewDiffMarkers(file, metrics.totalLines);
+        diffOverlay.innerHTML = '';
+        diffOverlay.style.top = `${metrics.trackPadding}px`;
+        diffOverlay.style.bottom = `${metrics.trackPadding}px`;
+        diffOverlay.style.right = '26px';
+        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 : 10;
+            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.28),0 0 10px ${marker.color}88;cursor:pointer;padding:0;pointer-events:auto;opacity:1;`;
+            btn.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                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);
+        }
+    }
+
+    if (scrollOverlay) {
+        scrollOverlay.innerHTML = '';
+        scrollOverlay.style.top = `${metrics.trackPadding}px`;
+        scrollOverlay.style.bottom = `${metrics.trackPadding}px`;
+
+        const track = document.createElement('button');
+        track.type = 'button';
+        track.className = 'file-pill-scroll-track';
+        track.title = 'Scroll preview';
+        track.style.cssText = `position:absolute;inset:0;border:none;border-radius:999px;background:rgba(255,255,255,0.08);padding:0;cursor:pointer;`;
+        track.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = track.getBoundingClientRect();
+            const thumbHeight = Math.max(18, metrics.thumbHeight);
+            const localY = Math.max(0, Math.min(rect.height, e.clientY - rect.top));
+            const thumbCenter = localY - thumbHeight / 2;
+            const ratio = rect.height > thumbHeight ? Math.max(0, Math.min(1, thumbCenter / (rect.height - thumbHeight))) : 0;
+            const next = ratio * metrics.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);
+        });
+        scrollOverlay.appendChild(track);
+
+        const thumb = document.createElement('div');
+        thumb.className = 'file-pill-scroll-thumb';
+        thumb.style.cssText = `position:absolute;left:0;width:9px;height:${metrics.thumbHeight}px;top:${Math.max(0, metrics.thumbY - metrics.trackPadding)}px;border-radius:999px;background:rgba(196,181,253,0.98);box-shadow:0 0 0 1px rgba(255,255,255,0.24),0 4px 12px rgba(0,0,0,0.35);cursor:grab;`;
+        thumb.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const startY = e.clientY;
+            const startScroll = scrollTop;
+            const dragTravel = Math.max(1, metrics.trackHeight - metrics.thumbHeight);
+            const maxScroll = Math.max(0, metrics.maxScroll);
+
+            const onMove = (moveEvent: MouseEvent) => {
+                moveEvent.preventDefault();
+                const deltaY = moveEvent.clientY - startY;
+                const next = maxScroll > 0 ? Math.max(0, Math.min(maxScroll, startScroll + (deltaY / dragTravel) * maxScroll)) : 0;
+                const key = `scroll:${path}`;
+                const existing = ctx.positions.get(key) || {};
+                ctx.positions.set(key, { ...existing, x: next, y: existing.y || 0 });
+                updatePillCardLayout(ctx, pill, zoom, changed);
+            };
+            const onUp = () => {
+                const finalScroll = getSavedScrollTop(ctx, path);
+                try {
+                    const { debounceSaveScroll } = require('./cards');
+                    debounceSaveScroll(ctx, path, finalScroll);
+                } catch { }
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', onUp);
+            };
+            window.addEventListener('mousemove', onMove);
+            window.addEventListener('mouseup', onUp);
+        });
+        scrollOverlay.appendChild(thumb);
+    }
 }
 
 /**
@@ -482,7 +607,7 @@ export function performViewportCulling(ctx: CanvasContext) {
                 );
 
                 if (inView) {
-                    const file = ctx.allFilesData?.find(f => f.path === path) || ctx.commitFilesData?.find(f => f.path === path) || null;
+                    const file = resolvePreviewFile(ctx, path);
                     const pill = createPillCard(ctx, file, path, x, y, w, h, isChanged, zoom, true);
                     if (isChanged) pill.dataset.changed = 'true';
                     ctx.canvas.appendChild(pill);
@@ -661,7 +786,7 @@ export function setupPillInteraction(ctx: CanvasContext) {
         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 file = resolvePreviewFile(ctx, path, (pill as any)._fileData);
         const zoom = ctx.snap().context.zoom || 1;
         const height = parseFloat(pill.style.height) || 700;
         const current = getSavedScrollTop(ctx, path);

package/package.json

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