- Download Image , Backgroud , Height , Width, Background and Pan Setting

- Upload File and Process Data.
- State Changes - Process of implemented .

Author: kashifghaffarasim

examples/main.jsx

@@ -136,8 +136,8 @@ class SketchFieldDemo extends React.Component {
       canUndo: false,
       canRedo: false,
       controlledSize: false,
-      sketchWidth: 800,
-      sketchHeight: 600,
+      sketchWidth: (window.innerWidth - 400),
+      sketchHeight: (window.innerHeight - 200),
       stretched: true,
       stretchedX: false,
       stretchedY: false,
@@ -154,7 +154,9 @@ class SketchFieldDemo extends React.Component {
       enableCopyPaste: false,
       isOpen: true,
       dataJson: dataJson,
-      url: dataUrl
+      url: dataUrl,
+      maxHeight: (window.innerHeight + 800),
+      isCanvas: false
     };
   }
 
@@ -191,6 +193,7 @@ class SketchFieldDemo extends React.Component {
       var url = canvas.backgroundImage._element.src;
       this.setState({url: url})
     }
+
     this.setState({isOpen: true , objects: objects});
   };
 
@@ -360,19 +363,31 @@ class SketchFieldDemo extends React.Component {
   _addText = () => this._sketch.addText(this.state.text);
 
   _readFile = (event) => {
-      let sketch = this._sketch;
-      let file = event.target.files[0]
+
+      this._clear();
+      let file = event.target.files[0];
+
       if(file){
           let reader = new FileReader();
-          reader.onload = function (e) {
-              let data = e.target.result;
-              console.log(data);
-              sketch.fromJSON(data);
-          }
+          reader.addEventListener(
+            'load',
+            () => this._loadData(reader.result),  false,
+          );
           reader.readAsText(file);
       }
   }
 
+  _loadData = (data) =>{
+      data = JSON.parse(data);
+      this.setState({height: data.height, width: data.width})
+      let sketch = this._sketch;
+      sketch.fromJSON(data);
+      sketch._backgroundColor(data.backgroundColor);
+      if(data.backImg){
+        sketch.changeBackground(data.backImg)
+      }
+  }
+
   componentDidMount = () => {
     (function(console) {
       console.save = function(data, filename) {
@@ -449,6 +464,7 @@ class SketchFieldDemo extends React.Component {
                   onClick={this._save}>
                   <SaveIcon/>
                 </IconButton>
+
                 <Button
                       style={{background: 'none', border: 'none', color: '#607d8b', boxShadow: 'none'}}
                       variant="contained"
@@ -458,7 +474,7 @@ class SketchFieldDemo extends React.Component {
                       <input   type="file"
                         onChange={(e) => this._readFile(e)}
                         style={{ display: "none" }}  />
-                    </Button>
+                </Button>
                 <IconButton
                   color="primary"
                   title="Download"
@@ -479,7 +495,6 @@ class SketchFieldDemo extends React.Component {
         <div className="row">
 
           <div className="col-xs-7 col-sm-7 col-md-9 col-lg-9">
-
             <SketchField
               name="sketch"
               className="canvas-area"
@@ -498,10 +513,10 @@ class SketchFieldDemo extends React.Component {
                   : 'transparent'
               }
               width={
-                this.state.controlledSize ? this.state.sketchWidth : null
+                this.state.controlledSize ? this.state.sketchWidth : this.state.width
               }
               height={
-                this.state.controlledSize ? this.state.sketchHeight : null
+                this.state.controlledSize ? this.state.sketchHeight : this.state.height
               }
               defaultValue={this.state.dataJson}
               value={controlledValue}
@@ -510,6 +525,7 @@ class SketchFieldDemo extends React.Component {
               tool={this.state.tool}
             />
           </div>
+          
           <div className="col-xs-5 col-sm-5 col-md-3 col-lg-3">
             <Card style={styles.card}>
               <CardHeader

src/SketchField.jsx

@@ -304,6 +304,14 @@ class SketchField extends PureComponent {
     canvas.calcOffset();
   };
 
+  _canvansSize = () =>{
+    let canvas = this._fc;
+    console.log(canvas);
+    canvas.height = 500;
+    canvas.renderAll()
+    console.log(canvas)
+  }
+
   /**
    * Sets the background color for this sketch
    * @param color in rgba or hex format
@@ -460,7 +468,6 @@ class SketchField extends PureComponent {
 
   copy = () => {
     let canvas = this._fc;
-
   };
 
   paste = () => {
@@ -628,33 +635,17 @@ class SketchField extends PureComponent {
    * Download Content
    */
    download = () => {
-     this._history.saveToFile();
-   }
-
-   /**
-   * Save Current Index
-   */
-
-   save = () => {
-     let canvas = this._fc;
-     let objects = canvas.getObjects();
-     let stObjects = JSON.stringify(objects)
-     this.setState({save: stObjects})
+     var url = null;
+     if(this._fc.backgroundImage){
+       url = this._fc.backgroundImage._element.src;
+     }
+     let hash = {  height: this._fc.height, width: this._fc.width,
+        backgroundColor: this._fc.backgroundColor, viewportTransform:  this._fc.viewportTransform,
+        backImg: url,
+     }
+     this._history.saveToFile(hash);
    }
 
-   /**
-   * Open Current Saved
-   */
-
-   open = () => {
-      let canvas = this._fc;
-
-      let objects = this.state.save;
-
-
-
-      this.setState({isView: true})
-   }
 
   render = () => {
     let { className,  style, width, height } = this.props;

src/history.js

@@ -82,20 +82,16 @@ class History {
    * @returns the new current value after the redo operation, or null if no redo operation was possible
    */
   redo() {
-    console.log('heres')
+
     try {
-      console.log('checking is here')
-      console.log(this.redoList)
       if (this.redoList.length > 0) {
-
         if (this.current) this.undoList.push(this.current);
         this.current = this.redoList.pop();
         return this.current;
       }
-
       return null;
     } finally {
-      //this.print();
+      this.print();
     }
   }
 
@@ -132,7 +128,7 @@ class History {
      *
      *
      */
-  saveToFile() {
+  saveToFile(hash) {
       let dataArray = [];
 
       if(this.current){
@@ -142,11 +138,13 @@ class History {
         } else {
           for(let i = 0; i < this.undoList.length; i++){
             dataArray.push(this.undoList[i][0])
+            dataArray.push(this.current[0])
           }
         }
       }
 
-      var hash = {"objects": dataArray}
+      var hash1 = {"objects": dataArray}
+      hash["objects"] = dataArray;
       const a = document.createElement("a");
       a.href = URL.createObjectURL(new Blob([JSON.stringify(hash, null, 4)], {
         type: "text/plain"