Canvas-Based User Interaction for Activities and Events

Project Overview

This project demonstrates a canvas-based user interaction, allowing users to visually arrange and connect "activities" and "events" in a grid-like structure. The core objective is to enable the placement of these elements while enforcing certain rules for valid positioning and connections, as well as providing real-time feedback to users. The project is built with React and the React-Konva library to manage the canvas and its interactions.

Key Features:

• Drag-and-drop UI for placing activities and events.
• Activity Placement on grid borders and spanning across cells.
• Event Connections to activities' start or end points (head or butt).
• Real-time Validation of placements and connections.
• Customizable Canvas with the ability to adjust activity sizes, reconnect events, and visualize connections.
• Persistence of canvas state (save and reload functionality).

Components

1. LibraryPanel

The LibraryPanel component renders the menu containing draggable elements. These elements include:

• Activities (e.g., activity1, activity2)
• Events (e.g., event1, event2)
• Users can drag these elements onto the canvas area for further interaction.

2. GridCanvas

The GridCanvas component represents the main interactive area of the canvas. This area consists of an irregular grid where activities and events are placed. It handles:

• Displaying the grid layout.
• Rendering elements such as activities and events.
• Handling interactions for placing activities and events and validating their positions.
• Managing the connections between activities and events.

3. ElementsCollection

The ElementsCollection component renders the actual activities and events based on the element type. This is where both activities and events are conditionally displayed according to their types (either 'activity' or 'event').

4. ConnectionsCollection

The ConnectionsCollection component is responsible for rendering the connections between activities and events. This includes drawing lines or visual indicators to show how events are connected to the activities.

Logic and Data Structure

Grid Layout:

The grid is defined as a two-dimensional array where each cell represents a portion of the canvas. The grid is irregular, with certain cells forming borders between which activities can be placed.

Element Object:

Each element (activity or event) is represented by an object with the following structure:

{
  id: 'unique_id',     // Unique identifier for the element
  type: 'activity',    // 'activity' or 'event'
  position: {          // Position on the grid
    x: number,
    y: number
  },
  connections: []      // List of connected events (for activities) or activities (for events)
}

• Activities are placed on the borders between cells and can span across multiple cells.
• Events must be connected to either the "head" (start) or the "butt" (end) of an activity.

Implementation Details

1. Drag-and-Drop Functionality

Users can drag activities and events from the LibraryPanel onto the GridCanvas. The system validates the drop location in real-time:

• Activities must align with valid borders or span across multiple cells.
• Events must be connected to the correct endpoints of activities.

2. Validation Rules

The application enforces several validation rules to ensure proper element placement and connection:

• Activity Placement: Activities can only be placed on grid borders. If the user attempts to place an activity outside of these borders, the system will reject the action.
• Event Placement: Events can only be connected to the start (head) or end (butt) of an activity. Invalid placements are rejected with visual feedback, such as snapping the element back to its original position or displaying a warning message.

3. Visual Feedback

As users drag and place elements:

• Snapping: Elements snap into valid positions based on the grid layout and defined borders.
• Highlighted Connections: When dragging an event, valid connection points on the activity are highlighted dynamically.
• Connection Lines: When an event is connected to an activity, a visual line or other graphic element is drawn to indicate the relationship.

4. Customization

Users can interact with the canvas in the following ways:

• Resizing Activities: Activities can be resized to span different numbers of cells, with the grid visually updating to reflect the changes.
• Reconnecting Events: Events can be reconnected to different activities or endpoints. The connections are updated in real-time with visual feedback.

5. Save and Preview

The system allows users to save the current canvas configuration. This configuration includes:

• The number and type of activities and events.
• Their positions on the grid.
• Their connections to one another. The canvas can be saved and reloaded to confirm persistence, and the layout remains as it was before.

Evaluation Criteria

1. Usability

• Intuitive Drag-and-Drop: The system should provide a seamless, intuitive drag-and-drop experience.
• Clear Visual Feedback: Users should be able to easily understand which actions are valid or invalid, based on real-time feedback.

2. Compliance with Rules

• Correct Activity Placement: Activities must be placed correctly on borders or spanning across multiple cells.
• Correct Event Connections: Events must be connected to valid points on activities (head or butt).

3. Performance

• Smooth Dragging and Snapping: The drag-and-drop functionality should be smooth and responsive.
• Quick Validation: The system should quickly validate element placements and connections.

4. Aesthetics

• Professional Visual Design: The user interface should have a clean, professional look, with clear grid lines, proper spacing, and distinct elements for activities, events, and connections.

How to Use the Application

1. Install Dependencies

First, ensure you have Node.js installed. Then, install the necessary dependencies by running:

npm install

2. Run the Application

To start the development server and run the application locally:

npm start

This will open the app in your default web browser at http://localhost:3000.

3. Interacting with the Canvas

• Drag Elements: From the LibraryPanel, drag activities and events onto the grid. You can position activities on grid borders and events at the head or butt of an activity.
• Validate Placement: The canvas will automatically validate placements and provide feedback if the placement is invalid.
• Customize and Save: Resize activities or reconnect events as needed. Use the "Save" button to save the configuration, and reload the canvas to see the saved layout.

Conclusion

This project demonstrates a powerful, flexible, and intuitive approach to visualizing relationships between activities and events in a grid-based layout. The application enforces specific placement rules, provides clear real-time feedback, and offers a customizable and persistent user experience. It showcases the capability of React and React-Konva to handle complex, interactive canvas-based interfaces.