File Structure :

App.tsx

This is the main component where most of the application logic resides.

Initialization and State Management

• Undo and Redo: Using hooks from Liveblocks (useUndo, useRedo), providing undo and redo functionality.
• Canvas Objects Storage: Using useStorage hook from Liveblocks to store and synchronize canvas objects.
• References and State Variables:
  • canvasRef: Reference to the HTML canvas element.
  • fabricRef: Reference to the Fabric.js canvas instance.
  • Various refs like isDrawing, shapeRef, selectedShapeRef, etc., to manage drawing state, selected shapes, and active elements.
  • State variables for activeElement and elementAttributes.

Functions and Event Handlers

• Mutations: Using useMutation to define mutations for deleting and syncing shapes in Liveblocks storage.
• Active Element Handler: handleActiveElement function to set the active element in the toolbar and trigger respective actions (e.g., delete, reset, upload image).

UseEffect Hooks

• Canvas Initialization: Initializes Fabric.js canvas, sets up event listeners for mouse actions, object modifications, scaling, and window resize.
• Canvas Rendering: Re-renders the canvas when the Liveblocks storage (canvasObjects) changes.

Rendering

• Main Layout: Contains Navbar, LeftSidebar, Live, and RightSidebar components.
• Navbar: Handles image uploads and active element selection.
• LeftSidebar: Lists all shapes.
• Live: Displays the canvas.
• RightSidebar: Displays and updates element attributes.

Room.tsx

Sets up the Liveblocks room provider.

• RoomProvider: Initializes the presence and storage for the room.
• ClientSideSuspense: Ensures loading state is handled with a fallback loader.

global.tsx

Contains global styles and Tailwind CSS utilities.

• Global Styles: Basic styles for the application.
• Tailwind CSS Utilities: Custom utilities for various UI components like input fields and right sidebar menu.

layout.tsx

Defines the root layout of the application.

• Metadata: Sets the title and description of the application.
• Google Font: Imports Work Sans font.
• Room Component: Wraps the children components inside the Room provider to enable real-time collaboration.

page.tsx

Disables server-side rendering for the App component to avoid pre-rendering issues with the canvas element.

• Dynamic Import: Uses dynamic from Next.js to import App with ssr: false.

JavaScript Logic

Main Event Handlers (from @/lib/canvas)

• Mouse Events:

  • handleCanvasMouseDown: Initializes shape creation or selection on mouse down.
  • handleCanvaseMouseMove: Updates the shape being drawn or moved.
  • handleCanvasMouseUp: Finalizes the shape creation or modification.
  • handlePathCreated: Handles creation of paths (freeform drawing).
  • handleCanvasObjectModified: Updates storage when an object is modified.
  • handleCanvasObjectMoving: Handles movement of objects.
  • handleCanvasSelectionCreated: Handles selection of objects.
  • handleCanvasObjectScaling: Handles object scaling.
  • handleCanvasZoom: Manages zoom in and out on the canvas.
  • handleResize: Adjusts canvas size on window resize.

• Key Events (from @/lib/key-events):

  • handleDelete: Deletes selected shape.
  • handleKeyDown: Handles keyboard shortcuts for delete, undo, redo, etc.

Conclusion :

This Figma clone project demonstrates a comprehensive use of React.js for UI, Fabric.js for canvas manipulation, and Liveblocks for real-time collaboration. The code is well-structured, with clear separation of concerns between different functionalities, making it easy to understand and extend. The use of hooks and context ensures a responsive and interactive user experience, while the integration with Liveblocks enables seamless real-time collaboration.