fixing bug with event

improving example to not set state on each change

Author: Thomas Bolis

examples/main.jsx

@@ -70,6 +70,8 @@ function eventFire(el, etype) {
     }
 }
 
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
 class SketchFieldDemo extends React.Component {
     constructor(params) {
         super(params);
@@ -83,20 +85,22 @@ class SketchFieldDemo extends React.Component {
         this._renderTile = this._renderTile.bind(this);
         this._selectTool = this._selectTool.bind(this);
 
-        this.state = {
-            lineColor: 'black',
-            lineWidth: 10,
-            fillColor: '#68CCCA',
-            shadowWidth: 0,
-            shadowOffset: 0,
-            tool: Tools.Pencil,
-            fillWithColor: false,
-            drawings: [],
-            canUndo: false,
-            canRedo: false
-        };
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+
     }
 
+    state = {
+        lineColor: 'black',
+        lineWidth: 10,
+        fillColor: '#68CCCA',
+        shadowWidth: 0,
+        shadowOffset: 0,
+        tool: Tools.Pencil,
+        fillWithColor: false,
+        drawings: [],
+        canUndo: false,
+        canRedo: false
+    };
 
     componentDidMount() {
 
@@ -257,9 +261,13 @@ class SketchFieldDemo extends React.Component {
                                     height={660}
                                     defaultData={dataJson}
                                     defaultDataType="json"
-                                    onChange={(e) => {
-                                    this.setState({canUndo: this._sketch.canUndo()})
-                                }}
+                                    onChange={() => {
+                                        let prev = this.state.canUndo;
+                                        let now = this._sketch.canUndo();
+                                        if(prev !== now){
+                                            this.setState({canUndo: now});
+                                        }
+                                    }}
                                     tool={this.state.tool}
                                 />
                             </div>

package.json

@@ -94,7 +94,7 @@
   },
   "dependencies": {
     "react": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "react-addons-pure-render-mixin": "^15.1.0"
+    "react-addons-pure-render-mixin": "^15.1.0",
+    "react-dom": "^15.1.0"
   }
 }

src/SketchField.jsx

@@ -215,20 +215,20 @@ class SketchField extends Component {
 
     _onMouseUp(e) {
         this._selectedTool.doMouseUp(e);
-        let onChange = this.props.onChange;
-        if (onChange) {
-            setTimeout(()=> {
-                onChange(event.e);
+        if (this.props.onChange) {
+            let onChange = this.props.onChange;
+            setTimeout(() => {
+                onChange(e.e);
             }, 10);
         }
     }
 
     _onMouseOut(e) {
         this._selectedTool.doMouseOut(e);
-        let onChange = this.props.onChange;
-        if (onChange) {
-            setTimeout(()=> {
-                onChange(event.e);
+        if (this.props.onChange) {
+            let onChange = this.props.onChange;
+            setTimeout(() => {
+                onChange(e.e);
             }, 10);
         }
     }
@@ -300,7 +300,7 @@ class SketchField extends Component {
             this._fc.renderAll();
         }
         if (this.props.onChange) {
-            this.props.onChange(event.e);
+            this.props.onChange();
         }
     }
 
@@ -325,7 +325,7 @@ class SketchField extends Component {
             obj.setCoords();
             canvas.renderAll();
             if (this.props.onChange) {
-                this.props.onChange(event.e);
+                this.props.onChange();
             }
         }
     }
@@ -396,7 +396,7 @@ class SketchField extends Component {
             canvas.loadFromJSON(json, () => {
                 canvas.renderAll();
                 if (this.props.onChange) {
-                    this.props.onChange(null);
+                    this.props.onChange();
                 }
             });
         }, 100);
@@ -418,7 +418,7 @@ class SketchField extends Component {
             canvas.renderAll();
         };
         if (this.props.onChange) {
-            this.props.onChange(null);
+            this.props.onChange();
         }
     }