make Konva modular

src/BaseLayer.ts

@@ -270,7 +270,7 @@ export abstract class BaseLayer extends Container {
   clearBeforeDraw: GetSet<boolean, this>;
 }
 
-BaseLayer.prototype.nodeType = 'Layer';
+BaseLayer.prototype.nodeType = 'BaseLayer';
 
 /**
  * get/set clearBeforeDraw flag which determines if the layer is cleared or not

src/Canvas.ts

@@ -1,6 +1,6 @@
 import { Util } from './Util';
 import { SceneContext, HitContext, Context } from './Context';
-import { glob, getGlobalKonva } from './Global';
+import { glob, _getGlobalKonva } from './Global';
 import { Factory } from './Factory';
 import { getNumberValidator } from './Validators';
 
@@ -56,7 +56,7 @@ export class Canvas {
     var conf = config || {};
 
     var pixelRatio =
-      conf.pixelRatio || getGlobalKonva().pixelRatio || getDevicePixelRatio();
+      conf.pixelRatio || _getGlobalKonva().pixelRatio || getDevicePixelRatio();
 
     this.pixelRatio = pixelRatio;
 

src/Context.ts

@@ -1,5 +1,5 @@
 import { Util } from './Util';
-import { getAngle, getGlobalKonva } from './Global';
+import { getAngle, _getGlobalKonva } from './Global';
 import { Canvas } from './Canvas';
 
 var COMMA = ',',
@@ -97,7 +97,7 @@ export class Context {
     this.canvas = canvas;
     this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D;
 
-    if (getGlobalKonva().enableTrace) {
+    if (_getGlobalKonva().enableTrace) {
       this.traceArr = [];
       this._enableTrace();
     }

src/Core.ts

@@ -0,0 +1,8 @@
+import * as Konva from './_CoreInternals';
+
+// add Konva to global viriable
+// umd build will actually do it
+// but it may now it case of modules and bundlers
+Konva._injectGlobal(Konva);
+
+export default Konva;

src/DragAndDrop.ts

@@ -1,5 +1,5 @@
 import { Animation } from './Animation';
-import { isBrowser, getGlobalKonva } from './Global';
+import { isBrowser, _getGlobalKonva } from './Global';
 
 
 // TODO: make better module,
@@ -89,7 +89,7 @@ export const DD = {
       if (DD.isDragging) {
         DD.isDragging = false;
         DD.justDragged = true;
-        getGlobalKonva().listenClickTap = false;
+        _getGlobalKonva().listenClickTap = false;
 
         if (evt) {
           evt.dragEndNode = node;
@@ -98,7 +98,7 @@ export const DD = {
 
       DD.node = null;
 
-      if (layer || node instanceof getGlobalKonva().Stage) {
+      if (layer || node instanceof _getGlobalKonva().Stage) {
         (layer || node).draw();
       }
     }

src/FastLayer.ts

@@ -1,6 +1,7 @@
 import { Util, Collection } from './Util';
 import { Container } from './Container';
 import { BaseLayer } from './BaseLayer';
+import { _registerNode } from './Global';
 
 /**
  * FastLayer constructor. Layers are tied to their own canvas element and are used
@@ -53,4 +54,7 @@ export class FastLayer extends BaseLayer {
   }
 }
 
+FastLayer.prototype.nodeType = 'FastLayer';
+_registerNode(FastLayer);
+
 Collection.mapMethods(FastLayer);

src/Full.ts

@@ -0,0 +1,67 @@
+export * from './_CoreInternals';
+
+// shapes
+export { Arc } from './shapes/Arc';
+export { Arrow } from './shapes/Arrow';
+export { Circle } from './shapes/Circle';
+export { Ellipse } from './shapes/Ellipse';
+export { Image } from './shapes/Image';
+export { Label, Tag } from './shapes/Label';
+export { Line } from './shapes/Line';
+export { Path } from './shapes/Path';
+export { Rect } from './shapes/Rect';
+export { RegularPolygon } from './shapes/RegularPolygon';
+export { Ring } from './shapes/Ring';
+export { Sprite } from './shapes/Sprite';
+export { Star } from './shapes/Star';
+export { Text } from './shapes/Text';
+export { TextPath } from './shapes/TextPath';
+export { Transformer } from './shapes/Transformer';
+export { Wedge } from './shapes/Wedge';
+
+// 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';
+
+/**
+ * @namespace Filters
+ * @memberof Konva
+ */
+export const Filters = {
+  Blur,
+  Brighten,
+  Contrast,
+  Emboss,
+  Enhance,
+  Grayscale,
+  HSL,
+  HSV,
+  Invert,
+  Kaleidoscope,
+  Mask,
+  Noise,
+  Pixelate,
+  Posterize,
+  RGB,
+  RGBA,
+  Sepia,
+  Solarize,
+  Threshold
+};

src/Global.ts

@@ -31,7 +31,7 @@ export const isUnminified = /comment/.test(
 export const dblClickWindow = 400;
 
 export const getAngle = function(angle) {
-  return getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
+  return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
 };
 
 const _detectIE = function(ua) {
@@ -101,6 +101,23 @@ export const UA = _parseUA((glob.navigator && glob.navigator.userAgent) || '');
 
 export const document = glob.document;
 
-export const getGlobalKonva = () => {
+// get global Konva instance
+export const _getGlobalKonva = () => {
   return glob.Konva;
 };
+
+export const _NODES_REGISTRY = {};
+let globalKonva = {};
+
+// insert Konva into global namaspace (window)
+// it is required for npm packages
+export const _injectGlobal = Konva => {
+  globalKonva = Konva;
+  glob.Konva = Konva;
+  Object.assign(glob.Konva, _NODES_REGISTRY);
+};
+
+export const _registerNode = NodeClass => {
+  _NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
+  globalKonva[NodeClass.prototype.getClassName()] = NodeClass;
+};

src/Group.ts

@@ -1,5 +1,6 @@
 import { Util, Collection } from './Util';
 import { Container } from './Container';
+import { _registerNode } from './Global';
 
 /**
  * Group constructor.  Groups are used to contain shapes or other groups.
@@ -22,5 +23,6 @@ export class Group extends Container {
 }
 
 Group.prototype.nodeType = 'Group';
+_registerNode(Group);
 
 Collection.mapMethods(Group);

src/Layer.ts

@@ -5,6 +5,7 @@ import { BaseLayer } from './BaseLayer';
 import { HitCanvas } from './Canvas';
 import { shapes } from './Shape';
 import { getBooleanValidator } from './Validators';
+import { _registerNode } from './Global';
 
 import { GetSet } from './types';
 
@@ -234,6 +235,9 @@ export class Layer extends BaseLayer {
   hitGraphEnabled: GetSet<boolean, this>;
 }
 
+Layer.prototype.nodeType = 'Layer';
+_registerNode(Layer);
+
 Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
 /**
  * get/set hitGraphEnabled flag.  Disabling the hit graph will greatly increase

src/Node.ts

@@ -1,7 +1,7 @@
 import { Util, Collection, Transform, RectConf, Point } from './Util';
 import { Factory } from './Factory';
 import { SceneCanvas, HitCanvas } from './Canvas';
-import { getGlobalKonva } from './Global';
+import { _getGlobalKonva, _NODES_REGISTRY } from './Global';
 import { Container } from './Container';
 import { GetSet, Vector2d } from './types';
 import { DD } from './DragAndDrop';
@@ -612,7 +612,7 @@ export abstract class Node {
    * // with event delegations
    * layer.on('click', 'Group', function(evt) {
    *   var shape = evt.target;
-   *   var group = evtn.currentTarger;
+   *   var group = evt.currentTarget;
    * });
    */
   on(evtStr, handler) {
@@ -1632,7 +1632,7 @@ export abstract class Node {
     var m = new Transform(),
       x = this.x(),
       y = this.y(),
-      rotation = getGlobalKonva().getAngle(this.rotation()),
+      rotation = _getGlobalKonva().getAngle(this.rotation()),
       scaleX = this.scaleX(),
       scaleY = this.scaleY(),
       skewX = this.skewX(),
@@ -1868,7 +1868,7 @@ export abstract class Node {
     } else if (this.parent) {
       return this.parent.getDragDistance();
     } else {
-      return getGlobalKonva().dragDistance;
+      return _getGlobalKonva().dragDistance;
     }
   }
   _get(selector) {
@@ -2207,7 +2207,7 @@ export abstract class Node {
     this._dragCleanup();
 
     this.on('mousedown.konva touchstart.konva', function(evt) {
-      var canDrag = getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
+      var canDrag = _getGlobalKonva().dragButtons.indexOf(evt.evt.button) >= 0;
       if (!canDrag) {
         return;
       }
@@ -2335,7 +2335,7 @@ export abstract class Node {
       obj.attrs.container = container;
     }
 
-    if (!getGlobalKonva()[className]) {
+    if (!_NODES_REGISTRY[className]) {
       Util.warn(
         'Can not find a node with class name "' +
           className +
@@ -2344,7 +2344,7 @@ export abstract class Node {
       className = 'Shape';
     }
 
-    const Class = getGlobalKonva()[className];
+    const Class = _NODES_REGISTRY[className];
 
     no = new Class(obj.attrs);
     if (children) {

src/Shape.ts

@@ -9,6 +9,7 @@ import {
 
 import { GetSet, Vector2d } from './types';
 import { Context } from './Context';
+import { _registerNode } from './Global';
 
 var HAS_SHADOW = 'hasShadow';
 var SHADOW_RGBA = 'shadowRGBA';
@@ -703,6 +704,7 @@ Shape.prototype._strokeFuncHit = _strokeFuncHit;
 
 Shape.prototype._centroid = false;
 Shape.prototype.nodeType = 'Shape';
+_registerNode(Shape);
 
 // add getters and setters
 Factory.addGetterSetter(Shape, 'stroke', undefined, getStringValidator());

src/Stage.ts

@@ -1,12 +1,13 @@
 import { Util, Collection } from './Util';
 import { Factory } from './Factory';
 import { Container } from './Container';
-import { document, isBrowser, getGlobalKonva, UA } from './Global';
+import { document, isBrowser, _getGlobalKonva, UA } from './Global';
 import { SceneCanvas, HitCanvas } from './Canvas';
 import { GetSet, Vector2d } from './types';
 import { Shape } from './Shape';
 import { BaseLayer } from './BaseLayer';
 import { DD } from './DragAndDrop';
+import { _registerNode } from './Global';
 
 // CONSTANTS
 var STAGE = 'Stage',
@@ -134,7 +135,10 @@ export class Stage extends Container {
   }
 
   _validateAdd(child) {
-    if (child.getType() !== 'Layer') {
+    const isLayer = child.getType() === 'Layer';
+    const isFastLayer = child.getType() === 'FastLayer';
+    const valid = isLayer || isFastLayer;
+    if (!valid) {
       Util.throw('You may only add layers to the stage.');
     }
   }
@@ -452,7 +456,7 @@ export class Stage extends Container {
     this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
-    getGlobalKonva().listenClickTap = true;
+    _getGlobalKonva().listenClickTap = true;
 
     if (shape && shape.isListening()) {
       this.clickStartShape = shape;
@@ -485,23 +489,23 @@ export class Stage extends Container {
       clickStartShape = this.clickStartShape,
       clickEndShape = this.clickEndShape,
       fireDblClick = false,
-      dd = getGlobalKonva().DD;
+      dd = _getGlobalKonva().DD;
 
-    if (getGlobalKonva().inDblClickWindow) {
+    if (_getGlobalKonva().inDblClickWindow) {
       fireDblClick = true;
       clearTimeout(this.dblTimeout);
       // Konva.inDblClickWindow = false;
     } else if (!dd || !dd.justDragged) {
       // don't set inDblClickWindow after dragging
-      getGlobalKonva().inDblClickWindow = true;
+      _getGlobalKonva().inDblClickWindow = true;
       clearTimeout(this.dblTimeout);
     } else if (dd) {
       dd.justDragged = false;
     }
 
     this.dblTimeout = setTimeout(function() {
-      getGlobalKonva().inDblClickWindow = false;
-    }, getGlobalKonva().dblClickWindow);
+      _getGlobalKonva().inDblClickWindow = false;
+    }, _getGlobalKonva().dblClickWindow);
 
     if (shape && shape.isListening()) {
       this.clickEndShape = shape;
@@ -509,7 +513,7 @@ export class Stage extends Container {
 
       // detect if click or double click occurred
       if (
-        getGlobalKonva().listenClickTap &&
+        _getGlobalKonva().listenClickTap &&
         clickStartShape &&
         clickStartShape._id === shape._id
       ) {
@@ -521,7 +525,7 @@ export class Stage extends Container {
       }
     } else {
       this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
-      if (getGlobalKonva().listenClickTap) {
+      if (_getGlobalKonva().listenClickTap) {
         this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
       }
 
@@ -535,14 +539,14 @@ export class Stage extends Container {
     }
     // content events
     this._fire(CONTENT_MOUSEUP, { evt: evt });
-    if (getGlobalKonva().listenClickTap) {
+    if (_getGlobalKonva().listenClickTap) {
       this._fire(CONTENT_CLICK, { evt: evt });
       if (fireDblClick) {
         this._fire(CONTENT_DBL_CLICK, { evt: evt });
       }
     }
 
-    getGlobalKonva().listenClickTap = false;
+    _getGlobalKonva().listenClickTap = false;
 
     // always call preventDefault for desktop events because some browsers
     // try to drag and drop the canvas element
@@ -569,7 +573,7 @@ export class Stage extends Container {
     this.setPointersPositions(evt);
     var shape = this.getIntersection(this.getPointerPosition());
 
-    getGlobalKonva().listenClickTap = true;
+    _getGlobalKonva().listenClickTap = true;
 
     if (shape && shape.isListening()) {
       this.tapStartShape = shape;
@@ -594,25 +598,25 @@ export class Stage extends Container {
     var shape = this.getIntersection(this.getPointerPosition()),
       fireDblClick = false;
 
-    if (getGlobalKonva().inDblClickWindow) {
+    if (_getGlobalKonva().inDblClickWindow) {
       fireDblClick = true;
       clearTimeout(this.dblTimeout);
-      // getGlobalKonva().inDblClickWindow = false;
+      // _getGlobalKonva().inDblClickWindow = false;
     } else {
-      getGlobalKonva().inDblClickWindow = true;
+      _getGlobalKonva().inDblClickWindow = true;
       clearTimeout(this.dblTimeout);
     }
 
     this.dblTimeout = setTimeout(function() {
-      getGlobalKonva().inDblClickWindow = false;
-    }, getGlobalKonva().dblClickWindow);
+      _getGlobalKonva().inDblClickWindow = false;
+    }, _getGlobalKonva().dblClickWindow);
 
     if (shape && shape.isListening()) {
       shape._fireAndBubble(TOUCHEND, { evt: evt });
 
       // detect if tap or double tap occurred
       if (
-        getGlobalKonva().listenClickTap &&
+        _getGlobalKonva().listenClickTap &&
         this.tapStartShape &&
         shape._id === this.tapStartShape._id
       ) {
@@ -628,7 +632,7 @@ export class Stage extends Container {
       }
     } else {
       this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
-      if (getGlobalKonva().listenClickTap) {
+      if (_getGlobalKonva().listenClickTap) {
         this._fire(TAP, { evt: evt, target: this, currentTarget: this });
       }
       if (fireDblClick) {
@@ -641,18 +645,18 @@ export class Stage extends Container {
     }
     // content events
     this._fire(CONTENT_TOUCHEND, { evt: evt });
-    if (getGlobalKonva().listenClickTap) {
+    if (_getGlobalKonva().listenClickTap) {
       this._fire(CONTENT_TAP, { evt: evt });
       if (fireDblClick) {
         this._fire(CONTENT_DBL_TAP, { evt: evt });
       }
     }
 
-    getGlobalKonva().listenClickTap = false;
+    _getGlobalKonva().listenClickTap = false;
   }
   _touchmove(evt) {
     this.setPointersPositions(evt);
-    var dd = getGlobalKonva().DD,
+    var dd = _getGlobalKonva().DD,
       shape;
     if (!DD.isDragging) {
       shape = this.getIntersection(this.getPointerPosition());
@@ -674,7 +678,7 @@ export class Stage extends Container {
     if (dd) {
       if (
         DD.isDragging &&
-        getGlobalKonva().DD.node.preventDefault() &&
+        _getGlobalKonva().DD.node.preventDefault() &&
         evt.cancelable
       ) {
         evt.preventDefault();
@@ -819,6 +823,7 @@ export class Stage extends Container {
 }
 
 Stage.prototype.nodeType = STAGE;
+_registerNode(Stage);
 
 /**
  * get/set container DOM element

src/Tween.ts

@@ -1,7 +1,7 @@
 import { Util } from './Util';
 import { Animation } from './Animation';
 import { Node } from './Node';
-import { getGlobalKonva } from './Global';
+import { _getGlobalKonva } from './Global';
 
 var blacklist = {
     node: 1,
@@ -200,7 +200,7 @@ export class Tween {
 
     var layers =
       node.getLayer() ||
-      (node instanceof getGlobalKonva().Stage ? node.getLayers() : null);
+      (node instanceof _getGlobalKonva().Stage ? node.getLayers() : null);
     if (!layers) {
       Util.error(
         'Tween constructor have `node` that is not in a layer. Please add node into layer first.'

src/Util.ts

@@ -1,4 +1,4 @@
-import { isBrowser, document, glob, getGlobalKonva } from './Global';
+import { isBrowser, document, glob, _getGlobalKonva } from './Global';
 import { Node } from './Node';
 
 export type Point = {
@@ -565,7 +565,7 @@ export const Util = {
   createCanvasElement() {
     var canvas = isBrowser
       ? document.createElement('canvas')
-      : new (getGlobalKonva()._nodeCanvas())();
+      : new (_getGlobalKonva()._nodeCanvas())();
     // on some environments canvas.style is readonly
     try {
       canvas.style = canvas.style || {};
@@ -811,7 +811,7 @@ export const Util = {
     console.error(KONVA_ERROR + str);
   },
   warn(str) {
-    if (!getGlobalKonva().showWarnings) {
+    if (!_getGlobalKonva().showWarnings) {
       return;
     }
     console.warn(KONVA_WARNING + str);

src/_CoreInternals.ts

@@ -0,0 +1,99 @@
+export * from './Global';
+
+export { Collection, Util } from './Util';
+export { Node, ids, names } from './Node';
+export { Container } from './Container';
+
+export { Stage, stages } from './Stage';
+
+export { Layer } from './Layer';
+export { FastLayer } from './FastLayer';
+
+export { Group } from './Group';
+
+import { DD as dd } from './DragAndDrop';
+
+export const DD = dd;
+export { Shape, shapes } from './Shape';
+
+export { Animation } from './Animation';
+export { Tween, Easings } from './Tween';
+
+export const enableTrace = false;
+
+// TODO: move that to stage?
+export const listenClickTap = false;
+export const inDblClickWindow = false;
+
+/**
+ * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
+ * But you may override such property, if you want to use your value.
+ * @property pixelRatio
+ * @default undefined
+ * @name pixelRatio
+ * @memberof Konva
+ * @example
+ * Konva.pixelRatio = 1;
+ */
+export const pixelRatio = undefined;
+
+/**
+ * Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
+ * only then start dragging. Default is 3px.
+ * @property dragDistance
+ * @default 0
+ * @memberof Konva
+ * @example
+ * Konva.dragDistance = 10;
+ */
+export const dragDistance = 3;
+/**
+ * Use degree values for angle properties. You may set this property to false if you want to use radiant values.
+ * @property angleDeg
+ * @default true
+ * @memberof Konva
+ * @example
+ * node.rotation(45); // 45 degrees
+ * Konva.angleDeg = false;
+ * node.rotation(Math.PI / 2); // PI/2 radian
+ */
+export const angleDeg = true;
+/**
+ * Show different warnings about errors or wrong API usage
+ * @property showWarnings
+ * @default true
+ * @memberof Konva
+ * @example
+ * Konva.showWarnings = false;
+ */
+export const showWarnings = true;
+
+/**
+ * Configure what mouse buttons can be used for drag and drop.
+ * Default value is [0] - only left mouse button.
+ * @property dragButtons
+ * @default true
+ * @memberof Konva
+ * @example
+ * // enable left and right mouse buttons
+ * Konva.dragButtons = [0, 2];
+ */
+export const dragButtons = [0, 1];
+
+/**
+ * returns whether or not drag and drop is currently active
+ * @method
+ * @memberof Konva
+ */
+export const isDragging = function() {
+  return dd.isDragging;
+};
+/**
+ * returns whether or not a drag and drop operation is ready, but may
+ *  not necessarily have started
+ * @method
+ * @memberof Konva
+ */
+export const isDragReady = function() {
+  return !!dd.node;
+};

src/index.ts

@@ -1,8 +1,8 @@
-import * as Konva from './internals';
+import * as Konva from './Full';
 
 // add Konva to global viriable
 // umd build will actually do it
 // but it may now it case of modules and bundlers
-Konva.glob.Konva = Konva;
+Konva._injectGlobal(Konva);
 
 export default Konva;

src/shapes/Arc.ts

@@ -4,6 +4,7 @@ import { Shape } from '../Shape';
 import { getAngle } from '../Global';
 import { GetSet } from '../types';
 import { getNumberValidator, getBooleanValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 /**
  * Arc constructor
@@ -62,6 +63,7 @@ export class Arc extends Shape {
 Arc.prototype._centroid = true;
 Arc.prototype.className = 'Arc';
 Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Arc);
 
 // add getters setters
 Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());

src/shapes/Arrow.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Line } from './Line';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 /**
  * Arrow constructor
@@ -108,6 +109,7 @@ export class Arrow extends Line {
 }
 
 Arrow.prototype.className = 'Arrow';
+_registerNode(Arrow);
 
 /**
  * get/set pointerLength

src/shapes/Circle.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 /**
  * Circle constructor
@@ -52,6 +53,7 @@ export class Circle extends Shape {
 Circle.prototype._centroid = true;
 Circle.prototype.className = 'Circle';
 Circle.prototype._attrsAffectingSize = ['radius'];
+_registerNode(Circle);
 
 /**
  * get/set radius

src/shapes/Ellipse.ts

@@ -2,6 +2,7 @@ import { Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet, Vector2d } from '../types';
 
@@ -58,6 +59,7 @@ export class Ellipse extends Shape {
 Ellipse.prototype.className = 'Ellipse';
 Ellipse.prototype._centroid = true;
 Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
+_registerNode(Ellipse);
 
 // add getters setters
 Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);

src/shapes/Image.ts

@@ -2,6 +2,7 @@ import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet, IRect } from '../types';
 
@@ -130,7 +131,7 @@ export class Image extends Shape {
 }
 
 Image.prototype.className = 'Image';
-
+_registerNode(Image);
 /**
  * get/set image source. It can be image, canvas or video element
  * @name Konva.Image#image

src/shapes/Label.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { Group } from '../Group';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -165,6 +166,7 @@ export class Label extends Group {
 }
 
 Label.prototype.className = 'Label';
+_registerNode(Label);
 
 Collection.mapMethods(Label);
 
@@ -313,6 +315,7 @@ export class Tag extends Shape {
 }
 
 Tag.prototype.className = 'Tag';
+_registerNode(Tag);
 
 /**
  * get/set pointer direction

src/shapes/Line.ts

@@ -2,6 +2,7 @@ import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getNumberValidator, getNumberArrayValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -209,6 +210,7 @@ export class Line extends Shape {
 
 Line.prototype.className = 'Line';
 Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
+_registerNode(Line);
 
 // add getters setters
 Factory.addGetterSetter(Line, 'closed', false);

src/shapes/Path.ts

@@ -1,6 +1,7 @@
 import { Util, Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -870,6 +871,7 @@ export class Path extends Shape {
 
 Path.prototype.className = 'Path';
 Path.prototype._attrsAffectingSize = ['data'];
+_registerNode(Path);
 
 /**
  * get/set SVG path data string.  This method

src/shapes/Rect.ts

@@ -2,6 +2,7 @@ import { Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -83,6 +84,7 @@ export class Rect extends Shape {
 }
 
 Rect.prototype.className = 'Rect';
+_registerNode(Rect);
 
 /**
  * get/set corner radius

src/shapes/RegularPolygon.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 /**
  * RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.
@@ -64,6 +65,7 @@ export class RegularPolygon extends Shape {
 RegularPolygon.prototype.className = 'RegularPolygon';
 RegularPolygon.prototype._centroid = true;
 RegularPolygon.prototype._attrsAffectingSize = ['radius'];
+_registerNode(RegularPolygon)
 
 /**
  * get/set radius

src/shapes/Ring.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 var PIx2 = Math.PI * 2;
 /**
@@ -54,6 +55,7 @@ export class Ring extends Shape {
 Ring.prototype.className = 'Ring';
 Ring.prototype._centroid = true;
 Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Ring);
 
 /**
  * get/set innerRadius

src/shapes/Sprite.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { Animation } from '../Animation';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -213,6 +214,8 @@ export class Sprite extends Shape {
 }
 
 Sprite.prototype.className = 'Sprite';
+_registerNode(Sprite);
+
 
 // add getters setters
 Factory.addGetterSetter(Sprite, 'animation');

src/shapes/Star.ts

@@ -2,6 +2,7 @@ import { Collection } from '../Util';
 import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -68,6 +69,7 @@ export class Star extends Shape {
 Star.prototype.className = 'Star';
 Star.prototype._centroid = true;
 Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+_registerNode(Star);
 
 /**
  * get/set number of points

src/shapes/Text.ts

@@ -7,6 +7,7 @@ import {
   getStringValidator,
   getNumberOrAutoValidator
 } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -530,6 +531,7 @@ Text.prototype._attrsAffectingSize = [
   'wrap',
   'lineHeight'
 ];
+_registerNode(Text);
 
 /**
  * get/set width of text area, which includes padding.

src/shapes/TextPath.ts

@@ -4,6 +4,7 @@ import { Shape } from '../Shape';
 import { Path } from './Path';
 import { Text } from './Text';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet, Vector2d } from '../types';
 
@@ -538,6 +539,7 @@ TextPath.prototype._fillFuncHit = _fillFunc;
 TextPath.prototype._strokeFuncHit = _strokeFunc;
 TextPath.prototype.className = 'TextPath';
 TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
+_registerNode(TextPath);
 
 /**
  * get/set SVG path data string.  This method

src/shapes/Transformer.ts

@@ -4,8 +4,9 @@ import { Node } from '../Node';
 import { Shape } from '../Shape';
 import { Rect } from './Rect';
 import { Group } from '../Group';
-import { getAngle, getGlobalKonva } from '../Global';
+import { getAngle, _getGlobalKonva } from '../Global';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet, IRect } from '../types';
 
@@ -520,7 +521,7 @@ export class Transformer extends Group {
 
       this._fitNodeInto(
         {
-          rotation: getGlobalKonva().angleDeg
+          rotation: _getGlobalKonva().angleDeg
             ? newRotation
             : Util._degToRad(newRotation),
           x:
@@ -847,6 +848,7 @@ function validateAnchors(val) {
 }
 
 Transformer.prototype.className = 'Transformer';
+_registerNode(Transformer);
 
 /**
  * get/set enabled handlers

src/shapes/Wedge.ts

@@ -3,6 +3,7 @@ import { Factory } from '../Factory';
 import { Shape } from '../Shape';
 import { getAngle } from '../Global';
 import { getNumberValidator } from '../Validators';
+import { _registerNode } from '../Global';
 
 import { GetSet } from '../types';
 
@@ -64,6 +65,7 @@ export class Wedge extends Shape {
 Wedge.prototype.className = 'Wedge';
 Wedge.prototype._centroid = true;
 Wedge.prototype._attrsAffectingSize = ['radius'];
+_registerNode(Wedge);
 
 /**
  * get/set radius