BeforeVSAfterBrickConnection.md

Before Brick Connection:

1. Workflow/State Diagram:

   • Initial State: Each brick exists independently on the workspace with its own properties and coordinates.
   • User Interaction: When a user attempts to connect two bricks, the system validates the connection based on compatibility rules and available connection points.
   • Connection Validation: The system checks if the connection is allowed based on the types of bricks being connected (instruction or argument), their compatibility, and any other constraints defined in the application logic.
   • Shadow Brick State: During the connection process, a "shadow" representation of the brick being moved is displayed to provide visual feedback to the user without affecting the actual workspace state.
   • Feedback to User: If the connection is valid, visual cues such as highlighting or snapping indicate that the connection is possible. Otherwise, the system prevents the connection and provides feedback to the user.

2. Brick Connection Process:

   • Instruction Brick Connection: When connecting instruction bricks, the system checks if the connection points align and if the connection is allowed based on the logic of the application. If valid, the connection is established, and the bricks become linked.
   • Argument Brick Connection: Connecting argument bricks involves similar validation steps, ensuring that the connection is allowed according to the argument types and constraints defined in the system.

After Brick Connection:

1. Workflow/State Diagram:

   • Updated State: After successful connection, the system updates the workspace state to reflect the new connections between bricks.
   • Re-rendering: The UI re-renders to display the connected bricks in their new configuration, including any changes in layout or appearance resulting from the connection.
   • Propagation of Changes: Any downstream effects of the connection, such as recalculating values or updating dependent bricks, are propagated through the system to ensure consistency.

2. Connection Validation Process:

   • Semantic Validation: The system performs semantic validation to ensure that the connection makes logical sense within the context of the application's domain logic.
   • Visual Feedback: Visual cues, such as color changes or animations, provide immediate feedback to the user regarding the success or failure of the connection validation process.
   • Error Handling: If the connection is not valid, appropriate error messages or indicators are displayed to guide the user on how to resolve the issue.

3. Shadow Brick State:

   • Post-Connection: Once the connection is established, the shadow representation of the brick is removed from the workspace, and the actual connected bricks are displayed in their final positions.
   • Feedback to User: Visual cues indicating the successful connection persist, reinforcing to the user that the action has been completed successfully.