Merge pull request #190 from ivall-autoconsult/master

Updated the README.md file

Author: salgum1114

README.md

@@ -1,97 +1,88 @@
 # React Design Editor
-[![](https://img.shields.io/npm/l/react-design-editor?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
-[![build](https://github.com/salgum1114/react-design-editor/workflows/build/badge.svg)](https://github.com/salgum1114/react-design-editor/actions)
-[![](https://flat.badgen.net/npm/v/react-design-editor?icon=npm)](https://www.npmjs.com/package/react-design-editor)
-[![](https://img.shields.io/david/salgum1114/react-design-editor?style=flat-square)](https://david-dm.org/salgum1114/react-design-editor)
-[![](https://img.shields.io/david/dev/salgum1114/react-design-editor?style=flat-square)](https://david-dm.org/salgum1114/react-design-editor?type=dev)
+[![](https://img.shields.io/npm/l/react-design-editor?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License) [![build](https://github.com/salgum1114/react-design-editor/workflows/build/badge.svg)](https://github.com/salgum1114/react-design-editor/actions) [![](https://flat.badgen.net/npm/v/react-design-editor?icon=npm)](https://www.npmjs.com/package/react-design-editor) [![](https://img.shields.io/david/salgum1114/react-design-editor?style=flat-square)](https://david-dm.org/salgum1114/react-design-editor) [![](https://img.shields.io/david/dev/salgum1114/react-design-editor?style=flat-square)](https://david-dm.org/salgum1114/react-design-editor?type=dev)
+
+React Design Editor is a module for React, written in Javascript/Typescript which provides two primary features:
+
+- Image Editor - Create images in React, draw diagrams and arrange compositions using the image editor and save the result to one of several export formats, provides functionality similar to Powerpoint.
+- Business Process Modelling (BPM) - Design flowcharts and process workflows in React and export the model to JSON, which can be imported into the tool (load/save).
+
+The module primarily uses the [Ant Design](https://github.com/ant-design/ant-design/), [Fabric.js](https://github.com/fabricjs/fabric.js) and [React](https://github.com/facebook/react) libraries, but a full list of required dependencies can be found below.
+
+Try it out today - the project is being continually developed to support a variety of different functions.
+
+[View Demo](https://salgum1114.github.io/react-design-editor/)
+
+# Feature List
+- [x] Add, remove, resize, reorder, clone, copy/paste and drag/drop elements
+- [x] Drawing capability, with polygon, line, arrows and link support
+- [x] Preview mode, tooltips, group/ungroup and zoom functionality
+- [x] Upload (with drag/drop), import and export to JSON or image
+- [x] Image cropping, Image filters, alignment, alignment guides
+- [x] Snap to grid, context menu, animation and video element
+- [x] Various icons in icon picker and fonts from Google Fonts (20)
+- [x] HTML/CSS/JS Element, iFrame element
+- [x] Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
+- [x] Code Editor with HTML / CSS / JS / Preview
+- [x] Various interaction modes, including grasp, selection, ctrl + drag grab
+- [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes
+- [x] SVG, Chart and GIF elements
+- [x] Undo/Redo support
+- [ ] Wireframes - in development
+- [ ] Multiple Map - in development
+- [ ] Ruler - in development
 
-- 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.
+# Installation
 
-# Demos
-[React Design Editor](https://salgum1114.github.io/react-design-editor/)
+Run `npm install react-design-editor` or `yarn add react-design-editor`
 
-# Dependencies
-- React.js
-- ant.design
-- fabric.js
-- mediaelement.js
-- react-ace
-- interact.js
-- anime.js
-- fontawesome5
-- webpack4
-- babel
+# Getting Started
 
-# Installation
-- npm install --save react-design-editor
+1. Clone this Project with `git clone https://github.com/salgum1114/react-design-editor.git`
+2. Install dependencies with `npm install` or `yarn`
+3. Run the App with `npm start` or `yarn start`
+4. Open your web browser to `http://localhost:8080`
 
-# Getting Started
-- git clone https://github.com/salgum1114/react-design-editor.git - Clone the project
-- npm start - Run script
-- http://localhost:8080 - Host access
+# Screenshots
+## Image Map Editor
+### 1. Fixed Layout Mode
 
-# Image Map
-## Three layout mode
-### 1. Fixed
 ![fixed](https://user-images.githubusercontent.com/19975642/55678049-6aff6180-592e-11e9-8b29-8e1d60df178a.PNG)
 
-### 2. Responsive
+### 2. Responsive Layout Mode
+
 ![responsive](https://user-images.githubusercontent.com/19975642/55678050-6cc92500-592e-11e9-8a57-c82d371e4be1.PNG)
 
-### 3. Fullscreen
+### 3. Full Screen Layout Mode
+
 ![fullscreen](https://user-images.githubusercontent.com/19975642/55678051-6dfa5200-592e-11e9-9b9e-b8d8ee3ccb08.PNG)
 
-### Preview mode
+### 4. 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)
+## Workflow Editor
 
-# 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 Element
-- [x] HTML/CSS/JS Element
-- [x] iFrame Element
-- [x] Code Editor - HTML / CSS / JS / Preview
-- [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] Image Filter
-- [x] Undo / Redo
-- [x] SVG Element - development (copy)
-- [x] Chart Element - development (form)
-- [x] GIF Element - development (form)
-- [ ] Wireframes - development
-- [ ] Multiple Map - development
-- [ ] Ruler - development
+![workflow](https://user-images.githubusercontent.com/19975642/55678053-718dd900-592e-11e9-9996-cce9b46d8433.PNG)
 
 ## ❤️ Sponsors and Backers [![](https://opencollective.com/react-design-editor/tiers/badge.svg)](https://opencollective.com/react-design-editor/contribute) [![](https://opencollective.com/react-design-editor/tiers/sponsor/badge.svg?label=Sponsor&color=brightgreen)](https://opencollective.com/react-design-editor/contribute) [![](https://opencollective.com/react-design-editor/tiers/backer/badge.svg?label=Backer&color=brightgreen)](https://opencollective.com/react-design-editor/contribute) 
 
+[![Sponsored by Workflows for Confluence](https://remote.automation-consultants.com/knowledge/download/attachments/57671882/sponsorship.png)](https://marketplace.atlassian.com/apps/1222276/workflows-for-confluence)
+
 [![](https://opencollective.com/react-design-editor/tiers/sponsor.svg?avatarHeight=36)](https://opencollective.com/react-design-editor/contribute)
 
 [![](https://opencollective.com/react-design-editor/tiers/backer.svg?avatarHeight=36)](https://opencollective.com/react-design-editor/contribute)
+
+# Dependencies
+
+|Dependency|License(s)|
+|--|--|
+| [React](https://github.com/facebook/react) | MIT  |
+| [Ant Design](https://github.com/ant-design/ant-design/) | MIT |
+| [Fabric.js](https://github.com/fabricjs/fabric.js) | MIT |
+| [MediaElement.js](https://github.com/mediaelement/mediaelement) | MIT |
+| [React-Ace](https://github.com/securingsincity/react-ace) | MIT |
+| [interact.js](https://github.com/taye/interact.js) | MIT |
+| [anime.js](https://github.com/juliangarnier/anime/) | MIT |
+| [Webpack 4](https://github.com/webpack/webpack) | MIT |
+| [Babel](https://github.com/babel/babel) | MIT |
+| [fontawesome5](https://github.com/FortAwesome/Font-Awesome) | Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT) |