tests refactor, clean build

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 15.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

CHANGELOG.md

@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - `Konva.Collection` is removed. `container.children` is a simple array now. `container.find()` will return also a simple array instead of `Konva.Collection()`.
 - Better typescript support. Now every module has its own `*.d.ts` file.
 - New method `layer.getNativeCanvasElement()`
+- Removed `Konva.UA`, `Konva._parseUA` (it was used for old browser detection)
 
 ## 7.2.5
 

README.md

@@ -4,21 +4,19 @@
 
 <h1 align="center">Konva</h1>
 
-[![Financial Contributors on Open Collective](https://opencollective.com/konva/all/badge.svg?label=financial+contributors)](https://opencollective.com/konva) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/konvajs/konva?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![npm version](https://badge.fury.io/js/konva.svg)](http://badge.fury.io/js/konva) [![bower version](https://badge.fury.io/bo/konva.svg)](http://badge.fury.io/bo/konva)
-[![Build Status](https://travis-ci.org/konvajs/konva.png)](https://travis-ci.org/konvajs/konva)  [![Code Climate](https://codeclimate.com/github/konvajs/konva/badges/gpa.svg)](https://codeclimate.com/github/konvajs/konva) [![CDNJS version](https://img.shields.io/cdnjs/v/konva.svg)](https://cdnjs.com/libraries/konva)
+[![Financial Contributors on Open Collective](https://opencollective.com/konva/all/badge.svg?label=financial+contributors)](https://opencollective.com/konva)
+[![npm version](https://badge.fury.io/js/konva.svg)](http://badge.fury.io/js/konva)
+[![Build Status](https://travis-ci.org/konvajs/konva.png)](https://travis-ci.org/konvajs/konva) [![CDNJS version](https://img.shields.io/cdnjs/v/konva.svg)](https://cdnjs.com/libraries/konva)
 
 Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.
 
-
-
 You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.
 
 This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github.com/ericdrowell/KineticJS).
 
-* **Visit:** The [Home Page](http://konvajs.org/) and follow on [Twitter](https://twitter.com/lavrton)
-* **Discover:** [Tutorials](http://konvajs.org/docs), [API Documentation](http://konvajs.org/api)
-* **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Chat](https://gitter.im/konvajs/konva)
+- **Visit:** The [Home Page](http://konvajs.org/) and follow on [Twitter](https://twitter.com/lavrton)
+- **Discover:** [Tutorials](http://konvajs.org/docs), [API Documentation](http://konvajs.org/api)
+- **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Chat](https://gitter.im/konvajs/konva)
 
 # Quick Look
 
@@ -26,38 +24,38 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
 <script src="https://unpkg.com/konva@7.2.5/konva.min.js"></script>
 <div id="container"></div>
 <script>
-    var stage = new Konva.Stage({
-        container: 'container',
-        width: window.innerWidth,
-        height: window.innerHeight
-    });
+  var stage = new Konva.Stage({
+    container: 'container',
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
 
-    // add canvas element
-    var layer = new Konva.Layer();
-    stage.add(layer);
+  // add canvas element
+  var layer = new Konva.Layer();
+  stage.add(layer);
 
-    // create shape
-    var box = new Konva.Rect({
-        x: 50,
-        y: 50,
-        width: 100,
-        height: 50,
-        fill: '#00D2FF',
-        stroke: 'black',
-        strokeWidth: 4,
-        draggable: true
-    });
-    layer.add(box);
+  // create shape
+  var box = new Konva.Rect({
+    x: 50,
+    y: 50,
+    width: 100,
+    height: 50,
+    fill: '#00D2FF',
+    stroke: 'black',
+    strokeWidth: 4,
+    draggable: true,
+  });
+  layer.add(box);
 
-    layer.draw();
+  layer.draw();
 
-    // add cursor styling
-    box.on('mouseover', function() {
-        document.body.style.cursor = 'pointer';
-    });
-    box.on('mouseout', function() {
-        document.body.style.cursor = 'default';
-    });
+  // add cursor styling
+  box.on('mouseover', function () {
+    document.body.style.cursor = 'pointer';
+  });
+  box.on('mouseout', function () {
+    document.body.style.cursor = 'default';
+  });
 </script>
 ```
 
@@ -157,7 +155,6 @@ See file `konva-node/demo.js` file in this repo as a sample.
 - [myposter GmbH](https://www.myposter.de/)
 - [queue.gg](https://queue.gg/)
 
-
 # Change log
 
 See [CHANGELOG.md](https://github.com/konvajs/konva/blob/master/CHANGELOG.md).
@@ -170,9 +167,8 @@ To make a full build run `npm run build`. The command will compile all typescrip
 
 Konva uses Mocha for testing.
 
-* If you need run test only one time run `npm run test`.
-* While developing it is easy to use `npm start`. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). The watcher will rebuild the bundle on any change.
-
+- If you need run test only one time run `npm run test`.
+- While developing it is easy to use `npm start`. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). The watcher will rebuild the bundle on any change.
 
 Konva is covered with hundreds of tests and well over a thousand assertions.
 Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test.
@@ -188,7 +184,6 @@ in particular if you have a bug fix, enhancement, or a new shape (see `src/shape
 
 ## Contributors
 
-
 ### Financial Contributors
 
 Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/konva/contribute)]

gulpfile.js

@@ -4,8 +4,6 @@ import uglify from 'gulp-uglify-es';
 import replace from 'gulp-replace';
 import jsdoc from 'gulp-jsdoc3';
 import connect from 'gulp-connect';
-import jscpd from 'gulp-jscpd';
-import eslint from 'gulp-eslint';
 import gutil from 'gulp-util';
 
 import fs from 'fs';
@@ -61,35 +59,6 @@ gulp.task('server', function () {
   connect.server();
 });
 
-// lint files
-gulp.task('lint', function () {
-  return (
-    gulp
-      .src('./src/**/*.js')
-      .pipe(
-        eslint({
-          configFile: './.eslintrc',
-        })
-      )
-      // eslint.format() outputs the lint results to the console.
-      // Alternatively use eslint.formatEach() (see Docs).
-      .pipe(eslint.format())
-      // To have the process exit with an error code (1) on
-      // lint error, return the stream and pipe to failOnError last.
-      .pipe(eslint.failOnError())
-  );
-});
-
-// check code for duplication
-gulp.task('inspect', function () {
-  return gulp.src('./src/**/*.js').pipe(
-    jscpd({
-      'min-lines': 10,
-      verbose: true,
-    })
-  );
-});
-
 // // generate documentation
 gulp.task('api', function () {
   return gulp.src('./konva.js').pipe(

package.json

@@ -11,23 +11,22 @@
     "lib"
   ],
   "type": "module",
-  "module": "./lib/index-node.js",
+  "main": "./lib/index-node.js",
   "browser": "./lib/index.js",
   "typings": "./types/index-types.d.ts",
   "scripts": {
     "start": "npm run test:watch",
-    "lint": "gulp lint",
-    "build": "npm run compile && gulp build",
+    "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./lib/index-types.d.ts && npm run rollup",
+    "build": "npm run compile && cp ./src/index-types.d.ts ./lib && gulp build",
     "full-build": "npm run build && npm t",
     "test": "node ./test/import-test.js &&  npm run test:browser && npm run test:node",
     "test:build": "parcel build ./test/unit-tests.html --dist-dir test-build --target none --public-url ./ --no-source-maps",
     "test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
-    "test:node": "env TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha -r ts-node/register test/unit/**/*.ts",
+    "test:node": "env TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha -r ts-node/register test/unit/**/*.ts --exit",
     "test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/performance/bunnies.html",
     "tsc": "tsc --removeComments",
     "rollup": "rollup -c",
-    "clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./es",
-    "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./types && npm run rollup",
+    "clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./es && rm -rf ./test-build",
     "watch": "rollup -c -w",
     "size": "size-limit"
   },
@@ -50,7 +49,7 @@
   ],
   "size-limit": [
     {
-      "limit": "47 KB",
+      "limit": "45 KB",
       "path": "./lib/index.js"
     },
     {
@@ -66,13 +65,10 @@
     "@types/mocha": "^8.2.2",
     "canvas": "^2.7.0",
     "chai": "4.3.4",
-    "github-release-from-changelog": "^2.1.1",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-connect": "^5.7.0",
-    "gulp-eslint": "^6.0.0",
     "gulp-exec": "^5.0.0",
-    "gulp-jscpd": "0.0.8",
     "gulp-jsdoc3": "^3.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.2",
@@ -80,11 +76,9 @@
     "gulp-uglify": "^3.0.2",
     "gulp-uglify-es": "^2.0.0",
     "gulp-util": "^3.0.8",
-    "imagediff": "^1.0.8",
     "mocha": "8.3.2",
     "mocha-headless-chrome": "^3.1.0",
     "parcel": "^2.0.0-beta.2",
-    "prettier": "^2.2.1",
     "rollup": "^2.46.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

src/Animation.ts

@@ -1,7 +1,7 @@
-import { glob } from './Global';
-import { Layer } from './Layer';
+import { glob } from './Global.js';
+import { Layer } from './Layer.js';
 import { IFrame, AnimationFn } from './types';
-import { Util } from './Util';
+import { Util } from './Util.js';
 
 var now = (function (): () => number {
   if (glob.performance && glob.performance.now) {

src/Canvas.ts

@@ -1,8 +1,8 @@
-import { Util } from './Util';
-import { SceneContext, HitContext, Context } from './Context';
-import { Konva } from './Global';
-import { Factory } from './Factory';
-import { getNumberValidator } from './Validators';
+import { Util } from './Util.js';
+import { SceneContext, HitContext, Context } from './Context.js';
+import { Konva } from './Global.js';
+import { Factory } from './Factory.js';
+import { getNumberValidator } from './Validators.js';
 
 // calculate pixel ratio
 var _pixelRatio;
@@ -12,7 +12,7 @@ function getDevicePixelRatio() {
   }
   var canvas = Util.createCanvasElement();
   var context = canvas.getContext('2d') as any;
-  _pixelRatio = (function() {
+  _pixelRatio = (function () {
     var devicePixelRatio = Konva._global.devicePixelRatio || 1,
       backingStoreRatio =
         context.webkitBackingStorePixelRatio ||

src/Container.ts

@@ -1,11 +1,10 @@
-import { Util } from './Util';
-import { Factory } from './Factory';
-import { Node, NodeConfig } from './Node';
-import { getNumberValidator } from './Validators';
+import { Factory } from './Factory.js';
+import { Node, NodeConfig } from './Node.js';
+import { getNumberValidator } from './Validators.js';
 
 import { GetSet, IRect } from './types';
-import { Shape } from './Shape';
-import { HitCanvas, SceneCanvas } from './Canvas';
+import { Shape } from './Shape.js';
+import { HitCanvas, SceneCanvas } from './Canvas.js';
 
 export interface ContainerConfig extends NodeConfig {
   clearBeforeDraw?: boolean;
@@ -27,7 +26,7 @@ export interface ContainerConfig extends NodeConfig {
  * @@containerParams
  */
 export abstract class Container<
-  ChildType extends Node
+  ChildType extends Node = Node
 > extends Node<ContainerConfig> {
   children: Array<ChildType> | undefined = [];
 

src/Context.ts

@@ -1,7 +1,7 @@
-import { Util } from './Util';
-import { Konva } from './Global';
-import { Canvas } from './Canvas';
-import { Shape } from './Shape';
+import { Util } from './Util.js';
+import { Konva } from './Global.js';
+import { Canvas } from './Canvas.js';
+import { Shape } from './Shape.js';
 
 var COMMA = ',',
   OPEN_PAREN = '(',

src/Core.ts

@@ -1,5 +1,5 @@
 // enter file of limited Konva version with only core functions
-export { Konva } from './_CoreInternals';
-import { Konva } from './_CoreInternals';
+export { Konva } from './_CoreInternals.js';
+import { Konva } from './_CoreInternals.js';
 
 export default Konva;

src/DragAndDrop.ts

@@ -1,7 +1,7 @@
-import { Konva } from './Global';
-import { Node } from './Node';
+import { Konva } from './Global.js';
+import { Node } from './Node.js';
 import { Vector2d } from './types';
-import { Util } from './Util';
+import { Util } from './Util.js';
 
 export const DD = {
   get isDragging() {

src/Factory.ts

@@ -1,5 +1,5 @@
-import { Util } from './Util';
-import { getComponentValidator } from './Validators';
+import { Util } from './Util.js';
+import { getComponentValidator } from './Validators.js';
 
 var GET = 'get',
   SET = 'set';

src/FastLayer.ts

@@ -1,6 +1,6 @@
-import { Util } from './Util';
-import { Layer } from './Layer';
-import { _registerNode } from './Global';
+import { Util } from './Util.js';
+import { Layer } from './Layer.js';
+import { _registerNode } from './Global.js';
 
 /**
  * FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used

src/Global.ts

@@ -24,57 +24,6 @@ function detectBrowser() {
   );
 }
 
-const _detectIE = function (ua) {
-  var msie = ua.indexOf('msie ');
-  if (msie > 0) {
-    // IE 10 or older => return version number
-    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
-  }
-
-  var trident = ua.indexOf('trident/');
-  if (trident > 0) {
-    // IE 11 => return version number
-    var rv = ua.indexOf('rv:');
-    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
-  }
-
-  var edge = ua.indexOf('edge/');
-  if (edge > 0) {
-    // Edge (IE 12+) => return version number
-    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
-  }
-
-  // other browser
-  return false;
-};
-
-export const _parseUA = function (userAgent) {
-  var ua = userAgent.toLowerCase(),
-    // jQuery UA regex
-    match =
-      /(chrome)[ /]([\w.]+)/.exec(ua) ||
-      /(webkit)[ /]([\w.]+)/.exec(ua) ||
-      /(opera)(?:.*version|)[ /]([\w.]+)/.exec(ua) ||
-      /(msie) ([\w.]+)/.exec(ua) ||
-      (ua.indexOf('compatible') < 0 &&
-        /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) ||
-      [],
-    // adding mobile flag as well
-    mobile = !!userAgent.match(
-      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i
-    ),
-    ieMobile = !!userAgent.match(/IEMobile/i);
-
-  return {
-    browser: match[1] || '',
-    version: match[2] || '0',
-    isIE: _detectIE(ua),
-    // adding mobile flab
-    mobile: mobile,
-    ieMobile: ieMobile, // If this is true (i.e., WP8), then Konva touch events are executed instead of equivalent Konva mouse events
-  };
-};
-
 declare const WorkerGlobalScope: any;
 
 export const glob: any =
@@ -90,9 +39,9 @@ export const Konva = {
   _global: glob,
   version: '@@version',
   isBrowser: detectBrowser(),
-  isUnminified: /param/.test(function (param) {}.toString()),
+  isUnminified: /param/.test(function (param: any) {}.toString()),
   dblClickWindow: 400,
-  getAngle(angle) {
+  getAngle(angle: number) {
     return Konva.angleDeg ? angle * PI_OVER_180 : angle;
   },
   enableTrace: false,
@@ -210,20 +159,15 @@ export const Konva = {
     return !!Konva['DD'].node;
   },
   // user agent
-  UA: _parseUA((glob.navigator && glob.navigator.userAgent) || ''),
   document: glob.document,
   // insert Konva into global namespace (window)
   // it is required for npm packages
   _injectGlobal(Konva) {
     glob.Konva = Konva;
   },
-  _parseUA,
 };
 
-export const _NODES_REGISTRY = {};
-
-export const _registerNode = (NodeClass) => {
-  _NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
+export const _registerNode = (NodeClass: any) => {
   Konva[NodeClass.prototype.getClassName()] = NodeClass;
 };
 

src/Group.ts

@@ -1,8 +1,8 @@
-import { Util } from './Util';
-import { Container } from './Container';
-import { _registerNode } from './Global';
-import { Node } from './Node';
-import { Shape } from './Shape';
+import { Util } from './Util.js';
+import { Container } from './Container.js';
+import { _registerNode } from './Global.js';
+import { Node } from './Node.js';
+import { Shape } from './Shape.js';
 
 /**
  * Group constructor.  Groups are used to contain shapes or other groups.

src/Layer.ts

@@ -1,15 +1,15 @@
-import { Util } from './Util';
-import { Container, ContainerConfig } from './Container';
-import { Node } from './Node';
-import { Factory } from './Factory';
-import { SceneCanvas, HitCanvas } from './Canvas';
-import { Stage } from './Stage';
-import { getBooleanValidator } from './Validators';
+import { Util } from './Util.js';
+import { Container, ContainerConfig } from './Container.js';
+import { Node } from './Node.js';
+import { Factory } from './Factory.js';
+import { SceneCanvas, HitCanvas } from './Canvas.js';
+import { Stage } from './Stage.js';
+import { getBooleanValidator } from './Validators.js';
 
 import { GetSet, Vector2d } from './types';
-import { Group } from './Group';
-import { Shape, shapes } from './Shape';
-import { _registerNode } from './Global';
+import { Group } from './Group.js';
+import { Shape, shapes } from './Shape.js';
+import { _registerNode } from './Global.js';
 
 export interface LayerConfig extends ContainerConfig {
   clearBeforeDraw?: boolean;

src/Node.ts

@@ -1,19 +1,19 @@
-import { Util, Transform } from './Util';
-import { Factory } from './Factory';
-import { SceneCanvas, HitCanvas, Canvas } from './Canvas';
-import { Konva, _NODES_REGISTRY } from './Global';
-import { Container } from './Container';
+import { Util, Transform } from './Util.js';
+import { Factory } from './Factory.js';
+import { SceneCanvas, HitCanvas, Canvas } from './Canvas.js';
+import { Konva } from './Global.js';
+import { Container } from './Container.js';
 import { GetSet, Vector2d, IRect } from './types';
-import { DD } from './DragAndDrop';
+import { DD } from './DragAndDrop.js';
 import {
   getNumberValidator,
   getStringValidator,
   getBooleanValidator,
-} from './Validators';
-import { Stage } from './Stage';
-import { Context } from './Context';
-import { Shape } from './Shape';
-import { Layer } from './Layer';
+} from './Validators.js';
+import { Stage } from './Stage.js';
+import { Context } from './Context.js';
+import { Shape } from './Shape.js';
+import { Layer } from './Layer.js';
 
 export const ids: any = {};
 export const names: any = {};
@@ -227,10 +227,6 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return false;
   }
 
-  getChildren() {
-    return emptyChildren;
-  }
-
   _clearCache(attr?: string) {
     // if we want to clear transform cache
     // we don't really need to remove it from the cache
@@ -264,7 +260,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return cache;
   }
 
-  _calculate(name, deps, getter) {
+  _calculate(name: string, deps: Array<string>, getter: Function) {
     // if we are trying to calculate function for the first time
     // we need to attach listeners for change events
     if (!this._attachedDepsListeners.get(name)) {
@@ -285,7 +281,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * when the logic for a cached result depends on ancestor propagation, use this
    * method to clear self and children cache
    */
-  _clearSelfAndDescendantCache(attr?: string, forceEvent?: boolean) {
+  _clearSelfAndDescendantCache(attr?: string) {
     this._clearCache(attr);
     // trigger clear cache, so transformer can use it
     if (attr === ABSOLUTE_TRANSFORM) {
@@ -587,7 +583,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       0,
       0,
       hitCanvas.width / hitCanvas.pixelRatio,
-      hitCanvas.height / hitCanvas.pixelRatio,
+      hitCanvas.height / hitCanvas.pixelRatio
     );
     context.restore();
   }
@@ -1010,7 +1006,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   isListening() {
     return this._getCache(LISTENING, this._isListening);
   }
-  _isListening(relativeTo?: Node) {
+  _isListening(relativeTo?: Node): boolean {
     const listening = this.listening();
     if (!listening) {
       return false;
@@ -1039,7 +1035,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   isVisible() {
     return this._getCache(VISIBLE, this._isVisible);
   }
-  _isVisible(relativeTo) {
+  _isVisible(relativeTo?: Node): boolean {
     const visible = this.visible();
     if (!visible) {
       return false;
@@ -1171,7 +1167,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     this._needClearTransformCache = false;
   }
 
-  setPosition(pos) {
+  setPosition(pos: Vector2d) {
     this._batchTransformChanges(() => {
       this.x(pos.x);
       this.y(pos.y);
@@ -1199,7 +1195,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // so stage transforms are ignored
    * node.getAbsolutePosition(stage)
    */
-  getAbsolutePosition(top?) {
+  getAbsolutePosition(top?: Node) {
     let haveCachedParent = false;
     let parent = this.parent;
     while (parent) {
@@ -1224,7 +1220,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
 
     return absoluteTransform.getTranslation();
   }
-  setAbsolutePosition(pos) {
+  setAbsolutePosition(pos: Vector2d) {
     var origTrans = this._clearTransform();
 
     // don't clear translation
@@ -1300,7 +1296,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   y: 2
    * });
    */
-  move(change) {
+  move(change: Vector2d) {
     var changeX = change.x,
       changeY = change.y,
       x = this.x(),
@@ -1350,7 +1346,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @param {Number} theta
    * @returns {Konva.Node}
    */
-  rotate(theta) {
+  rotate(theta: number) {
     this.rotation(this.rotation() + theta);
     return this;
   }
@@ -1479,7 +1475,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // move node from current layer into layer2
    * node.moveTo(layer2);
    */
-  moveTo(newContainer) {
+  moveTo(newContainer: Container) {
     // do nothing if new container is already parent
     if (this.getParent() !== newContainer) {
       this._remove();
@@ -1557,7 +1553,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // get one of the parent group
    * var parentGroups = node.findAncestors('Group');
    */
-  findAncestors(selector, includeSelf?, stopNode?) {
+  findAncestors(selector: string, includeSelf?: boolean, stopNode?: Container) {
     var res: Array<Node> = [];
 
     if (includeSelf && this._isMatch(selector)) {
@@ -1575,7 +1571,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     }
     return res;
   }
-  isAncestorOf(node) {
+  isAncestorOf(node: Node) {
     return false;
   }
   /**
@@ -1590,11 +1586,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // get one of the parent group
    * var group = node.findAncestors('.mygroup');
    */
-  findAncestor(selector?: string, includeSelf?: boolean, stopNode?: Node) {
+  findAncestor(selector?: string, includeSelf?: boolean, stopNode?: Container) {
     return this.findAncestors(selector, includeSelf, stopNode)[0];
   }
   // is current node match passed selector?
-  _isMatch(selector) {
+  _isMatch(selector: string | Function) {
     if (!selector) {
       return false;
     }
@@ -1687,7 +1683,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // fire click event that bubbles
    * node.fire('click', null, true);
    */
-  fire(eventType, evt: any = {}, bubble?) {
+  fire(eventType: string, evt: any = {}, bubble?: boolean) {
     evt.target = evt.target || this;
     // bubble
     if (bubble) {
@@ -1768,7 +1764,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // get absolute scale x
    * var scaleX = node.getAbsoluteScale().x;
    */
-  getAbsoluteScale(top?) {
+  getAbsoluteScale(top?: Node) {
     // do not cache this calculations,
     // because it use cache transform
     // this is special logic for caching with some shapes with shadow
@@ -1872,7 +1868,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   x: 5
    * });
    */
-  clone(obj?) {
+  clone(obj?: any) {
     // instantiate new node
     var attrs = Util.cloneObject(this.attrs),
       key,
@@ -2071,7 +2067,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   getType() {
     return this.nodeType;
   }
-  getDragDistance() {
+  getDragDistance(): number {
     // compare with undefined because we need to track 0 value
     if (this.attrs.dragDistance !== undefined) {
       return this.attrs.dragDistance;
@@ -2435,11 +2431,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       this._lastPos.y !== newNodePos.y
     ) {
       this.setAbsolutePosition(newNodePos);
-      if (this.getLayer()) {
-        this.getLayer().batchDraw();
-      } else if (this.getStage()) {
-        this.getStage().batchDraw();
-      }
+      this._requestDraw();
     }
 
     this._lastPos = newNodePos;
@@ -2632,7 +2624,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       obj.attrs.container = container;
     }
 
-    if (!_NODES_REGISTRY[className]) {
+    if (!Konva[className]) {
       Util.warn(
         'Can not find a node with class name "' +
           className +
@@ -2641,7 +2633,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       className = 'Shape';
     }
 
-    const Class = _NODES_REGISTRY[className];
+    const Class = Konva[className];
 
     no = new Class(obj.attrs);
     if (children) {

src/PointerEvents.ts

@@ -1,8 +1,8 @@
-import { KonvaEventObject } from './Node';
-import { Konva } from './Global';
+import { KonvaEventObject } from './Node.js';
+import { Konva } from './Global.js';
 
-import { Shape } from './Shape';
-import { Stage } from './Stage';
+import { Shape } from './Shape.js';
+import { Stage } from './Stage.js';
 
 const Captures = new Map<number, Shape | Stage>();
 
@@ -21,7 +21,7 @@ export function getCapturedShape(pointerId: number) {
 export function createEvent(evt: PointerEvent): KonvaPointerEvent {
   return {
     evt,
-    pointerId: evt.pointerId
+    pointerId: evt.pointerId,
   } as any;
 }
 

src/Shape.ts

@@ -1,20 +1,20 @@
-import { Util } from './Util';
-import { Factory } from './Factory';
-import { Node, NodeConfig } from './Node';
+import { Util } from './Util.js';
+import { Factory } from './Factory.js';
+import { Node, NodeConfig } from './Node.js';
 import {
   getNumberValidator,
   getNumberOrAutoValidator,
   getStringValidator,
   getBooleanValidator,
   getStringOrGradientValidator,
-} from './Validators';
+} from './Validators.js';
 
-import { Context, SceneContext } from './Context';
-import { _registerNode } from './Global';
-import * as PointerEvents from './PointerEvents';
+import { Context, SceneContext } from './Context.js';
+import { _registerNode } from './Global.js';
+import * as PointerEvents from './PointerEvents.js';
 
 import { GetSet, Vector2d } from './types';
-import { HitCanvas, SceneCanvas } from './Canvas';
+import { HitCanvas, SceneCanvas } from './Canvas.js';
 
 // hack from here https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133#52668133
 export type ShapeConfigHandler<TTarget> = {
@@ -202,6 +202,7 @@ export class Shape<
    * @name Konva.Shape#getContext
    * @returns {Konva.Context}
    */
+  // TODO: remove method
   getContext() {
     return this.getLayer().getContext();
   }
@@ -211,6 +212,7 @@ export class Shape<
    * @name Konva.Shape#getCanvas
    * @returns {Konva.Canvas}
    */
+  // TODO: remove method
   getCanvas() {
     return this.getLayer().getCanvas();
   }

src/Stage.ts

@@ -1,14 +1,14 @@
-import { Util } from './Util';
-import { Factory } from './Factory';
-import { Container, ContainerConfig } from './Container';
-import { Konva } from './Global';
-import { SceneCanvas, HitCanvas } from './Canvas';
+import { Util } from './Util.js';
+import { Factory } from './Factory.js';
+import { Container, ContainerConfig } from './Container.js';
+import { Konva } from './Global.js';
+import { SceneCanvas, HitCanvas } from './Canvas.js';
 import { GetSet, Vector2d } from './types';
-import { Shape } from './Shape';
-import { Layer } from './Layer';
-import { DD } from './DragAndDrop';
-import { _registerNode } from './Global';
-import * as PointerEvents from './PointerEvents';
+import { Shape } from './Shape.js';
+import { Layer } from './Layer.js';
+import { DD } from './DragAndDrop.js';
+import { _registerNode } from './Global.js';
+import * as PointerEvents from './PointerEvents.js';
 
 export interface StageConfig extends ContainerConfig {
   container: HTMLDivElement | string;
@@ -464,10 +464,7 @@ export class Stage extends Container<Layer> {
     this._fire(CONTENT_MOUSEOUT, { evt: evt });
   }
   _mousemove(evt) {
-    // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
-    if (Konva.UA.ieMobile) {
-      return this._touchmove(evt);
-    }
+
     this.setPointersPositions(evt);
     var pointerId = Util._getFirstPointerId(evt);
     var targetShape = this.targetShape?.getStage() ? this.targetShape : null;
@@ -535,10 +532,6 @@ export class Stage extends Container<Layer> {
     }
   }
   _mousedown(evt) {
-    // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
-    if (Konva.UA.ieMobile) {
-      return this._touchstart(evt);
-    }
     this.setPointersPositions(evt);
     var pointerId = Util._getFirstPointerId(evt);
     var shape = this.getIntersection(this.getPointerPosition()) as Shape;
@@ -569,10 +562,6 @@ export class Stage extends Container<Layer> {
     // }
   }
   _mouseup(evt) {
-    // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
-    if (Konva.UA.ieMobile) {
-      return this._touchend(evt);
-    }
     this.setPointersPositions(evt);
     var pointerId = Util._getFirstPointerId(evt);
     var shape = this.getIntersection(this.getPointerPosition()) as Shape,

src/Tween.ts

@@ -1,7 +1,7 @@
-import { Util } from './Util';
-import { Animation } from './Animation';
-import { Node, NodeConfig } from './Node';
-import { Konva } from './Global';
+import { Util } from './Util.js';
+import { Animation } from './Animation.js';
+import { Node, NodeConfig } from './Node.js';
+import { Konva } from './Global.js';
 import { Line } from './shapes/Line';
 
 var blacklist = {

src/Util.ts

@@ -1,4 +1,4 @@
-import { Konva } from './Global';
+import { Konva } from './Global.js';
 import { IRect, RGB, RGBA, Vector2d } from './types';
 
 /*

src/Validators.ts

@@ -1,5 +1,5 @@
-import { Konva } from './Global';
-import { Util } from './Util';
+import { Konva } from './Global.js';
+import { Util } from './Util.js';
 
 function _formatValue(val: any) {
   if (Util._isString(val)) {

src/_CoreInternals.ts

@@ -1,26 +1,26 @@
 // what is core parts of Konva?
-import { Konva as Global } from './Global';
+import { Konva as Global } from './Global.js';
 
-import { Util, Transform } from './Util';
-import { Node, ids, names } from './Node';
-import { Container } from './Container';
+import { Util, Transform } from './Util.js';
+import { Node, ids, names } from './Node.js';
+import { Container } from './Container.js';
 
-import { Stage, stages } from './Stage';
+import { Stage, stages } from './Stage.js';
 
-import { Layer } from './Layer';
-import { FastLayer } from './FastLayer';
+import { Layer } from './Layer.js';
+import { FastLayer } from './FastLayer.js';
 
-import { Group } from './Group';
+import { Group } from './Group.js';
 
-import { DD } from './DragAndDrop';
+import { DD } from './DragAndDrop.js';
 
-import { Shape, shapes } from './Shape';
+import { Shape, shapes } from './Shape.js';
 
-import { Animation } from './Animation';
-import { Tween, Easings } from './Tween';
+import { Animation } from './Animation.js';
+import { Tween, Easings } from './Tween.js';
 
-import { Context } from './Context';
-import { Canvas } from './Canvas';
+import { Context } from './Context.js';
+import { Canvas } from './Canvas.js';
 
 export const Konva = Util._assign(Global, {
   Util,

src/_FullInternals.ts

@@ -1,46 +1,46 @@
 // we need to import core of the Konva and then extend it with all additional objects
 
-import { Konva as Core } from './_CoreInternals';
+import { Konva as Core } from './_CoreInternals.js';
 
 // shapes
-import { Arc } from './shapes/Arc';
-import { Arrow } from './shapes/Arrow';
-import { Circle } from './shapes/Circle';
-import { Ellipse } from './shapes/Ellipse';
-import { Image } from './shapes/Image';
-import { Label, Tag } from './shapes/Label';
-import { Line } from './shapes/Line';
-import { Path } from './shapes/Path';
-import { Rect } from './shapes/Rect';
-import { RegularPolygon } from './shapes/RegularPolygon';
-import { Ring } from './shapes/Ring';
-import { Sprite } from './shapes/Sprite';
-import { Star } from './shapes/Star';
-import { Text } from './shapes/Text';
-import { TextPath } from './shapes/TextPath';
-import { Transformer } from './shapes/Transformer';
-import { Wedge } from './shapes/Wedge';
+import { Arc } from './shapes/Arc.js';
+import { Arrow } from './shapes/Arrow.js';
+import { Circle } from './shapes/Circle.js';
+import { Ellipse } from './shapes/Ellipse.js';
+import { Image } from './shapes/Image.js';
+import { Label, Tag } from './shapes/Label.js';
+import { Line } from './shapes/Line.js';
+import { Path } from './shapes/Path.js';
+import { Rect } from './shapes/Rect.js';
+import { RegularPolygon } from './shapes/RegularPolygon.js';
+import { Ring } from './shapes/Ring.js';
+import { Sprite } from './shapes/Sprite.js';
+import { Star } from './shapes/Star.js';
+import { Text } from './shapes/Text.js';
+import { TextPath } from './shapes/TextPath.js';
+import { Transformer } from './shapes/Transformer.js';
+import { Wedge } from './shapes/Wedge.js';
 
 // filters
-import { Blur } from './filters/Blur';
-import { Brighten } from './filters/Brighten';
-import { Contrast } from './filters/Contrast';
-import { Emboss } from './filters/Emboss';
-import { Enhance } from './filters/Enhance';
-import { Grayscale } from './filters/Grayscale';
-import { HSL } from './filters/HSL';
-import { HSV } from './filters/HSV';
-import { Invert } from './filters/Invert';
-import { Kaleidoscope } from './filters/Kaleidoscope';
-import { Mask } from './filters/Mask';
-import { Noise } from './filters/Noise';
-import { Pixelate } from './filters/Pixelate';
-import { Posterize } from './filters/Posterize';
-import { RGB } from './filters/RGB';
-import { RGBA } from './filters/RGBA';
-import { Sepia } from './filters/Sepia';
-import { Solarize } from './filters/Solarize';
-import { Threshold } from './filters/Threshold';
+import { Blur } from './filters/Blur.js';
+import { Brighten } from './filters/Brighten.js';
+import { Contrast } from './filters/Contrast.js';
+import { Emboss } from './filters/Emboss.js';
+import { Enhance } from './filters/Enhance.js';
+import { Grayscale } from './filters/Grayscale.js';
+import { HSL } from './filters/HSL.js';
+import { HSV } from './filters/HSV.js';
+import { Invert } from './filters/Invert.js';
+import { Kaleidoscope } from './filters/Kaleidoscope.js';
+import { Mask } from './filters/Mask.js';
+import { Noise } from './filters/Noise.js';
+import { Pixelate } from './filters/Pixelate.js';
+import { Posterize } from './filters/Posterize.js';
+import { RGB } from './filters/RGB.js';
+import { RGBA } from './filters/RGBA.js';
+import { Sepia } from './filters/Sepia.js';
+import { Solarize } from './filters/Solarize.js';
+import { Threshold } from './filters/Threshold.js';
 
 export const Konva = Core.Util._assign(Core, {
   Arc,

src/filters/Blur.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 /*
  the Gauss filter
  master repo: https://github.com/pavelpower/kineticjsGaussFilter
@@ -309,7 +309,7 @@ var mul_table = [
   265,
   263,
   261,
-  259
+  259,
 ];
 
 var shg_table = [
@@ -567,7 +567,7 @@ var shg_table = [
   24,
   24,
   24,
-  24
+  24,
 ];
 
 function filterGaussBlurRGBA(imageData, radius) {

src/filters/Brighten.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 /**
  * Brighten Filter.
@@ -12,7 +12,7 @@ import { getNumberValidator } from '../Validators';
  * node.filters([Konva.Filters.Brighten]);
  * node.brightness(0.8);
  */
-export const Brighten: Filter = function(imageData) {
+export const Brighten: Filter = function (imageData) {
   var brightness = this.brightness() * 255,
     data = imageData.data,
     len = data.length,

src/filters/Contrast.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 /**
  * Contrast Filter.
  * @function
@@ -12,7 +12,7 @@ import { getNumberValidator } from '../Validators';
  * node.contrast(10);
  */
 
-export const Contrast: Filter = function(imageData) {
+export const Contrast: Filter = function (imageData) {
   var adjust = Math.pow((this.contrast() + 100) / 100, 2);
 
   var data = imageData.data,

src/filters/Emboss.ts

@@ -1,7 +1,7 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { Util } from '../Util';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { Util } from '../Util.js';
+import { getNumberValidator } from '../Validators.js';
 /**
  * Emboss Filter.
  * Pixastic Lib - Emboss filter - v0.1.0
@@ -18,7 +18,7 @@ import { getNumberValidator } from '../Validators';
  * node.embossDirection('right');
  * node.embossBlend(true);
  */
-export const Emboss: Filter = function(imageData) {
+export const Emboss: Filter = function (imageData) {
   // pixastic strength is between 0 and 10.  I want it between 0 and 1
   // pixastic greyLevel is between 0 and 255.  I want it between 0 and 1.  Also,
   // a max value of greyLevel yields a white emboss, and the min value yields a black

src/filters/Enhance.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 function remap(fromValue, fromMin, fromMax, toMin, toMax) {
   // Compute the range of the data
@@ -37,7 +37,7 @@ function remap(fromValue, fromMin, fromMax, toMin, toMax) {
  * node.filters([Konva.Filters.Enhance]);
  * node.enhance(0.4);
  */
-export const Enhance: Filter = function(imageData) {
+export const Enhance: Filter = function (imageData) {
   var data = imageData.data,
     nSubPixels = data.length,
     rMin = data[0],

src/filters/Grayscale.ts

@@ -1,4 +1,4 @@
-import { Filter } from '../Node';
+import { Filter } from '../Node.js';
 
 /**
  * Grayscale Filter
@@ -9,7 +9,7 @@ import { Filter } from '../Node';
  * node.cache();
  * node.filters([Konva.Filters.Grayscale]);
  */
-export const Grayscale: Filter = function(imageData) {
+export const Grayscale: Filter = function (imageData) {
   var data = imageData.data,
     len = data.length,
     i,

src/filters/HSL.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 Factory.addGetterSetter(
   Node,
@@ -58,7 +58,7 @@ Factory.addGetterSetter(
  * image.luminance(0.2);
  */
 
-export const HSL: Filter = function(imageData) {
+export const HSL: Filter = function (imageData) {
   var data = imageData.data,
     nPixels = data.length,
     v = 1,

src/filters/HSV.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 /**
  * HSV Filter. Adjusts the hue, saturation and value
@@ -14,7 +14,7 @@ import { getNumberValidator } from '../Validators';
  * image.value(200);
  */
 
-export const HSV: Filter = function(imageData) {
+export const HSV: Filter = function (imageData) {
   var data = imageData.data,
     nPixels = data.length,
     v = Math.pow(2, this.value()),

src/filters/Invert.ts

@@ -1,4 +1,4 @@
-import { Filter } from '../Node';
+import { Filter } from '../Node.js';
 /**
  * Invert Filter
  * @function
@@ -8,7 +8,7 @@ import { Filter } from '../Node';
  * node.cache();
  * node.filters([Konva.Filters.Invert]);
  */
-export const Invert: Filter = function(imageData) {
+export const Invert: Filter = function (imageData) {
   var data = imageData.data,
     len = data.length,
     i;

src/filters/Kaleidoscope.ts

@@ -1,7 +1,7 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { Util } from '../Util';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { Util } from '../Util.js';
+import { getNumberValidator } from '../Validators.js';
 
 /*
  * ToPolar Filter. Converts image data to polar coordinates. Performs
@@ -19,7 +19,7 @@ import { getNumberValidator } from '../Validators';
  *  default is in the middle
  */
 
-var ToPolar = function(src, dst, opt) {
+var ToPolar = function (src, dst, opt) {
   var srcPixels = src.data,
     dstPixels = dst.data,
     xSize = src.width,
@@ -96,7 +96,7 @@ var ToPolar = function(src, dst, opt) {
  *  0 is no rotation, 360 degrees is a full rotation
  */
 
-var FromPolar = function(src, dst, opt) {
+var FromPolar = function (src, dst, opt) {
   var srcPixels = src.data,
     dstPixels = dst.data,
     xSize = src.width,
@@ -177,7 +177,7 @@ var FromPolar = function(src, dst, opt) {
  * node.kaleidoscopePower(3);
  * node.kaleidoscopeAngle(45);
  */
-export const Kaleidoscope: Filter = function(imageData) {
+export const Kaleidoscope: Filter = function (imageData) {
   var xSize = imageData.width,
     ySize = imageData.height;
 
@@ -201,7 +201,7 @@ export const Kaleidoscope: Filter = function(imageData) {
   // Convert thhe original to polar coordinates
   ToPolar(imageData, scratchData, {
     polarCenterX: xSize / 2,
-    polarCenterY: ySize / 2
+    polarCenterY: ySize / 2,
   });
 
   // Determine how big each section will be, if it's too small

src/filters/Mask.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 function pixelAt(idata, x, y) {
   var idx = (y * idata.width + x) * 4;
@@ -60,7 +60,7 @@ function backgroundMask(idata, threshold) {
       var d = rgbDistance(mean, [
         idata.data[i * 4],
         idata.data[i * 4 + 1],
-        idata.data[i * 4 + 2]
+        idata.data[i * 4 + 2],
       ]);
       mask[i] = d < thres ? 0 : 255;
     }
@@ -179,7 +179,7 @@ function smoothEdgeMask(mask, sw, sh) {
  * node.filters([Konva.Filters.Mask]);
  * node.threshold(200);
  */
-export const Mask: Filter = function(imageData) {
+export const Mask: Filter = function (imageData) {
   // Detect pixels close to the background color
   var threshold = this.threshold(),
     mask = backgroundMask(imageData, threshold);

src/filters/Noise.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 /**
  * Noise Filter. Randomly adds or substracts to the color channels
@@ -14,7 +14,7 @@ import { getNumberValidator } from '../Validators';
  * node.filters([Konva.Filters.Noise]);
  * node.noise(0.8);
  */
-export const Noise: Filter = function(imageData) {
+export const Noise: Filter = function (imageData) {
   var amount = this.noise() * 255,
     data = imageData.data,
     nPixels = data.length,

src/filters/Pixelate.ts

@@ -1,8 +1,8 @@
 /*eslint-disable max-depth */
-import { Factory } from '../Factory';
-import { Util } from '../Util';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Util } from '../Util.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 
 /**
  * Pixelate Filter. Averages groups of pixels and redraws
@@ -18,7 +18,7 @@ import { getNumberValidator } from '../Validators';
  * node.pixelSize(10);
  */
 
-export const Pixelate: Filter = function(imageData) {
+export const Pixelate: Filter = function (imageData) {
   var pixelSize = Math.ceil(this.pixelSize()),
     width = imageData.width,
     height = imageData.height,

src/filters/Posterize.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 /**
  * Posterize Filter. Adjusts the channels so that there are no more
  *  than n different values for that channel. This is also applied
@@ -16,7 +16,7 @@ import { getNumberValidator } from '../Validators';
  * node.levels(0.8); // between 0 and 1
  */
 
-export const Posterize: Filter = function(imageData) {
+export const Posterize: Filter = function (imageData) {
   // level must be between 1 and 255
   var levels = Math.round(this.levels() * 254) + 1,
     data = imageData.data,

src/filters/RGB.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { RGBComponent } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { RGBComponent } from '../Validators.js';
 
 /**
  * RGB Filter
@@ -16,7 +16,7 @@ import { RGBComponent } from '../Validators';
  * node.green(200);
  */
 
-export const RGB: Filter = function(imageData) {
+export const RGB: Filter = function (imageData) {
   var data = imageData.data,
     nPixels = data.length,
     red = this.red(),
@@ -35,7 +35,7 @@ export const RGB: Filter = function(imageData) {
   }
 };
 
-Factory.addGetterSetter(Node, 'red', 0, function(val) {
+Factory.addGetterSetter(Node, 'red', 0, function (val) {
   this._filterUpToDate = false;
   if (val > 255) {
     return 255;
@@ -54,7 +54,7 @@ Factory.addGetterSetter(Node, 'red', 0, function(val) {
  * @returns {Integer}
  */
 
-Factory.addGetterSetter(Node, 'green', 0, function(val) {
+Factory.addGetterSetter(Node, 'green', 0, function (val) {
   this._filterUpToDate = false;
   if (val > 255) {
     return 255;

src/filters/RGBA.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { RGBComponent } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { RGBComponent } from '../Validators.js';
 
 /**
  * RGBA Filter
@@ -17,7 +17,7 @@ import { RGBComponent } from '../Validators';
  * node.alpha(0.3);
  */
 
-export const RGBA: Filter = function(imageData) {
+export const RGBA: Filter = function (imageData) {
   var data = imageData.data,
     nPixels = data.length,
     red = this.red(),
@@ -36,7 +36,7 @@ export const RGBA: Filter = function(imageData) {
   }
 };
 
-Factory.addGetterSetter(Node, 'red', 0, function(val) {
+Factory.addGetterSetter(Node, 'red', 0, function (val) {
   this._filterUpToDate = false;
   if (val > 255) {
     return 255;
@@ -55,7 +55,7 @@ Factory.addGetterSetter(Node, 'red', 0, function(val) {
  * @returns {Integer}
  */
 
-Factory.addGetterSetter(Node, 'green', 0, function(val) {
+Factory.addGetterSetter(Node, 'green', 0, function (val) {
   this._filterUpToDate = false;
   if (val > 255) {
     return 255;
@@ -84,7 +84,7 @@ Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
  * @returns {Integer}
  */
 
-Factory.addGetterSetter(Node, 'alpha', 1, function(val) {
+Factory.addGetterSetter(Node, 'alpha', 1, function (val) {
   this._filterUpToDate = false;
   if (val > 1) {
     return 1;

src/filters/Sepia.ts

@@ -1,4 +1,4 @@
-import { Filter } from '../Node';
+import { Filter } from '../Node.js';
 
 // based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
 
@@ -11,7 +11,7 @@ import { Filter } from '../Node';
  * node.cache();
  * node.filters([Konva.Filters.Sepia]);
  */
-export const Sepia: Filter = function(imageData) {
+export const Sepia: Filter = function (imageData) {
   var data = imageData.data,
     nPixels = data.length,
     i,

src/filters/Solarize.ts

@@ -1,4 +1,4 @@
-import { Filter } from '../Node';
+import { Filter } from '../Node.js';
 /**
  * Solarize Filter
  * Pixastic Lib - Solarize filter - v0.1.0
@@ -13,7 +13,7 @@ import { Filter } from '../Node';
  * node.filters([Konva.Filters.Solarize]);
  */
 
-export const Solarize: Filter = function(imageData) {
+export const Solarize: Filter = function (imageData) {
   var data = imageData.data,
     w = imageData.width,
     h = imageData.height,

src/filters/Threshold.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Node, Filter } from '../Node';
-import { getNumberValidator } from '../Validators';
+import { Factory } from '../Factory.js';
+import { Node, Filter } from '../Node.js';
+import { getNumberValidator } from '../Validators.js';
 /**
  * Threshold Filter. Pushes any value above the mid point to
  *  the max and any value below the mid point to the min.
@@ -16,7 +16,7 @@ import { getNumberValidator } from '../Validators';
  * node.threshold(0.1);
  */
 
-export const Threshold: Filter = function(imageData) {
+export const Threshold: Filter = function (imageData) {
   var level = this.threshold() * 255,
     data = imageData.data,
     len = data.length,

src/index-node.ts

@@ -1,5 +1,5 @@
 // main entry for umd build for rollup
-import { Konva } from './_FullInternals';
+import { Konva } from './_FullInternals.js';
 import * as canvas from 'canvas';
 
 const isNode = typeof global.document === 'undefined';

src/shapes/Arc.ts

@@ -1,9 +1,9 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Konva } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Konva } from '../Global.js';
 import { GetSet } from '../types';
-import { getNumberValidator, getBooleanValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { getNumberValidator, getBooleanValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 export interface ArcConfig extends ShapeConfig {
   angle: number;

src/shapes/Arrow.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Line, LineConfig } from './Line';
+import { Factory } from '../Factory.js';
+import { Line, LineConfig } from './Line.js';
 import { GetSet } from '../types';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 export interface ArrowConfig extends LineConfig {
   points: number[];

src/shapes/Circle.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
 import { GetSet } from '../types';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 export interface CircleConfig extends ShapeConfig {
   radius?: number;

src/shapes/Ellipse.ts

@@ -1,7 +1,7 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet, Vector2d } from '../types';
 

src/shapes/Image.ts

@@ -1,11 +1,11 @@
-import { Util } from '../Util';
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet, IRect } from '../types';
-import { Context } from '../Context';
+import { Context } from '../Context.js';
 
 export interface ImageConfig extends ShapeConfig {
   image: CanvasImageSource | undefined;

src/shapes/Label.ts

@@ -1,15 +1,15 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Group } from '../Group';
-import { ContainerConfig } from '../Container';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Group } from '../Group.js';
+import { ContainerConfig } from '../Container.js';
 import {
   getNumberOrArrayOfNumbersValidator,
   getNumberValidator,
-} from '../Validators';
-import { _registerNode } from '../Global';
+} from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
-import { Text } from './Text';
+import { Text } from './Text.js';
 
 export interface LabelConfig extends ContainerConfig {}
 

src/shapes/Line.ts

@@ -1,11 +1,11 @@
-import { Util } from '../Util';
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { getNumberValidator, getNumberArrayValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { getNumberValidator, getNumberArrayValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
-import { Context } from '../Context';
+import { Context } from '../Context.js';
 
 export interface LineConfig extends ShapeConfig {
   points?: number[];

src/shapes/Path.ts

@@ -1,6 +1,6 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
 

src/shapes/Rect.ts

@@ -1,9 +1,9 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
-import { getNumberOrArrayOfNumbersValidator } from '../Validators';
+import { getNumberOrArrayOfNumbersValidator } from '../Validators.js';
 export interface RectConfig extends ShapeConfig {
   cornerRadius?: number | number[];
 }

src/shapes/RegularPolygon.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
 import { GetSet } from '../types';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 export interface RegularPolygonConfig extends ShapeConfig {
   sides: number;

src/shapes/Ring.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
 import { GetSet } from '../types';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 export interface RingConfig extends ShapeConfig {
   innerRadius: number;

src/shapes/Sprite.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Animation } from '../Animation';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Animation } from '../Animation.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
 

src/shapes/Star.ts

@@ -1,7 +1,7 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
 

src/shapes/Text.ts

@@ -1,14 +1,14 @@
-import { Util } from '../Util';
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Konva } from '../Global';
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Konva } from '../Global.js';
 import {
   getNumberValidator,
   getStringValidator,
   getNumberOrAutoValidator,
   getBooleanValidator,
-} from '../Validators';
-import { _registerNode } from '../Global';
+} from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
 
@@ -379,20 +379,6 @@ export class Text extends Shape<TextConfig> {
     };
   }
   _getContextFont() {
-    // IE don't want to work with usual font style
-    // bold was not working
-    // removing font variant will solve
-    // fix for: https://github.com/konvajs/konva/issues/94
-    if (Konva.UA.isIE) {
-      return (
-        this.fontStyle() +
-        SPACE +
-        this.fontSize() +
-        PX_SPACE +
-        this.fontFamily()
-      );
-    }
-
     return (
       this.fontStyle() +
       SPACE +

src/shapes/TextPath.ts

@@ -1,10 +1,10 @@
-import { Util } from '../Util';
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Path } from './Path';
-import { Text, stringToArray } from './Text';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Util } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Path } from './Path.js';
+import { Text, stringToArray } from './Text.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet, Vector2d } from '../types';
 

src/shapes/Transformer.ts

@@ -1,13 +1,13 @@
-import { Util, Transform } from '../Util';
-import { Factory } from '../Factory';
-import { Node } from '../Node';
-import { Shape } from '../Shape';
-import { Rect } from './Rect';
-import { Group } from '../Group';
-import { ContainerConfig } from '../Container';
-import { Konva } from '../Global';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Util, Transform } from '../Util.js';
+import { Factory } from '../Factory.js';
+import { Node } from '../Node.js';
+import { Shape } from '../Shape.js';
+import { Rect } from './Rect.js';
+import { Group } from '../Group.js';
+import { ContainerConfig } from '../Container.js';
+import { Konva } from '../Global.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet, IRect, Vector2d } from '../types';
 

src/shapes/Wedge.ts

@@ -1,8 +1,8 @@
-import { Factory } from '../Factory';
-import { Shape, ShapeConfig } from '../Shape';
-import { Konva } from '../Global';
-import { getNumberValidator } from '../Validators';
-import { _registerNode } from '../Global';
+import { Factory } from '../Factory.js';
+import { Shape, ShapeConfig } from '../Shape.js';
+import { Konva } from '../Global.js';
+import { getNumberValidator } from '../Validators.js';
+import { _registerNode } from '../Global.js';
 
 import { GetSet } from '../types';
 

test/import-test.js

@@ -1,29 +1,25 @@
-// TODO: restore
-// function equal(val1, val2, message) {
-//   if (val1 !== val2) {
-//     throw new Error('Not passed: ' + message);
-//   }
-// }
+function equal(val1, val2, message) {
+  if (val1 !== val2) {
+    throw new Error('Not passed: ' + message);
+  }
+}
 
-// // try to import only core
-// let { Konva } = require('../lib/Core');
+// try to import only core
+import Konva from '../lib/Core.js';
 
-// // no external shapes
+// no external shapes
 // equal(Konva.Rect, undefined, 'no external shapes');
 
-// let Rect = require('../lib/shapes/Rect').Rect;
+import { Rect } from '../lib/shapes/Rect.js';
 
-// equal(Rect !== undefined, true, 'Rect is defined');
+equal(Rect !== undefined, true, 'Rect is defined');
 
-// equal(Konva.Rect, Rect, 'Rect is injected');
+equal(Konva.Rect, Rect, 'Rect is injected');
 
-// // now import from package.json
-// const oldKonva = Konva;
-// Konva = require('../');
+import Konva2 from '../lib/index-node.js';
 
-// equal(Konva.Rect, Rect, 'Same rects');
+equal(Konva2.Rect, Rect, 'Rect is injected');
 
-// // check global injection
-// equal(global.Konva, Konva, 'injected');
+equal(Konva2, Konva, 'Same Konva');
 
-// equal(Konva, oldKonva, 'Full package is the same as core.');
+console.log('Import tests are passed.');

test/manual/Blur-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Blur', function () {
   // ======================================================

test/manual/Brighten-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Brighten', function () {
   // ======================================================

test/manual/Contrast-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Filter Contrast', function () {
   // ======================================================

test/manual/Emboss-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Emboss', function () {
   // ======================================================

test/manual/Enhance-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Enhance', function () {
   // ======================================================

test/manual/Filter-test.ts

@@ -1,4 +1,4 @@
-import { addStage, Konva, cloneAndCompareLayer } from '../unit/utis';
+import { addStage, Konva, cloneAndCompareLayer } from '../unit/test-utils';
 
 describe('Filter', function () {
   it('pixelRaio check', function () {

test/manual/Grayscale-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Grayscale', function () {
   // ======================================================

test/manual/HSL-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('HSL', function () {
   // ======================================================

test/manual/HSV-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('HSV', function () {
   // ======================================================

test/manual/Invert-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Invert', function () {
   // ======================================================

test/manual/Kaleidoscope-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Kaleidoscope', function () {
   // ======================================================

test/manual/Manual-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Manual', function () {
   // ======================================================

test/manual/Mask-test.ts

@@ -1,4 +1,4 @@
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Mask', function () {
   // ======================================================

test/manual/Noise-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Noise', function () {
   // ======================================================

test/manual/Pixelate-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Pixelate', function () {
   // ======================================================

test/manual/Posterize-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Posterize', function () {
   // ======================================================

test/manual/RGB-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('RGB', function () {
   // ======================================================

test/manual/RGBA-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('RGBA', function () {
   // ======================================================

test/manual/Sepia-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Filter Sepia', function () {
   // ======================================================

test/manual/Solarize-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Solarize', function () {
   // ======================================================

test/manual/Threshold-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, loadImage } from '../unit/utis';
+import { addStage, Konva, loadImage } from '../unit/test-utils';
 
 describe('Threshold', function () {
   // ======================================================

test/unit/Animation-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva } from './utis';
+import { addStage, Konva } from './test-utils';
 
 describe('Animation', function () {
   // ======================================================

test/unit/Arc-test.ts

@@ -1,6 +1,11 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, createCanvas, compareLayerAndCanvas } from './utis';
+import {
+  addStage,
+  Konva,
+  createCanvas,
+  compareLayerAndCanvas,
+} from './test-utils';
 
 describe('Arc', function () {
   // ======================================================

test/unit/Arrow-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, cloneAndCompareLayer } from './utis';
+import { addStage, Konva, cloneAndCompareLayer } from './test-utils';
 
 describe('Arrow', function () {
   // ======================================================

test/unit/AutoDraw-test.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { addStage, isNode, Konva } from './utis';
+import { addStage, isNode, Konva } from './test-utils';
 
 describe('AutoDraw', function () {
   // ======================================================

test/unit/Blob-test.ts

@@ -1,7 +1,7 @@
 import { assert } from 'chai';
 import { Line } from '../../src/shapes/Line';
 
-import { addStage, Konva, cloneAndCompareLayer } from './utis';
+import { addStage, Konva, cloneAndCompareLayer } from './test-utils';
 
 describe('Blob', function () {
   // ======================================================

test/unit/Canvas-test.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { addStage, Konva } from './utis';
+import { addStage, Konva } from './test-utils';
 
 describe('Canvas', function () {
   // ======================================================

test/unit/Circle-test.ts

@@ -6,7 +6,7 @@ import {
   createCanvas,
   compareLayerAndCanvas,
   loadImage,
-} from './utis';
+} from './test-utils';
 
 describe('Circle', function () {
   // ======================================================

test/unit/Container-test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
-import { Shape } from '../../src/Shape';
-import { addStage, Konva, compareLayers } from './utis';
+import { Shape } from '../../src/Shape.js';
+import { addStage, Konva, compareLayers } from './test-utils';
 
 describe('Container', function () {
   // ======================================================

test/unit/Context-test.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { addStage, Konva } from './utis';
+import { addStage, Konva } from './test-utils';
 
 describe('Context', function () {
   // ======================================================

test/unit/DragAndDrop-test.ts

@@ -8,7 +8,7 @@ import {
   simulateTouchStart,
   simulateTouchEnd,
   simulateTouchMove,
-} from './utis';
+} from './test-utils';
 
 describe('DragAndDrop', function () {
   // ======================================================

test/unit/DragAndDropEvents-test.ts

@@ -6,7 +6,7 @@ import {
   simulateMouseDown,
   simulateMouseMove,
   simulateMouseUp,
-} from './utis';
+} from './test-utils';
 
 describe('DragAndDropEvents', function () {
   // ======================================================

test/unit/Ellipse-test.ts

@@ -1,6 +1,11 @@
 import { assert } from 'chai';
 
-import { addStage, Konva, createCanvas, compareLayerAndCanvas } from './utis';
+import {
+  addStage,
+  Konva,
+  createCanvas,
+  compareLayerAndCanvas,
+} from './test-utils';
 
 describe('Ellipse', function () {
   // ======================================================

test/unit/Global-test.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { Konva } from './utis';
+import { Konva } from './test-utils';
 
 describe('Global', function () {
   // ======================================================
@@ -19,73 +19,4 @@ describe('Global', function () {
     // set angleDeg back to true for future tests
     Konva.angleDeg = true;
   });
-
-  // ======================================================
-  it('UA tests', function () {
-    var ua;
-
-    // Chrome 34.0.1847.137 m
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'
-    );
-
-    assert.equal(ua.browser, 'chrome');
-    assert.equal(ua.mobile, false);
-    assert.equal(ua.version, '34.0.1847.137');
-    assert.equal(ua.ieMobile, false);
-
-    // Internet Explorer 9
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)'
-    );
-    assert.equal(ua.browser, 'msie');
-    assert.equal(ua.mobile, false);
-    assert.equal(ua.version, '9.0');
-    assert.equal(ua.ieMobile, false);
-
-    // Internet Explorer 10
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)'
-    );
-    assert.equal(ua.browser, 'msie');
-    assert.equal(ua.mobile, false);
-    assert.equal(ua.version, '10.0');
-    assert.equal(ua.ieMobile, false);
-
-    // Internet Explorer 10 Mobile (Windows Phone 8)
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)'
-    );
-    assert.equal(ua.browser, 'msie');
-    assert.equal(ua.mobile, true);
-    assert.equal(ua.version, '10.0');
-    assert.equal(ua.ieMobile, true); // <-- forces Konva mouse events to be Konva touch events instead
-
-    // Internet Explorer 11 Mobile (Windows Phone 8.1)
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0; NOKIA; Lumia 928) like Gecko'
-    );
-    assert.equal(ua.browser, 'mozilla');
-    assert.equal(ua.mobile, true);
-    assert.equal(ua.version, '11');
-    assert.equal(ua.ieMobile, true); // <-- forces Konva mouse events to be Konva touch events instead
-
-    // Internet Explorer 11 on 64-bit Windows 8.1 with Update
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko'
-    );
-    assert.equal(ua.browser, 'mozilla');
-    assert.equal(ua.mobile, false);
-    assert.equal(ua.version, '11.0');
-    assert.equal(ua.ieMobile, false);
-
-    // Windows 8.1 with Update HTML/JS appx
-    ua = Konva._parseUA(
-      'Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; MSAppHost/2.0; rv:11.0) like Gecko'
-    );
-    assert.equal(ua.browser, 'mozilla');
-    assert.equal(ua.mobile, false);
-    assert.equal(ua.version, '11.0');
-    assert.equal(ua.ieMobile, false);
-  });
 });