gitmaps 1.0.0 → 1.1.1

package/app/lib/auto-arrange.test.ts

@@ -0,0 +1,158 @@
+/**
+ * Tests for auto-arrange layout algorithms.
+ * Run with: bun test app/lib/auto-arrange.test.ts
+ */
+import { describe, expect, test } from 'bun:test';
+import { arrangeByDirectory } from './auto-arrange';
+
+// ─── Helpers ────────────────────────────────────────────
+
+function makeFiles(paths: string[]) {
+    return paths.map(path => ({ path, content: '' }));
+}
+
+// ─── arrangeByDirectory ─────────────────────────────────
+
+describe('arrangeByDirectory', () => {
+    test('returns position for every file', () => {
+        const files = makeFiles(['src/a.ts', 'src/b.ts', 'lib/c.ts']);
+        const positions = arrangeByDirectory(files);
+        expect(positions.size).toBe(3);
+        expect(positions.has('src/a.ts')).toBe(true);
+        expect(positions.has('src/b.ts')).toBe(true);
+        expect(positions.has('lib/c.ts')).toBe(true);
+    });
+
+    test('groups files from same directory together', () => {
+        const files = makeFiles(['src/a.ts', 'src/b.ts', 'src/c.ts', 'lib/x.ts']);
+        const positions = arrangeByDirectory(files);
+
+        const srcPositions = ['src/a.ts', 'src/b.ts', 'src/c.ts'].map(p => positions.get(p)!);
+        const libPos = positions.get('lib/x.ts')!;
+
+        // src files should be close together (within one block)
+        const srcXs = srcPositions.map(p => p.x);
+        const srcYs = srcPositions.map(p => p.y);
+        const srcSpanX = Math.max(...srcXs) - Math.min(...srcXs);
+        const srcSpanY = Math.max(...srcYs) - Math.min(...srcYs);
+
+        // Span should be small — within one block (3 files, likely 2 cols)
+        expect(srcSpanX).toBeLessThan(2000);
+        expect(srcSpanY).toBeLessThan(2000);
+
+        // lib file should NOT overlap with src block
+        const srcMinX = Math.min(...srcXs);
+        const srcMaxX = Math.max(...srcXs) + 580; // card width
+        const srcMinY = Math.min(...srcYs);
+        const srcMaxY = Math.max(...srcYs) + 700; // card height
+
+        // lib should be outside the src bounding box (separated by dirGap)
+        const isOutside = libPos.x >= srcMaxX || libPos.x + 580 <= srcMinX ||
+            libPos.y >= srcMaxY || libPos.y + 700 <= srcMinY;
+        expect(isOutside).toBe(true);
+    });
+
+    test('handles single file', () => {
+        const files = makeFiles(['README.md']);
+        const positions = arrangeByDirectory(files);
+        expect(positions.size).toBe(1);
+        const pos = positions.get('README.md')!;
+        expect(pos.x).toBeGreaterThanOrEqual(0);
+        expect(pos.y).toBeGreaterThanOrEqual(0);
+    });
+
+    test('handles root-level files (no directory)', () => {
+        const files = makeFiles(['README.md', 'package.json', '.gitignore']);
+        const positions = arrangeByDirectory(files);
+        // All should be in the "." directory group
+        expect(positions.size).toBe(3);
+    });
+
+    test('no two files share the same position', () => {
+        const paths = [];
+        for (let i = 0; i < 50; i++) {
+            const dir = `dir${i % 5}`;
+            paths.push(`${dir}/file${i}.ts`);
+        }
+        const files = makeFiles(paths);
+        const positions = arrangeByDirectory(files);
+
+        const posStrings = new Set<string>();
+        for (const [, pos] of positions) {
+            const key = `${pos.x},${pos.y}`;
+            expect(posStrings.has(key)).toBe(false);
+            posStrings.add(key);
+        }
+    });
+
+    test('respects custom origin', () => {
+        const files = makeFiles(['a.ts']);
+        const positions = arrangeByDirectory(files, { originX: 500, originY: 300 });
+        const pos = positions.get('a.ts')!;
+        expect(pos.x).toBe(500);
+        expect(pos.y).toBe(300);
+    });
+
+    test('respects custom card dimensions', () => {
+        const files = makeFiles(['src/a.ts', 'src/b.ts']);
+        const positions = arrangeByDirectory(files, { cardWidth: 200, fileGap: 10 });
+        const posA = positions.get('src/a.ts')!;
+        const posB = positions.get('src/b.ts')!;
+
+        // With 2 files in 1 dir, they should be in a row
+        // Gap between them should be based on card width + gap
+        const dx = Math.abs(posB.x - posA.x);
+        expect(dx).toBe(210); // 200 + 10
+    });
+
+    test('larger directories get more columns', () => {
+        // 9 files should get ceil(sqrt(9)) = 3 columns
+        const files = makeFiles(Array.from({ length: 9 }, (_, i) => `src/f${i}.ts`));
+        const positions = arrangeByDirectory(files);
+
+        const xs = new Set<number>();
+        for (const [, pos] of positions) {
+            xs.add(pos.x);
+        }
+        expect(xs.size).toBe(3); // 3 unique x positions = 3 columns
+    });
+
+    test('handles deeply nested paths', () => {
+        const files = makeFiles([
+            'src/components/ui/Button.tsx',
+            'src/components/ui/Modal.tsx',
+            'src/lib/utils/helpers.ts',
+        ]);
+        const positions = arrangeByDirectory(files);
+        expect(positions.size).toBe(3);
+
+        // Button and Modal should be grouped (same dir: src/components/ui)
+        const btnPos = positions.get('src/components/ui/Button.tsx')!;
+        const modalPos = positions.get('src/components/ui/Modal.tsx')!;
+        // They share a directory so should be adjacent
+        const distance = Math.hypot(modalPos.x - btnPos.x, modalPos.y - btnPos.y);
+        expect(distance).toBeLessThan(1500);
+    });
+
+    test('empty input returns empty map', () => {
+        const positions = arrangeByDirectory([]);
+        expect(positions.size).toBe(0);
+    });
+
+    test('directories sorted largest-first', () => {
+        // 5 files in "big/", 1 file in "small/"
+        const files = makeFiles([
+            'big/a.ts', 'big/b.ts', 'big/c.ts', 'big/d.ts', 'big/e.ts',
+            'small/x.ts',
+        ]);
+        const positions = arrangeByDirectory(files);
+
+        // "big" directory should come first (top-left area)
+        const bigMinX = Math.min(...['big/a.ts', 'big/b.ts', 'big/c.ts', 'big/d.ts', 'big/e.ts']
+            .map(p => positions.get(p)!.x));
+        const smallX = positions.get('small/x.ts')!.x;
+
+        // big should start at origin, small should be offset
+        expect(bigMinX).toBeLessThanOrEqual(smallX);
+    });
+});

package/app/lib/auto-arrange.ts

@@ -0,0 +1,147 @@
+// @ts-nocheck
+/**
+ * Auto-arrange algorithms for initial canvas layout.
+ *
+ * arrangeByDirectory: Groups files by their parent directory,
+ * lays out each directory as a tight grid block, then positions
+ * directory blocks in a treemap-like grid layout.
+ *
+ * This creates a spatially meaningful layout where files from
+ * the same directory are clustered together.
+ */
+import { measure } from 'measure-fn';
+import type { CanvasContext } from './context';
+import { savePosition, flushPositions } from './positions';
+import { updateMinimap } from './canvas';
+
+interface FileEntry {
+    path: string;
+    [key: string]: any;
+}
+
+interface DirBlock {
+    dir: string;
+    files: FileEntry[];
+    // Computed layout
+    cols: number;
+    rows: number;
+    blockW: number;
+    blockH: number;
+}
+
+/**
+ * Arrange files grouped by directory.
+ * Each directory gets a tight grid block, and blocks are arranged
+ * in a larger treemap-like layout sorted by size (largest first).
+ */
+export function arrangeByDirectory(
+    files: FileEntry[],
+    opts: {
+        cardWidth?: number;
+        cardHeight?: number;
+        fileGap?: number;
+        dirGap?: number;
+        originX?: number;
+        originY?: number;
+    } = {},
+): Map<string, { x: number; y: number }> {
+    const positions = new Map<string, { x: number; y: number }>();
+    const {
+        cardWidth = 580,
+        cardHeight = 700,
+        fileGap = 20,
+        dirGap = 80,
+        originX = 50,
+        originY = 50,
+    } = opts;
+
+    // Group files by parent directory
+    const dirMap = new Map<string, FileEntry[]>();
+    for (const f of files) {
+        const dir = f.path.includes('/') ? f.path.substring(0, f.path.lastIndexOf('/')) : '.';
+        if (!dirMap.has(dir)) dirMap.set(dir, []);
+        dirMap.get(dir)!.push(f);
+    }
+
+    // Sort directories: largest first, then alphabetical
+    const dirs = Array.from(dirMap.entries())
+        .sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0]));
+
+    // Compute each directory block dimensions
+    const blocks: DirBlock[] = dirs.map(([dir, dirFiles]) => {
+        const count = dirFiles.length;
+        const cols = Math.max(1, Math.min(count, Math.ceil(Math.sqrt(count))));
+        const rows = Math.ceil(count / cols);
+        return {
+            dir,
+            files: dirFiles,
+            cols,
+            rows,
+            blockW: cols * (cardWidth + fileGap) - fileGap,
+            blockH: rows * (cardHeight + fileGap) - fileGap,
+        };
+    });
+
+    // Lay out blocks in a wrapping row layout
+    // Target total width ~= sqrt(total area) for a square-ish result
+    const totalArea = blocks.reduce((sum, b) => sum + (b.blockW + dirGap) * (b.blockH + dirGap), 0);
+    const targetRowWidth = Math.max(3000, Math.sqrt(totalArea) * 1.2);
+
+    let curX = originX;
+    let curY = originY;
+    let rowMaxH = 0;
+
+    for (const block of blocks) {
+        // Wrap to next row if this block would exceed target width
+        if (curX > originX && curX + block.blockW > targetRowWidth) {
+            curX = originX;
+            curY += rowMaxH + dirGap;
+            rowMaxH = 0;
+        }
+
+        // Place files within this block
+        block.files.forEach((f, i) => {
+            const col = i % block.cols;
+            const row = Math.floor(i / block.cols);
+            const x = curX + col * (cardWidth + fileGap);
+            const y = curY + row * (cardHeight + fileGap);
+            positions.set(f.path, { x, y });
+        });
+
+        curX += block.blockW + dirGap;
+        rowMaxH = Math.max(rowMaxH, block.blockH);
+    }
+
+    return positions;
+}
+
+/**
+ * Apply auto-arrange to a CanvasContext — rearranges ALL files
+ * by directory grouping. Only sets positions for files that
+ * don't already have saved positions.
+ */
+export function autoArrangeIfNew(
+    ctx: CanvasContext,
+    files: FileEntry[],
+    forceAll = false,
+): Map<string, { x: number; y: number }> {
+    return measure('arrange:byDirectory', () => {
+        const positions = arrangeByDirectory(files);
+        const commitHash = 'allfiles';
+
+        for (const [path, pos] of positions) {
+            const posKey = `${commitHash}:${path}`;
+            // Only override if no existing position (or forced)
+            if (forceAll || !ctx.positions.has(posKey)) {
+                savePosition(ctx, commitHash, path, pos.x, pos.y);
+            }
+        }
+
+        if (forceAll) {
+            flushPositions(ctx);
+            updateMinimap(ctx);
+        }
+
+        return positions;
+    });
+}