Editor Web - Widget Positioning & Persistence

Widget Drag & Drop System

The editor web system uses a sophisticated drag-and-drop mechanism with Flash Persistence for state management and real-time reactive canvas expansion.

Key Components

1. ResponsiveDraggableDirective: Handles drag interactions, visual feedback, and real-time canvas expansion
2. WidgetHostComponent: Manages widget positioning and CSS application
3. EditorService: Coordinates state updates and persistence
4. Flash Persistence: Handles automatic state persistence
5. CanvasOperationsService: Manages canvas height and layout operations

🎯 Real-Time Canvas Features

Intelligent Canvas Expansion

• During Drag: Canvas expands in real-time as widgets approach boundaries
• Buffer Zone: 150px buffer triggers automatic expansion before widgets reach edge
• No Reversion: Widgets never snap back or appear outside canvas
• Grid Updates: Cuadrícula (grid background) updates dynamically with canvas height
• Unlimited Height: Canvas can expand infinitely - no artificial limits ✨
• Minimum Height: 500px base height ensures usable canvas even without widgets

Reactive Grid System

• Grid pattern adjusts automatically when canvas expands
• Maintains consistent grid spacing across all canvas heights
• Updates triggered by custom events during drag operations

Boundary Prevention

• Widgets are prevented from appearing outside canvas bounds
• Automatic canvas expansion ensures sufficient space
• Visual feedback during drag shows available drop zones

Critical Issues & Solutions

Issue: Widgets Not Persisting Position Changes

Symptoms:

• Widgets move visually during drag but revert to original position
• No persistence logs in console

Root Causes & Solutions:

1. Unreasonable Coordinate Values

   • Problem: Widgets loaded with coordinates like x: 7244, y: 13187 (off-screen)
   • Solution: Position validation in ResponsiveDraggableDirective.updateWidgetPositionModel()

2. Type Safety Issues

   • Problem: Operator '<' cannot be applied to types 'string | number' and 'number'
   • Solution: Convert coordinates to numbers before comparison in validation logic

3. CSS Positioning Override

   • Problem: position: relative; left: auto; top: auto; overriding absolute positioning
   • Solution: Set [autoApplyPositionAndSize]="true" in editor canvas template

4. Drag Directive Disabled

   • Problem: dragEnabled: false because widgets not selected
   • Solution: Ensure widgets are selected (isSelected: true) for drag to work

5. Transform Reset Timing

   • Problem: Transform reset too early, causing visual snap-back
   • Solution: Delay transform reset by 50ms to allow CSS positioning to apply

6. Canvas Auto-Sizing

   • Problem: Canvas doesn't expand vertically when widgets are positioned outside visible area
   • Solution: Real-time canvas expansion during drag operations

7. Conflicting Position Validations

   • Problem: Two position validation systems fighting each other
   • Solution: Removed WidgetHostComponent validation, let ResponsiveDraggableDirective handle all

8. Canvas Height Constraint

   • Problem: Canvas has fixed height preventing vertical expansion
   • Solution: Use height: auto with dynamic min-height based on widget positions

9. Main Layout Constraints

   • Problem: Parent layout containers with overflow: hidden preventing canvas expansion
   • Solution: Changed main layout to overflow: visible and content container to allow vertical expansion

10. Real-Time Expansion During Drag ✨

    • Problem: Canvas only expanded after drag ended, causing widgets to appear outside temporarily
    • Solution: Added checkAndExpandCanvas() method that runs during drag move events
    • Implementation:
      • Monitors widget position in real-time during drag
      • Expands canvas immediately when widget approaches boundary (150px buffer)
      • Dispatches canvas-realtime-expansion custom event
      • Updates grid background dynamically

11. Artificial Height Limits Removed ✨ NEW

    • Problem: Canvas was limited to ~2800px height due to hardcoded constraints
    • Solution: Removed all artificial limits - canvas can now expand infinitely
    • Changes:
      • Position validation: Changed from < 2000 to < 50000 (only catches obvious errors)
      • Drag constraints: Removed maxY limit, set to Number.POSITIVE_INFINITY
      • Allow widgets to be positioned at any Y coordinate (5000px, 10000px, etc.)
    • Result: Professional canvas that grows with your content, no arbitrary restrictions

Debugging Checklist

When widgets don't persist position changes:

1. Check Position Values: Look for unreasonable coordinates (>2000px)
2. Verify Drag Enablement: Ensure dragEnabled: true in logs
3. Check CSS Positioning: Verify position: absolute and left/top values
4. Monitor Persistence: Look for 💾 Flash Persistence: Persisted logs
5. Check State Updates: Verify EditorService.setWidgets is called
6. Check Real-Time Expansion: Look for 🚨 REAL-TIME CANVAS EXPANSION logs
7. Verify Grid Updates: Check for 🎯 REAL-TIME EXPANSION logs

Success Indicators

✅ Working correctly when you see:

• 🎯 Position validation check: {isPositionReasonable: true}
• 🎯 WidgetHostComponent.isDraggable: {finalDraggable: true}
• 🎯 Updating widget position model: {newX: 68, newY: 164}
• 💾 Flash Persistence: Persisted flash:editor-state
• ✅ WRITE VERIFICATION: flash:editor-state successfully persisted
• 🚨 REAL-TIME CANVAS EXPANSION: {widgetBottom: 450, newMinHeight: 600} ✨ NEW
• 🎯 REAL-TIME EXPANSION: {newHeight: 600, triggerReason: 'drag-move'} ✨ NEW

Performance Notes

• Flash Persistence uses micro-cache for instant reads
• Position validation prevents off-screen widget issues
• Transform reset timing ensures smooth visual feedback
• State updates trigger automatic persistence via signals
• Real-time canvas expansion runs only when needed (widget approaches boundary)
• Grid updates are throttled to prevent performance issues
• Canvas never shrinks during editing to maintain stability

API Reference

Custom Events

• canvas-height-recalculation-needed: Triggered after drag end for full height recalculation
• canvas-realtime-expansion: Triggered during drag when canvas needs immediate expansion
  • Detail: { newHeight: number, widgetId: string, widgetBottom: number, triggerReason: string }

Key Methods

• ResponsiveDraggableDirective.checkAndExpandCanvas(): Real-time canvas expansion during drag
• CanvasOperationsService.recalculateCanvasHeight(): Full canvas height recalculation
• EditorCanvasComponent.updateGridBackground(): Dynamic grid background update