huge typescript fixes, remove Object.assign usage

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.1.7
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Mar 06 2019
+   * Date: Sun Mar 10 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -74,6 +74,10 @@
           : typeof WorkerGlobalScope !== 'undefined'
               ? self
               : {};
+  var Konva2;
+  (function (Konva2) {
+      Konva2.version = '3.1.7';
+  })(Konva2 || (Konva2 = {}));
   var Konva = {
       version: '3.1.7',
       isBrowser: detectBrowser(),
@@ -1060,6 +1064,13 @@
           }
           delete obj.visitedByCircularReferenceRemoval;
           return obj;
+      },
+      // very simplified version of Object.assign
+      _assign: function (target, source) {
+          for (var key in source) {
+              target[key] = source[key];
+          }
+          return target;
       }
   };
 
@@ -9102,7 +9113,7 @@
   };
 
   // what is core parts of Konva?
-  var Konva$1 = Object.assign(Konva, {
+  var Konva$1 = Util._assign(Konva, {
       Collection: Collection,
       Util: Util,
       Node: Node,
@@ -13265,9 +13276,9 @@
           });
           // update text data for certain attr changes
           _this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva', _this._setTextData);
-          if (config && config.getKerning) {
+          if (config && config['getKerning']) {
               Util.warn('getKerning TextPath API is deprecated. Please use "kerningFunc" instead.');
-              _this.kerningFunc(config.getKerning);
+              _this.kerningFunc(config['getKerning']);
           }
           _this._setTextData();
           return _this;
@@ -16998,7 +17009,7 @@
    */
 
   // we need to import core of the Konva and then extend it with all additional objects
-  var Konva$2 = Object.assign(Konva$1, {
+  var Konva$2 = Konva$1.Util._assign(Konva$1, {
       Arc: Arc,
       Arrow: Arrow,
       Circle: Circle,

package.json

@@ -21,8 +21,8 @@
     "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote",
     "tsc": "tsc -d --declarationDir ./types --removeComments --module CommonJS || echo \"tsc faild for some file(s).\"",
     "rollup": "rollup -c",
-    "clean": "rm -rf ./lib",
-    "compile": "npm run clean && npm run tsc && npm run rollup",
+    "clean": "rm -rf ./lib && rm -rf ./types",
+    "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./types && npm run rollup",
     "watch": "rollup -c -w"
   },
   "devDependencies": {

rollup.config.js

@@ -5,7 +5,7 @@ import typescript from 'rollup-plugin-typescript2';
 const pkg = require('./package.json');
 
 export default {
-  input: `src/_UMD.ts`,
+  input: `src/index-umd.ts`,
   output: [
     {
       file: 'konva.js',

src/BaseLayer.ts

@@ -1,5 +1,5 @@
 import { Util, Collection } from './Util';
-import { Container } from './Container';
+import { Container, ContainerConfig } from './Container';
 import { Node } from './Node';
 import { Factory } from './Factory';
 import { SceneCanvas, HitCanvas } from './Canvas';
@@ -7,6 +7,11 @@ import { Stage } from './Stage';
 
 import { GetSet } from './types';
 
+export interface LayerConfig extends ContainerConfig {
+  clearBeforeDraw?: boolean;
+  hitGraphEnabled?: boolean;
+}
+
 /**
  * BaseLayer constructor.
  * @constructor
@@ -24,7 +29,7 @@ export abstract class BaseLayer extends Container {
 
   _waitingForDraw = false;
 
-  constructor(config) {
+  constructor(config?: LayerConfig) {
     super(config);
     this.on('visibleChange', this._checkVisibility);
     this._checkVisibility();

src/Container.ts

@@ -1,11 +1,20 @@
 import { Util, Collection } from './Util';
 import { Factory } from './Factory';
-import { Node, ids, names } from './Node';
+import { Node, ids, names, NodeConfig } from './Node';
 import { DD } from './DragAndDrop';
 import { getNumberValidator } from './Validators';
 
 import { GetSet, IRect } from './types';
 
+export interface ContainerConfig extends NodeConfig {
+  clearBeforeDraw?: boolean;
+  clipFunc?: (ctx: CanvasRenderingContext2D) => void;
+  clipX?: number;
+  clipY?: number;
+  clipWidth?: number;
+  clipHeight?: number;
+}
+
 /**
  * Container constructor.  Containers are used to contain nodes or other containers
  * @constructor
@@ -16,7 +25,7 @@ import { GetSet, IRect } from './types';
  * @@nodeParams
  * @@containerParams
  */
-export abstract class Container extends Node {
+export abstract class Container extends Node<ContainerConfig> {
   children = new Collection();
 
   /**

src/Core.ts

@@ -1,3 +1,5 @@
+// enter file of limited Konva version with only core functions
+
 var Konva = require('./_CoreInternals').Konva;
 // add Konva to global variable
 Konva._injectGlobal(Konva);

src/Global.ts

@@ -86,6 +86,10 @@ export const glob: any =
     ? self
     : {};
 
+export namespace Konva2 {
+  export const version = '@@version';
+}
+
 export const Konva = {
   version: '@@version',
   isBrowser: detectBrowser(),

src/Node.ts

@@ -100,6 +100,31 @@ type globalCompositeOperationType =
   | 'color'
   | 'luminosity';
 
+export interface NodeConfig {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  visible?: boolean;
+  listening?: boolean;
+  id?: string;
+  name?: string;
+  opacity?: Number;
+  scale?: Vector2d;
+  scaleX?: number;
+  scaleY?: number;
+  rotation?: number;
+  rotationDeg?: number;
+  offset?: Vector2d;
+  offsetX?: number;
+  offsetY?: number;
+  draggable?: boolean;
+  dragDistance?: number;
+  dragBoundFunc?: (pos: Vector2d) => Vector2d;
+  preventDefault?: boolean;
+  globalCompositeOperation?: globalCompositeOperationType;
+}
+
 // CONSTANTS
 var ABSOLUTE_OPACITY = 'absoluteOpacity',
   ABSOLUTE_TRANSFORM = 'absoluteTransform',
@@ -145,7 +170,7 @@ let idCounter = 1;
  * @param {Object} config
  * @@nodeParams
  */
-export abstract class Node {
+export abstract class Node<Config extends NodeConfig = NodeConfig> {
   _id = idCounter++;
   eventListeners = {};
   attrs: any = {};
@@ -161,7 +186,7 @@ export abstract class Node {
   nodeType: string;
   className: string;
 
-  constructor(config) {
+  constructor(config?: Config) {
     this.setAttrs(config);
 
     // event bindings for cache handling

src/Shape.ts

@@ -1,16 +1,70 @@
 import { Util, Collection } from './Util';
 import { Factory } from './Factory';
-import { Node } from './Node';
+import { Node, NodeConfig } from './Node';
 import {
   getNumberValidator,
   getStringValidator,
   getBooleanValidator
 } from './Validators';
 
-import { GetSet, Vector2d } from './types';
 import { Context } from './Context';
 import { _registerNode } from './Global';
 
+import { GetSet, Vector2d } from './types';
+
+export interface ShapeConfig extends NodeConfig {
+  fill?: string;
+  fillPatternImage?: HTMLImageElement;
+  fillPatternX?: number;
+  fillPatternY?: number;
+  fillPatternOffset?: Vector2d;
+  fillPatternOffsetX?: number;
+  fillPatternOffsetY?: number;
+  fillPatternScale?: Vector2d;
+  fillPatternScaleX?: number;
+  fillPatternScaleY?: number;
+  fillPatternRotation?: number;
+  fillPatternRepeat?: string;
+  fillLinearGradientStartPoint?: Vector2d;
+  fillLinearGradientStartPointX?: number;
+  fillLinearGradientStartPointY?: number;
+  fillLinearGradientEndPoint?: Vector2d;
+  fillLinearGradientEndPointX?: number;
+  fillLinearGradientEndPointY?: number;
+  fillLinearGradientColorStops?: Array<number | string>;
+  fillRadialGradientStartPoint?: Vector2d;
+  fillRadialGradientStartPointX?: number;
+  fillRadialGradientStartPointY?: number;
+  fillRadialGradientEndPoint?: Vector2d;
+  fillRadialGradientEndPointX?: number;
+  fillRadialGradientEndPointY?: number;
+  fillRadialGradientStartRadius?: number;
+  fillRadialGradientEndRadius?: number;
+  fillRadialGradientColorStops?: Array<number | string>;
+  fillEnabled?: boolean;
+  fillPriority?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  strokeScaleEnabled?: boolean;
+  strokeHitEnabled?: boolean;
+  strokeEnabled?: boolean;
+  lineJoin?: string;
+  lineCap?: string;
+  sceneFunc?: (con: Context, shape: Shape) => void;
+  hitFunc?: (con: Context, shape: Shape) => void;
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffset?: Vector2d;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowOpacity?: number;
+  shadowEnabled?: boolean;
+  shadowForStrokeEnabled?: boolean;
+  dash?: number[];
+  dashEnabled?: boolean;
+  perfectDrawEnabled?: boolean;
+}
+
 var HAS_SHADOW = 'hasShadow';
 var SHADOW_RGBA = 'shadowRGBA';
 var patternImage = 'patternImage';
@@ -93,7 +147,9 @@ function _clearRadialGradientCache() {
  *   }
  *});
  */
-export class Shape extends Node {
+export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
+  Config
+> {
   _centroid: boolean;
   colorKey: string;
 
@@ -102,7 +158,7 @@ export class Shape extends Node {
   _fillFuncHit: (ctx: Context) => void;
   _strokeFuncHit: (ctx: Context) => void;
 
-  constructor(config) {
+  constructor(config?: Config) {
     super(config);
     // set colorKey
     var key;

src/Stage.ts

@@ -1,6 +1,6 @@
 import { Util, Collection } from './Util';
 import { Factory } from './Factory';
-import { Container } from './Container';
+import { Container, ContainerConfig } from './Container';
 import { Konva } from './Global';
 import { SceneCanvas, HitCanvas } from './Canvas';
 import { GetSet, Vector2d } from './types';
@@ -9,6 +9,10 @@ import { BaseLayer } from './BaseLayer';
 import { DD } from './DragAndDrop';
 import { _registerNode } from './Global';
 
+export interface StageConfig extends ContainerConfig {
+  container: HTMLDivElement | string;
+}
+
 // CONSTANTS
 var STAGE = 'Stage',
   STRING = 'string',
@@ -117,7 +121,7 @@ export class Stage extends Container {
 
   children: Collection<BaseLayer>;
 
-  constructor(config) {
+  constructor(config: StageConfig) {
     super(checkNoClip(config));
     this._buildDOM();
     this._bindContentEvents();

src/Util.ts

@@ -997,5 +997,12 @@ export const Util = {
     delete obj.visitedByCircularReferenceRemoval;
 
     return obj;
+  },
+  // very simplified version of Object.assign
+  _assign<T, U>(target: T, source: U) {
+    for (var key in source) {
+      (<any>target)[key] = source[key];
+    }
+    return target as T & U;
   }
 };

src/_CoreInternals.ts

@@ -1,5 +1,4 @@
 // what is core parts of Konva?
-
 import { Konva as Global } from './Global';
 
 import { Collection, Util } from './Util';
@@ -20,7 +19,9 @@ import { Shape, shapes } from './Shape';
 import { Animation } from './Animation';
 import { Tween, Easings } from './Tween';
 
-export const Konva = Object.assign(Global, {
+Object.assign;
+
+export const Konva = Util._assign(Global, {
   Collection,
   Util,
   Node,

src/_FullInternals.ts

@@ -42,7 +42,7 @@ import { Sepia } from './filters/Sepia';
 import { Solarize } from './filters/Solarize';
 import { Threshold } from './filters/Threshold';
 
-export const Konva = Object.assign(Core, {
+export const Konva = Core.Util._assign(Core, {
   Arc,
   Arrow,
   Circle,

src/index-types.d.ts

@@ -0,0 +1,159 @@
+// the purpose of that file is very stupid
+// I was not able to generate correct typescript declarations from the main source code
+// because right now Konva is an object. Typescript can not define types from object like this:
+// const stage : Konva.Stage = new Konva.Stage();
+// we can convert Konva to namespace
+// but I was not able to find a way to extend it
+// so here we just need to define full API of Konva manually
+
+// 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';
+
+declare namespace Konva {
+  export let pixelRatio: number;
+  export let dragDistance: number;
+  export let angleDeg: boolean;
+  export let showWarnings: boolean;
+  export let dragButtons: Array<number>;
+  export const isDragging: () => boolean;
+  export const isDragReady: () => boolean;
+
+  export const Node: typeof import('./Node').Node;
+  export type Node = import('./Node').Node;
+  export type NodeConfig = import('./Node').NodeConfig;
+
+  export const Container: typeof import('./Container').Container;
+  export type Container = import('./Container').Container;
+  export type ContainerConfig = import('./Container').ContainerConfig;
+
+  export const Collection: typeof import('./Util').Collection;
+  export type Collection<Node> = import('./Util').Collection<Node>;
+  export const Util: typeof import('./Util').Util;
+
+  export const Stage: typeof import('./Stage').Stage;
+  export type Stage = import('./Stage').Stage;
+  export const stages: typeof import('./Stage').stages;
+
+  export const Layer: typeof import('./Layer').Layer;
+  export type Layer = import('./Layer').Layer;
+  export type LayerConfig = import('./BaseLayer').LayerConfig;
+
+  export const FastLayer: typeof import('./FastLayer').FastLayer;
+  export type FastLayer = import('./FastLayer').FastLayer;
+
+  export const Group: typeof import('./Group').Group;
+  export type Group = import('./Group').Group;
+
+  export const DD: typeof import('./DragAndDrop').DD;
+
+  export const Shape: typeof import('./Shape').Shape;
+  export type Shape = import('./Shape').Shape;
+  export type ShapeConfig = import('./Shape').ShapeConfig;
+  export const shapes: typeof import('./Shape').shapes;
+
+  export const Animation: typeof import('./Animation').Animation;
+  export type Animation = import('./Animation').Animation;
+
+  export const Tween: typeof import('./Tween').Tween;
+  export type Tween = import('./Tween').Tween;
+  export const Easings: typeof import('./Tween').Easings;
+
+  export const Arc: typeof import('./shapes/Arc').Arc;
+  export type Arc = import('./shapes/Arc').Arc;
+  export type ArcConfig = import('./shapes/Arc').ArcConfig;
+  export const Arrow: typeof import('./shapes/Arrow').Arrow;
+  export type Arrow = import('./shapes/Arrow').Arrow;
+  export type ArrowConfig = import('./shapes/Arrow').ArrowConfig;
+  export const Circle: typeof import('./shapes/Circle').Circle;
+  export type Circle = import('./shapes/Circle').Circle;
+  export type CircleConfig = import('./shapes/Circle').CircleConfig;
+  export const Ellipse: typeof import('./shapes/Ellipse').Ellipse;
+  export type Ellipse = import('./shapes/Ellipse').Ellipse;
+  export type EllipseConfig = import('./shapes/Ellipse').EllipseConfig;
+  export const Image: typeof import('./shapes/Image').Image;
+  export type Image = import('./shapes/Image').Image;
+  export type ImageConfig = import('./shapes/Image').ImageConfig;
+  export const Label: typeof import('./shapes/Label').Label;
+  export type Label = import('./shapes/Label').Label;
+  export type LabelConfig = import('./shapes/Label').LabelConfig;
+  export const Tag: typeof import('./shapes/Label').Tag;
+  export type Tag = import('./shapes/Label').Tag;
+  export type TagConfig = import('./shapes/Label').TagConfig;
+  export const Line: typeof import('./shapes/Line').Line;
+  export type Line = import('./shapes/Line').Line;
+  export type LineConfig = import('./shapes/Line').LineConfig;
+  export const Path: typeof import('./shapes/Path').Path;
+  export type Path = import('./shapes/Path').Path;
+  export type PathConfig = import('./shapes/Path').PathConfig;
+  export const Rect: typeof import('./shapes/Rect').Rect;
+  export type Rect = import('./shapes/Rect').Rect;
+  export type RectConfig = import('./shapes/Rect').RectConfig;
+  export const RegularPolygon: typeof import('./shapes/RegularPolygon').RegularPolygon;
+  export type RegularPolygon = import('./shapes/RegularPolygon').RegularPolygon;
+  export type RegularPolygonConfig = import('./shapes/RegularPolygon').RegularPolygonConfig;
+  export const Ring: typeof import('./shapes/Ring').Ring;
+  export type Ring = import('./shapes/Ring').Ring;
+  export type RingConfig = import('./shapes/Ring').RingConfig;
+  export const Sprite: typeof import('./shapes/Sprite').Sprite;
+  export type Sprite = import('./shapes/Sprite').Sprite;
+  export type SpriteConfig = import('./shapes/Sprite').SpriteConfig;
+  export const Star: typeof import('./shapes/Star').Star;
+  export type Star = import('./shapes/Star').Star;
+  export type StarConfig = import('./shapes/Star').StarConfig;
+  export const Text: typeof import('./shapes/Text').Text;
+  export type Text = import('./shapes/Text').Text;
+  export type TextConfig = import('./shapes/Text').TextConfig;
+  export const TextPath: typeof import('./shapes/TextPath').TextPath;
+  export type TextPath = import('./shapes/TextPath').TextPath;
+  export type TextPathConfig = import('./shapes/TextPath').TextPathConfig;
+  export const Transformer: typeof import('./shapes/Transformer').Transformer;
+  export type Transformer = import('./shapes/Transformer').Transformer;
+  export type TransformerConfig = import('./shapes/Transformer').TransformerConfig;
+  export const Wedge: typeof import('./shapes/Wedge').Wedge;
+  export type Wedge = import('./shapes/Wedge').Wedge;
+  export type WedgeConfig = import('./shapes/Wedge').WedgeConfig;
+
+  export type KonvaEventObject<E> = import('./types').KonvaEventObject<E>;
+
+  export const Filters: {
+    Blur;
+    Brighten;
+    Contrast;
+    Emboss;
+    Enhance;
+    Grayscale;
+    HSL;
+    HSV;
+    Invert;
+    Kaleidoscope;
+    Mask;
+    Noise;
+    Pixelate;
+    Posterize;
+    RGB;
+    RGBA;
+    Sepia;
+    Solarize;
+    Threshold;
+  };
+}
+
+export default Konva;

src/index-types.ts

@@ -1,3 +0,0 @@
-import { Konva as Core } from './_FullInternals';
-
-export default Core;

src/index-umd.ts

@@ -1,6 +1,4 @@
 // main entry for umd build for rollup
-// and for typescript generation
-
 import { Konva } from './_FullInternals';
 
 export default Konva;

src/index.ts

@@ -1,3 +1,5 @@
+// main enter file of full Konva version
+
 var Konva = require('./_FullInternals').Konva;
 // add Konva to global variable
 Konva._injectGlobal(Konva);

src/shapes/Arc.ts

@@ -1,11 +1,18 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Konva } from '../Global';
 import { GetSet } from '../types';
 import { getNumberValidator, getBooleanValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
+export interface ArcConfig extends ShapeConfig {
+  angle: number;
+  innerRadius: number;
+  outerRadius: number;
+  clockwise?: boolean;
+}
+
 /**
  * Arc constructor
  * @constructor
@@ -30,7 +37,7 @@ import { _registerNode } from '../Global';
  *   rotationDeg: -120
  * });
  */
-export class Arc extends Shape {
+export class Arc extends Shape<ArcConfig> {
   _sceneFunc(context) {
     var angle = Konva.getAngle(this.angle()),
       clockwise = this.clockwise();

src/shapes/Arrow.ts

@@ -5,6 +5,17 @@ import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
+import { ShapeConfig } from '../Shape';
+
+export interface ArrowConfig extends ShapeConfig {
+  points: number[];
+  tension?: number;
+  closed?: boolean;
+  pointerLength?: number;
+  pointerWidth?: number;
+  pointerAtBeginning?: boolean;
+}
+
 /**
  * Arrow constructor
  * @constructor
@@ -28,7 +39,7 @@ import { _registerNode } from '../Global';
  *   pointerWidth : 12
  * });
  */
-export class Arrow extends Line {
+export class Arrow extends Line<ArrowConfig> {
   _sceneFunc(ctx) {
     super._sceneFunc(ctx);
     var PI2 = Math.PI * 2;

src/shapes/Circle.ts

@@ -1,10 +1,14 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
+export interface CircleConfig extends ShapeConfig {
+  radius: number;
+}
+
 /**
  * Circle constructor
  * @constructor
@@ -23,7 +27,7 @@ import { _registerNode } from '../Global';
  *   strokeWidth: 5
  * });
  */
-export class Circle extends Shape {
+export class Circle extends Shape<CircleConfig> {
   _sceneFunc(context) {
     context.beginPath();
     context.arc(0, 0, this.radius(), 0, Math.PI * 2, false);

src/shapes/Ellipse.ts

@@ -1,11 +1,16 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet, Vector2d } from '../types';
 
+export interface EllipseConfig extends ShapeConfig {
+  radiusX: number;
+  radiusY: number;
+}
+
 /**
  * Ellipse constructor
  * @constructor
@@ -23,7 +28,7 @@ import { GetSet, Vector2d } from '../types';
  *   } *   fill: 'red'
  * });
  */
-export class Ellipse extends Shape {
+export class Ellipse extends Shape<EllipseConfig> {
   _sceneFunc(context) {
     var rx = this.radiusX(),
       ry = this.radiusY();

src/shapes/Image.ts

@@ -1,13 +1,15 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet, IRect } from '../types';
 
-// CONSTANTS
-var IMAGE = 'Image';
+export interface ImageConfig extends ShapeConfig {
+  image: ImageBitmapSource;
+  crop?: IRect;
+}
 
 /**
  * Image constructor
@@ -32,7 +34,7 @@ var IMAGE = 'Image';
  * };
  * imageObj.src = '/path/to/image.jpg'
  */
-export class Image extends Shape {
+export class Image extends Shape<ImageConfig> {
   _useBufferCanvas() {
     return (
       (this.hasShadow() || this.getAbsoluteOpacity() !== 1) &&

src/shapes/Label.ts

@@ -1,12 +1,15 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Group } from '../Group';
+import { ContainerConfig } from '../Container';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface LabelConfig extends ContainerConfig {}
+
 // constants
 var ATTR_CHANGE_LIST = [
     'fontFamily',
@@ -170,6 +173,13 @@ _registerNode(Label);
 
 Collection.mapMethods(Label);
 
+export interface TagConfig extends ShapeConfig {
+  pointerDirection?: string;
+  pointerWidth?: number;
+  pointerHeight?: number;
+  cornerRadius?: number;
+}
+
 /**
  * Tag constructor.  A Tag can be configured
  *  to have a pointer element that points up, right, down, or left
@@ -182,7 +192,7 @@ Collection.mapMethods(Label);
  * @param {Number} [config.pointerHeight]
  * @param {Number} [config.cornerRadius]
  */
-export class Tag extends Shape {
+export class Tag extends Shape<TagConfig> {
   _sceneFunc(context) {
     var width = this.width(),
       height = this.height(),

src/shapes/Line.ts

@@ -1,11 +1,18 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator, getNumberArrayValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface LineConfig extends ShapeConfig {
+  points: number[];
+  tension?: number;
+  closed?: boolean;
+  bezier?: boolean;
+}
+
 /**
  * Line constructor.  Lines are defined by an array of points and
  *  a tension
@@ -30,8 +37,10 @@ import { GetSet } from '../types';
  * });
  */
 
-export class Line extends Shape {
-  constructor(config) {
+export class Line<Config extends LineConfig = LineConfig> extends Shape<
+  Config
+> {
+  constructor(config?: Config) {
     super(config);
     this.on(
       'pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva',

src/shapes/Path.ts

@@ -1,10 +1,13 @@
-import { Util, Collection } from '../Util';
+import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface PathConfig extends ShapeConfig {
+  data: string;
+}
 /**
  * Path constructor.
  * @author Jason Follas
@@ -25,11 +28,11 @@ import { GetSet } from '../types';
  *   scaleY: 2
  * });
  */
-export class Path extends Shape {
+export class Path extends Shape<PathConfig> {
   dataArray = [];
   pathLength = 0;
 
-  constructor(config) {
+  constructor(config?: PathConfig) {
     super(config);
     this.dataArray = Path.parsePathData(this.data());
     this.pathLength = 0;

src/shapes/Rect.ts

@@ -1,10 +1,13 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
+export interface RectConfig extends ShapeConfig {
+  cornerRadius?: number;
+}
 
 /**
  * Rect constructor
@@ -24,7 +27,7 @@ import { GetSet } from '../types';
  *   strokeWidth: 5
  * });
  */
-export class Rect extends Shape {
+export class Rect extends Shape<RectConfig> {
   _sceneFunc(context) {
     var cornerRadius = this.cornerRadius(),
       width = this.width(),

src/shapes/RegularPolygon.ts

@@ -1,10 +1,14 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
+export interface RegularPolygonConfig extends ShapeConfig {
+  sides: number;
+  radius: number;
+}
 /**
  * RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.
  * @constructor
@@ -26,7 +30,7 @@ import { _registerNode } from '../Global';
  *   strokeWidth: 4
  * });
  */
-export class RegularPolygon extends Shape {
+export class RegularPolygon extends Shape<RegularPolygonConfig> {
   _sceneFunc(context) {
     var sides = this.sides(),
       radius = this.radius(),
@@ -65,7 +69,7 @@ export class RegularPolygon extends Shape {
 RegularPolygon.prototype.className = 'RegularPolygon';
 RegularPolygon.prototype._centroid = true;
 RegularPolygon.prototype._attrsAffectingSize = ['radius'];
-_registerNode(RegularPolygon)
+_registerNode(RegularPolygon);
 
 /**
  * get/set radius

src/shapes/Ring.ts

@@ -1,10 +1,16 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
+export interface RingConfig extends ShapeConfig {
+  innerRadius: number;
+  outerRadius: number;
+  clockwise?: boolean;
+}
+
 var PIx2 = Math.PI * 2;
 /**
  * Ring constructor
@@ -26,7 +32,7 @@ var PIx2 = Math.PI * 2;
  *   strokeWidth: 5
  * });
  */
-export class Ring extends Shape {
+export class Ring extends Shape<RingConfig> {
   _sceneFunc(context) {
     context.beginPath();
     context.arc(0, 0, this.innerRadius(), 0, PIx2, false);

src/shapes/Sprite.ts

@@ -1,12 +1,20 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Animation } from '../Animation';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface SpriteConfig extends ShapeConfig {
+  animation: string;
+  animations: any;
+  frameIndex?: number;
+  image: HTMLImageElement;
+  frameRate?: number;
+}
+
 /**
  * Sprite constructor
  * @constructor
@@ -53,7 +61,7 @@ import { GetSet } from '../types';
  * };
  * imageObj.src = '/path/to/image.jpg'
  */
-export class Sprite extends Shape {
+export class Sprite extends Shape<SpriteConfig> {
   _updated = true;
   anim: Animation;
   interval: any;
@@ -216,7 +224,6 @@ export class Sprite extends Shape {
 Sprite.prototype.className = 'Sprite';
 _registerNode(Sprite);
 
-
 // add getters setters
 Factory.addGetterSetter(Sprite, 'animation');
 

src/shapes/Star.ts

@@ -1,11 +1,17 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface StarConfig extends ShapeConfig {
+  numPoints: number;
+  innerRadius: number;
+  outerRadius: number;
+}
+
 /**
  * Star constructor
  * @constructor
@@ -29,7 +35,7 @@ import { GetSet } from '../types';
  *   strokeWidth: 4
  * });
  */
-export class Star extends Shape {
+export class Star extends Shape<StarConfig> {
   _sceneFunc(context) {
     var innerRadius = this.innerRadius(),
       outerRadius = this.outerRadius(),

src/shapes/Text.ts

@@ -1,6 +1,6 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Konva } from '../Global';
 import {
   getNumberValidator,
@@ -11,6 +11,19 @@ import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface TextConfig extends ShapeConfig {
+  text?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: string;
+  align?: string;
+  verticalAlign?: string;
+  padding?: number;
+  lineHeight?: number;
+  wrap?: string;
+  ellipsis?: boolean;
+}
+
 // constants
 var AUTO = 'auto',
   //CANVAS = 'canvas',
@@ -111,7 +124,7 @@ function checkDefaultFill(config) {
  *   fill: 'green'
  * });
  */
-export class Text extends Shape {
+export class Text extends Shape<TextConfig> {
   textArr: Array<{ text: string; width: number }>;
   _partialText: string;
   _partialTextX = 0;
@@ -119,7 +132,7 @@ export class Text extends Shape {
 
   textWidth: number;
   textHeight: number;
-  constructor(config) {
+  constructor(config?: TextConfig) {
     super(checkDefaultFill(config));
     // update text data for certain attr changes
     for (var n = 0; n < attrChangeListLen; n++) {

src/shapes/TextPath.ts

@@ -1,6 +1,6 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Path } from './Path';
 import { Text } from './Text';
 import { getNumberValidator } from '../Validators';
@@ -8,6 +8,14 @@ import { _registerNode } from '../Global';
 
 import { GetSet, Vector2d } from '../types';
 
+export interface TextPathConfig extends ShapeConfig {
+  text?: string;
+  data?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontStyle?: string;
+}
+
 var EMPTY_STRING = '',
   NORMAL = 'normal';
 
@@ -62,7 +70,7 @@ function _strokeFunc(context) {
  *   }
  * });
  */
-export class TextPath extends Shape {
+export class TextPath extends Shape<TextPathConfig> {
   dummyCanvas = Util.createCanvasElement();
   dataArray = [];
   glyphInfo: Array<{
@@ -77,7 +85,7 @@ export class TextPath extends Shape {
   textWidth: number;
   textHeight: number;
 
-  constructor(config) {
+  constructor(config?: TextPathConfig) {
     // call super constructor
     super(config);
 
@@ -93,11 +101,11 @@ export class TextPath extends Shape {
       this._setTextData
     );
 
-    if (config && config.getKerning) {
+    if (config && config['getKerning']) {
       Util.warn(
         'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
       );
-      this.kerningFunc(config.getKerning);
+      this.kerningFunc(config['getKerning']);
     }
 
     this._setTextData();

src/shapes/Transformer.ts

@@ -4,12 +4,37 @@ 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 { GetSet, IRect } from '../types';
 
+interface Box extends IRect {
+  rotation: number;
+}
+
+export interface TransformerConfig extends ContainerConfig {
+  resizeEnabled?: boolean;
+  rotateEnabled?: boolean;
+  rotationSnaps?: Array<number>;
+  rotateAnchorOffset?: number;
+  borderEnabled?: boolean;
+  borderStroke?: string;
+  borderStrokeWidth?: number;
+  borderDash?: Array<number>;
+  anchorFill?: string;
+  anchorStroke?: string;
+  anchorStrokeWidth?: number;
+  anchorSize?: number;
+  keepRatio?: boolean;
+  centeredScaling?: boolean;
+  enabledAnchors?: Array<string>;
+  node?: Rect;
+  boundBoxFunc?: (oldBox: Box, newBox: Box) => Box;
+}
+
 var ATTR_CHANGE_LIST = [
   'resizeEnabledChange',
   'rotateAnchorOffsetChange',
@@ -155,7 +180,7 @@ export class Transformer extends Group {
   cos: number;
   _cursorChange: boolean;
 
-  constructor(config) {
+  constructor(config?: TransformerConfig) {
     // call super constructor
     super(config);
     this._createElements();

src/shapes/Wedge.ts

@@ -1,12 +1,18 @@
 import { Collection } from '../Util';
 import { Factory } from '../Factory';
-import { Shape } from '../Shape';
+import { Shape, ShapeConfig } from '../Shape';
 import { Konva } from '../Global';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
+export interface WedgeConfig extends ShapeConfig {
+  angle: number;
+  radius: number;
+  clockwise?: boolean;
+}
+
 /**
  * Wedge constructor
  * @constructor
@@ -29,7 +35,7 @@ import { GetSet } from '../types';
  *   rotationDeg: -120
  * });
  */
-export class Wedge extends Shape {
+export class Wedge extends Shape<WedgeConfig> {
   _sceneFunc(context) {
     context.beginPath();
     context.arc(

src/types.ts

@@ -1,3 +1,6 @@
+import { Shape } from './Shape';
+import { Stage } from './Stage';
+
 export interface GetSet<Type, This> {
   (this: This): Type;
   (this: This, v: Type): This;
@@ -14,3 +17,38 @@ export interface IRect {
   width: number;
   height: number;
 }
+
+export interface KonvaEventObject<E> {
+  target: Shape | Stage;
+  evt: E;
+  currentTarget: Node;
+  cancelBubble: boolean;
+}
+
+export type HandlerFunc<E = Event> = (e: KonvaEventObject<E>) => void;
+
+export enum KonvaNodeEvent {
+  mouseover = 'mouseover',
+  mouseout = 'mouseout',
+  mousemove = 'mousemove',
+  mouseleave = 'mouseleave',
+  mouseenter = 'mouseenter',
+  mousedown = 'mousedown',
+  mouseup = 'mouseup',
+  wheel = 'wheel',
+  contextmenu = 'contextmenu',
+  click = 'click',
+  dblclick = 'dblclick',
+  touchstart = 'touchstart',
+  touchmove = 'touchmove',
+  touchend = 'touchend',
+  tap = 'tap',
+  dbltap = 'dbltap',
+  dragstart = 'dragstart',
+  dragmove = 'dragmove',
+  dragend = 'dragend'
+}
+
+type KonvaEvent = KonvaNodeEvent;
+
+type KonvaEventString = KonvaEvent | string;