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

- 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/47961458-b5627680-e04e-11e8-99e0-9d4276c4e9e5.PNG)

### 2. Responsive
![responsive](https://user-images.githubusercontent.com/19975642/47961459-b7c4d080-e04e-11e8-84b0-b4921270eddd.PNG)

### 3. Fullscreen
![fullscreen](https://user-images.githubusercontent.com/19975642/47961460-b98e9400-e04e-11e8-9df3-14f12edb3a5f.PNG)

### Preview mode
![preview](https://user-images.githubusercontent.com/19975642/47961461-babfc100-e04e-11e8-8f52-b5dd88e5a5b9.PNG)

# Workflow
![workflow](https://user-images.githubusercontent.com/19975642/47961462-bbf0ee00-e04e-11e8-9185-de5759f2463a.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
- [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
- [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
- [ ] Wireframes - development
- [ ] Multiple Map - development
- [ ] Undo / Redo - development