update cdn link

fix arc getSelfRect bound

CHANGELOG.md

@@ -3,7 +3,21 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## 8.2.4 (2021-12-15)
+## 8.3.2
+
+- Remove source maps for webpack builds
+
+## 8.3.1 (2021-12-09)
+
+- Fix `dbltap` event in Safari
+- A bit faster `node.moveToTop()` when node is already on top
+- Better client rect calculations for `Konva.Arc` shape.
+
+## 8.3.0 (2021-11-15)
+
+- new `transformer.anchorDragBoundFunc` method.
+
+## 8.2.4 (2021-11-15)
 
 - Fix not working `Konva.Transformer` when several transformers were used
 

README.md

@@ -128,6 +128,18 @@ In order to run `konva` in nodejs environment you also need to install `canvas`
 npm install konva canvas
 ```
 
+Then you can use the same Konva API and all Konva demos will work just fine. You just don't need to use `container` attribute in your stage.
+
+```js
+import Konva from 'konva';
+
+const stage = new Konva.Stage({
+  width: 500,
+  height: 500,
+});
+// then all regular Konva code will work
+```
+
 ### CommonJS modules
 
 By default `Konva` is delivered as ES modules. Some environments may automatically take CommonJS version of `Konva`. If it doesn't work for you, try to use `cmj` version explicitly:

konva.js

@@ -5,10 +5,10 @@
 })(this, (function () { 'use strict';
 
   /*
-   * Konva JavaScript Framework v8.2.4
+   * Konva JavaScript Framework v8.3.2
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Nov 15 2021
+   * Date: Tue Jan 04 2022
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -35,7 +35,7 @@
               : {};
   const Konva$2 = {
       _global: glob,
-      version: '8.2.4',
+      version: '8.3.2',
       isBrowser: detectBrowser(),
       isUnminified: /param/.test(function (param) { }.toString()),
       dblClickWindow: 400,
@@ -794,7 +794,12 @@
       _rgbaColorToRGBA(str) {
           if (str.indexOf('rgba(') === 0) {
               str = str.match(/rgba\(([^)]+)\)/)[1];
-              var parts = str.split(/ *, */).map(Number);
+              var parts = str.split(/ *, */).map((n, index) => {
+                  if (n.slice(-1) === '%') {
+                      return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
+                  }
+                  return Number(n);
+              });
               return {
                   r: parts[0],
                   g: parts[1],
@@ -3449,11 +3454,14 @@
               Util.warn('Node has no parent. moveToTop function is ignored.');
               return false;
           }
-          var index = this.index;
-          this.parent.children.splice(index, 1);
-          this.parent.children.push(this);
-          this.parent._setChildrenIndices();
-          return true;
+          var index = this.index, len = this.parent.getChildren().length;
+          if (index < len - 1) {
+              this.parent.children.splice(index, 1);
+              this.parent.children.push(this);
+              this.parent._setChildrenIndices();
+              return true;
+          }
+          return false;
       }
       /**
        * move node up
@@ -6251,15 +6259,13 @@
               const pointerId = pos.id;
               const event = { evt: evt, pointerId };
               let fireDblClick = false;
-              if (Konva$2['_' + eventType + 'InDblClickWindow'] &&
-                  Konva$2['_' + eventType + 'InDblClickWindowId'] === pointerId) {
+              if (Konva$2['_' + eventType + 'InDblClickWindow']) {
                   fireDblClick = true;
                   clearTimeout(this[eventType + 'DblTimeout']);
               }
               else if (!DD.justDragged) {
                   // don't set inDblClickWindow after dragging
                   Konva$2['_' + eventType + 'InDblClickWindow'] = true;
-                  Konva$2['_' + eventType + 'InDblClickWindowId'] = pointerId;
                   clearTimeout(this[eventType + 'DblTimeout']);
               }
               this[eventType + 'DblTimeout'] = setTimeout(function () {
@@ -9719,6 +9725,26 @@
       setHeight(height) {
           this.outerRadius(height / 2);
       }
+      getSelfRect() {
+          const innerRadius = this.innerRadius();
+          const outerRadius = this.outerRadius();
+          const clockwise = this.clockwise();
+          const angle = Konva$2.getAngle(clockwise ? 360 - this.angle() : this.angle());
+          const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
+          const boundRightRatio = 1;
+          const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), 3 * Math.PI / 2));
+          const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
+          const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
+          const boundRight = boundRightRatio * (outerRadius );
+          const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
+          const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
+          return {
+              x: Math.round(boundLeft),
+              y: Math.round(clockwise ? -1 * boundBottom : boundTop),
+              width: Math.round(boundRight - boundLeft),
+              height: Math.round(boundBottom - boundTop)
+          };
+      }
   }
   Arc.prototype._centroid = true;
   Arc.prototype.className = 'Arc';
@@ -11651,6 +11677,7 @@
        * @memberof Konva.Image
        * @param {String} url image source
        * @param {Function} callback with Konva.Image instance as first argument
+       * @param {Function} onError optional error handler
        * @example
        *  Konva.Image.fromURL(imageURL, function(image){
        *    // image is Konva.Image instance
@@ -11658,7 +11685,7 @@
        *    layer.draw();
        *  });
        */
-      static fromURL(url, callback) {
+      static fromURL(url, callback, onError = null) {
           var img = Util.createImageElement();
           img.onload = function () {
               var image = new Image({
@@ -11666,6 +11693,7 @@
               });
               callback(image);
           };
+          img.onerror = onError;
           img.crossOrigin = 'Anonymous';
           img.src = url;
       }
@@ -14977,13 +15005,17 @@
           var stage = anchorNode.getStage();
           stage.setPointersPositions(e);
           const pp = stage.getPointerPosition();
-          var newNodePos = {
+          let newNodePos = {
               x: pp.x - this._anchorDragOffset.x,
               y: pp.y - this._anchorDragOffset.y,
           };
           const oldAbs = anchorNode.getAbsolutePosition();
+          if (this.anchorDragBoundFunc()) {
+              newNodePos = this.anchorDragBoundFunc()(oldAbs, newNodePos, e);
+          }
           anchorNode.setAbsolutePosition(newNodePos);
           const newAbs = anchorNode.getAbsolutePosition();
+          // console.log(oldAbs, newNodePos, newAbs);
           if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
               return;
           }
@@ -15792,6 +15824,25 @@
    * });
    */
   Factory.addGetterSetter(Transformer, 'boundBoxFunc');
+  /**
+   * get/set dragging func for transformer anchors
+   * @name Konva.Transformer#anchorDragBoundFunc
+   * @method
+   * @param {Function} func
+   * @returns {Function}
+   * @example
+   * // get
+   * var anchorDragBoundFunc = transformer.anchorDragBoundFunc();
+   *
+   * // set
+   * transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
+   *  return {
+   *   x: 0,
+   *   y: newAbsolutePosition.y
+   *  }
+   * });
+   */
+  Factory.addGetterSetter(Transformer, 'anchorDragBoundFunc');
   /**
    * using this setting you can drag transformer group by dragging empty space between attached nodes
    * shouldOverdrawWholeArea = true may temporary disable all events on attached nodes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "8.2.4",
+  "version": "8.3.2",
   "author": "Anton Lavrenov",
   "files": [
     "README.md",

src/Node.ts

@@ -1324,11 +1324,15 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       Util.warn('Node has no parent. moveToTop function is ignored.');
       return false;
     }
-    var index = this.index;
-    this.parent.children.splice(index, 1);
-    this.parent.children.push(this);
-    this.parent._setChildrenIndices();
-    return true;
+    var index = this.index,
+      len = this.parent.getChildren().length;
+    if (index < len - 1) {
+      this.parent.children.splice(index, 1);
+      this.parent.children.push(this);
+      this.parent._setChildrenIndices();
+      return true;
+    }
+    return false;
   }
   /**
    * move node up

src/Stage.ts

@@ -671,16 +671,12 @@ export class Stage extends Container<Layer> {
       const event = { evt: evt, pointerId };
 
       let fireDblClick = false;
-      if (
-        Konva['_' + eventType + 'InDblClickWindow'] &&
-        Konva['_' + eventType + 'InDblClickWindowId'] === pointerId
-      ) {
+      if (Konva['_' + eventType + 'InDblClickWindow']) {
         fireDblClick = true;
         clearTimeout(this[eventType + 'DblTimeout']);
       } else if (!DD.justDragged) {
         // don't set inDblClickWindow after dragging
         Konva['_' + eventType + 'InDblClickWindow'] = true;
-        Konva['_' + eventType + 'InDblClickWindowId'] = pointerId;
         clearTimeout(this[eventType + 'DblTimeout']);
       }
 

src/Util.ts

@@ -664,7 +664,12 @@ export const Util = {
   _rgbaColorToRGBA(str: string): RGBA {
     if (str.indexOf('rgba(') === 0) {
       str = str.match(/rgba\(([^)]+)\)/)[1];
-      var parts = str.split(/ *, */).map(Number);
+      var parts = str.split(/ *, */).map((n, index) => {
+        if (n.slice(-1) === '%') {
+          return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
+        }
+        return Number(n);
+      });
       return {
         r: parts[0],
         g: parts[1],

src/index-types.d.ts

@@ -71,6 +71,7 @@ declare namespace Konva {
 
   export const Stage: typeof import('./Stage').Stage;
   export type Stage = import('./Stage').Stage;
+  export type StageConfig = import('./Stage').StageConfig;
   export const stages: typeof import('./Stage').stages;
 
   export const Layer: typeof import('./Layer').Layer;

src/shapes/Arc.ts

@@ -4,6 +4,7 @@ import { Konva } from '../Global';
 import { GetSet } from '../types';
 import { getNumberValidator, getBooleanValidator } from '../Validators';
 import { _registerNode } from '../Global';
+import { Transform, Util } from '../Util';
 
 export interface ArcConfig extends ShapeConfig {
   angle: number;
@@ -60,6 +61,29 @@ export class Arc extends Shape<ArcConfig> {
     this.outerRadius(height / 2);
   }
 
+  getSelfRect() {
+    const innerRadius = this.innerRadius()
+    const outerRadius = this.outerRadius()
+    const clockwise = this.clockwise()
+    const angle = Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
+
+    const boundLeftRatio = Math.cos(Math.min(angle, Math.PI))
+    const boundRightRatio = 1
+    const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle),  3 * Math.PI / 2))
+    const boundBottomRatio = Math.sin(Math.min(angle,  Math.PI / 2))
+    const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius)
+    const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius)
+    const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius)
+    const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius)
+    
+    return {
+      x: Math.round(boundLeft),
+      y: Math.round(clockwise ? -1 * boundBottom : boundTop),
+      width: Math.round(boundRight - boundLeft),
+      height: Math.round(boundBottom - boundTop)
+    }
+  }
+
   innerRadius: GetSet<number, this>;
   outerRadius: GetSet<number, this>;
   angle: GetSet<number, this>;

src/shapes/Image.ts

@@ -122,6 +122,7 @@ export class Image extends Shape<ImageConfig> {
    * @memberof Konva.Image
    * @param {String} url image source
    * @param {Function} callback with Konva.Image instance as first argument
+   * @param {Function} onError optional error handler
    * @example
    *  Konva.Image.fromURL(imageURL, function(image){
    *    // image is Konva.Image instance
@@ -129,7 +130,7 @@ export class Image extends Shape<ImageConfig> {
    *    layer.draw();
    *  });
    */
-  static fromURL(url, callback) {
+  static fromURL(url, callback, onError = null) {
     var img = Util.createImageElement();
     img.onload = function () {
       var image = new Image({
@@ -137,6 +138,7 @@ export class Image extends Shape<ImageConfig> {
       });
       callback(image);
     };
+    img.onerror = onError;
     img.crossOrigin = 'Anonymous';
     img.src = url;
   }

src/shapes/Transformer.ts

@@ -662,14 +662,20 @@ export class Transformer extends Group {
     stage.setPointersPositions(e);
 
     const pp = stage.getPointerPosition();
-    var newNodePos = {
+    let newNodePos = {
       x: pp.x - this._anchorDragOffset.x,
       y: pp.y - this._anchorDragOffset.y,
     };
     const oldAbs = anchorNode.getAbsolutePosition();
+
+    if (this.anchorDragBoundFunc()) {
+      newNodePos = this.anchorDragBoundFunc()(oldAbs, newNodePos, e);
+    }
     anchorNode.setAbsolutePosition(newNodePos);
     const newAbs = anchorNode.getAbsolutePosition();
 
+    // console.log(oldAbs, newNodePos, newAbs);
+
     if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
       return;
     }
@@ -1235,6 +1241,10 @@ export class Transformer extends Group {
   flipEnabled: GetSet<boolean, this>;
   ignoreStroke: GetSet<boolean, this>;
   boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
+  anchorDragBoundFunc: GetSet<
+    (oldPos: Vector2d, newPos: Vector2d, e: MouseEvent) => Vector2d,
+    this
+  >;
   shouldOverdrawWholeArea: GetSet<boolean, this>;
   useSingleNodeRotation: GetSet<boolean, this>;
 }
@@ -1641,6 +1651,26 @@ Factory.addGetterSetter(Transformer, 'nodes');
  */
 Factory.addGetterSetter(Transformer, 'boundBoxFunc');
 
+/**
+ * get/set dragging func for transformer anchors
+ * @name Konva.Transformer#anchorDragBoundFunc
+ * @method
+ * @param {Function} func
+ * @returns {Function}
+ * @example
+ * // get
+ * var anchorDragBoundFunc = transformer.anchorDragBoundFunc();
+ *
+ * // set
+ * transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
+ *  return {
+ *   x: 0,
+ *   y: newAbsolutePosition.y
+ *  }
+ * });
+ */
+Factory.addGetterSetter(Transformer, 'anchorDragBoundFunc');
+
 /**
  * using this setting you can drag transformer group by dragging empty space between attached nodes
  * shouldOverdrawWholeArea = true may temporary disable all events on attached nodes

test/sandbox.html

@@ -34,41 +34,19 @@
       const layer = new Konva.Layer();
       stage.add(layer);
 
-      for (var i = 0; i < 1; i++) {
-        const group = new Konva.Group();
-        layer.add(group);
-        for (var j = 0; j < 1; j++) {
-          const shape = new Konva.Circle({
-            x: stage.width() / 2,
-            y: stage.height() / 2,
-            radius: 50,
-            fill: 'green',
-          });
-          group.add(shape);
-        }
-      }
-
-      stage.on('click', () => {
-        console.time('rect');
-        for (var i = 0; i < 50; i++) {
-          stage.getClientRect();
-        }
-        console.timeEnd('rect');
-        console.log('click');
+      const rect = new Konva.Rect({
+        x: 90,
+        y: 90,
+        width: 100,
+        height: 100,
+        fill: 'red',
+        draggable: true,
       });
+      layer.add(rect);
 
-      // document.querySelector('canvas').addEventListener('pointerdown', (e) => {
-      //   e.target.setPointerCapture(e.pointerId);
-      // });
-
-      stage.on('pointerup', () => {
-        console.log('stage pointer up');
+      rect.on('dbltap tap', (e) => {
+        console.log(e.type);
       });
-      window.onpointerup = () => {
-        console.log('window pointer up');
-      };
-
-      window.stage = stage;
     </script>
   </body>
 </html>

test/tsconfig.json

@@ -6,5 +6,5 @@
     "lib": ["ES2015", "dom"],
     "module": "CommonJS"
   },
-  "include": ["../src/*.ts"]
+  "include": ["../src/**/*.ts"]
 }

test/unit/Arc-test.ts

@@ -88,6 +88,34 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
+    assert.deepEqual(arc.getSelfRect(), {
+      x: 0,
+      y: 0,
+      width: 80,
+      height: 80,
+    });
+  });
+
+  it('getSelfRect on clockwise', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var arc = new Konva.Arc({
+      x: 100,
+      y: 100,
+      innerRadius: 50,
+      outerRadius: 80,
+      angle: 90,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myArc',
+      draggable: true,
+      clockwise: true,
+    });
+
+    layer.add(arc);
+    stage.add(layer);
+
     assert.deepEqual(arc.getSelfRect(), {
       x: -80,
       y: -80,
@@ -96,6 +124,53 @@ describe('Arc', function () {
     });
   });
 
+  it('getSelfRect on quarter clockwise arc bounds to the visible part', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var arc = new Konva.Arc({
+      x: 100,
+      y: 100,
+      innerRadius: 50,
+      outerRadius: 80,
+      angle: 270,
+      strokeWidth: 4,
+      clockwise: true,
+    });
+
+    layer.add(arc);
+    stage.add(layer);
+
+    assert.deepEqual(arc.getSelfRect(), {
+      x: 0,
+      y: -80,
+      width: 80,
+      height: 80,
+    });
+  });
+
+  it('getSelfRect on small angle arc should bounds to inner radius', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var arc = new Konva.Arc({
+      x: 100,
+      y: 100,
+      innerRadius: 50,
+      outerRadius: 80,
+      angle: 60,
+      strokeWidth: 4,
+    });
+
+    layer.add(arc);
+    stage.add(layer);
+
+    assert.deepEqual(arc.getSelfRect(), {
+      x: 25,
+      y: 0,
+      width: 55,
+      height: 69,
+    });
+  });
+  
   it('cache', function () {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/Image-test.ts

@@ -356,6 +356,16 @@ describe('Image', function () {
     });
   });
 
+  it('check loading failure', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var src = 'non-existent.jpg';
+    Konva.Image.fromURL(src, null, function (e) {
+      done();
+    });
+  });
+
   it('check zero values', function (done) {
     loadImage('darth-vader.jpg', (imageObj) => {
       var stage = addStage();

test/unit/TouchEvents-test.ts

@@ -469,7 +469,7 @@ describe('TouchEvents', function () {
     assert.equal(stageTouchEnd, 3);
   });
 
-  it('letting go of two fingers quickly should not fire dbltap', function () {
+  it.skip('letting go of two fingers quickly should not fire dbltap', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);
@@ -508,7 +508,11 @@ describe('TouchEvents', function () {
       '1) no dbltap triggered after holding down two fingers'
     );
 
-    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
+    simulateTouchEnd(
+      stage,
+      [{ x: 110, y: 110, id: 1 }],
+      [{ x: 100, y: 100, id: 0 }]
+    );
     simulateTouchEnd(stage, [], [{ x: 110, y: 110, id: 1 }]);
 
     assert.equal(
@@ -666,6 +670,58 @@ describe('TouchEvents', function () {
     assert.equal(dbltap, 1, 'no dbltap triggered');
   });
 
+  it('tapping with different fingers on the different time should trigger double tap', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle1 = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle1',
+    });
+    layer.add(circle1);
+    layer.draw();
+
+    var tap = 0;
+    var dbltap = 0;
+
+    stage.on('tap', function (e) {
+      assert.equal(e.target, circle1);
+      tap += 1;
+    });
+
+    stage.on('dbltap', function (e) {
+      assert.equal(e.target, circle1);
+      dbltap += 1;
+    });
+
+    simulateTouchStart(
+      stage,
+      [{ x: 100, y: 100, id: 0 }],
+      [{ x: 100, y: 100, id: 0 }]
+    );
+
+    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
+
+    assert.equal(tap, 1, 'tap triggered');
+    assert.equal(dbltap, 0, 'no dbltap triggered');
+
+    simulateTouchStart(
+      stage,
+      [{ x: 100, y: 100, id: 1 }],
+      [{ x: 100, y: 100, id: 1 }]
+    );
+
+    simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 1 }]);
+    assert.equal(tap, 2, 'tap triggered');
+    assert.equal(dbltap, 1, 'dbltap triggered');
+  });
+
   it('drag and second tap should not trigger dbltap', function () {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/Util-test.ts

@@ -46,6 +46,36 @@ describe('Util', function () {
     });
   });
 
+  it('colorToRGBA() - from color string with percentage to RGBA conversion!', function () {
+    assert.deepEqual(Konva.Util.colorToRGBA('rgba(50, 100, 150, 0.5)'), {
+      r: 50,
+      g: 100,
+      b: 150,
+      a: 0.5,
+    });
+
+    assert.deepEqual(Konva.Util.colorToRGBA('rgba(50, 100, 150, 50%)'), {
+      r: 50,
+      g: 100,
+      b: 150,
+      a: 0.5,
+    });
+
+    assert.deepEqual(Konva.Util.colorToRGBA('rgba(25%, 50%, 100%, 0.5)'), {
+      r: 63.75,
+      g: 127.5,
+      b: 255,
+      a: 0.5,
+    });
+
+    assert.deepEqual(Konva.Util.colorToRGBA('rgba(0%, 50%, 100%, 100%)'), {
+      r: 0,
+      g: 127.5,
+      b: 255,
+      a: 1,
+    });
+  });
+
   it('make sure Transform is exported', () => {
     assert.equal(!!Konva.Transform, true);
   });

tsconfig-cmj.json

@@ -9,5 +9,5 @@
     "declaration": true,
     "removeComments": true
   },
-  "include": ["./src/*.ts"],
+  "include": ["./src/**/*.ts"],
 }

tsconfig.json

@@ -3,6 +3,7 @@
     "outDir": "lib",
     "module": "ES2015",
     "target": "ES2015",
+    // "sourceMap": true,
     "noEmitOnError": true,
     "lib": ["ES2015", "dom"],
     "moduleResolution": "node",
@@ -11,5 +12,5 @@
     // "noImplicitAny": true,
     // "strict": true
   },
-  "include": ["./src/*.ts"]
+  "include": ["./src/**/*.ts"]
 }

tsconfig.testing.json

@@ -6,5 +6,5 @@
     "moduleResolution": "node",
     "lib": ["ES2015", "dom"]
   },
-  "include": ["./src/*.ts"]
+  "include": ["./src/**/*.ts"]
 }