react-design-editor 0.0.35 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +37 -33
  2. package/dist/react-design-editor.js +19647 -14063
  3. package/dist/react-design-editor.min.js +1 -1
  4. package/dist/react-design-editor.min.js.LICENSE.txt +0 -9
  5. package/lib/Canvas.d.ts +4 -4
  6. package/lib/Canvas.js +7 -7
  7. package/lib/handlers/Handler.js +2 -0
  8. package/lib/index.d.ts +2 -1
  9. package/lib/index.js +2 -1
  10. package/lib/objects/Svg.js +12 -6
  11. package/package.json +32 -30
package/README.md CHANGED
@@ -1,10 +1,11 @@
1
1
  # React Design Editor
2
- [![](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)
2
+
3
+ [![](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)
3
4
 
4
5
  React Design Editor is a module for React, written in Javascript/Typescript which provides two primary features:
5
6
 
6
- - 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.
7
- - 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).
7
+ - 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.
8
+ - 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).
8
9
 
9
10
  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.
10
11
 
@@ -13,23 +14,24 @@ Try it out today - the project is being continually developed to support a varie
13
14
  [View Demo](https://salgum1114.github.io/react-design-editor/)
14
15
 
15
16
  # Feature List
16
- - [x] Add, remove, resize, reorder, clone, copy/paste and drag/drop elements
17
- - [x] Drawing capability, with polygon, line, arrows and link support
18
- - [x] Preview mode, tooltips, group/ungroup and zoom functionality
19
- - [x] Upload (with drag/drop), import and export to JSON or image
20
- - [x] Image cropping, Image filters, alignment, alignment guides
21
- - [x] Snap to grid, context menu, animation and video element
22
- - [x] Various icons in icon picker and fonts from Google Fonts (20)
23
- - [x] HTML/CSS/JS Element, iFrame element
24
- - [x] Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
25
- - [x] Code Editor with HTML / CSS / JS / Preview
26
- - [x] Various interaction modes, including grasp, selection, ctrl + drag grab
27
- - [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes
28
- - [x] SVG, Chart and GIF elements
29
- - [x] Undo/Redo support
30
- - [ ] Wireframes - in development
31
- - [ ] Multiple Map - in development
32
- - [ ] Ruler - in development
17
+
18
+ - [x] Add, remove, resize, reorder, clone, copy/paste and drag/drop elements
19
+ - [x] Drawing capability, with polygon, line, arrows and link support
20
+ - [x] Preview mode, tooltips, group/ungroup and zoom functionality
21
+ - [x] Upload (with drag/drop), import and export to JSON or image
22
+ - [x] Image cropping, Image filters, alignment, alignment guides
23
+ - [x] Snap to grid, context menu, animation and video element
24
+ - [x] Various icons in icon picker and fonts from Google Fonts (20)
25
+ - [x] HTML/CSS/JS Element, iFrame element
26
+ - [x] Animation support, with Fade / Bounce / Shake / Scaling / Rotation / Flash effects
27
+ - [x] Code Editor with HTML / CSS / JS / Preview
28
+ - [x] Various interaction modes, including grasp, selection, ctrl + drag grab
29
+ - [x] Multiple layouts, with fixed, responsive, fullscreen and grid modes
30
+ - [x] SVG, Chart and GIF elements
31
+ - [x] Undo/Redo support
32
+ - [ ] Wireframes - in development
33
+ - [ ] Multiple Map - in development
34
+ - [ ] Ruler - in development
33
35
 
34
36
  # Installation
35
37
 
@@ -43,7 +45,9 @@ Run `npm install react-design-editor` or `yarn add react-design-editor`
43
45
  4. Open your web browser to `http://localhost:4000`
44
46
 
45
47
  # Screenshots
48
+
46
49
  ## Image Map Editor
50
+
47
51
  ### 1. Fixed Layout Mode
48
52
 
49
53
  ![fixed](https://user-images.githubusercontent.com/19975642/55678049-6aff6180-592e-11e9-8b29-8e1d60df178a.PNG)
@@ -64,7 +68,7 @@ Run `npm install react-design-editor` or `yarn add react-design-editor`
64
68
 
65
69
  ![workflow](https://user-images.githubusercontent.com/19975642/55678053-718dd900-592e-11e9-9996-cce9b46d8433.PNG)
66
70
 
67
- ## ❤️ 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)
71
+ ## ❤️ 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)
68
72
 
69
73
  [![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)
70
74
 
@@ -74,15 +78,15 @@ Run `npm install react-design-editor` or `yarn add react-design-editor`
74
78
 
75
79
  # Dependencies
76
80
 
77
- |Dependency|License(s)|
78
- |--|--|
79
- | [React](https://github.com/facebook/react) | MIT |
80
- | [Ant Design](https://github.com/ant-design/ant-design/) | MIT |
81
- | [Fabric.js](https://github.com/fabricjs/fabric.js) | MIT |
82
- | [MediaElement.js](https://github.com/mediaelement/mediaelement) | MIT |
83
- | [React-Ace](https://github.com/securingsincity/react-ace) | MIT |
84
- | [interact.js](https://github.com/taye/interact.js) | MIT |
85
- | [anime.js](https://github.com/juliangarnier/anime/) | MIT |
86
- | [Webpack 4](https://github.com/webpack/webpack) | MIT |
87
- | [Babel](https://github.com/babel/babel) | MIT |
88
- | [fontawesome5](https://github.com/FortAwesome/Font-Awesome) | Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT) |
81
+ | Dependency | License(s) |
82
+ | --------------------------------------------------------------- | -------------------------------------------------- |
83
+ | [React](https://github.com/facebook/react) | MIT |
84
+ | [Ant Design](https://github.com/ant-design/ant-design/) | MIT |
85
+ | [Fabric.js](https://github.com/fabricjs/fabric.js) | MIT |
86
+ | [MediaElement.js](https://github.com/mediaelement/mediaelement) | MIT |
87
+ | [React-Ace](https://github.com/securingsincity/react-ace) | MIT |
88
+ | [interact.js](https://github.com/taye/interact.js) | MIT |
89
+ | [anime.js](https://github.com/juliangarnier/anime/) | MIT |
90
+ | [Webpack 4](https://github.com/webpack/webpack) | MIT |
91
+ | [Babel](https://github.com/babel/babel) | MIT |
92
+ | [fontawesome5](https://github.com/FortAwesome/Font-Awesome) | Icons (CC BY 4.0), Fonts (SIL OFL 1.1), Code (MIT) |