Merge pull request #44 from tbolis/feature/remove-selection

Feature/remove selection

Author: tbolis

examples/main.jsx

@@ -28,12 +28,13 @@ import color from '@material-ui/core/colors/blueGrey';
 
 import UndoIcon from '@material-ui/icons/Undo';
 import RedoIcon from '@material-ui/icons/Redo';
-import ClearIcon from '@material-ui/icons/Delete';
+import DeleteIcon from '@material-ui/icons/Delete';
 import SaveIcon from '@material-ui/icons/Save';
-import RemoveIcon from '@material-ui/icons/Clear';
+import ClearIcon from '@material-ui/icons/Clear';
 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';
@@ -124,6 +125,7 @@ class SketchFieldDemo extends React.Component {
       shadowWidth: 0,
       shadowOffset: 0,
       tool: Tools.Pencil,
+      enableRemoveSelected: false,
       fillWithColor: false,
       fillWithBackgroundColor: false,
       drawings: [],
@@ -146,7 +148,12 @@ class SketchFieldDemo extends React.Component {
     };
   }
 
-  _selectTool = event => this.setState({ tool: event.target.value });
+  _selectTool = event => {
+    this.setState({
+      tool: event.target.value,
+      enableRemoveSelected: event.target.value === Tools.Select
+    });
+  };
 
   _save = () => {
     let drawings = this.state.drawings;
@@ -181,7 +188,7 @@ class SketchFieldDemo extends React.Component {
         style={styles.gridTile}
         actionIcon={
           <IconButton onTouchTap={c => this._removeMe(index)}>
-            <RemoveIcon color="white"/>
+            <ClearIcon color="white"/>
           </IconButton>
         }>
         <img src={drawing}/>
@@ -223,6 +230,10 @@ class SketchFieldDemo extends React.Component {
     });
   };
 
+  _removeSelected = () => {
+    this._sketch.removeSelected()
+  };
+
   _onSketchChange = () => {
     let prev = this.state.canUndo;
     let now = this._sketch.canUndo();
@@ -278,6 +289,9 @@ class SketchFieldDemo extends React.Component {
   render = () => {
     let { controlledValue } = this.state;
     const theme = createMuiTheme({
+      typography: {
+        useNextVariants: true,
+      },
       palette: {
         primary: { main: color[500] }, // Purple and green play nicely together.
         secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
@@ -315,7 +329,7 @@ class SketchFieldDemo extends React.Component {
                 <IconButton
                   color="primary"
                   onClick={this._clear}>
-                  <ClearIcon/>
+                  <DeleteIcon/>
                 </IconButton>
               </Toolbar>
             </AppBar>
@@ -365,19 +379,31 @@ class SketchFieldDemo extends React.Component {
                 }/>
               <Collapse in={this.state.expandTools}>
                 <CardContent>
-                  <TextField
-                    select={true}
-                    label="Canvas Tool"
-                    value={this.state.tool}
-                    onChange={this._selectTool}
-                    helperText="Please select Canvas Tool">
-                    <MenuItem value={Tools.Select} key="Select">Select</MenuItem>
-                    <MenuItem value={Tools.Pencil} key="Pencil">Pencil</MenuItem>
-                    <MenuItem value={Tools.Line} key="Line">Line</MenuItem>
-                    <MenuItem value={Tools.Rectangle} key="Rectangle">Rectangle</MenuItem>
-                    <MenuItem value={Tools.Circle} key="Circle">Circle</MenuItem>
-                    <MenuItem value={Tools.Pan} key="Pan">Pan</MenuItem>
-                  </TextField>
+                  <div className="row">
+                    <div className="col">
+                      <TextField
+                        select={true}
+                        label="Canvas Tool"
+                        value={this.state.tool}
+                        onChange={this._selectTool}
+                        helperText="Please select Canvas Tool">
+                        <MenuItem value={Tools.Select} key="Select">Select</MenuItem>
+                        <MenuItem value={Tools.Pencil} key="Pencil">Pencil</MenuItem>
+                        <MenuItem value={Tools.Line} key="Line">Line</MenuItem>
+                        <MenuItem value={Tools.Rectangle} key="Rectangle">Rectangle</MenuItem>
+                        <MenuItem value={Tools.Circle} key="Circle">Circle</MenuItem>
+                        <MenuItem value={Tools.Pan} key="Pan">Pan</MenuItem>
+                      </TextField>
+                    </div>
+                    <div className="col">
+                      <IconButton
+                        color="primary"
+                        disabled={!this.state.enableRemoveSelected}
+                        onClick={this._removeSelected}>
+                        <DeleteIcon/>
+                      </IconButton>
+                    </div>
+                  </div>
                   <br/>
                   <br/>
                   <Typography id="slider">Line Weight</Typography>
@@ -544,8 +570,8 @@ class SketchFieldDemo extends React.Component {
                 <CardContent>
                   <div>
                     <TextField
-                      floatingLabelText='Image URL'
-                      hintText='Copy/Paste an image URL'
+                      label='Image URL'
+                      helperText='Copy/Paste an image URL'
                       onChange={(e) => this.setState({ imageUrl: e.target.value })}
                       value={this.state.imageUrl}/>
                     <Button

src/SketchField.jsx

@@ -45,12 +45,17 @@ class SketchField extends PureComponent {
     widthCorrection: PropTypes.number,
     // Specify some height correction which will be applied on auto resize
     heightCorrection: PropTypes.number,
-
+    // Specify action on change
     onChange: PropTypes.func,
+    // Default initial value
     defaultValue: PropTypes.object,
+    // Sketch width
     width: PropTypes.number,
+    // Sketch height
     height: PropTypes.number,
-    className: PropTypes.object,
+    // Class name to pass to container div of canvas
+    className: PropTypes.string,
+    // Style options to pass to container div of canvas
     style: PropTypes.object,
   };
 
@@ -139,10 +144,10 @@ class SketchField extends PureComponent {
       return
     }
     let obj = e.target;
-    obj.version = 1;
+    obj.__version = 1;
     // record current object state as json and save as originalState
     let objState = obj.toJSON();
-    obj.originalState = objState;
+    obj.__originalState = objState;
     let state = JSON.stringify(objState);
     // object, previous state, current state
     this._history.keep([obj, state, state])
@@ -169,12 +174,27 @@ class SketchField extends PureComponent {
 
   };
 
+  _onObjectModified = (e) => {
+    let obj = e.target;
+    obj.__version += 1;
+    let prevState = JSON.stringify(obj.__originalState);
+    let objState = obj.toJSON();
+    // record current object state as json and update to originalState
+    obj.__originalState = objState;
+    let currState = JSON.stringify(objState);
+    this._history.keep([obj, prevState, currState]);
+  };
+
   /**
    * Action when an object is removed from the canvas
    */
   _onObjectRemoved = (e) => {
     let obj = e.target;
-    obj.version = 0;
+    if (obj.__removed) {
+      obj.__version += 1;
+      return
+    }
+    obj.__version = 0;
   };
 
   /**
@@ -204,6 +224,27 @@ class SketchField extends PureComponent {
     }
   };
 
+  _onMouseUp = (e) => {
+    this._selectedTool.doMouseUp(e);
+    // Update the final state to new-generated object
+    // Ignore Path object since it would be created after mouseUp
+    // Assumed the last object in canvas.getObjects() in the newest object
+    if (this.props.tool !== Tool.Pencil) {
+      const canvas = this._fc;
+      const objects = canvas.getObjects();
+      const newObj = objects[objects.length - 1];
+      if (newObj && newObj.__version === 1) {
+        newObj.__originalState = newObj.toJSON();
+      }
+    }
+    if (this.props.onChange) {
+      let onChange = this.props.onChange;
+      setTimeout(() => {
+        onChange(e.e)
+      }, 10)
+    }
+  };
+
   /**
    * Track the resize of the window and update our state
    *
@@ -290,12 +331,18 @@ class SketchField extends PureComponent {
     let history = this._history;
     let [obj, prevState, currState] = history.getCurrent();
     history.undo();
-    if (obj.version === 1) {
+    if (obj.__removed) {
+      this.setState({ action: false }, () => {
+        this._fc.add(obj);
+        obj.__version -= 1;
+        obj.__removed = false;
+      });
+    } else if (obj.__version <= 1) {
       this._fc.remove(obj);
     } else {
+      obj.__version -= 1;
       obj.setOptions(JSON.parse(prevState));
       obj.setCoords();
-      obj.version -= 1;
       this._fc.renderAll()
     }
     if (this.props.onChange) {
@@ -306,20 +353,19 @@ class SketchField extends PureComponent {
   /**
    * Perform a redo operation on canvas, if it cannot redo it will leave the canvas intact
    */
-
   redo = () => {
     let history = this._history;
     if (history.canRedo()) {
       let canvas = this._fc;
       //noinspection Eslint
       let [obj, prevState, currState] = history.redo();
-      if (obj.version === 0) {
+      if (obj.__version === 0) {
         this.setState({ action: false }, () => {
           canvas.add(obj);
-          obj.version = 1
+          obj.__version = 1
         })
       } else {
-        obj.version += 1;
+        obj.__version += 1;
         obj.setOptions(JSON.parse(currState))
       }
       obj.setCoords();
@@ -410,6 +456,33 @@ class SketchField extends PureComponent {
     this._history.clear();
     return discarded
   };
+
+  /**
+   * Remove selected object from the canvas
+   */
+  removeSelected = () => {
+    let canvas = this._fc;
+    let activeObj = canvas.getActiveObject();
+    if (activeObj) {
+      let selected = [];
+      if (activeObj.type === 'activeSelection') {
+        activeObj.forEachObject((obj) => [].push(obj));
+      } else {
+        selected.push(activeObj)
+      }
+      selected.forEach(obj => {
+        obj.__removed = true;
+        let objState = obj.toJSON();
+        obj.__originalState = objState;
+        let state = JSON.stringify(objState);
+        this._history.keep([obj, state, state]);
+        canvas.remove(obj);
+      });
+      canvas.discardActiveObject();
+      canvas.requestRenderAll();
+    }
+  };
+
   /**
    * Sets the background from the dataUrl given
    *
@@ -517,38 +590,6 @@ class SketchField extends PureComponent {
     }
   };
 
-  _onObjectModified = (e) => {
-    let obj = e.target;
-    obj.version += 1;
-    let prevState = JSON.stringify(obj.originalState);
-    let objState = obj.toJSON();
-    // record current object state as json and update to originalState
-    obj.originalState = objState;
-    let currState = JSON.stringify(objState);
-    this._history.keep([obj, prevState, currState]);
-  };
-
-  _onMouseUp = (e) => {
-    this._selectedTool.doMouseUp(e);
-    // Update the final state to new-generated object
-    // Ignore Path object since it would be created after mouseUp
-    // Assumed the last object in canvas.getObjects() in the newest object
-    if (this.props.tool !== Tool.Pencil) {
-      const canvas = this._fc;
-      const objects = canvas.getObjects();
-      const newObj = objects[objects.length - 1];
-      if (newObj && newObj.version === 1) {
-        newObj.originalState = newObj.toJSON();
-      }
-    }
-    if (this.props.onChange) {
-      let onChange = this.props.onChange;
-      setTimeout(() => {
-        onChange(e.e)
-      }, 10)
-    }
-  };
-
   render = () => {
     let {
       className,