gitmaps 1.0.0 → 1.1.1

package/app/lib/file-card-plugin.ts

@@ -1,134 +1,148 @@
-// @ts-nocheck
-/**
- * FileCardPlugin — bridges galaxydraw's CardPlugin interface with
- * the existing file card rendering in cards.tsx.
- *
- * Phase 4 of the GalaxyDraw migration:
- * - Wraps createAllFileCard() and createFileCard() as a CardPlugin
- * - Enables CardManager to handle drag, resize, z-order, selection
- * - Enables ViewportCuller to handle virtualized rendering
- *
- * The plugin doesn't replace cards.tsx — it delegates to it.
- * This allows incremental migration without breaking the existing flow.
- */
-
-import type { CardPlugin, CardData } from '../../packages/galaxydraw/src/core/cards';
-
-// ─── File Card Plugin ─────────────────────────────────────
-
-export const FILE_CARD_TYPE = 'file';
-export const DIFF_CARD_TYPE = 'diff';
-
-/**
- * Plugin for rendering source code file cards on the canvas.
- * Used by the "working tree" (all files) view.
- *
- * The render() method receives a CardData where:
- * - meta.file: the file data object (path, name, content, etc.)
- * - meta.ctx: the CanvasContext for interaction setup
- * - meta.savedSize: optional saved dimensions
- */
-export function createFileCardPlugin(): CardPlugin {
-    return {
-        type: FILE_CARD_TYPE,
-
-        render(data: CardData): HTMLElement {
-            const { file, ctx, savedSize } = data.meta || {};
-            if (!file || !ctx) {
-                // Fallback: empty placeholder card
-                const el = document.createElement('div');
-                el.className = 'file-card';
-                el.textContent = 'Missing file data';
-                return el;
-            }
-
-            // Dynamically import to avoid circular dependencies
-            // The actual rendering is still in cards.tsx
-            // skipInteraction=true: CardManager handles drag/resize/z-order
-            const { createAllFileCard } = require('./cards');
-            const card = createAllFileCard(ctx, file, data.x, data.y, savedSize, true);
-            return card;
-        },
-
-        onResize(card: HTMLElement, width: number, height: number) {
-            // Dispatch the resize event that cards.tsx already listens for
-            const path = card.dataset.path;
-            if (path) {
-                card.dispatchEvent(new CustomEvent('card-resized', {
-                    detail: { path, width, height },
-                }));
-            }
-        },
-
-        onDestroy(card: HTMLElement) {
-            // Clean up any scroll timers or event listeners
-            // The card DOM is removed by CardManager, but we should
-            // clean up any overlays or attached state
-        },
-
-        consumesWheel(target: HTMLElement): boolean {
-            // File card bodies are scrollable — pass wheel events through
-            return !!target.closest('.file-card-body');
-        },
-
-        consumesMouse(target: HTMLElement): boolean {
-            // Buttons, links, and interactive elements within cards
-            // should receive mouse events directly
-            return !!(
-                target.closest('button') ||
-                target.closest('a') ||
-                target.closest('.connect-btn') ||
-                target.closest('.line-num') ||
-                target.closest('.diff-hunk-header')
-            );
-        },
-    };
-}
-
-/**
- * Plugin for rendering commit diff cards on the canvas.
- * Used by the "commit diff" view.
- */
-export function createDiffCardPlugin(): CardPlugin {
-    return {
-        type: DIFF_CARD_TYPE,
-
-        render(data: CardData): HTMLElement {
-            const { file, ctx, commitHash } = data.meta || {};
-            if (!file || !ctx) {
-                const el = document.createElement('div');
-                el.className = 'file-card';
-                el.textContent = 'Missing diff data';
-                return el;
-            }
-
-            const { createFileCard } = require('./cards');
-            const card = createFileCard(ctx, file, data.x, data.y, commitHash, true);
-            return card;
-        },
-
-        onResize(card: HTMLElement, width: number, height: number) {
-            const path = card.dataset.path;
-            if (path) {
-                card.dispatchEvent(new CustomEvent('card-resized', {
-                    detail: { path, width, height },
-                }));
-            }
-        },
-
-        onDestroy() { },
-
-        consumesWheel(target: HTMLElement): boolean {
-            return !!target.closest('.file-card-body');
-        },
-
-        consumesMouse(target: HTMLElement): boolean {
-            return !!(
-                target.closest('button') ||
-                target.closest('a') ||
-                target.closest('.connect-btn') ||
-                target.closest('.diff-hunk-header')
-            );
-        },
-    };
-}
+// @ts-nocheck
+/**
+ * FileCardPlugin — bridges xydraw's CardPlugin interface with
+ * the existing file card rendering in cards.tsx.
+ *
+ * Phase 4 of the GalaxyDraw migration:
+ * - Wraps createAllFileCard() and createFileCard() as a CardPlugin
+ * - Enables CardManager to handle drag, resize, z-order, selection
+ * - Enables ViewportCuller to handle virtualized rendering
+ *
+ * The plugin doesn't replace cards.tsx — it delegates to it.
+ * This allows incremental migration without breaking the existing flow.
+ */
+
+import type { CardPlugin, CardData } from '../../packages/galaxydraw/src/core/cards';
+
+// ─── File Card Plugin ─────────────────────────────────────
+
+export const FILE_CARD_TYPE = 'file';
+export const DIFF_CARD_TYPE = 'diff';
+
+/**
+ * Plugin for rendering source code file cards on the canvas.
+ * Used by the "working tree" (all files) view.
+ *
+ * The render() method receives a CardData where:
+ * - meta.file: the file data object (path, name, content, etc.)
+ * - meta.ctx: the CanvasContext for interaction setup
+ * - meta.savedSize: optional saved dimensions
+ */
+export function createFileCardPlugin(): CardPlugin {
+    return {
+        type: FILE_CARD_TYPE,
+
+        render(data: CardData): HTMLElement {
+            const { file, ctx, savedSize } = data.meta || {};
+            if (!file || !ctx) {
+                // Fallback: empty placeholder card
+                const el = document.createElement('div');
+                el.className = 'file-card';
+                el.textContent = 'Missing file data';
+                return el;
+            }
+
+            // Dynamically import to avoid circular dependencies
+            // The actual rendering is still in cards.tsx
+            // skipInteraction=true: CardManager handles drag/resize/z-order
+            const { createAllFileCard } = require('./cards');
+            const card = createAllFileCard(ctx, file, data.x, data.y, savedSize, true);
+
+            const { isDirCollapsed } = require('./card-groups');
+            const fileDir = file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/')) : '.';
+            if (isDirCollapsed(fileDir)) {
+                card.style.display = 'none';
+            }
+
+            return card;
+        },
+
+        onResize(card: HTMLElement, width: number, height: number) {
+            // Dispatch the resize event that cards.tsx already listens for
+            const path = card.dataset.path;
+            if (path) {
+                card.dispatchEvent(new CustomEvent('card-resized', {
+                    detail: { path, width, height },
+                }));
+            }
+        },
+
+        onDestroy(card: HTMLElement) {
+            // Clean up any scroll timers or event listeners
+            // The card DOM is removed by CardManager, but we should
+            // clean up any overlays or attached state
+        },
+
+        consumesWheel(target: HTMLElement): boolean {
+            // File card bodies are scrollable — pass wheel events through
+            return !!target.closest('.file-card-body');
+        },
+
+        consumesMouse(target: HTMLElement): boolean {
+            // Buttons, links, and interactive elements within cards
+            // should receive mouse events directly
+            return !!(
+                target.closest('button') ||
+                target.closest('a') ||
+                target.closest('.connect-btn') ||
+                target.closest('.line-num') ||
+                target.closest('.diff-hunk-header')
+            );
+        },
+    };
+}
+
+/**
+ * Plugin for rendering commit diff cards on the canvas.
+ * Used by the "commit diff" view.
+ */
+export function createDiffCardPlugin(): CardPlugin {
+    return {
+        type: DIFF_CARD_TYPE,
+
+        render(data: CardData): HTMLElement {
+            const { file, ctx, commitHash } = data.meta || {};
+            if (!file || !ctx) {
+                const el = document.createElement('div');
+                el.className = 'file-card';
+                el.textContent = 'Missing diff data';
+                return el;
+            }
+
+            const { createFileCard } = require('./cards');
+            const card = createFileCard(ctx, file, data.x, data.y, commitHash, true);
+
+            const { isDirCollapsed } = require('./card-groups');
+            const fileDir = file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/')) : '.';
+            if (isDirCollapsed(fileDir)) {
+                card.style.display = 'none';
+            }
+
+            return card;
+        },
+
+        onResize(card: HTMLElement, width: number, height: number) {
+            const path = card.dataset.path;
+            if (path) {
+                card.dispatchEvent(new CustomEvent('card-resized', {
+                    detail: { path, width, height },
+                }));
+            }
+        },
+
+        onDestroy() { },
+
+        consumesWheel(target: HTMLElement): boolean {
+            return !!target.closest('.file-card-body');
+        },
+
+        consumesMouse(target: HTMLElement): boolean {
+            return !!(
+                target.closest('button') ||
+                target.closest('a') ||
+                target.closest('.connect-btn') ||
+                target.closest('.diff-hunk-header')
+            );
+        },
+    };
+}

package/app/lib/file-modal.tsx

@@ -14,6 +14,7 @@ import { renderBreadcrumbs } from './breadcrumbs';
 import { renderSymbolOutline } from './symbol-outline';
 import { loadDraft, clearDraft, startAutoSave, stopAutoSave } from './auto-save';
 import { isEditingAllowed, getProductionEditorNotice } from './production-mode';
+import { onEditorSync, broadcastEditorSync, type EditorSyncData } from './cursor-sharing';
 
 // ─── File expand modal ──────────────────────────────────
 export function openFileModal(ctx: CanvasContext, file: any, initialView?: string, initialLine?: number) {
@@ -76,6 +77,41 @@ export function openFileModal(ctx: CanvasContext, file: any, initialView?: strin
     let onNavKey: ((e: KeyboardEvent) => void) | null = null;
     let originalContent = file.content || '';
 
+    let editorSyncCleanup: (() => void) | null = null;
+    const remoteCursorsMap = new Map<string, EditorSyncData>();
+    let typingTimeouts = new Map<string, any>();
+
+    editorSyncCleanup = onEditorSync(data => {
+        // use Active Tab's path instead of initial file path incase it switched
+        const activeTab = getActiveTab();
+        const activePath = activeTab ? activeTab.path : file.path;
+
+        if (data.file === activePath && currentView === 'edit') {
+            remoteCursorsMap.set(data.peerId, data);
+
+            if (data.typing) {
+                if (typingTimeouts.has(data.peerId)) clearTimeout(typingTimeouts.get(data.peerId));
+                typingTimeouts.set(data.peerId, setTimeout(() => {
+                    const cursor = remoteCursorsMap.get(data.peerId);
+                    if (cursor) {
+                        cursor.typing = false;
+                        updateRemoteCursors();
+                    }
+                }, 1000));
+            }
+
+            updateRemoteCursors();
+        }
+    });
+
+    function updateRemoteCursors() {
+        const editContainer = document.getElementById('modalEditContainer');
+        const editor = (editContainer as any)?._cmEditor;
+        if (editor) {
+            editor.setRemoteCursors(Array.from(remoteCursorsMap.values()));
+        }
+    }
+
     function hasUnsavedChanges(): boolean {
         if (currentView !== 'edit') return false;
         const editContainer = document.getElementById('modalEditContainer');
@@ -97,6 +133,11 @@ export function openFileModal(ctx: CanvasContext, file: any, initialView?: strin
         document.removeEventListener('keydown', onEsc);
         if (onNavKey) document.removeEventListener('keydown', onNavKey);
 
+        if (editorSyncCleanup) {
+            editorSyncCleanup();
+            editorSyncCleanup = null;
+        }
+
         // Stop auto-save timer
         stopAutoSave();
 
@@ -445,12 +486,20 @@ export function openFileModal(ctx: CanvasContext, file: any, initialView?: strin
                 onCursorMove: (line, col) => {
                     if (lineInfo) lineInfo.textContent = `Line ${line}, Col ${col}`;
                 },
+                onSelectionChange: (selections, isTyping) => {
+                    const activeTab = getActiveTab();
+                    const activePath = activeTab ? activeTab.path : file.path;
+                    broadcastEditorSync(activePath, selections, isTyping);
+                }
             });
 
             // Store editor reference for content access
             (editContainer as any)._cmEditor = editor;
             editor.focus();
 
+            // Reapply any known remote cursors for this new view
+            updateRemoteCursors();
+
             // Scroll to initial line if provided (preserves canvas view position)
             if (initialLine && initialLine > 1) {
                 requestAnimationFrame(() => {