fixing bug with event

Thomas Bolis · Thomas Bolis · commit 8496f3d0751a · 2016-06-10T13:42:02.000+03:00
improving example to not set state on each change
diff --git a/examples/main.jsx b/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>
diff --git a/package.json b/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"
   }
 }
diff --git a/src/SketchField.jsx b/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();
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@`
`94`	`94`	`},`
`95`	`95`	`"dependencies": {`
`96`	`96`	`"react": "^15.1.0",`
`97`		`- "react-dom": "^15.1.0",`
`98`		`- "react-addons-pure-render-mixin": "^15.1.0"`
	`97`	`+ "react-addons-pure-render-mixin": "^15.1.0",`
	`98`	`+ "react-dom": "^15.1.0"`
`99`	`99`	`}`
`100`	`100`	`}`
Original file line number	Diff line number	Diff line change
`@@ -215,20 +215,20 @@ class SketchField extends Component {`
`215`	`215`
`216`	`216`	`_onMouseUp(e) {`
`217`	`217`	`this._selectedTool.doMouseUp(e);`
`218`		`- let onChange = this.props.onChange;`
`219`		`- if (onChange) {`
`220`		`- setTimeout(()=> {`
`221`		`- onChange(event.e);`
	`218`	`+ if (this.props.onChange) {`
	`219`	`+ let onChange = this.props.onChange;`
	`220`	`+ setTimeout(() => {`
	`221`	`+ onChange(e.e);`
`222`	`222`	`}, 10);`
`223`	`223`	`}`
`224`	`224`	`}`
`225`	`225`
`226`	`226`	`_onMouseOut(e) {`
`227`	`227`	`this._selectedTool.doMouseOut(e);`
`228`		`- let onChange = this.props.onChange;`
`229`		`- if (onChange) {`
`230`		`- setTimeout(()=> {`
`231`		`- onChange(event.e);`
	`228`	`+ if (this.props.onChange) {`
	`229`	`+ let onChange = this.props.onChange;`
	`230`	`+ setTimeout(() => {`
	`231`	`+ onChange(e.e);`
`232`	`232`	`}, 10);`
`233`	`233`	`}`
`234`	`234`	`}`
`@@ -300,7 +300,7 @@ class SketchField extends Component {`
`300`	`300`	`this._fc.renderAll();`
`301`	`301`	`}`
`302`	`302`	`if (this.props.onChange) {`
`303`		`- this.props.onChange(event.e);`
	`303`	`+ this.props.onChange();`
`304`	`304`	`}`
`305`	`305`	`}`
`306`	`306`
`@@ -325,7 +325,7 @@ class SketchField extends Component {`
`325`	`325`	`obj.setCoords();`
`326`	`326`	`canvas.renderAll();`
`327`	`327`	`if (this.props.onChange) {`
`328`		`- this.props.onChange(event.e);`
	`328`	`+ this.props.onChange();`
`329`	`329`	`}`
`330`	`330`	`}`
`331`	`331`	`}`
`@@ -396,7 +396,7 @@ class SketchField extends Component {`
`396`	`396`	`canvas.loadFromJSON(json, () => {`
`397`	`397`	`canvas.renderAll();`
`398`	`398`	`if (this.props.onChange) {`
`399`		`- this.props.onChange(null);`
	`399`	`+ this.props.onChange();`
`400`	`400`	`}`
`401`	`401`	`});`
`402`	`402`	`}, 100);`
`@@ -418,7 +418,7 @@ class SketchField extends Component {`
`418`	`418`	`canvas.renderAll();`
`419`	`419`	`};`
`420`	`420`	`if (this.props.onChange) {`
`421`		`- this.props.onChange(null);`
	`421`	`+ this.props.onChange();`
`422`	`422`	`}`
`423`	`423`	`}`
`424`	`424`