Git Graph Interactive - Extensión VS Code

Visualizador interactivo de ramas Git con funcionalidad drag and drop para mover commits entre ramas.

🌟 Características

• Visualización gráfica de ramas: Muestra todas tus ramas de Git en un gráfico visual intuitivo
• Drag and Drop: Arrastra commits (bolitas) entre ramas para hacer cherry-pick
• Interfaz interactiva: Tooltips con información detallada de cada commit
• Actualización en tiempo real: El gráfico se actualiza automáticamente después de cada operación

📋 Requisitos Previos

• Visual Studio Code (versión 1.80.0 o superior)
• Node.js (versión 16.x o superior)
• Git instalado en tu sistema
• Un repositorio Git en tu workspace

🚀 Instalación Local

Paso 1: Clonar/Descargar el proyecto

Coloca todos los archivos de la extensión en una carpeta, por ejemplo: git-graph-interactive

Paso 2: Instalar dependencias

Abre una terminal en la carpeta del proyecto y ejecuta:

npm install

Paso 3: Compilar el proyecto

npm run compile

Paso 4: Instalar la extensión en VS Code

Hay dos formas de instalar la extensión localmente:

Opción A: Usando la carpeta de desarrollo (más rápido para desarrollo)

1. Abre VS Code
2. Presiona F5 o ve a Run > Start Debugging
3. Esto abrirá una nueva ventana de VS Code con la extensión cargada

Opción B: Empaquetar e instalar (más permanente)

1. Instalar vsce (VS Code Extension Manager):

npm install -g @vscode/vsce

2. Empaquetar la extensión:

vsce package

Esto creará un archivo .vsix (por ejemplo: git-graph-interactive-0.0.1.vsix)

3. Instalar el archivo .vsix en VS Code:
   • Abre VS Code
   • Ve a la vista de Extensiones (Ctrl+Shift+X)
   • Haz clic en el menú "..." en la parte superior
   • Selecciona "Install from VSIX..."
   • Selecciona el archivo .vsix que se creó

📖 Uso

1. Abre una carpeta que contenga un repositorio Git en VS Code
2. Abre la Paleta de Comandos (Ctrl+Shift+P o Cmd+Shift+P en Mac)
3. Escribe: Git: Show Interactive Graph
4. Presiona Enter

Cómo usar el Drag and Drop:

1. Ver commits: Cada rama se muestra con sus commits como círculos (bolitas)
2. Ver detalles: Pasa el mouse sobre un commit para ver:
   • Hash del commit
   • Mensaje del commit
   • Autor y fecha
3. Mover commits:
   • Haz clic y mantén presionado en un commit
   • Arrástralo hacia la zona de drop (🎯) de otra rama
   • Suelta para hacer cherry-pick del commit a esa rama