playtool-demo/.kiro/specs/workflow-drag-drop-fix/tasks.md

Implementation Plan

• 1. Fix vuedraggable group configuration for cross-panel transfers

  • Update right panel draggable configuration to use proper group settings with clone functionality
  • Update left panel draggable configuration to accept nodes from right panel
  • Ensure group names are consistent between both panels
  • Requirements: 1.1, 1.2, 3.1, 3.2

• 2. Improve node cloning function for unique ID generation

  • Enhance cloneNode function to generate more robust unique IDs using timestamp and random string
  • Implement deep cloning of node configurations to prevent reference issues
  • Add validation to ensure cloned nodes maintain all required properties
  • Requirements: 1.4, 3.3

• 3. Fix draggable list binding and event handling

  • Correct the list binding for right panel draggable to prevent modification of original nodes
  • Update workflow change handler to properly process added nodes
  • Add validation for dropped nodes to ensure data integrity
  • Requirements: 1.2, 1.3, 2.2

• 4. Add visual feedback and drag state indicators

  • Implement drag state visual feedback with appropriate cursor changes
  • Add drop zone highlighting for better user experience
  • Enhance drag operation visual indicators
  • Requirements: 4.1, 4.2, 4.3, 4.4

• 5. Test and validate drag and drop functionality

  • Test dragging nodes from right panel to left panel
  • Verify node reordering within left panel works correctly
  • Validate that original nodes remain unchanged in right panel
  • Test configuration preservation and editing functionality
  • Requirements: 1.1, 1.2, 1.3, 1.5, 2.1, 2.2, 3.1, 3.2, 3.3

• 6. Fix workflow node drag and drop reordering

  • Enable proper drag and drop functionality for reordering nodes within the workflow panel
  • Configure vuedraggable with correct options for internal sorting
  • Add proper event handlers for drag operations
  • Remove unused drag event handlers to fix linting issues
  • Requirements: 1.2, 1.3, 2.2

• 7. Implement independent scrolling for left and right panels

  • Separate scroll containers for left workflow panel and right node library
  • Ensure left panel scrolling doesn't affect right panel and vice versa
  • Maintain proper layout and responsive behavior
  • Fix overflow handling for both panels
  • Requirements: 4.1, 4.2

• 8. Fix drag and drop sorting functionality

  • Configure vuedraggable with proper options for smooth sorting
  • Add force-fallback option to ensure consistent behavior
  • Improve drag handle visibility and interaction
  • Fix drag event handling for proper reordering
  • Requirements: 1.2, 1.3, 2.2

• 9. Remove left panel collapse functionality

  • Remove collapse/expand button and related functionality
  • Simplify left panel layout to fixed width
  • Clean up unused state variables and imports
  • Requirements: 4.1

• 10. Implement desktop application UX

  • Disable text selection throughout the application
  • Prevent web-like drag selection behavior
  • Maintain text selection only for input fields
  • Add proper cursor states for drag operations
  • Requirements: 4.1, 4.2, 4.3

• 11. Fix button interaction conflicts with drag handle

  • Separate drag handle area from button interaction area
  • Ensure delete and edit buttons are clickable and not blocked by drag area
  • Add proper z-index and pointer-events handling
  • Improve visual feedback for buttons and drag handle
  • Requirements: 1.3, 2.2, 4.3

• 12. Implement Tauri-based file operations for import/export

  • Configure Tauri permissions for fs and dialog plugins
  • Replace web-based file operations with native Tauri APIs
  • Implement save dialog for workflow export
  • Implement open dialog for workflow import
  • Add proper error handling and user feedback
  • Requirements: 2.1, 2.2, 3.1, 3.2

• 13. Enhance workflow execution and JSON output

  • Improve startTask function to output detailed JSON to console
  • Add metadata like creation time and version to exported workflows
  • Implement proper workflow validation during import
  • Add comprehensive logging for debugging and monitoring
  • Requirements: 1.5, 2.1, 2.2

• 14. Fix Tauri plugin configuration and dependencies

  • Correct Tauri 2.0 plugin configuration format in tauri.conf.json
  • Add dialog plugin dependency to Cargo.toml
  • Initialize dialog plugin in lib.rs
  • Remove invalid configuration fields that caused startup errors
  • Requirements: 2.1, 3.1

• 8. Fix Tauri 2.0 permissions configuration structure

  • Move permissions to app section in tauri.conf.json (not root level)
  • Add dialog plugin to plugins section
  • Resolve "Additional properties are not allowed" configuration error
  • Ensure proper Tauri 2.0 configuration format compliance
  • Requirements: 2.1, 3.1