gitmaps 1.0.0 → 1.1.1

package/app/lib/events.tsx

@@ -25,43 +25,35 @@ import type { CanvasContext } from './context';
 import { showToast, escapeHtml } from './utils';
 import { createLayer, getActiveLayer, addSectionToLayer } from './layers';
 import { updateCanvasTransform, updateZoomUI, updateMinimap, fitAllFiles, setupMinimapClick } from './canvas';
-import { zoomTowardScreen, panByDelta, screenToWorld, getCardManager } from './galaxydraw-bridge';
+import { zoomTowardScreen, panByDelta, screenToWorld, getCardManager } from './xydraw-bridge';
 import { hideSelectedFiles, showHiddenFilesModal as showHiddenModal } from './hidden-files';
 import { updatePillSelectionHighlights } from './viewport-culling';
 import { clearSelectionHighlights, updateSelectionHighlights, updateArrangeToolbar, arrangeRow, arrangeColumn, arrangeGrid, toggleCardExpand, fitScreenSize, changeCardsFontSize } from './cards';
 import { loadRepository, rerenderCurrentView, selectCommit } from './repo';
+import { handoffRepoLoad, syncRepoSelection } from './repo-handoff';
 import { toggleCanvasChat } from './chat';
 import { exportCanvasAsPNG, exportViewportAsPNG } from './canvas-export';
 import { cancelPendingConnection, hasPendingConnection } from './connections';
 import { promptAddSection } from './layers';
+import { addRecentRepo, getRecentRepos } from './recent-commits';
+import { appendDiscoveredRepos, populateRepoSelect } from './repo-select';
 
 // ─── Recent repos helper ────────────────────────────────
-function _addRecentRepo(path: string) {
-    const key = 'gitcanvas:recentRepos';
-    const recent: string[] = JSON.parse(localStorage.getItem(key) || '[]');
-    // Remove if already exists, then prepend
-    const filtered = recent.filter(r => r !== path);
-    filtered.unshift(path);
-    // Keep max 10
-    localStorage.setItem(key, JSON.stringify(filtered.slice(0, 10)));
+function _addRecentRepo(path: string, commitCount: number = 0) {
+    addRecentRepo(path, commitCount);
 }
 
 function _refreshRepoDropdown() {
     const repoSel = document.getElementById('repoSelect') as HTMLSelectElement;
     if (!repoSel) return;
-    const updatedRepos: string[] = JSON.parse(localStorage.getItem('gitcanvas:recentRepos') || '[]');
-    while (repoSel.options.length > 1) repoSel.remove(1);
-    updatedRepos.forEach(repo => {
-        const opt = document.createElement('option');
-        opt.value = repo;
-        opt.textContent = repo.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repo;
-        opt.title = repo;
-        repoSel.add(opt);
-    });
-    const newOpt = document.createElement('option');
-    newOpt.value = '__new__';
-    newOpt.textContent = '＋ Open new repo...';
-    repoSel.add(newOpt);
+    populateRepoSelect(repoSel, getRecentRepos(), { hashPath: '' });
+}
+
+function isTypingTarget(target: EventTarget | null): boolean {
+    const el = target instanceof HTMLElement ? target : null;
+    if (!el) return false;
+    if (el.isContentEditable) return true;
+    return !!el.closest('input, textarea, select, [contenteditable], .cm-editor, .cm-content');
 }
 
 // ─── Canvas interaction (pan/zoom/select) ───────────────
@@ -198,7 +190,7 @@ export function setupCanvasInteraction(ctx: CanvasContext) {
         // ── Global mousemove (pan + rect select) ──
         window.addEventListener('mousemove', (e) => {
             if (ctx.isDragging) {
-                // Delta-based pan via galaxydraw engine
+                // Delta-based pan via xydraw engine
                 const dx = e.clientX - lastDragX;
                 const dy = e.clientY - lastDragY;
                 lastDragX = e.clientX;
@@ -419,15 +411,40 @@ export function setupEventListeners(ctx: CanvasContext) {
         setupChangedFilesPanel();
         setupConnectionsPanel(ctx);
 
-        // Text rendering mode toggle (Canvas vs DOM)
+        // Text rendering mode toggle (DOM → Canvas → WebGL)
         const textToggle = document.getElementById('toggleCanvasText');
         if (textToggle) {
-            ctx.useCanvasText = localStorage.getItem('gitcanvas:useCanvasText') !== 'false';
-            textToggle.classList.toggle('active', ctx.useCanvasText);
+            const modeLabels: Record<string, string> = {
+                'dom': 'DOM',
+                'canvas': 'Canvas',
+                'webgl': 'WebGL'
+            };
+            
+            const updateTextToggleUI = () => {
+                textToggle.title = `Text rendering: ${modeLabels[ctx.textRendererMode]} (click to switch)`;
+                // Show mode indicator
+                const icon = textToggle.querySelector('svg');
+                if (icon) {
+                    if (ctx.textRendererMode === 'webgl') {
+                        icon.innerHTML = '<path d="M4 4h16v16H4z"/><circle cx="12" cy="12" r="3" fill="currentColor"/>';
+                    } else if (ctx.textRendererMode === 'canvas') {
+                        icon.innerHTML = '<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/>';
+                    } else {
+                        icon.innerHTML = '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>';
+                    }
+                }
+            };
+            
+            updateTextToggleUI();
+            
             textToggle.addEventListener('click', () => {
-                ctx.useCanvasText = !ctx.useCanvasText;
-                localStorage.setItem('gitcanvas:useCanvasText', String(ctx.useCanvasText));
-                textToggle.classList.toggle('active', ctx.useCanvasText);
+                // Cycle: DOM → Canvas → WebGL → DOM
+                const modes: Array<'dom' | 'canvas' | 'webgl'> = ['dom', 'canvas', 'webgl'];
+                const currentIndex = modes.indexOf(ctx.textRendererMode);
+                ctx.textRendererMode = modes[(currentIndex + 1) % modes.length];
+                localStorage.setItem('gitcanvas:textRendererMode', ctx.textRendererMode);
+                updateTextToggleUI();
+                showToast(`Text rendering: ${modeLabels[ctx.textRendererMode]}`, 'info');
 
                 // Re-render currently visible cards
                 rerenderCurrentView(ctx);
@@ -529,31 +546,17 @@ export function setupEventListeners(ctx: CanvasContext) {
         const repoSelect = document.getElementById('repoSelect') as HTMLSelectElement;
         if (repoSelect) {
             // Populate dropdown from recent repos
-            const recentRepos: string[] = JSON.parse(localStorage.getItem('gitcanvas:recentRepos') || '[]');
-            // Clear except first placeholder
-            while (repoSelect.options.length > 1) repoSelect.remove(1);
-            recentRepos.forEach(repo => {
-                const opt = document.createElement('option');
-                opt.value = repo;
-                // Show short name (last folder part) + full path
-                const shortName = repo.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repo;
-                opt.textContent = shortName;
-                opt.title = repo;
-                repoSelect.add(opt);
-            });
-            // "Open new repo..." option at the end
-            const newOpt = document.createElement('option');
-            newOpt.value = '__new__';
-            newOpt.textContent = '＋ Open new repo...';
-            repoSelect.add(newOpt);
-
-            // Set initial value from hash — otherwise keep placeholder
+            const recentRepos = getRecentRepos();
             const hashPath = decodeURIComponent(location.hash.slice(1));
-            if (hashPath && recentRepos.includes(hashPath)) {
-                repoSelect.value = hashPath;
-            } else if (!hashPath) {
-                repoSelect.value = '';  // Keep "Select a repository..." shown
-            }
+            populateRepoSelect(repoSelect, recentRepos, { hashPath });
+
+            // ── Also discover on-disk repos that may not be in localStorage ──
+            fetch('/api/repo/list').then(r => r.json()).then((data: any) => {
+                if (!data.repos || data.repos.length === 0) return;
+                appendDiscoveredRepos(repoSelect, recentRepos, data.repos, (repoPath) => {
+                    _addRecentRepo(repoPath);
+                });
+            }).catch(() => { });
 
             repoSelect.addEventListener('change', async () => {
                 const val = repoSelect.value;
@@ -565,13 +568,15 @@ export function setupEventListeners(ctx: CanvasContext) {
                         _addRecentRepo(cleanPath);
                         loadRepository(ctx, cleanPath);
                         // Re-populate dropdown options
-                        const updatedRepos: string[] = JSON.parse(localStorage.getItem('gitcanvas:recentRepos') || '[]');
+                        const updatedRepos = getRecentRepos();
                         while (repoSelect.options.length > 1) repoSelect.remove(1);
-                        updatedRepos.forEach(repo => {
+                        updatedRepos.forEach((repo: any) => {
+        const repoPath = typeof repo === "string" ? repo : repo.path || "";
+        if (!repoPath) return;
                             const opt = document.createElement('option');
-                            opt.value = repo;
-                            opt.textContent = repo.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repo;
-                            opt.title = repo;
+                            opt.value = repoPath;
+                            opt.textContent = repoPath.replace(/\\/g, '/').split('/').filter(Boolean).pop() || repoPath;
+                            opt.title = repoPath;
                             repoSelect.add(opt);
                         });
                         const newOptRefresh = document.createElement('option');
@@ -585,7 +590,7 @@ export function setupEventListeners(ctx: CanvasContext) {
                         repoSelect.value = '';
                     }
                 } else if (val) {
-                    loadRepository(ctx, val);
+                    handoffRepoLoad(ctx, val);
                 }
             });
 
@@ -683,11 +688,6 @@ export function setupEventListeners(ctx: CanvasContext) {
         // AI chat toggle
         document.getElementById('toggleCanvasChat')?.addEventListener('click', () => toggleCanvasChat(ctx));
 
-        // Replayable onboarding
-        document.getElementById('helpOnboarding')?.addEventListener('click', () => {
-            import('./onboarding').then(m => m.startOnboarding(ctx));
-        });
-
         // Share Layout
         document.getElementById('shareLayout')?.addEventListener('click', () => {
             measure('share:layout', () => {
@@ -742,15 +742,15 @@ export function setupEventListeners(ctx: CanvasContext) {
         window.addEventListener('keydown', (e) => {
             // Space-bar canvas panning
             if (e.code === 'Space' && !e.repeat) {
-                if ((e.target as HTMLElement).tagName === 'INPUT' || (e.target as HTMLElement).tagName === 'TEXTAREA') return;
+                if (isTypingTarget(e.target)) return;
                 e.preventDefault();
                 ctx.spaceHeld = true;
                 ctx.canvasViewport.classList.add('space-panning');
                 return;
             }
 
-            // Don't interfere with input fields for all other shortcuts
-            if ((e.target as HTMLElement).tagName === 'INPUT' || (e.target as HTMLElement).tagName === 'TEXTAREA') return;
+            // Don't interfere with editors / form controls for all other shortcuts
+            if (isTypingTarget(e.target)) return;
 
             if (e.key === 'Escape') {
                 closePreview();
@@ -1284,7 +1284,7 @@ const LANG_COLORS: Record<string, string> = {
 };
 
 // ─── GitHub Import Modal Handler ────────────────────────
-function setupGithubImport(ctx: CanvasContext) {
+export function setupGithubImport(ctx: CanvasContext) {
     const modal = document.getElementById('githubModal');
     const openBtn = document.getElementById('githubImportBtn');
     const closeBtn = document.getElementById('githubModalClose');
@@ -1521,6 +1521,10 @@ function setupGithubImport(ctx: CanvasContext) {
     if (lastUser && userInput) userInput.value = lastUser;
 }
 
+function _handoffClonedRepo(ctx: CanvasContext, path: string) {
+    handoffRepoLoad(ctx, path);
+}
+
 // ─── Trigger clone (self-contained, uses clone-stream API) ──
 function _triggerClone(ctx: CanvasContext, url: string) {
     const cloneStatus = document.getElementById('cloneStatus');
@@ -1557,7 +1561,7 @@ function _triggerClone(ctx: CanvasContext, url: string) {
             _refreshRepoDropdown();
             const repoSel = document.getElementById('repoSelect') as HTMLSelectElement;
             if (repoSel) repoSel.value = data.path;
-            loadRepository(ctx, data.path);
+            _handoffClonedRepo(ctx, data.path);
             setTimeout(() => { cloneStatus.style.display = 'none'; }, 3000);
             return;
         }
@@ -1590,7 +1594,7 @@ function _triggerClone(ctx: CanvasContext, url: string) {
                         _refreshRepoDropdown();
                         const repoSel2 = document.getElementById('repoSelect') as HTMLSelectElement;
                         if (repoSel2) repoSel2.value = payload.path;
-                        loadRepository(ctx, payload.path);
+                        _handoffClonedRepo(ctx, payload.path);
                         setTimeout(() => { cloneStatus.style.display = 'none'; }, 3000);
                     } else if (evtType === 'error') {
                         cloneStatus.className = 'clone-status error';
@@ -1728,9 +1732,8 @@ function setupDragAndDrop(ctx: CanvasContext) {
                 const repoPath = data.path;
                 _addRecentRepo(repoPath);
                 _refreshRepoDropdown();
-                const repoSel = document.getElementById('repoSelect') as HTMLSelectElement;
-                if (repoSel) repoSel.value = repoPath;
-                import('./repo').then(m => m.loadRepository(ctx, repoPath));
+                syncRepoSelection(repoPath);
+                handoffRepoLoad(ctx, repoPath);
 
                 setTimeout(() => cloneStatus.style.display = 'none', 3000);
             }

package/app/lib/export-canvas.ts

@@ -0,0 +1,287 @@
+/**
+ * Export Canvas — Save canvas layout as image/PDF
+ * 
+ * Features:
+ * - Export as PNG with high resolution
+ * - Export visible area or full canvas
+ * - Include/hide UI elements
+ * - Auto-download or copy to clipboard
+ */
+
+import type { CanvasContext } from './context';
+
+export interface ExportOptions {
+  format: 'png' | 'jpeg' | 'webp';
+  quality: number;
+  scale: number;
+  includeBackground: boolean;
+  visibleOnly: boolean;
+}
+
+/**
+ * Export canvas to image file
+ */
+export async function exportCanvasToImage(
+  ctx: CanvasContext,
+  options: ExportOptions = {
+    format: 'png',
+    quality: 1,
+    scale: 2,
+    includeBackground: true,
+    visibleOnly: false,
+  }
+): Promise<void> {
+  const { measure } = await import('measure-fn');
+  
+  return measure('canvas:export', async () => {
+    try {
+      const canvas = ctx.canvas || ctx.canvasViewport;
+      if (!canvas) throw new Error('Canvas not found');
+
+      // Get all file cards
+      const cards = Array.from(ctx.fileCards.values());
+      if (cards.length === 0) throw new Error('No cards to export');
+
+      // Calculate bounds
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      
+      cards.forEach(card => {
+        const x = parseFloat(card.style.left) || 0;
+        const y = parseFloat(card.style.top) || 0;
+        const w = card.offsetWidth || 580;
+        const h = card.offsetHeight || 700;
+        
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + w);
+        maxY = Math.max(maxY, y + h);
+      });
+
+      // Add padding
+      const padding = 50;
+      minX -= padding;
+      minY -= padding;
+      maxX += padding;
+      maxY += padding;
+
+      const width = Math.max(maxX - minX, 1);
+      const height = Math.max(maxY - minY, 1);
+
+      // Create export canvas
+      const exportCanvas = document.createElement('canvas');
+      const scale = options.scale || 2;
+      exportCanvas.width = width * scale;
+      exportCanvas.height = height * scale;
+      
+      const exportCtx = exportCanvas.getContext('2d');
+      if (!exportCtx) throw new Error('Could not get 2D context');
+
+      // Scale for high DPI
+      exportCtx.scale(scale, scale);
+
+      // Background
+      if (options.includeBackground) {
+        exportCtx.fillStyle = '#0a0a0f';
+        exportCtx.fillRect(0, 0, width, height);
+      }
+
+      // Translate to origin
+      exportCtx.save();
+      exportCtx.translate(-minX, -minY);
+
+      // Draw each card
+      for (const card of cards) {
+        if (options.visibleOnly && !isCardVisible(card)) continue;
+        
+        await drawCardToCanvas(exportCtx, card, scale);
+      }
+
+      exportCtx.restore();
+
+      // Export
+      const mimeType = `image/${options.format}`;
+      const dataUrl = exportCanvas.toDataURL(mimeType, options.quality);
+      
+      // Download
+      const repoName = ctx.snap().context.repoPath?.split(/[\/]/).pop() || 'canvas';
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const filename = `${repoName}-${timestamp}.${options.format}`;
+      
+      const link = document.createElement('a');
+      link.download = filename;
+      link.href = dataUrl;
+      link.click();
+
+      // Show toast
+      const { showToast } = await import('./utils');
+      showToast(`Exported ${cards.length} cards as ${filename}`, 'success');
+
+    } catch (err: any) {
+      const { showToast } = await import('./utils');
+      showToast(`Export failed: ${err.message}`, 'error');
+      throw err;
+    }
+  });
+}
+
+/**
+ * Draw a single card to canvas
+ */
+async function drawCardToCanvas(
+  ctx: CanvasRenderingContext2D,
+  card: HTMLElement,
+  scale: number
+): Promise<void> {
+  const x = parseFloat(card.style.left) || 0;
+  const y = parseFloat(card.style.top) || 0;
+  const width = card.offsetWidth || 580;
+  const height = card.offsetHeight || 700;
+
+  // Card background
+  ctx.fillStyle = '#1e293b';
+  ctx.beginPath();
+  roundRect(ctx, x, y, width, height, 8);
+  ctx.fill();
+
+  // Border
+  ctx.strokeStyle = '#334155';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+
+  // Header
+  ctx.fillStyle = '#0f172a';
+  ctx.beginPath();
+  roundRect(ctx, x, y, width, 32, [8, 8, 0, 0]);
+  ctx.fill();
+
+  // File name
+  const fileNameEl = card.querySelector('.file-name') as HTMLElement;
+  if (fileNameEl) {
+    ctx.fillStyle = '#e2e8f0';
+    ctx.font = '600 11px Inter';
+    ctx.fillText(fileNameEl.textContent || '', x + 32, y + 20);
+  }
+
+  // Code preview (first 20 lines)
+  const codeLines = card.querySelectorAll('.card-line');
+  ctx.font = '10px JetBrains Mono';
+  ctx.textBaseline = 'top';
+  
+  codeLines.forEach((lineEl, i) => {
+    if (i >= 20) return;
+    
+    const line = lineEl as HTMLElement;
+    const style = window.getComputedStyle(line);
+    ctx.fillStyle = style.color;
+    
+    const text = line.textContent || '';
+    ctx.fillText(text.substring(0, 80), x + 12, y + 44 + (i * 16));
+  });
+}
+
+/**
+ * Check if card is visible in viewport
+ */
+function isCardVisible(card: HTMLElement): boolean {
+  const rect = card.getBoundingClientRect();
+  return (
+    rect.right > 0 &&
+    rect.left < window.innerWidth &&
+    rect.bottom > 0 &&
+    rect.top < window.innerHeight
+  );
+}
+
+/**
+ * Draw rounded rectangle
+ */
+function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number | number[]
+): void {
+  const radii = Array.isArray(radius) ? radius : [radius, radius, radius, radius];
+  
+  ctx.beginPath();
+  ctx.moveTo(x + radii[0], y);
+  ctx.lineTo(x + width - radii[1], y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radii[1]);
+  ctx.lineTo(x + width, y + height - radii[2]);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radii[2], y + height);
+  ctx.lineTo(x + radii[3], y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radii[3]);
+  ctx.lineTo(x, y + radii[0]);
+  ctx.quadraticCurveTo(x, y, x + radii[0], y);
+  ctx.closePath();
+}
+
+/**
+ * Export UI component
+ */
+export function createExportUI(ctx: CanvasContext): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'export-ui';
+  
+  container.innerHTML = `
+    <button class="btn-ghost btn-sm" id="exportBtn" title="Export canvas as image">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="7 10 12 15 17 10"></polyline>
+        <line x1="12" y1="15" x2="12" y2="3"></line>
+      </svg>
+      Export
+    </button>
+  `;
+  
+  const exportBtn = container.querySelector('#exportBtn') as HTMLButtonElement;
+  exportBtn.addEventListener('click', () => {
+    showExportDialog(ctx);
+  });
+  
+  return container;
+}
+
+/**
+ * Show export options dialog
+ */
+async function showExportDialog(ctx: CanvasContext): Promise<void> {
+  const { render } = await import('melina/client');
+  
+  const dialog = document.createElement('div');
+  dialog.className = 'export-dialog';
+  dialog.innerHTML = `
+    <div class="export-backdrop"></div>
+    <div class="export-content">
+      <h3>Export Canvas</h3>
+      <div class="export-options">
+        <label>
+          Format:
+          <select id="exportFormat">
+            <option value="png">PNG (Best quality)</option>
+            <option value="jpeg">JPEG (Smaller file)</option>
+            <option value="webp">WebP (Modern)</option>
+          </select>
+        </label>
+        <label>
+          Scale:
+          <select id="exportScale">
+            <option value="1">1x (Screen resolution)</option>
+            <option value="2" selected>2x (High quality)</option>
+            <option value="3">3x (Print quality)</option>
+          </select>
+        </label>
+        <label>
+          <input type="checkbox" id="exportBackground" checked>
+          Include background
+        </label>
+        <label>
+          <input type="checkbox" id="exportVisibleOnly">
+          Visible cards only
+        </label>
+      </div>
+      <div class="export-actions">
+        <button class="btn-ghost" id="exportCancel">Cancel</button>
+