51 lines
2.7 KiB
Markdown
51 lines
2.7 KiB
Markdown
# Requirements Document
|
|
|
|
## Introduction
|
|
|
|
This feature addresses the drag and drop functionality issue in the existing workflow visualization page where nodes from the right panel (node library) cannot be properly dragged to the left panel (task workflow). The current implementation has configuration issues with vuedraggable that prevent proper cloning and dropping of nodes between panels.
|
|
|
|
## Requirements
|
|
|
|
### Requirement 1
|
|
|
|
**User Story:** As a user, I want to drag nodes from the right panel node library to the left panel task workflow, so that I can create a visual workflow sequence.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN I drag a node from the right panel THEN the system SHALL create a visual clone that follows my cursor
|
|
2. WHEN I drop a cloned node onto the left panel THEN the system SHALL add the node to the workflow list
|
|
3. WHEN I drop a cloned node onto the left panel THEN the system SHALL preserve all node properties (name, icon, colors, configuration)
|
|
4. WHEN I drop a cloned node onto the left panel THEN the system SHALL generate a unique ID for the new instance
|
|
5. IF the original node has editable configuration THEN the cloned node SHALL maintain the editable configuration capability
|
|
|
|
### Requirement 2
|
|
|
|
**User Story:** As a user, I want to reorder nodes within the left panel workflow, so that I can adjust the execution sequence of my tasks.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN I drag a node within the left panel THEN the system SHALL allow reordering of workflow nodes
|
|
2. WHEN I reorder nodes in the left panel THEN the system SHALL maintain all node properties and configurations
|
|
3. WHEN I reorder nodes in the left panel THEN the system SHALL update the workflow sequence immediately
|
|
|
|
### Requirement 3
|
|
|
|
**User Story:** As a user, I want the right panel nodes to remain unchanged when dragging, so that I can reuse the same node type multiple times.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN I drag a node from the right panel THEN the original node SHALL remain in the right panel
|
|
2. WHEN I drag a node from the right panel THEN the system SHALL create a copy rather than moving the original
|
|
3. WHEN I drag multiple instances of the same node type THEN each instance SHALL have a unique identifier
|
|
|
|
### Requirement 4
|
|
|
|
**User Story:** As a user, I want visual feedback during drag operations, so that I understand where I can drop nodes and what will happen.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN I start dragging a node THEN the system SHALL provide visual feedback indicating drag state
|
|
2. WHEN I hover over a valid drop zone THEN the system SHALL highlight the drop zone
|
|
3. WHEN I hover over an invalid drop zone THEN the system SHALL indicate the zone is not droppable
|
|
4. WHEN dragging is in progress THEN the cursor SHALL change to indicate drag operation
|