Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vetal7777/react-sketch-pad

A minimalist drawing tool using React and TypeScript, ReactSketchPad allows users to draw and erase lines on a canvas. It combines the simplicity of sketching with the power of modern web technologies.
https://github.com/vetal7777/react-sketch-pad

canvas oop react typescript

Last synced: about 2 months ago
JSON representation

A minimalist drawing tool using React and TypeScript, ReactSketchPad allows users to draw and erase lines on a canvas. It combines the simplicity of sketching with the power of modern web technologies.

Awesome Lists containing this project

README

        

# ReactSketchPad

## Overview

ReactSketchPad is an intuitive and interactive line-drawing application built using React and TypeScript. It provides a user-friendly interface for creating, visualizing, and manipulating lines on a canvas. This project is developed with Object-Oriented Programming (OOP) principles to ensure modularity and maintainability.

## Features

- **Two-Click Line Drawing**: Users can add lines by performing two clicks. The first click sets the starting point. As the mouse moves, the line dynamically extends from the starting point to the cursor's position. A second click sets the endpoint, adding the line to the canvas.
- **Contextual Right-Click Action**: If the user begins drawing and then right-clicks, the line in progress is discarded.
- **Intersection Indication**: Whenever a line intersects with another, a red dot appears at the intersection point, regardless of whether the line is being created or added to the canvas.
- **Line Collapse Animation**: A feature to "collapse lines" animates all lines converging to the center of each line within a 3-second timeframe.

## Technologies

- **Object-Oriented Programming (OOP)**: Ensures a well-organized code structure.
- **TypeScript**: Provides type safety and enhances code quality and maintainability.
- **React**: Offers a robust framework for building the user interface.


## Getting Started

To get started with ReactSketchPad:

1. Clone the repository.
2. Install the required dependencies.
3. Run the application locally to start drawing.

## Contributing

Contributions to ReactSketchPad are welcome! Please refer to our contribution guidelines for more details on how to participate in the development of this project.