Merge branch 'inf3cti0n95-master' into develop

Author: tbolis

examples/main.jsx

@@ -9,9 +9,7 @@ import 'flexboxgrid';
 import './main.css';
 import AppBar from '@material-ui/core/AppBar';
 import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
-import GridList from '@material-ui/core/GridList';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import CardHeader from '@material-ui/core/CardHeader';
 import GridListTile from '@material-ui/core/GridListTile';
@@ -23,18 +21,18 @@ import TextField from '@material-ui/core/TextField';
 import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Collapse from '@material-ui/core/Collapse';
-import {MuiThemeProvider, createMuiTheme} from '@material-ui/core/styles';
+import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';
 import color from '@material-ui/core/colors/blueGrey';
 
 import UndoIcon from '@material-ui/icons/Undo';
 import RedoIcon from '@material-ui/icons/Redo';
 import DeleteIcon from '@material-ui/icons/Delete';
 import SaveIcon from '@material-ui/icons/Save';
 import ClearIcon from '@material-ui/icons/Clear';
+import AddIcon from '@material-ui/icons/Add';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
-import RemoveIcon from '@material-ui/icons/Remove';
 import dataJson from './data.json';
 import dataJsonControlled from './data.json.controlled';
 import {SketchField, Tools} from '../src';
@@ -145,6 +143,7 @@ class SketchFieldDemo extends React.Component {
       expandBack: false,
       expandImages: false,
       expandControlled: false,
+      text: 'a text, cool!',
     };
   }
 
@@ -263,6 +262,8 @@ class SketchFieldDemo extends React.Component {
     }
   };
 
+  _addText = () => this._sketch.addText(this.state.text);
+
   componentDidMount = () => {
     (function(console) {
       console.save = function(data, filename) {
@@ -427,6 +428,23 @@ class SketchFieldDemo extends React.Component {
                       <ZoomOutIcon/>
                     </IconButton>
                     <br/>
+                    <div className="row">
+                      <div className="col-lg-7">
+                        <TextField
+                          label='Text'
+                          helperText='Add text to Sketch'
+                          onChange={(e) => this.setState({ text: e.target.value })}
+                          value={this.state.text}/>
+                      </div>
+                      <div className="col-lg-3">
+                        <IconButton
+                          color="primary"
+                          onClick={this._addText}>
+                          <AddIcon/>
+                        </IconButton>
+                      </div>
+                    </div>
+
                     <br/>
                     <FormControlLabel
                       control={

src/SketchField.jsx

@@ -516,6 +516,22 @@ class SketchField extends PureComponent {
     img.src = dataUrl
   };
 
+  addText = (text, options = {}) => {
+    let canvas = this._fc;
+    let iText = new fabric.IText(text, options);
+    let opts = {
+      left: (canvas.getWidth() - iText.width) * 0.5,
+      top: (canvas.getHeight() - iText.height) * 0.5,
+    };
+    Object.assign(options, opts);
+    iText.set({
+      'left': options.left,
+      'top': options.top
+    });
+
+    canvas.add(iText);
+  };
+
   componentDidMount = () => {
     let {
       tool,
@@ -557,6 +573,22 @@ class SketchField extends PureComponent {
     canvas.on('object:moving', this._onObjectMoving);
     canvas.on('object:scaling', this._onObjectScaling);
     canvas.on('object:rotating', this._onObjectRotating);
+        // Events binding
+        canvas.on('object:added', this._onObjectAdded);
+        canvas.on('object:modified', this._onObjectModified);
+        canvas.on('object:removed', this._onObjectRemoved);
+        canvas.on('mouse:down', this._onMouseDown);
+        canvas.on('mouse:move', this._onMouseMove);
+        canvas.on('mouse:up', this._onMouseUp);
+        canvas.on('mouse:out', this._onMouseOut);
+        canvas.on('object:moving', this._onObjectMoving);
+        canvas.on('object:scaling', this._onObjectScaling);
+        canvas.on('object:rotating', this._onObjectRotating);
+        // IText Events fired on Adding Text
+        // canvas.on("text:event:changed", console.log)
+        // canvas.on("text:selection:changed", console.log)
+        // canvas.on("text:editing:entered", console.log)
+        // canvas.on("text:editing:exited", console.log)
 
     this.disableTouchScroll();