Drag-Drop Debugging Guide

Complete logging and debugging for drag-drop functionality

🐛 Drag-Drop Debugging Guide

Status: Active debugging session
Goal: Make module library → canvas drag-drop work perfectly!

🎯 WHAT WE'RE TESTING

Flow: Drag module type from library sidebar → Drop on canvas → Create new module

Expected Behavior:

  1. User drags "Galaxy" from library
  2. Canvas shows drag-over state (visual feedback)
  3. User drops on canvas
  4. New galaxy module appears at drop location
  5. Module is selected automatically

📝 LOGGING ADDED

1. Library Drag Start

File: module-library-browser.component.ts

onModuleTypeDragStart(event: DragEvent, type: ModuleType) {
  console.log('🚀 Drag started from library:', type);
  
  // ... set drag data ...
  
  console.log('📦 Setting drag data:', dragData);
  console.log('📄 JSON string:', jsonString);
  console.log('✅ Drag data set successfully!');
}

What to Look For:

If Missing: Drag event not firing from library cards!

2. Canvas Drag Over

File: universal-canvas.component.ts

onCanvasDragOver(event: DragEvent) {
  console.log('📦 Drag over canvas:', {
    types: event.dataTransfer?.types,
    effect: event.dataTransfer?.effectAllowed,
    target: (event.target as HTMLElement).className
  });
}

What to Look For:

If Missing: Canvas not receiving drag events! (Check CSS pointer-events)

3. Canvas Drag Leave

File: universal-canvas.component.ts

onCanvasDragLeave(event: DragEvent) {
  console.log('👋 Drag leave canvas');
}

What to Look For:

4. Canvas Drop

File: universal-canvas.component.ts

onCanvasDrop(event: DragEvent) {
  console.log('🎯 Canvas Drop Event:', event);
  console.log('📦 DataTransfer types:', event.dataTransfer?.types);
  console.log('📄 JSON Data:', jsonData);
  console.log('✅ Parsed data:', data);
  console.log('📍 Creating module at position:', { canvasX, canvasY });
}

What to Look For:

If Missing:

5. Module Creation

File: universal-canvas.component.ts

this.moduleService.install(...).subscribe({
  next: (newModule) => {
    console.log('✅ Module created:', newModule);
  },
  error: (err) => {
    console.error('❌ Failed to create module:', err);
  }
});

What to Look For:

🔍 TESTING CHECKLIST

Step 1: Open Browser Console

# In browser (Chrome/Edge/Firefox)
Press F12 or Ctrl+Shift+I
Go to Console tab
Clear console (trash icon)

Step 2: Test Drag Start

  1. Hover over a module type in library (e.g., "Galaxy")
  2. Click and start dragging
  3. Check Console for:
    • ✅ "🚀 Drag started from library: galaxy"
    • ✅ "📦 Setting drag data: ..."
    • ✅ "✅ Drag data set successfully!"

If you see these: Drag start is working! ✅
If not: Library drag events not wired correctly ❌

Step 3: Test Drag Over

  1. While dragging, move cursor over the canvas area
  2. Check Console for:
    • ✅ "📦 Drag over canvas: ..." (repeating as you move)

If you see this: Canvas is receiving drag events! ✅
If not: Canvas might be blocked by another element (z-index issue) ❌

Step 4: Test Drop

  1. While dragging over canvas, release mouse button
  2. Check Console for:
    • ✅ "🎯 Canvas Drop Event: ..."
    • ✅ "📄 JSON Data: ..."
    • ✅ "✅ Parsed data: ..."
    • ✅ "📍 Creating module at position: ..."
    • ✅ "✅ Module created: ..."

If you see all: MODULE CREATION WORKS! 🎉
If partial: Check which step failed ❌

🚨 COMMON ISSUES & FIXES

Issue 1: No Drag Start Logs

Problem: Library drag events not firing

Possible Causes:

  1. draggable="true" missing from cards
  2. (dragstart) handler not bound
  3. Event being prevented by parent

Fix:

<!-- module-library-browser.component.html -->
<div
  class="module-type-card"
  draggable="true"
  (dragstart)="onModuleTypeDragStart($event, type)"
>

Issue 2: No Drag Over Logs

Problem: Canvas not receiving drag events

Possible Causes:

  1. Another element overlaying canvas (z-index)
  2. Canvas has pointer-events: none
  3. Drop handlers not on right element

Fix:

<!-- universal-canvas.component.html -->
<div 
  class="universal-canvas-container" 
  (dragover)="onCanvasDragOver($event)"
  (drop)="onCanvasDrop($event)"
>

// universal-canvas.component.scss
.universal-canvas-container {
  pointer-events: auto; // Ensure events work
  z-index: 1; // Below controls/panels
}

Issue 3: No Drop Logs

Problem: Drop event not firing

Possible Causes:

  1. dragover not calling preventDefault()
  2. Browser blocking drop
  3. Wrong dropEffect

Fix:

onCanvasDragOver(event: DragEvent) {
  event.preventDefault(); // CRITICAL!
  event.stopPropagation();
  
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'copy'; // Show + cursor
  }
}

Issue 4: No JSON Data in Drop

Problem: jsonData is null/empty

Possible Causes:

  1. Data not set properly in drag start
  2. Wrong MIME type
  3. Browser security blocking cross-origin

Fix:

// Library component
event.dataTransfer.setData('application/json', JSON.stringify({
  type: 'module-type',
  moduleType: type
}));

// Canvas component
const jsonData = event.dataTransfer?.getData('application/json');

Issue 5: Module Not Appearing

Problem: Module created but not visible

Possible Causes:

  1. Position calculation wrong (off-screen)
  2. childModules() not updating
  3. loadModules() not called

Fix:

// After module created
this.loadModules(); // Refresh module list
this.selectModule(newModule); // Auto-select

📊 SUCCESS CRITERIA

Full Working Flow:

1. 🚀 Drag started from library: galaxy
2. 📦 Setting drag data: {type: 'module-type', moduleType: 'galaxy'}
3. ✅ Drag data set successfully!
4. 📦 Drag over canvas: {types: ['application/json', 'text/plain'], ...}
5. 📦 Drag over canvas: ... (repeating)
6. 🎯 Canvas Drop Event: DragEvent {...}
7. 📦 DataTransfer types: ['application/json', 'text/plain']
8. 📄 JSON Data: {"type":"module-type","moduleType":"galaxy"}
9. ✅ Parsed data: {type: 'module-type', moduleType: 'galaxy'}
10. 📍 Creating module at position: {canvasX: 450, canvasY: 380}
11. ✅ Module created: {id: 'mod_...', name: 'galaxy-...', type: 'galaxy'}

If you see all 11 steps: PERFECT! Drag-drop is fully functional! 🎉

🎯 NEXT ACTIONS

Once drag-drop works:

  1. Remove some logging (keep critical ones)
  2. Add visual feedback (cursor changes, drop zones)
  3. Add module-on-module nesting (drag World onto Galaxy)
  4. Add multi-select drag (move multiple modules)
  5. Add snap-to-grid for dropped modules

Created: November 10, 2025 8:00 PM
Status: 🔍 ACTIVE DEBUGGING
Test Now: Open browser console and drag a module!