Merge upstream

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 npm-debug.log
 .DS_Store
-dist
-.idea
 lib
+.idea
+

README.md

@@ -68,6 +68,7 @@ The `Designer` component expects the following parameters:
 | objects          | []                             | Your object set.  |
 | onUpdate         | []                             | Your update callback.  |
 | objectTypes      |  Text, Circle, Rectangle, Path | Mapping of object types. |
+| insertMenu       |  <InsertMenu>                  | Insert menu component. You can set null for hiding
 | snapToGrid       |  1                             | Snaps the objects accordingly this multipier. |
 | rotator          | rotate({object, mouse})        | The rotating strategy of objects
 | scale            | scale({object, mouse})         | The scaling strategy of objects
@@ -263,7 +264,13 @@ Here is a todo list that in my mind. You could extend this list.
 - Add a key map to keep the ratio of objects when scaling
 - Implement theme support for UI
 
+## Release Notes
+
+### 1.0.6
+
+  - `Designer` component exported as default now.
+  - Added `insertMenu` prop to `Designer` component.
+
 ### Contributors (You can add your name here in your pull-request)
 
 - Fatih Erikli <fatiherikli@gmail.com>
-

examples/App.js

@@ -30,19 +30,19 @@ export default class App extends Component {
           <p>You should provide your objects and object types. The objects might be empty array if you want yo create a
           blank canvas.</p>
           <pre className={classes.code}>{`
-import Designer, {Text, Rectangle} from 'react-designer';
+import Designer, {Text, Rect} from 'react-designer';
 
 class App() {
   state = {
     objects: [
       {type: "text", x: 10, y: 20, text: "Hello!", fill: "red"},
-      {type: "rect", x: 50, y: 70, fill: "red"}
+      {type: "rect", x: 50, y: 70, width: 30, height: 40, fill: "red"}
     ]
-  }
+  };
 
   render() {
     return (
-      <Designer width={250} height={350}
+      <Designer width={500} height={500}
         objectTypes={{
           'text': Text,
           'rect': Rect
@@ -52,7 +52,7 @@ class App() {
     )
   }
 }
-          `}</pre>
+          `.trim()}</pre>
           You should listen onUpdate callback to update your objects. React-designer will invoke this
           callback in every update.
         </div>

examples/App.module.css

@@ -98,10 +98,10 @@
 .code {
 	font-family: Monaco;
 	display: block;
-	padding: 40px;
+	padding: 30px 25px;
 	background: #f6f6f6;
 	color: #434746;
-	line-height: 1.5em;
+	line-height: 1.6em;
 	font-size: 0.9em;
 }
 

examples/components/TshirtDesigner.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
-import Designer from '../../src/Designer';
+import Designer, {Text, Rect, Circle} from '../../src';
 import {styles as canvasStyles} from '../../src/SVGRenderer';
-import {Text, Rect, Circle} from '../../src/objects/index';
 
 const priceMap = {
   'text': ({text, fontSize}) => text.length * fontSize * 0.01,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-designer",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Easy to configure, lightweight, editable vector graphics in your react components.",
   "main": "./lib/index.js",
   "scripts": {

src/Designer.js

@@ -22,7 +22,8 @@ class Designer extends Component {
       'polygon': Path
     },
     snapToGrid: 1,
-    svgStyle: {}
+    svgStyle: {},
+    insertMenu: InsertMenu
   };
 
   state = {
@@ -483,11 +484,15 @@ class Designer extends Component {
     let {showHandler, handler, mode,
          selectedObjectIndex, selectedTool} = this.state;
 
-    let {objects, objectTypes} = this.props,
-        currentObject = objects[selectedObjectIndex],
+    let {
+      objects, 
+      objectTypes, 
+      insertMenu: InsertMenuComponent
+    } = this.props;
+
+    let currentObject = objects[selectedObjectIndex],
         isEditMode = mode === modes.EDIT_OBJECT,
-        showPropertyPanel = selectedObjectIndex !== null,
-        showInsertMenu = true;
+        showPropertyPanel = selectedObjectIndex !== null;
 
     let {width, height, canvasWidth, canvasHeight} = this.getCanvas();
 
@@ -500,7 +505,7 @@ class Designer extends Component {
       };
       ObjectEditor = objectComponent.meta.editor;
     }
-
+    
     return (
       <HotKeys
         keyMap={this.keyMap}
@@ -537,8 +542,8 @@ class Designer extends Component {
               onResize={this.startDrag.bind(this, modes.SCALE)}
               onRotate={this.startDrag.bind(this, modes.ROTATE)} /> )}
 
-          {showInsertMenu && (
-            <InsertMenu tools={objectTypes}
+          {InsertMenuComponent && (
+            <InsertMenuComponent tools={objectTypes}
               currentTool={selectedTool}
               onSelect={this.selectTool.bind(this)} />
           )}

src/index.js

@@ -1,4 +1,4 @@
-export Designer from './Designer';
 export Preview from './Preview';
 export {Vector, Path, Rect, Circle, Text} from './objects';
-export {TextPanel, SizePanel, StylePanel, ArrangePanel} from './panels';
+export {TextPanel, SizePanel, StylePanel, ArrangePanel} from './panels';
+export default from './Designer';