React Whiteboard for Online Training
Project Overview: Develop a fully functional whiteboard component for an online training platform using React. The whiteboard should be responsive and occupy 100% width of its container. Below the whiteboard, include a comprehensive tools panel with various icons and buttons for user interaction. Whiteboard Functionalities: Whiteboard Canvas: Full width, responsive canvas for drawing and writing. Tools Panel: Move Icon/Button: Enables selection, resizing, and moving of drawn objects. When user double click on any object got selected and handle appears around it (crossbar at centre, small circular handles at corners and small bars at sides. When user click press and drag circular handles it should resize in proportion, if user click press and drag top/bottom or left/right bar it should increase in height or width respectively. If user click press and drag the crossbar object should move. Once user release the click item should become stationary there. Pen Tool: User can click on the pen icon to see all types of tips available like round straight, slant and rectangular. User can select any tip to draw. When user click and drag to draw line should appear when user relase the mouse click or pen, line or drawing should stop. Adjustable pen size via slider and numeric input. User can change the size of the pen tip using either slider or putting number in the number box. Adjustable pen transparency – user can adjust transparency using slider values from 1% to 100% Eraser Tool: Eraser to erase the pen drawing. Adjustable eraser size with a slider and numeric input. Just like pen user can choose eraser shape either round and square. Color Picker: Opens a color panel; user can select colors to add to a palette. Applies selected color to current selected drawing or shapes. Shape Tool: Click to open a popup with shape options (line, rectangle, oval, triangle, star). User can choose out of these tools and then can click anywhere on canvas to draw it. User can double click on the created shape and then he can resize, move or delete the selected shape. Important whenever user switch from one tool to another the previous should stop working and the current tool should start working. Also toggle the state of the icon appearance. Allows user to draw selected shapes on the canvas. Text Tool: Click to add text; double click on the canvas to edit text. Image Upload: Button to upload images from the user’s computer. Undo/Redo Buttons: Manage activity history (up to 10 steps). Clear Button: Clears the entire whiteboard. Zoom Tools: Zoom In: Changes cursor to a magnifying lens (+); click to zoom in on a selected area. Zoom Out: Changes cursor to a magnifying lens ( ); click to zoom out. Background Options: Paper Icon: Opens a menu to select background patterns (grid, lined paper). Paper Size Icon: Input fields for custom dimensions (height, width) and a dropdown for standard sizes (A4, A3). Add New Page: Button to add a new page/canvas. Navigation arrows to switch between pages. Selection Tool: Allows users to select and manipulate drawn objects (text, shapes, images). Selected objects can be deleted using the delete button or the eraser. User Interaction: Users can modify colors of shapes and text using the color picker. Editable text should be resizable and movable, with handles appearing when selected. Clicking outside or pressing the Escape key will deselect any selected objects. Design Requirements: Ensure the entire component is responsive for different screen sizes. Maintain a clean and intuitive user interface for easy interaction.
