Added react-dropzone

package.json

@@ -43,7 +43,8 @@
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "webfontloader": "^1.6.24",
-    "react-autocomplete": "1.0.0-rc1"
+    "react-autocomplete": "1.0.0-rc1",
+    "react-dropzone": "^3.3.1"
   },
   "peerDependencies": {
   },

src/Designer.js

@@ -369,6 +369,7 @@ class Designer extends Component {
 
   getObjectComponent(type) {
     let {objectTypes} = this.props;
+    console.log("OBJECT COMPONENT => ",objectTypes[type], "TYPE => ", type)
     return objectTypes[type];
   }
 
@@ -530,6 +531,7 @@ class Designer extends Component {
         ...objectComponent.meta.initial,
         ...currentObject
       };
+      console.log("OBJECT COMPONENT =>", objectComponent)
       ObjectEditor = objectComponent.meta.editor;
     }
 

src/index.js

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

src/objects/Image.js

@@ -10,19 +10,16 @@ export default class Image extends Vector {
     icon: <Icon icon={'image'} size={30} />,
     initial: {
       width: 100,
-      height: 100
+      height: 100,
+      href: "https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100"
     }
   };
 
-  // imageSrc(){
-  //   return {__html: "xlink:href='https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100'"}
-  // }
-
   render() {
     let {object, index} = this.props;
     return (
       <image style={this.getStyle()}
-         xlinkHref={'https://placeholdit.imgix.net/~text?txtsize=10&txt=100x100&w=100&h=100'}
+         xlinkHref={object.href}
          {...this.getObjectAttributes()}
          width={object.width}
          height={object.height} />

src/objects/Vector.js

@@ -4,14 +4,15 @@ import Icon from '../Icon';
 import _ from 'lodash';
 
 import {SizePanel, TextPanel,
-        StylePanel, ArrangePanel} from '../panels';
+        StylePanel, ArrangePanel, ImagePanel} from '../panels';
 
 
 export default class Vector extends Component {
   static panels = [
     SizePanel,
     TextPanel,
     StylePanel,
+    ImagePanel,
     ArrangePanel
   ];
 

src/panels/ImagePanel.js

@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import Radium from 'radium';
+import _ from 'lodash';
+
+import Icon from '../Icon';
+import Panel from './Panel';
+
+import styles from './styles';
+import PropertyGroup from './PropertyGroup';
+import Button from './Button';
+import SwitchState from './SwitchState';
+import Columns from './Columns';
+import Column from './Column';
+import Dropzone from 'react-dropzone';
+
+export default class ImagePanel extends Panel {
+  state = {
+    files: []
+  }
+
+  onDrop (files) {
+    this.props.onChange("href", "/img/"+files[0].name);
+    console.log('Received files: ', files);
+    this.setState({
+      files: files
+    });
+  }
+
+  render() {
+    let {object} = this.props;
+    return (
+      <PropertyGroup object={object}  showIf={_.has(object, 'href')}>
+          <div style={styles.columns}>
+            <Column>
+              <div className="dropzone--wrapper">
+                <Dropzone onDrop={this.onDrop.bind(this)} multiple={false}>
+                  <div>Try dropping some files here, or click to select files to upload.</div>
+                </Dropzone>
+              </div>
+            </Column>
+          </div>
+      </PropertyGroup>
+    );
+  }
+}

src/panels/PanelList.js

@@ -20,6 +20,7 @@ class PanelList extends Component {
       left: offset.width + offset.x,
       top: offset.y + window.scrollY,
     };
+    console.log("OBJECT => ", object, "OBJECT COMPONENT => ", objectComponent)
     return (
       <Portal className="propertyPanel" closeOnEsc closeOnOutsideClick isOpened={true}>
         <div style={[styles.propertyPanel, style]}>

src/panels/index.js

@@ -2,4 +2,5 @@ export TextPanel from './TextPanel';
 export ArrangePanel from './ArrangePanel';
 export StylePanel from './StylePanel';
 export SizePanel from './SizePanel';
-export InsertMenu from './InsertMenu';
+export InsertMenu from './InsertMenu';
+export ImagePanel from './ImagePanel';