optimize change event. close #120

CHANGELOG.md

@@ -18,6 +18,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - `moveTo` and some other methods return `this`
 - `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
+- `change` event will be not fired if changed value is the same as old value
 
 ## [0.10.0][2015-10-27]
 

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.11.0
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Mon Jan 04 2016
+ * Date: Thu Jan 07 2016
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -3969,6 +3969,9 @@
             var oldVal;
             if(val !== undefined) {
                 oldVal = this.attrs[key];
+                if (oldVal === val) {
+                    return;
+                }
                 this.attrs[key] = val;
                 this._fireChangeEvent(key, oldVal, val);
             }

src/Node.js

@@ -1732,6 +1732,9 @@
             var oldVal;
             if(val !== undefined) {
                 oldVal = this.attrs[key];
+                if (oldVal === val) {
+                    return;
+                }
                 this.attrs[key] = val;
                 this._fireChangeEvent(key, oldVal, val);
             }

test/unit/Node-test.js

@@ -696,6 +696,36 @@ suite('Node', function() {
 
     });
 
+    // ======================================================
+    test('test on attr change for same value', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+        var rect = new Konva.Rect({
+            x: 50,
+            y: 50,
+            width: 200,
+            height: 50,
+            fill: 'blue',
+            shadowOffset: {x: 10, y: 10},
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        var widthChanged = 0;
+
+        rect.on('widthChange', function(evt) {
+            widthChanged++;
+        });
+
+
+        rect.width(210);
+        rect.width(210);
+
+        assert.equal(widthChanged, 1, 'should trigger only once');
+
+    });
+
     // ======================================================
     test('set shape, layer and stage opacity to 0.5', function() {
         var stage = addStage();