Merge branch 'sarthak-saxena-add_contrast_filter'

konva.d.ts

@@ -50,6 +50,7 @@ declare module Konva {
             static Sepia(imageData: any): Filter;
             static Solarize(imageData: any): Filter;
             static Threshold(imageData: any): Filter;
+            static Contrast(imageData: any): Filter;
         }
 
         export class Animation {
@@ -117,6 +118,8 @@ declare module Konva {
             blue(blue: number): Node;
             brightness(): number;
             brightness(brightness: number): Node;
+            contrast(): number;
+            contrast(contrast: number): Node;
             blurRadius(): number;
             blurRadius(radius: number): Node;
             cache(config?: CacheConfig): Node;

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v1.7.6
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Fri Jan 26 2018
+ * Date: Thu Feb 01 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -18262,12 +18262,23 @@
   'use strict';
 
   var CHANGE_KONVA = 'Change.konva';
-  var ATTR_CHANGE_LIST = ['keepRatio', 'resizeEnabled', 'rotateHandlerOffset'];
+  var ATTR_CHANGE_LIST = ['resizeEnabled', 'rotateHandlerOffset'];
 
   Konva.Transformer = function(config) {
     this.____init(config);
   };
 
+  var RESIZERS_NAMES = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'middle-right',
+    'middle-left',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right'
+  ];
+
   Konva.Transformer.prototype = {
     _centroid: false,
     ____init: function(config) {
@@ -18302,16 +18313,11 @@
     _createElements: function() {
       this._createBack();
 
-      this._createAnchor('top-left');
-      this._createAnchor('top-center');
-      this._createAnchor('top-right');
-
-      this._createAnchor('middle-right');
-      this._createAnchor('middle-left');
-
-      this._createAnchor('bottom-left');
-      this._createAnchor('bottom-center');
-      this._createAnchor('bottom-right');
+      RESIZERS_NAMES.forEach(
+        function(name) {
+          this._createAnchor(name);
+        }.bind(this)
+      );
 
       this._createAnchor('rotater');
     },
@@ -18364,7 +18370,13 @@
           ctx.beginPath();
           ctx.rect(0, 0, this.width(), this.height());
           ctx.moveTo(this.width() / 2, 0);
-          ctx.lineTo(this.width() / 2, -this.getParent().rotateHandlerOffset());
+          if (this.getParent().rotateEnabled()) {
+            ctx.lineTo(
+              this.width() / 2,
+              -this.getParent().rotateHandlerOffset()
+            );
+          }
+
           ctx.fillStrokeShape(this);
         }
       });
@@ -18593,6 +18605,8 @@
           y: attrs.absY
         });
       }
+      this.fire('transform');
+      this._el.fire('transform');
       this._update();
       this.getLayer().batchDraw();
     },
@@ -18612,53 +18626,54 @@
         });
       }
 
-      var keepRatio = this.keepRatio();
+      var enabledResizers = this.enabledResizers();
       var resizeEnabled = this.resizeEnabled();
 
       this.findOne('.top-left').setAttrs({
         x: 0,
         y: 0,
-        visible: resizeEnabled
+        visible: resizeEnabled && enabledResizers.indexOf('top-left') >= 0
       });
       this.findOne('.top-center').setAttrs({
         x: width / 2,
         y: 0,
-        visible: resizeEnabled && !keepRatio
+        visible: resizeEnabled && enabledResizers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
         x: width,
         y: 0,
-        visible: resizeEnabled
+        visible: resizeEnabled && enabledResizers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
         x: 0,
         y: height / 2,
-        visible: resizeEnabled && !keepRatio
+        visible: resizeEnabled && enabledResizers.indexOf('middle-left') >= 0
       });
       this.findOne('.middle-right').setAttrs({
         x: width,
         y: height / 2,
-        visible: resizeEnabled && !keepRatio
+        visible: resizeEnabled && enabledResizers.indexOf('middle-right') >= 0
       });
       this.findOne('.bottom-left').setAttrs({
         x: 0,
         y: height,
-        visible: resizeEnabled
+        visible: resizeEnabled && enabledResizers.indexOf('bottom-left') >= 0
       });
       this.findOne('.bottom-center').setAttrs({
         x: width / 2,
         y: height,
-        visible: resizeEnabled && !keepRatio
+        visible: resizeEnabled && enabledResizers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
         x: width,
         y: height,
-        visible: resizeEnabled
+        visible: resizeEnabled && enabledResizers.indexOf('bottom-right') >= 0
       });
 
       this.findOne('.rotater').setAttrs({
         x: width / 2,
-        y: -this.rotateHandlerOffset()
+        y: -this.rotateHandlerOffset(),
+        visible: this.rotateEnabled()
       });
 
       this.findOne('.back').setAttrs({
@@ -18677,8 +18692,36 @@
   };
   Konva.Util.extend(Konva.Transformer, Konva.Group);
 
-  Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false);
+  Konva.Factory.addGetterSetter(
+    Konva.Transformer,
+    'enabledResizers',
+    RESIZERS_NAMES
+  );
+  Konva.Factory.addGetterSetter(
+    Konva.Transformer,
+    'enabledResizers',
+    RESIZERS_NAMES,
+    function(val) {
+      if (!(val instanceof Array)) {
+        Konva.Util.warn('enabledResizers value should be an array');
+      }
+      if (val instanceof Array) {
+        val.forEach(function(name) {
+          if (RESIZERS_NAMES.indexOf('name') === -1) {
+            Konva.Util.warn(
+              'Unknown resizer name: ' +
+                name +
+                '. Available names are: ' +
+                RESIZERS_NAMES.join(', ')
+            );
+          }
+        });
+      }
+      return val || [];
+    }
+  );
   Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateEnabled', true);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
   Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
 

src/filters/Contrast.js

@@ -0,0 +1,70 @@
+(function (Konva) {
+  'use strict';
+  /**
+   * Contrast Filter.
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Contrast]);
+   * node.contrast(10);
+   */
+
+  Konva.Filters.Contrast = function (imageData) {
+    var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);
+
+    var data = imageData.data,
+      nPixels = data.length,
+      red = 150,
+      green = 150,
+      blue = 150,
+      i;
+
+    for (i = 0; i < nPixels; i += 4) {
+      red = data[i];
+      green = data[i + 1];
+      blue = data[i + 2];
+
+      //Red channel
+      red /= 255;
+      red -= 0.5;
+      red *= adjust;
+      red += 0.5;
+      red *= 255;
+
+      //Green channel
+      green /= 255;
+      green -= 0.5;
+      green *= adjust;
+      green += 0.5;
+      green *= 255;
+
+      //Blue channel
+      blue /= 255;
+      blue -= 0.5;
+      blue *= adjust;
+      blue += 0.5;
+      blue *= 255;
+
+      red = (red < 0 ? 0 : (red > 255 ? 255 : red));
+      green = (green < 0 ? 0 : (green > 255 ? 255 : green));
+      blue = (blue < 0 ? 0 : (blue > 255 ? 255 : blue));
+
+      data[i] = red;
+      data[i + 1] = green;
+      data[i + 2] = blue;
+    }
+  };
+
+  /**
+   * get/set filter contrast.  The contrast is a number between -100 and 100.
+   * Use with {@link Konva.Filters.Contrast} filter.
+   * @name contrast
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} contrast value between -100 and 100
+   * @returns {Number}
+   */
+  Konva.Factory.addGetterSetter(Konva.Node, 'contrast', 0, null, Konva.Factory.afterSetFilter);
+})(Konva);

test/node-runner.js

@@ -107,6 +107,7 @@ require('./unit/filters/Noise-test.js');
 require('./unit/filters/Threshold-test.js');
 require('./unit/filters/Posterize-test.js');
 require('./unit/filters/Sepia-test.js');
+require('./unit/filters/Contrast-test.js');
 require('./unit/filters/Emboss-test.js');
 require('./unit/filters/Solarize-test.js');
 require('./unit/filters/Kaleidoscope-test.js');

test/runner.html

@@ -59,6 +59,7 @@
     <script src="../src/filters/Pixelate.js" data-cover></script>
     <script src="../src/filters/Threshold.js" data-cover></script>
     <script src="../src/filters/Sepia.js" data-cover></script>
+    <script src="../src/filters/Contrast.js" data-cover></script>
     <script src="../src/filters/Solarize.js" data-cover></script>
     <script src="../src/filters/Kaleidoscope.js" data-cover></script>
 
@@ -164,6 +165,7 @@
     <script src="unit/filters/Threshold-test.js"></script>
     <script src="unit/filters/Posterize-test.js"></script>
     <script src="unit/filters/Sepia-test.js"></script>
+    <script src="unit/filters/Contrast-test.js"></script>
     <script src="unit/filters/Emboss-test.js"></script>
     <script src="unit/filters/Solarize-test.js"></script>
     <script src="unit/filters/Kaleidoscope-test.js"></script>

test/unit/filters/Contrast-test.js

@@ -0,0 +1,102 @@
+suite('Filter Contrast', function() {
+  // ======================================================
+  test('basic', function(done) {
+    var stage = addStage();
+
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var layer = new Konva.Layer();
+      var darth = new Konva.Image({
+        x: 10,
+        y: 10,
+        image: imageObj,
+        draggable: true
+      });
+
+      layer.add(darth);
+      stage.add(layer);
+
+      darth.cache();
+      darth.filters([Konva.Filters.Contrast]);
+      darth.contrast(40);
+      layer.draw();
+
+      assert.equal(darth.contrast(), 40);
+
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
+
+  // ======================================================
+  test('tween', function(done) {
+    var stage = addStage();
+
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var layer = new Konva.Layer();
+      var darth = new Konva.Image({
+        x: 10,
+        y: 10,
+        image: imageObj,
+        draggable: true
+      });
+
+      layer.add(darth);
+      stage.add(layer);
+
+      darth.cache();
+      darth.filters([Konva.Filters.Contrast]);
+      darth.contrast(40);
+      layer.draw();
+
+      var tween = new Konva.Tween({
+        node: darth,
+        duration: 2.0,
+        contrast: 0,
+        easing: Konva.Easings.EaseInOut
+      });
+
+      darth.on('mouseover', function() {
+        tween.play();
+      });
+
+      darth.on('mouseout', function() {
+        tween.reverse();
+      });
+
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
+
+  // ======================================================
+  test('crop', function(done) {
+    var stage = addStage();
+
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var layer = new Konva.Layer();
+      var darth = new Konva.Image({
+        x: 10,
+        y: 10,
+        image: imageObj,
+        crop: {x: 128, y: 48, width: 256, height: 128},
+        draggable: true
+      });
+
+      layer.add(darth);
+      stage.add(layer);
+
+      darth.cache();
+      darth.filters([Konva.Filters.Contrast]);
+      darth.contrast(-40);
+      layer.draw();
+
+      assert.equal(darth.contrast(), -40);
+
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
+});