make Konva modular

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.0.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Feb 25 2019
+   * Date: Tue Feb 26 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -30,7 +30,7 @@
   }.toString());
   var dblClickWindow = 400;
   var getAngle = function (angle) {
-      return getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
+      return _getGlobalKonva().angleDeg ? angle * PI_OVER_180 : angle;
   };
   var _detectIE = function (ua) {
       var msie = ua.indexOf('msie ');
@@ -83,9 +83,23 @@
   // user agent
   var UA = _parseUA((glob.navigator && glob.navigator.userAgent) || '');
   var document = glob.document;
-  var getGlobalKonva = function () {
+  // get global Konva instance
+  var _getGlobalKonva = function () {
       return glob.Konva;
   };
+  var _NODES_REGISTRY = {};
+  var globalKonva = {};
+  // insert Konva into global namaspace (window)
+  // it is required for npm packages
+  var _injectGlobal = function (Konva) {
+      globalKonva = Konva;
+      glob.Konva = Konva;
+      Object.assign(glob.Konva, _NODES_REGISTRY);
+  };
+  var _registerNode = function (NodeClass) {
+      _NODES_REGISTRY[NodeClass.prototype.getClassName()] = NodeClass;
+      globalKonva[NodeClass.prototype.getClassName()] = NodeClass;
+  };
 
   /**
    * Collection constructor. Collection extends Array.
@@ -583,7 +597,7 @@
       createCanvasElement: function () {
           var canvas = isBrowser
               ? document.createElement('canvas')
-              : new (getGlobalKonva()._nodeCanvas())();
+              : new (_getGlobalKonva()._nodeCanvas())();
           // on some environments canvas.style is readonly
           try {
               canvas.style = canvas.style || {};
@@ -825,7 +839,7 @@
           console.error(KONVA_ERROR + str);
       },
       warn: function (str) {
-          if (!getGlobalKonva().showWarnings) {
+          if (!_getGlobalKonva().showWarnings) {
               return;
           }
           console.warn(KONVA_WARNING + str);
@@ -1322,7 +1336,7 @@
       function Context(canvas) {
           this.canvas = canvas;
           this._context = canvas._canvas.getContext('2d');
-          if (getGlobalKonva().enableTrace) {
+          if (_getGlobalKonva().enableTrace) {
               this.traceArr = [];
               this._enableTrace();
           }
@@ -1856,7 +1870,7 @@
           this.height = 0;
           this.isCache = false;
           var conf = config || {};
-          var pixelRatio = conf.pixelRatio || getGlobalKonva().pixelRatio || getDevicePixelRatio();
+          var pixelRatio = conf.pixelRatio || _getGlobalKonva().pixelRatio || getDevicePixelRatio();
           this.pixelRatio = pixelRatio;
           this._canvas = Util.createCanvasElement();
           // set inline styles
@@ -2272,13 +2286,13 @@
               if (DD.isDragging) {
                   DD.isDragging = false;
                   DD.justDragged = true;
-                  getGlobalKonva().listenClickTap = false;
+                  _getGlobalKonva().listenClickTap = false;
                   if (evt) {
                       evt.dragEndNode = node;
                   }
               }
               DD.node = null;
-              if (layer || node instanceof getGlobalKonva().Stage) {
+              if (layer || node instanceof _getGlobalKonva().Stage) {
                   (layer || node).draw();
               }
           }
@@ -2776,7 +2790,7 @@
        * // with event delegations
        * layer.on('click', 'Group', function(evt) {
        *   var shape = evt.target;
-       *   var group = evtn.currentTarger;
+       *   var group = evt.currentTarget;
        * });
        */
       Node.prototype.on = function (evtStr, handler) {
@@ -3702,7 +3716,7 @@
           return this._getCache(TRANSFORM, this._getTransform);
       };
       Node.prototype._getTransform = function () {
-          var m = new Transform(), x = this.x(), y = this.y(), rotation = getGlobalKonva().getAngle(this.rotation()), scaleX = this.scaleX(), scaleY = this.scaleY(), skewX = this.skewX(), skewY = this.skewY(), offsetX = this.offsetX(), offsetY = this.offsetY();
+          var m = new Transform(), x = this.x(), y = this.y(), rotation = _getGlobalKonva().getAngle(this.rotation()), scaleX = this.scaleX(), scaleY = this.scaleY(), skewX = this.skewX(), skewY = this.skewY(), offsetX = this.offsetX(), offsetY = this.offsetY();
           if (x !== 0 || y !== 0) {
               m.translate(x, y);
           }
@@ -3914,7 +3928,7 @@
               return this.parent.getDragDistance();
           }
           else {
-              return getGlobalKonva().dragDistance;
+              return _getGlobalKonva().dragDistance;
           }
       };
       Node.prototype._get = function (selector) {
@@ -4206,7 +4220,7 @@
       Node.prototype._listenDrag = function () {
           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;
               }
@@ -4263,13 +4277,13 @@
           if (container) {
               obj.attrs.container = container;
           }
-          if (!getGlobalKonva()[className]) {
+          if (!_NODES_REGISTRY[className]) {
               Util.warn('Can not find a node with class name "' +
                   className +
                   '". Fallback to "Shape".');
               className = 'Shape';
           }
-          var Class = getGlobalKonva()[className];
+          var Class = _NODES_REGISTRY[className];
           no = new Class(obj.attrs);
           if (children) {
               len = children.length;
@@ -5531,7 +5545,10 @@
           return _this;
       }
       Stage.prototype._validateAdd = function (child) {
-          if (child.getType() !== 'Layer') {
+          var isLayer = child.getType() === 'Layer';
+          var isFastLayer = child.getType() === 'FastLayer';
+          var valid = isLayer || isFastLayer;
+          if (!valid) {
               Util.throw('You may only add layers to the stage.');
           }
       };
@@ -5806,7 +5823,7 @@
           }
           this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
-          getGlobalKonva().listenClickTap = true;
+          _getGlobalKonva().listenClickTap = true;
           if (shape && shape.isListening()) {
               this.clickStartShape = shape;
               shape._fireAndBubble(MOUSEDOWN, { evt: evt });
@@ -5833,28 +5850,28 @@
               return this._touchend(evt);
           }
           this.setPointersPositions(evt);
-          var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = getGlobalKonva().DD;
+          var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, 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().inDblClickWindow = false;
-          }, getGlobalKonva().dblClickWindow);
+          }, _getGlobalKonva().dblClickWindow);
           if (shape && shape.isListening()) {
               this.clickEndShape = shape;
               shape._fireAndBubble(MOUSEUP, { evt: evt });
               // detect if click or double click occurred
-              if (getGlobalKonva().listenClickTap &&
+              if (_getGlobalKonva().listenClickTap &&
                   clickStartShape &&
                   clickStartShape._id === shape._id) {
                   shape._fireAndBubble(CLICK, { evt: evt });
@@ -5865,7 +5882,7 @@
           }
           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 });
               }
               if (fireDblClick) {
@@ -5878,13 +5895,13 @@
           }
           // 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
           if (evt.cancelable) {
@@ -5909,7 +5926,7 @@
       Stage.prototype._touchstart = function (evt) {
           this.setPointersPositions(evt);
           var shape = this.getIntersection(this.getPointerPosition());
-          getGlobalKonva().listenClickTap = true;
+          _getGlobalKonva().listenClickTap = true;
           if (shape && shape.isListening()) {
               this.tapStartShape = shape;
               shape._fireAndBubble(TOUCHSTART, { evt: evt });
@@ -5931,22 +5948,22 @@
       Stage.prototype._touchend = function (evt) {
           this.setPointersPositions(evt);
           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().inDblClickWindow = false;
-          }, getGlobalKonva().dblClickWindow);
+          }, _getGlobalKonva().dblClickWindow);
           if (shape && shape.isListening()) {
               shape._fireAndBubble(TOUCHEND, { evt: evt });
               // detect if tap or double tap occurred
-              if (getGlobalKonva().listenClickTap &&
+              if (_getGlobalKonva().listenClickTap &&
                   this.tapStartShape &&
                   shape._id === this.tapStartShape._id) {
                   shape._fireAndBubble(TAP, { evt: evt });
@@ -5961,7 +5978,7 @@
           }
           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) {
@@ -5974,17 +5991,17 @@
           }
           // 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;
       };
       Stage.prototype._touchmove = function (evt) {
           this.setPointersPositions(evt);
-          var dd = getGlobalKonva().DD, shape;
+          var dd = _getGlobalKonva().DD, shape;
           if (!DD.isDragging) {
               shape = this.getIntersection(this.getPointerPosition());
               if (shape && shape.isListening()) {
@@ -6005,7 +6022,7 @@
           }
           if (dd) {
               if (DD.isDragging &&
-                  getGlobalKonva().DD.node.preventDefault() &&
+                  _getGlobalKonva().DD.node.preventDefault() &&
                   evt.cancelable) {
                   evt.preventDefault();
               }
@@ -6132,6 +6149,7 @@
       return Stage;
   }(Container));
   Stage.prototype.nodeType = STAGE$1;
+  _registerNode(Stage);
   /**
    * get/set container DOM element
    * @method
@@ -6413,7 +6431,7 @@
       };
       return BaseLayer;
   }(Container));
-  BaseLayer.prototype.nodeType = 'Layer';
+  BaseLayer.prototype.nodeType = 'BaseLayer';
   /**
    * get/set clearBeforeDraw flag which determines if the layer is cleared or not
    *  before drawing
@@ -7002,6 +7020,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());
   /**
@@ -8203,6 +8222,8 @@
       };
       return Layer;
   }(BaseLayer));
+  Layer.prototype.nodeType = 'Layer';
+  _registerNode(Layer);
   Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
   /**
    * get/set hitGraphEnabled flag.  Disabling the hit graph will greatly increase
@@ -8280,6 +8301,8 @@
       };
       return FastLayer;
   }(BaseLayer));
+  FastLayer.prototype.nodeType = 'FastLayer';
+  _registerNode(FastLayer);
   Collection.mapMethods(FastLayer);
 
   /**
@@ -8332,6 +8355,7 @@
       return Group;
   }(Container));
   Group.prototype.nodeType = 'Group';
+  _registerNode(Group);
   Collection.mapMethods(Group);
 
   var blacklist = {
@@ -8492,7 +8516,7 @@
           this.node = node;
           this._id = idCounter$1++;
           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.');
           }
@@ -9026,6 +9050,81 @@
       }
   };
 
+  var DD$1 = DD;
+  var enableTrace = false;
+  // TODO: move that to stage?
+  var listenClickTap = false;
+  var 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;
+   */
+  var 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;
+   */
+  var 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
+   */
+  var angleDeg = true;
+  /**
+   * Show different warnings about errors or wrong API usage
+   * @property showWarnings
+   * @default true
+   * @memberof Konva
+   * @example
+   * Konva.showWarnings = false;
+   */
+  var 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];
+   */
+  var dragButtons = [0, 1];
+  /**
+   * returns whether or not drag and drop is currently active
+   * @method
+   * @memberof Konva
+   */
+  var 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
+   */
+  var isDragReady = function () {
+      return !!DD.node;
+  };
+
   /**
    * Arc constructor
    * @constructor
@@ -9149,6 +9248,7 @@
   Arc.prototype._centroid = true;
   Arc.prototype.className = 'Arc';
   Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+  _registerNode(Arc);
   // add getters setters
   Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
   /**
@@ -9424,6 +9524,7 @@
   }(Shape));
   Line.prototype.className = 'Line';
   Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
+  _registerNode(Line);
   // add getters setters
   Factory.addGetterSetter(Line, 'closed', false);
   /**
@@ -9654,6 +9755,7 @@
       return Arrow;
   }(Line));
   Arrow.prototype.className = 'Arrow';
+  _registerNode(Arrow);
   /**
    * get/set pointerLength
    * @name Konva.Arrow#pointerLength
@@ -9818,6 +9920,7 @@
   Circle.prototype._centroid = true;
   Circle.prototype.className = 'Circle';
   Circle.prototype._attrsAffectingSize = ['radius'];
+  _registerNode(Circle);
   /**
    * get/set radius
    * @name Konva.Arrow#radius
@@ -9954,6 +10057,7 @@
   Ellipse.prototype.className = 'Ellipse';
   Ellipse.prototype._centroid = true;
   Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
+  _registerNode(Ellipse);
   // add getters setters
   Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
   /**
@@ -10180,6 +10284,7 @@
       return Image;
   }(Shape));
   Image.prototype.className = 'Image';
+  _registerNode(Image);
   /**
    * get/set image source. It can be image, canvas or video element
    * @name Konva.Image#image
@@ -10433,6 +10538,7 @@
       return Label;
   }(Group));
   Label.prototype.className = 'Label';
+  _registerNode(Label);
   Collection.mapMethods(Label);
   /**
    * Tag constructor.  A Tag can be configured
@@ -10535,6 +10641,7 @@
       return Tag;
   }(Shape));
   Tag.prototype.className = 'Tag';
+  _registerNode(Tag);
   /**
    * get/set pointer direction
    * @name Konva.Tag#pointerDirection
@@ -11330,6 +11437,7 @@
   }(Shape));
   Path.prototype.className = 'Path';
   Path.prototype._attrsAffectingSize = ['data'];
+  _registerNode(Path);
   /**
    * get/set SVG path data string.  This method
    *  also automatically parses the data string
@@ -11467,6 +11575,7 @@
       return Rect;
   }(Shape));
   Rect.prototype.className = 'Rect';
+  _registerNode(Rect);
   /**
    * get/set corner radius
    * @method
@@ -11607,6 +11716,7 @@
   RegularPolygon.prototype.className = 'RegularPolygon';
   RegularPolygon.prototype._centroid = true;
   RegularPolygon.prototype._attrsAffectingSize = ['radius'];
+  _registerNode(RegularPolygon);
   /**
    * get/set radius
    * @method
@@ -11757,6 +11867,7 @@
   Ring.prototype.className = 'Ring';
   Ring.prototype._centroid = true;
   Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+  _registerNode(Ring);
   /**
    * get/set innerRadius
    * @method
@@ -12021,6 +12132,7 @@
       return Sprite;
   }(Shape));
   Sprite.prototype.className = 'Sprite';
+  _registerNode(Sprite);
   // add getters setters
   Factory.addGetterSetter(Sprite, 'animation');
   /**
@@ -12280,6 +12392,7 @@
   Star.prototype.className = 'Star';
   Star.prototype._centroid = true;
   Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
+  _registerNode(Star);
   /**
    * get/set number of points
    * @name Konva.Ring#numPoints
@@ -12794,6 +12907,7 @@
       'wrap',
       'lineHeight'
   ];
+  _registerNode(Text);
   /**
    * get/set width of text area, which includes padding.
    * @name Konva.Text#width
@@ -13487,6 +13601,7 @@
   TextPath.prototype._strokeFuncHit = _strokeFunc$2;
   TextPath.prototype.className = 'TextPath';
   TextPath.prototype._attrsAffectingSize = ['text', 'fontSize', 'data'];
+  _registerNode(TextPath);
   /**
    * get/set SVG path data string.  This method
    *  also automatically parses the data string
@@ -14103,7 +14218,7 @@
               var dx = padding;
               var dy = padding;
               this._fitNodeInto({
-                  rotation: getGlobalKonva().angleDeg
+                  rotation: _getGlobalKonva().angleDeg
                       ? newRotation
                       : Util._degToRad(newRotation),
                   x: attrs.x +
@@ -14372,6 +14487,7 @@
       return val || [];
   }
   Transformer.prototype.className = 'Transformer';
+  _registerNode(Transformer);
   /**
    * get/set enabled handlers
    * @name Konva.Transformer#enabledAnchors
@@ -14784,6 +14900,7 @@
   Wedge.prototype.className = 'Wedge';
   Wedge.prototype._centroid = true;
   Wedge.prototype._attrsAffectingSize = ['radius'];
+  _registerNode(Wedge);
   /**
    * get/set radius
    * @name Konva.Wedge#radius
@@ -16886,80 +17003,6 @@
    * @returns {Number}
    */
 
-  var DD$1 = DD;
-  var enableTrace = false;
-  // TODO: move that to stage?
-  var listenClickTap = false;
-  var 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;
-   */
-  var 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;
-   */
-  var 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
-   */
-  var angleDeg = true;
-  /**
-   * Show different warnings about errors or wrong API usage
-   * @property showWarnings
-   * @default true
-   * @memberof Konva
-   * @example
-   * Konva.showWarnings = false;
-   */
-  var 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];
-   */
-  var dragButtons = [0, 1];
-  /**
-   * returns whether or not drag and drop is currently active
-   * @method
-   * @memberof Konva
-   */
-  var 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
-   */
-  var isDragReady = function () {
-      return !!DD.node;
-  };
   /**
    * @namespace Filters
    * @memberof Konva
@@ -16987,34 +17030,7 @@
   };
 
   var Konva = ({
-    DD: DD$1,
-    enableTrace: enableTrace,
-    listenClickTap: listenClickTap,
-    inDblClickWindow: inDblClickWindow,
-    pixelRatio: pixelRatio,
-    dragDistance: dragDistance,
-    angleDeg: angleDeg,
-    showWarnings: showWarnings,
-    dragButtons: dragButtons,
-    isDragging: isDragging,
-    isDragReady: isDragReady,
     Filters: Filters,
-    Collection: Collection,
-    Util: Util,
-    Node: Node,
-    ids: ids,
-    names: names,
-    Container: Container,
-    Stage: Stage,
-    stages: stages,
-    Layer: Layer,
-    FastLayer: FastLayer,
-    Group: Group,
-    Shape: Shape,
-    shapes: shapes,
-    Animation: Animation,
-    Tween: Tween,
-    Easings: Easings,
     Arc: Arc,
     Arrow: Arrow,
     Circle: Circle,
@@ -17033,6 +17049,33 @@
     TextPath: TextPath,
     Transformer: Transformer,
     Wedge: Wedge,
+    DD: DD$1,
+    enableTrace: enableTrace,
+    listenClickTap: listenClickTap,
+    inDblClickWindow: inDblClickWindow,
+    pixelRatio: pixelRatio,
+    dragDistance: dragDistance,
+    angleDeg: angleDeg,
+    showWarnings: showWarnings,
+    dragButtons: dragButtons,
+    isDragging: isDragging,
+    isDragReady: isDragReady,
+    Collection: Collection,
+    Util: Util,
+    Node: Node,
+    ids: ids,
+    names: names,
+    Container: Container,
+    Stage: Stage,
+    stages: stages,
+    Layer: Layer,
+    FastLayer: FastLayer,
+    Group: Group,
+    Shape: Shape,
+    shapes: shapes,
+    Animation: Animation,
+    Tween: Tween,
+    Easings: Easings,
     version: version,
     isBrowser: isBrowser,
     isUnminified: isUnminified,
@@ -17042,13 +17085,16 @@
     glob: glob,
     UA: UA,
     document: document,
-    getGlobalKonva: getGlobalKonva
+    _getGlobalKonva: _getGlobalKonva,
+    _NODES_REGISTRY: _NODES_REGISTRY,
+    _injectGlobal: _injectGlobal,
+    _registerNode: _registerNode
   });
 
   // add Konva to global viriable
   // umd build will actually do it
   // but it may now it case of modules and bundlers
-  glob.Konva = Konva;
+  _injectGlobal(Konva);
 
   return Konva;
 

package.json

@@ -7,10 +7,10 @@
     "konva.js",
     "konva.min.js",
     "konva.d.ts",
-    "types"
+    "types",
+    "lib"
   ],
-  "main": "konva.js",
+  "main": "./lib/Full.js",
-  "module": "konva.esm.js",
   "typings": "./types/index.d.ts",
   "scripts": {
     "start": "npm run watch & gulp",
@@ -19,7 +19,7 @@
     "full-build": "npm run build && npm t",
     "test": "mocha-headless-chrome -f ./test/runner.html -a disable-web-security",
     "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote",
-    "tsc": "tsc -d --declarationDir ./types --removeComments --noEmit || echo \"tsc faild for some file(s).\"",
+    "tsc": "tsc -d --declarationDir ./types --removeComments --module CommonJS || echo \"tsc faild for some file(s).\"",
     "rollup": "rollup -c",
     "compile": "npm run tsc && npm run rollup",
     "watch": "rollup -c -w"

rollup.config.js

@@ -1,27 +1,5 @@
-// import commonjs from 'rollup-plugin-commonjs';
-// import resolve from 'rollup-plugin-node-resolve';
-
-// import pkg from './package.json';
-
-// export default [
-//   // browser-friendly UMD build
-//   {
-//     input: './lib/index.js',
-//     output: {
-//       name: 'Konva',
-//       file: pkg.main,
-//       format: 'umd'
-//     },
-//     plugins: [
-//       resolve(),
-//       commonjs() // so Rollup can convert `ms` to an ES module
-//     ]
-//   }
-// ];
-
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
-import sourceMaps from 'rollup-plugin-sourcemaps';
 import typescript from 'rollup-plugin-typescript2';
 
 const pkg = require('./package.json');

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().inDblClickWindow = false;
-    }, getGlobalKonva().dblClickWindow);
+    }, _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().inDblClickWindow = false;
-    }, getGlobalKonva().dblClickWindow);
+    }, _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

test/import-test.js

@@ -0,0 +1,20 @@
+function equal(val1, val2, message) {
+  if (val1 !== val2) {
+    throw new Error('Not passed: ' + message);
+  }
+}
+
+// try to import only core
+let Konva = require('../lib/Core');
+
+// no external shapes
+equal(Konva.Rect, undefined, 'no external shapes');
+
+let Rect = require('../lib/shapes/Rect').Rect;
+
+equal(Rect !== undefined, true, 'Rect is defined');
+
+// now import from package.json
+let NewKonva = require('../');
+
+equal(NewKonva.Rect, Rect, 'Same rects');

tsconfig.json

@@ -2,72 +2,10 @@
   "compilerOptions": {
     "outDir": "lib",
     "module": "ES2015",
-    // "allowJs": true,
     "target": "es5",
     "noEmitOnError": true,
     "lib": ["es2015", "dom"]
     // "strict": true
   },
-  "include": [
+  "include": ["src/index.ts", "src/Core.ts"]
-    "src/index.ts"
-    // core
-    // "ts/Global.ts",
-    // "ts/Util.ts",
-    // "ts/Canvas.ts",
-    // "ts/Context.ts",
-    // "ts/Factory.ts",
-    // "ts/Node.ts",
-
-    // // filters
-    // "ts/filters/Grayscale.ts",
-    // "ts/filters/Brighten.ts",
-    // "ts/filters/Invert.ts",
-    // "ts/filters/Blur.ts",
-    // "ts/filters/Mask.ts",
-    // "ts/filters/RGB.ts",
-    // "ts/filters/RGBA.ts",
-    // "ts/filters/HSV.ts",
-    // "ts/filters/HSL.ts",
-    // "ts/filters/Emboss.ts",
-    // "ts/filters/Enhance.ts",
-    // "ts/filters/Posterize.ts",
-    // "ts/filters/Noise.ts",
-    // "ts/filters/Pixelate.ts",
-    // "ts/filters/Threshold.ts",
-    // "ts/filters/Sepia.ts",
-    // "ts/filters/Solarize.ts",
-    // "ts/filters/Kaleidoscope.ts",
-    // "ts/filters/Contrast.ts",
-
-    // // core
-    // "ts/Container.ts",
-    // "ts/Shape.ts",
-    // "ts/Stage.ts",
-    // "ts/BaseLayer.ts",
-    // "ts/Layer.ts",
-    // "ts/FastLayer.ts",
-    // "ts/Group.ts",
-    // "ts/Animation.ts",
-    // "ts/Tween.ts",
-    // "ts/DragAndDrop.ts",
-
-    // // shapes
-    // "ts/shapes/Rect.ts",
-    // "ts/shapes/Circle.ts",
-    // "ts/shapes/Ellipse.ts",
-    // "ts/shapes/Ring.ts",
-    // "ts/shapes/Wedge.ts",
-    // "ts/shapes/Arc.ts",
-    // "ts/shapes/Image.ts",
-    // "ts/shapes/Text.ts",
-    // "ts/shapes/Line.ts",
-    // "ts/shapes/Sprite.ts",
-    // "ts/shapes/Path.ts",
-    // "ts/shapes/TextPath.ts",
-    // "ts/shapes/RegularPolygon.ts",
-    // "ts/shapes/Star.ts",
-    // "ts/shapes/Label.ts",
-    // "ts/shapes/Arrow.ts",
-    // "ts/shapes/Transformer.ts"
-  ]
 }