# react-design-editor

**Repository Path**: youngoldman/react-design-editor

## Basic Information

- **Project Name**: react-design-editor
- **Description**: React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs 
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2021-04-27
- **Last Updated**: 2024-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Design Editor
- React Design Editor has started to develope direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs

- Layouts and components such as property edits, item lists, toolbars were developed as react.js and the ant.design component was primarily used.

- The project is constantly being developed to support a variety of functions, and its goal is to be able to draw workflow (BPMN) in the future.

# Demos
[React Design Editor](https://salgum1114.github.io/react-design-editor/)

# Dependencies
- React.js
- ant.design
- fabric.js
- mediaelement.js
- react-ace
- interact.js
- anime.js
- fontawesome5
- webpack4
- babel

# Getting Started
- git clone https://github.com/salgum1114/react-design-editor.git - Clone the project
- npm start - Run script
- http://localhost:8080 - Host access

# Image Map
## Three layout mode
### 1. Fixed
![fixed](https://user-images.githubusercontent.com/19975642/55678049-6aff6180-592e-11e9-8b29-8e1d60df178a.PNG)

### 2. Responsive
![responsive](https://user-images.githubusercontent.com/19975642/55678050-6cc92500-592e-11e9-8a57-c82d371e4be1.PNG)

### 3. Fullscreen
![fullscreen](https://user-images.githubusercontent.com/19975642/55678051-6dfa5200-592e-11e9-9b9e-b8d8ee3ccb08.PNG)

### Preview mode
![preview](https://user-images.githubusercontent.com/19975642/55678052-6fc41580-592e-11e9-9958-9a9be8239bd7.PNG)

# Workflow
![workflow](https://user-images.githubusercontent.com/19975642/55678053-718dd900-592e-11e9-9996-cce9b46d8433.PNG)

# Features
- [x] Add
- [x] Remove
- [x] Resize
- [x] Clone
- [x] Tooltip
- [x] Reorder
- [x] Zoom
- [x] Preview
- [x] Copy & Paste
- [x] Drag & Drop
- [x] Upload (Drag & Drop)
- [x] Alignments
- [x] Drawing - Polygon, Link, Line, Arrow Line
- [x] Export / Import - JSON
- [x] Video
- [x] Dom Element
- [x] Code Editor - HTML / CSS / JS / Preview
- [x] iframe
- [x] Animation - Fade / Bounce / Shake / Scaling / Rotation / Flash
- [x] Icon Chooser - fontawesome 5.2.0 free version
- [x] Google Fonts - 20 fonts
- [x] Align Guidlines - moving
- [x] Interaction Mode - grap / selection / ctrl + drag grab
- [x] Group / Ungroup
- [x] Image Cropping
- [x] Snap To Grid
- [x] Multiple Layout - Fixed / Responsive / Fullscreen / Grid
- [x] Context menu
- [x] Save Image - Canvas, Target Object
- [x] Undo / Redo - development
- [ ] Wireframes - development
- [ ] Multiple Map - development