some types updates

konva-node/index.js

@@ -17,6 +17,9 @@ Konva.window = new JSDOM(
 ).window;
 Konva.document = Konva.window.document;
 Konva.window.Image = Canvas.Image;
-Konva._nodeCanvas = Canvas;
+
+Konva.Util.createCanvasElement = () => {
+  return new Canvas();
+};
 
 module.exports = Konva;

package.json

@@ -35,18 +35,18 @@
     "gulp-jsdoc3": "^2.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-replace": "^1.0.0",
-    "gulp-uglify": "^3.0.1",
+    "gulp-uglify": "^3.0.2",
     "gulp-util": "^3.0.8",
     "mocha": "5.2.0",
     "mocha-headless-chrome": "^2.0.2",
-    "parcel-bundler": "^1.11.0",
+    "parcel-bundler": "^1.12.3",
     "prettier": "^1.16.4",
-    "typescript": "^3.3.1",
+    "typescript": "^3.4.1",
     "gulp-exec": "^3.0.2",
-    "gulp-typescript": "^5.0.0",
+    "gulp-typescript": "^5.0.1",
-    "rollup": "^1.1.2",
+    "rollup": "^1.7.4",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-commonjs": "^9.2.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-typescript2": "^0.20.1"
   },

src/Canvas.ts

@@ -11,7 +11,7 @@ function getDevicePixelRatio() {
     return _pixelRatio;
   }
   var canvas = Util.createCanvasElement();
-  var context = canvas.getContext('2d');
+  var context = canvas.getContext('2d') as any;
   _pixelRatio = (function() {
     var devicePixelRatio = glob.window.devicePixelRatio || 1,
       backingStoreRatio =

src/Util.ts

@@ -1,5 +1,6 @@
 import { glob, Konva } from './Global';
 import { Node } from './Node';
+import { IRect } from './types';
 
 export type Point = {
   x: number;
@@ -563,12 +564,10 @@ export const Util = {
     }
   },
   createCanvasElement() {
-    var canvas = Konva.isBrowser
+    var canvas = document.createElement('canvas');
-      ? document.createElement('canvas')
-      : new (Konva['_nodeCanvas']())();
     // on some environments canvas.style is readonly
     try {
-      canvas.style = canvas.style || {};
+      (<any>canvas).style = canvas.style || {};
     } catch (e) {}
     return canvas;
   },
@@ -583,7 +582,7 @@ export const Util = {
     }
     return false;
   },
-  _simplifyArray(arr: []) {
+  _simplifyArray(arr: Array<any>) {
     var retArr = [],
       len = arr.length,
       util = Util,
@@ -641,7 +640,7 @@ export const Util = {
     return HASH + randColor;
   },
 
-  get(val, def) {
+  get(val: any, def: any) {
     if (val === undefined) {
       return def;
     } else {
@@ -659,7 +658,7 @@ export const Util = {
    * var rgb = Konva.Util.getRGB('#0000ff');
    * var rgb = Konva.Util.getRGB('rgb(0,0,255)');
    */
-  getRGB(color) {
+  getRGB(color: string) {
     var rgb;
     // color string
     if (color in COLORS) {
@@ -691,7 +690,7 @@ export const Util = {
   },
   // convert any color string to RGBA object
   // from https://github.com/component/color-parser
-  colorToRGBA(str) {
+  colorToRGBA(str: string) {
     str = str || 'black';
     return (
       Util._namedColorToRBA(str) ||
@@ -702,7 +701,7 @@ export const Util = {
     );
   },
   // Parse named css color. Like "green"
-  _namedColorToRBA(str) {
+  _namedColorToRBA(str: string) {
     var c = COLORS[str.toLowerCase()];
     if (!c) {
       return null;
@@ -715,7 +714,7 @@ export const Util = {
     };
   },
   // Parse rgb(n, n, n)
-  _rgbColorToRGBA(str) {
+  _rgbColorToRGBA(str: string) {
     if (str.indexOf('rgb(') === 0) {
       str = str.match(/rgb\(([^)]+)\)/)[1];
       var parts = str.split(/ *, */).map(Number);
@@ -728,7 +727,7 @@ export const Util = {
     }
   },
   // Parse rgba(n, n, n, n)
-  _rgbaColorToRGBA(str) {
+  _rgbaColorToRGBA(str: string) {
     if (str.indexOf('rgba(') === 0) {
       str = str.match(/rgba\(([^)]+)\)/)[1];
       var parts = str.split(/ *, */).map(Number);
@@ -741,7 +740,7 @@ export const Util = {
     }
   },
   // Parse #nnnnnn
-  _hex6ColorToRGBA(str) {
+  _hex6ColorToRGBA(str: string) {
     if (str[0] === '#' && str.length === 7) {
       return {
         r: parseInt(str.slice(1, 3), 16),
@@ -752,7 +751,7 @@ export const Util = {
     }
   },
   // Parse #nnn
-  _hex3ColorToRGBA(str) {
+  _hex3ColorToRGBA(str: string) {
     if (str[0] === '#' && str.length === 4) {
       return {
         r: parseInt(str[1] + str[1], 16),
@@ -771,7 +770,7 @@ export const Util = {
    * @example
    * const overlapping = Konva.Util.haveIntersection(shape1.getClientRect(), shape2.getClientRect());
    */
-  haveIntersection(r1, r2) {
+  haveIntersection(r1: IRect, r2: IRect) {
     return !(
       r2.x > r1.x + r1.width ||
       r2.x + r2.width < r1.x ||
@@ -792,31 +791,31 @@ export const Util = {
     }
     return retObj;
   },
-  cloneArray(arr) {
+  cloneArray(arr: Array<any>) {
     return arr.slice(0);
   },
-  _degToRad(deg) {
+  _degToRad(deg: number) {
     return deg * PI_OVER_DEG180;
   },
-  _radToDeg(rad) {
+  _radToDeg(rad: number) {
     return rad * DEG180_OVER_PI;
   },
-  _capitalize(str) {
+  _capitalize(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1);
   },
-  throw(str) {
+  throw(str: string) {
     throw new Error(KONVA_ERROR + str);
   },
-  error(str) {
+  error(str: string) {
     console.error(KONVA_ERROR + str);
   },
-  warn(str) {
+  warn(str: string) {
     if (!Konva.showWarnings) {
       return;
     }
     console.warn(KONVA_WARNING + str);
   },
-  extend(child, parent) {
+  extend(child: any, parent: any) {
     function Ctor() {
       this.constructor = child;
     }

test/parcel-runner.ts

@@ -1,8 +1,16 @@
-import 'mocha';
+// import 'mocha';
-import chai from 'chai';
+// import chai from 'chai';
 
-mocha.ui('tdd');
+// mocha.ui('tdd');
-mocha.setup('bdd');
+// mocha.setup('bdd');
-mocha.run();
+// mocha.run();
 
-import './unit-new/Shape-test';
+// import './unit-new/Shape-test';
+
+
+
+import Konva from '../';
+
+var shape = new Konva.Rect({
+  filters: [Konva.Filters.Blur]
+})

test/unit/shapes/Transformer-test.js

@@ -35,6 +35,47 @@ suite('Transformer', function() {
     assert.equal(pos.y, rect.y() + rect.height());
   });
 
+  test.skip('try it on a parent of parent', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 50,
+      y: 50
+    });
+    layer.add(group);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow'
+    });
+    group.add(rect);
+
+    var tr = new Konva.Transformer({
+      node: rect
+    });
+    layer.add(tr);
+
+    layer.draw();
+
+    assert.equal(tr.x(), rect.x() + group.x());
+    assert.equal(tr.y(), rect.y() + group.y());
+    assert.equal(tr.width(), rect.width());
+    assert.equal(tr.height(), rect.height());
+
+    // manual check of correct position of node
+    var handler = tr.findOne('.bottom-right');
+    var pos = handler.getAbsolutePosition();
+    assert.equal(pos.x, rect.x() + rect.width());
+    assert.equal(pos.y, rect.y() + rect.height());
+    throw '';
+  });
+
   test('try set/get node', function() {
     var stage = addStage();
     var layer = new Konva.Layer();

tsconfig.json

@@ -5,6 +5,7 @@
     "target": "es5",
     "noEmitOnError": true,
     "lib": ["es2015", "dom"]
+    // "noImplicitAny": true
   },
   "include": ["./src/*.ts"]
 }