Release 1.0.6

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

RELEASE_NOTES

@@ -0,0 +1,6 @@
+## Release Notes
+
+### 1.0.6
+
+	- `Designer` component exported as default now.
+	- Added `insertMenu` prop to `Designer` component.

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,

lib/Designer.js

@@ -640,10 +640,12 @@ var Designer = (function (_Component) {
       var _props6 = this.props;
       var objects = _props6.objects;
       var objectTypes = _props6.objectTypes;
-      var currentObject = objects[selectedObjectIndex];
-      var isEditMode = mode === _constants.modes.EDIT_OBJECT;
-      var showPropertyPanel = selectedObjectIndex !== null;
-      var showInsertMenu = true;
+      var InsertMenuComponent = _props6.insertMenu;
+
+      var currentObject = objects[selectedObjectIndex],
+          isEditMode = mode === _constants.modes.EDIT_OBJECT,
+          showPropertyPanel = selectedObjectIndex !== null;
+
       var _getCanvas3 = this.getCanvas();
 
       var width = _getCanvas3.width;
@@ -694,7 +696,7 @@ var Designer = (function (_Component) {
             onDrag: this.startDrag.bind(this, _constants.modes.DRAG),
             onResize: this.startDrag.bind(this, _constants.modes.SCALE),
             onRotate: this.startDrag.bind(this, _constants.modes.ROTATE) }),
-          showInsertMenu && _react2.default.createElement(_InsertMenu2.default, { tools: objectTypes,
+          InsertMenuComponent && _react2.default.createElement(InsertMenuComponent, { tools: objectTypes,
             currentTool: selectedTool,
             onSelect: this.selectTool.bind(this) }),
           this.renderSVG(),
@@ -720,7 +722,8 @@ Designer.defaultProps = {
     'polygon': _objects.Path
   },
   snapToGrid: 1,
-  svgStyle: {}
+  svgStyle: {},
+  insertMenu: _InsertMenu2.default
 };
 var styles = exports.styles = {
   container: {

lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArrangePanel = exports.StylePanel = exports.SizePanel = exports.TextPanel = exports.Text = exports.Circle = exports.Rect = exports.Path = exports.Vector = exports.Preview = exports.Designer = undefined;
+exports.default = exports.ArrangePanel = exports.StylePanel = exports.SizePanel = exports.TextPanel = exports.Text = exports.Circle = exports.Rect = exports.Path = exports.Vector = exports.Preview = undefined;
 
 var _objects = require('./objects');
 
@@ -65,15 +65,15 @@ Object.defineProperty(exports, 'ArrangePanel', {
   }
 });
 
-var _Designer2 = require('./Designer');
-
-var _Designer3 = _interopRequireDefault(_Designer2);
-
 var _Preview2 = require('./Preview');
 
 var _Preview3 = _interopRequireDefault(_Preview2);
 
+var _Designer = require('./Designer');
+
+var _Designer2 = _interopRequireDefault(_Designer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.Designer = _Designer3.default;
-exports.Preview = _Preview3.default;
+exports.Preview = _Preview3.default;
+exports.default = _Designer2.default;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-designer",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "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';