Skip to content

Latest commit

 

History

History
108 lines (78 loc) · 2.87 KB

README.md

File metadata and controls

108 lines (78 loc) · 2.87 KB

Infinite Canvas with Shape Tools

This project is a React application that provides an infinite canvas where users can add and manipulate shapes. The application is built using React, TypeScript, Vite, and Konva.js.

Features

  • Infinite Canvas:
    • Canvas can be panned infinitely in any direction.
    • Canvas background can be changed using predefined patterns.
  • Shape Tools:
    • Users can add different shapes (rectangle, circle, line, ellipse, text, arrow, star, polygon) to the canvas.
    • Shapes can be selected, dragged, and transformed (resized, rotated).
    • Shapes maintain z-index order on interaction.
  • Toolbar:
    • The toolbar can be dragged to any position on the screen.
    • Contains tools to add shapes, select tools, undo/redo actions, and change canvas background patterns.
  • Responsive Design:
    • The application adapts to different screen sizes and resolutions.

Technologies Used

  • React
  • TypeScript
  • Vite
  • Konva.js
  • SCSS

Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

  • Node.js and npm installed on your machine.

Installation

  1. Clone the repository:

    git clone https://github.com/eugenepokalyuk/react-crafttech.git
cd react-crafttech

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. Open the application:

    Open your browser and navigate to http://localhost:5173.

Project Structure

src/
├── assets/
│   ├── fonts/
│   ├── images/
│   └── icons/
│       ├── add.svg
│       ├── select.svg
│       ├── undo.svg
│       └── redo.svg
├── components/
│   ├── App/
│   │   └── App.tsx
│   ├── Canvas/
│   │   ├── Canvas.tsx
│   │   └── Canvas.scss
│   ├── Toolbar/
│   │   ├── Toolbar.tsx
│   │   └── Toolbar.scss
└── main.tsx

Explanation of Key Files

  • src/components/Canvas/Canvas.tsx: The main canvas component where shapes are added and manipulated.
  • src/components/Toolbar/Toolbar.tsx: The toolbar component that provides tools for interacting with the canvas.
  • src/main.tsx: Entry point for the React application.

Comments

  • The application uses Konva.js for rendering and manipulating shapes on the canvas.
  • The toolbar is draggable and allows users to perform various actions such as adding shapes, selecting tools, and changing the canvas background.
  • The application ensures a smooth user experience with real-time updates and error handling.

Deployment

To build the application for production, run:

npm run build

The built files will be in the dist directory, which can be deployed to any static hosting service.