gitmaps 1.0.0

package/app/lib/card-diff-markers.ts

@@ -0,0 +1,270 @@
+// @ts-nocheck
+/**
+ * Card diff markers — scrollbar annotations, deleted-lines overlay,
+ * and scroll-to-line helper.
+ *
+ * Extracted from cards.tsx to reduce file size.
+ * These are internal helpers called from createFileCard / createAllFileCard.
+ */
+import { escapeHtml } from './utils';
+
+// ─── Scroll to line helper ──────────────────────────────
+export function scrollToLine(body: HTMLElement, lineNum: number, totalLines: number) {
+    // Canvas-text mode: container has .canvas-container class, no .diff-line elements
+    const canvasContainer = body.querySelector('.canvas-container') as HTMLElement;
+    if (canvasContainer) {
+        // Read font size from settings for accurate line height calculation
+        let lineHeight = 20; // default
+        try {
+            const stored = localStorage.getItem('gitcanvas:settings');
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                if (parsed.fontSize) lineHeight = parsed.fontSize + 8;
+            }
+        } catch { }
+        const targetScroll = (lineNum - 1) * lineHeight - canvasContainer.clientHeight / 4;
+        canvasContainer.scrollTop = Math.max(0, targetScroll);
+        return;
+    }
+
+    // DOM mode: find the actual line element
+    const lineEl = body.querySelector(`.diff-line[data-line="${lineNum}"]`) as HTMLElement;
+    const pre = body.querySelector('.file-content-preview pre') as HTMLElement;
+    if (!pre) return;
+
+    if (lineEl) {
+        // getBoundingClientRect() returns viewport coordinates (affected by CSS transform/zoom).
+        // pre.scrollTop works in LOCAL content coordinates (unaffected by zoom).
+        // Compute the effective zoom from rendered vs logical dimensions.
+        const preRect = pre.getBoundingClientRect();
+        const zoom = preRect.height / pre.clientHeight || 1;
+        const lineRect = lineEl.getBoundingClientRect();
+        // Convert viewport delta to content delta by dividing by zoom
+        pre.scrollTop += (lineRect.top - preRect.top) / zoom;
+    } else {
+        // Fallback to percentage-based scroll
+        const pct = (lineNum - 1) / totalLines;
+        pre.scrollTop = pct * pre.scrollHeight;
+    }
+}
+
+// ─── Merge line numbers into contiguous regions ─────────
+function mergeIntoRegions(lineNums: number[], gap = 4): { start: number; end: number }[] {
+    const sorted = lineNums.sort((a, b) => a - b);
+    const regions: { start: number; end: number }[] = [];
+    for (const line of sorted) {
+        const last = regions[regions.length - 1];
+        if (last && line <= last.end + gap) {
+            last.end = line;
+        } else {
+            regions.push({ start: line, end: line });
+        }
+    }
+    return regions;
+}
+
+// ─── Diff marker strip (scrollbar annotations) ─────────
+export function buildDiffMarkerStrip(card: HTMLElement, body: HTMLElement, addedLines: Set<number>, totalLines: number, deletedBeforeLine?: Map<number, string[]>, fileHunks?: any[]) {
+    if (!body || totalLines === 0) return;
+
+    const strip = document.createElement('div');
+    strip.className = 'diff-marker-strip';
+
+    // Green markers for added lines
+    const addedRegions = mergeIntoRegions(Array.from(addedLines));
+    for (const region of addedRegions) {
+        const topPct = ((region.start - 1) / totalLines) * 100;
+        const heightPct = Math.max(0.5, ((region.end - region.start + 1) / totalLines) * 100);
+
+        const marker = document.createElement('div');
+        marker.className = 'diff-marker diff-marker--add';
+        marker.style.top = `${topPct}%`;
+        marker.style.height = `${heightPct}%`;
+        marker.title = region.start === region.end
+            ? `Added: line ${region.start}`
+            : `Added: lines ${region.start}–${region.end}`;
+
+        marker.addEventListener('click', (e) => {
+            e.stopPropagation();
+            scrollToLine(body, region.start, totalLines);
+        });
+
+        strip.appendChild(marker);
+    }
+
+    // Red markers for deleted line locations
+    if (deletedBeforeLine && deletedBeforeLine.size > 0) {
+        const deletedRegions = mergeIntoRegions(Array.from(deletedBeforeLine.keys()));
+        for (const region of deletedRegions) {
+            const topPct = ((region.start - 1) / totalLines) * 100;
+            const heightPct = Math.max(0.5, ((region.end - region.start + 1) / totalLines) * 100);
+
+            const marker = document.createElement('div');
+            marker.className = 'diff-marker diff-marker--del';
+            marker.style.top = `${topPct}%`;
+            marker.style.height = `${heightPct}%`;
+            let delCount = 0;
+            for (let ln = region.start; ln <= region.end; ln++) {
+                delCount += (deletedBeforeLine.get(ln) || []).length;
+            }
+            marker.title = `${delCount} deleted line${delCount > 1 ? 's' : ''} near line ${region.start}`;
+
+            marker.addEventListener('click', (e) => {
+                e.stopPropagation();
+                scrollToLine(body, region.start, totalLines);
+            });
+
+            strip.appendChild(marker);
+        }
+    }
+
+    // Build navigation regions
+    const allChangedLines = [
+        ...Array.from(addedLines),
+        ...(deletedBeforeLine ? Array.from(deletedBeforeLine.keys()) : [])
+    ];
+    const allRegions = mergeIntoRegions(allChangedLines);
+
+    const navRegions: { start: number; end: number }[] = fileHunks && fileHunks.length > 0
+        ? fileHunks.map((h: any) => ({ start: h.newStart, end: h.newStart + (h.newCount || 1) - 1 }))
+        : allRegions;
+
+    // Insert nav buttons inline inside the .file-path element
+    if (navRegions.length > 0) {
+        let currentIdx = -1;
+
+        const filePath = body.querySelector('.file-path') as HTMLElement;
+        if (filePath) {
+            filePath.style.display = 'flex';
+            filePath.style.alignItems = 'center';
+            filePath.style.justifyContent = 'space-between';
+
+            const pathText = filePath.textContent || '';
+            filePath.textContent = '';
+            const pathSpan = document.createElement('span');
+            pathSpan.textContent = pathText;
+            pathSpan.style.overflow = 'hidden';
+            pathSpan.style.textOverflow = 'ellipsis';
+            filePath.appendChild(pathSpan);
+
+            const navGroup = document.createElement('span');
+            navGroup.className = 'diff-nav-inline';
+            navGroup.title = `${navRegions.length} change${navRegions.length > 1 ? 's' : ''}`;
+
+            const navLabel = document.createElement('span');
+            navLabel.className = 'diff-nav-label';
+            navLabel.textContent = `—/${navRegions.length}`;
+
+            const navUp = document.createElement('button');
+            navUp.className = 'diff-nav-btn';
+            navUp.textContent = '▲';
+            navUp.title = 'Previous change';
+            navUp.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (currentIdx <= 0) currentIdx = navRegions.length - 1;
+                else currentIdx--;
+                scrollToLine(body, navRegions[currentIdx].start, totalLines);
+                navLabel.textContent = `${currentIdx + 1}/${navRegions.length}`;
+            });
+
+            const navDown = document.createElement('button');
+            navDown.className = 'diff-nav-btn';
+            navDown.textContent = '▼';
+            navDown.title = 'Next change';
+            navDown.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (currentIdx >= navRegions.length - 1) currentIdx = 0;
+                else currentIdx++;
+                scrollToLine(body, navRegions[currentIdx].start, totalLines);
+                navLabel.textContent = `${currentIdx + 1}/${navRegions.length}`;
+            });
+
+            navGroup.appendChild(navUp);
+            navGroup.appendChild(navLabel);
+            navGroup.appendChild(navDown);
+            filePath.appendChild(navGroup);
+        }
+    }
+
+    // Append strip to card (not body) so it doesn't scroll with content
+    card.appendChild(strip);
+}
+
+// ─── Deleted lines hover overlay ────────────────────────
+export function setupDeletedLinesOverlay(card: HTMLElement) {
+    let overlay: HTMLElement | null = null;
+    let hideTimeout: any = null;
+
+    card.addEventListener('mouseover', (e) => {
+        const target = e.target as HTMLElement;
+        const lineNum = target.closest('.line-num');
+        const diffLine = target.closest('.has-deleted') as HTMLElement;
+        if (!lineNum || !diffLine) return;
+
+        const delLinesRaw = diffLine.dataset.delLines;
+        if (!delLinesRaw) return;
+
+        if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null; }
+
+        try {
+            const deletedLines: string[] = JSON.parse(decodeURIComponent(delLinesRaw));
+            if (deletedLines.length === 0) return;
+
+            if (overlay) overlay.remove();
+
+            overlay = document.createElement('div');
+            overlay.className = 'deleted-lines-overlay';
+
+            const header = document.createElement('div');
+            header.className = 'deleted-overlay-header';
+            header.textContent = `${deletedLines.length} deleted line${deletedLines.length > 1 ? 's' : ''}`;
+            overlay.appendChild(header);
+
+            const pre = document.createElement('pre');
+            const code = document.createElement('code');
+            code.innerHTML = deletedLines.map((line, i) =>
+                `<span class="diff-line diff-del"><span class="line-num del-line-num">  −</span>${escapeHtml(line)}</span>`
+            ).join('\n');
+            pre.appendChild(code);
+            overlay.appendChild(pre);
+
+            const lineRect = diffLine.getBoundingClientRect();
+            const cardRect = card.getBoundingClientRect();
+            overlay.style.top = `${lineRect.top - cardRect.top - overlay.offsetHeight}px`;
+            overlay.style.left = '50px';
+
+            card.appendChild(overlay);
+
+            requestAnimationFrame(() => {
+                if (!overlay) return;
+                const overlayH = overlay.offsetHeight;
+                const yPos = lineRect.top - cardRect.top;
+                if (yPos - overlayH > 36) {
+                    overlay.style.top = `${yPos - overlayH}px`;
+                } else {
+                    overlay.style.top = `${yPos + lineRect.height}px`;
+                }
+            });
+
+            overlay.addEventListener('mouseenter', () => {
+                if (hideTimeout) { clearTimeout(hideTimeout); hideTimeout = null; }
+            });
+            overlay.addEventListener('mouseleave', () => {
+                hideTimeout = setTimeout(() => {
+                    if (overlay) { overlay.remove(); overlay = null; }
+                }, 200);
+            });
+        } catch (err) { /* ignore parse errors */ }
+    });
+
+    card.addEventListener('mouseout', (e) => {
+        const target = e.target as HTMLElement;
+        const lineNum = target.closest('.line-num');
+        const diffLine = target.closest('.has-deleted');
+        if (!lineNum || !diffLine) return;
+
+        hideTimeout = setTimeout(() => {
+            if (overlay) { overlay.remove(); overlay = null; }
+        }, 300);
+    });
+}

package/app/lib/card-expand.ts

@@ -0,0 +1,189 @@
+// @ts-nocheck
+/**
+ * Card expand/collapse — toggle, fit-to-screen, font size, hidden lines indicator.
+ *
+ * Extracted from cards.tsx to reduce file size.
+ */
+import { measure } from 'measure-fn';
+import type { CanvasContext } from './context';
+import { savePosition, setPathExpandedInPositions } from './positions';
+import { updateMinimap } from './canvas';
+import { renderConnections } from './connections';
+
+// Re-use card data store and content builder from cards.tsx (lazy import to avoid circular)
+function getCardsDeps() {
+    return require('./cards');
+}
+
+const DEFAULT_CARD_HEIGHT = 700;
+
+// ─── Hidden lines indicator ─────────────────────────────
+// Disabled: all files are same size, no expand/collapse mode.
+// Keeping the export as a no-op for backward compatibility.
+export function updateHiddenLinesIndicator(_card: HTMLElement, _totalLines?: number) {
+    // Remove any existing indicator
+    const indicator = _card.querySelector('.hidden-lines-indicator') as HTMLElement;
+    if (indicator) indicator.remove();
+}
+
+// ─── Change card font size (Ctrl +/-) ─────────────────
+export function changeCardsFontSize(ctx: CanvasContext, delta: number) {
+    const selected = ctx.snap().context.selectedCards;
+    const targets = selected.length > 0 ? selected : Array.from(ctx.fileCards.keys());
+
+    targets.forEach(path => {
+        const card = ctx.fileCards.get(path);
+        if (!card) return;
+        const pre = card.querySelector('.file-content-preview pre') as HTMLElement;
+        if (!pre) return;
+        const current = parseFloat(getComputedStyle(pre).fontSize) || 8.5;
+        const newSize = Math.max(5, Math.min(24, current + delta));
+        pre.style.fontSize = `${newSize}px`;
+        pre.style.lineHeight = '1.1';
+        updateHiddenLinesIndicator(card, 0);
+    });
+}
+
+// ─── Toggle card expand/collapse ────────────────────────
+export function toggleCardExpand(ctx: CanvasContext) {
+    measure('cards:toggleExpand', () => {
+        const selected = ctx.snap().context.selectedCards;
+        if (selected.length === 0) return;
+
+        const firstCard = ctx.fileCards.get(selected[0]);
+        if (!firstCard) return;
+        const willExpand = firstCard.dataset.expanded !== 'true';
+
+        const vpRect = ctx.canvasViewport.getBoundingClientRect();
+        const expandHeight = Math.max(600, vpRect.height - 40);
+
+        // Lazy import to get cardFileData and _buildFileContentHTML
+        const { _getCardFileData, _buildFileContentHTML } = getCardsDeps();
+
+        selected.forEach(path => {
+            const card = ctx.fileCards.get(path);
+            if (!card) return;
+
+            const body = card.querySelector('.file-card-body') as HTMLElement;
+            if (!body) return;
+
+            if (!willExpand) {
+                card.style.height = `${DEFAULT_CARD_HEIGHT}px`;
+                card.style.maxHeight = `${DEFAULT_CARD_HEIGHT}px`;
+                card.dataset.expanded = 'false';
+                setPathExpandedInPositions(ctx, path, false);
+            } else {
+                card.style.height = `${expandHeight}px`;
+                card.style.maxHeight = 'none';
+                card.dataset.expanded = 'true';
+                setPathExpandedInPositions(ctx, path, true);
+            }
+
+            // Re-render content: expanded shows ALL lines, collapsed shows VISIBLE_LINE_LIMIT
+            const file = _getCardFileData(card);
+            if (file && file.content && !file.isBinary) {
+                if (!ctx.useCanvasText) {
+                    const addedLines: Set<number> = file.addedLines || new Set();
+                    const deletedBeforeLine: Map<number, string[]> = file.deletedBeforeLine || new Map();
+                    const isAllAdded = file.status === 'added';
+                    const isAllDeleted = file.status === 'deleted';
+                    const preview = body.querySelector('.file-content-preview');
+                    if (preview) {
+                        const newHTML = _buildFileContentHTML(
+                            file.content, file.layerSections, addedLines, deletedBeforeLine,
+                            isAllAdded, isAllDeleted, willExpand, file.lines
+                        );
+                        preview.outerHTML = newHTML;
+                    }
+                }
+            }
+
+            const state = ctx.snap().context;
+            const commitHash = state.currentCommitHash || 'allfiles';
+            const newH = card.offsetHeight;
+            ctx.actor.send({ type: 'RESIZE_CARD', path, width: card.offsetWidth, height: newH });
+            savePosition(ctx, commitHash, path, parseInt(card.style.left) || 0, parseInt(card.style.top) || 0, card.offsetWidth, newH);
+
+            requestAnimationFrame(() => updateHiddenLinesIndicator(card, 0));
+        });
+
+        updateMinimap(ctx);
+        renderConnections(ctx);
+    });
+}
+
+// ─── Expand a single card by path ───────────────────────
+export function expandCardByPath(ctx: CanvasContext, path: string) {
+    const card = ctx.fileCards.get(path);
+    if (!card || card.dataset.expanded === 'true') return;
+
+    const body = card.querySelector('.file-card-body') as HTMLElement;
+    if (!body) return;
+
+    const vpRect = ctx.canvasViewport.getBoundingClientRect();
+    const expandHeight = Math.max(600, vpRect.height - 40);
+
+    card.style.height = `${expandHeight}px`;
+    card.style.maxHeight = 'none';
+    card.dataset.expanded = 'true';
+    setPathExpandedInPositions(ctx, path, true);
+
+    const { _getCardFileData, _buildFileContentHTML } = getCardsDeps();
+    const file = _getCardFileData(card);
+    if (file && file.content && !file.isBinary) {
+        if (!ctx.useCanvasText) {
+            const addedLines: Set<number> = file.addedLines || new Set();
+            const deletedBeforeLine: Map<number, string[]> = file.deletedBeforeLine || new Map();
+            const isAllAdded = file.status === 'added';
+            const isAllDeleted = file.status === 'deleted';
+            const preview = body.querySelector('.file-content-preview');
+            if (preview) {
+                const newHTML = _buildFileContentHTML(
+                    file.content, file.layerSections, addedLines, deletedBeforeLine,
+                    isAllAdded, isAllDeleted, true, file.lines
+                );
+                preview.outerHTML = newHTML;
+            }
+        }
+    }
+
+    const state = ctx.snap().context;
+    const commitHash = state.currentCommitHash || 'allfiles';
+    ctx.actor.send({ type: 'RESIZE_CARD', path, width: card.offsetWidth, height: expandHeight });
+    savePosition(ctx, commitHash, path, parseInt(card.style.left) || 0, parseInt(card.style.top) || 0, card.offsetWidth, expandHeight);
+    requestAnimationFrame(() => updateHiddenLinesIndicator(card, 0));
+}
+
+// ─── Fit selected cards to screen viewport ──────────────
+export function fitScreenSize(ctx: CanvasContext) {
+    measure('cards:fitScreen', () => {
+        const selected = ctx.snap().context.selectedCards;
+        if (selected.length === 0) return;
+
+        const viewport = ctx.canvasViewport;
+        if (!viewport) return;
+
+        const state = ctx.snap().context;
+        const vh = viewport.clientHeight / state.zoom;
+        const padding = 40;
+        const fitH = Math.max(120, vh - padding * 2);
+
+        selected.forEach(path => {
+            const card = ctx.fileCards.get(path);
+            if (!card) return;
+
+            const currentW = card.offsetWidth;
+            card.style.height = `${fitH}px`;
+            card.style.maxHeight = 'none';
+
+            const commitHash = state.currentCommitHash || 'allfiles';
+            ctx.actor.send({ type: 'RESIZE_CARD', path, width: currentW, height: fitH });
+            savePosition(ctx, commitHash, path, parseInt(card.style.left) || 0, parseInt(card.style.top) || 0, currentW, fitH);
+
+            requestAnimationFrame(() => updateHiddenLinesIndicator(card, 0));
+        });
+
+        updateMinimap(ctx);
+        renderConnections(ctx);
+    });
+}