Add new property imageSmoothingEnabled to the layer. some ts fixes.

CHANGELOG.md

@@ -5,6 +5,11 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## [3.2.7][2019-05-28]
+
+* Enable strict mode for ts types
+* Add new property `imageSmoothingEnabled` to the layer
+
 ## [3.2.7][2019-05-27]
 
 * Typescript fixes

package.json

@@ -17,7 +17,8 @@
     "lint": "gulp lint",
     "build": "npm run compile && gulp build",
     "full-build": "npm run build && npm t",
-    "test": "node ./test/import-test.js && mocha-headless-chrome -f ./test/runner.html -a disable-web-security",
+    "test": "node ./test/import-test.js && mocha-headless-chrome -f ./test/runner.html -a disable-web-security && npm run test:types",
+    "test:types": "tsc -p ./test/ --noEmit",
     "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote",
     "tsc": "tsc -d --declarationDir ./types --removeComments --module CommonJS || echo \"tsc faild for some file(s).\"",
     "rollup": "rollup -c",

src/BaseLayer.ts

@@ -35,6 +35,9 @@ export abstract class BaseLayer extends Container<Group | Shape> {
     super(config);
     this.on('visibleChange', this._checkVisibility);
     this._checkVisibility();
+
+    this.on('imageSmoothingEnabledChange', this._checkSmooth);
+    this._checkSmooth();
   }
   // for nodejs?
   createPNGStream() {
@@ -206,6 +209,10 @@ export abstract class BaseLayer extends Container<Group | Shape> {
       this.canvas._canvas.style.display = 'none';
     }
   }
+
+  _checkSmooth() {
+    this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
+  }
   /**
    * get/set width of layer.getter return width of stage. setter doing nothing.
    * if you want change width use `stage.width(value);`
@@ -275,10 +282,30 @@ export abstract class BaseLayer extends Container<Group | Shape> {
   }
 
   clearBeforeDraw: GetSet<boolean, this>;
+  imageSmoothingEnabled: GetSet<boolean, this>;
 }
 
 BaseLayer.prototype.nodeType = 'BaseLayer';
 
+/**
+ * get/set imageSmoothingEnabled flag
+ * For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+ * @name Konva.BaseLayer#imageSmoothingEnabled
+ * @method
+ * @param {Boolean} imageSmoothingEnabled
+ * @returns {Boolean}
+ * @example
+ * // get imageSmoothingEnabled flag
+ * var imageSmoothingEnabled = layer.imageSmoothingEnabled();
+ *
+ * // disable clear before draw
+ * layer.imageSmoothingEnabled(false);
+ *
+ * // enable clear before draw
+ * layer.imageSmoothingEnabled(true);
+ */
+Factory.addGetterSetter(BaseLayer, 'imageSmoothingEnabled', true);
+
 /**
  * get/set clearBeforeDraw flag which determines if the layer is cleared or not
  *  before drawing

src/Context.ts

@@ -62,7 +62,8 @@ var CONTEXT_PROPERTIES = [
   'textAlign',
   'textBaseline',
   'globalAlpha',
-  'globalCompositeOperation'
+  'globalCompositeOperation',
+  'imageSmoothingEnabled'
 ];
 
 // TODO: document all context methods

src/FastLayer.ts

@@ -31,6 +31,7 @@ export class FastLayer extends BaseLayer {
   }
   _setCanvasSize(width, height) {
     this.canvas.setSize(width, height);
+    this._checkSmooth();
   }
   hitGraphEnabled() {
     return false;

src/Group.ts

@@ -16,7 +16,7 @@ import { Shape } from './Shape';
  * var group = new Konva.Group();
  */
 export class Group extends Container<Group | Shape> {
-  _validateAdd(child: Group | Shape) {
+  _validateAdd(child: Node) {
     var type = child.getType();
     if (type !== 'Group' && type !== 'Shape') {
       Util.throw('You may only add groups and shapes to groups.');

src/Layer.ts

@@ -53,6 +53,7 @@ export class Layer extends BaseLayer {
   _setCanvasSize(width, height) {
     this.canvas.setSize(width, height);
     this.hitCanvas.setSize(width, height);
+    this._checkSmooth();
   }
   _validateAdd(child) {
     var type = child.getType();

src/Node.ts

@@ -157,7 +157,8 @@ var ABSOLUTE_OPACITY = 'absoluteOpacity',
   ].join(SPACE),
   SCALE_CHANGE_STR = ['scaleXChange.konva', 'scaleYChange.konva'].join(SPACE);
 
-const emptyChildren: Collection<Node> = new Collection();
+// TODO: can we remove children from node?
+const emptyChildren: Collection<any> = new Collection();
 
 let idCounter = 1;
 
@@ -183,7 +184,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   } = {};
   attrs: any = {};
   index = 0;
-  parent: Container<Node> | undefined = undefined;
+  parent: Container<Node> | null = null;
   _cache: Map<string, any> = new Map<string, any>();
   _lastPos: Point = null;
   _attrsAffectingSize!: string[];

test/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true
+  },
+  "files": ["../types/index-types.d.ts"]
+}

test/unit/Layer-test.js

@@ -459,4 +459,32 @@ suite('Layer', function() {
     assert.equal(layer.width(), stage.width());
     assert.equal(layer.height(), stage.height());
   });
+
+  test('get/set imageSmoothingEnabled', function(done) {
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var stage = addStage();
+
+      var layer = new Konva.Layer({
+        imageSmoothingEnabled: false
+      });
+      var darth = new Konva.Image({
+        image: imageObj,
+        scaleX: 5,
+        scaleY: 5
+      });
+
+      layer.add(darth);
+      stage.add(layer);
+
+      assert.equal(layer.getContext().imageSmoothingEnabled, false);
+
+      layer.imageSmoothingEnabled(true);
+
+      assert.equal(layer.getContext().imageSmoothingEnabled, true);
+
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
 });