Clipboard & Drag & Drop

Overview

The Clipboard and Drag & Drop system provides inter-application data transfer capabilities, similar to Windows clipboard functionality.

Clipboard

Data Formats

• Text - Plain text data
• Rich Text - Formatted text with styles
• Images - Bitmap and vector graphics
• Files - File paths and references
• Custom - Application-specific formats

Operations

• clipboard.copy(data, format) - Copy to clipboard
• clipboard.paste(format) - Paste from clipboard
• clipboard.clear() - Clear clipboard
• clipboard.hasFormat(format) - Check if format available

Drag & Drop

Overview

Drag and drop functionality allows users to move files, icons, and other UI elements by dragging them with the mouse. The DragDropSystem is a standalone component that works with the EventBus for decoupled communication.

EventBus Events

• drag.start - Drag operation begins (mousedown detected)
• drag.begin - Drag threshold crossed (actual drag started)
• drag.move - Element being dragged
• drag.enter - Dragged item enters drop target
• drag.leave - Dragged item leaves drop target
• drag.drop - Item dropped on target
• drag.end - Drag operation ends

Usage

// Enable drag for an element
dragDropSystem.enableDrag(element, {
    iconId: 'my-icon',
    iconType: 'application'
});

// Register drop target
dragDropSystem.registerDropTarget(desktop, {
    onDragEnter: (event) => { /* highlight drop zone */ },
    onDragLeave: (event) => { /* remove highlight */ },
    onDrop: (event) => { /* handle drop */ }
});

// Subscribe to drag events via EventBus
eventBus.on('drag.end', (event) => {
    if (event.data.wasDragging) {
        // Save position, etc.
    }
});

Integration

The DragDropSystem is completely decoupled:

• No direct DOM event listeners (except initialization)
• Subscribes to input events via EventBus
• Emits drag/drop events via EventBus
• Can be used by any component that subscribes to drag events
• Works independently of gui-server