Adds Image object, style fixes on textpanel

src/Designer.js

@@ -10,7 +10,7 @@ import SVGRenderer from './SVGRenderer';
 import Handler from './Handler';
 import {modes} from './constants';
 import * as actions from './actions';
-import {Text, Path, Rect, Circle, Title, Box} from './objects';
+import {Text, Path, Rect, Circle, Image} from './objects';
 import PanelList from './panels/PanelList';
 
 class Designer extends Component {
@@ -19,7 +19,8 @@ class Designer extends Component {
       'text': Text,
       'rectangle': Rect,
       'circle': Circle,
-      'polygon': Path
+      'polygon': Path,
+      'image': Image
     },
     snapToGrid: 1,
     svgStyle: {},

src/Icon.js

@@ -7,10 +7,9 @@ export default class Icon extends Component {
 
   renderGraphic() {
     switch (this.props.icon) {
-      case "box":
+      case 'image':
         return (
-          <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
-            style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
+          <g><path d="M21 19v-14c0-1.1-.9-2-2-2h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-12.5-5.5l2.5 3.01 3.5-4.51 4.5 6h-14l3.5-4.5z"></path></g>
         );
       case 'my-icon':
         return (

src/Preview.js

@@ -2,15 +2,16 @@ import React, {Component} from 'react';
 import Radium from 'radium';
 import SVGRenderer from './SVGRenderer';
 
-import {Text, Path, Rect, Circle, Title, Box} from './objects';
+import {Text, Path, Rect, Circle, Image} from './objects';
 
 class Preview extends Component {
   static defaultProps = {
     objectTypes: {
       'text': Text,
       'rectangle': Rect,
       'circle': Circle,
-      'polygon': Path
+      'polygon': Path,
+      'image': Image
     }
   };
 

src/index.js

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

src/objects/Image.js

@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import {modes} from '../constants';
+import Icon from '../Icon';
+import _ from 'lodash';
+
+import Vector from './Vector';
+
+export default class Image extends Vector {
+  static meta = {
+    icon: <Icon icon={'image'} size={30} />,
+    initial: {
+      width: 100,
+      height: 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'}
+         {...this.getObjectAttributes()}
+         width={object.width}
+         height={object.height} />
+    );
+  }
+}

src/objects/Text.js

@@ -10,14 +10,14 @@ export default class Text extends Vector {
   static meta = {
     icon: <Icon icon={'text'} size={30} />,
     initial: {
-      text: "Hello",
+      text: "I am a text object...",
       rotate: 0,
       fontWeight: "normal",
-      fontStyle: "normal",
+      fontStyle: "italic",
       textDecoration: "none",
       fill: "black",
-      fontSize: 50,
-      fontFamily: "Helvetica"
+      fontSize: 20,
+      fontFamily: "Open Sans"
     }
   };
 

src/objects/Vector.js

@@ -36,6 +36,7 @@ export default class Vector extends Component {
   }
 
   getTransformMatrix({rotate, x, y, width, height}) {
+    console.log(rotate)
     if (rotate) {
       let centerX = width / 2 + x;
       let centerY = height / 2 + y;

src/objects/index.js

@@ -3,5 +3,6 @@ export Path from './Path';
 export Rect from './Rect';
 export Circle from './Circle';
 export Text from './Text';
-export Title from './Title';
-export Boc from './Box';
+// export Title from './Title';
+// export Box from './Box';
+export Image from './Image';

src/panels/StylePanel.js

@@ -37,13 +37,13 @@ export default class StylePanel extends Panel {
     let {object} = this.props;
     return (
       <PropertyGroup>
-          <Columns label="Fill">
+          <Columns label="Fill" showIf={_.has(object, 'fill')}>
             <Column>
               <ColorInput value={object.fill}
                           onChange={this.props.onChange.bind(this, 'fill')} />
             </Column>
           </Columns>
-          <Columns label="Stroke">
+          <Columns label="Stroke" showIf={_.has(object, 'stroke')}>
             <Column>
               <ColorInput value={object.stroke}
                           onChange={this.props.onChange.bind(this, 'stroke')} />

src/panels/TextPanel.js

@@ -21,6 +21,17 @@ export default class TextPanel extends Panel {
     this.state = { value: props.object.fontFamily }
   }
 
+  menuStyle = {
+      borderRadius: '3px',
+      boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
+      background: 'red',
+      padding: '2px 0',
+      fontSize: '90%',
+      position: 'fixed',
+      overflow: 'auto',
+      maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
+  }
+
   fontFamilies = [
     // {name: 'PT Serif', family: 'PT Serif, Arial, serif'},
     // {name: 'Arvo', family: '"Arvo", Arial, serif'},
@@ -125,7 +136,7 @@ export default class TextPanel extends Panel {
     return (
       <PropertyGroup showIf={_.has(object, 'text')}>
           <div style={styles.columns}>
-            <Column style={{marginRight: 15}}>
+            <Column style={{"float": "right", "marginRight": 15}}>
               {_.has(object, 'fontWeight') &&
                 <SwitchState icon="format-bold"
                   defaultValue={'normal'}
@@ -145,17 +156,17 @@ export default class TextPanel extends Panel {
                   value={object.textDecoration}
                   onChange={this.props.onChange.bind(this, 'textDecoration')} />}
             </Column>
-            <Column style={{"float": "left"}}>
+            <Column style={{"float": "right"}} label="font size">
               {_.has(object, 'fontSize') &&
                 <input style={[styles.input, styles.integerInput, {width: 35}]}
                        value={object.fontSize}
                        onChange={(e) => this.props.onChange('fontSize', e.target.value)} />}
             </Column>
-            <Column style={{"float": "right", marginRight: 10}}>
+            <Column style={{"float": "right", marginRight: 10, padding: '3px 5px'}} label="choose font">
               <Autocomplete
                 value={this.state.value}
-                style={[styles.textInput]}
-                labelText="Choose a font"
+                style={this.menuStyle}
+                labelText=""
                 items={this.fontFamilies}
                 getItemValue={(item) => item.name}
                 shouldItemRender={this.matchStateToTerm}