diff --git a/README.md b/README.md
index 9b1baad0..ea3ea87b 100644
--- a/README.md
+++ b/README.md
@@ -130,7 +130,7 @@ npm install konva canvas
 
 ### CommonJS modules
 
-By default `Konva` is delivered as ES modules. If you need to use CommonJS modules you should use `cmj` bundled version:
+By default `Konva` is delivered as ES modules. Some environments may automatically take CommonJS version of `Konva`. If it doesn't work for you, try to use `cmj` version explicitly:
 
 ```js
 const Konva = require('konva/cmj').default;
diff --git a/konva.js b/konva.js
index 46e5d5b4..7cb73af2 100644
--- a/konva.js
+++ b/konva.js
@@ -4,10 +4,26 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Konva = factory());
 })(this, (function () { 'use strict';
 
+  /*
+   * Konva JavaScript Framework v8.2.0
+   * http://konvajs.org/
+   * Licensed under the MIT
+   * Date: Thu Sep 23 2021
+   *
+   * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
+   * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
+   *
+   * @license
+   */
   var PI_OVER_180 = Math.PI / 180;
+  /**
+   * @namespace Konva
+   */
   function detectBrowser() {
       return (typeof window !== 'undefined' &&
+          // browser case
           ({}.toString.call(window) === '[object Window]' ||
+              // electron case
               {}.toString.call(window) === '[object global]'));
   }
   const glob = typeof global !== 'undefined'
@@ -28,8 +44,39 @@
       },
       enableTrace: false,
       pointerEventsEnabled: true,
+      /**
+       * Should Konva automatically update canvas on any changes. Default is true.
+       * @property autoDrawEnabled
+       * @default true
+       * @name autoDrawEnabled
+       * @memberof Konva
+       * @example
+       * Konva.autoDrawEnabled = true;
+       */
       autoDrawEnabled: true,
+      /**
+       * Should we enable hit detection while dragging? For performance reasons, by default it is false.
+       * But on some rare cases you want to see hit graph and check intersections. Just set it to true.
+       * @property hitOnDragEnabled
+       * @default false
+       * @name hitOnDragEnabled
+       * @memberof Konva
+       * @example
+       * Konva.hitOnDragEnabled = true;
+       */
       hitOnDragEnabled: false,
+      /**
+       * Should we capture touch events and bind them to the touchstart target? That is how it works on DOM elements.
+       * The case: we touchstart on div1, then touchmove out of that element into another element div2.
+       * DOM will continue trigger touchmove events on div1 (not div2). Because events are "captured" into initial target.
+       * By default Konva do not do that and will trigger touchmove on another element, while pointer is moving.
+       * @property capturePointerEventsEnabled
+       * @default false
+       * @name capturePointerEventsEnabled
+       * @memberof Konva
+       * @example
+       * Konva.capturePointerEventsEnabled = true;
+       */
       capturePointerEventsEnabled: false,
       _mouseListenClick: false,
       _touchListenClick: false,
@@ -40,18 +87,80 @@
       _mouseDblClickPointerId: null,
       _touchDblClickPointerId: null,
       _pointerDblClickPointerId: null,
+      /**
+       * 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. Set this value before any components initializations.
+       * @property pixelRatio
+       * @default undefined
+       * @name pixelRatio
+       * @memberof Konva
+       * @example
+       * // before any Konva code:
+       * Konva.pixelRatio = 1;
+       */
       pixelRatio: (typeof window !== 'undefined' && window.devicePixelRatio) || 1,
+      /**
+       * 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;
+       */
       dragDistance: 3,
+      /**
+       * Use degree values for angle properties. You may set this property to false if you want to use radian values.
+       * @property angleDeg
+       * @default true
+       * @memberof Konva
+       * @example
+       * node.rotation(45); // 45 degrees
+       * Konva.angleDeg = false;
+       * node.rotation(Math.PI / 2); // PI/2 radian
+       */
       angleDeg: true,
+      /**
+       * Show different warnings about errors or wrong API usage
+       * @property showWarnings
+       * @default true
+       * @memberof Konva
+       * @example
+       * Konva.showWarnings = false;
+       */
       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];
+       */
       dragButtons: [0, 1],
+      /**
+       * returns whether or not drag and drop is currently active
+       * @method
+       * @memberof Konva
+       */
       isDragging() {
           return Konva$2['DD'].isDragging;
       },
+      /**
+       * returns whether or not a drag and drop operation is ready, but may
+       *  not necessarily have started
+       * @method
+       * @memberof Konva
+       */
       isDragReady() {
           return !!Konva$2['DD'].node;
       },
+      // user agent
       document: glob.document,
+      // insert Konva into global namespace (window)
+      // it is required for npm packages
       _injectGlobal(Konva) {
           glob.Konva = Konva;
       },
@@ -61,6 +170,29 @@
   };
   Konva$2._injectGlobal(Konva$2);
 
+  /*
+   * Last updated November 2011
+   * By Simon Sarris
+   * www.simonsarris.com
+   * sarris@acm.org
+   *
+   * Free to use and distribute at will
+   * So long as you are nice to people, etc
+   */
+  /*
+   * The usage of this class was inspired by some of the work done by a forked
+   * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
+   * class.  Modified by Eric Rowell
+   */
+  /**
+   * Transform constructor.
+   * In most of the cases you don't need to use it in your app. Because it is for internal usage in Konva core.
+   * But there is a documentation for that class in case you still want
+   * to make some manual calculations.
+   * @constructor
+   * @param {Array} [m] Optional six-element matrix
+   * @memberof Konva
+   */
   class Transform {
       constructor(m = [1, 0, 0, 1, 0, 0]) {
           this.dirty = false;
@@ -74,6 +206,14 @@
           this.m[4] = 0;
           this.m[5] = 0;
       }
+      /**
+       * Copy Konva.Transform object
+       * @method
+       * @name Konva.Transform#copy
+       * @returns {Konva.Transform}
+       * @example
+       * const tr = shape.getTransform().copy()
+       */
       copy() {
           return new Transform(this.m);
       }
@@ -85,6 +225,13 @@
           tr.m[4] = this.m[4];
           tr.m[5] = this.m[5];
       }
+      /**
+       * Transform point
+       * @method
+       * @name Konva.Transform#point
+       * @param {Object} point 2D point(x, y)
+       * @returns {Object} 2D point(x, y)
+       */
       point(point) {
           var m = this.m;
           return {
@@ -92,11 +239,27 @@
               y: m[1] * point.x + m[3] * point.y + m[5],
           };
       }
+      /**
+       * Apply translation
+       * @method
+       * @name Konva.Transform#translate
+       * @param {Number} x
+       * @param {Number} y
+       * @returns {Konva.Transform}
+       */
       translate(x, y) {
           this.m[4] += this.m[0] * x + this.m[2] * y;
           this.m[5] += this.m[1] * x + this.m[3] * y;
           return this;
       }
+      /**
+       * Apply scale
+       * @method
+       * @name Konva.Transform#scale
+       * @param {Number} sx
+       * @param {Number} sy
+       * @returns {Konva.Transform}
+       */
       scale(sx, sy) {
           this.m[0] *= sx;
           this.m[1] *= sx;
@@ -104,6 +267,13 @@
           this.m[3] *= sy;
           return this;
       }
+      /**
+       * Apply rotation
+       * @method
+       * @name Konva.Transform#rotate
+       * @param {Number} rad  Angle in radians
+       * @returns {Konva.Transform}
+       */
       rotate(rad) {
           var c = Math.cos(rad);
           var s = Math.sin(rad);
@@ -117,12 +287,26 @@
           this.m[3] = m22;
           return this;
       }
+      /**
+       * Returns the translation
+       * @method
+       * @name Konva.Transform#getTranslation
+       * @returns {Object} 2D point(x, y)
+       */
       getTranslation() {
           return {
               x: this.m[4],
               y: this.m[5],
           };
       }
+      /**
+       * Apply skew
+       * @method
+       * @name Konva.Transform#skew
+       * @param {Number} sx
+       * @param {Number} sy
+       * @returns {Konva.Transform}
+       */
       skew(sx, sy) {
           var m11 = this.m[0] + this.m[2] * sy;
           var m12 = this.m[1] + this.m[3] * sy;
@@ -134,6 +318,13 @@
           this.m[3] = m22;
           return this;
       }
+      /**
+       * Transform multiplication
+       * @method
+       * @name Konva.Transform#multiply
+       * @param {Konva.Transform} matrix
+       * @returns {Konva.Transform}
+       */
       multiply(matrix) {
           var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
           var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
@@ -149,6 +340,12 @@
           this.m[5] = dy;
           return this;
       }
+      /**
+       * Invert the matrix
+       * @method
+       * @name Konva.Transform#invert
+       * @returns {Konva.Transform}
+       */
       invert() {
           var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
           var m0 = this.m[3] * d;
@@ -165,13 +362,31 @@
           this.m[5] = m5;
           return this;
       }
+      /**
+       * return matrix
+       * @method
+       * @name Konva.Transform#getMatrix
+       */
       getMatrix() {
           return this.m;
       }
+      /**
+       * set to absolute position via translation
+       * @method
+       * @name Konva.Transform#setAbsolutePosition
+       * @returns {Konva.Transform}
+       * @author ericdrowell
+       */
       setAbsolutePosition(x, y) {
           var m0 = this.m[0], m1 = this.m[1], m2 = this.m[2], m3 = this.m[3], m4 = this.m[4], m5 = this.m[5], yt = (m0 * (y - m5) - m1 * (x - m4)) / (m0 * m3 - m1 * m2), xt = (x - m4 - m2 * yt) / m0;
           return this.translate(xt, yt);
       }
+      /**
+       * convert transformation matrix back into node's attributes
+       * @method
+       * @name Konva.Transform#decompose
+       * @returns {Konva.Transform}
+       */
       decompose() {
           var a = this.m[0];
           var b = this.m[1];
@@ -189,6 +404,7 @@
               skewX: 0,
               skewY: 0,
           };
+          // Apply the QR-like decomposition.
           if (a != 0 || b != 0) {
               var r = Math.sqrt(a * a + b * b);
               result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
@@ -211,6 +427,7 @@
           return result;
       }
   }
+  // CONSTANTS
   var OBJECT_ARRAY = '[object Array]', OBJECT_NUMBER = '[object Number]', OBJECT_STRING = '[object String]', OBJECT_BOOLEAN = '[object Boolean]', PI_OVER_DEG180 = Math.PI / 180, DEG180_OVER_PI = 180 / Math.PI, HASH$1 = '#', EMPTY_STRING$1 = '', ZERO = '0', KONVA_WARNING = 'Konva warning: ', KONVA_ERROR = 'Konva error: ', RGB_PAREN = 'rgb(', COLORS = {
       aliceblue: [240, 248, 255],
       antiquewhite: [250, 235, 215],
@@ -366,7 +583,14 @@
       function (f) {
           setTimeout(f, 60);
       };
+  /**
+   * @namespace Util
+   * @memberof Konva
+   */
   const Util = {
+      /*
+       * cherry-picked utilities from underscore.js
+       */
       _isElement(obj) {
           return !!(obj && obj.nodeType == 1);
       },
@@ -390,6 +614,7 @@
       _isBoolean(obj) {
           return Object.prototype.toString.call(obj) === OBJECT_BOOLEAN;
       },
+      // arrays are objects too
       isObject(val) {
           return val instanceof Object;
       },
@@ -404,6 +629,8 @@
       },
       _sign(number) {
           if (number === 0) {
+              // that is not what sign usually returns
+              // but that is what we need
               return 1;
           }
           if (number > 0) {
@@ -427,6 +654,7 @@
       },
       createCanvasElement() {
           var canvas = document.createElement('canvas');
+          // on some environments canvas.style is readonly
           try {
               canvas.style = canvas.style || {};
           }
@@ -444,7 +672,11 @@
           }
           return false;
       },
+      /*
+       * arg can be an image object or image data
+       */
       _urlToImage(url, callback) {
+          // if arg is a string, then it's a data url
           var imageObj = Util.createImageElement();
           imageObj.onload = function () {
               callback(imageObj);
@@ -463,6 +695,13 @@
               b: bigint & 255,
           };
       },
+      /**
+       * return random hex color
+       * @method
+       * @memberof Konva.Util
+       * @example
+       * shape.fill(Konva.Util.getRandomColor());
+       */
       getRandomColor() {
           var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
           while (randColor.length < 6) {
@@ -470,8 +709,20 @@
           }
           return HASH$1 + randColor;
       },
+      /**
+       * get RGB components of a color
+       * @method
+       * @memberof Konva.Util
+       * @param {String} color
+       * @example
+       * // each of the following examples return {r:0, g:0, b:255}
+       * var rgb = Konva.Util.getRGB('blue');
+       * var rgb = Konva.Util.getRGB('#0000ff');
+       * var rgb = Konva.Util.getRGB('rgb(0,0,255)');
+       */
       getRGB(color) {
           var rgb;
+          // color string
           if (color in COLORS) {
               rgb = COLORS[color];
               return {
@@ -481,9 +732,11 @@
               };
           }
           else if (color[0] === HASH$1) {
+              // hex
               return this._hexToRgb(color.substring(1));
           }
           else if (color.substr(0, 4) === RGB_PAREN) {
+              // rgb string
               rgb = RGB_REGEX.exec(color.replace(/ /g, ''));
               return {
                   r: parseInt(rgb[1], 10),
@@ -492,6 +745,7 @@
               };
           }
           else {
+              // default
               return {
                   r: 0,
                   g: 0,
@@ -499,6 +753,8 @@
               };
           }
       },
+      // convert any color string to RGBA object
+      // from https://github.com/component/color-parser
       colorToRGBA(str) {
           str = str || 'black';
           return (Util._namedColorToRBA(str) ||
@@ -508,6 +764,7 @@
               Util._rgbaColorToRGBA(str) ||
               Util._hslColorToRGBA(str));
       },
+      // Parse named css color. Like "green"
       _namedColorToRBA(str) {
           var c = COLORS[str.toLowerCase()];
           if (!c) {
@@ -520,6 +777,7 @@
               a: 1,
           };
       },
+      // Parse rgb(n, n, n)
       _rgbColorToRGBA(str) {
           if (str.indexOf('rgb(') === 0) {
               str = str.match(/rgb\(([^)]+)\)/)[1];
@@ -532,6 +790,7 @@
               };
           }
       },
+      // Parse rgba(n, n, n, n)
       _rgbaColorToRGBA(str) {
           if (str.indexOf('rgba(') === 0) {
               str = str.match(/rgba\(([^)]+)\)/)[1];
@@ -544,6 +803,7 @@
               };
           }
       },
+      // Parse #nnnnnn
       _hex6ColorToRGBA(str) {
           if (str[0] === '#' && str.length === 7) {
               return {
@@ -554,6 +814,7 @@
               };
           }
       },
+      // Parse #nnn
       _hex3ColorToRGBA(str) {
           if (str[0] === '#' && str.length === 4) {
               return {
@@ -564,8 +825,11 @@
               };
           }
       },
+      // Code adapted from https://github.com/Qix-/color-convert/blob/master/conversions.js#L244
       _hslColorToRGBA(str) {
+          // Check hsl() format
           if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) {
+              // Extract h, s, l
               const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str);
               const h = Number(hsl[0]) / 360;
               const s = Number(hsl[1]) / 100;
@@ -620,6 +884,15 @@
               };
           }
       },
+      /**
+       * check intersection of two client rectangles
+       * @method
+       * @memberof Konva.Util
+       * @param {Object} r1 - { x, y, width, height } client rectangle
+       * @param {Object} r2 - { x, y, width, height } client rectangle
+       * @example
+       * const overlapping = Konva.Util.haveIntersection(shape1.getClientRect(), shape2.getClientRect());
+       */
       haveIntersection(r1, r2) {
           return !(r2.x > r1.x + r1.width ||
               r2.x + r2.width < r1.x ||
@@ -712,6 +985,8 @@
           }
           return [x, y, dist];
       },
+      // line as array of points.
+      // line might be closed
       _getProjectionToLine(pt, line, isClosed) {
           var pc = Util.cloneObject(pt);
           var dist = Number.MAX_VALUE;
@@ -786,6 +1061,7 @@
           delete obj.visitedByCircularReferenceRemoval;
           return obj;
       },
+      // very simplified version of Object.assign
       _assign(target, source) {
           for (var key in source) {
               target[key] = source[key];
@@ -794,6 +1070,7 @@
       },
       _getFirstPointerId(evt) {
           if (!evt.touches) {
+              // fake id for mouse
               return 999;
           }
           else {
@@ -987,6 +1264,7 @@
       },
       addComponentsGetterSetter(constructor, attr, components, validator, after) {
           var len = components.length, capitalize = Util._capitalize, getter = GET + capitalize(attr), setter = SET$1 + capitalize(attr), n, component;
+          // getter
           constructor.prototype[getter] = function () {
               var ret = {};
               for (n = 0; n < len; n++) {
@@ -996,6 +1274,7 @@
               return ret;
           };
           var basicValidator = getComponentValidator(components);
+          // setter
           constructor.prototype[setter] = function (val) {
               var oldVal = this.attrs[attr], key;
               if (validator) {
@@ -1021,10 +1300,12 @@
       addOverloadedGetterSetter(constructor, attr) {
           var capitalizedAttr = Util._capitalize(attr), setter = SET$1 + capitalizedAttr, getter = GET + capitalizedAttr;
           constructor.prototype[attr] = function () {
+              // setting
               if (arguments.length) {
                   this[setter](arguments[0]);
                   return this;
               }
+              // getting
               return this[getter]();
           };
       },
@@ -1080,7 +1361,11 @@
       }
       return retArr;
   }
-  var COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', EQUALS = '=', CONTEXT_METHODS = [
+  var COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', 
+  // EMPTY_STRING = '',
+  EQUALS = '=', 
+  // SET = 'set',
+  CONTEXT_METHODS = [
       'arc',
       'arcTo',
       'beginPath',
@@ -1133,6 +1418,28 @@
       'imageSmoothingEnabled',
   ];
   const traceArrMax = 100;
+  /**
+   * Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions.
+   * With core Konva shapes you don't need to use this object. But you will use it if you want to create
+   * a [custom shape](/docs/react/Custom_Shape.html) or a [custom hit regions](/docs/events/Custom_Hit_Region.html).
+   * For full information about each 2d context API use [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
+   * @constructor
+   * @memberof Konva
+   * @example
+   * const rect = new Konva.Shape({
+   *    fill: 'red',
+   *    width: 100,
+   *    height: 100,
+   *    sceneFunc: (ctx, shape) => {
+   *      // ctx - is context wrapper
+   *      // shape - is instance of Konva.Shape, so it equals to "rect" variable
+   *      ctx.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
+   *
+   *      // automatically fill shape from props and draw hit region
+   *      ctx.fillStrokeShape(shape);
+   *    }
+   * })
+   */
   class Context {
       constructor(canvas) {
           this.canvas = canvas;
@@ -1142,20 +1449,40 @@
               this._enableTrace();
           }
       }
+      /**
+       * fill shape
+       * @method
+       * @name Konva.Context#fillShape
+       * @param {Konva.Shape} shape
+       */
       fillShape(shape) {
           if (shape.fillEnabled()) {
               this._fill(shape);
           }
       }
       _fill(shape) {
+          // abstract
       }
+      /**
+       * stroke shape
+       * @method
+       * @name Konva.Context#strokeShape
+       * @param {Konva.Shape} shape
+       */
       strokeShape(shape) {
           if (shape.hasStroke()) {
               this._stroke(shape);
           }
       }
       _stroke(shape) {
+          // abstract
       }
+      /**
+       * fill then stroke
+       * @method
+       * @name Konva.Context#fillStrokeShape
+       * @param {Konva.Shape} shape
+       */
       fillStrokeShape(shape) {
           if (shape.attrs.fillAfterStrokeEnabled) {
               this.strokeShape(shape);
@@ -1171,6 +1498,7 @@
           for (n = 0; n < len; n++) {
               trace = traceArr[n];
               method = trace.method;
+              // methods
               if (method) {
                   args = trace.args;
                   str += method;
@@ -1190,6 +1518,7 @@
                   }
               }
               else {
+                  // properties
                   str += trace.property;
                   if (!relaxed) {
                       str += EQUALS + trace.val;
@@ -1210,13 +1539,34 @@
               traceArr.shift();
           }
       }
+      /**
+       * reset canvas context transform
+       * @method
+       * @name Konva.Context#reset
+       */
       reset() {
           var pixelRatio = this.getCanvas().getPixelRatio();
           this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
       }
+      /**
+       * get canvas wrapper
+       * @method
+       * @name Konva.Context#getCanvas
+       * @returns {Konva.Canvas}
+       */
       getCanvas() {
           return this.canvas;
       }
+      /**
+       * clear canvas
+       * @method
+       * @name Konva.Context#clear
+       * @param {Object} [bounds]
+       * @param {Number} [bounds.x]
+       * @param {Number} [bounds.y]
+       * @param {Number} [bounds.width]
+       * @param {Number} [bounds.height]
+       */
       clear(bounds) {
           var canvas = this.getCanvas();
           if (bounds) {
@@ -1247,27 +1597,67 @@
       setAttr(attr, val) {
           this._context[attr] = val;
       }
+      /**
+       * arc function.
+       * @method
+       * @name Konva.Context#arc
+       */
       arc(a0, a1, a2, a3, a4, a5) {
           this._context.arc(a0, a1, a2, a3, a4, a5);
       }
+      /**
+       * arcTo function.
+       * @method
+       * @name Konva.Context#arcTo
+       */
       arcTo(a0, a1, a2, a3, a4) {
           this._context.arcTo(a0, a1, a2, a3, a4);
       }
+      /**
+       * beginPath function.
+       * @method
+       * @name Konva.Context#beginPath
+       */
       beginPath() {
           this._context.beginPath();
       }
+      /**
+       * bezierCurveTo function.
+       * @method
+       * @name Konva.Context#bezierCurveTo
+       */
       bezierCurveTo(a0, a1, a2, a3, a4, a5) {
           this._context.bezierCurveTo(a0, a1, a2, a3, a4, a5);
       }
+      /**
+       * clearRect function.
+       * @method
+       * @name Konva.Context#clearRect
+       */
       clearRect(a0, a1, a2, a3) {
           this._context.clearRect(a0, a1, a2, a3);
       }
+      /**
+       * clip function.
+       * @method
+       * @name Konva.Context#clip
+       */
       clip() {
           this._context.clip();
       }
+      /**
+       * closePath function.
+       * @method
+       * @name Konva.Context#closePath
+       */
       closePath() {
           this._context.closePath();
       }
+      /**
+       * createImageData function.
+       * @method
+       * @name Konva.Context#createImageData
+       */
       createImageData(a0, a1) {
           var a = arguments;
           if (a.length === 2) {
@@ -1277,16 +1667,37 @@
               return this._context.createImageData(a0);
           }
       }
+      /**
+       * createLinearGradient function.
+       * @method
+       * @name Konva.Context#createLinearGradient
+       */
       createLinearGradient(a0, a1, a2, a3) {
           return this._context.createLinearGradient(a0, a1, a2, a3);
       }
+      /**
+       * createPattern function.
+       * @method
+       * @name Konva.Context#createPattern
+       */
       createPattern(a0, a1) {
           return this._context.createPattern(a0, a1);
       }
+      /**
+       * createRadialGradient function.
+       * @method
+       * @name Konva.Context#createRadialGradient
+       */
       createRadialGradient(a0, a1, a2, a3, a4, a5) {
           return this._context.createRadialGradient(a0, a1, a2, a3, a4, a5);
       }
+      /**
+       * drawImage function.
+       * @method
+       * @name Konva.Context#drawImage
+       */
       drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8) {
+          // this._context.drawImage(...arguments);
           var a = arguments, _context = this._context;
           if (a.length === 3) {
               _context.drawImage(a0, a1, a2);
@@ -1298,12 +1709,27 @@
               _context.drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8);
           }
       }
+      /**
+       * ellipse function.
+       * @method
+       * @name Konva.Context#ellipse
+       */
       ellipse(a0, a1, a2, a3, a4, a5, a6, a7) {
           this._context.ellipse(a0, a1, a2, a3, a4, a5, a6, a7);
       }
+      /**
+       * isPointInPath function.
+       * @method
+       * @name Konva.Context#isPointInPath
+       */
       isPointInPath(x, y) {
           return this._context.isPointInPath(x, y);
       }
+      /**
+       * fill function.
+       * @method
+       * @name Konva.Context#fill
+       */
       fill(path2d) {
           if (path2d) {
               this._context.fill(path2d);
@@ -1312,12 +1738,27 @@
               this._context.fill();
           }
       }
+      /**
+       * fillRect function.
+       * @method
+       * @name Konva.Context#fillRect
+       */
       fillRect(x, y, width, height) {
           this._context.fillRect(x, y, width, height);
       }
+      /**
+       * strokeRect function.
+       * @method
+       * @name Konva.Context#strokeRect
+       */
       strokeRect(x, y, width, height) {
           this._context.strokeRect(x, y, width, height);
       }
+      /**
+       * fillText function.
+       * @method
+       * @name Konva.Context#fillText
+       */
       fillText(text, x, y, maxWidth) {
           if (maxWidth) {
               this._context.fillText(text, x, y, maxWidth);
@@ -1326,56 +1767,135 @@
               this._context.fillText(text, x, y);
           }
       }
+      /**
+       * measureText function.
+       * @method
+       * @name Konva.Context#measureText
+       */
       measureText(text) {
           return this._context.measureText(text);
       }
+      /**
+       * getImageData function.
+       * @method
+       * @name Konva.Context#getImageData
+       */
       getImageData(a0, a1, a2, a3) {
           return this._context.getImageData(a0, a1, a2, a3);
       }
+      /**
+       * lineTo function.
+       * @method
+       * @name Konva.Context#lineTo
+       */
       lineTo(a0, a1) {
           this._context.lineTo(a0, a1);
       }
+      /**
+       * moveTo function.
+       * @method
+       * @name Konva.Context#moveTo
+       */
       moveTo(a0, a1) {
           this._context.moveTo(a0, a1);
       }
+      /**
+       * rect function.
+       * @method
+       * @name Konva.Context#rect
+       */
       rect(a0, a1, a2, a3) {
           this._context.rect(a0, a1, a2, a3);
       }
+      /**
+       * putImageData function.
+       * @method
+       * @name Konva.Context#putImageData
+       */
       putImageData(a0, a1, a2) {
           this._context.putImageData(a0, a1, a2);
       }
+      /**
+       * quadraticCurveTo function.
+       * @method
+       * @name Konva.Context#quadraticCurveTo
+       */
       quadraticCurveTo(a0, a1, a2, a3) {
           this._context.quadraticCurveTo(a0, a1, a2, a3);
       }
+      /**
+       * restore function.
+       * @method
+       * @name Konva.Context#restore
+       */
       restore() {
           this._context.restore();
       }
+      /**
+       * rotate function.
+       * @method
+       * @name Konva.Context#rotate
+       */
       rotate(a0) {
           this._context.rotate(a0);
       }
+      /**
+       * save function.
+       * @method
+       * @name Konva.Context#save
+       */
       save() {
           this._context.save();
       }
+      /**
+       * scale function.
+       * @method
+       * @name Konva.Context#scale
+       */
       scale(a0, a1) {
           this._context.scale(a0, a1);
       }
+      /**
+       * setLineDash function.
+       * @method
+       * @name Konva.Context#setLineDash
+       */
       setLineDash(a0) {
+          // works for Chrome and IE11
           if (this._context.setLineDash) {
               this._context.setLineDash(a0);
           }
           else if ('mozDash' in this._context) {
+              // verified that this works in firefox
               this._context['mozDash'] = a0;
           }
           else if ('webkitLineDash' in this._context) {
+              // does not currently work for Safari
               this._context['webkitLineDash'] = a0;
           }
+          // no support for IE9 and IE10
       }
+      /**
+       * getLineDash function.
+       * @method
+       * @name Konva.Context#getLineDash
+       */
       getLineDash() {
           return this._context.getLineDash();
       }
+      /**
+       * setTransform function.
+       * @method
+       * @name Konva.Context#setTransform
+       */
       setTransform(a0, a1, a2, a3, a4, a5) {
           this._context.setTransform(a0, a1, a2, a3, a4, a5);
       }
+      /**
+       * stroke function.
+       * @method
+       * @name Konva.Context#stroke
+       */
       stroke(path2d) {
           if (path2d) {
               this._context.stroke(path2d);
@@ -1384,17 +1904,33 @@
               this._context.stroke();
           }
       }
+      /**
+       * strokeText function.
+       * @method
+       * @name Konva.Context#strokeText
+       */
       strokeText(a0, a1, a2, a3) {
           this._context.strokeText(a0, a1, a2, a3);
       }
+      /**
+       * transform function.
+       * @method
+       * @name Konva.Context#transform
+       */
       transform(a0, a1, a2, a3, a4, a5) {
           this._context.transform(a0, a1, a2, a3, a4, a5);
       }
+      /**
+       * translate function.
+       * @method
+       * @name Konva.Context#translate
+       */
       translate(a0, a1) {
           this._context.translate(a0, a1);
       }
       _enableTrace() {
           var that = this, len = CONTEXT_METHODS.length, origSetter = this.setAttr, n, args;
+          // to prevent creating scope function at each loop
           var func = function (methodName) {
               var origMethod = that[methodName], ret;
               that[methodName] = function () {
@@ -1407,9 +1943,11 @@
                   return ret;
               };
           };
+          // methods
           for (n = 0; n < len; n++) {
               func(CONTEXT_METHODS[n]);
           }
+          // attrs
           that.setAttr = function () {
               origSetter.apply(that, arguments);
               var prop = arguments[0];
@@ -1469,6 +2007,7 @@
       }
       _fill(shape) {
           var hasColor = shape.fill(), fillPriority = shape.getFillPriority();
+          // priority fills
           if (hasColor && fillPriority === 'color') {
               this._fillColor(shape);
               return;
@@ -1488,6 +2027,7 @@
               this._fillRadialGradient(shape);
               return;
           }
+          // now just try and fill with whatever is available
           if (hasColor) {
               this._fillColor(shape);
           }
@@ -1504,6 +2044,7 @@
       _strokeLinearGradient(shape) {
           var start = shape.getStrokeLinearGradientStartPoint(), end = shape.getStrokeLinearGradientEndPoint(), colorStops = shape.getStrokeLinearGradientColorStops(), grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
           if (colorStops) {
+              // build color stops
               for (var n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -1511,7 +2052,9 @@
           }
       }
       _stroke(shape) {
-          var dash = shape.dash(), strokeScaleEnabled = shape.getStrokeScaleEnabled();
+          var dash = shape.dash(), 
+          // ignore strokeScaleEnabled for Text
+          strokeScaleEnabled = shape.getStrokeScaleEnabled();
           if (shape.hasStroke()) {
               if (!strokeScaleEnabled) {
                   this.save();
@@ -1566,6 +2109,7 @@
       }
       _stroke(shape) {
           if (shape.hasHitStroke()) {
+              // ignore strokeScaleEnabled for Text
               var strokeScaleEnabled = shape.getStrokeScaleEnabled();
               if (!strokeScaleEnabled) {
                   this.save();
@@ -1585,6 +2129,7 @@
       }
   }
 
+  // calculate pixel ratio
   var _pixelRatio;
   function getDevicePixelRatio() {
       if (_pixelRatio) {
@@ -1603,6 +2148,17 @@
       })();
       return _pixelRatio;
   }
+  /**
+   * Canvas Renderer constructor. It is a wrapper around native canvas element.
+   * Usually you don't need to use it manually.
+   * @constructor
+   * @abstract
+   * @memberof Konva
+   * @param {Object} config
+   * @param {Number} config.width
+   * @param {Number} config.height
+   * @param {Number} config.pixelRatio
+   */
   class Canvas {
       constructor(config) {
           this.pixelRatio = 1;
@@ -1613,6 +2169,7 @@
           var pixelRatio = conf.pixelRatio || Konva$2.pixelRatio || getDevicePixelRatio();
           this.pixelRatio = pixelRatio;
           this._canvas = Util.createCanvasElement();
+          // set inline styles
           this._canvas.style.padding = '0';
           this._canvas.style.margin = '0';
           this._canvas.style.border = '0';
@@ -1621,6 +2178,12 @@
           this._canvas.style.top = '0';
           this._canvas.style.left = '0';
       }
+      /**
+       * get canvas context
+       * @method
+       * @name Konva.Canvas#getContext
+       * @returns {CanvasContext} context
+       */
       getContext() {
           return this.context;
       }
@@ -1633,12 +2196,14 @@
           this.setSize(this.getWidth() / previousRatio, this.getHeight() / previousRatio);
       }
       setWidth(width) {
+          // take into account pixel ratio
           this.width = this._canvas.width = width * this.pixelRatio;
           this._canvas.style.width = width + 'px';
           var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
           _context.scale(pixelRatio, pixelRatio);
       }
       setHeight(height) {
+          // take into account pixel ratio
           this.height = this._canvas.height = height * this.pixelRatio;
           this._canvas.style.height = height + 'px';
           var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
@@ -1654,8 +2219,18 @@
           this.setWidth(width || 0);
           this.setHeight(height || 0);
       }
+      /**
+       * to data url
+       * @method
+       * @name Konva.Canvas#toDataURL
+       * @param {String} mimeType
+       * @param {Number} quality between 0 and 1 for jpg mime types
+       * @returns {String} data url string
+       */
       toDataURL(mimeType, quality) {
           try {
+              // If this call fails (due to browser bug, like in Firefox 3.6),
+              // then revert to previous no-parameter image/png behavior
               return this._canvas.toDataURL(mimeType, quality);
           }
           catch (e) {
@@ -1671,6 +2246,26 @@
           }
       }
   }
+  /**
+   * get/set pixel ratio.
+   * KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
+   *  on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
+   *  of 1.  Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
+   *  of 2.  Some Macbook Pros, and iMacs also have a device pixel ratio of 2.  Some high end Android devices have pixel
+   *  ratios of 2 or 3.  Some browsers like Firefox allow you to configure the pixel ratio of the viewport.  Unless otherwise
+   *  specificed, the pixel ratio will be defaulted to the actual device pixel ratio.  You can override the device pixel
+   *  ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
+   * @name Konva.Canvas#pixelRatio
+   * @method
+   * @param {Number} pixelRatio
+   * @returns {Number}
+   * @example
+   * // get
+   * var pixelRatio = layer.getCanvas.pixelRatio();
+   *
+   * // set
+   * layer.getCanvas().pixelRatio(3);
+   */
   Factory.addGetterSetter(Canvas, 'pixelRatio', undefined, getNumberValidator());
   class SceneCanvas extends Canvas {
       constructor(config = { width: 0, height: 0 }) {
@@ -1700,6 +2295,7 @@
       },
       justDragged: false,
       get node() {
+          // return first dragging node
           var node;
           DD._dragElements.forEach((elem) => {
               node = elem.node;
@@ -1707,16 +2303,21 @@
           return node;
       },
       _dragElements: new Map(),
+      // methods
       _drag(evt) {
           const nodesToFireEvents = [];
           DD._dragElements.forEach((elem, key) => {
               const { node } = elem;
+              // we need to find pointer relative to that node
               const stage = node.getStage();
               stage.setPointersPositions(evt);
+              // it is possible that user call startDrag without any event
+              // it that case we need to detect first movable pointer and attach it into the node
               if (elem.pointerId === undefined) {
                   elem.pointerId = Util._getFirstPointerId(evt);
               }
               const pos = stage._changedPointerPositions.find((pos) => pos.id === elem.pointerId);
+              // not related pointer
               if (!pos) {
                   return;
               }
@@ -1727,6 +2328,7 @@
                       return;
                   }
                   node.startDrag({ evt });
+                  // a user can stop dragging inside `dragstart`
                   if (!node.isDragging()) {
                       return;
                   }
@@ -1734,6 +2336,7 @@
               node._setDragPosition(evt, elem);
               nodesToFireEvents.push(node);
           });
+          // call dragmove only after ALL positions are changed
           nodesToFireEvents.forEach((node) => {
               node.fire('dragmove', {
                   type: 'dragmove',
@@ -1742,18 +2345,23 @@
               }, true);
           });
       },
+      // dragBefore and dragAfter allows us to set correct order of events
+      // setup all in dragbefore, and stop dragging only after pointerup triggered.
       _endDragBefore(evt) {
           DD._dragElements.forEach((elem) => {
               const { node } = elem;
+              // we need to find pointer relative to that node
               const stage = node.getStage();
               if (evt) {
                   stage.setPointersPositions(evt);
               }
               const pos = stage._changedPointerPositions.find((pos) => pos.id === elem.pointerId);
+              // that pointer is not related
               if (!pos) {
                   return;
               }
               if (elem.dragStatus === 'dragging' || elem.dragStatus === 'stopped') {
+                  // if a node is stopped manually we still need to reset events:
                   DD.justDragged = true;
                   Konva$2._mouseListenClick = false;
                   Konva$2._touchListenClick = false;
@@ -1791,6 +2399,7 @@
       window.addEventListener('touchend', DD._endDragAfter, false);
   }
 
+  // CONSTANTS
   var ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER$1 = 'mouseenter', MOUSELEAVE$1 = 'mouseleave', SET = 'set', SHAPE = 'Shape', SPACE$1 = ' ', STAGE$1 = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR$1 = [
       'xChange.konva',
       'yChange.konva',
@@ -1804,6 +2413,33 @@
       'transformsEnabledChange.konva',
   ].join(SPACE$1);
   let idCounter$1 = 1;
+  /**
+   * Node constructor. Nodes are entities that can be transformed, layered,
+   * and have bound events. The stage, layers, groups, and shapes all extend Node.
+   * @constructor
+   * @memberof Konva
+   * @param {Object} config
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   */
   class Node {
       constructor(config) {
           this._id = idCounter$1++;
@@ -1821,13 +2457,20 @@
           this._isUnderCache = false;
           this._dragEventId = null;
           this._shouldFireChangeEvents = false;
+          // on initial set attrs wi don't need to fire change events
+          // because nobody is listening to them yet
           this.setAttrs(config);
           this._shouldFireChangeEvents = true;
+          // all change event listeners are attached to the prototype
       }
       hasChildren() {
           return false;
       }
       _clearCache(attr) {
+          // if we want to clear transform cache
+          // we don't really need to remove it from the cache
+          // but instead mark as "dirty"
+          // so we don't need to create a new instance next time
           if ((attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM) &&
               this._cache.get(attr)) {
               this._cache.get(attr).dirty = true;
@@ -1841,8 +2484,11 @@
       }
       _getCache(attr, privateGetter) {
           var cache = this._cache.get(attr);
+          // for transform the cache can be NOT empty
+          // but we still need to recalculate it if it is dirty
           var isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
           var invalid = cache === undefined || (isTransform && cache.dirty === true);
+          // if not cached, we need to set it using the private getter method.
           if (invalid) {
               cache = privateGetter.call(this);
               this._cache.set(attr, cache);
@@ -1850,6 +2496,8 @@
           return cache;
       }
       _calculate(name, deps, getter) {
+          // if we are trying to calculate function for the first time
+          // we need to attach listeners for change events
           if (!this._attachedDepsListeners.get(name)) {
               const depsString = deps.map((dep) => dep + 'Change.konva').join(SPACE$1);
               this.on(depsString, () => {
@@ -1857,26 +2505,86 @@
               });
               this._attachedDepsListeners.set(name, true);
           }
+          // just use cache function
           return this._getCache(name, getter);
       }
       _getCanvasCache() {
           return this._cache.get(CANVAS);
       }
+      /*
+       * when the logic for a cached result depends on ancestor propagation, use this
+       * method to clear self and children cache
+       */
       _clearSelfAndDescendantCache(attr) {
           this._clearCache(attr);
+          // trigger clear cache, so transformer can use it
           if (attr === ABSOLUTE_TRANSFORM) {
               this.fire('absoluteTransformChange');
           }
       }
+      /**
+       * clear cached canvas
+       * @method
+       * @name Konva.Node#clearCache
+       * @returns {Konva.Node}
+       * @example
+       * node.clearCache();
+       */
       clearCache() {
           this._cache.delete(CANVAS);
           this._clearSelfAndDescendantCache();
           this._requestDraw();
           return this;
       }
+      /**
+       *  cache node to improve drawing performance, apply filters, or create more accurate
+       *  hit regions. For all basic shapes size of cache canvas will be automatically detected.
+       *  If you need to cache your custom `Konva.Shape` instance you have to pass shape's bounding box
+       *  properties. Look at [https://konvajs.org/docs/performance/Shape_Caching.html](https://konvajs.org/docs/performance/Shape_Caching.html) for more information.
+       * @method
+       * @name Konva.Node#cache
+       * @param {Object} [config]
+       * @param {Number} [config.x]
+       * @param {Number} [config.y]
+       * @param {Number} [config.width]
+       * @param {Number} [config.height]
+       * @param {Number} [config.offset]  increase canvas size by `offset` pixel in all directions.
+       * @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached
+       *  region for debugging purposes
+       * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
+       * @param {Boolean} [config.imageSmoothingEnabled] control imageSmoothingEnabled property of created canvas for cache
+       * @param {Number} [config.hitCanvasPixelRatio] change quality (or pixel ratio) of cached hit canvas.
+       * @returns {Konva.Node}
+       * @example
+       * // cache a shape with the x,y position of the bounding box at the center and
+       * // the width and height of the bounding box equal to the width and height of
+       * // the shape obtained from shape.width() and shape.height()
+       * image.cache();
+       *
+       * // cache a node and define the bounding box position and size
+       * node.cache({
+       *   x: -30,
+       *   y: -30,
+       *   width: 100,
+       *   height: 200
+       * });
+       *
+       * // cache a node and draw a red border around the bounding box
+       * // for debugging purposes
+       * node.cache({
+       *   x: -30,
+       *   y: -30,
+       *   width: 100,
+       *   height: 200,
+       *   offset : 10,
+       *   drawBorder: true
+       * });
+       */
       cache(config) {
           var conf = config || {};
           var rect = {};
+          // don't call getClientRect if we have all attributes
+          // it means call it only if have one undefined
           if (conf.x === undefined ||
               conf.y === undefined ||
               conf.width === undefined ||
@@ -1920,6 +2628,7 @@
           hitContext.save();
           sceneContext.translate(-x, -y);
           hitContext.translate(-x, -y);
+          // extra flag to skip on getAbsolute opacity calc
           this._isUnderCache = true;
           this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
           this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
@@ -1928,6 +2637,8 @@
           this._isUnderCache = false;
           sceneContext.restore();
           hitContext.restore();
+          // this will draw a red border around the cached box for
+          // debugging purposes
           if (drawBorder) {
               sceneContext.save();
               sceneContext.beginPath();
@@ -1948,10 +2659,54 @@
           this._requestDraw();
           return this;
       }
+      /**
+       * determine if node is currently cached
+       * @method
+       * @name Konva.Node#isCached
+       * @returns {Boolean}
+       */
       isCached() {
           return this._cache.has(CANVAS);
       }
+      /**
+       * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
+       * The purpose of the method is similar to getBoundingClientRect API of the DOM.
+       * @method
+       * @name Konva.Node#getClientRect
+       * @param {Object} config
+       * @param {Boolean} [config.skipTransform] should we apply transform to node for calculating rect?
+       * @param {Boolean} [config.skipShadow] should we apply shadow to the node for calculating bound box?
+       * @param {Boolean} [config.skipStroke] should we apply stroke to the node for calculating bound box?
+       * @param {Object} [config.relativeTo] calculate client rect relative to one of the parents
+       * @returns {Object} rect with {x, y, width, height} properties
+       * @example
+       * var rect = new Konva.Rect({
+       *      width : 100,
+       *      height : 100,
+       *      x : 50,
+       *      y : 50,
+       *      strokeWidth : 4,
+       *      stroke : 'black',
+       *      offsetX : 50,
+       *      scaleY : 2
+       * });
+       *
+       * // get client rect without think off transformations (position, rotation, scale, offset, etc)
+       * rect.getClientRect({ skipTransform: true});
+       * // returns {
+       * //     x : -2,   // two pixels for stroke / 2
+       * //     y : -2,
+       * //     width : 104, // increased by 4 for stroke
+       * //     height : 104
+       * //}
+       *
+       * // get client rect with transformation applied
+       * rect.getClientRect();
+       * // returns Object {x: -2, y: 46, width: 104, height: 208}
+       */
       getClientRect(config) {
+          // abstract method
+          // redefine in Container and Shape
           throw new Error('abstract "getClientRect" method call');
       }
       _transformedRect(rect, top) {
@@ -2008,8 +2763,10 @@
                   try {
                       len = filters.length;
                       filterContext.clear();
+                      // copy cached canvas onto filter context
                       filterContext.drawImage(sceneCanvas._canvas, 0, 0, sceneCanvas.getWidth() / ratio, sceneCanvas.getHeight() / ratio);
                       imageData = filterContext.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
+                      // apply filters to filter context
                       for (n = 0; n < len; n++) {
                           filter = filters[n];
                           if (typeof filter !== 'function') {
@@ -2033,17 +2790,84 @@
           }
           return sceneCanvas;
       }
+      /**
+       * bind events to the node. KonvaJS supports mouseover, mousemove,
+       *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
+       *  touchend, tap, dbltap, dragstart, dragmove, and dragend events.
+       *  Pass in a string of events delimited by a space to bind multiple events at once
+       *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
+       *  event by name such as 'click.foobar'.
+       * @method
+       * @name Konva.Node#on
+       * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
+       * @param {Function} handler The handler function. The first argument of that function is event object. Event object has `target` as main target of the event, `currentTarget` as current node listener and `evt` as native browser event.
+       * @returns {Konva.Node}
+       * @example
+       * // add click listener
+       * node.on('click', function() {
+       *   console.log('you clicked me!');
+       * });
+       *
+       * // get the target node
+       * node.on('click', function(evt) {
+       *   console.log(evt.target);
+       * });
+       *
+       * // stop event propagation
+       * node.on('click', function(evt) {
+       *   evt.cancelBubble = true;
+       * });
+       *
+       * // bind multiple listeners
+       * node.on('click touchstart', function() {
+       *   console.log('you clicked/touched me!');
+       * });
+       *
+       * // namespace listener
+       * node.on('click.foo', function() {
+       *   console.log('you clicked/touched me!');
+       * });
+       *
+       * // get the event type
+       * node.on('click tap', function(evt) {
+       *   var eventType = evt.type;
+       * });
+       *
+       * // get native event object
+       * node.on('click tap', function(evt) {
+       *   var nativeEvent = evt.evt;
+       * });
+       *
+       * // for change events, get the old and new val
+       * node.on('xChange', function(evt) {
+       *   var oldVal = evt.oldVal;
+       *   var newVal = evt.newVal;
+       * });
+       *
+       * // get event targets
+       * // with event delegations
+       * layer.on('click', 'Group', function(evt) {
+       *   var shape = evt.target;
+       *   var group = evt.currentTarget;
+       * });
+       */
       on(evtStr, handler) {
           this._cache && this._cache.delete(ALL_LISTENERS);
           if (arguments.length === 3) {
               return this._delegate.apply(this, arguments);
           }
           var events = evtStr.split(SPACE$1), len = events.length, n, event, parts, baseEvent, name;
+          /*
+           * loop through types and attach event listeners to
+           * each one.  eg. 'click mouseover.namespace mouseout'
+           * will create three event bindings
+           */
           for (n = 0; n < len; n++) {
               event = events[n];
               parts = event.split('.');
               baseEvent = parts[0];
               name = parts[1] || '';
+              // create events array if it doesn't exist
               if (!this.eventListeners[baseEvent]) {
                   this.eventListeners[baseEvent] = [];
               }
@@ -2054,10 +2878,32 @@
           }
           return this;
       }
+      /**
+       * remove event bindings from the node. Pass in a string of
+       *  event types delimmited by a space to remove multiple event
+       *  bindings at once such as 'mousedown mouseup mousemove'.
+       *  include a namespace to remove an event binding by name
+       *  such as 'click.foobar'. If you only give a name like '.foobar',
+       *  all events in that namespace will be removed.
+       * @method
+       * @name Konva.Node#off
+       * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar'
+       * @returns {Konva.Node}
+       * @example
+       * // remove listener
+       * node.off('click');
+       *
+       * // remove multiple listeners
+       * node.off('click touchstart');
+       *
+       * // remove listener by name
+       * node.off('click.foo');
+       */
       off(evtStr, callback) {
           var events = (evtStr || '').split(SPACE$1), len = events.length, n, t, event, parts, baseEvent, name;
           this._cache && this._cache.delete(ALL_LISTENERS);
           if (!evtStr) {
+              // remove all events
               for (t in this.eventListeners) {
                   this._off(t);
               }
@@ -2080,6 +2926,7 @@
           }
           return this;
       }
+      // some event aliases for third party integration like HammerJS
       dispatchEvent(evt) {
           var e = {
               target: this,
@@ -2090,6 +2937,7 @@
           return this;
       }
       addEventListener(type, handler) {
+          // we have to pass native event to handler
           this.on(type, function (evt) {
               handler.call(this, evt.evt);
           });
@@ -2099,6 +2947,7 @@
           this.off(type);
           return this;
       }
+      // like node.on
       _delegate(event, selector, handler) {
           var stopNode = this;
           this.on(event, function (evt) {
@@ -2110,10 +2959,20 @@
               }
           });
       }
+      /**
+       * remove a node from parent, but don't destroy. You can reuse the node later.
+       * @method
+       * @name Konva.Node#remove
+       * @returns {Konva.Node}
+       * @example
+       * node.remove();
+       */
       remove() {
           if (this.isDragging()) {
               this.stopDrag();
           }
+          // we can have drag element but that is not dragged yet
+          // so just clear it
           DD._dragElements.delete(this._id);
           this._remove();
           return this;
@@ -2127,6 +2986,8 @@
           this._clearSelfAndDescendantCache(LISTENING);
       }
       _remove() {
+          // every cached attr that is calculated via node tree
+          // traversal must be cleared when removing a node
           this._clearCaches();
           var parent = this.getParent();
           if (parent && parent.children) {
@@ -2135,17 +2996,45 @@
               this.parent = null;
           }
       }
+      /**
+       * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
+       * If the node is a container (Group, Stage or Layer) it will destroy all children too.
+       * @method
+       * @name Konva.Node#destroy
+       * @example
+       * node.destroy();
+       */
       destroy() {
           this.remove();
           return this;
       }
+      /**
+       * get attr
+       * @method
+       * @name Konva.Node#getAttr
+       * @param {String} attr
+       * @returns {Integer|String|Object|Array}
+       * @example
+       * var x = node.getAttr('x');
+       */
       getAttr(attr) {
           var method = 'get' + Util._capitalize(attr);
           if (Util._isFunction(this[method])) {
               return this[method]();
           }
+          // otherwise get directly
           return this.attrs[attr];
       }
+      /**
+       * get ancestors
+       * @method
+       * @name Konva.Node#getAncestors
+       * @returns {Array}
+       * @example
+       * shape.getAncestors().forEach(function(node) {
+       *   console.log(node.getId());
+       * })
+       */
       getAncestors() {
           var parent = this.getParent(), ancestors = [];
           while (parent) {
@@ -2154,9 +3043,27 @@
           }
           return ancestors;
       }
+      /**
+       * get attrs object literal
+       * @method
+       * @name Konva.Node#getAttrs
+       * @returns {Object}
+       */
       getAttrs() {
           return this.attrs || {};
       }
+      /**
+       * set multiple attrs at once using an object literal
+       * @method
+       * @name Konva.Node#setAttrs
+       * @param {Object} config object containing key value pairs
+       * @returns {Konva.Node}
+       * @example
+       * node.setAttrs({
+       *   x: 5,
+       *   fill: 'red'
+       * });
+       */
       setAttrs(config) {
           this._batchTransformChanges(() => {
               var key, method;
@@ -2168,16 +3075,33 @@
                       continue;
                   }
                   method = SET + Util._capitalize(key);
+                  // use setter if available
                   if (Util._isFunction(this[method])) {
                       this[method](config[key]);
                   }
                   else {
+                      // otherwise set directly
                       this._setAttr(key, config[key]);
                   }
               }
           });
           return this;
       }
+      /**
+       * determine if node is listening for events by taking into account ancestors.
+       *
+       * Parent    | Self      | isListening
+       * listening | listening |
+       * ----------+-----------+------------
+       * T         | T         | T
+       * T         | F         | F
+       * F         | T         | F
+       * F         | F         | F
+       *
+       * @method
+       * @name Konva.Node#isListening
+       * @returns {Boolean}
+       */
       isListening() {
           return this._getCache(LISTENING, this._isListening);
       }
@@ -2194,6 +3118,20 @@
               return true;
           }
       }
+      /**
+       * determine if node is visible by taking into account ancestors.
+       *
+       * Parent    | Self      | isVisible
+       * visible   | visible   |
+       * ----------+-----------+------------
+       * T         | T         | T
+       * T         | F         | F
+       * F         | T         | F
+       * F         | F         | F
+       * @method
+       * @name Konva.Node#isVisible
+       * @returns {Boolean}
+       */
       isVisible() {
           return this._getCache(VISIBLE, this._isVisible);
       }
@@ -2230,10 +3168,22 @@
           var dragSkip = !skipDragCheck && !Konva$2.hitOnDragEnabled && layerUnderDrag;
           return this.isListening() && this.isVisible() && !dragSkip;
       }
+      /**
+       * show node. set visible = true
+       * @method
+       * @name Konva.Node#show
+       * @returns {Konva.Node}
+       */
       show() {
           this.visible(true);
           return this;
       }
+      /**
+       * hide node.  Hidden nodes are no longer detectable
+       * @method
+       * @name Konva.Node#hide
+       * @returns {Konva.Node}
+       */
       hide() {
           this.visible(false);
           return this;
@@ -2241,6 +3191,13 @@
       getZIndex() {
           return this.index || 0;
       }
+      /**
+       * get absolute z-index which takes into account sibling
+       *  and ancestor indices
+       * @method
+       * @name Konva.Node#getAbsoluteZIndex
+       * @returns {Integer}
+       */
       getAbsoluteZIndex() {
           var depth = this.getDepth(), that = this, index = 0, nodes, len, n, child;
           function addChildren(children) {
@@ -2265,6 +3222,14 @@
           }
           return index;
       }
+      /**
+       * get node depth in node tree.  Returns an integer.
+       *  e.g. Stage depth will always be 0.  Layers will always be 1.  Groups and Shapes will always
+       *  be >= 2
+       * @method
+       * @name Konva.Node#getDepth
+       * @returns {Integer}
+       */
       getDepth() {
           var depth = 0, parent = this.parent;
           while (parent) {
@@ -2273,6 +3238,10 @@
           }
           return depth;
       }
+      // sometimes we do several attributes changes
+      // like node.position(pos)
+      // for performance reasons, lets batch transform reset
+      // so it work faster
       _batchTransformChanges(func) {
           this._batchingTransformChange = true;
           func();
@@ -2296,18 +3265,48 @@
               y: this.y(),
           };
       }
+      /**
+       * get position of first pointer (like mouse or first touch) relative to local coordinates of current node
+       * @method
+       * @name Konva.Node#getRelativePointerPosition
+       * @returns {Konva.Node}
+       * @example
+       *
+       * // let's think we have a rectangle at position x = 10, y = 10
+       * // now we clicked at x = 15, y = 15 of the stage
+       * // if you want to know position of the click, related to the rectangle you can use
+       * rect.getRelativePointerPosition();
+       */
       getRelativePointerPosition() {
           if (!this.getStage()) {
               return null;
           }
+          // get pointer (say mouse or touch) position
           var pos = this.getStage().getPointerPosition();
           if (!pos) {
               return null;
           }
           var transform = this.getAbsoluteTransform().copy();
+          // to detect relative position we need to invert transform
           transform.invert();
+          // now we can find relative point
           return transform.point(pos);
       }
+      /**
+       * get absolute position of a node. That function can be used to calculate absolute position, but relative to any ancestor
+       * @method
+       * @name Konva.Node#getAbsolutePosition
+       * @param {Object} Ancestor optional ancestor node
+       * @returns {Konva.Node}
+       * @example
+       *
+       * // returns absolute position relative to top-left corner of canvas
+       * node.getAbsolutePosition();
+       *
+       * // calculate absolute position of node, inside stage
+       * // so stage transforms are ignored
+       * node.getAbsolutePosition(stage)
+       */
       getAbsolutePosition(top) {
           let haveCachedParent = false;
           let parent = this.parent;
@@ -2319,19 +3318,24 @@
               parent = parent.parent;
           }
           if (haveCachedParent && !top) {
+              // make fake top element
+              // "true" is not a node, but it will just allow skip all caching
               top = true;
           }
           var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Transform(), offset = this.offset();
+          // clone the matrix array
           absoluteTransform.m = absoluteMatrix.slice();
           absoluteTransform.translate(offset.x, offset.y);
           return absoluteTransform.getTranslation();
       }
       setAbsolutePosition(pos) {
           var origTrans = this._clearTransform();
+          // don't clear translation
           this.attrs.x = origTrans.x;
           this.attrs.y = origTrans.y;
           delete origTrans.x;
           delete origTrans.y;
+          // important, use non cached value
           this._clearCache(TRANSFORM);
           var it = this._getAbsoluteTransform().copy();
           it.invert();
@@ -2351,6 +3355,8 @@
           for (key in trans) {
               this.attrs[key] = trans[key];
           }
+          // this._clearCache(TRANSFORM);
+          // this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
       }
       _clearTransform() {
           var trans = {
@@ -2373,8 +3379,24 @@
           this.attrs.offsetY = 0;
           this.attrs.skewX = 0;
           this.attrs.skewY = 0;
+          // return original transform
           return trans;
       }
+      /**
+       * move node by an amount relative to its current position
+       * @method
+       * @name Konva.Node#move
+       * @param {Object} change
+       * @param {Number} change.x
+       * @param {Number} change.y
+       * @returns {Konva.Node}
+       * @example
+       * // move node in x direction by 1px and y direction by 2px
+       * node.move({
+       *   x: 1,
+       *   y: 2
+       * });
+       */
       move(change) {
           var changeX = change.x, changeY = change.y, x = this.x(), y = this.y();
           if (changeX !== undefined) {
@@ -2388,7 +3410,11 @@
       }
       _eachAncestorReverse(func, top) {
           var family = [], parent = this.getParent(), len, n;
+          // if top node is defined, and this node is top node,
+          // there's no need to build a family tree.  just execute
+          // func with this because it will be the only node
           if (top && top._id === this._id) {
+              // func(this);
               return;
           }
           family.unshift(this);
@@ -2401,10 +3427,23 @@
               func(family[n]);
           }
       }
+      /**
+       * rotate node by an amount in degrees relative to its current rotation
+       * @method
+       * @name Konva.Node#rotate
+       * @param {Number} theta
+       * @returns {Konva.Node}
+       */
       rotate(theta) {
           this.rotation(this.rotation() + theta);
           return this;
       }
+      /**
+       * move node to the top of its siblings
+       * @method
+       * @name Konva.Node#moveToTop
+       * @returns {Boolean}
+       */
       moveToTop() {
           if (!this.parent) {
               Util.warn('Node has no parent. moveToTop function is ignored.');
@@ -2416,6 +3455,12 @@
           this.parent._setChildrenIndices();
           return true;
       }
+      /**
+       * move node up
+       * @method
+       * @name Konva.Node#moveUp
+       * @returns {Boolean} flag is moved or not
+       */
       moveUp() {
           if (!this.parent) {
               Util.warn('Node has no parent. moveUp function is ignored.');
@@ -2430,6 +3475,12 @@
           }
           return false;
       }
+      /**
+       * move node down
+       * @method
+       * @name Konva.Node#moveDown
+       * @returns {Boolean}
+       */
       moveDown() {
           if (!this.parent) {
               Util.warn('Node has no parent. moveDown function is ignored.');
@@ -2444,6 +3495,12 @@
           }
           return false;
       }
+      /**
+       * move node to the bottom of its siblings
+       * @method
+       * @name Konva.Node#moveToBottom
+       * @returns {Boolean}
+       */
       moveToBottom() {
           if (!this.parent) {
               Util.warn('Node has no parent. moveToBottom function is ignored.');
@@ -2476,6 +3533,12 @@
           this.parent._setChildrenIndices();
           return this;
       }
+      /**
+       * get absolute opacity
+       * @method
+       * @name Konva.Node#getAbsoluteOpacity
+       * @returns {Number}
+       */
       getAbsoluteOpacity() {
           return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);
       }
@@ -2487,26 +3550,47 @@
           }
           return absOpacity;
       }
+      /**
+       * move node to another container
+       * @method
+       * @name Konva.Node#moveTo
+       * @param {Container} newContainer
+       * @returns {Konva.Node}
+       * @example
+       * // move node from current layer into layer2
+       * node.moveTo(layer2);
+       */
       moveTo(newContainer) {
+          // do nothing if new container is already parent
           if (this.getParent() !== newContainer) {
               this._remove();
               newContainer.add(this);
           }
           return this;
       }
+      /**
+       * convert Node into an object for serialization.  Returns an object.
+       * @method
+       * @name Konva.Node#toObject
+       * @returns {Object}
+       */
       toObject() {
           var obj = {}, attrs = this.getAttrs(), key, val, getter, defaultValue, nonPlainObject;
           obj.attrs = {};
           for (key in attrs) {
               val = attrs[key];
+              // if value is object and object is not plain
+              // like class instance, we should skip it and to not include
               nonPlainObject =
                   Util.isObject(val) && !Util._isPlainObject(val) && !Util._isArray(val);
               if (nonPlainObject) {
                   continue;
               }
               getter = typeof this[key] === 'function' && this[key];
+              // remove attr value so that we can extract the default value from the getter
               delete attrs[key];
               defaultValue = getter ? getter.call(this) : null;
+              // restore attr value
               attrs[key] = val;
               if (defaultValue !== val) {
                   obj.attrs[key] = val;
@@ -2515,12 +3599,36 @@
           obj.className = this.getClassName();
           return Util._prepareToStringify(obj);
       }
+      /**
+       * convert Node into a JSON string.  Returns a JSON string.
+       * @method
+       * @name Konva.Node#toJSON
+       * @returns {String}
+       */
       toJSON() {
           return JSON.stringify(this.toObject());
       }
+      /**
+       * get parent container
+       * @method
+       * @name Konva.Node#getParent
+       * @returns {Konva.Node}
+       */
       getParent() {
           return this.parent;
       }
+      /**
+       * get all ancestors (parent then parent of the parent, etc) of the node
+       * @method
+       * @name Konva.Node#findAncestors
+       * @param {String} selector selector for search
+       * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+       * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+       * @returns {Array} [ancestors]
+       * @example
+       * // get one of the parent group
+       * var parentGroups = node.findAncestors('Group');
+       */
       findAncestors(selector, includeSelf, stopNode) {
           var res = [];
           if (includeSelf && this._isMatch(selector)) {
@@ -2541,9 +3649,22 @@
       isAncestorOf(node) {
           return false;
       }
+      /**
+       * get ancestor (parent or parent of the parent, etc) of the node that match passed selector
+       * @method
+       * @name Konva.Node#findAncestor
+       * @param {String} selector selector for search
+       * @param {Boolean} [includeSelf] show we think that node is ancestro itself?
+       * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
+       * @returns {Konva.Node} ancestor
+       * @example
+       * // get one of the parent group
+       * var group = node.findAncestors('.mygroup');
+       */
       findAncestor(selector, includeSelf, stopNode) {
           return this.findAncestors(selector, includeSelf, stopNode)[0];
       }
+      // is current node match passed selector?
       _isMatch(selector) {
           if (!selector) {
               return false;
@@ -2561,12 +3682,14 @@
                   Util.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".');
                   Util.warn('Konva is awesome, right?');
               }
+              // id selector
               if (sel.charAt(0) === '#') {
                   if (this.id() === sel.slice(1)) {
                       return true;
                   }
               }
               else if (sel.charAt(0) === '.') {
+                  // name selector
                   if (this.hasName(sel.slice(1))) {
                       return true;
                   }
@@ -2577,10 +3700,22 @@
           }
           return false;
       }
+      /**
+       * get layer ancestor
+       * @method
+       * @name Konva.Node#getLayer
+       * @returns {Konva.Layer}
+       */
       getLayer() {
           var parent = this.getParent();
           return parent ? parent.getLayer() : null;
       }
+      /**
+       * get stage ancestor
+       * @method
+       * @name Konva.Node#getStage
+       * @returns {Konva.Stage}
+       */
       getStage() {
           return this._getCache(STAGE$1, this._getStage);
       }
@@ -2593,28 +3728,65 @@
               return undefined;
           }
       }
+      /**
+       * fire event
+       * @method
+       * @name Konva.Node#fire
+       * @param {String} eventType event type.  can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
+       * @param {Event} [evt] event object
+       * @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event
+       *  not bubbling.  Setting the value to true will result in the event bubbling.
+       * @returns {Konva.Node}
+       * @example
+       * // manually fire click event
+       * node.fire('click');
+       *
+       * // fire custom event
+       * node.fire('foo');
+       *
+       * // fire custom event with custom event object
+       * node.fire('foo', {
+       *   bar: 10
+       * });
+       *
+       * // fire click event that bubbles
+       * node.fire('click', null, true);
+       */
       fire(eventType, evt = {}, bubble) {
           evt.target = evt.target || this;
+          // bubble
           if (bubble) {
               this._fireAndBubble(eventType, evt);
           }
           else {
+              // no bubble
               this._fire(eventType, evt);
           }
           return this;
       }
+      /**
+       * get absolute transform of the node which takes into
+       *  account its ancestor transforms
+       * @method
+       * @name Konva.Node#getAbsoluteTransform
+       * @returns {Konva.Transform}
+       */
       getAbsoluteTransform(top) {
+          // if using an argument, we can't cache the result.
           if (top) {
               return this._getAbsoluteTransform(top);
           }
           else {
+              // if no argument, we can cache the result
               return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
           }
       }
       _getAbsoluteTransform(top) {
           var at;
+          // we we need position relative to an ancestor, we will iterate for all
           if (top) {
               at = new Transform();
+              // start with stage and traverse downwards to self
               this._eachAncestorReverse(function (node) {
                   var transformsEnabled = node.transformsEnabled();
                   if (transformsEnabled === 'all') {
@@ -2627,8 +3799,10 @@
               return at;
           }
           else {
+              // try to use a cached value
               at = this._cache.get(ABSOLUTE_TRANSFORM) || new Transform();
               if (this.parent) {
+                  // transform will be cached
                   this.parent.getAbsoluteTransform().copyInto(at);
               }
               else {
@@ -2639,6 +3813,7 @@
                   at.multiply(this.getTransform());
               }
               else if (transformsEnabled === 'position') {
+                  // use "attrs" directly, because it is a bit faster
                   const x = this.attrs.x || 0;
                   const y = this.attrs.y || 0;
                   const offsetX = this.attrs.offsetX || 0;
@@ -2649,7 +3824,20 @@
               return at;
           }
       }
+      /**
+       * get absolute scale of the node which takes into
+       *  account its ancestor scales
+       * @method
+       * @name Konva.Node#getAbsoluteScale
+       * @returns {Object}
+       * @example
+       * // get absolute scale x
+       * var scaleX = node.getAbsoluteScale().x;
+       */
       getAbsoluteScale(top) {
+          // do not cache this calculations,
+          // because it use cache transform
+          // this is special logic for caching with some shapes with shadow
           var parent = this;
           while (parent) {
               if (parent._isUnderCache) {
@@ -2664,9 +3852,32 @@
               y: attrs.scaleY,
           };
       }
+      /**
+       * get absolute rotation of the node which takes into
+       *  account its ancestor rotations
+       * @method
+       * @name Konva.Node#getAbsoluteRotation
+       * @returns {Number}
+       * @example
+       * // get absolute rotation
+       * var rotation = node.getAbsoluteRotation();
+       */
       getAbsoluteRotation() {
+          // var parent: Node = this;
+          // var rotation = 0;
+          // while (parent) {
+          //   rotation += parent.rotation();
+          //   parent = parent.getParent();
+          // }
+          // return rotation;
           return this.getAbsoluteTransform().decompose().rotation;
       }
+      /**
+       * get transform of the node
+       * @method
+       * @name Konva.Node#getTransform
+       * @returns {Konva.Transform}
+       */
       getTransform() {
           return this._getCache(TRANSFORM, this._getTransform);
       }
@@ -2674,6 +3885,9 @@
           var _a, _b;
           var m = this._cache.get(TRANSFORM) || new Transform();
           m.reset();
+          // I was trying to use attributes directly here
+          // but it doesn't work for Transformer well
+          // because it overwrite x,y getters
           var x = this.x(), y = this.y(), rotation = Konva$2.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== void 0 ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== void 0 ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
           if (x !== 0 || y !== 0) {
               m.translate(x, y);
@@ -2693,18 +3907,43 @@
           m.dirty = false;
           return m;
       }
+      /**
+       * clone node.  Returns a new Node instance with identical attributes.  You can also override
+       *  the node properties with an object literal, enabling you to use an existing node as a template
+       *  for another node
+       * @method
+       * @name Konva.Node#clone
+       * @param {Object} obj override attrs
+       * @returns {Konva.Node}
+       * @example
+       * // simple clone
+       * var clone = node.clone();
+       *
+       * // clone a node and override the x position
+       * var clone = rect.clone({
+       *   x: 5
+       * });
+       */
       clone(obj) {
+          // instantiate new node
           var attrs = Util.cloneObject(this.attrs), key, allListeners, len, n, listener;
+          // apply attr overrides
           for (key in obj) {
               attrs[key] = obj[key];
           }
           var node = new this.constructor(attrs);
+          // copy over listeners
           for (key in this.eventListeners) {
               allListeners = this.eventListeners[key];
               len = allListeners.length;
               for (n = 0; n < len; n++) {
                   listener = allListeners[n];
+                  /*
+                   * don't include konva namespaced listeners because
+                   *  these are generated by the constructors
+                   */
                   if (listener.name.indexOf(KONVA) < 0) {
+                      // if listeners array doesn't exist, then create it
                       if (!node.eventListeners[key]) {
                           node.eventListeners[key] = [];
                       }
@@ -2730,9 +3969,48 @@
           context.restore();
           return canvas;
       }
+      /**
+       * converts node into an canvas element.
+       * @method
+       * @name Konva.Node#toCanvas
+       * @param {Object} config
+       * @param {Function} config.callback function executed when the composite has completed
+       * @param {Number} [config.x] x position of canvas section
+       * @param {Number} [config.y] y position of canvas section
+       * @param {Number} [config.width] width of canvas section
+       * @param {Number} [config.height] height of canvas section
+       * @param {Number} [config.pixelRatio] pixelRatio of output canvas. Default is 1.
+       * You can use that property to increase quality of the image, for example for super hight quality exports
+       * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+       * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @example
+       * var canvas = node.toCanvas();
+       */
       toCanvas(config) {
           return this._toKonvaCanvas(config)._canvas;
       }
+      /**
+       * Creates a composite data URL (base64 string). If MIME type is not
+       * specified, then "image/png" will result. For "image/jpeg", specify a quality
+       * level as quality (range 0.0 - 1.0)
+       * @method
+       * @name Konva.Node#toDataURL
+       * @param {Object} config
+       * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
+       *  "image/png" is the default
+       * @param {Number} [config.x] x position of canvas section
+       * @param {Number} [config.y] y position of canvas section
+       * @param {Number} [config.width] width of canvas section
+       * @param {Number} [config.height] height of canvas section
+       * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
+       *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
+       *  is very high quality
+       * @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1.
+       * You can use that property to increase quality of the image, for example for super hight quality exports
+       * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+       * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @returns {String}
+       */
       toDataURL(config) {
           config = config || {};
           var mimeType = config.mimeType || null, quality = config.quality || null;
@@ -2742,6 +4020,34 @@
           }
           return url;
       }
+      /**
+       * converts node into an image.  Since the toImage
+       *  method is asynchronous, a callback is required.  toImage is most commonly used
+       *  to cache complex drawings as an image so that they don't have to constantly be redrawn
+       * @method
+       * @name Konva.Node#toImage
+       * @param {Object} config
+       * @param {Function} config.callback function executed when the composite has completed
+       * @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
+       *  "image/png" is the default
+       * @param {Number} [config.x] x position of canvas section
+       * @param {Number} [config.y] y position of canvas section
+       * @param {Number} [config.width] width of canvas section
+       * @param {Number} [config.height] height of canvas section
+       * @param {Number} [config.quality] jpeg quality.  If using an "image/jpeg" mimeType,
+       *  you can specify the quality from 0 to 1, where 0 is very poor quality and 1
+       *  is very high quality
+       * @param {Number} [config.pixelRatio] pixelRatio of output image. Default is 1.
+       * You can use that property to increase quality of the image, for example for super hight quality exports
+       * or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
+       * If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
+       * @example
+       * var image = node.toImage({
+       *   callback(img) {
+       *     // do stuff with img
+       *   }
+       * });
+       */
       toImage(config) {
           if (!config || !config.callback) {
               throw 'callback required for toImage method config argument';
@@ -2763,13 +4069,26 @@
               height: this.height(),
           };
       }
+      /**
+       * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
+       * @method
+       * @name Konva.Node#getClassName
+       * @returns {String}
+       */
       getClassName() {
           return this.className || this.nodeType;
       }
+      /**
+       * get the node type, which may return Stage, Layer, Group, or Shape
+       * @method
+       * @name Konva.Node#getType
+       * @returns {String}
+       */
       getType() {
           return this.nodeType;
       }
       getDragDistance() {
+          // compare with undefined because we need to track 0 value
           if (this.attrs.dragDistance !== undefined) {
               return this.attrs.dragDistance;
           }
@@ -2785,6 +4104,10 @@
           for (i = 0; i < evtListeners.length; i++) {
               evtName = evtListeners[i].name;
               handler = evtListeners[i].handler;
+              // the following two conditions must be true in order to remove a handler:
+              // 1) the current event name cannot be konva unless the event name is konva
+              //    this enables developers to force remove a konva specific listener for whatever reason
+              // 2) an event name is not specified, or if one is specified, it matches the current event name
               if ((evtName !== 'konva' || name === 'konva') &&
                   (!name || evtName === name) &&
                   (!callback || callback === handler)) {
@@ -2803,6 +4126,17 @@
               newVal: newVal,
           });
       }
+      /**
+       * add name to node
+       * @method
+       * @name Konva.Node#addName
+       * @param {String} name
+       * @returns {Konva.Node}
+       * @example
+       * node.name('red');
+       * node.addName('selected');
+       * node.name(); // return 'red selected'
+       */
       addName(name) {
           if (!this.hasName(name)) {
               var oldName = this.name();
@@ -2811,6 +4145,18 @@
           }
           return this;
       }
+      /**
+       * check is node has name
+       * @method
+       * @name Konva.Node#hasName
+       * @param {String} name
+       * @returns {Boolean}
+       * @example
+       * node.name('red');
+       * node.hasName('red');   // return true
+       * node.hasName('selected'); // return false
+       * node.hasName(''); // return false
+       */
       hasName(name) {
           if (!name) {
               return false;
@@ -2819,9 +4165,22 @@
           if (!fullName) {
               return false;
           }
+          // if name is '' the "names" will be [''], so I added extra check above
           var names = (fullName || '').split(/\s/g);
           return names.indexOf(name) !== -1;
       }
+      /**
+       * remove name from node
+       * @method
+       * @name Konva.Node#removeName
+       * @param {String} name
+       * @returns {Konva.Node}
+       * @example
+       * node.name('red selected');
+       * node.removeName('selected');
+       * node.hasName('selected'); // return false
+       * node.name(); // return 'red'
+       */
       removeName(name) {
           var names = (this.name() || '').split(/\s/g);
           var index = names.indexOf(name);
@@ -2831,12 +4190,23 @@
           }
           return this;
       }
+      /**
+       * set attr
+       * @method
+       * @name Konva.Node#setAttr
+       * @param {String} attr
+       * @param {*} val
+       * @returns {Konva.Node}
+       * @example
+       * node.setAttr('x', 5);
+       */
       setAttr(attr, val) {
           var func = this[SET + Util._capitalize(attr)];
           if (Util._isFunction(func)) {
               func.call(this, val);
           }
           else {
+              // otherwise set directly
               this._setAttr(attr, val);
           }
           return this;
@@ -2868,6 +4238,7 @@
           if (val !== undefined) {
               oldVal = this.attrs[key];
               if (!oldVal) {
+                  // set value to default value using getAttr
                   this.attrs[key] = this.getAttr(key);
               }
               this.attrs[key][component] = val;
@@ -2885,6 +4256,7 @@
                   (this.nodeType === 'Stage' && !compareShape));
           if (!shouldStop) {
               this._fire(eventType, evt);
+              // simulate event bubbling
               var stopBubble = (eventType === MOUSEENTER$1 || eventType === MOUSELEAVE$1) &&
                   compareShape &&
                   compareShape.isAncestorOf &&
@@ -2905,6 +4277,7 @@
       }
       _getProtoListeners(eventType) {
           let listeners = this._cache.get(ALL_LISTENERS);
+          // if no cache for listeners, we need to pre calculate it
           if (!listeners) {
               listeners = {};
               let obj = Object.getPrototypeOf(this);
@@ -2934,6 +4307,8 @@
                   topListeners[i].handler.call(this, evt);
               }
           }
+          // it is important to iterate over self listeners without cache
+          // because events can be added/removed while firing
           const selfListeners = this.eventListeners[eventType];
           if (selfListeners) {
               for (var i = 0; i < selfListeners.length; i++) {
@@ -2941,11 +4316,18 @@
               }
           }
       }
+      /**
+       * draw both scene and hit graphs.  If the node being drawn is the stage, all of the layers will be cleared and redrawn
+       * @method
+       * @name Konva.Node#draw
+       * @returns {Konva.Node}
+       */
       draw() {
           this.drawScene();
           this.drawHit();
           return this;
       }
+      // drag & drop
       _createDragElement(evt) {
           var pointerId = evt ? evt.pointerId : undefined;
           var stage = this.getStage();
@@ -2964,6 +4346,11 @@
               pointerId,
           });
       }
+      /**
+       * initiate drag and drop.
+       * @method
+       * @name Konva.Node#startDrag
+       */
       startDrag(evt, bubbleEvent = true) {
           if (!DD._dragElements.has(this._id)) {
               this._createDragElement(evt);
@@ -2977,6 +4364,8 @@
           }, bubbleEvent);
       }
       _setDragPosition(evt, elem) {
+          // const pointers = this.getStage().getPointersPositions();
+          // const pos = pointers.find(p => p.id === this._dragEventId);
           const pos = this.getStage()._getPointerById(elem.pointerId);
           if (!pos) {
               return;
@@ -3003,6 +4392,11 @@
           }
           this._lastPos = newNodePos;
       }
+      /**
+       * stop drag and drop
+       * @method
+       * @name Konva.Node#stopDrag
+       */
       stopDrag(evt) {
           const elem = DD._dragElements.get(this._id);
           if (elem) {
@@ -3015,6 +4409,11 @@
           this._setAttr('draggable', draggable);
           this._dragChange();
       }
+      /**
+       * determine if node is currently in drag and drop mode
+       * @method
+       * @name Konva.Node#isDragging
+       */
       isDragging() {
           const elem = DD._dragElements.get(this._id);
           return elem ? elem.dragStatus === 'dragging' : false;
@@ -3036,6 +4435,8 @@
                       hasDraggingChild = true;
                   }
               });
+              // nested drag can be started
+              // in that case we don't need to start new drag
               if (!hasDraggingChild) {
                   this._createDragElement(evt);
               }
@@ -3046,7 +4447,13 @@
               this._listenDrag();
           }
           else {
+              // remove event listeners
               this._dragCleanup();
+              /*
+               * force drag and drop to end
+               * if this node is currently in
+               * drag and drop mode
+               */
               var stage = this.getStage();
               if (!stage) {
                   return;
@@ -3066,6 +4473,21 @@
           this.off('mousedown.konva');
           this.off('touchstart.konva');
       }
+      /**
+       * determine if node (at least partially) is currently in user-visible area
+       * @method
+       * @param {(Number | Object)} margin optional margin in pixels
+       * @param {Number} margin.x
+       * @param {Number} margin.y
+       * @returns {Boolean}
+       * @name Konva.Node#isClientRectOnScreen
+       * @example
+       * // get index
+       * // default calculations
+       * var isOnScreen = node.isClientRectOnScreen()
+       * // increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
+       * var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })
+       */
       isClientRectOnScreen(margin = { x: 0, y: 0 }) {
           const stage = this.getStage();
           if (!stage) {
@@ -3079,6 +4501,19 @@
           };
           return Util.haveIntersection(screenRect, this.getClientRect());
       }
+      /**
+       * create node with JSON string or an Object.  De-serializtion does not generate custom
+       *  shape drawing functions, images, or event handlers (this would make the
+       *  serialized object huge).  If your app uses custom shapes, images, and
+       *  event handlers (it probably does), then you need to select the appropriate
+       *  shapes after loading the stage and set these properties via on(), setSceneFunc(),
+       *  and setImage() methods
+       * @method
+       * @memberof Konva.Node
+       * @param {String|Object} json string or object
+       * @param {Element} [container] optional container dom element used only if you're
+       *  creating a stage node
+       */
       static create(data, container) {
           if (Util._isString(data)) {
               data = JSON.parse(data);
@@ -3087,6 +4522,7 @@
       }
       static _createNode(obj, container) {
           var className = Node.prototype.getClassName.call(obj), children = obj.children, no, len, n;
+          // if container was passed in, add it to attrs
           if (container) {
               obj.attrs.container = container;
           }
@@ -3109,6 +4545,8 @@
   }
   Node.prototype.nodeType = 'Node';
   Node.prototype._attrsAffectingSize = [];
+  // attache events listeners once into prototype
+  // that way we don't spend too much time on making an new instance
   Node.prototype.eventListeners = {};
   Node.prototype.on.call(Node.prototype, TRANSFORM_CHANGE_STR$1, function () {
       if (this._batchingTransformChange) {
@@ -3128,38 +4566,504 @@
       this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
   });
   const addGetterSetter = Factory.addGetterSetter;
+  /**
+   * get/set zIndex relative to the node's siblings who share the same parent.
+   * Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
+   * @name Konva.Node#zIndex
+   * @method
+   * @param {Number} index
+   * @returns {Number}
+   * @example
+   * // get index
+   * var index = node.zIndex();
+   *
+   * // set index
+   * node.zIndex(2);
+   */
   addGetterSetter(Node, 'zIndex');
+  /**
+   * get/set node absolute position
+   * @name Konva.Node#absolutePosition
+   * @method
+   * @param {Object} pos
+   * @param {Number} pos.x
+   * @param {Number} pos.y
+   * @returns {Object}
+   * @example
+   * // get position
+   * var position = node.absolutePosition();
+   *
+   * // set position
+   * node.absolutePosition({
+   *   x: 5,
+   *   y: 10
+   * });
+   */
   addGetterSetter(Node, 'absolutePosition');
   addGetterSetter(Node, 'position');
+  /**
+   * get/set node position relative to parent
+   * @name Konva.Node#position
+   * @method
+   * @param {Object} pos
+   * @param {Number} pos.x
+   * @param {Number} pos.y
+   * @returns {Object}
+   * @example
+   * // get position
+   * var position = node.position();
+   *
+   * // set position
+   * node.position({
+   *   x: 5,
+   *   y: 10
+   * });
+   */
   addGetterSetter(Node, 'x', 0, getNumberValidator());
+  /**
+   * get/set x position
+   * @name Konva.Node#x
+   * @method
+   * @param {Number} x
+   * @returns {Object}
+   * @example
+   * // get x
+   * var x = node.x();
+   *
+   * // set x
+   * node.x(5);
+   */
   addGetterSetter(Node, 'y', 0, getNumberValidator());
+  /**
+   * get/set y position
+   * @name Konva.Node#y
+   * @method
+   * @param {Number} y
+   * @returns {Integer}
+   * @example
+   * // get y
+   * var y = node.y();
+   *
+   * // set y
+   * node.y(5);
+   */
   addGetterSetter(Node, 'globalCompositeOperation', 'source-over', getStringValidator());
+  /**
+   * get/set globalCompositeOperation of a node. globalCompositeOperation DOESN'T affect hit graph of nodes. So they are still trigger to events as they have default "source-over" globalCompositeOperation.
+   * @name Konva.Node#globalCompositeOperation
+   * @method
+   * @param {String} type
+   * @returns {String}
+   * @example
+   * // get globalCompositeOperation
+   * var globalCompositeOperation = shape.globalCompositeOperation();
+   *
+   * // set globalCompositeOperation
+   * shape.globalCompositeOperation('source-in');
+   */
   addGetterSetter(Node, 'opacity', 1, getNumberValidator());
+  /**
+   * get/set opacity.  Opacity values range from 0 to 1.
+   *  A node with an opacity of 0 is fully transparent, and a node
+   *  with an opacity of 1 is fully opaque
+   * @name Konva.Node#opacity
+   * @method
+   * @param {Object} opacity
+   * @returns {Number}
+   * @example
+   * // get opacity
+   * var opacity = node.opacity();
+   *
+   * // set opacity
+   * node.opacity(0.5);
+   */
   addGetterSetter(Node, 'name', '', getStringValidator());
+  /**
+   * get/set name.
+   * @name Konva.Node#name
+   * @method
+   * @param {String} name
+   * @returns {String}
+   * @example
+   * // get name
+   * var name = node.name();
+   *
+   * // set name
+   * node.name('foo');
+   *
+   * // also node may have multiple names (as css classes)
+   * node.name('foo bar');
+   */
   addGetterSetter(Node, 'id', '', getStringValidator());
+  /**
+   * get/set id. Id is global for whole page.
+   * @name Konva.Node#id
+   * @method
+   * @param {String} id
+   * @returns {String}
+   * @example
+   * // get id
+   * var name = node.id();
+   *
+   * // set id
+   * node.id('foo');
+   */
   addGetterSetter(Node, 'rotation', 0, getNumberValidator());
+  /**
+   * get/set rotation in degrees
+   * @name Konva.Node#rotation
+   * @method
+   * @param {Number} rotation
+   * @returns {Number}
+   * @example
+   * // get rotation in degrees
+   * var rotation = node.rotation();
+   *
+   * // set rotation in degrees
+   * node.rotation(45);
+   */
   Factory.addComponentsGetterSetter(Node, 'scale', ['x', 'y']);
+  /**
+   * get/set scale
+   * @name Konva.Node#scale
+   * @param {Object} scale
+   * @param {Number} scale.x
+   * @param {Number} scale.y
+   * @method
+   * @returns {Object}
+   * @example
+   * // get scale
+   * var scale = node.scale();
+   *
+   * // set scale
+   * shape.scale({
+   *   x: 2,
+   *   y: 3
+   * });
+   */
   addGetterSetter(Node, 'scaleX', 1, getNumberValidator());
+  /**
+   * get/set scale x
+   * @name Konva.Node#scaleX
+   * @param {Number} x
+   * @method
+   * @returns {Number}
+   * @example
+   * // get scale x
+   * var scaleX = node.scaleX();
+   *
+   * // set scale x
+   * node.scaleX(2);
+   */
   addGetterSetter(Node, 'scaleY', 1, getNumberValidator());
+  /**
+   * get/set scale y
+   * @name Konva.Node#scaleY
+   * @param {Number} y
+   * @method
+   * @returns {Number}
+   * @example
+   * // get scale y
+   * var scaleY = node.scaleY();
+   *
+   * // set scale y
+   * node.scaleY(2);
+   */
   Factory.addComponentsGetterSetter(Node, 'skew', ['x', 'y']);
+  /**
+   * get/set skew
+   * @name Konva.Node#skew
+   * @param {Object} skew
+   * @param {Number} skew.x
+   * @param {Number} skew.y
+   * @method
+   * @returns {Object}
+   * @example
+   * // get skew
+   * var skew = node.skew();
+   *
+   * // set skew
+   * node.skew({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   addGetterSetter(Node, 'skewX', 0, getNumberValidator());
+  /**
+   * get/set skew x
+   * @name Konva.Node#skewX
+   * @param {Number} x
+   * @method
+   * @returns {Number}
+   * @example
+   * // get skew x
+   * var skewX = node.skewX();
+   *
+   * // set skew x
+   * node.skewX(3);
+   */
   addGetterSetter(Node, 'skewY', 0, getNumberValidator());
+  /**
+   * get/set skew y
+   * @name Konva.Node#skewY
+   * @param {Number} y
+   * @method
+   * @returns {Number}
+   * @example
+   * // get skew y
+   * var skewY = node.skewY();
+   *
+   * // set skew y
+   * node.skewY(3);
+   */
   Factory.addComponentsGetterSetter(Node, 'offset', ['x', 'y']);
+  /**
+   * get/set offset.  Offsets the default position and rotation point
+   * @method
+   * @param {Object} offset
+   * @param {Number} offset.x
+   * @param {Number} offset.y
+   * @returns {Object}
+   * @example
+   * // get offset
+   * var offset = node.offset();
+   *
+   * // set offset
+   * node.offset({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   addGetterSetter(Node, 'offsetX', 0, getNumberValidator());
+  /**
+   * get/set offset x
+   * @name Konva.Node#offsetX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get offset x
+   * var offsetX = node.offsetX();
+   *
+   * // set offset x
+   * node.offsetX(3);
+   */
   addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
+  /**
+   * get/set offset y
+   * @name Konva.Node#offsetY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get offset y
+   * var offsetY = node.offsetY();
+   *
+   * // set offset y
+   * node.offsetY(3);
+   */
   addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
+  /**
+   * get/set drag distance
+   * @name Konva.Node#dragDistance
+   * @method
+   * @param {Number} distance
+   * @returns {Number}
+   * @example
+   * // get drag distance
+   * var dragDistance = node.dragDistance();
+   *
+   * // set distance
+   * // node starts dragging only if pointer moved more then 3 pixels
+   * node.dragDistance(3);
+   * // or set globally
+   * Konva.dragDistance = 3;
+   */
   addGetterSetter(Node, 'width', 0, getNumberValidator());
+  /**
+   * get/set width
+   * @name Konva.Node#width
+   * @method
+   * @param {Number} width
+   * @returns {Number}
+   * @example
+   * // get width
+   * var width = node.width();
+   *
+   * // set width
+   * node.width(100);
+   */
   addGetterSetter(Node, 'height', 0, getNumberValidator());
+  /**
+   * get/set height
+   * @name Konva.Node#height
+   * @method
+   * @param {Number} height
+   * @returns {Number}
+   * @example
+   * // get height
+   * var height = node.height();
+   *
+   * // set height
+   * node.height(100);
+   */
   addGetterSetter(Node, 'listening', true, getBooleanValidator());
+  /**
+   * get/set listening attr.  If you need to determine if a node is listening or not
+   *   by taking into account its parents, use the isListening() method
+   * @name Konva.Node#listening
+   * @method
+   * @param {Boolean} listening Can be true, or false.  The default is true.
+   * @returns {Boolean}
+   * @example
+   * // get listening attr
+   * var listening = node.listening();
+   *
+   * // stop listening for events, remove node and all its children from hit graph
+   * node.listening(false);
+   *
+   * // listen to events according to the parent
+   * node.listening(true);
+   */
+  /**
+   * get/set preventDefault
+   * By default all shapes will prevent default behavior
+   * of a browser on a pointer move or tap.
+   * that will prevent native scrolling when you are trying to drag&drop a node
+   * but sometimes you may need to enable default actions
+   * in that case you can set the property to false
+   * @name Konva.Node#preventDefault
+   * @method
+   * @param {Boolean} preventDefault
+   * @returns {Boolean}
+   * @example
+   * // get preventDefault
+   * var shouldPrevent = shape.preventDefault();
+   *
+   * // set preventDefault
+   * shape.preventDefault(false);
+   */
   addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
   addGetterSetter(Node, 'filters', null, function (val) {
       this._filterUpToDate = false;
       return val;
   });
+  /**
+   * get/set filters.  Filters are applied to cached canvases
+   * @name Konva.Node#filters
+   * @method
+   * @param {Array} filters array of filters
+   * @returns {Array}
+   * @example
+   * // get filters
+   * var filters = node.filters();
+   *
+   * // set a single filter
+   * node.cache();
+   * node.filters([Konva.Filters.Blur]);
+   *
+   * // set multiple filters
+   * node.cache();
+   * node.filters([
+   *   Konva.Filters.Blur,
+   *   Konva.Filters.Sepia,
+   *   Konva.Filters.Invert
+   * ]);
+   */
   addGetterSetter(Node, 'visible', true, getBooleanValidator());
+  /**
+   * get/set visible attr.  Can be true, or false.  The default is true.
+   *   If you need to determine if a node is visible or not
+   *   by taking into account its parents, use the isVisible() method
+   * @name Konva.Node#visible
+   * @method
+   * @param {Boolean} visible
+   * @returns {Boolean}
+   * @example
+   * // get visible attr
+   * var visible = node.visible();
+   *
+   * // make invisible
+   * node.visible(false);
+   *
+   * // make visible (according to the parent)
+   * node.visible(true);
+   *
+   */
   addGetterSetter(Node, 'transformsEnabled', 'all', getStringValidator());
+  /**
+   * get/set transforms that are enabled.  Can be "all", "none", or "position".  The default
+   *  is "all"
+   * @name Konva.Node#transformsEnabled
+   * @method
+   * @param {String} enabled
+   * @returns {String}
+   * @example
+   * // enable position transform only to improve draw performance
+   * node.transformsEnabled('position');
+   *
+   * // enable all transforms
+   * node.transformsEnabled('all');
+   */
+  /**
+   * get/set node size
+   * @name Konva.Node#size
+   * @method
+   * @param {Object} size
+   * @param {Number} size.width
+   * @param {Number} size.height
+   * @returns {Object}
+   * @example
+   * // get node size
+   * var size = node.size();
+   * var width = size.width;
+   * var height = size.height;
+   *
+   * // set size
+   * node.size({
+   *   width: 100,
+   *   height: 200
+   * });
+   */
   addGetterSetter(Node, 'size');
+  /**
+   * get/set drag bound function.  This is used to override the default
+   *  drag and drop position.
+   * @name Konva.Node#dragBoundFunc
+   * @method
+   * @param {Function} dragBoundFunc
+   * @returns {Function}
+   * @example
+   * // get drag bound function
+   * var dragBoundFunc = node.dragBoundFunc();
+   *
+   * // create vertical drag and drop
+   * node.dragBoundFunc(function(pos){
+   *   // important pos - is absolute position of the node
+   *   // you should return absolute position too
+   *   return {
+   *     x: this.absolutePosition().x,
+   *     y: pos.y
+   *   };
+   * });
+   */
   addGetterSetter(Node, 'dragBoundFunc');
+  /**
+   * get/set draggable flag
+   * @name Konva.Node#draggable
+   * @method
+   * @param {Boolean} draggable
+   * @returns {Boolean}
+   * @example
+   * // get draggable flag
+   * var draggable = node.draggable();
+   *
+   * // enable drag and drop
+   * node.draggable(true);
+   *
+   * // disable drag and drop
+   * node.draggable(false);
+   */
   addGetterSetter(Node, 'draggable', false, getBooleanValidator());
   Factory.backCompat(Node, {
       rotateDeg: 'rotate',
@@ -3167,11 +5071,61 @@
       getRotationDeg: 'getRotation',
   });
 
+  /**
+   * Container constructor.&nbsp; Containers are used to contain nodes or other containers
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Node
+   * @abstract
+   * @param {Object} config
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * * @param {Object} [config.clip] set clip
+     * @param {Number} [config.clipX] set clip x
+     * @param {Number} [config.clipY] set clip y
+     * @param {Number} [config.clipWidth] set clip width
+     * @param {Number} [config.clipHeight] set clip height
+     * @param {Function} [config.clipFunc] set clip func
+
+   */
   class Container extends Node {
       constructor() {
           super(...arguments);
           this.children = [];
       }
+      /**
+       * returns an array of direct descendant nodes
+       * @method
+       * @name Konva.Container#getChildren
+       * @param {Function} [filterFunc] filter function
+       * @returns {Array}
+       * @example
+       * // get all children
+       * var children = layer.getChildren();
+       *
+       * // get only circles
+       * var circles = layer.getChildren(function(node){
+       *    return node.getClassName() === 'Circle';
+       * });
+       */
       getChildren(filterFunc) {
           if (!filterFunc) {
               return this.children || [];
@@ -3185,29 +5139,62 @@
           });
           return results;
       }
+      /**
+       * determine if node has children
+       * @method
+       * @name Konva.Container#hasChildren
+       * @returns {Boolean}
+       */
       hasChildren() {
           return this.getChildren().length > 0;
       }
+      /**
+       * remove all children. Children will be still in memory.
+       * If you want to completely destroy all children please use "destroyChildren" method instead
+       * @method
+       * @name Konva.Container#removeChildren
+       */
       removeChildren() {
           this.getChildren().forEach((child) => {
+              // reset parent to prevent many _setChildrenIndices calls
               child.parent = null;
               child.index = 0;
               child.remove();
           });
           this.children = [];
+          // because all children were detached from parent, request draw via container
           this._requestDraw();
           return this;
       }
+      /**
+       * destroy all children nodes.
+       * @method
+       * @name Konva.Container#destroyChildren
+       */
       destroyChildren() {
           this.getChildren().forEach((child) => {
+              // reset parent to prevent many _setChildrenIndices calls
               child.parent = null;
               child.index = 0;
               child.destroy();
           });
           this.children = [];
+          // because all children were detached from parent, request draw via container
           this._requestDraw();
           return this;
       }
+      /**
+       * add a child and children into container
+       * @name Konva.Container#add
+       * @method
+       * @param {...Konva.Node} child
+       * @returns {Container}
+       * @example
+       * layer.add(rect);
+       * layer.add(shape1, shape2, shape3);
+       * // remember to redraw layer if you changed something
+       * layer.draw();
+       */
       add(...children) {
           if (arguments.length > 1) {
               for (var i = 0; i < arguments.length; i++) {
@@ -3229,6 +5216,7 @@
               child: child,
           });
           this._requestDraw();
+          // chainable
           return this;
       }
       destroy() {
@@ -3238,9 +5226,69 @@
           super.destroy();
           return this;
       }
+      /**
+       * return an array of nodes that match the selector.
+       * You can provide a string with '#' for id selections and '.' for name selections.
+       * Or a function that will return true/false when a node is passed through.  See example below.
+       * With strings you can also select by type or class name. Pass multiple selectors
+       * separated by a comma.
+       * @method
+       * @name Konva.Container#find
+       * @param {String | Function} selector
+       * @returns {Array}
+       * @example
+       *
+       * Passing a string as a selector
+       * // select node with id foo
+       * var node = stage.find('#foo');
+       *
+       * // select nodes with name bar inside layer
+       * var nodes = layer.find('.bar');
+       *
+       * // select all groups inside layer
+       * var nodes = layer.find('Group');
+       *
+       * // select all rectangles inside layer
+       * var nodes = layer.find('Rect');
+       *
+       * // select node with an id of foo or a name of bar inside layer
+       * var nodes = layer.find('#foo, .bar');
+       *
+       * Passing a function as a selector
+       *
+       * // get all groups with a function
+       * var groups = stage.find(node => {
+       *  return node.getType() === 'Group';
+       * });
+       *
+       * // get only Nodes with partial opacity
+       * var alphaNodes = layer.find(node => {
+       *  return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
+       * });
+       */
       find(selector) {
+          // protecting _generalFind to prevent user from accidentally adding
+          // second argument and getting unexpected `findOne` result
           return this._generalFind(selector, false);
       }
+      /**
+       * return a first node from `find` method
+       * @method
+       * @name Konva.Container#findOne
+       * @param {String | Function} selector
+       * @returns {Konva.Node | Undefined}
+       * @example
+       * // select node with id foo
+       * var node = stage.findOne('#foo');
+       *
+       * // select node with name bar inside layer
+       * var nodes = layer.findOne('.bar');
+       *
+       * // select the first node to return true in a function
+       * var node = stage.findOne(node => {
+       *  return node.getType() === 'Shape'
+       * })
+       */
       findOne(selector) {
           var result = this._generalFind(selector, true);
           return result.length > 0 ? result[0] : undefined;
@@ -3277,6 +5325,7 @@
           }
           return false;
       }
+      // extenders
       toObject() {
           var obj = Node.prototype.toObject.call(this);
           obj.children = [];
@@ -3285,6 +5334,13 @@
           });
           return obj;
       }
+      /**
+       * determine if node is an ancestor
+       * of descendant
+       * @method
+       * @name Konva.Container#isAncestorOf
+       * @param {Konva.Node} node
+       */
       isAncestorOf(node) {
           var parent = node.getParent();
           while (parent) {
@@ -3296,12 +5352,25 @@
           return false;
       }
       clone(obj) {
+          // call super method
           var node = Node.prototype.clone.call(this, obj);
           this.getChildren().forEach(function (no) {
               node.add(no.clone());
           });
           return node;
       }
+      /**
+       * get all shapes that intersect a point.  Note: because this method must clear a temporary
+       * canvas and redraw every shape inside the container, it should only be used for special situations
+       * because it performs very poorly.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
+       * because it performs much better
+       * @method
+       * @name Konva.Container#getAllIntersections
+       * @param {Object} pos
+       * @param {Number} pos.x
+       * @param {Number} pos.y
+       * @returns {Array} array of shapes
+       */
       getAllIntersections(pos) {
           var arr = [];
           this.find('Shape').forEach(function (shape) {
@@ -3314,6 +5383,8 @@
       _clearSelfAndDescendantCache(attr) {
           var _a;
           super._clearSelfAndDescendantCache(attr);
+          // skip clearing if node is cached with canvas
+          // for performance reasons !!!
           if (this.isCached()) {
               return;
           }
@@ -3416,6 +5487,7 @@
           };
           var that = this;
           (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+              // skip invisible children
               if (!child.visible()) {
                   return;
               }
@@ -3424,10 +5496,12 @@
                   skipShadow: config.skipShadow,
                   skipStroke: config.skipStroke,
               });
+              // skip invisible children (like empty groups)
               if (rect.width === 0 && rect.height === 0) {
                   return;
               }
               if (minX === undefined) {
+                  // initial value for first child
                   minX = rect.x;
                   minY = rect.y;
                   maxX = rect.x + rect.width;
@@ -3440,6 +5514,7 @@
                   maxY = Math.max(maxY, rect.y + rect.height);
               }
           });
+          // if child is group we need to make sure it has visible shapes inside
           var shapes = this.find('Shape');
           var hasVisible = false;
           for (var i = 0; i < shapes.length; i++) {
@@ -3471,19 +5546,111 @@
           return selfRect;
       }
   }
+  // add getters setters
   Factory.addComponentsGetterSetter(Container, 'clip', [
       'x',
       'y',
       'width',
       'height',
   ]);
+  /**
+   * get/set clip
+   * @method
+   * @name Konva.Container#clip
+   * @param {Object} clip
+   * @param {Number} clip.x
+   * @param {Number} clip.y
+   * @param {Number} clip.width
+   * @param {Number} clip.height
+   * @returns {Object}
+   * @example
+   * // get clip
+   * var clip = container.clip();
+   *
+   * // set clip
+   * container.clip({
+   *   x: 20,
+   *   y: 20,
+   *   width: 20,
+   *   height: 20
+   * });
+   */
   Factory.addGetterSetter(Container, 'clipX', undefined, getNumberValidator());
+  /**
+   * get/set clip x
+   * @name Konva.Container#clipX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get clip x
+   * var clipX = container.clipX();
+   *
+   * // set clip x
+   * container.clipX(10);
+   */
   Factory.addGetterSetter(Container, 'clipY', undefined, getNumberValidator());
+  /**
+   * get/set clip y
+   * @name Konva.Container#clipY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get clip y
+   * var clipY = container.clipY();
+   *
+   * // set clip y
+   * container.clipY(10);
+   */
   Factory.addGetterSetter(Container, 'clipWidth', undefined, getNumberValidator());
+  /**
+   * get/set clip width
+   * @name Konva.Container#clipWidth
+   * @method
+   * @param {Number} width
+   * @returns {Number}
+   * @example
+   * // get clip width
+   * var clipWidth = container.clipWidth();
+   *
+   * // set clip width
+   * container.clipWidth(100);
+   */
   Factory.addGetterSetter(Container, 'clipHeight', undefined, getNumberValidator());
-  Factory.addGetterSetter(Container, 'clipFunc');
+  /**
+   * get/set clip height
+   * @name Konva.Container#clipHeight
+   * @method
+   * @param {Number} height
+   * @returns {Number}
+   * @example
+   * // get clip height
+   * var clipHeight = container.clipHeight();
+   *
+   * // set clip height
+   * container.clipHeight(100);
+   */
+  Factory.addGetterSetter(Container, 'clipFunc');
+  /**
+   * get/set clip function
+   * @name Konva.Container#clipFunc
+   * @method
+   * @param {Function} function
+   * @returns {Function}
+   * @example
+   * // get clip function
+   * var clipFunction = container.clipFunc();
+   *
+   * // set clip height
+   * container.clipFunc(function(ctx) {
+   *   ctx.rect(0, 0, 100, 100);
+   * });
+   */
 
   const Captures = new Map();
+  // we may use this module for capturing touch events too
+  // so make sure we don't do something super specific to pointer
   const SUPPORT_POINTER_EVENTS = Konva$2._global['PointerEvent'] !== undefined;
   function getCapturedShape(pointerId) {
       return Captures.get(pointerId);
@@ -3519,6 +5686,7 @@
       }
   }
 
+  // CONSTANTS
   var STAGE = 'Stage', STRING = 'string', PX = 'px', MOUSEOUT = 'mouseout', MOUSELEAVE = 'mouseleave', MOUSEOVER = 'mouseover', MOUSEENTER = 'mouseenter', MOUSEMOVE = 'mousemove', MOUSEDOWN = 'mousedown', MOUSEUP = 'mouseup', POINTERMOVE = 'pointermove', POINTERDOWN = 'pointerdown', POINTERUP = 'pointerup', POINTERCANCEL = 'pointercancel', LOSTPOINTERCAPTURE = 'lostpointercapture', POINTEROUT = 'pointerout', POINTERLEAVE = 'pointerleave', POINTEROVER = 'pointerover', POINTERENTER = 'pointerenter', CONTEXTMENU = 'contextmenu', TOUCHSTART = 'touchstart', TOUCHEND = 'touchend', TOUCHMOVE = 'touchmove', TOUCHCANCEL = 'touchcancel', WHEEL = 'wheel', MAX_LAYERS_NUMBER = 5, EVENTS = [
       [MOUSEENTER, '_pointerenter'],
       [MOUSEDOWN, '_pointerdown'],
@@ -3605,6 +5773,40 @@
   }
   const NO_POINTERS_MESSAGE = `Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);`;
   const stages = [];
+  /**
+   * Stage constructor.  A stage is used to contain multiple layers
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Container
+   * @param {Object} config
+   * @param {String|Element} config.container Container selector or DOM element
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var stage = new Konva.Stage({
+   *   width: 500,
+   *   height: 800,
+   *   container: 'containerId' // or "#containerId" or ".containerClass"
+   * });
+   */
   class Stage extends Container {
       constructor(config) {
           super(checkNoClip(config));
@@ -3635,6 +5837,12 @@
           const style = this.visible() ? '' : 'none';
           this.content.style.display = style;
       }
+      /**
+       * set container dom element which contains the stage wrapper div element
+       * @method
+       * @name Konva.Stage#setContainer
+       * @param {DomElement} container can pass in a dom element or id string
+       */
       setContainer(container) {
           if (typeof container === STRING) {
               if (container.charAt(0) === '.') {
@@ -3667,6 +5875,11 @@
       shouldDrawHit() {
           return true;
       }
+      /**
+       * clear all layers
+       * @method
+       * @name Konva.Stage#clear
+       */
       clear() {
           var layers = this.children, len = layers.length, n;
           for (n = 0; n < len; n++) {
@@ -3694,6 +5907,14 @@
           }
           return this;
       }
+      /**
+       * returns ABSOLUTE pointer position which can be a touch position or mouse position
+       * pointer position doesn't include any transforms (such as scale) of the stage
+       * it is just a plain position of pointer relative to top-left corner of the canvas
+       * @method
+       * @name Konva.Stage#getPointerPosition
+       * @returns {Vector2d|null}
+       */
       getPointerPosition() {
           const pos = this._pointerPositions[0] || this._changedPointerPositions[0];
           if (!pos) {
@@ -3742,6 +5963,18 @@
           });
           return canvas;
       }
+      /**
+       * get visible intersection shape. This is the preferred
+       *  method for determining if a point intersects a shape or not
+       * @method
+       * @name Konva.Stage#getIntersection
+       * @param {Object} pos
+       * @param {Number} pos.x
+       * @param {Number} pos.y
+       * @returns {Konva.Node}
+       * @example
+       * var shape = stage.getIntersection({x: 50, y: 50});
+       */
       getIntersection(pos) {
           if (!pos) {
               return null;
@@ -3759,11 +5992,13 @@
           var width = this.width();
           var height = this.height();
           if (this.content) {
+              // set content dimensions
               this.content.style.width = width + PX;
               this.content.style.height = height + PX;
           }
           this.bufferCanvas.setSize(width, height);
           this.bufferHitCanvas.setSize(width, height);
+          // set layer dimensions
           this.children.forEach((layer) => {
               layer.setSize({ width, height });
               layer.draw();
@@ -3784,10 +6019,12 @@
                   ' layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.');
           }
           layer.setSize({ width: this.width(), height: this.height() });
+          // draw layer and append canvas to container
           layer.draw();
           if (Konva$2.isBrowser) {
               this.content.appendChild(layer.canvas._canvas);
           }
+          // chainable
           return this;
       }
       getParent() {
@@ -3805,6 +6042,11 @@
       releaseCapture(pointerId) {
           releaseCapture(pointerId);
       }
+      /**
+       * returns an array of layers
+       * @method
+       * @name Konva.Stage#getLayers
+       */
       getLayers() {
           return this.children;
       }
@@ -3888,7 +6130,9 @@
           this._changedPointerPositions.forEach((pos) => {
               var shape = this.getIntersection(pos);
               DD.justDragged = false;
+              // probably we are staring a click
               Konva$2['_' + eventType + 'ListenClick'] = true;
+              // no shape detected? do nothing
               const hasShape = shape && shape.isListening();
               if (!hasShape) {
                   return;
@@ -3896,17 +6140,21 @@
               if (Konva$2.capturePointerEventsEnabled) {
                   shape.setPointerCapture(pos.id);
               }
+              // save where we started the click
               this[eventType + 'ClickStartShape'] = shape;
               shape._fireAndBubble(events.pointerdown, {
                   evt: evt,
                   pointerId: pos.id,
               });
               triggeredOnShape = true;
+              // TODO: test in iframe
+              // only call preventDefault if the shape is listening for events
               const isTouch = evt.type.indexOf('touch') >= 0;
               if (shape.preventDefault() && evt.cancelable && isTouch) {
                   evt.preventDefault();
               }
           });
+          // trigger down on stage if not already
           if (!triggeredOnShape) {
               this._fire(events.pointerdown, {
                   evt: evt,
@@ -4009,6 +6257,7 @@
                   clearTimeout(this[eventType + 'DblTimeout']);
               }
               else if (!DD.justDragged) {
+                  // don't set inDblClickWindow after dragging
                   Konva$2['_' + eventType + 'InDblClickWindow'] = true;
                   Konva$2['_' + eventType + 'InDblClickWindowId'] = pointerId;
                   clearTimeout(this[eventType + 'DblTimeout']);
@@ -4020,6 +6269,7 @@
                   triggeredOnShape = true;
                   this[eventType + 'ClickEndShape'] = shape;
                   shape._fireAndBubble(events.pointerup, Object.assign({}, event));
+                  // detect if click or double click occurred
                   if (Konva$2['_' + eventType + 'ListenClick'] &&
                       clickStartShape &&
                       clickStartShape === shape) {
@@ -4058,6 +6308,8 @@
               });
           }
           Konva$2['_' + eventType + 'ListenClick'] = false;
+          // always call preventDefault for desktop events because some browsers
+          // try to drag and drop the canvas element
           if (evt.cancelable) {
               evt.preventDefault();
           }
@@ -4102,10 +6354,27 @@
       _lostpointercapture(evt) {
           releaseCapture(evt.pointerId);
       }
+      /**
+       * manually register pointers positions (mouse/touch) in the stage.
+       * So you can use stage.getPointerPosition(). Usually you don't need to use that method
+       * because all internal events are automatically registered. It may be useful if event
+       * is triggered outside of the stage, but you still want to use Konva methods to get pointers position.
+       * @method
+       * @name Konva.Stage#setPointersPositions
+       * @param {Object} event Event object
+       * @example
+       *
+       * window.addEventListener('mousemove', (e) => {
+       *   stage.setPointersPositions(e);
+       * });
+       */
       setPointersPositions(evt) {
           var contentPosition = this._getContentPosition(), x = null, y = null;
           evt = evt ? evt : window.event;
+          // touch events
           if (evt.touches !== undefined) {
+              // touchlist has not support for map method
+              // so we have to iterate
               this._pointerPositions = [];
               this._changedPointerPositions = [];
               Array.prototype.forEach.call(evt.touches, (touch) => {
@@ -4124,6 +6393,7 @@
               });
           }
           else {
+              // mouse events
               x = (evt.clientX - contentPosition.left) / contentPosition.scaleX;
               y = (evt.clientY - contentPosition.top) / contentPosition.scaleY;
               this.pointerPos = {
@@ -4153,6 +6423,8 @@
           return {
               top: rect.top,
               left: rect.left,
+              // sometimes clientWidth can be equals to 0
+              // i saw it in react-konva test, looks like it is because of hidden testing element
               scaleX: rect.width / this.content.clientWidth || 1,
               scaleY: rect.height / this.content.clientHeight || 1,
           };
@@ -4174,7 +6446,9 @@
           if (!container) {
               throw 'Stage has no container. A container is required.';
           }
+          // clear content inside container
           container.innerHTML = '';
+          // content
           this.content = document.createElement('div');
           this.content.style.position = 'relative';
           this.content.style.userSelect = 'none';
@@ -4183,6 +6457,7 @@
           container.appendChild(this.content);
           this._resizeDOM();
       }
+      // currently cache function is now working for stage, because stage has no its own canvas element
       cache() {
           Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.');
           return this;
@@ -4190,6 +6465,12 @@
       clearCache() {
           return this;
       }
+      /**
+       * batch draw
+       * @method
+       * @name Konva.Stage#batchDraw
+       * @return {Konva.Stage} this
+       */
       batchDraw() {
           this.getChildren().forEach(function (layer) {
               layer.batchDraw();
@@ -4199,6 +6480,19 @@
   }
   Stage.prototype.nodeType = STAGE;
   _registerNode(Stage);
+  /**
+   * get/set container DOM element
+   * @method
+   * @name Konva.Stage#container
+   * @returns {DomElement} container
+   * @example
+   * // get container
+   * var container = stage.container();
+   * // set container
+   * var container = document.createElement('div');
+   * body.appendChild(container);
+   * stage.container(container);
+   */
   Factory.addGetterSetter(Stage, 'container');
 
   var HAS_SHADOW = 'hasShadow';
@@ -4215,6 +6509,11 @@
       return dummyContext$1;
   }
   const shapes = {};
+  // TODO: idea - use only "remove" (or destroy method)
+  // how? on add, check that every inner shape has reference in konva store with color
+  // on remove - clear that reference
+  // the approach is good. But what if we want to cache the shape before we add it into the stage
+  // what color to use for hit test?
   function _fillFunc$2(context) {
       context.fill();
   }
@@ -4242,9 +6541,108 @@
   function _clearRadialGradientCache() {
       this._clearCache(radialGradient);
   }
+  /**
+   * Shape constructor.  Shapes are primitive objects such as rectangles,
+   *  circles, text, lines, etc.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Node
+   * @param {Object} config
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var customShape = new Konva.Shape({
+   *   x: 5,
+   *   y: 10,
+   *   fill: 'red',
+   *   // a Konva.Canvas renderer is passed into the sceneFunc function
+   *   sceneFunc (context, shape) {
+   *     context.beginPath();
+   *     context.moveTo(200, 50);
+   *     context.lineTo(420, 80);
+   *     context.quadraticCurveTo(300, 100, 260, 170);
+   *     context.closePath();
+   *     // Konva specific method
+   *     context.fillStrokeShape(shape);
+   *   }
+   *});
+   */
   class Shape extends Node {
       constructor(config) {
           super(config);
+          // set colorKey
           let key;
           while (true) {
               key = Util.getRandomColor();
@@ -4269,6 +6667,12 @@
       getHitFunc() {
           return this.attrs.hitFunc || this['_hitFunc'];
       }
+      /**
+       * returns whether or not a shadow will be rendered
+       * @method
+       * @name Konva.Shape#hasShadow
+       * @returns {Boolean}
+       */
       hasShadow() {
           return this._getCache(HAS_SHADOW, this._hasShadow);
       }
@@ -4300,7 +6704,7 @@
                       c: m[2],
                       d: m[3],
                       e: m[4],
-                      f: m[5],
+                      f: m[5], // Vertical translation (moving).
                   });
               }
               return pattern;
@@ -4316,6 +6720,7 @@
               var start = this.fillLinearGradientStartPoint();
               var end = this.fillLinearGradientEndPoint();
               var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+              // build color stops
               for (var n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -4332,6 +6737,7 @@
               var start = this.fillRadialGradientStartPoint();
               var end = this.fillRadialGradientEndPoint();
               var grd = ctx.createRadialGradient(start.x, start.y, this.fillRadialGradientStartRadius(), end.x, end.y, this.fillRadialGradientEndRadius());
+              // build color stops
               for (var n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -4355,6 +6761,12 @@
                   ')');
           }
       }
+      /**
+       * returns whether or not the shape will be filled
+       * @method
+       * @name Konva.Shape#hasFill
+       * @returns {Boolean}
+       */
       hasFill() {
           return this._calculate('hasFill', [
               'fillEnabled',
@@ -4370,6 +6782,12 @@
                       this.fillRadialGradientColorStops()));
           });
       }
+      /**
+       * returns whether or not the shape will be stroked
+       * @method
+       * @name Konva.Shape#hasStroke
+       * @returns {Boolean}
+       */
       hasStroke() {
           return this._calculate('hasStroke', [
               'strokeEnabled',
@@ -4379,16 +6797,39 @@
           ], () => {
               return (this.strokeEnabled() &&
                   this.strokeWidth() &&
-                  !!(this.stroke() || this.strokeLinearGradientColorStops()));
+                  !!(this.stroke() || this.strokeLinearGradientColorStops())
+              // this.getStrokeRadialGradientColorStops()
+              );
           });
+          // return (
+          //   this.strokeEnabled() &&
+          //   this.strokeWidth() &&
+          //   !!(this.stroke() || this.strokeLinearGradientColorStops())
+          //   // this.getStrokeRadialGradientColorStops()
+          // );
       }
       hasHitStroke() {
           const width = this.hitStrokeWidth();
+          // on auto just check by stroke
           if (width === 'auto') {
               return this.hasStroke();
           }
+          // we should enable hit stroke if stroke is enabled
+          // and we have some value from width
           return this.strokeEnabled() && !!width;
       }
+      /**
+       * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
+       *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times
+       *  consecutively.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
+       *  because it performs much better
+       * @method
+       * @name Konva.Shape#intersects
+       * @param {Object} point
+       * @param {Number} point.x
+       * @param {Number} point.y
+       * @returns {Boolean}
+       */
       intersects(point) {
           var stage = this.getStage(), bufferHitCanvas = stage.bufferHitCanvas, p;
           bufferHitCanvas.getContext().clear();
@@ -4402,11 +6843,19 @@
           delete this.colorKey;
           return this;
       }
+      // why do we need buffer canvas?
+      // it give better result when a shape has
+      // stroke with fill and with some opacity
       _useBufferCanvas(forceFill) {
+          // image and sprite still has "fill" as image
+          // so they use that method with forced fill
+          // it probably will be simpler, then copy/paste the code
           var _a;
+          // buffer canvas is available only inside the stage
           if (!this.getStage()) {
               return false;
           }
+          // force skip buffer canvas
           const perfectDrawEnabled = (_a = this.attrs.perfectDrawEnabled) !== null && _a !== void 0 ? _a : true;
           if (!perfectDrawEnabled) {
               return false;
@@ -4441,6 +6890,18 @@
               return true;
           }
       }
+      /**
+       * return self rectangle (x, y, width, height) of shape.
+       * This method are not taken into account transformation and styles.
+       * @method
+       * @name Konva.Shape#getSelfRect
+       * @returns {Object} rect with {x, y, width, height} properties
+       * @example
+       *
+       * rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
+       * circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
+       *
+       */
       getSelfRect() {
           var size = this.size();
           return {
@@ -4466,6 +6927,9 @@
           const blurRadius = (applyShadow && this.shadowBlur()) || 0;
           const width = preWidth + blurRadius * 2;
           const height = preHeight + blurRadius * 2;
+          // if stroke, for example = 3
+          // we need to set x to 1.5, but after Math.round it will be 2
+          // as we have additional offset we need to increase width and height by 1 pixel
           let roundingOffset = 0;
           if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
               roundingOffset = 1;
@@ -4486,12 +6950,17 @@
           return rect;
       }
       drawScene(can, top) {
+          // basically there are 3 drawing modes
+          // 1 - simple drawing when nothing is cached.
+          // 2 - when we are caching current
+          // 3 - when node is cached and we need to draw it into layer
           var layer = this.getLayer(), canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), hasShadow = this.hasShadow(), stage, bufferCanvas, bufferContext;
           var skipBuffer = canvas.isCache;
           var cachingSelf = top === this;
           if (!this.isVisible() && !cachingSelf) {
               return this;
           }
+          // if node is cached we just need to draw from cache
           if (cachedCanvas) {
               context.save();
               var m = this.getAbsoluteTransform(top).getMatrix();
@@ -4504,6 +6973,7 @@
               return this;
           }
           context.save();
+          // if buffer canvas is needed
           if (this._useBufferCanvas() && !skipBuffer) {
               stage = this.getStage();
               bufferCanvas = stage.bufferCanvas;
@@ -4511,6 +6981,7 @@
               bufferContext.clear();
               bufferContext.save();
               bufferContext._applyLineJoin(this);
+              // layer might be undefined if we are using cache before adding to layer
               var o = this.getAbsoluteTransform(top).getMatrix();
               bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
               drawFunc.call(this, bufferContext, this);
@@ -4569,6 +7040,18 @@
           context.restore();
           return this;
       }
+      /**
+       * draw hit graph using the cached scene canvas
+       * @method
+       * @name Konva.Shape#drawHitFromCache
+       * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not
+       *  a pixel should be drawn onto the hit graph.  Must be a value between 0 and 255.
+       *  The default is 0
+       * @returns {Konva.Shape}
+       * @example
+       * shape.cache();
+       * shape.drawHitFromCache();
+       */
       drawHitFromCache(alphaThreshold = 0) {
           var cachedCanvas = this._getCanvasCache(), sceneCanvas = this._getCachedSceneCanvas(), hitCanvas = cachedCanvas.hit, hitContext = hitCanvas.getContext(), hitWidth = hitCanvas.getWidth(), hitHeight = hitCanvas.getHeight(), hitImageData, hitData, len, rgbColorKey, i, alpha;
           hitContext.clear();
@@ -4578,6 +7061,7 @@
               hitData = hitImageData.data;
               len = hitData.length;
               rgbColorKey = Util._hexToRgb(this.colorKey);
+              // replace non transparent pixels with color key
               for (i = 0; i < len; i += 4) {
                   alpha = hitData[i + 3];
                   if (alpha > alphaThreshold) {
@@ -4620,84 +7104,992 @@
   Shape.prototype.on.call(Shape.prototype, 'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva', _clearFillPatternCache);
   Shape.prototype.on.call(Shape.prototype, 'fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva', _clearLinearGradientCache);
   Shape.prototype.on.call(Shape.prototype, 'fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva', _clearRadialGradientCache);
+  // add getters and setters
   Factory.addGetterSetter(Shape, 'stroke', undefined, getStringOrGradientValidator());
+  /**
+   * get/set stroke color
+   * @name Konva.Shape#stroke
+   * @method
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get stroke color
+   * var stroke = shape.stroke();
+   *
+   * // set stroke color with color string
+   * shape.stroke('green');
+   *
+   * // set stroke color with hex
+   * shape.stroke('#00ff00');
+   *
+   * // set stroke color with rgb
+   * shape.stroke('rgb(0,255,0)');
+   *
+   * // set stroke color with rgba and make it 50% opaque
+   * shape.stroke('rgba(0,255,0,0.5');
+   */
   Factory.addGetterSetter(Shape, 'strokeWidth', 2, getNumberValidator());
+  /**
+   * get/set stroke width
+   * @name Konva.Shape#strokeWidth
+   * @method
+   * @param {Number} strokeWidth
+   * @returns {Number}
+   * @example
+   * // get stroke width
+   * var strokeWidth = shape.strokeWidth();
+   *
+   * // set stroke width
+   * shape.strokeWidth(10);
+   */
   Factory.addGetterSetter(Shape, 'fillAfterStrokeEnabled', false);
+  /**
+   * get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill.
+   * In rare situations you may want a different behavior. When you have a stroke first then fill on top of it.
+   * Especially useful for Text objects.
+   * Default is false.
+   * @name Konva.Shape#fillAfterStrokeEnabled
+   * @method
+   * @param {Boolean} fillAfterStrokeEnabled
+   * @returns {Boolean}
+   * @example
+   * // get stroke width
+   * var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled();
+   *
+   * // set stroke width
+   * shape.fillAfterStrokeEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'hitStrokeWidth', 'auto', getNumberOrAutoValidator());
+  /**
+   * get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth
+   * @name Konva.Shape#hitStrokeWidth
+   * @method
+   * @param {Number} hitStrokeWidth
+   * @returns {Number}
+   * @example
+   * // get stroke width
+   * var hitStrokeWidth = shape.hitStrokeWidth();
+   *
+   * // set hit stroke width
+   * shape.hitStrokeWidth(20);
+   * // set hit stroke width always equals to scene stroke width
+   * shape.hitStrokeWidth('auto');
+   */
   Factory.addGetterSetter(Shape, 'strokeHitEnabled', true, getBooleanValidator());
+  /**
+   * **deprecated, use hitStrokeWidth instead!** get/set strokeHitEnabled property. Useful for performance optimization.
+   * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
+   * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
+   * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
+   * Default value is true.
+   * @name Konva.Shape#strokeHitEnabled
+   * @method
+   * @param {Boolean} strokeHitEnabled
+   * @returns {Boolean}
+   * @example
+   * // get strokeHitEnabled
+   * var strokeHitEnabled = shape.strokeHitEnabled();
+   *
+   * // set strokeHitEnabled
+   * shape.strokeHitEnabled();
+   */
   Factory.addGetterSetter(Shape, 'perfectDrawEnabled', true, getBooleanValidator());
+  /**
+   * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.
+   * See http://konvajs.org/docs/performance/Disable_Perfect_Draw.html for more information.
+   * Default value is true
+   * @name Konva.Shape#perfectDrawEnabled
+   * @method
+   * @param {Boolean} perfectDrawEnabled
+   * @returns {Boolean}
+   * @example
+   * // get perfectDrawEnabled
+   * var perfectDrawEnabled = shape.perfectDrawEnabled();
+   *
+   * // set perfectDrawEnabled
+   * shape.perfectDrawEnabled();
+   */
   Factory.addGetterSetter(Shape, 'shadowForStrokeEnabled', true, getBooleanValidator());
+  /**
+   * get/set shadowForStrokeEnabled. Useful for performance optimization.
+   * You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will no effect shadow.
+   * Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line will have no shadow!.
+   * Default value is true
+   * @name Konva.Shape#shadowForStrokeEnabled
+   * @method
+   * @param {Boolean} shadowForStrokeEnabled
+   * @returns {Boolean}
+   * @example
+   * // get shadowForStrokeEnabled
+   * var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();
+   *
+   * // set shadowForStrokeEnabled
+   * shape.shadowForStrokeEnabled();
+   */
   Factory.addGetterSetter(Shape, 'lineJoin');
+  /**
+   * get/set line join.  Can be miter, round, or bevel.  The
+   *  default is miter
+   * @name Konva.Shape#lineJoin
+   * @method
+   * @param {String} lineJoin
+   * @returns {String}
+   * @example
+   * // get line join
+   * var lineJoin = shape.lineJoin();
+   *
+   * // set line join
+   * shape.lineJoin('round');
+   */
   Factory.addGetterSetter(Shape, 'lineCap');
+  /**
+   * get/set line cap.  Can be butt, round, or square
+   * @name Konva.Shape#lineCap
+   * @method
+   * @param {String} lineCap
+   * @returns {String}
+   * @example
+   * // get line cap
+   * var lineCap = shape.lineCap();
+   *
+   * // set line cap
+   * shape.lineCap('round');
+   */
   Factory.addGetterSetter(Shape, 'sceneFunc');
+  /**
+   * get/set scene draw function. That function is used to draw the shape on a canvas.
+   * Also that function will be used to draw hit area of the shape, in case if hitFunc is not defined.
+   * @name Konva.Shape#sceneFunc
+   * @method
+   * @param {Function} drawFunc drawing function
+   * @returns {Function}
+   * @example
+   * // get scene draw function
+   * var sceneFunc = shape.sceneFunc();
+   *
+   * // set scene draw function
+   * shape.sceneFunc(function(context, shape) {
+   *   context.beginPath();
+   *   context.rect(0, 0, shape.width(), shape.height());
+   *   context.closePath();
+   *   // important Konva method that fill and stroke shape from its properties
+   *   // like stroke and fill
+   *   context.fillStrokeShape(shape);
+   * });
+   */
   Factory.addGetterSetter(Shape, 'hitFunc');
+  /**
+   * get/set hit draw function. That function is used to draw custom hit area of a shape.
+   * @name Konva.Shape#hitFunc
+   * @method
+   * @param {Function} drawFunc drawing function
+   * @returns {Function}
+   * @example
+   * // get hit draw function
+   * var hitFunc = shape.hitFunc();
+   *
+   * // set hit draw function
+   * shape.hitFunc(function(context) {
+   *   context.beginPath();
+   *   context.rect(0, 0, shape.width(), shape.height());
+   *   context.closePath();
+   *   // important Konva method that fill and stroke shape from its properties
+   *   context.fillStrokeShape(shape);
+   * });
+   */
   Factory.addGetterSetter(Shape, 'dash');
+  /**
+   * get/set dash array for stroke.
+   * @name Konva.Shape#dash
+   * @method
+   * @param {Array} dash
+   * @returns {Array}
+   * @example
+   *  // apply dashed stroke that is 10px long and 5 pixels apart
+   *  line.dash([10, 5]);
+   *  // apply dashed stroke that is made up of alternating dashed
+   *  // lines that are 10px long and 20px apart, and dots that have
+   *  // a radius of 5px and are 20px apart
+   *  line.dash([10, 20, 0.001, 20]);
+   */
   Factory.addGetterSetter(Shape, 'dashOffset', 0, getNumberValidator());
+  /**
+   * get/set dash offset for stroke.
+   * @name Konva.Shape#dash
+   * @method
+   * @param {Number} dash offset
+   * @returns {Number}
+   * @example
+   *  // apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
+   *  line.dash([10, 5]);
+   *  line.dashOffset(5);
+   */
   Factory.addGetterSetter(Shape, 'shadowColor', undefined, getStringValidator());
+  /**
+   * get/set shadow color
+   * @name Konva.Shape#shadowColor
+   * @method
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get shadow color
+   * var shadow = shape.shadowColor();
+   *
+   * // set shadow color with color string
+   * shape.shadowColor('green');
+   *
+   * // set shadow color with hex
+   * shape.shadowColor('#00ff00');
+   *
+   * // set shadow color with rgb
+   * shape.shadowColor('rgb(0,255,0)');
+   *
+   * // set shadow color with rgba and make it 50% opaque
+   * shape.shadowColor('rgba(0,255,0,0.5');
+   */
   Factory.addGetterSetter(Shape, 'shadowBlur', 0, getNumberValidator());
+  /**
+   * get/set shadow blur
+   * @name Konva.Shape#shadowBlur
+   * @method
+   * @param {Number} blur
+   * @returns {Number}
+   * @example
+   * // get shadow blur
+   * var shadowBlur = shape.shadowBlur();
+   *
+   * // set shadow blur
+   * shape.shadowBlur(10);
+   */
   Factory.addGetterSetter(Shape, 'shadowOpacity', 1, getNumberValidator());
+  /**
+   * get/set shadow opacity.  must be a value between 0 and 1
+   * @name Konva.Shape#shadowOpacity
+   * @method
+   * @param {Number} opacity
+   * @returns {Number}
+   * @example
+   * // get shadow opacity
+   * var shadowOpacity = shape.shadowOpacity();
+   *
+   * // set shadow opacity
+   * shape.shadowOpacity(0.5);
+   */
   Factory.addComponentsGetterSetter(Shape, 'shadowOffset', ['x', 'y']);
+  /**
+   * get/set shadow offset
+   * @name Konva.Shape#shadowOffset
+   * @method
+   * @param {Object} offset
+   * @param {Number} offset.x
+   * @param {Number} offset.y
+   * @returns {Object}
+   * @example
+   * // get shadow offset
+   * var shadowOffset = shape.shadowOffset();
+   *
+   * // set shadow offset
+   * shape.shadowOffset({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'shadowOffsetX', 0, getNumberValidator());
+  /**
+   * get/set shadow offset x
+   * @name Konva.Shape#shadowOffsetX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get shadow offset x
+   * var shadowOffsetX = shape.shadowOffsetX();
+   *
+   * // set shadow offset x
+   * shape.shadowOffsetX(5);
+   */
   Factory.addGetterSetter(Shape, 'shadowOffsetY', 0, getNumberValidator());
+  /**
+   * get/set shadow offset y
+   * @name Konva.Shape#shadowOffsetY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get shadow offset y
+   * var shadowOffsetY = shape.shadowOffsetY();
+   *
+   * // set shadow offset y
+   * shape.shadowOffsetY(5);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternImage');
+  /**
+   * get/set fill pattern image
+   * @name Konva.Shape#fillPatternImage
+   * @method
+   * @param {Image} image object
+   * @returns {Image}
+   * @example
+   * // get fill pattern image
+   * var fillPatternImage = shape.fillPatternImage();
+   *
+   * // set fill pattern image
+   * var imageObj = new Image();
+   * imageObj.onload = function() {
+   *   shape.fillPatternImage(imageObj);
+   * };
+   * imageObj.src = 'path/to/image/jpg';
+   */
   Factory.addGetterSetter(Shape, 'fill', undefined, getStringOrGradientValidator());
+  /**
+   * get/set fill color
+   * @name Konva.Shape#fill
+   * @method
+   * @param {String} color
+   * @returns {String}
+   * @example
+   * // get fill color
+   * var fill = shape.fill();
+   *
+   * // set fill color with color string
+   * shape.fill('green');
+   *
+   * // set fill color with hex
+   * shape.fill('#00ff00');
+   *
+   * // set fill color with rgb
+   * shape.fill('rgb(0,255,0)');
+   *
+   * // set fill color with rgba and make it 50% opaque
+   * shape.fill('rgba(0,255,0,0.5');
+   *
+   * // shape without fill
+   * shape.fill(null);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternX', 0, getNumberValidator());
+  /**
+   * get/set fill pattern x
+   * @name Konva.Shape#fillPatternX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern x
+   * var fillPatternX = shape.fillPatternX();
+   * // set fill pattern x
+   * shape.fillPatternX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternY', 0, getNumberValidator());
+  /**
+   * get/set fill pattern y
+   * @name Konva.Shape#fillPatternY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern y
+   * var fillPatternY = shape.fillPatternY();
+   * // set fill pattern y
+   * shape.fillPatternY(20);
+   */
   Factory.addGetterSetter(Shape, 'fillLinearGradientColorStops');
+  /**
+   * get/set fill linear gradient color stops
+   * @name Konva.Shape#fillLinearGradientColorStops
+   * @method
+   * @param {Array} colorStops
+   * @returns {Array} colorStops
+   * @example
+   * // get fill linear gradient color stops
+   * var colorStops = shape.fillLinearGradientColorStops();
+   *
+   * // create a linear gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+   */
   Factory.addGetterSetter(Shape, 'strokeLinearGradientColorStops');
+  /**
+   * get/set stroke linear gradient color stops
+   * @name Konva.Shape#strokeLinearGradientColorStops
+   * @method
+   * @param {Array} colorStops
+   * @returns {Array} colorStops
+   * @example
+   * // get stroke linear gradient color stops
+   * var colorStops = shape.strokeLinearGradientColorStops();
+   *
+   * // create a linear gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientStartRadius', 0);
+  /**
+   * get/set fill radial gradient start radius
+   * @name Konva.Shape#fillRadialGradientStartRadius
+   * @method
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radial gradient start radius
+   * var startRadius = shape.fillRadialGradientStartRadius();
+   *
+   * // set radial gradient start radius
+   * shape.fillRadialGradientStartRadius(0);
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientEndRadius', 0);
+  /**
+   * get/set fill radial gradient end radius
+   * @name Konva.Shape#fillRadialGradientEndRadius
+   * @method
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radial gradient end radius
+   * var endRadius = shape.fillRadialGradientEndRadius();
+   *
+   * // set radial gradient end radius
+   * shape.fillRadialGradientEndRadius(100);
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientColorStops');
+  /**
+   * get/set fill radial gradient color stops
+   * @name Konva.Shape#fillRadialGradientColorStops
+   * @method
+   * @param {Number} colorStops
+   * @returns {Array}
+   * @example
+   * // get fill radial gradient color stops
+   * var colorStops = shape.fillRadialGradientColorStops();
+   *
+   * // create a radial gradient that starts with red, changes to blue
+   * // halfway through, and then changes to green
+   * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
+   */
   Factory.addGetterSetter(Shape, 'fillPatternRepeat', 'repeat');
+  /**
+   * get/set fill pattern repeat.  Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'.  The default is 'repeat'
+   * @name Konva.Shape#fillPatternRepeat
+   * @method
+   * @param {String} repeat
+   * @returns {String}
+   * @example
+   * // get fill pattern repeat
+   * var repeat = shape.fillPatternRepeat();
+   *
+   * // repeat pattern in x direction only
+   * shape.fillPatternRepeat('repeat-x');
+   *
+   * // do not repeat the pattern
+   * shape.fillPatternRepeat('no-repeat');
+   */
   Factory.addGetterSetter(Shape, 'fillEnabled', true);
+  /**
+   * get/set fill enabled flag
+   * @name Konva.Shape#fillEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get fill enabled flag
+   * var fillEnabled = shape.fillEnabled();
+   *
+   * // disable fill
+   * shape.fillEnabled(false);
+   *
+   * // enable fill
+   * shape.fillEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'strokeEnabled', true);
+  /**
+   * get/set stroke enabled flag
+   * @name Konva.Shape#strokeEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get stroke enabled flag
+   * var strokeEnabled = shape.strokeEnabled();
+   *
+   * // disable stroke
+   * shape.strokeEnabled(false);
+   *
+   * // enable stroke
+   * shape.strokeEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'shadowEnabled', true);
+  /**
+   * get/set shadow enabled flag
+   * @name Konva.Shape#shadowEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get shadow enabled flag
+   * var shadowEnabled = shape.shadowEnabled();
+   *
+   * // disable shadow
+   * shape.shadowEnabled(false);
+   *
+   * // enable shadow
+   * shape.shadowEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'dashEnabled', true);
+  /**
+   * get/set dash enabled flag
+   * @name Konva.Shape#dashEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get dash enabled flag
+   * var dashEnabled = shape.dashEnabled();
+   *
+   * // disable dash
+   * shape.dashEnabled(false);
+   *
+   * // enable dash
+   * shape.dashEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'strokeScaleEnabled', true);
+  /**
+   * get/set strokeScale enabled flag
+   * @name Konva.Shape#strokeScaleEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get stroke scale enabled flag
+   * var strokeScaleEnabled = shape.strokeScaleEnabled();
+   *
+   * // disable stroke scale
+   * shape.strokeScaleEnabled(false);
+   *
+   * // enable stroke scale
+   * shape.strokeScaleEnabled(true);
+   */
   Factory.addGetterSetter(Shape, 'fillPriority', 'color');
+  /**
+   * get/set fill priority.  can be color, pattern, linear-gradient, or radial-gradient.  The default is color.
+   *   This is handy if you want to toggle between different fill types.
+   * @name Konva.Shape#fillPriority
+   * @method
+   * @param {String} priority
+   * @returns {String}
+   * @example
+   * // get fill priority
+   * var fillPriority = shape.fillPriority();
+   *
+   * // set fill priority
+   * shape.fillPriority('linear-gradient');
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillPatternOffset', ['x', 'y']);
+  /**
+   * get/set fill pattern offset
+   * @name Konva.Shape#fillPatternOffset
+   * @method
+   * @param {Object} offset
+   * @param {Number} offset.x
+   * @param {Number} offset.y
+   * @returns {Object}
+   * @example
+   * // get fill pattern offset
+   * var patternOffset = shape.fillPatternOffset();
+   *
+   * // set fill pattern offset
+   * shape.fillPatternOffset({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillPatternOffsetX', 0, getNumberValidator());
+  /**
+   * get/set fill pattern offset x
+   * @name Konva.Shape#fillPatternOffsetX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern offset x
+   * var patternOffsetX = shape.fillPatternOffsetX();
+   *
+   * // set fill pattern offset x
+   * shape.fillPatternOffsetX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternOffsetY', 0, getNumberValidator());
+  /**
+   * get/set fill pattern offset y
+   * @name Konva.Shape#fillPatternOffsetY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern offset y
+   * var patternOffsetY = shape.fillPatternOffsetY();
+   *
+   * // set fill pattern offset y
+   * shape.fillPatternOffsetY(10);
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillPatternScale', ['x', 'y']);
+  /**
+   * get/set fill pattern scale
+   * @name Konva.Shape#fillPatternScale
+   * @method
+   * @param {Object} scale
+   * @param {Number} scale.x
+   * @param {Number} scale.y
+   * @returns {Object}
+   * @example
+   * // get fill pattern scale
+   * var patternScale = shape.fillPatternScale();
+   *
+   * // set fill pattern scale
+   * shape.fillPatternScale({
+   *   x: 2,
+   *   y: 2
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillPatternScaleX', 1, getNumberValidator());
+  /**
+   * get/set fill pattern scale x
+   * @name Konva.Shape#fillPatternScaleX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill pattern scale x
+   * var patternScaleX = shape.fillPatternScaleX();
+   *
+   * // set fill pattern scale x
+   * shape.fillPatternScaleX(2);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternScaleY', 1, getNumberValidator());
+  /**
+   * get/set fill pattern scale y
+   * @name Konva.Shape#fillPatternScaleY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill pattern scale y
+   * var patternScaleY = shape.fillPatternScaleY();
+   *
+   * // set fill pattern scale y
+   * shape.fillPatternScaleY(2);
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientStartPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set fill linear gradient start point
+   * @name Konva.Shape#fillLinearGradientStartPoint
+   * @method
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill linear gradient start point
+   * var startPoint = shape.fillLinearGradientStartPoint();
+   *
+   * // set fill linear gradient start point
+   * shape.fillLinearGradientStartPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientStartPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set stroke linear gradient start point
+   * @name Konva.Shape#strokeLinearGradientStartPoint
+   * @method
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient start point
+   * var startPoint = shape.strokeLinearGradientStartPoint();
+   *
+   * // set stroke linear gradient start point
+   * shape.strokeLinearGradientStartPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillLinearGradientStartPointX', 0);
+  /**
+   * get/set fill linear gradient start point x
+   * @name Konva.Shape#fillLinearGradientStartPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient start point x
+   * var startPointX = shape.fillLinearGradientStartPointX();
+   *
+   * // set fill linear gradient start point x
+   * shape.fillLinearGradientStartPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'strokeLinearGradientStartPointX', 0);
+  /**
+   * get/set stroke linear gradient start point x
+   * @name Konva.Shape#linearLinearGradientStartPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point x
+   * var startPointX = shape.strokeLinearGradientStartPointX();
+   *
+   * // set stroke linear gradient start point x
+   * shape.strokeLinearGradientStartPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillLinearGradientStartPointY', 0);
+  /**
+   * get/set fill linear gradient start point y
+   * @name Konva.Shape#fillLinearGradientStartPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient start point y
+   * var startPointY = shape.fillLinearGradientStartPointY();
+   *
+   * // set fill linear gradient start point y
+   * shape.fillLinearGradientStartPointY(20);
+   */
   Factory.addGetterSetter(Shape, 'strokeLinearGradientStartPointY', 0);
+  /**
+   * get/set stroke linear gradient start point y
+   * @name Konva.Shape#strokeLinearGradientStartPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient start point y
+   * var startPointY = shape.strokeLinearGradientStartPointY();
+   *
+   * // set stroke linear gradient start point y
+   * shape.strokeLinearGradientStartPointY(20);
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientEndPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set fill linear gradient end point
+   * @name Konva.Shape#fillLinearGradientEndPoint
+   * @method
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill linear gradient end point
+   * var endPoint = shape.fillLinearGradientEndPoint();
+   *
+   * // set fill linear gradient end point
+   * shape.fillLinearGradientEndPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientEndPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set stroke linear gradient end point
+   * @name Konva.Shape#strokeLinearGradientEndPoint
+   * @method
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get stroke linear gradient end point
+   * var endPoint = shape.strokeLinearGradientEndPoint();
+   *
+   * // set stroke linear gradient end point
+   * shape.strokeLinearGradientEndPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillLinearGradientEndPointX', 0);
+  /**
+   * get/set fill linear gradient end point x
+   * @name Konva.Shape#fillLinearGradientEndPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient end point x
+   * var endPointX = shape.fillLinearGradientEndPointX();
+   *
+   * // set fill linear gradient end point x
+   * shape.fillLinearGradientEndPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'strokeLinearGradientEndPointX', 0);
+  /**
+   * get/set fill linear gradient end point x
+   * @name Konva.Shape#strokeLinearGradientEndPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point x
+   * var endPointX = shape.strokeLinearGradientEndPointX();
+   *
+   * // set stroke linear gradient end point x
+   * shape.strokeLinearGradientEndPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillLinearGradientEndPointY', 0);
+  /**
+   * get/set fill linear gradient end point y
+   * @name Konva.Shape#fillLinearGradientEndPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill linear gradient end point y
+   * var endPointY = shape.fillLinearGradientEndPointY();
+   *
+   * // set fill linear gradient end point y
+   * shape.fillLinearGradientEndPointY(20);
+   */
   Factory.addGetterSetter(Shape, 'strokeLinearGradientEndPointY', 0);
+  /**
+   * get/set stroke linear gradient end point y
+   * @name Konva.Shape#strokeLinearGradientEndPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get stroke linear gradient end point y
+   * var endPointY = shape.strokeLinearGradientEndPointY();
+   *
+   * // set stroke linear gradient end point y
+   * shape.strokeLinearGradientEndPointY(20);
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientStartPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set fill radial gradient start point
+   * @name Konva.Shape#fillRadialGradientStartPoint
+   * @method
+   * @param {Object} startPoint
+   * @param {Number} startPoint.x
+   * @param {Number} startPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill radial gradient start point
+   * var startPoint = shape.fillRadialGradientStartPoint();
+   *
+   * // set fill radial gradient start point
+   * shape.fillRadialGradientStartPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientStartPointX', 0);
+  /**
+   * get/set fill radial gradient start point x
+   * @name Konva.Shape#fillRadialGradientStartPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient start point x
+   * var startPointX = shape.fillRadialGradientStartPointX();
+   *
+   * // set fill radial gradient start point x
+   * shape.fillRadialGradientStartPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientStartPointY', 0);
+  /**
+   * get/set fill radial gradient start point y
+   * @name Konva.Shape#fillRadialGradientStartPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient start point y
+   * var startPointY = shape.fillRadialGradientStartPointY();
+   *
+   * // set fill radial gradient start point y
+   * shape.fillRadialGradientStartPointY(20);
+   */
   Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientEndPoint', [
       'x',
       'y',
   ]);
+  /**
+   * get/set fill radial gradient end point
+   * @name Konva.Shape#fillRadialGradientEndPoint
+   * @method
+   * @param {Object} endPoint
+   * @param {Number} endPoint.x
+   * @param {Number} endPoint.y
+   * @returns {Object}
+   * @example
+   * // get fill radial gradient end point
+   * var endPoint = shape.fillRadialGradientEndPoint();
+   *
+   * // set fill radial gradient end point
+   * shape.fillRadialGradientEndPoint({
+   *   x: 20,
+   *   y: 10
+   * });
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientEndPointX', 0);
+  /**
+   * get/set fill radial gradient end point x
+   * @name Konva.Shape#fillRadialGradientEndPointX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient end point x
+   * var endPointX = shape.fillRadialGradientEndPointX();
+   *
+   * // set fill radial gradient end point x
+   * shape.fillRadialGradientEndPointX(20);
+   */
   Factory.addGetterSetter(Shape, 'fillRadialGradientEndPointY', 0);
+  /**
+   * get/set fill radial gradient end point y
+   * @name Konva.Shape#fillRadialGradientEndPointY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get fill radial gradient end point y
+   * var endPointY = shape.fillRadialGradientEndPointY();
+   *
+   * // set fill radial gradient end point y
+   * shape.fillRadialGradientEndPointY(20);
+   */
   Factory.addGetterSetter(Shape, 'fillPatternRotation', 0);
+  /**
+   * get/set fill pattern rotation in degrees
+   * @name Konva.Shape#fillPatternRotation
+   * @method
+   * @param {Number} rotation
+   * @returns {Konva.Shape}
+   * @example
+   * // get fill pattern rotation
+   * var patternRotation = shape.fillPatternRotation();
+   *
+   * // set fill pattern rotation
+   * shape.fillPatternRotation(20);
+   */
   Factory.backCompat(Shape, {
       dashArray: 'dash',
       getDashArray: 'getDash',
@@ -4710,13 +8102,63 @@
       setDrawHitFunc: 'setHitFunc',
   });
 
-  var HASH = '#', BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', INTERSECTION_OFFSETS = [
+  // constants
+  var HASH = '#', BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', 
+  /*
+   * 2 - 3 - 4
+   * |       |
+   * 1 - 0   5
+   *         |
+   * 8 - 7 - 6
+   */
+  INTERSECTION_OFFSETS = [
       { x: 0, y: 0 },
       { x: -1, y: -1 },
       { x: 1, y: -1 },
       { x: 1, y: 1 },
-      { x: -1, y: 1 },
+      { x: -1, y: 1 }, // 8
   ], INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
+  /**
+   * Layer constructor.  Layers are tied to their own canvas element and are used
+   * to contain groups or shapes.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Container
+   * @param {Object} config
+   * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
+   * to clear the canvas before each layer draw.  The default value is true.
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * * @param {Object} [config.clip] set clip
+     * @param {Number} [config.clipX] set clip x
+     * @param {Number} [config.clipY] set clip y
+     * @param {Number} [config.clipWidth] set clip width
+     * @param {Number} [config.clipHeight] set clip height
+     * @param {Function} [config.clipFunc] set clip func
+
+   * @example
+   * var layer = new Konva.Layer();
+   * stage.add(layer);
+   * // now you can add shapes, groups into the layer
+   */
   class Layer extends Container {
       constructor(config) {
           super(config);
@@ -4730,27 +8172,50 @@
           this.on('imageSmoothingEnabledChange.konva', this._setSmoothEnabled);
           this._setSmoothEnabled();
       }
+      // for nodejs?
       createPNGStream() {
           const c = this.canvas._canvas;
           return c.createPNGStream();
       }
+      /**
+       * get layer canvas wrapper
+       * @method
+       * @name Konva.Layer#getCanvas
+       */
       getCanvas() {
           return this.canvas;
       }
+      /**
+       * get native canvas element
+       * @method
+       * @name Konva.Layer#getNativeCanvasElement
+       */
       getNativeCanvasElement() {
           return this.canvas._canvas;
       }
+      /**
+       * get layer hit canvas
+       * @method
+       * @name Konva.Layer#getHitCanvas
+       */
       getHitCanvas() {
           return this.hitCanvas;
       }
+      /**
+       * get layer canvas context
+       * @method
+       * @name Konva.Layer#getContext
+       */
       getContext() {
           return this.getCanvas().getContext();
       }
+      // TODO: deprecate this method
       clear(bounds) {
           this.getContext().clear(bounds);
           this.getHitCanvas().getContext().clear(bounds);
           return this;
       }
+      // extend Node.prototype.setZIndex
       setZIndex(index) {
           super.setZIndex(index);
           var stage = this.getStage();
@@ -4792,6 +8257,7 @@
           }
           return true;
       }
+      // extend Node.prototype.moveDown
       moveDown() {
           if (Node.prototype.moveDown.call(this)) {
               var stage = this.getStage();
@@ -4806,6 +8272,7 @@
           }
           return false;
       }
+      // extend Node.prototype.moveToBottom
       moveToBottom() {
           if (Node.prototype.moveToBottom.call(this)) {
               var stage = this.getStage();
@@ -4867,6 +8334,15 @@
           this.getContext()._context.imageSmoothingEnabled =
               this.imageSmoothingEnabled();
       }
+      /**
+       * get/set width of layer. getter return width of stage. setter doing nothing.
+       * if you want change width use `stage.width(value);`
+       * @name Konva.Layer#width
+       * @method
+       * @returns {Number}
+       * @example
+       * var width = layer.width();
+       */
       getWidth() {
           if (this.parent) {
               return this.parent.width();
@@ -4875,6 +8351,15 @@
       setWidth() {
           Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.');
       }
+      /**
+       * get/set height of layer.getter return height of stage. setter doing nothing.
+       * if you want change height use `stage.height(value);`
+       * @name Konva.Layer#height
+       * @method
+       * @returns {Number}
+       * @example
+       * var height = layer.height();
+       */
       getHeight() {
           if (this.parent) {
               return this.parent.height();
@@ -4883,6 +8368,13 @@
       setHeight() {
           Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.');
       }
+      /**
+       * batch draw. this function will not do immediate draw
+       * but it will schedule drawing to next tick (requestAnimFrame)
+       * @method
+       * @name Konva.Layer#batchDraw
+       * @return {Konva.Layer} this
+       */
       batchDraw() {
           if (!this._waitingForDraw) {
               this._waitingForDraw = true;
@@ -4893,10 +8385,25 @@
           }
           return this;
       }
+      /**
+       * get visible intersection shape. This is the preferred
+       * method for determining if a point intersects a shape or not
+       * also you may pass optional selector parameter to return ancestor of intersected shape
+       * @method
+       * @name Konva.Layer#getIntersection
+       * @param {Object} pos
+       * @param {Number} pos.x
+       * @param {Number} pos.y
+       * @returns {Konva.Node}
+       * @example
+       * var shape = layer.getIntersection({x: 50, y: 50});
+       */
       getIntersection(pos) {
           if (!this.isListening() || !this.isVisible()) {
               return null;
           }
+          // in some cases antialiased area may be bigger than 1px
+          // it is possible if we will cache node, then scale it a lot
           var spiralSearchDistance = 1;
           var continueSearch = false;
           while (true) {
@@ -4910,11 +8417,15 @@
                   if (shape) {
                       return shape;
                   }
+                  // we should continue search if we found antialiased pixel
+                  // that means our node somewhere very close
                   continueSearch = !!obj.antialiased;
+                  // stop search if found empty pixel
                   if (!obj.antialiased) {
                       break;
                   }
               }
+              // if no shape, and no antialiased pixel, we should end searching
               if (continueSearch) {
                   spiralSearchDistance += 1;
               }
@@ -4927,6 +8438,7 @@
           const ratio = this.hitCanvas.pixelRatio;
           const p = this.hitCanvas.context.getImageData(Math.round(pos.x * ratio), Math.round(pos.y * ratio), 1, 1).data;
           const p3 = p[3];
+          // fully opaque pixel
           if (p3 === 255) {
               const colorKey = Util._rgbToHex(p[0], p[1], p[2]);
               const shape = shapes[HASH + colorKey];
@@ -4940,10 +8452,12 @@
               };
           }
           else if (p3 > 0) {
+              // antialiased pixel
               return {
                   antialiased: true,
               };
           }
+          // empty pixel
           return {};
       }
       drawScene(can, top) {
@@ -4968,10 +8482,22 @@
           Container.prototype.drawHit.call(this, canvas, top);
           return this;
       }
+      /**
+       * enable hit graph. **DEPRECATED!** Use `layer.listening(true)` instead.
+       * @name Konva.Layer#enableHitGraph
+       * @method
+       * @returns {Layer}
+       */
       enableHitGraph() {
           this.hitGraphEnabled(true);
           return this;
       }
+      /**
+       * disable hit graph. **DEPRECATED!** Use `layer.listening(false)` instead.
+       * @name Konva.Layer#disableHitGraph
+       * @method
+       * @returns {Layer}
+       */
       disableHitGraph() {
           this.hitGraphEnabled(false);
           return this;
@@ -4984,6 +8510,11 @@
           Util.warn('hitGraphEnabled method is deprecated. Please use layer.listening() instead.');
           return this.listening();
       }
+      /**
+       * Show or hide hit canvas over the stage. May be useful for debugging custom hitFunc
+       * @name Konva.Layer#toggleHitCanvas
+       * @method
+       */
       toggleHitCanvas() {
           if (!this.parent || !this.parent['content']) {
               return;
@@ -5000,10 +8531,80 @@
   }
   Layer.prototype.nodeType = 'Layer';
   _registerNode(Layer);
+  /**
+   * get/set imageSmoothingEnabled flag
+   * For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+   * @name Konva.Layer#imageSmoothingEnabled
+   * @method
+   * @param {Boolean} imageSmoothingEnabled
+   * @returns {Boolean}
+   * @example
+   * // get imageSmoothingEnabled flag
+   * var imageSmoothingEnabled = layer.imageSmoothingEnabled();
+   *
+   * layer.imageSmoothingEnabled(false);
+   *
+   * layer.imageSmoothingEnabled(true);
+   */
   Factory.addGetterSetter(Layer, 'imageSmoothingEnabled', true);
+  /**
+   * get/set clearBeforeDraw flag which determines if the layer is cleared or not
+   *  before drawing
+   * @name Konva.Layer#clearBeforeDraw
+   * @method
+   * @param {Boolean} clearBeforeDraw
+   * @returns {Boolean}
+   * @example
+   * // get clearBeforeDraw flag
+   * var clearBeforeDraw = layer.clearBeforeDraw();
+   *
+   * // disable clear before draw
+   * layer.clearBeforeDraw(false);
+   *
+   * // enable clear before draw
+   * layer.clearBeforeDraw(true);
+   */
   Factory.addGetterSetter(Layer, 'clearBeforeDraw', true);
-  Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
+  Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
+  /**
+   * get/set hitGraphEnabled flag.  **DEPRECATED!** Use `layer.listening(false)` instead.
+   *  Disabling the hit graph will greatly increase
+   *  draw performance because the hit graph will not be redrawn each time the layer is
+   *  drawn.  This, however, also disables mouse/touch event detection
+   * @name Konva.Layer#hitGraphEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get hitGraphEnabled flag
+   * var hitGraphEnabled = layer.hitGraphEnabled();
+   *
+   * // disable hit graph
+   * layer.hitGraphEnabled(false);
+   *
+   * // enable hit graph
+   * layer.hitGraphEnabled(true);
+   */
 
+  /**
+   * FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used
+   * to contain shapes only.  If you don't need node nesting, mouse and touch interactions,
+   * or event pub/sub, you should use FastLayer instead of Layer to create your layers.
+   * It renders about 2x faster than normal layers.
+   *
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Layer
+   * * @param {Object} [config.clip] set clip
+     * @param {Number} [config.clipX] set clip x
+     * @param {Number} [config.clipY] set clip y
+     * @param {Number} [config.clipWidth] set clip width
+     * @param {Number} [config.clipHeight] set clip height
+     * @param {Function} [config.clipFunc] set clip func
+
+   * @example
+   * var layer = new Konva.FastLayer();
+   */
   class FastLayer extends Layer {
       constructor(attrs) {
           super(attrs);
@@ -5014,6 +8615,42 @@
   FastLayer.prototype.nodeType = 'FastLayer';
   _registerNode(FastLayer);
 
+  /**
+   * Group constructor.  Groups are used to contain shapes or other groups.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Container
+   * @param {Object} config
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * * @param {Object} [config.clip] set clip
+     * @param {Number} [config.clipX] set clip x
+     * @param {Number} [config.clipY] set clip y
+     * @param {Number} [config.clipWidth] set clip width
+     * @param {Number} [config.clipHeight] set clip height
+     * @param {Function} [config.clipFunc] set clip func
+
+   * @example
+   * var group = new Konva.Group();
+   */
   class Group extends Container {
       _validateAdd(child) {
           var type = child.getType();
@@ -5035,6 +8672,28 @@
           return new Date().getTime();
       };
   })();
+  /**
+   * Animation constructor.
+   * @constructor
+   * @memberof Konva
+   * @param {AnimationFn} func function executed on each animation frame.  The function is passed a frame object, which contains
+   *  timeDiff, lastTime, time, and frameRate properties.  The timeDiff property is the number of milliseconds that have passed
+   *  since the last animation frame. The time property is the time in milliseconds that elapsed from the moment the animation started
+   *  to the current animation frame. The lastTime property is a `time` value from the previous frame.  The frameRate property is the current frame rate in frames / second.
+   *  Return false from function, if you don't need to redraw layer/layers on some frames.
+   * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.
+   *  Not specifying a node will result in no redraw.
+   * @example
+   * // move a node to the right at 50 pixels / second
+   * var velocity = 50;
+   *
+   * var anim = new Konva.Animation(function(frame) {
+   *   var dist = velocity * (frame.timeDiff / 1000);
+   *   node.move({x: dist, y: 0});
+   * }, layer);
+   *
+   * anim.start();
+   */
   class Animation {
       constructor(func, layers) {
           this.id = Animation.animIdCounter++;
@@ -5047,25 +8706,51 @@
           this.func = func;
           this.setLayers(layers);
       }
+      /**
+       * set layers to be redrawn on each animation frame
+       * @method
+       * @name Konva.Animation#setLayers
+       * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn. Can be a layer, an array of layers, or null.  Not specifying a node will result in no redraw.
+       * @return {Konva.Animation} this
+       */
       setLayers(layers) {
           var lays = [];
+          // if passing in no layers
           if (!layers) {
               lays = [];
           }
           else if (layers.length > 0) {
+              // if passing in an array of Layers
+              // NOTE: layers could be an array.  for simplicity, I'm just inspecting
+              // the length property to check for both cases
               lays = layers;
           }
           else {
+              // if passing in a Layer
               lays = [layers];
           }
           this.layers = lays;
           return this;
       }
+      /**
+       * get layers
+       * @method
+       * @name Konva.Animation#getLayers
+       * @return {Array} Array of Konva.Layer
+       */
       getLayers() {
           return this.layers;
       }
+      /**
+       * add layer.  Returns true if the layer was added, and false if it was not
+       * @method
+       * @name Konva.Animation#addLayer
+       * @param {Konva.Layer} layer to add
+       * @return {Bool} true if layer is added to animation, otherwise false
+       */
       addLayer(layer) {
           var layers = this.layers, len = layers.length, n;
+          // don't add the layer if it already exists
           for (n = 0; n < len; n++) {
               if (layers[n]._id === layer._id) {
                   return false;
@@ -5074,6 +8759,12 @@
           this.layers.push(layer);
           return true;
       }
+      /**
+       * determine if animation is running or not.  returns true or false
+       * @method
+       * @name Konva.Animation#isRunning
+       * @return {Bool} is animation running?
+       */
       isRunning() {
           var a = Animation, animations = a.animations, len = animations.length, n;
           for (n = 0; n < len; n++) {
@@ -5083,6 +8774,12 @@
           }
           return false;
       }
+      /**
+       * start animation
+       * @method
+       * @name Konva.Animation#start
+       * @return {Konva.Animation} this
+       */
       start() {
           this.stop();
           this.frame.timeDiff = 0;
@@ -5090,6 +8787,12 @@
           Animation._addAnimation(this);
           return this;
       }
+      /**
+       * stop animation
+       * @method
+       * @name Konva.Animation#stop
+       * @return {Konva.Animation} this
+       */
       stop() {
           Animation._removeAnimation(this);
           return this;
@@ -5115,13 +8818,26 @@
       }
       static _runFrames() {
           var layerHash = {}, animations = this.animations, anim, layers, func, n, i, layersLen, layer, key, needRedraw;
+          /*
+           * loop through all animations and execute animation
+           *  function.  if the animation object has specified node,
+           *  we can add the node to the nodes hash to eliminate
+           *  drawing the same node multiple times.  The node property
+           *  can be the stage itself or a layer
+           */
+          /*
+           * WARNING: don't cache animations.length because it could change while
+           * the for loop is running, causing a JS error
+           */
           for (n = 0; n < animations.length; n++) {
               anim = animations[n];
               layers = anim.layers;
               func = anim.func;
               anim._updateFrameObject(now());
               layersLen = layers.length;
+              // if animation object has a function, execute it
               if (func) {
+                  // allow anim bypassing drawing
                   needRedraw = func.call(anim, anim.frame) !== false;
               }
               else {
@@ -5286,6 +9002,32 @@
           return new Date().getTime();
       }
   }
+  /**
+   * Tween constructor.  Tweens enable you to animate a node between the current state and a new state.
+   *  You can play, pause, reverse, seek, reset, and finish tweens.  By default, tweens are animated using
+   *  a linear easing.  For more tweening options, check out {@link Konva.Easings}
+   * @constructor
+   * @memberof Konva
+   * @example
+   * // instantiate new tween which fully rotates a node in 1 second
+   * var tween = new Konva.Tween({
+   *   // list of tween specific properties
+   *   node: node,
+   *   duration: 1,
+   *   easing: Konva.Easings.EaseInOut,
+   *   onUpdate: () => console.log('node attrs updated')
+   *   onFinish: () => console.log('finished'),
+   *   // set new values for any attributes of a passed node
+   *   rotation: 360,
+   *   fill: 'red'
+   * });
+   *
+   * // play tween
+   * tween.play();
+   *
+   * // pause tween
+   * tween.pause();
+   */
   class Tween {
       constructor(config) {
           var that = this, node = config.node, nodeId = node._id, duration, easing = config.easing || Easings.Linear, yoyo = !!config.yoyo, key;
@@ -5293,6 +9035,7 @@
               duration = 0.3;
           }
           else if (config.duration === 0) {
+              // zero is bad value for duration
               duration = 0.001;
           }
           else {
@@ -5312,12 +9055,14 @@
               that._tweenFunc(i);
           }, easing, 0, 1, duration * 1000, yoyo);
           this._addListeners();
+          // init attrs map
           if (!Tween.attrs[nodeId]) {
               Tween.attrs[nodeId] = {};
           }
           if (!Tween.attrs[nodeId][this._id]) {
               Tween.attrs[nodeId][this._id] = {};
           }
+          // init tweens map
           if (!Tween.tweens[nodeId]) {
               Tween.tweens[nodeId] = {};
           }
@@ -5327,26 +9072,33 @@
               }
           }
           this.reset();
+          // callbacks
           this.onFinish = config.onFinish;
           this.onReset = config.onReset;
           this.onUpdate = config.onUpdate;
       }
       _addAttr(key, end) {
           var node = this.node, nodeId = node._id, start, diff, tweenId, n, len, trueEnd, trueStart, endRGBA;
+          // remove conflict from tween map if it exists
           tweenId = Tween.tweens[nodeId][key];
           if (tweenId) {
               delete Tween.attrs[nodeId][tweenId][key];
           }
+          // add to tween map
           start = node.getAttr(key);
           if (Util._isArray(end)) {
               diff = [];
               len = Math.max(end.length, start.length);
               if (key === 'points' && end.length !== start.length) {
+                  // before tweening points we need to make sure that start.length === end.length
+                  // Util._prepareArrayForTween thinking that end.length > start.length
                   if (end.length > start.length) {
+                      // so in this case we will increase number of starting points
                       trueStart = start;
                       start = Util._prepareArrayForTween(start, end, node.closed());
                   }
                   else {
+                      // in this case we will increase number of eding points
                       trueEnd = end;
                       end = Util._prepareArrayForTween(end, start, node.closed());
                   }
@@ -5450,17 +9202,20 @@
           }
       }
       _addListeners() {
+          // start listeners
           this.tween.onPlay = () => {
               this.anim.start();
           };
           this.tween.onReverse = () => {
               this.anim.start();
           };
+          // stop listeners
           this.tween.onPause = () => {
               this.anim.stop();
           };
           this.tween.onFinish = () => {
               var node = this.node;
+              // after tweening  points of line we need to set original end
               var attrs = Tween.attrs[node._id][this._id];
               if (attrs.points && attrs.points.trueEnd) {
                   node.setAttr('points', attrs.points.trueEnd);
@@ -5471,6 +9226,7 @@
           };
           this.tween.onReset = () => {
               var node = this.node;
+              // after tweening  points of line we need to set original start
               var attrs = Tween.attrs[node._id][this._id];
               if (attrs.points && attrs.points.trueStart) {
                   node.points(attrs.points.trueStart);
@@ -5485,30 +9241,72 @@
               }
           };
       }
+      /**
+       * play
+       * @method
+       * @name Konva.Tween#play
+       * @returns {Tween}
+       */
       play() {
           this.tween.play();
           return this;
       }
+      /**
+       * reverse
+       * @method
+       * @name Konva.Tween#reverse
+       * @returns {Tween}
+       */
       reverse() {
           this.tween.reverse();
           return this;
       }
+      /**
+       * reset
+       * @method
+       * @name Konva.Tween#reset
+       * @returns {Tween}
+       */
       reset() {
           this.tween.reset();
           return this;
       }
+      /**
+       * seek
+       * @method
+       * @name Konva.Tween#seek(
+       * @param {Integer} t time in seconds between 0 and the duration
+       * @returns {Tween}
+       */
       seek(t) {
           this.tween.seek(t * 1000);
           return this;
       }
+      /**
+       * pause
+       * @method
+       * @name Konva.Tween#pause
+       * @returns {Tween}
+       */
       pause() {
           this.tween.pause();
           return this;
       }
+      /**
+       * finish
+       * @method
+       * @name Konva.Tween#finish
+       * @returns {Tween}
+       */
       finish() {
           this.tween.finish();
           return this;
       }
+      /**
+       * destroy
+       * @method
+       * @name Konva.Tween#destroy
+       */
       destroy() {
           var nodeId = this.node._id, thisId = this._id, attrs = Tween.tweens[nodeId], key;
           this.pause();
@@ -5520,6 +9318,20 @@
   }
   Tween.attrs = {};
   Tween.tweens = {};
+  /**
+   * Tween node properties. Shorter usage of {@link Konva.Tween} object.
+   *
+   * @method Konva.Node#to
+   * @param {Object} [params] tween params
+   * @example
+   *
+   * circle.to({
+   *   x : 50,
+   *   duration : 0.5,
+   *   onUpdate: () => console.log('props updated'),
+   *   onFinish: () => console.log('finished'),
+   * });
+   */
   Node.prototype.to = function (params) {
       var onFinish = params.onFinish;
       params.node = this;
@@ -5532,15 +9344,38 @@
       var tween = new Tween(params);
       tween.play();
   };
+  /*
+   * These eases were ported from an Adobe Flash tweening library to JavaScript
+   * by Xaric
+   */
+  /**
+   * @namespace Easings
+   * @memberof Konva
+   */
   const Easings = {
+      /**
+       * back ease in
+       * @function
+       * @memberof Konva.Easings
+       */
       BackEaseIn(t, b, c, d) {
           var s = 1.70158;
           return c * (t /= d) * t * ((s + 1) * t - s) + b;
       },
+      /**
+       * back ease out
+       * @function
+       * @memberof Konva.Easings
+       */
       BackEaseOut(t, b, c, d) {
           var s = 1.70158;
           return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
       },
+      /**
+       * back ease in out
+       * @function
+       * @memberof Konva.Easings
+       */
       BackEaseInOut(t, b, c, d) {
           var s = 1.70158;
           if ((t /= d / 2) < 1) {
@@ -5548,7 +9383,13 @@
           }
           return (c / 2) * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
       },
+      /**
+       * elastic ease in
+       * @function
+       * @memberof Konva.Easings
+       */
       ElasticEaseIn(t, b, c, d, a, p) {
+          // added s = 0
           var s = 0;
           if (t === 0) {
               return b;
@@ -5570,7 +9411,13 @@
               Math.pow(2, 10 * (t -= 1)) *
               Math.sin(((t * d - s) * (2 * Math.PI)) / p)) + b);
       },
+      /**
+       * elastic ease out
+       * @function
+       * @memberof Konva.Easings
+       */
       ElasticEaseOut(t, b, c, d, a, p) {
+          // added s = 0
           var s = 0;
           if (t === 0) {
               return b;
@@ -5592,7 +9439,13 @@
               c +
               b);
       },
+      /**
+       * elastic ease in out
+       * @function
+       * @memberof Konva.Easings
+       */
       ElasticEaseInOut(t, b, c, d, a, p) {
+          // added s = 0
           var s = 0;
           if (t === 0) {
               return b;
@@ -5624,6 +9477,11 @@
               c +
               b);
       },
+      /**
+       * bounce ease out
+       * @function
+       * @memberof Konva.Easings
+       */
       BounceEaseOut(t, b, c, d) {
           if ((t /= d) < 1 / 2.75) {
               return c * (7.5625 * t * t) + b;
@@ -5638,9 +9496,19 @@
               return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
           }
       },
+      /**
+       * bounce ease in
+       * @function
+       * @memberof Konva.Easings
+       */
       BounceEaseIn(t, b, c, d) {
           return c - Easings.BounceEaseOut(d - t, 0, c, d) + b;
       },
+      /**
+       * bounce ease in out
+       * @function
+       * @memberof Konva.Easings
+       */
       BounceEaseInOut(t, b, c, d) {
           if (t < d / 2) {
               return Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
@@ -5649,35 +9517,71 @@
               return Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
           }
       },
+      /**
+       * ease in
+       * @function
+       * @memberof Konva.Easings
+       */
       EaseIn(t, b, c, d) {
           return c * (t /= d) * t + b;
       },
+      /**
+       * ease out
+       * @function
+       * @memberof Konva.Easings
+       */
       EaseOut(t, b, c, d) {
           return -c * (t /= d) * (t - 2) + b;
       },
+      /**
+       * ease in out
+       * @function
+       * @memberof Konva.Easings
+       */
       EaseInOut(t, b, c, d) {
           if ((t /= d / 2) < 1) {
               return (c / 2) * t * t + b;
           }
           return (-c / 2) * (--t * (t - 2) - 1) + b;
       },
+      /**
+       * strong ease in
+       * @function
+       * @memberof Konva.Easings
+       */
       StrongEaseIn(t, b, c, d) {
           return c * (t /= d) * t * t * t * t + b;
       },
+      /**
+       * strong ease out
+       * @function
+       * @memberof Konva.Easings
+       */
       StrongEaseOut(t, b, c, d) {
           return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
       },
+      /**
+       * strong ease in out
+       * @function
+       * @memberof Konva.Easings
+       */
       StrongEaseInOut(t, b, c, d) {
           if ((t /= d / 2) < 1) {
               return (c / 2) * t * t * t * t * t + b;
           }
           return (c / 2) * ((t -= 2) * t * t * t * t + 2) + b;
       },
+      /**
+       * linear
+       * @function
+       * @memberof Konva.Easings
+       */
       Linear(t, b, c, d) {
           return (c * t) / d + b;
       },
   };
 
+  // what is core parts of Konva?
   const Konva$1 = Util._assign(Konva$2, {
       Util,
       Transform,
@@ -5698,6 +9602,102 @@
       Canvas,
   });
 
+  /**
+   * Arc constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Number} config.angle in degrees
+   * @param {Number} config.innerRadius
+   * @param {Number} config.outerRadius
+   * @param {Boolean} [config.clockwise]
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * // draw a Arc that's pointing downwards
+   * var arc = new Konva.Arc({
+   *   innerRadius: 40,
+   *   outerRadius: 80,
+   *   fill: 'red',
+   *   stroke: 'black'
+   *   strokeWidth: 5,
+   *   angle: 60,
+   *   rotationDeg: -120
+   * });
+   */
   class Arc extends Shape {
       _sceneFunc(context) {
           var angle = Konva$2.getAngle(this.angle()), clockwise = this.clockwise();
@@ -5724,10 +9724,66 @@
   Arc.prototype.className = 'Arc';
   Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
   _registerNode(Arc);
+  // add getters setters
   Factory.addGetterSetter(Arc, 'innerRadius', 0, getNumberValidator());
+  /**
+   * get/set innerRadius
+   * @name Konva.Arc#innerRadius
+   * @method
+   * @param {Number} innerRadius
+   * @returns {Number}
+   * @example
+   * // get inner radius
+   * var innerRadius = arc.innerRadius();
+   *
+   * // set inner radius
+   * arc.innerRadius(20);
+   */
   Factory.addGetterSetter(Arc, 'outerRadius', 0, getNumberValidator());
+  /**
+   * get/set outerRadius
+   * @name Konva.Arc#outerRadius
+   * @method
+   * @param {Number} outerRadius
+   * @returns {Number}
+   * @example
+   * // get outer radius
+   * var outerRadius = arc.outerRadius();
+   *
+   * // set outer radius
+   * arc.outerRadius(20);
+   */
   Factory.addGetterSetter(Arc, 'angle', 0, getNumberValidator());
-  Factory.addGetterSetter(Arc, 'clockwise', false, getBooleanValidator());
+  /**
+   * get/set angle in degrees
+   * @name Konva.Arc#angle
+   * @method
+   * @param {Number} angle
+   * @returns {Number}
+   * @example
+   * // get angle
+   * var angle = arc.angle();
+   *
+   * // set angle
+   * arc.angle(20);
+   */
+  Factory.addGetterSetter(Arc, 'clockwise', false, getBooleanValidator());
+  /**
+   * get/set clockwise flag
+   * @name Konva.Arc#clockwise
+   * @method
+   * @param {Boolean} clockwise
+   * @returns {Boolean}
+   * @example
+   * // get clockwise flag
+   * var clockwise = arc.clockwise();
+   *
+   * // draw arc counter-clockwise
+   * arc.clockwise(false);
+   *
+   * // draw arc clockwise
+   * arc.clockwise(true);
+   */
 
   function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
       var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)), d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), fa = (t * d01) / (d01 + d12), fb = (t * d12) / (d01 + d12), p1x = x1 - fa * (x2 - x0), p1y = y1 - fa * (y2 - y0), p2x = x1 + fb * (x2 - x0), p2y = y1 + fb * (y2 - y0);
@@ -5749,6 +9805,101 @@
       }
       return allPoints;
   }
+  /**
+   * Line constructor.&nbsp; Lines are defined by an array of points and
+   *  a tension
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
+   * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+   *   The default is 0
+   * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob
+   * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var line = new Konva.Line({
+   *   x: 100,
+   *   y: 50,
+   *   points: [73, 70, 340, 23, 450, 60, 500, 20],
+   *   stroke: 'red',
+   *   tension: 1
+   * });
+   */
   class Line extends Shape {
       constructor(config) {
           super(config);
@@ -5763,6 +9914,7 @@
           }
           context.beginPath();
           context.moveTo(points[0], points[1]);
+          // tension
           if (tension !== 0 && length > 4) {
               tp = this.getTensionPoints();
               len = tp.length;
@@ -5778,21 +9930,25 @@
               }
           }
           else if (bezier) {
+              // no tension but bezier
               n = 2;
               while (n < length) {
                   context.bezierCurveTo(points[n++], points[n++], points[n++], points[n++], points[n++], points[n++]);
               }
           }
           else {
+              // no tension
               for (n = 2; n < length; n += 2) {
                   context.lineTo(points[n], points[n + 1]);
               }
           }
+          // closed e.g. polygons and blobs
           if (closed) {
               context.closePath();
               context.fillStrokeShape(this);
           }
           else {
+              // open e.g. lines and splines
               context.strokeShape(this);
           }
       }
@@ -5830,6 +9986,7 @@
       getHeight() {
           return this.getSelfRect().height;
       }
+      // overload size detection
       getSelfRect() {
           var points = this.points();
           if (points.length < 4) {
@@ -5876,11 +10033,162 @@
   Line.prototype.className = 'Line';
   Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
   _registerNode(Line);
+  // add getters setters
   Factory.addGetterSetter(Line, 'closed', false);
+  /**
+   * get/set closed flag.  The default is false
+   * @name Konva.Line#closed
+   * @method
+   * @param {Boolean} closed
+   * @returns {Boolean}
+   * @example
+   * // get closed flag
+   * var closed = line.closed();
+   *
+   * // close the shape
+   * line.closed(true);
+   *
+   * // open the shape
+   * line.closed(false);
+   */
   Factory.addGetterSetter(Line, 'bezier', false);
+  /**
+   * get/set bezier flag.  The default is false
+   * @name Konva.Line#bezier
+   * @method
+   * @param {Boolean} bezier
+   * @returns {Boolean}
+   * @example
+   * // get whether the line is a bezier
+   * var isBezier = line.bezier();
+   *
+   * // set whether the line is a bezier
+   * line.bezier(true);
+   */
   Factory.addGetterSetter(Line, 'tension', 0, getNumberValidator());
-  Factory.addGetterSetter(Line, 'points', [], getNumberArrayValidator());
+  /**
+   * get/set tension
+   * @name Konva.Line#tension
+   * @method
+   * @param {Number} tension Higher values will result in a more curvy line.  A value of 0 will result in no interpolation. The default is 0
+   * @returns {Number}
+   * @example
+   * // get tension
+   * var tension = line.tension();
+   *
+   * // set tension
+   * line.tension(3);
+   */
+  Factory.addGetterSetter(Line, 'points', [], getNumberArrayValidator());
+  /**
+   * get/set points array. Points is a flat array [x1, y1, x2, y2]. It is flat for performance reasons.
+   * @name Konva.Line#points
+   * @method
+   * @param {Array} points
+   * @returns {Array}
+   * @example
+   * // get points
+   * var points = line.points();
+   *
+   * // set points
+   * line.points([10, 20, 30, 40, 50, 60]);
+   *
+   * // push a new point
+   * line.points(line.points().concat([70, 80]));
+   */
 
+  /**
+   * Path constructor.
+   * @author Jason Follas
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} config.data SVG data string
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var path = new Konva.Path({
+   *   x: 240,
+   *   y: 40,
+   *   data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
+   *   fill: 'green',
+   *   scaleX: 2,
+   *   scaleY: 2
+   * });
+   */
   class Path extends Shape {
       constructor(config) {
           super(config);
@@ -5901,6 +10209,7 @@
       }
       _sceneFunc(context) {
           var ca = this.dataArray;
+          // context position
           context.beginPath();
           var isClosed = false;
           for (var n = 0; n < ca.length; n++) {
@@ -5949,20 +10258,26 @@
           var points = [];
           this.dataArray.forEach(function (data) {
               if (data.command === 'A') {
+                  // Approximates by breaking curve into line segments
                   var start = data.points[4];
+                  // 4 = theta
                   var dTheta = data.points[5];
+                  // 5 = dTheta
                   var end = data.points[4] + dTheta;
                   var inc = Math.PI / 180.0;
+                  // 1 degree resolution
                   if (Math.abs(start - end) < inc) {
                       inc = Math.abs(start - end);
                   }
                   if (dTheta < 0) {
+                      // clockwise
                       for (let t = start - inc; t > end; t -= inc) {
                           const point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
                           points.push(point.x, point.y);
                       }
                   }
                   else {
+                      // counter-clockwise
                       for (let t = start + inc; t < end; t += inc) {
                           const point = Path.getPointOnEllipticalArc(data.points[0], data.points[1], data.points[2], data.points[3], t, 0);
                           points.push(point.x, point.y);
@@ -5970,12 +10285,14 @@
                   }
               }
               else if (data.command === 'C') {
+                  // Approximates by breaking curve into 100 line segments
                   for (let t = 0.0; t <= 1; t += 0.01) {
                       const point = Path.getPointOnCubicBezier(t, data.start.x, data.start.y, data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
                       points.push(point.x, point.y);
                   }
               }
               else {
+                  // TODO: how can we calculate bezier curves better?
                   points = points.concat(data.points);
               }
           });
@@ -5987,6 +10304,7 @@
           for (var i = 0; i < points.length / 2; i++) {
               x = points[i * 2];
               y = points[i * 2 + 1];
+              // skip bad values
               if (!isNaN(x)) {
                   minX = Math.min(minX, x);
                   maxX = Math.max(maxX, x);
@@ -6003,9 +10321,26 @@
               height: Math.round(maxY - minY),
           };
       }
+      /**
+       * Return length of the path.
+       * @method
+       * @name Konva.Path#getLength
+       * @returns {Number} length
+       * @example
+       * var length = path.getLength();
+       */
       getLength() {
           return this.pathLength;
       }
+      /**
+       * Get point on path at specific length of the path
+       * @method
+       * @name Konva.Path#getPointAtLength
+       * @param {Number} length length
+       * @returns {Object} point {x,y} point
+       * @example
+       * var point = path.getPointAtLength(10);
+       */
       getPointAtLength(length) {
           var point, i = 0, ii = this.dataArray.length;
           if (!ii) {
@@ -6063,6 +10398,7 @@
           var rise = m * run;
           var pt;
           if (P2x === P1x) {
+              // vertical line
               pt = {
                   x: fromX,
                   y: fromY + rise,
@@ -6077,6 +10413,12 @@
           else {
               var ix, iy;
               var len = this.getLineLength(P1x, P1y, P2x, P2y);
+              // if (len < 0.00000001) {
+              //   return {
+              //     x: P1x,
+              //     y: P1y,
+              //   };
+              // }
               var u = (fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y);
               u = u / (len * len);
               ix = P1x + u * (P2x - P1x);
@@ -6143,11 +10485,41 @@
               y: cy + (pt.x * sinPsi + pt.y * cosPsi),
           };
       }
+      /*
+       * get parsed data array from the data
+       *  string.  V, v, H, h, and l data are converted to
+       *  L data for the purpose of high performance Path
+       *  rendering
+       */
       static parsePathData(data) {
+          // Path Data Segment must begin with a moveTo
+          //m (x y)+  Relative moveTo (subsequent points are treated as lineTo)
+          //M (x y)+  Absolute moveTo (subsequent points are treated as lineTo)
+          //l (x y)+  Relative lineTo
+          //L (x y)+  Absolute LineTo
+          //h (x)+    Relative horizontal lineTo
+          //H (x)+    Absolute horizontal lineTo
+          //v (y)+    Relative vertical lineTo
+          //V (y)+    Absolute vertical lineTo
+          //z (closepath)
+          //Z (closepath)
+          //c (x1 y1 x2 y2 x y)+ Relative Bezier curve
+          //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve
+          //q (x1 y1 x y)+       Relative Quadratic Bezier
+          //Q (x1 y1 x y)+       Absolute Quadratic Bezier
+          //t (x y)+    Shorthand/Smooth Relative Quadratic Bezier
+          //T (x y)+    Shorthand/Smooth Absolute Quadratic Bezier
+          //s (x2 y2 x y)+       Shorthand/Smooth Relative Bezier curve
+          //S (x2 y2 x y)+       Shorthand/Smooth Absolute Bezier curve
+          //a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+     Relative Elliptical Arc
+          //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+  Absolute Elliptical Arc
+          // return early if data is not defined
           if (!data) {
               return [];
           }
+          // command string
           var cs = data;
+          // command chars
           var cc = [
               'm',
               'M',
@@ -6170,13 +10542,17 @@
               'a',
               'A',
           ];
+          // convert white spaces to commas
           cs = cs.replace(new RegExp(' ', 'g'), ',');
+          // create pipes so that we can split the data
           for (var n = 0; n < cc.length; n++) {
               cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
           }
+          // create array
           var arr = cs.split('|');
           var ca = [];
           var coords = [];
+          // init context point
           var cpx = 0;
           var cpy = 0;
           var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
@@ -6189,8 +10565,12 @@
               while ((match = re.exec(str))) {
                   coords.push(match[0]);
               }
+              // while ((match = re.exec(str))) {
+              //   coords.push(match[0]);
+              // }
               var p = [];
               for (var j = 0, jlen = coords.length; j < jlen; j++) {
+                  // extra case for merged flags
                   if (coords[j] === '00') {
                       p.push(0, 0);
                       continue;
@@ -6205,14 +10585,18 @@
               }
               while (p.length > 0) {
                   if (isNaN(p[0])) {
+                      // case for a trailing comma before next command
                       break;
                   }
                   var cmd = null;
                   var points = [];
                   var startX = cpx, startY = cpy;
-                  var prevCmd, ctlPtx, ctlPty;
-                  var rx, ry, psi, fa, fs, x1, y1;
+                  // Move var from within the switch to up here (jshint)
+                  var prevCmd, ctlPtx, ctlPty; // Ss, Tt
+                  var rx, ry, psi, fa, fs, x1, y1; // Aa
+                  // convert l, H, h, V, and v to L
                   switch (c) {
+                      // Note: Keep the lineTo's above the moveTo's in this switch
                       case 'l':
                           cpx += p.shift();
                           cpy += p.shift();
@@ -6224,12 +10608,15 @@
                           cpy = p.shift();
                           points.push(cpx, cpy);
                           break;
+                      // Note: lineTo handlers need to be above this point
                       case 'm':
                           var dx = p.shift();
                           var dy = p.shift();
                           cpx += dx;
                           cpy += dy;
                           cmd = 'M';
+                          // After closing the path move the current position
+                          // to the the first point of the path (if any).
                           if (ca.length > 2 && ca[ca.length - 1].command === 'z') {
                               for (var idx = ca.length - 2; idx >= 0; idx--) {
                                   if (ca[idx].command === 'M') {
@@ -6241,6 +10628,7 @@
                           }
                           points.push(cpx, cpy);
                           c = 'l';
+                          // subsequent points are treated as relative lineTo
                           break;
                       case 'M':
                           cpx = p.shift();
@@ -6248,6 +10636,7 @@
                           cmd = 'M';
                           points.push(cpx, cpy);
                           c = 'L';
+                          // subsequent points are treated as absolute lineTo
                           break;
                       case 'h':
                           cpx += p.shift();
@@ -6404,6 +10793,7 @@
               case 'L':
                   return path.getLineLength(x, y, points[0], points[1]);
               case 'C':
+                  // Approximates by breaking curve into 100 line segments
                   len = 0.0;
                   p1 = path.getPointOnCubicBezier(0, x, y, points[0], points[1], points[2], points[3], points[4], points[5]);
                   for (t = 0.01; t <= 1; t += 0.01) {
@@ -6413,6 +10803,7 @@
                   }
                   return len;
               case 'Q':
+                  // Approximates by breaking curve into 100 line segments
                   len = 0.0;
                   p1 = path.getPointOnQuadraticBezier(0, x, y, points[0], points[1], points[2], points[3]);
                   for (t = 0.01; t <= 1; t += 0.01) {
@@ -6422,16 +10813,22 @@
                   }
                   return len;
               case 'A':
+                  // Approximates by breaking curve into line segments
                   len = 0.0;
                   var start = points[4];
+                  // 4 = theta
                   var dTheta = points[5];
+                  // 5 = dTheta
                   var end = points[4] + dTheta;
                   var inc = Math.PI / 180.0;
+                  // 1 degree resolution
                   if (Math.abs(start - end) < inc) {
                       inc = Math.abs(start - end);
                   }
+                  // Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi
                   p1 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], start, 0);
                   if (dTheta < 0) {
+                      // clockwise
                       for (t = start - inc; t > end; t -= inc) {
                           p2 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
                           len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
@@ -6439,6 +10836,7 @@
                       }
                   }
                   else {
+                      // counter-clockwise
                       for (t = start + inc; t < end; t += inc) {
                           p2 = path.getPointOnEllipticalArc(points[0], points[1], points[2], points[3], t, 0);
                           len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);
@@ -6452,6 +10850,7 @@
           return 0;
       }
       static convertEndpointToCenterParameterization(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
+          // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
           var psi = psiDeg * (Math.PI / 180.0);
           var xp = (Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
           var yp = (-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
@@ -6504,8 +10903,120 @@
   Path.prototype.className = 'Path';
   Path.prototype._attrsAffectingSize = ['data'];
   _registerNode(Path);
+  /**
+   * get/set SVG path data string.  This method
+   *  also automatically parses the data string
+   *  into a data array.  Currently supported SVG data:
+   *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
+   * @name Konva.Path#data
+   * @method
+   * @param {String} data svg path string
+   * @returns {String}
+   * @example
+   * // get data
+   * var data = path.data();
+   *
+   * // set data
+   * path.data('M200,100h100v50z');
+   */
   Factory.addGetterSetter(Path, 'data');
 
+  /**
+   * Arrow constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Line
+   * @param {Object} config
+   * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].
+   * @param {Number} [config.tension] Higher values will result in a more curvy line.  A value of 0 will result in no interpolation.
+   *   The default is 0
+   * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.
+   * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.
+   * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false.
+   * @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true.
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var line = new Konva.Line({
+   *   points: [73, 70, 340, 23, 450, 60, 500, 20],
+   *   stroke: 'red',
+   *   tension: 1,
+   *   pointerLength : 10,
+   *   pointerWidth : 12
+   * });
+   */
   class Arrow extends Line {
       _sceneFunc(ctx) {
           super._sceneFunc(ctx);
@@ -6573,12 +11084,18 @@
           if (!hasPointer) {
               return;
           }
+          // here is a tricky part
+          // we need to disable dash for arrow pointers
           var isDashEnabled = this.dashEnabled();
           if (isDashEnabled) {
+              // manually disable dash for head
+              // it is better not to use setter here,
+              // because it will trigger attr change event
               this.attrs.dashEnabled = false;
               ctx.setLineDash([]);
           }
           ctx.fillStrokeShape(this);
+          // restore old value
           if (isDashEnabled) {
               this.attrs.dashEnabled = true;
           }
@@ -6596,11 +11113,154 @@
   }
   Arrow.prototype.className = 'Arrow';
   _registerNode(Arrow);
+  /**
+   * get/set pointerLength
+   * @name Konva.Arrow#pointerLength
+   * @method
+   * @param {Number} Length of pointer of arrow. The default is 10.
+   * @returns {Number}
+   * @example
+   * // get length
+   * var pointerLength = line.pointerLength();
+   *
+   * // set length
+   * line.pointerLength(15);
+   */
   Factory.addGetterSetter(Arrow, 'pointerLength', 10, getNumberValidator());
+  /**
+   * get/set pointerWidth
+   * @name Konva.Arrow#pointerWidth
+   * @method
+   * @param {Number} Width of pointer of arrow.
+   *   The default is 10.
+   * @returns {Number}
+   * @example
+   * // get width
+   * var pointerWidth = line.pointerWidth();
+   *
+   * // set width
+   * line.pointerWidth(15);
+   */
   Factory.addGetterSetter(Arrow, 'pointerWidth', 10, getNumberValidator());
+  /**
+   * get/set pointerAtBeginning
+   * @name Konva.Arrow#pointerAtBeginning
+   * @method
+   * @param {Number} Should pointer displayed at beginning of arrow. The default is false.
+   * @returns {Boolean}
+   * @example
+   * // get value
+   * var pointerAtBeginning = line.pointerAtBeginning();
+   *
+   * // set value
+   * line.pointerAtBeginning(true);
+   */
   Factory.addGetterSetter(Arrow, 'pointerAtBeginning', false);
+  /**
+   * get/set pointerAtEnding
+   * @name Konva.Arrow#pointerAtEnding
+   * @method
+   * @param {Number} Should pointer displayed at ending of arrow. The default is true.
+   * @returns {Boolean}
+   * @example
+   * // get value
+   * var pointerAtEnding = line.pointerAtEnding();
+   *
+   * // set value
+   * line.pointerAtEnding(false);
+   */
   Factory.addGetterSetter(Arrow, 'pointerAtEnding', true);
 
+  /**
+   * Circle constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Number} config.radius
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * // create circle
+   * var circle = new Konva.Circle({
+   *   radius: 40,
+   *   fill: 'red',
+   *   stroke: 'black',
+   *   strokeWidth: 5
+   * });
+   */
   class Circle extends Shape {
       _sceneFunc(context) {
           context.beginPath();
@@ -6629,8 +11289,111 @@
   Circle.prototype.className = 'Circle';
   Circle.prototype._attrsAffectingSize = ['radius'];
   _registerNode(Circle);
+  /**
+   * get/set radius
+   * @name Konva.Circle#radius
+   * @method
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radius
+   * var radius = circle.radius();
+   *
+   * // set radius
+   * circle.radius(10);
+   */
   Factory.addGetterSetter(Circle, 'radius', 0, getNumberValidator());
 
+  /**
+   * Ellipse constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Object} config.radius defines x and y radius
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var ellipse = new Konva.Ellipse({
+   *   radius : {
+   *     x : 50,
+   *     y : 50
+   *   },
+   *   fill: 'red'
+   * });
+   */
   class Ellipse extends Shape {
       _sceneFunc(context) {
           var rx = this.radiusX(), ry = this.radiusY();
@@ -6661,10 +11424,150 @@
   Ellipse.prototype._centroid = true;
   Ellipse.prototype._attrsAffectingSize = ['radiusX', 'radiusY'];
   _registerNode(Ellipse);
+  // add getters setters
   Factory.addComponentsGetterSetter(Ellipse, 'radius', ['x', 'y']);
+  /**
+   * get/set radius
+   * @name Konva.Ellipse#radius
+   * @method
+   * @param {Object} radius
+   * @param {Number} radius.x
+   * @param {Number} radius.y
+   * @returns {Object}
+   * @example
+   * // get radius
+   * var radius = ellipse.radius();
+   *
+   * // set radius
+   * ellipse.radius({
+   *   x: 200,
+   *   y: 100
+   * });
+   */
   Factory.addGetterSetter(Ellipse, 'radiusX', 0, getNumberValidator());
-  Factory.addGetterSetter(Ellipse, 'radiusY', 0, getNumberValidator());
+  /**
+   * get/set radius x
+   * @name Konva.Ellipse#radiusX
+   * @method
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get radius x
+   * var radiusX = ellipse.radiusX();
+   *
+   * // set radius x
+   * ellipse.radiusX(200);
+   */
+  Factory.addGetterSetter(Ellipse, 'radiusY', 0, getNumberValidator());
+  /**
+   * get/set radius y
+   * @name Konva.Ellipse#radiusY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get radius y
+   * var radiusY = ellipse.radiusY();
+   *
+   * // set radius y
+   * ellipse.radiusY(200);
+   */
 
+  /**
+   * Image constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Image} config.image
+   * @param {Object} [config.crop]
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var imageObj = new Image();
+   * imageObj.onload = function() {
+   *   var image = new Konva.Image({
+   *     x: 200,
+   *     y: 50,
+   *     image: imageObj,
+   *     width: 100,
+   *     height: 100
+   *   });
+   * };
+   * imageObj.src = '/path/to/image.jpg'
+   */
   class Image extends Shape {
       constructor(attrs) {
           super(attrs);
@@ -6675,9 +11578,11 @@
       }
       _setImageLoad() {
           const image = this.image();
+          // check is image is already loaded
           if (image && image.complete) {
               return;
           }
+          // check is video is already loaded
           if (image && image.readyState === 4) {
               return;
           }
@@ -6740,6 +11645,19 @@
           var _a, _b;
           return (_a = this.attrs.height) !== null && _a !== void 0 ? _a : (_b = this.image()) === null || _b === void 0 ? void 0 : _b.height;
       }
+      /**
+       * load image from given url and create `Konva.Image` instance
+       * @method
+       * @memberof Konva.Image
+       * @param {String} url image source
+       * @param {Function} callback with Konva.Image instance as first argument
+       * @example
+       *  Konva.Image.fromURL(imageURL, function(image){
+       *    // image is Konva.Image instance
+       *    layer.add(image);
+       *    layer.draw();
+       *  });
+       */
       static fromURL(url, callback) {
           var img = Util.createImageElement();
           img.onload = function () {
@@ -6754,13 +11672,101 @@
   }
   Image.prototype.className = 'Image';
   _registerNode(Image);
+  /**
+   * get/set image source. It can be image, canvas or video element
+   * @name Konva.Image#image
+   * @method
+   * @param {Object} image source
+   * @returns {Object}
+   * @example
+   * // get value
+   * var image = shape.image();
+   *
+   * // set value
+   * shape.image(img);
+   */
   Factory.addGetterSetter(Image, 'image');
   Factory.addComponentsGetterSetter(Image, 'crop', ['x', 'y', 'width', 'height']);
+  /**
+   * get/set crop
+   * @method
+   * @name Konva.Image#crop
+   * @param {Object} crop
+   * @param {Number} crop.x
+   * @param {Number} crop.y
+   * @param {Number} crop.width
+   * @param {Number} crop.height
+   * @returns {Object}
+   * @example
+   * // get crop
+   * var crop = image.crop();
+   *
+   * // set crop
+   * image.crop({
+   *   x: 20,
+   *   y: 20,
+   *   width: 20,
+   *   height: 20
+   * });
+   */
   Factory.addGetterSetter(Image, 'cropX', 0, getNumberValidator());
+  /**
+   * get/set crop x
+   * @method
+   * @name Konva.Image#cropX
+   * @param {Number} x
+   * @returns {Number}
+   * @example
+   * // get crop x
+   * var cropX = image.cropX();
+   *
+   * // set crop x
+   * image.cropX(20);
+   */
   Factory.addGetterSetter(Image, 'cropY', 0, getNumberValidator());
+  /**
+   * get/set crop y
+   * @name Konva.Image#cropY
+   * @method
+   * @param {Number} y
+   * @returns {Number}
+   * @example
+   * // get crop y
+   * var cropY = image.cropY();
+   *
+   * // set crop y
+   * image.cropY(20);
+   */
   Factory.addGetterSetter(Image, 'cropWidth', 0, getNumberValidator());
-  Factory.addGetterSetter(Image, 'cropHeight', 0, getNumberValidator());
+  /**
+   * get/set crop width
+   * @name Konva.Image#cropWidth
+   * @method
+   * @param {Number} width
+   * @returns {Number}
+   * @example
+   * // get crop width
+   * var cropWidth = image.cropWidth();
+   *
+   * // set crop width
+   * image.cropWidth(20);
+   */
+  Factory.addGetterSetter(Image, 'cropHeight', 0, getNumberValidator());
+  /**
+   * get/set crop height
+   * @name Konva.Image#cropHeight
+   * @method
+   * @param {Number} height
+   * @returns {Number}
+   * @example
+   * // get crop height
+   * var cropHeight = image.cropHeight();
+   *
+   * // set crop height
+   * image.cropHeight(20);
+   */
 
+  // constants
   var ATTR_CHANGE_LIST$2 = [
       'fontFamily',
       'fontSize',
@@ -6770,7 +11776,66 @@
       'text',
       'width',
       'height',
-  ], CHANGE_KONVA$1 = 'Change.konva', NONE$1 = 'none', UP = 'up', RIGHT$1 = 'right', DOWN = 'down', LEFT$1 = 'left', attrChangeListLen$1 = ATTR_CHANGE_LIST$2.length;
+  ], CHANGE_KONVA$1 = 'Change.konva', NONE$1 = 'none', UP = 'up', RIGHT$1 = 'right', DOWN = 'down', LEFT$1 = 'left', 
+  // cached variables
+  attrChangeListLen$1 = ATTR_CHANGE_LIST$2.length;
+  /**
+   * Label constructor.&nbsp; Labels are groups that contain a Text and Tag shape
+   * @constructor
+   * @memberof Konva
+   * @param {Object} config
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * // create label
+   * var label = new Konva.Label({
+   *   x: 100,
+   *   y: 100,
+   *   draggable: true
+   * });
+   *
+   * // add a tag to the label
+   * label.add(new Konva.Tag({
+   *   fill: '#bbb',
+   *   stroke: '#333',
+   *   shadowColor: 'black',
+   *   shadowBlur: 10,
+   *   shadowOffset: [10, 10],
+   *   shadowOpacity: 0.2,
+   *   lineJoin: 'round',
+   *   pointerDirection: 'up',
+   *   pointerWidth: 20,
+   *   pointerHeight: 20,
+   *   cornerRadius: 5
+   * }));
+   *
+   * // add text to the label
+   * label.add(new Konva.Text({
+   *   text: 'Hello World!',
+   *   fontSize: 50,
+   *   lineHeight: 1.2,
+   *   padding: 10,
+   *   fill: 'green'
+   *  }));
+   */
   class Label extends Group {
       constructor(config) {
           super(config);
@@ -6779,9 +11844,23 @@
               this._sync();
           });
       }
+      /**
+       * get Text shape for the label.  You need to access the Text shape in order to update
+       * the text properties
+       * @name Konva.Label#getText
+       * @method
+       * @example
+       * label.getText().fill('red')
+       */
       getText() {
           return this.find('Text')[0];
       }
+      /**
+       * get Tag shape for the label.  You need to access the Tag shape in order to update
+       * the pointer properties and the corner radius
+       * @name Konva.Label#getTag
+       * @method
+       */
       getTag() {
           return this.find('Tag')[0];
       }
@@ -6790,6 +11869,7 @@
           var func = function () {
               that._sync();
           };
+          // update text data for certain attr changes
           for (n = 0; n < attrChangeListLen$1; n++) {
               text.on(ATTR_CHANGE_LIST$2[n] + CHANGE_KONVA$1, func);
           }
@@ -6843,6 +11923,18 @@
   }
   Label.prototype.className = 'Label';
   _registerNode(Label);
+  /**
+   * Tag constructor.&nbsp; A Tag can be configured
+   *  to have a pointer element that points up, right, down, or left
+   * @constructor
+   * @memberof Konva
+   * @param {Object} config
+   * @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default
+   *  is none.  When a pointer is present, the positioning of the label is relative to the tip of the pointer.
+   * @param {Number} [config.pointerWidth]
+   * @param {Number} [config.pointerHeight]
+   * @param {Number} [config.cornerRadius]
+   */
   class Tag extends Shape {
       _sceneFunc(context) {
           var width = this.width(), height = this.height(), pointerDirection = this.pointerDirection(), pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), cornerRadius = this.cornerRadius();
@@ -6902,6 +11994,7 @@
               height += pointerHeight;
           }
           else if (direction === LEFT$1) {
+              // ARGH!!! I have no idea why should I used magic 1.5!!!!!!!!!
               x -= pointerWidth * 1.5;
               width += pointerWidth;
           }
@@ -6918,16 +12011,147 @@
   }
   Tag.prototype.className = 'Tag';
   _registerNode(Tag);
+  /**
+   * get/set pointer direction
+   * @name Konva.Tag#pointerDirection
+   * @method
+   * @param {String} pointerDirection can be up, right, down, left, or none.  The default is none.
+   * @returns {String}
+   * @example
+   * tag.pointerDirection('right');
+   */
   Factory.addGetterSetter(Tag, 'pointerDirection', NONE$1);
+  /**
+   * get/set pointer width
+   * @name Konva.Tag#pointerWidth
+   * @method
+   * @param {Number} pointerWidth
+   * @returns {Number}
+   * @example
+   * tag.pointerWidth(20);
+   */
   Factory.addGetterSetter(Tag, 'pointerWidth', 0, getNumberValidator());
+  /**
+   * get/set pointer height
+   * @method
+   * @name Konva.Tag#pointerHeight
+   * @param {Number} pointerHeight
+   * @returns {Number}
+   * @example
+   * tag.pointerHeight(20);
+   */
   Factory.addGetterSetter(Tag, 'pointerHeight', 0, getNumberValidator());
+  /**
+   * get/set cornerRadius
+   * @name Konva.Tag#cornerRadius
+   * @method
+   * @param {Number} cornerRadius
+   * @returns {Number}
+   * @example
+   * tag.cornerRadius(20);
+   *
+   * // set different corner radius values
+   * // top-left, top-right, bottom-right, bottom-left
+   * tag.cornerRadius([0, 10, 20, 30]);
+   */
   Factory.addGetterSetter(Tag, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
 
+  /**
+   * Rect constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Number} [config.cornerRadius]
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var rect = new Konva.Rect({
+   *   width: 100,
+   *   height: 50,
+   *   fill: 'red',
+   *   stroke: 'black',
+   *   strokeWidth: 5
+   * });
+   */
   class Rect extends Shape {
       _sceneFunc(context) {
           var cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
           context.beginPath();
           if (!cornerRadius) {
+              // simple rect - don't bother doing all that complicated maths stuff.
               context.rect(0, 0, width, height);
           }
           else {
@@ -6960,8 +12184,118 @@
   }
   Rect.prototype.className = 'Rect';
   _registerNode(Rect);
+  /**
+   * get/set corner radius
+   * @method
+   * @name Konva.Rect#cornerRadius
+   * @param {Number} cornerRadius
+   * @returns {Number}
+   * @example
+   * // get corner radius
+   * var cornerRadius = rect.cornerRadius();
+   *
+   * // set corner radius
+   * rect.cornerRadius(10);
+   *
+   * // set different corner radius values
+   * // top-left, top-right, bottom-right, bottom-left
+   * rect.cornerRadius([0, 10, 20, 30]);
+   */
   Factory.addGetterSetter(Rect, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
 
+  /**
+   * RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Number} config.sides
+   * @param {Number} config.radius
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var hexagon = new Konva.RegularPolygon({
+   *   x: 100,
+   *   y: 200,
+   *   sides: 6,
+   *   radius: 70,
+   *   fill: 'red',
+   *   stroke: 'black',
+   *   strokeWidth: 4
+   * });
+   */
   class RegularPolygon extends Shape {
       _sceneFunc(context) {
           const points = this._getPoints();
@@ -7021,10 +12355,128 @@
   RegularPolygon.prototype._centroid = true;
   RegularPolygon.prototype._attrsAffectingSize = ['radius'];
   _registerNode(RegularPolygon);
+  /**
+   * get/set radius
+   * @method
+   * @name Konva.RegularPolygon#radius
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radius
+   * var radius = shape.radius();
+   *
+   * // set radius
+   * shape.radius(10);
+   */
   Factory.addGetterSetter(RegularPolygon, 'radius', 0, getNumberValidator());
+  /**
+   * get/set sides
+   * @method
+   * @name Konva.RegularPolygon#sides
+   * @param {Number} sides
+   * @returns {Number}
+   * @example
+   * // get sides
+   * var sides = shape.sides();
+   *
+   * // set sides
+   * shape.sides(10);
+   */
   Factory.addGetterSetter(RegularPolygon, 'sides', 0, getNumberValidator());
 
   var PIx2 = Math.PI * 2;
+  /**
+   * Ring constructor
+   * @constructor
+   * @augments Konva.Shape
+   * @memberof Konva
+   * @param {Object} config
+   * @param {Number} config.innerRadius
+   * @param {Number} config.outerRadius
+   * @param {Boolean} [config.clockwise]
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var ring = new Konva.Ring({
+   *   innerRadius: 40,
+   *   outerRadius: 80,
+   *   fill: 'red',
+   *   stroke: 'black',
+   *   strokeWidth: 5
+   * });
+   */
   class Ring extends Shape {
       _sceneFunc(context) {
           context.beginPath();
@@ -7051,24 +12503,172 @@
   Ring.prototype._centroid = true;
   Ring.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
   _registerNode(Ring);
+  /**
+   * get/set innerRadius
+   * @method
+   * @name Konva.Ring#innerRadius
+   * @param {Number} innerRadius
+   * @returns {Number}
+   * @example
+   * // get inner radius
+   * var innerRadius = ring.innerRadius();
+   *
+   * // set inner radius
+   * ring.innerRadius(20);
+   */
   Factory.addGetterSetter(Ring, 'innerRadius', 0, getNumberValidator());
+  /**
+   * get/set outerRadius
+   * @name Konva.Ring#outerRadius
+   * @method
+   * @param {Number} outerRadius
+   * @returns {Number}
+   * @example
+   * // get outer radius
+   * var outerRadius = ring.outerRadius();
+   *
+   * // set outer radius
+   * ring.outerRadius(20);
+   */
   Factory.addGetterSetter(Ring, 'outerRadius', 0, getNumberValidator());
 
+  /**
+   * Sprite constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} config.animation animation key
+   * @param {Object} config.animations animation map
+   * @param {Integer} [config.frameIndex] animation frame index
+   * @param {Image} config.image image object
+   * @param {Integer} [config.frameRate] animation frame rate
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var imageObj = new Image();
+   * imageObj.onload = function() {
+   *   var sprite = new Konva.Sprite({
+   *     x: 200,
+   *     y: 100,
+   *     image: imageObj,
+   *     animation: 'standing',
+   *     animations: {
+   *       standing: [
+   *         // x, y, width, height (6 frames)
+   *         0, 0, 49, 109,
+   *         52, 0, 49, 109,
+   *         105, 0, 49, 109,
+   *         158, 0, 49, 109,
+   *         210, 0, 49, 109,
+   *         262, 0, 49, 109
+   *       ],
+   *       kicking: [
+   *         // x, y, width, height (6 frames)
+   *         0, 109, 45, 98,
+   *         45, 109, 45, 98,
+   *         95, 109, 63, 98,
+   *         156, 109, 70, 98,
+   *         229, 109, 60, 98,
+   *         287, 109, 41, 98
+   *       ]
+   *     },
+   *     frameRate: 7,
+   *     frameIndex: 0
+   *   });
+   * };
+   * imageObj.src = '/path/to/image.jpg'
+   */
   class Sprite extends Shape {
       constructor(config) {
           super(config);
           this._updated = true;
           this.anim = new Animation(() => {
+              // if we don't need to redraw layer we should return false
               var updated = this._updated;
               this._updated = false;
               return updated;
           });
           this.on('animationChange.konva', function () {
+              // reset index when animation changes
               this.frameIndex(0);
           });
           this.on('frameIndexChange.konva', function () {
               this._updated = true;
           });
+          // smooth change for frameRate
           this.on('frameRateChange.konva', function () {
               if (!this.anim.isRunning()) {
                   return;
@@ -7118,19 +12718,41 @@
               that._updateIndex();
           }, 1000 / this.frameRate());
       }
+      /**
+       * start sprite animation
+       * @method
+       * @name Konva.Sprite#start
+       */
       start() {
           if (this.isRunning()) {
               return;
           }
           var layer = this.getLayer();
+          /*
+           * animation object has no executable function because
+           *  the updates are done with a fixed FPS with the setInterval
+           *  below.  The anim object only needs the layer reference for
+           *  redraw
+           */
           this.anim.setLayers(layer);
           this._setInterval();
           this.anim.start();
       }
+      /**
+       * stop sprite animation
+       * @method
+       * @name Konva.Sprite#stop
+       */
       stop() {
           this.anim.stop();
           clearInterval(this.interval);
       }
+      /**
+       * determine if animation of sprite is running or not.  returns true or false
+       * @method
+       * @name Konva.Sprite#isRunning
+       * @returns {Boolean}
+       */
       isRunning() {
           return this.anim.isRunning();
       }
@@ -7146,18 +12768,232 @@
   }
   Sprite.prototype.className = 'Sprite';
   _registerNode(Sprite);
+  // add getters setters
   Factory.addGetterSetter(Sprite, 'animation');
+  /**
+   * get/set animation key
+   * @name Konva.Sprite#animation
+   * @method
+   * @param {String} anim animation key
+   * @returns {String}
+   * @example
+   * // get animation key
+   * var animation = sprite.animation();
+   *
+   * // set animation key
+   * sprite.animation('kicking');
+   */
   Factory.addGetterSetter(Sprite, 'animations');
+  /**
+   * get/set animations map
+   * @name Konva.Sprite#animations
+   * @method
+   * @param {Object} animations
+   * @returns {Object}
+   * @example
+   * // get animations map
+   * var animations = sprite.animations();
+   *
+   * // set animations map
+   * sprite.animations({
+   *   standing: [
+   *     // x, y, width, height (6 frames)
+   *     0, 0, 49, 109,
+   *     52, 0, 49, 109,
+   *     105, 0, 49, 109,
+   *     158, 0, 49, 109,
+   *     210, 0, 49, 109,
+   *     262, 0, 49, 109
+   *   ],
+   *   kicking: [
+   *     // x, y, width, height (6 frames)
+   *     0, 109, 45, 98,
+   *     45, 109, 45, 98,
+   *     95, 109, 63, 98,
+   *     156, 109, 70, 98,
+   *     229, 109, 60, 98,
+   *     287, 109, 41, 98
+   *   ]
+   * });
+   */
   Factory.addGetterSetter(Sprite, 'frameOffsets');
+  /**
+   * get/set offsets map
+   * @name Konva.Sprite#offsets
+   * @method
+   * @param {Object} offsets
+   * @returns {Object}
+   * @example
+   * // get offsets map
+   * var offsets = sprite.offsets();
+   *
+   * // set offsets map
+   * sprite.offsets({
+   *   standing: [
+   *     // x, y (6 frames)
+   *     0, 0,
+   *     0, 0,
+   *     5, 0,
+   *     0, 0,
+   *     0, 3,
+   *     2, 0
+   *   ],
+   *   kicking: [
+   *     // x, y (6 frames)
+   *     0, 5,
+   *     5, 0,
+   *     10, 0,
+   *     0, 0,
+   *     2, 1,
+   *     0, 0
+   *   ]
+   * });
+   */
   Factory.addGetterSetter(Sprite, 'image');
+  /**
+   * get/set image
+   * @name Konva.Sprite#image
+   * @method
+   * @param {Image} image
+   * @returns {Image}
+   * @example
+   * // get image
+   * var image = sprite.image();
+   *
+   * // set image
+   * sprite.image(imageObj);
+   */
   Factory.addGetterSetter(Sprite, 'frameIndex', 0, getNumberValidator());
+  /**
+   * set/set animation frame index
+   * @name Konva.Sprite#frameIndex
+   * @method
+   * @param {Integer} frameIndex
+   * @returns {Integer}
+   * @example
+   * // get animation frame index
+   * var frameIndex = sprite.frameIndex();
+   *
+   * // set animation frame index
+   * sprite.frameIndex(3);
+   */
   Factory.addGetterSetter(Sprite, 'frameRate', 17, getNumberValidator());
+  /**
+   * get/set frame rate in frames per second.  Increase this number to make the sprite
+   *  animation run faster, and decrease the number to make the sprite animation run slower
+   *  The default is 17 frames per second
+   * @name Konva.Sprite#frameRate
+   * @method
+   * @param {Integer} frameRate
+   * @returns {Integer}
+   * @example
+   * // get frame rate
+   * var frameRate = sprite.frameRate();
+   *
+   * // set frame rate to 2 frames per second
+   * sprite.frameRate(2);
+   */
   Factory.backCompat(Sprite, {
       index: 'frameIndex',
       getIndex: 'getFrameIndex',
       setIndex: 'setFrameIndex',
   });
 
+  /**
+   * Star constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Integer} config.numPoints
+   * @param {Number} config.innerRadius
+   * @param {Number} config.outerRadius
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var star = new Konva.Star({
+   *   x: 100,
+   *   y: 200,
+   *   numPoints: 5,
+   *   innerRadius: 70,
+   *   outerRadius: 70,
+   *   fill: 'red',
+   *   stroke: 'black',
+   *   strokeWidth: 4
+   * });
+   */
   class Star extends Shape {
       _sceneFunc(context) {
           var innerRadius = this.innerRadius(), outerRadius = this.outerRadius(), numPoints = this.numPoints();
@@ -7189,14 +13025,60 @@
   Star.prototype._centroid = true;
   Star.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
   _registerNode(Star);
+  /**
+   * get/set number of points
+   * @name Konva.Star#numPoints
+   * @method
+   * @param {Number} numPoints
+   * @returns {Number}
+   * @example
+   * // get inner radius
+   * var numPoints = star.numPoints();
+   *
+   * // set inner radius
+   * star.numPoints(20);
+   */
   Factory.addGetterSetter(Star, 'numPoints', 5, getNumberValidator());
+  /**
+   * get/set innerRadius
+   * @name Konva.Star#innerRadius
+   * @method
+   * @param {Number} innerRadius
+   * @returns {Number}
+   * @example
+   * // get inner radius
+   * var innerRadius = star.innerRadius();
+   *
+   * // set inner radius
+   * star.innerRadius(20);
+   */
   Factory.addGetterSetter(Star, 'innerRadius', 0, getNumberValidator());
+  /**
+   * get/set outerRadius
+   * @name Konva.Star#outerRadius
+   * @method
+   * @param {Number} outerRadius
+   * @returns {Number}
+   * @example
+   * // get inner radius
+   * var outerRadius = star.outerRadius();
+   *
+   * // set inner radius
+   * star.outerRadius(20);
+   */
   Factory.addGetterSetter(Star, 'outerRadius', 0, getNumberValidator());
 
   function stringToArray(string) {
+      // we need to use `Array.from` because it can split unicode string correctly
+      // we also can use some regexp magic from lodash:
+      // https://github.com/lodash/lodash/blob/fb1f99d9d90ad177560d771bc5953a435b2dc119/lodash.toarray/index.js#L256
+      // but I decided it is too much code for that small fix
       return Array.from(string);
   }
-  var AUTO = 'auto', CENTER = 'center', JUSTIFY = 'justify', CHANGE_KONVA = 'Change.konva', CONTEXT_2D = '2d', DASH = '-', LEFT = 'left', TEXT = 'text', TEXT_UPPER = 'Text', TOP = 'top', BOTTOM = 'bottom', MIDDLE = 'middle', NORMAL$1 = 'normal', PX_SPACE = 'px ', SPACE = ' ', RIGHT = 'right', WORD = 'word', CHAR = 'char', NONE = 'none', ELLIPSIS = '…', ATTR_CHANGE_LIST$1 = [
+  // constants
+  var AUTO = 'auto', 
+  //CANVAS = 'canvas',
+  CENTER = 'center', JUSTIFY = 'justify', CHANGE_KONVA = 'Change.konva', CONTEXT_2D = '2d', DASH = '-', LEFT = 'left', TEXT = 'text', TEXT_UPPER = 'Text', TOP = 'top', BOTTOM = 'bottom', MIDDLE = 'middle', NORMAL$1 = 'normal', PX_SPACE = 'px ', SPACE = ' ', RIGHT = 'right', WORD = 'word', CHAR = 'char', NONE = 'none', ELLIPSIS = '…', ATTR_CHANGE_LIST$1 = [
       'fontFamily',
       'fontSize',
       'fontStyle',
@@ -7211,7 +13093,9 @@
       'wrap',
       'ellipsis',
       'letterSpacing',
-  ], attrChangeListLen = ATTR_CHANGE_LIST$1.length;
+  ], 
+  // cached variables
+  attrChangeListLen = ATTR_CHANGE_LIST$1.length;
   function normalizeFontFamily(fontFamily) {
       return fontFamily
           .split(',')
@@ -7242,6 +13126,7 @@
   }
   function checkDefaultFill(config) {
       config = config || {};
+      // set default color to black
       if (!config.fillLinearGradientColorStops &&
           !config.fillRadialGradientColorStops &&
           !config.fillPatternImage) {
@@ -7249,11 +13134,114 @@
       }
       return config;
   }
+  /**
+   * Text constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} [config.fontFamily] default is Arial
+   * @param {Number} [config.fontSize] in pixels.  Default is 12
+   * @param {String} [config.fontStyle] can be 'normal', 'bold', 'italic' or even 'italic bold'.  Default is 'normal'
+   * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
+   * @param {String} [config.textDecoration] can be line-through, underline or empty string. Default is empty string.
+   * @param {String} config.text
+   * @param {String} [config.align] can be left, center, or right
+   * @param {String} [config.verticalAlign] can be top, middle or bottom
+   * @param {Number} [config.padding]
+   * @param {Number} [config.lineHeight] default is 1
+   * @param {String} [config.wrap] can be "word", "char", or "none". Default is word
+   * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var text = new Konva.Text({
+   *   x: 10,
+   *   y: 15,
+   *   text: 'Simple Text',
+   *   fontSize: 30,
+   *   fontFamily: 'Calibri',
+   *   fill: 'green'
+   * });
+   */
   class Text extends Shape {
       constructor(config) {
           super(checkDefaultFill(config));
           this._partialTextX = 0;
           this._partialTextY = 0;
+          // update text data for certain attr changes
           for (var n = 0; n < attrChangeListLen; n++) {
               this.on(ATTR_CHANGE_LIST$1[n] + CHANGE_KONVA, this._setTextData);
           }
@@ -7272,6 +13260,7 @@
           context.setAttr('font', this._getContextFont());
           context.setAttr('textBaseline', MIDDLE);
           context.setAttr('textAlign', LEFT);
+          // handle vertical alignment
           if (verticalAlign === MIDDLE) {
               alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;
           }
@@ -7279,10 +13268,12 @@
               alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
           }
           context.translate(padding, alignY + padding);
+          // draw text lines
           for (n = 0; n < textArrLen; n++) {
               var lineTranslateX = 0;
               var lineTranslateY = 0;
               var obj = textArr[n], text = obj.text, width = obj.width, lastLine = n !== textArrLen - 1, spacesNumber, oneWord, lineWidth;
+              // horizontal alignment
               context.save();
               if (align === RIGHT) {
                   lineTranslateX += totalWidth - width - padding * 2;
@@ -7301,6 +13292,8 @@
                           ? totalWidth - padding * 2
                           : width;
                   context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + Math.round(fontSize / 2));
+                  // I have no idea what is real ratio
+                  // just /15 looks good enough
                   context.lineWidth = fontSize / 15;
                   context.strokeStyle = fill;
                   context.stroke();
@@ -7323,12 +13316,18 @@
                   context.restore();
               }
               if (letterSpacing !== 0 || align === JUSTIFY) {
+                  //   var words = text.split(' ');
                   spacesNumber = text.split(' ').length - 1;
                   var array = stringToArray(text);
                   for (var li = 0; li < array.length; li++) {
                       var letter = array[li];
+                      // skip justify for the last line
                       if (letter === ' ' && n !== textArrLen - 1 && align === JUSTIFY) {
                           lineTranslateX += (totalWidth - padding * 2 - width) / spacesNumber;
+                          // context.translate(
+                          //   Math.floor((totalWidth - padding * 2 - width) / spacesNumber),
+                          //   0
+                          // );
                       }
                       this._partialTextX = lineTranslateX;
                       this._partialTextY = translateY + lineTranslateY;
@@ -7376,6 +13375,12 @@
                   this.padding() * 2
               : this.attrs.height;
       }
+      /**
+       * get pure text width without padding
+       * @method
+       * @name Konva.Text#getTextWidth
+       * @returns {Number}
+       */
       getTextWidth() {
           return this.textWidth;
       }
@@ -7383,6 +13388,14 @@
           Util.warn('text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height.');
           return this.textHeight;
       }
+      /**
+       * measure string with the font of current text shape.
+       * That method can't handle multiline text.
+       * @method
+       * @name Konva.Text#measureSize
+       * @param {String} [text] text to measure
+       * @returns {Object} { width , height} of measured text
+       */
       measureSize(text) {
           var _context = getDummyContext(), fontSize = this.fontSize(), metrics;
           _context.save();
@@ -7400,6 +13413,7 @@
               this.fontVariant() +
               SPACE +
               (this.fontSize() + PX_SPACE) +
+              // wrap font family into " so font families with spaces works ok
               normalizeFontFamily(this.fontFamily()));
       }
       _addTextLine(line) {
@@ -7416,7 +13430,9 @@
               (length ? letterSpacing * (length - 1) : 0));
       }
       _setTextData() {
-          var lines = this.text().split('\n'), fontSize = +this.fontSize(), textWidth = 0, lineHeightPx = this.lineHeight() * fontSize, width = this.attrs.width, height = this.attrs.height, fixedWidth = width !== AUTO && width !== undefined, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxWidth = width - padding * 2, maxHeightPx = height - padding * 2, currentHeightPx = 0, wrap = this.wrap(), shouldWrap = wrap !== NONE, wrapAtWord = wrap !== CHAR && shouldWrap, shouldAddEllipsis = this.ellipsis();
+          var lines = this.text().split('\n'), fontSize = +this.fontSize(), textWidth = 0, lineHeightPx = this.lineHeight() * fontSize, width = this.attrs.width, height = this.attrs.height, fixedWidth = width !== AUTO && width !== undefined, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxWidth = width - padding * 2, maxHeightPx = height - padding * 2, currentHeightPx = 0, wrap = this.wrap(), 
+          // align = this.align(),
+          shouldWrap = wrap !== NONE, wrapAtWord = wrap !== CHAR && shouldWrap, shouldAddEllipsis = this.ellipsis();
           this.textArr = [];
           getDummyContext().font = this._getContextFont();
           var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
@@ -7424,7 +13440,15 @@
               var line = lines[i];
               var lineWidth = this._getTextWidth(line);
               if (fixedWidth && lineWidth > maxWidth) {
+                  /*
+                   * if width is fixed and line does not fit entirely
+                   * break the line into multiple fitting lines
+                   */
                   while (line.length > 0) {
+                      /*
+                       * use binary search to find the longest substring that
+                       * that would fit in the specified width
+                       */
                       var low = 0, high = line.length, match = '', matchWidth = 0;
                       while (low < high) {
                           var mid = (low + high) >>> 1, substr = line.slice(0, mid + 1), substrWidth = this._getTextWidth(substr) + additionalWidth;
@@ -7437,8 +13461,15 @@
                               high = mid;
                           }
                       }
+                      /*
+                       * 'low' is now the index of the substring end
+                       * 'match' is the substring
+                       * 'matchWidth' is the substring width in px
+                       */
                       if (match) {
+                          // a fitting substring was found
                           if (wrapAtWord) {
+                              // try to find a space or dash where wrapping could be done
                               var wrapIndex;
                               var nextChar = line[match.length];
                               var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
@@ -7451,12 +13482,15 @@
                                           1;
                               }
                               if (wrapIndex > 0) {
+                                  // re-cut the substring found at the space/dash position
                                   low = wrapIndex;
                                   match = match.slice(0, low);
                                   matchWidth = this._getTextWidth(match);
                               }
                           }
+                          // if (align === 'right') {
                           match = match.trimRight();
+                          // }
                           this._addTextLine(match);
                           textWidth = Math.max(textWidth, matchWidth);
                           currentHeightPx += lineHeightPx;
@@ -7473,13 +13507,19 @@
                                       this._addTextLine(lastLine.text + ELLIPSIS);
                                   }
                               }
+                              /*
+                               * stop wrapping if wrapping is disabled or if adding
+                               * one more line would overflow the fixed height
+                               */
                               break;
                           }
                           line = line.slice(low);
                           line = line.trimLeft();
                           if (line.length > 0) {
+                              // Check if the remaining text would fit on one line
                               lineWidth = this._getTextWidth(line);
                               if (lineWidth <= maxWidth) {
+                                  // if it does, add the line and break out of the loop
                                   this._addTextLine(line);
                                   currentHeightPx += lineHeightPx;
                                   textWidth = Math.max(textWidth, lineWidth);
@@ -7488,22 +13528,31 @@
                           }
                       }
                       else {
+                          // not even one character could fit in the element, abort
                           break;
                       }
                   }
               }
               else {
+                  // element width is automatically adjusted to max line width
                   this._addTextLine(line);
                   currentHeightPx += lineHeightPx;
                   textWidth = Math.max(textWidth, lineWidth);
               }
+              // if element height is fixed, abort if adding one more line would overflow
               if (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx) {
                   break;
               }
           }
           this.textHeight = fontSize;
+          // var maxTextWidth = 0;
+          // for(var j = 0; j < this.textArr.length; j++) {
+          //     maxTextWidth = Math.max(maxTextWidth, this.textArr[j].width);
+          // }
           this.textWidth = textWidth;
       }
+      // for text we can't disable stroke scaling
+      // if we do, the result will be unexpected
       getStrokeScaleEnabled() {
           return true;
       }
@@ -7520,20 +13569,229 @@
       'letterSpacing',
   ];
   _registerNode(Text);
+  /**
+   * get/set width of text area, which includes padding.
+   * @name Konva.Text#width
+   * @method
+   * @param {Number} width
+   * @returns {Number}
+   * @example
+   * // get width
+   * var width = text.width();
+   *
+   * // set width
+   * text.width(20);
+   *
+   * // set to auto
+   * text.width('auto');
+   * text.width() // will return calculated width, and not "auto"
+   */
   Factory.overWriteSetter(Text, 'width', getNumberOrAutoValidator());
+  /**
+   * get/set the height of the text area, which takes into account multi-line text, line heights, and padding.
+   * @name Konva.Text#height
+   * @method
+   * @param {Number} height
+   * @returns {Number}
+   * @example
+   * // get height
+   * var height = text.height();
+   *
+   * // set height
+   * text.height(20);
+   *
+   * // set to auto
+   * text.height('auto');
+   * text.height() // will return calculated height, and not "auto"
+   */
   Factory.overWriteSetter(Text, 'height', getNumberOrAutoValidator());
+  /**
+   * get/set font family
+   * @name Konva.Text#fontFamily
+   * @method
+   * @param {String} fontFamily
+   * @returns {String}
+   * @example
+   * // get font family
+   * var fontFamily = text.fontFamily();
+   *
+   * // set font family
+   * text.fontFamily('Arial');
+   */
   Factory.addGetterSetter(Text, 'fontFamily', 'Arial');
+  /**
+   * get/set font size in pixels
+   * @name Konva.Text#fontSize
+   * @method
+   * @param {Number} fontSize
+   * @returns {Number}
+   * @example
+   * // get font size
+   * var fontSize = text.fontSize();
+   *
+   * // set font size to 22px
+   * text.fontSize(22);
+   */
   Factory.addGetterSetter(Text, 'fontSize', 12, getNumberValidator());
+  /**
+   * get/set font style.  Can be 'normal', 'italic', or 'bold' or even 'italic bold'.  'normal' is the default.
+   * @name Konva.Text#fontStyle
+   * @method
+   * @param {String} fontStyle
+   * @returns {String}
+   * @example
+   * // get font style
+   * var fontStyle = text.fontStyle();
+   *
+   * // set font style
+   * text.fontStyle('bold');
+   */
   Factory.addGetterSetter(Text, 'fontStyle', NORMAL$1);
+  /**
+   * get/set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+   * @name Konva.Text#fontVariant
+   * @method
+   * @param {String} fontVariant
+   * @returns {String}
+   * @example
+   * // get font variant
+   * var fontVariant = text.fontVariant();
+   *
+   * // set font variant
+   * text.fontVariant('small-caps');
+   */
   Factory.addGetterSetter(Text, 'fontVariant', NORMAL$1);
+  /**
+   * get/set padding
+   * @name Konva.Text#padding
+   * @method
+   * @param {Number} padding
+   * @returns {Number}
+   * @example
+   * // get padding
+   * var padding = text.padding();
+   *
+   * // set padding to 10 pixels
+   * text.padding(10);
+   */
   Factory.addGetterSetter(Text, 'padding', 0, getNumberValidator());
+  /**
+   * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
+   * @name Konva.Text#align
+   * @method
+   * @param {String} align
+   * @returns {String}
+   * @example
+   * // get text align
+   * var align = text.align();
+   *
+   * // center text
+   * text.align('center');
+   *
+   * // align text to right
+   * text.align('right');
+   */
   Factory.addGetterSetter(Text, 'align', LEFT);
+  /**
+   * get/set vertical align of text.  Can be 'top', 'middle', 'bottom'.
+   * @name Konva.Text#verticalAlign
+   * @method
+   * @param {String} verticalAlign
+   * @returns {String}
+   * @example
+   * // get text vertical align
+   * var verticalAlign = text.verticalAlign();
+   *
+   * // center text
+   * text.verticalAlign('middle');
+   */
   Factory.addGetterSetter(Text, 'verticalAlign', TOP);
+  /**
+   * get/set line height.  The default is 1.
+   * @name Konva.Text#lineHeight
+   * @method
+   * @param {Number} lineHeight
+   * @returns {Number}
+   * @example
+   * // get line height
+   * var lineHeight = text.lineHeight();
+   *
+   * // set the line height
+   * text.lineHeight(2);
+   */
   Factory.addGetterSetter(Text, 'lineHeight', 1, getNumberValidator());
+  /**
+   * get/set wrap.  Can be "word", "char", or "none". Default is "word".
+   * In "word" wrapping any word still can be wrapped if it can't be placed in the required width
+   * without breaks.
+   * @name Konva.Text#wrap
+   * @method
+   * @param {String} wrap
+   * @returns {String}
+   * @example
+   * // get wrap
+   * var wrap = text.wrap();
+   *
+   * // set wrap
+   * text.wrap('word');
+   */
   Factory.addGetterSetter(Text, 'wrap', WORD);
+  /**
+   * get/set ellipsis. Can be true or false. Default is false. If ellipses is true,
+   * Konva will add "..." at the end of the text if it doesn't have enough space to write characters.
+   * That is possible only when you limit both width and height of the text
+   * @name Konva.Text#ellipsis
+   * @method
+   * @param {Boolean} ellipsis
+   * @returns {Boolean}
+   * @example
+   * // get ellipsis param, returns true or false
+   * var ellipsis = text.ellipsis();
+   *
+   * // set ellipsis
+   * text.ellipsis(true);
+   */
   Factory.addGetterSetter(Text, 'ellipsis', false, getBooleanValidator());
+  /**
+   * set letter spacing property. Default value is 0.
+   * @name Konva.Text#letterSpacing
+   * @method
+   * @param {Number} letterSpacing
+   */
   Factory.addGetterSetter(Text, 'letterSpacing', 0, getNumberValidator());
+  /**
+   * get/set text
+   * @name Konva.Text#text
+   * @method
+   * @param {String} text
+   * @returns {String}
+   * @example
+   * // get text
+   * var text = text.text();
+   *
+   * // set text
+   * text.text('Hello world!');
+   */
   Factory.addGetterSetter(Text, 'text', '', getStringValidator());
+  /**
+   * get/set text decoration of a text.  Possible values are 'underline', 'line-through' or combination of these values separated by space
+   * @name Konva.Text#textDecoration
+   * @method
+   * @param {String} textDecoration
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var textDecoration = text.textDecoration();
+   *
+   * // underline text
+   * text.textDecoration('underline');
+   *
+   * // strike text
+   * text.textDecoration('line-through');
+   *
+   * // underline and strike text
+   * text.textDecoration('underline line-through');
+   */
   Factory.addGetterSetter(Text, 'textDecoration', '');
 
   var EMPTY_STRING = '', NORMAL = 'normal';
@@ -7543,8 +13801,125 @@
   function _strokeFunc(context) {
       context.strokeText(this.partialText, 0, 0);
   }
+  /**
+   * Path constructor.
+   * @author Jason Follas
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {String} [config.fontFamily] default is Arial
+   * @param {Number} [config.fontSize] default is 12
+   * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+   * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
+   * @param {String} [config.textBaseline] Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'. Default is middle
+   * @param {String} config.text
+   * @param {String} config.data SVG data string
+   * @param {Function} config.kerningFunc a getter for kerning values for the specified characters
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * var kerningPairs = {
+   *   'A': {
+   *     ' ': -0.05517578125,
+   *     'T': -0.07421875,
+   *     'V': -0.07421875
+   *   }
+   *   'V': {
+   *     ',': -0.091796875,
+   *     ":": -0.037109375,
+   *     ";": -0.037109375,
+   *     "A": -0.07421875
+   *   }
+   * }
+   * var textpath = new Konva.TextPath({
+   *   x: 100,
+   *   y: 50,
+   *   fill: '#333',
+   *   fontSize: '24',
+   *   fontFamily: 'Arial',
+   *   text: 'All the world\'s a stage, and all the men and women merely players.',
+   *   data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
+   *   kerningFunc(leftChar, rightChar) {
+   *     return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
+   *   }
+   * });
+   */
   class TextPath extends Shape {
       constructor(config) {
+          // call super constructor
           super(config);
           this.dummyCanvas = Util.createCanvasElement();
           this.dataArray = [];
@@ -7553,6 +13928,7 @@
               this.dataArray = Path.parsePathData(this.attrs.data);
               this._setTextData();
           });
+          // update text data for certain attr changes
           this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva', this._setTextData);
           this._setTextData();
       }
@@ -7582,6 +13958,14 @@
                   context.lineTo(fontSize, fontSize / 2 + 1);
               }
               context.restore();
+              //// To assist with debugging visually, uncomment following
+              //
+              // if (i % 2) context.strokeStyle = 'cyan';
+              // else context.strokeStyle = 'green';
+              // var p1 = glyphInfo[i].p1;
+              // context.moveTo(p0.x, p0.y);
+              // context.lineTo(p1.x, p1.y);
+              // context.stroke();
           }
           if (textDecoration === 'underline') {
               context.strokeStyle = fill;
@@ -7605,6 +13989,11 @@
           context.setAttr('strokeStyle', this.colorKey);
           context.stroke();
       }
+      /**
+       * get text width in pixels
+       * @method
+       * @name Konva.TextPath#getTextWidth
+       */
       getTextWidth() {
           return this.textWidth;
       }
@@ -7658,6 +14047,14 @@
           var p0, p1, pathCmd;
           var pIndex = -1;
           var currentT = 0;
+          // var sumLength = 0;
+          // for(var j = 0; j < that.dataArray.length; j++) {
+          //   if(that.dataArray[j].pathLength > 0) {
+          //
+          //     if (sumLength + that.dataArray[j].pathLength > offset) {}
+          //       fullPathWidth += that.dataArray[j].pathLength;
+          //   }
+          // }
           var getNextPathSegment = function () {
               currentT = 0;
               var pathData = that.dataArray;
@@ -7710,17 +14107,22 @@
                           break;
                       case 'A':
                           var start = pathCmd.points[4];
+                          // 4 = theta
                           var dTheta = pathCmd.points[5];
+                          // 5 = dTheta
                           var end = pathCmd.points[4] + dTheta;
                           if (currentT === 0) {
                               currentT = start + 0.00000001;
                           }
                           else if (glyphWidth > currLen) {
+                              // Just in case start is 0
                               currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
                           }
                           else {
                               currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
                           }
+                          // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
+                          // Old code failed to render text along arc of this path: "M 50 50 a 150 50 0 0 1 250 50 l 50 0"
                           if ((dTheta < 0 && currentT < end) ||
                               (dTheta >= 0 && currentT > end)) {
                               currentT = end;
@@ -7775,9 +14177,12 @@
                   }
               }
           };
+          // fake search for offset, this is the best approach
           var testChar = 'C';
           var glyphWidth = that._getTextSize(testChar).width + letterSpacing;
           var lettersInOffset = offset / glyphWidth - 1;
+          // the idea is simple
+          // try to draw testChar until we fill offset
           for (var k = 0; k < lettersInOffset; k++) {
               findSegmentToFitCharacter(testChar);
               if (p0 === undefined || p1 === undefined) {
@@ -7786,6 +14191,7 @@
               p0 = p1;
           }
           for (var i = 0; i < charArr.length; i++) {
+              // Find p1 such that line segment between p0 and p1 is approx. width of glyph
               findSegmentToFitCharacter(charArr[i]);
               if (p0 === undefined || p1 === undefined) {
                   break;
@@ -7794,6 +14200,7 @@
               var kern = 0;
               if (kerningFunc) {
                   try {
+                      // getKerning is a user provided getter. Make sure it never breaks our logic
                       kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
                   }
                   catch (e) {
@@ -7861,16 +14268,167 @@
   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
+   *  into a data array.  Currently supported SVG data:
+   *  M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z
+   * @name Konva.TextPath#data
+   * @method
+   * @param {String} data svg path string
+   * @returns {String}
+   * @example
+   * // get data
+   * var data = shape.data();
+   *
+   * // set data
+   * shape.data('M200,100h100v50z');
+   */
   Factory.addGetterSetter(TextPath, 'data');
+  /**
+   * get/set font family
+   * @name Konva.TextPath#fontFamily
+   * @method
+   * @param {String} fontFamily
+   * @returns {String}
+   * @example
+   * // get font family
+   * var fontFamily = shape.fontFamily();
+   *
+   * // set font family
+   * shape.fontFamily('Arial');
+   */
   Factory.addGetterSetter(TextPath, 'fontFamily', 'Arial');
+  /**
+   * get/set font size in pixels
+   * @name Konva.TextPath#fontSize
+   * @method
+   * @param {Number} fontSize
+   * @returns {Number}
+   * @example
+   * // get font size
+   * var fontSize = shape.fontSize();
+   *
+   * // set font size to 22px
+   * shape.fontSize(22);
+   */
   Factory.addGetterSetter(TextPath, 'fontSize', 12, getNumberValidator());
+  /**
+   * get/set font style.  Can be 'normal', 'italic', or 'bold'.  'normal' is the default.
+   * @name Konva.TextPath#fontStyle
+   * @method
+   * @param {String} fontStyle
+   * @returns {String}
+   * @example
+   * // get font style
+   * var fontStyle = shape.fontStyle();
+   *
+   * // set font style
+   * shape.fontStyle('bold');
+   */
   Factory.addGetterSetter(TextPath, 'fontStyle', NORMAL);
+  /**
+   * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
+   * @name Konva.TextPath#align
+   * @method
+   * @param {String} align
+   * @returns {String}
+   * @example
+   * // get text align
+   * var align = text.align();
+   *
+   * // center text
+   * text.align('center');
+   *
+   * // align text to right
+   * text.align('right');
+   */
   Factory.addGetterSetter(TextPath, 'align', 'left');
+  /**
+   * get/set letter spacing.  The default is 0.
+   * @name Konva.TextPath#letterSpacing
+   * @method
+   * @param {Number} letterSpacing
+   * @returns {Number}
+   * @example
+   * // get line height
+   * var letterSpacing = shape.letterSpacing();
+   *
+   * // set the line height
+   * shape.letterSpacing(2);
+   */
   Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
+  /**
+   * get/set text baseline.  The default is 'middle'. Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'
+   * @name Konva.TextPath#textBaseline
+   * @method
+   * @param {String} textBaseline
+   * @returns {String}
+   * @example
+   * // get line height
+   * var textBaseline = shape.textBaseline();
+   *
+   * // set the line height
+   * shape.textBaseline('top');
+   */
   Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');
+  /**
+   * get/set font variant.  Can be 'normal' or 'small-caps'.  'normal' is the default.
+   * @name Konva.TextPath#fontVariant
+   * @method
+   * @param {String} fontVariant
+   * @returns {String}
+   * @example
+   * // get font variant
+   * var fontVariant = shape.fontVariant();
+   *
+   * // set font variant
+   * shape.fontVariant('small-caps');
+   */
   Factory.addGetterSetter(TextPath, 'fontVariant', NORMAL);
+  /**
+   * get/set text
+   * @name Konva.TextPath#getText
+   * @method
+   * @param {String} text
+   * @returns {String}
+   * @example
+   * // get text
+   * var text = text.text();
+   *
+   * // set text
+   * text.text('Hello world!');
+   */
   Factory.addGetterSetter(TextPath, 'text', EMPTY_STRING);
+  /**
+   * get/set text decoration of a text.  Can be '' or 'underline'.
+   * @name Konva.TextPath#textDecoration
+   * @method
+   * @param {String} textDecoration
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var textDecoration = shape.textDecoration();
+   *
+   * // underline text
+   * shape.textDecoration('underline');
+   */
   Factory.addGetterSetter(TextPath, 'textDecoration', null);
+  /**
+   * get/set kerning function.
+   * @name Konva.TextPath#kerningFunc
+   * @method
+   * @param {String} kerningFunc
+   * @returns {String}
+   * @example
+   * // get text decoration
+   * var kerningFunc = text.kerningFunc();
+   *
+   * // center text
+   * text.kerningFunc(function(leftChar, rightChar) {
+   *   return 1;
+   * });
+   */
   Factory.addGetterSetter(TextPath, 'kerningFunc', null);
 
   var EVENTS_NAME = 'tr-konva';
@@ -7926,30 +14484,39 @@
       rad += Util.degToRad(ANGLES[anchorName] || 0);
       var angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
       if (Util._inRange(angle, 315 + 22.5, 360) || Util._inRange(angle, 0, 22.5)) {
+          // TOP
           return 'ns-resize';
       }
       else if (Util._inRange(angle, 45 - 22.5, 45 + 22.5)) {
+          // TOP - RIGHT
           return 'nesw-resize';
       }
       else if (Util._inRange(angle, 90 - 22.5, 90 + 22.5)) {
+          // RIGHT
           return 'ew-resize';
       }
       else if (Util._inRange(angle, 135 - 22.5, 135 + 22.5)) {
+          // BOTTOM - RIGHT
           return 'nwse-resize';
       }
       else if (Util._inRange(angle, 180 - 22.5, 180 + 22.5)) {
+          // BOTTOM
           return 'ns-resize';
       }
       else if (Util._inRange(angle, 225 - 22.5, 225 + 22.5)) {
+          // BOTTOM - LEFT
           return 'nesw-resize';
       }
       else if (Util._inRange(angle, 270 - 22.5, 270 + 22.5)) {
+          // RIGHT
           return 'ew-resize';
       }
       else if (Util._inRange(angle, 315 - 22.5, 315 + 22.5)) {
+          // BOTTOM - RIGHT
           return 'nwse-resize';
       }
       else {
+          // how can we can there?
           Util.error('Transformer has unknown angle for cursor detection: ' + angle);
           return 'pointer';
       }
@@ -8001,19 +14568,68 @@
       }
       return snapped;
   }
+  /**
+   * Transformer constructor.  Transformer is a special type of group that allow you transform Konva
+   * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes
+   * when you resize them. Instead it changes `scaleX` and `scaleY` properties.
+   * @constructor
+   * @memberof Konva
+   * @param {Object} config
+   * @param {Boolean} [config.resizeEnabled] Default is true
+   * @param {Boolean} [config.rotateEnabled] Default is true
+   * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
+   * @param {Number} [config.rotationSnapTolerance] Snapping tolerance. If closer than this it will snap. Default is 5
+   * @param {Number} [config.rotateAnchorOffset] Default is 50
+   * @param {Number} [config.padding] Default is 0
+   * @param {Boolean} [config.borderEnabled] Should we draw border? Default is true
+   * @param {String} [config.borderStroke] Border stroke color
+   * @param {Number} [config.borderStrokeWidth] Border stroke size
+   * @param {Array} [config.borderDash] Array for border dash.
+   * @param {String} [config.anchorFill] Anchor fill color
+   * @param {String} [config.anchorStroke] Anchor stroke color
+   * @param {String} [config.anchorCornerRadius] Anchor corner radius
+   * @param {Number} [config.anchorStrokeWidth] Anchor stroke size
+   * @param {Number} [config.anchorSize] Default is 10
+   * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
+   * @param {Boolean} [config.centeredScaling] Should we resize relative to node's center? Default is false
+   * @param {Array} [config.enabledAnchors] Array of names of enabled handles
+   * @param {Boolean} [config.flipEnabled] Can we flip/mirror shape on transform?. True by default
+   * @param {Function} [config.boundBoxFunc] Bounding box function
+   * @param {Function} [config.ignoreStroke] Should we ignore stroke size? Default is false
+   * @param {Boolean} [config.useSingleNodeRotation] When just one node attached, should we use its rotation for transformer?
+   * @param {Boolean} [config.shouldOverdrawWholeArea] Should we fill whole transformer area with fake transparent shape to enable dragging from empty spaces?
+   * @example
+   * var transformer = new Konva.Transformer({
+   *   nodes: [rectangle],
+   *   rotateAnchorOffset: 60,
+   *   enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+   * });
+   * layer.add(transformer);
+   */
   class Transformer extends Group {
       constructor(config) {
+          // call super constructor
           super(config);
           this._transforming = false;
           this._createElements();
+          // bindings
           this._handleMouseMove = this._handleMouseMove.bind(this);
           this._handleMouseUp = this._handleMouseUp.bind(this);
           this.update = this.update.bind(this);
+          // update transformer data for certain attr changes
           this.on(ATTR_CHANGE_LIST, this.update);
           if (this.getNode()) {
               this.update();
           }
       }
+      /**
+       * alias to `tr.nodes([shape])`/ This method is deprecated and will be removed soon.
+       * @method
+       * @name Konva.Transformer#attachTo
+       * @returns {Konva.Transformer}
+       * @example
+       * transformer.attachTo(shape);
+       */
       attachTo(node) {
           this.setNode(node);
           return this;
@@ -8056,6 +14672,8 @@
               this._proxyDrag(node);
           });
           this._resetTransformCache();
+          // we may need it if we set node in initial props
+          // so elements are not defined yet
           var elementsCreated = !!this.findOne('.top-left');
           if (elementsCreated) {
               this.update();
@@ -8066,6 +14684,8 @@
           let lastPos;
           node.on(`dragstart.${EVENTS_NAME}`, (e) => {
               lastPos = node.getAbsolutePosition();
+              // actual dragging of Transformer doesn't make sense
+              // but we need to make sure it also has all drag events
               if (!this.isDragging() && node !== this.findOne('.back')) {
                   this.startDrag(e, false);
               }
@@ -8097,10 +14717,27 @@
       getNodes() {
           return this._nodes || [];
       }
+      /**
+       * return the name of current active anchor
+       * @method
+       * @name Konva.Transformer#getActiveAnchor
+       * @returns {String | Null}
+       * @example
+       * transformer.getActiveAnchor();
+       */
       getActiveAnchor() {
           return this._movingAnchorName;
       }
+      /**
+       * detach transformer from an attached node
+       * @method
+       * @name Konva.Transformer#detach
+       * @returns {Konva.Transformer}
+       * @example
+       * transformer.detach();
+       */
       detach() {
+          // remove events
           if (this._nodes) {
               this._nodes.forEach((node) => {
                   node.off('.' + EVENTS_NAME);
@@ -8117,6 +14754,7 @@
       _getNodeRect() {
           return this._getCache(NODES_RECT, this.__getNodeRect);
       }
+      // return absolute rotated bounding rectangle
       __getNodeShape(node, rot = this.rotation(), relative) {
           var rect = node.getClientRect({
               skipTransform: true,
@@ -8141,6 +14779,7 @@
               y: 0,
           });
       }
+      // returns box + rotation of all shapes
       __getNodeRect() {
           var node = this.getNode();
           if (!node) {
@@ -8194,6 +14833,14 @@
               height: maxY - minY,
               rotation: Konva$2.getAngle(this.rotation()),
           };
+          // const shapes = this.nodes().map(node => {
+          //   return this.__getNodeShape(node);
+          // });
+          // const box = getShapesRect(shapes);
+          // return rotateAroundPoint(box, Konva.getAngle(this.rotation()), {
+          //   x: 0,
+          //   y: 0
+          // });
       }
       getX() {
           return this._getNodeRect().x;
@@ -8221,6 +14868,8 @@
               strokeWidth: 1,
               name: name + ' _anchor',
               dragDistance: 0,
+              // make it draggable,
+              // so activating the anchor will not start drag&drop of any parent
               draggable: true,
               hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
           });
@@ -8235,6 +14884,7 @@
           anchor.on('dragend', (e) => {
               e.cancelBubble = true;
           });
+          // add hover styling
           anchor.on('mouseenter', () => {
               var rad = Konva$2.getAngle(this.rotation());
               var cursor = getCursor(name, rad);
@@ -8278,6 +14928,9 @@
           });
           this.add(back);
           this._proxyDrag(back);
+          // do not bubble drag from the back shape
+          // because we already "drag" whole transformer
+          // so we don't want to trigger drag twice on transformer
           back.on('dragstart', (e) => {
               e.cancelBubble = true;
           });
@@ -8287,6 +14940,7 @@
           back.on('dragend', (e) => {
               e.cancelBubble = true;
           });
+          // force self update when we drag with shouldOverDrawWholeArea setting
           this.on('dragmove', (e) => {
               this.update();
           });
@@ -8333,10 +14987,12 @@
           if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
               return;
           }
+          // rotater is working very differently, so do it first
           if (this._movingAnchorName === 'rotater') {
               var attrs = this._getNodeRect();
               x = anchorNode.x() - attrs.width / 2;
               y = -anchorNode.y() + attrs.height / 2;
+              // hor angle is changed?
               let delta = Math.atan2(-y, x) + Math.PI / 2;
               if (attrs.height < 0) {
                   delta -= Math.PI;
@@ -8604,6 +15260,10 @@
                   Util.warn('boundBoxFunc returned falsy. You should return new bound rect from it!');
               }
           }
+          // base size value doesn't really matter
+          // we just need to think about bounding boxes as transforms
+          // but how?
+          // the idea is that we have a transformed rectangle with the size of "baseSize"
           const baseSize = 10000000;
           const oldTr = new Transform();
           oldTr.translate(oldAttrs.x, oldAttrs.y);
@@ -8613,11 +15273,23 @@
           newTr.translate(newAttrs.x, newAttrs.y);
           newTr.rotate(newAttrs.rotation);
           newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
+          // now lets think we had [old transform] and n ow we have [new transform]
+          // Now, the questions is: how can we transform "parent" to go from [old transform] into [new transform]
+          // in equation it will be:
+          // [delta transform] * [old transform] = [new transform]
+          // that means that
+          // [delta transform] = [new transform] * [old transform inverted]
           const delta = newTr.multiply(oldTr.invert());
           this._nodes.forEach((node) => {
               var _a;
+              // for each node we have the same [delta transform]
+              // the equations is
+              // [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform]
+              // and we need to find [new local transform]
+              // [new local] = [parent inverted] * [delta] * [parent] * [old local]
               const parentTransform = node.getParent().getAbsoluteTransform();
               const localTransform = node.getTransform().copy();
+              // skip offset:
               localTransform.translate(node.offsetX(), node.offsetY());
               const newLocalTransform = new Transform();
               newLocalTransform
@@ -8636,6 +15308,12 @@
           this.update();
           this.getLayer().batchDraw();
       }
+      /**
+       * force update of Konva.Transformer.
+       * Use it when you updated attached Konva.Group and now you need to reset transformer size
+       * @method
+       * @name Konva.Transformer#forceUpdate
+       */
       forceUpdate() {
           this._resetTransformCache();
           this.update();
@@ -8735,9 +15413,21 @@
           });
           (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw();
       }
+      /**
+       * determine if transformer is in active transform
+       * @method
+       * @name Konva.Transformer#isTransforming
+       * @returns {Boolean}
+       */
       isTransforming() {
           return this._transforming;
       }
+      /**
+       * Stop active transform action
+       * @method
+       * @name Konva.Transformer#stopTransform
+       * @returns {Boolean}
+       */
       stopTransform() {
           if (this._transforming) {
               this._removeEvents();
@@ -8756,6 +15446,8 @@
           this._removeEvents();
           return this;
       }
+      // do not work as a container
+      // we will recreate inner nodes manually
       toObject() {
           return Node.prototype.toObject.call(this);
       }
@@ -8778,30 +15470,358 @@
   }
   Transformer.prototype.className = 'Transformer';
   _registerNode(Transformer);
+  /**
+   * get/set enabled handlers
+   * @name Konva.Transformer#enabledAnchors
+   * @method
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get list of handlers
+   * var enabledAnchors = transformer.enabledAnchors();
+   *
+   * // set handlers
+   * transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+   */
   Factory.addGetterSetter(Transformer, 'enabledAnchors', ANCHORS_NAMES, validateAnchors);
+  /**
+   * get/set flip enabled
+   * @name Konva.Transformer#flipEnabled
+   * @method
+   * @param {Boolean} flag
+   * @returns {Boolean}
+   * @example
+   * // get flip enabled property
+   * var flipEnabled = transformer.flipEnabled();
+   *
+   * // set flip enabled property
+   * transformer.flipEnabled(false);
+   */
   Factory.addGetterSetter(Transformer, 'flipEnabled', true, getBooleanValidator());
+  /**
+   * get/set resize ability. If false it will automatically hide resizing handlers
+   * @name Konva.Transformer#resizeEnabled
+   * @method
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var resizeEnabled = transformer.resizeEnabled();
+   *
+   * // set
+   * transformer.resizeEnabled(false);
+   */
   Factory.addGetterSetter(Transformer, 'resizeEnabled', true);
+  /**
+   * get/set anchor size. Default is 10
+   * @name Konva.Transformer#validateAnchors
+   * @method
+   * @param {Number} 10
+   * @returns {Number}
+   * @example
+   * // get
+   * var anchorSize = transformer.anchorSize();
+   *
+   * // set
+   * transformer.anchorSize(20)
+   */
   Factory.addGetterSetter(Transformer, 'anchorSize', 10, getNumberValidator());
+  /**
+   * get/set ability to rotate.
+   * @name Konva.Transformer#rotateEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var rotateEnabled = transformer.rotateEnabled();
+   *
+   * // set
+   * transformer.rotateEnabled(false);
+   */
   Factory.addGetterSetter(Transformer, 'rotateEnabled', true);
+  /**
+   * get/set rotation snaps angles.
+   * @name Konva.Transformer#rotationSnaps
+   * @method
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var rotationSnaps = transformer.rotationSnaps();
+   *
+   * // set
+   * transformer.rotationSnaps([0, 90, 180, 270]);
+   */
   Factory.addGetterSetter(Transformer, 'rotationSnaps', []);
+  /**
+   * get/set distance for rotation handler
+   * @name Konva.Transformer#rotateAnchorOffset
+   * @method
+   * @param {Number} offset
+   * @returns {Number}
+   * @example
+   * // get
+   * var rotateAnchorOffset = transformer.rotateAnchorOffset();
+   *
+   * // set
+   * transformer.rotateAnchorOffset(100);
+   */
   Factory.addGetterSetter(Transformer, 'rotateAnchorOffset', 50, getNumberValidator());
+  /**
+   * get/set distance for rotation tolerance
+   * @name Konva.Transformer#rotationSnapTolerance
+   * @method
+   * @param {Number} tolerance
+   * @returns {Number}
+   * @example
+   * // get
+   * var rotationSnapTolerance = transformer.rotationSnapTolerance();
+   *
+   * // set
+   * transformer.rotationSnapTolerance(100);
+   */
   Factory.addGetterSetter(Transformer, 'rotationSnapTolerance', 5, getNumberValidator());
+  /**
+   * get/set visibility of border
+   * @name Konva.Transformer#borderEnabled
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderEnabled = transformer.borderEnabled();
+   *
+   * // set
+   * transformer.borderEnabled(false);
+   */
   Factory.addGetterSetter(Transformer, 'borderEnabled', true);
+  /**
+   * get/set anchor stroke color
+   * @name Konva.Transformer#anchorStroke
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorStroke = transformer.anchorStroke();
+   *
+   * // set
+   * transformer.anchorStroke('red');
+   */
   Factory.addGetterSetter(Transformer, 'anchorStroke', 'rgb(0, 161, 255)');
+  /**
+   * get/set anchor stroke width
+   * @name Konva.Transformer#anchorStrokeWidth
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorStrokeWidth = transformer.anchorStrokeWidth();
+   *
+   * // set
+   * transformer.anchorStrokeWidth(3);
+   */
   Factory.addGetterSetter(Transformer, 'anchorStrokeWidth', 1, getNumberValidator());
+  /**
+   * get/set anchor fill color
+   * @name Konva.Transformer#anchorFill
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorFill = transformer.anchorFill();
+   *
+   * // set
+   * transformer.anchorFill('red');
+   */
   Factory.addGetterSetter(Transformer, 'anchorFill', 'white');
+  /**
+   * get/set anchor corner radius
+   * @name Konva.Transformer#anchorCornerRadius
+   * @method
+   * @param {Number} enabled
+   * @returns {Number}
+   * @example
+   * // get
+   * var anchorCornerRadius = transformer.anchorCornerRadius();
+   *
+   * // set
+   * transformer.anchorCornerRadius(3);
+   */
   Factory.addGetterSetter(Transformer, 'anchorCornerRadius', 0, getNumberValidator());
+  /**
+   * get/set border stroke color
+   * @name Konva.Transformer#borderStroke
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderStroke = transformer.borderStroke();
+   *
+   * // set
+   * transformer.borderStroke('red');
+   */
   Factory.addGetterSetter(Transformer, 'borderStroke', 'rgb(0, 161, 255)');
+  /**
+   * get/set border stroke width
+   * @name Konva.Transformer#borderStrokeWidth
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderStrokeWidth = transformer.borderStrokeWidth();
+   *
+   * // set
+   * transformer.borderStrokeWidth(3);
+   */
   Factory.addGetterSetter(Transformer, 'borderStrokeWidth', 1, getNumberValidator());
+  /**
+   * get/set border dash array
+   * @name Konva.Transformer#borderDash
+   * @method
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderDash = transformer.borderDash();
+   *
+   * // set
+   * transformer.borderDash([2, 2]);
+   */
   Factory.addGetterSetter(Transformer, 'borderDash');
+  /**
+   * get/set should we keep ratio while resize anchors at corners
+   * @name Konva.Transformer#keepRatio
+   * @method
+   * @param {Boolean} keepRatio
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var keepRatio = transformer.keepRatio();
+   *
+   * // set
+   * transformer.keepRatio(false);
+   */
   Factory.addGetterSetter(Transformer, 'keepRatio', true);
+  /**
+   * get/set should we resize relative to node's center?
+   * @name Konva.Transformer#centeredScaling
+   * @method
+   * @param {Boolean} centeredScaling
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var centeredScaling = transformer.centeredScaling();
+   *
+   * // set
+   * transformer.centeredScaling(true);
+   */
   Factory.addGetterSetter(Transformer, 'centeredScaling', false);
+  /**
+   * get/set should we think about stroke while resize? Good to use when a shape has strokeScaleEnabled = false
+   * default is false
+   * @name Konva.Transformer#ignoreStroke
+   * @method
+   * @param {Boolean} ignoreStroke
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var ignoreStroke = transformer.ignoreStroke();
+   *
+   * // set
+   * transformer.ignoreStroke(true);
+   */
   Factory.addGetterSetter(Transformer, 'ignoreStroke', false);
+  /**
+   * get/set padding
+   * @name Konva.Transformer#padding
+   * @method
+   * @param {Number} padding
+   * @returns {Number}
+   * @example
+   * // get
+   * var padding = transformer.padding();
+   *
+   * // set
+   * transformer.padding(10);
+   */
   Factory.addGetterSetter(Transformer, 'padding', 0, getNumberValidator());
   Factory.addGetterSetter(Transformer, 'node');
+  /**
+   * get/set attached nodes of the Transformer. Transformer will adapt to their size and listen to their events
+   * @method
+   * @name Konva.Transformer#nodes
+   * @returns {Konva.Node}
+   * @example
+   * // get
+   * const nodes = transformer.nodes();
+   *
+   * // set
+   * transformer.nodes([rect, circle]);
+   *
+   * // push new item:
+   * const oldNodes = transformer.nodes();
+   * const newNodes = oldNodes.concat([newShape]);
+   * // it is important to set new array instance (and concat method above will create it)
+   * transformer.nodes(newNodes);
+   */
   Factory.addGetterSetter(Transformer, 'nodes');
+  /**
+   * get/set bounding box function. **IMPORTANT!** boundBondFunc operates in absolute coordinates.
+   * @name Konva.Transformer#boundBoxFunc
+   * @method
+   * @param {Function} func
+   * @returns {Function}
+   * @example
+   * // get
+   * var boundBoxFunc = transformer.boundBoxFunc();
+   *
+   * // set
+   * transformer.boundBoxFunc(function(oldBox, newBox) {
+   *   // width and height of the boxes are corresponding to total absolute width and height of all nodes combined
+   *   // so it includes scale of the node.
+   *   if (newBox.width > 200) {
+   *     return oldBox;
+   *   }
+   *   return newBox;
+   * });
+   */
   Factory.addGetterSetter(Transformer, 'boundBoxFunc');
+  /**
+   * using this setting you can drag transformer group by dragging empty space between attached nodes
+   * shouldOverdrawWholeArea = true may temporary disable all events on attached nodes
+   * @name Konva.Transformer#shouldOverdrawWholeArea
+   * @method
+   * @param {Boolean} shouldOverdrawWholeArea
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var shouldOverdrawWholeArea = transformer.shouldOverdrawWholeArea();
+   *
+   * // set
+   * transformer.shouldOverdrawWholeArea(true);
+   */
   Factory.addGetterSetter(Transformer, 'shouldOverdrawWholeArea', false);
+  /**
+   * If you have just one attached node to Transformer it will set its initial rotation to the rotation of that node.
+   * In some cases you may need to set a different rotation.
+   * @name Konva.Transformer#useSingleNodeRotation
+   * @method
+   * @param {Boolean} useSingleNodeRotation
+   * @returns {Boolean}
+   * @example
+   * // set flag to false
+   * transformer.useSingleNodeRotation(false);
+   * // attach a shape
+   * transformer.nodes([shape]);
+   * transformer.rotation(45);
+   * transformer.update();
+   */
   Factory.addGetterSetter(Transformer, 'useSingleNodeRotation', true);
   Factory.backCompat(Transformer, {
       lineEnabled: 'borderEnabled',
@@ -8809,6 +15829,100 @@
       enabledHandlers: 'enabledAnchors',
   });
 
+  /**
+   * Wedge constructor
+   * @constructor
+   * @memberof Konva
+   * @augments Konva.Shape
+   * @param {Object} config
+   * @param {Number} config.angle in degrees
+   * @param {Number} config.radius
+   * @param {Boolean} [config.clockwise]
+   * @param {String} [config.fill] fill color
+     * @param {Image} [config.fillPatternImage] fill pattern image
+     * @param {Number} [config.fillPatternX]
+     * @param {Number} [config.fillPatternY]
+     * @param {Object} [config.fillPatternOffset] object with x and y component
+     * @param {Number} [config.fillPatternOffsetX] 
+     * @param {Number} [config.fillPatternOffsetY] 
+     * @param {Object} [config.fillPatternScale] object with x and y component
+     * @param {Number} [config.fillPatternScaleX]
+     * @param {Number} [config.fillPatternScaleY]
+     * @param {Number} [config.fillPatternRotation]
+     * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat".  The default is "no-repeat"
+     * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientStartPointX]
+     * @param {Number} [config.fillLinearGradientStartPointY]
+     * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillLinearGradientEndPointX]
+     * @param {Number} [config.fillLinearGradientEndPointY]
+     * @param {Array} [config.fillLinearGradientColorStops] array of color stops
+     * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientStartPointX]
+     * @param {Number} [config.fillRadialGradientStartPointY]
+     * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component
+     * @param {Number} [config.fillRadialGradientEndPointX] 
+     * @param {Number} [config.fillRadialGradientEndPointY] 
+     * @param {Number} [config.fillRadialGradientStartRadius]
+     * @param {Number} [config.fillRadialGradientEndRadius]
+     * @param {Array} [config.fillRadialGradientColorStops] array of color stops
+     * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill.  The default value is true
+     * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern.  The default value is color.  The fillPriority property makes it really easy to toggle between different fill types.  For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
+     * @param {String} [config.stroke] stroke color
+     * @param {Number} [config.strokeWidth] stroke width
+     * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false.
+     * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas.  The default is "auto" - equals to strokeWidth
+     * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region.  The default is true
+     * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas.  The default is true
+     * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke.  The default is true
+     * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale.  The default is true
+     * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke.  The default value is true
+     * @param {String} [config.lineJoin] can be miter, round, or bevel.  The default
+     *  is miter
+     * @param {String} [config.lineCap] can be butt, round, or square.  The default
+     *  is butt
+     * @param {String} [config.shadowColor]
+     * @param {Number} [config.shadowBlur]
+     * @param {Object} [config.shadowOffset] object with x and y component
+     * @param {Number} [config.shadowOffsetX]
+     * @param {Number} [config.shadowOffsetY]
+     * @param {Number} [config.shadowOpacity] shadow opacity.  Can be any real number
+     *  between 0 and 1
+     * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow.  The default value is true
+     * @param {Array} [config.dash]
+     * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray.  The default value is true
+
+   * @param {Number} [config.x]
+     * @param {Number} [config.y]
+     * @param {Number} [config.width]
+     * @param {Number} [config.height]
+     * @param {Boolean} [config.visible]
+     * @param {Boolean} [config.listening] whether or not the node is listening for events
+     * @param {String} [config.id] unique id
+     * @param {String} [config.name] non-unique name
+     * @param {Number} [config.opacity] determines node opacity.  Can be any number between 0 and 1
+     * @param {Object} [config.scale] set scale
+     * @param {Number} [config.scaleX] set scale x
+     * @param {Number} [config.scaleY] set scale y
+     * @param {Number} [config.rotation] rotation in degrees
+     * @param {Object} [config.offset] offset from center point and rotation point
+     * @param {Number} [config.offsetX] set offset x
+     * @param {Number} [config.offsetY] set offset y
+     * @param {Boolean} [config.draggable] makes the node draggable.  When stages are draggable, you can drag and drop
+     *  the entire stage by dragging any portion of the stage
+     * @param {Number} [config.dragDistance]
+     * @param {Function} [config.dragBoundFunc]
+   * @example
+   * // draw a wedge that's pointing downwards
+   * var wedge = new Konva.Wedge({
+   *   radius: 40,
+   *   fill: 'red',
+   *   stroke: 'black'
+   *   strokeWidth: 5,
+   *   angleDeg: 60,
+   *   rotationDeg: -120
+   * });
+   */
   class Wedge extends Shape {
       _sceneFunc(context) {
           context.beginPath();
@@ -8834,8 +15948,50 @@
   Wedge.prototype._centroid = true;
   Wedge.prototype._attrsAffectingSize = ['radius'];
   _registerNode(Wedge);
+  /**
+   * get/set radius
+   * @name Konva.Wedge#radius
+   * @method
+   * @param {Number} radius
+   * @returns {Number}
+   * @example
+   * // get radius
+   * var radius = wedge.radius();
+   *
+   * // set radius
+   * wedge.radius(10);
+   */
   Factory.addGetterSetter(Wedge, 'radius', 0, getNumberValidator());
+  /**
+   * get/set angle in degrees
+   * @name Konva.Wedge#angle
+   * @method
+   * @param {Number} angle
+   * @returns {Number}
+   * @example
+   * // get angle
+   * var angle = wedge.angle();
+   *
+   * // set angle
+   * wedge.angle(20);
+   */
   Factory.addGetterSetter(Wedge, 'angle', 0, getNumberValidator());
+  /**
+   * get/set clockwise flag
+   * @name Konva.Wedge#clockwise
+   * @method
+   * @param {Number} clockwise
+   * @returns {Number}
+   * @example
+   * // get clockwise flag
+   * var clockwise = wedge.clockwise();
+   *
+   * // draw wedge counter-clockwise
+   * wedge.clockwise(false);
+   *
+   * // draw wedge clockwise
+   * wedge.clockwise(true);
+   */
   Factory.addGetterSetter(Wedge, 'clockwise', false);
   Factory.backCompat(Wedge, {
       angleDeg: 'angle',
@@ -8843,6 +15999,50 @@
       setAngleDeg: 'setAngle',
   });
 
+  /*
+   the Gauss filter
+   master repo: https://github.com/pavelpower/kineticjsGaussFilter
+  */
+  /*
+
+       StackBlur - a fast almost Gaussian Blur For Canvas
+
+       Version:   0.5
+       Author:    Mario Klingemann
+       Contact:   mario@quasimondo.com
+       Website:   http://www.quasimondo.com/StackBlurForCanvas
+       Twitter:   @quasimondo
+
+       In case you find this class useful - especially in commercial projects -
+       I am not totally unhappy for a small donation to my PayPal account
+       mario@quasimondo.de
+
+       Or support me on flattr:
+       https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
+
+       Copyright (c) 2010 Mario Klingemann
+
+       Permission is hereby granted, free of charge, to any person
+       obtaining a copy of this software and associated documentation
+       files (the "Software"), to deal in the Software without
+       restriction, including without limitation the rights to use,
+       copy, modify, merge, publish, distribute, sublicense, and/or sell
+       copies of the Software, and to permit persons to whom the
+       Software is furnished to do so, subject to the following
+       conditions:
+
+       The above copyright notice and this permission notice shall be
+       included in all copies or substantial portions of the Software.
+
+       THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+       EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+       OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+       NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+       HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+       WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+       FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+       OTHER DEALINGS IN THE SOFTWARE.
+       */
   function BlurStack() {
       this.r = 0;
       this.g = 0;
@@ -9530,24 +16730,74 @@
           }
       }
   }
+  /**
+   * Blur Filter
+   * @function
+   * @name Blur
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Blur]);
+   * node.blurRadius(10);
+   */
   const Blur = function Blur(imageData) {
       var radius = Math.round(this.blurRadius());
       if (radius > 0) {
           filterGaussBlurRGBA(imageData, radius);
       }
   };
-  Factory.addGetterSetter(Node, 'blurRadius', 0, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'blurRadius', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set blur radius. Use with {@link Konva.Filters.Blur} filter
+   * @name Konva.Node#blurRadius
+   * @method
+   * @param {Integer} radius
+   * @returns {Integer}
+   */
 
+  /**
+   * Brighten Filter.
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Brighten]);
+   * node.brightness(0.8);
+   */
   const Brighten = function (imageData) {
       var brightness = this.brightness() * 255, data = imageData.data, len = data.length, i;
       for (i = 0; i < len; i += 4) {
+          // red
           data[i] += brightness;
+          // green
           data[i + 1] += brightness;
+          // blue
           data[i + 2] += brightness;
       }
   };
-  Factory.addGetterSetter(Node, 'brightness', 0, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'brightness', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set filter brightness.  The brightness is a number between -1 and 1.&nbsp; Positive values
+   *  brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter.
+   * @name Konva.Node#brightness
+   * @method
 
+   * @param {Number} brightness value between -1 and 1
+   * @returns {Number}
+   */
+
+  /**
+   * Contrast Filter.
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Contrast]);
+   * node.contrast(10);
+   */
   const Contrast = function (imageData) {
       var adjust = Math.pow((this.contrast() + 100) / 100, 2);
       var data = imageData.data, nPixels = data.length, red = 150, green = 150, blue = 150, i;
@@ -9555,16 +16805,19 @@
           red = data[i];
           green = data[i + 1];
           blue = data[i + 2];
+          //Red channel
           red /= 255;
           red -= 0.5;
           red *= adjust;
           red += 0.5;
           red *= 255;
+          //Green channel
           green /= 255;
           green -= 0.5;
           green *= adjust;
           green += 0.5;
           green *= 255;
+          //Blue channel
           blue /= 255;
           blue -= 0.5;
           blue *= adjust;
@@ -9578,9 +16831,37 @@
           data[i + 2] = blue;
       }
   };
+  /**
+   * get/set filter contrast.  The contrast is a number between -100 and 100.
+   * Use with {@link Konva.Filters.Contrast} filter.
+   * @name Konva.Node#contrast
+   * @method
+   * @param {Number} contrast value between -100 and 100
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'contrast', 0, getNumberValidator(), Factory.afterSetFilter);
 
+  /**
+   * Emboss Filter.
+   * Pixastic Lib - Emboss filter - v0.1.0
+   * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+   * License: [http://www.pixastic.com/lib/license.txt]
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Emboss]);
+   * node.embossStrength(0.8);
+   * node.embossWhiteLevel(0.3);
+   * node.embossDirection('right');
+   * node.embossBlend(true);
+   */
   const Emboss = function (imageData) {
+      // pixastic strength is between 0 and 10.  I want it between 0 and 1
+      // pixastic greyLevel is between 0 and 255.  I want it between 0 and 1.  Also,
+      // a max value of greyLevel yields a white emboss, and the min value yields a black
+      // emboss.  Therefore, I changed greyLevel to whiteLevel
       var strength = this.embossStrength() * 10, greyLevel = this.embossWhiteLevel() * 255, direction = this.embossDirection(), blend = this.embossBlend(), dirY = 0, dirX = 0, data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4, y = h;
       switch (direction) {
           case 'top-left':
@@ -9675,28 +16956,76 @@
       } while (--y);
   };
   Factory.addGetterSetter(Node, 'embossStrength', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.
+   * @name Konva.Node#embossStrength
+   * @method
+   * @param {Number} level between 0 and 1.  Default is 0.5
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'embossWhiteLevel', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.
+   * @name Konva.Node#embossWhiteLevel
+   * @method
+   * @param {Number} embossWhiteLevel between 0 and 1.  Default is 0.5
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'embossDirection', 'top-left', null, Factory.afterSetFilter);
-  Factory.addGetterSetter(Node, 'embossBlend', false, null, Factory.afterSetFilter);
+  /**
+   * get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.
+   * @name Konva.Node#embossDirection
+   * @method
+   * @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
+   *   The default is top-left
+   * @returns {String}
+   */
+  Factory.addGetterSetter(Node, 'embossBlend', false, null, Factory.afterSetFilter);
+  /**
+   * get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.
+   * @name Konva.Node#embossBlend
+   * @method
+   * @param {Boolean} embossBlend
+   * @returns {Boolean}
+   */
 
   function remap(fromValue, fromMin, fromMax, toMin, toMax) {
+      // Compute the range of the data
       var fromRange = fromMax - fromMin, toRange = toMax - toMin, toValue;
+      // If either range is 0, then the value can only be mapped to 1 value
       if (fromRange === 0) {
           return toMin + toRange / 2;
       }
       if (toRange === 0) {
           return toMin;
       }
+      // (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
       toValue = (fromValue - fromMin) / fromRange;
       toValue = toRange * toValue + toMin;
       return toValue;
   }
+  /**
+   * Enhance Filter. Adjusts the colors so that they span the widest
+   *  possible range (ie 0-255). Performs w*h pixel reads and w*h pixel
+   *  writes.
+   * @function
+   * @name Enhance
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Enhance]);
+   * node.enhance(0.4);
+   */
   const Enhance = function (imageData) {
       var data = imageData.data, nSubPixels = data.length, rMin = data[0], rMax = rMin, r, gMin = data[1], gMax = gMin, g, bMin = data[2], bMax = bMin, b, i;
+      // If we are not enhancing anything - don't do any computation
       var enhanceAmount = this.enhance();
       if (enhanceAmount === 0) {
           return;
       }
+      // 1st Pass - find the min and max for each channel:
       for (i = 0; i < nSubPixels; i += 4) {
           r = data[i + 0];
           if (r < rMin) {
@@ -9719,7 +17048,11 @@
           else if (b > bMax) {
               bMax = b;
           }
+          //a = data[i + 3];
+          //if (a < aMin) { aMin = a; } else
+          //if (a > aMax) { aMax = a; }
       }
+      // If there is only 1 level - don't remap
       if (rMax === rMin) {
           rMax = 255;
           rMin = 0;
@@ -9733,6 +17066,7 @@
           bMin = 0;
       }
       var rMid, rGoalMax, rGoalMin, gMid, gGoalMax, gGoalMin, bMid, bGoalMax, bGoalMin;
+      // If the enhancement is positive - stretch the histogram
       if (enhanceAmount > 0) {
           rGoalMax = rMax + enhanceAmount * (255 - rMax);
           rGoalMin = rMin - enhanceAmount * (rMin - 0);
@@ -9740,6 +17074,7 @@
           gGoalMin = gMin - enhanceAmount * (gMin - 0);
           bGoalMax = bMax + enhanceAmount * (255 - bMax);
           bGoalMin = bMin - enhanceAmount * (bMin - 0);
+          // If the enhancement is negative -   compress the histogram
       }
       else {
           rMid = (rMax + rMin) * 0.5;
@@ -9752,30 +17087,94 @@
           bGoalMax = bMax + enhanceAmount * (bMax - bMid);
           bGoalMin = bMin + enhanceAmount * (bMin - bMid);
       }
+      // Pass 2 - remap everything, except the alpha
       for (i = 0; i < nSubPixels; i += 4) {
           data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
           data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
           data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
+          //data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);
       }
   };
+  /**
+   * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. -1 to 1 values
+   * @name Konva.Node#enhance
+   * @method
+   * @param {Float} amount
+   * @returns {Float}
+   */
   Factory.addGetterSetter(Node, 'enhance', 0, getNumberValidator(), Factory.afterSetFilter);
 
+  /**
+   * Grayscale Filter
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Grayscale]);
+   */
   const Grayscale = function (imageData) {
       var data = imageData.data, len = data.length, i, brightness;
       for (i = 0; i < len; i += 4) {
           brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+          // red
           data[i] = brightness;
+          // green
           data[i + 1] = brightness;
+          // blue
           data[i + 2] = brightness;
       }
   };
 
   Factory.addGetterSetter(Node, 'hue', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name Konva.Node#hue
+   * @method
+   * @param {Number} hue value between 0 and 359
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'saturation', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name Konva.Node#saturation
+   * @method
+   * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'luminance', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.
+   * @name Konva.Node#luminance
+   * @method
+   * @param {Number} value from -1 to 1
+   * @returns {Number}
+   */
+  /**
+   * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * image.filters([Konva.Filters.HSL]);
+   * image.luminance(0.2);
+   */
   const HSL = function (imageData) {
       var data = imageData.data, nPixels = data.length, v = 1, s = Math.pow(2, this.saturation()), h = Math.abs(this.hue() + 360) % 360, l = this.luminance() * 127, i;
+      // Basis for the technique used:
+      // http://beesbuzz.biz/code/hsv_color_transforms.php
+      // V is the value multiplier (1 for none, 2 for double, 0.5 for half)
+      // S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
+      // H is the hue shift in degrees (0 to 360)
+      // vsu = V*S*cos(H*PI/180);
+      // vsw = V*S*sin(H*PI/180);
+      //[ .299V+.701vsu+.168vsw    .587V-.587vsu+.330vsw    .114V-.114vsu-.497vsw ] [R]
+      //[ .299V-.299vsu-.328vsw    .587V+.413vsu+.035vsw    .114V-.114vsu+.292vsw ]*[G]
+      //[ .299V-.300vsu+1.25vsw    .587V-.588vsu-1.05vsw    .114V+.886vsu-.203vsw ] [B]
+      // Precompute the values in the matrix:
       var vsu = v * s * Math.cos((h * Math.PI) / 180), vsw = v * s * Math.sin((h * Math.PI) / 180);
+      // (result spot)(source spot)
       var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw, rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw, rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
       var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw, gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw, gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
       var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw, bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw, bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
@@ -9788,13 +17187,36 @@
           data[i + 0] = rr * r + rg * g + rb * b + l;
           data[i + 1] = gr * r + gg * g + gb * b + l;
           data[i + 2] = br * r + bg * g + bb * b + l;
-          data[i + 3] = a;
+          data[i + 3] = a; // alpha
       }
   };
 
+  /**
+   * HSV Filter. Adjusts the hue, saturation and value
+   * @function
+   * @name HSV
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * image.filters([Konva.Filters.HSV]);
+   * image.value(200);
+   */
   const HSV = function (imageData) {
       var data = imageData.data, nPixels = data.length, v = Math.pow(2, this.value()), s = Math.pow(2, this.saturation()), h = Math.abs(this.hue() + 360) % 360, i;
+      // Basis for the technique used:
+      // http://beesbuzz.biz/code/hsv_color_transforms.php
+      // V is the value multiplier (1 for none, 2 for double, 0.5 for half)
+      // S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)
+      // H is the hue shift in degrees (0 to 360)
+      // vsu = V*S*cos(H*PI/180);
+      // vsw = V*S*sin(H*PI/180);
+      //[ .299V+.701vsu+.168vsw    .587V-.587vsu+.330vsw    .114V-.114vsu-.497vsw ] [R]
+      //[ .299V-.299vsu-.328vsw    .587V+.413vsu+.035vsw    .114V-.114vsu+.292vsw ]*[G]
+      //[ .299V-.300vsu+1.25vsw    .587V-.588vsu-1.05vsw    .114V+.886vsu-.203vsw ] [B]
+      // Precompute the values in the matrix:
       var vsu = v * s * Math.cos((h * Math.PI) / 180), vsw = v * s * Math.sin((h * Math.PI) / 180);
+      // (result spot)(source spot)
       var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw, rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw, rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
       var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw, gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw, gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
       var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw, bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw, bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
@@ -9807,31 +17229,84 @@
           data[i + 0] = rr * r + rg * g + rb * b;
           data[i + 1] = gr * r + gg * g + gb * b;
           data[i + 2] = br * r + bg * g + bb * b;
-          data[i + 3] = a;
+          data[i + 3] = a; // alpha
       }
   };
   Factory.addGetterSetter(Node, 'hue', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name Konva.Node#hue
+   * @method
+   * @param {Number} hue value between 0 and 359
+   * @returns {Number}
+   */
   Factory.addGetterSetter(Node, 'saturation', 0, getNumberValidator(), Factory.afterSetFilter);
-  Factory.addGetterSetter(Node, 'value', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.
+   * @name Konva.Node#saturation
+   * @method
+   * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
+   * @returns {Number}
+   */
+  Factory.addGetterSetter(Node, 'value', 0, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set hsv value. Use with {@link Konva.Filters.HSV} filter.
+   * @name Konva.Node#value
+   * @method
+   * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
+   * @returns {Number}
+   */
 
+  /**
+   * Invert Filter
+   * @function
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Invert]);
+   */
   const Invert = function (imageData) {
       var data = imageData.data, len = data.length, i;
       for (i = 0; i < len; i += 4) {
+          // red
           data[i] = 255 - data[i];
+          // green
           data[i + 1] = 255 - data[i + 1];
+          // blue
           data[i + 2] = 255 - data[i + 2];
       }
   };
 
+  /*
+   * ToPolar Filter. Converts image data to polar coordinates. Performs
+   *  w*h*4 pixel reads and w*h pixel writes. The r axis is placed along
+   *  what would be the y axis and the theta axis along the x axis.
+   * @function
+   * @author ippo615
+   * @memberof Konva.Filters
+   * @param {ImageData} src, the source image data (what will be transformed)
+   * @param {ImageData} dst, the destination image data (where it will be saved)
+   * @param {Object} opt
+   * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
+   *  default is in the middle
+   * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
+   *  default is in the middle
+   */
   var ToPolar = function (src, dst, opt) {
       var srcPixels = src.data, dstPixels = dst.data, xSize = src.width, ySize = src.height, xMid = opt.polarCenterX || xSize / 2, yMid = opt.polarCenterY || ySize / 2, i, x, y, r = 0, g = 0, b = 0, a = 0;
+      // Find the largest radius
       var rad, rMax = Math.sqrt(xMid * xMid + yMid * yMid);
       x = xSize - xMid;
       y = ySize - yMid;
       rad = Math.sqrt(x * x + y * y);
       rMax = rad > rMax ? rad : rMax;
+      // We'll be uisng y as the radius, and x as the angle (theta=t)
       var rSize = ySize, tSize = xSize, radius, theta;
+      // We want to cover all angles (0-360) and we need to convert to
+      // radians (*PI/180)
       var conversion = ((360 / tSize) * Math.PI) / 180, sin, cos;
+      // var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
       for (theta = 0; theta < tSize; theta += 1) {
           sin = Math.sin(theta * conversion);
           cos = Math.cos(theta * conversion);
@@ -9843,6 +17318,8 @@
               g = srcPixels[i + 1];
               b = srcPixels[i + 2];
               a = srcPixels[i + 3];
+              // Store it
+              //i = (theta * xSize  +  radius) * 4;
               i = (theta + radius * xSize) * 4;
               dstPixels[i + 0] = r;
               dstPixels[i + 1] = g;
@@ -9851,14 +17328,36 @@
           }
       }
   };
+  /*
+   * FromPolar Filter. Converts image data from polar coordinates back to rectangular.
+   *  Performs w*h*4 pixel reads and w*h pixel writes.
+   * @function
+   * @author ippo615
+   * @memberof Konva.Filters
+   * @param {ImageData} src, the source image data (what will be transformed)
+   * @param {ImageData} dst, the destination image data (where it will be saved)
+   * @param {Object} opt
+   * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,
+   *  default is in the middle
+   * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,
+   *  default is in the middle
+   * @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,
+   *  0 is no rotation, 360 degrees is a full rotation
+   */
   var FromPolar = function (src, dst, opt) {
       var srcPixels = src.data, dstPixels = dst.data, xSize = src.width, ySize = src.height, xMid = opt.polarCenterX || xSize / 2, yMid = opt.polarCenterY || ySize / 2, i, x, y, dx, dy, r = 0, g = 0, b = 0, a = 0;
+      // Find the largest radius
       var rad, rMax = Math.sqrt(xMid * xMid + yMid * yMid);
       x = xSize - xMid;
       y = ySize - yMid;
       rad = Math.sqrt(x * x + y * y);
       rMax = rad > rMax ? rad : rMax;
+      // We'll be uisng x as the radius, and y as the angle (theta=t)
       var rSize = ySize, tSize = xSize, radius, theta, phaseShift = opt.polarRotation || 0;
+      // We need to convert to degrees and we need to make sure
+      // it's between (0-360)
+      // var conversion = tSize/360*180/Math.PI;
+      //var conversion = tSize/360*180/Math.PI;
       var x1, y1;
       for (x = 0; x < xSize; x += 1) {
           for (y = 0; y < ySize; y += 1) {
@@ -9874,6 +17373,7 @@
               g = srcPixels[i + 1];
               b = srcPixels[i + 2];
               a = srcPixels[i + 3];
+              // Store it
               i = (y * xSize + x) * 4;
               dstPixels[i + 0] = r;
               dstPixels[i + 1] = g;
@@ -9882,6 +17382,21 @@
           }
       }
   };
+  //Konva.Filters.ToPolar = Util._FilterWrapDoubleBuffer(ToPolar);
+  //Konva.Filters.FromPolar = Util._FilterWrapDoubleBuffer(FromPolar);
+  // create a temporary canvas for working - shared between multiple calls
+  /*
+   * Kaleidoscope Filter.
+   * @function
+   * @name Kaleidoscope
+   * @author ippo615
+   * @memberof Konva.Filters
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Kaleidoscope]);
+   * node.kaleidoscopePower(3);
+   * node.kaleidoscopeAngle(45);
+   */
   const Kaleidoscope = function (imageData) {
       var xSize = imageData.width, ySize = imageData.height;
       var x, y, xoff, i, r, g, b, a, srcPos, dstPos;
@@ -9891,16 +17406,20 @@
       if (power < 1) {
           return;
       }
+      // Work with our shared buffer canvas
       var tempCanvas = Util.createCanvasElement();
       tempCanvas.width = xSize;
       tempCanvas.height = ySize;
       var scratchData = tempCanvas
           .getContext('2d')
           .getImageData(0, 0, xSize, ySize);
+      // Convert thhe original to polar coordinates
       ToPolar(imageData, scratchData, {
           polarCenterX: xSize / 2,
           polarCenterY: ySize / 2,
       });
+      // Determine how big each section will be, if it's too small
+      // make it bigger
       var minSectionSize = xSize / Math.pow(2, power);
       while (minSectionSize <= 8) {
           minSectionSize = minSectionSize * 2;
@@ -9908,6 +17427,9 @@
       }
       minSectionSize = Math.ceil(minSectionSize);
       var sectionSize = minSectionSize;
+      // Copy the offset region to 0
+      // Depending on the size of filter and location of the offset we may need
+      // to copy the section backwards to prevent it from rewriting itself
       var xStart = 0, xEnd = sectionSize, xDelta = 1;
       if (offset + minSectionSize > xSize) {
           xStart = sectionSize;
@@ -9929,6 +17451,7 @@
               scratchData.data[dstPos + 3] = a;
           }
       }
+      // Perform the actual effect
       for (y = 0; y < ySize; y += 1) {
           sectionSize = Math.floor(minSectionSize);
           for (i = 0; i < power; i += 1) {
@@ -9947,9 +17470,24 @@
               sectionSize *= 2;
           }
       }
+      // Convert back from polar coordinates
       FromPolar(scratchData, imageData, { polarRotation: 0 });
   };
+  /**
+   * get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter.
+   * @name Konva.Node#kaleidoscopePower
+   * @method
+   * @param {Integer} power of kaleidoscope
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'kaleidoscopePower', 2, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter.
+   * @name Konva.Node#kaleidoscopeAngle
+   * @method
+   * @param {Integer} degrees
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'kaleidoscopeAngle', 0, getNumberValidator(), Factory.afterSetFilter);
 
   function pixelAt(idata, x, y) {
@@ -9985,7 +17523,9 @@
           rgbDistance(rgbv_ne, rgbv_se) < thres &&
           rgbDistance(rgbv_se, rgbv_so) < thres &&
           rgbDistance(rgbv_so, rgbv_no) < thres) {
+          // Mean color
           var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
+          // Mask based on color distance
           var mask = [];
           for (var i = 0; i < idata.width * idata.height; i++) {
               var d = rgbDistance(mean, [
@@ -10078,18 +17618,46 @@
       }
       return maskResult;
   }
+  /**
+   * Mask Filter
+   * @function
+   * @name Mask
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Mask]);
+   * node.threshold(200);
+   */
   const Mask = function (imageData) {
+      // Detect pixels close to the background color
       var threshold = this.threshold(), mask = backgroundMask(imageData, threshold);
       if (mask) {
+          // Erode
           mask = erodeMask(mask, imageData.width, imageData.height);
+          // Dilate
           mask = dilateMask(mask, imageData.width, imageData.height);
+          // Gradient
           mask = smoothEdgeMask(mask, imageData.width, imageData.height);
+          // Apply mask
           applyMask(imageData, mask);
       }
       return imageData;
   };
   Factory.addGetterSetter(Node, 'threshold', 0, getNumberValidator(), Factory.afterSetFilter);
 
+  /**
+   * Noise Filter. Randomly adds or substracts to the color channels
+   * @function
+   * @name Noise
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Noise]);
+   * node.noise(0.8);
+   */
   const Noise = function (imageData) {
       var amount = this.noise() * 255, data = imageData.data, nPixels = data.length, half = amount / 2, i;
       for (i = 0; i < nPixels; i += 4) {
@@ -10098,24 +17666,50 @@
           data[i + 2] += half - 2 * half * Math.random();
       }
   };
-  Factory.addGetterSetter(Node, 'noise', 0.2, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'noise', 0.2, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set noise amount.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
+   * @name Konva.Node#noise
+   * @method
+   * @param {Number} noise
+   * @returns {Number}
+   */
 
+  /*eslint-disable max-depth */
+  /**
+   * Pixelate Filter. Averages groups of pixels and redraws
+   *  them as larger pixels
+   * @function
+   * @name Pixelate
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Pixelate]);
+   * node.pixelSize(10);
+   */
   const Pixelate = function (imageData) {
-      var pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, height = imageData.height, x, y, i, red, green, blue, alpha, nBinsX = Math.ceil(width / pixelSize), nBinsY = Math.ceil(height / pixelSize), xBinStart, xBinEnd, yBinStart, yBinEnd, xBin, yBin, pixelsInBin, data = imageData.data;
+      var pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, height = imageData.height, x, y, i, 
+      //pixelsPerBin = pixelSize * pixelSize,
+      red, green, blue, alpha, nBinsX = Math.ceil(width / pixelSize), nBinsY = Math.ceil(height / pixelSize), xBinStart, xBinEnd, yBinStart, yBinEnd, xBin, yBin, pixelsInBin, data = imageData.data;
       if (pixelSize <= 0) {
           Util.error('pixelSize value can not be <= 0');
           return;
       }
       for (xBin = 0; xBin < nBinsX; xBin += 1) {
           for (yBin = 0; yBin < nBinsY; yBin += 1) {
+              // Initialize the color accumlators to 0
               red = 0;
               green = 0;
               blue = 0;
               alpha = 0;
+              // Determine which pixels are included in this bin
               xBinStart = xBin * pixelSize;
               xBinEnd = xBinStart + pixelSize;
               yBinStart = yBin * pixelSize;
               yBinEnd = yBinStart + pixelSize;
+              // Add all of the pixels to this bin!
               pixelsInBin = 0;
               for (x = xBinStart; x < xBinEnd; x += 1) {
                   if (x >= width) {
@@ -10133,10 +17727,12 @@
                       pixelsInBin += 1;
                   }
               }
+              // Make sure the channels are between 0-255
               red = red / pixelsInBin;
               green = green / pixelsInBin;
               blue = blue / pixelsInBin;
               alpha = alpha / pixelsInBin;
+              // Draw this bin
               for (x = xBinStart; x < xBinEnd; x += 1) {
                   if (x >= width) {
                       continue;
@@ -10155,25 +17751,67 @@
           }
       }
   };
-  Factory.addGetterSetter(Node, 'pixelSize', 8, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'pixelSize', 8, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
+   * @name Konva.Node#pixelSize
+   * @method
+   * @param {Integer} pixelSize
+   * @returns {Integer}
+   */
 
+  /**
+   * Posterize Filter. Adjusts the channels so that there are no more
+   *  than n different values for that channel. This is also applied
+   *  to the alpha channel.
+   * @function
+   * @name Posterize
+   * @author ippo615
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Posterize]);
+   * node.levels(0.8); // between 0 and 1
+   */
   const Posterize = function (imageData) {
+      // level must be between 1 and 255
       var levels = Math.round(this.levels() * 254) + 1, data = imageData.data, len = data.length, scale = 255 / levels, i;
       for (i = 0; i < len; i += 1) {
           data[i] = Math.floor(data[i] / scale) * scale;
       }
   };
-  Factory.addGetterSetter(Node, 'levels', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'levels', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set levels.  Must be a number between 0 and 1.  Use with {@link Konva.Filters.Posterize} filter.
+   * @name Konva.Node#levels
+   * @method
+   * @param {Number} level between 0 and 1
+   * @returns {Number}
+   */
 
+  /**
+   * RGB Filter
+   * @function
+   * @name RGB
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.RGB]);
+   * node.blue(120);
+   * node.green(200);
+   */
   const RGB = function (imageData) {
       var data = imageData.data, nPixels = data.length, red = this.red(), green = this.green(), blue = this.blue(), i, brightness;
       for (i = 0; i < nPixels; i += 4) {
           brightness =
               (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
-          data[i] = brightness * red;
-          data[i + 1] = brightness * green;
-          data[i + 2] = brightness * blue;
-          data[i + 3] = data[i + 3];
+          data[i] = brightness * red; // r
+          data[i + 1] = brightness * green; // g
+          data[i + 2] = brightness * blue; // b
+          data[i + 3] = data[i + 3]; // alpha
       }
   };
   Factory.addGetterSetter(Node, 'red', 0, function (val) {
@@ -10188,6 +17826,14 @@
           return Math.round(val);
       }
   });
+  /**
+   * get/set filter red value. Use with {@link Konva.Filters.RGB} filter.
+   * @name red
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} red value between 0 and 255
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'green', 0, function (val) {
       this._filterUpToDate = false;
       if (val > 255) {
@@ -10200,15 +17846,45 @@
           return Math.round(val);
       }
   });
-  Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
+  /**
+   * get/set filter green value. Use with {@link Konva.Filters.RGB} filter.
+   * @name green
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} green value between 0 and 255
+   * @returns {Integer}
+   */
+  Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
+  /**
+   * get/set filter blue value. Use with {@link Konva.Filters.RGB} filter.
+   * @name blue
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} blue value between 0 and 255
+   * @returns {Integer}
+   */
 
+  /**
+   * RGBA Filter
+   * @function
+   * @name RGBA
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author codefo
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.RGBA]);
+   * node.blue(120);
+   * node.green(200);
+   * node.alpha(0.3);
+   */
   const RGBA = function (imageData) {
       var data = imageData.data, nPixels = data.length, red = this.red(), green = this.green(), blue = this.blue(), alpha = this.alpha(), i, ia;
       for (i = 0; i < nPixels; i += 4) {
           ia = 1 - alpha;
-          data[i] = red * alpha + data[i] * ia;
-          data[i + 1] = green * alpha + data[i + 1] * ia;
-          data[i + 2] = blue * alpha + data[i + 2] * ia;
+          data[i] = red * alpha + data[i] * ia; // r
+          data[i + 1] = green * alpha + data[i + 1] * ia; // g
+          data[i + 2] = blue * alpha + data[i + 2] * ia; // b
       }
   };
   Factory.addGetterSetter(Node, 'red', 0, function (val) {
@@ -10223,6 +17899,14 @@
           return Math.round(val);
       }
   });
+  /**
+   * get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.
+   * @name red
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} red value between 0 and 255
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'green', 0, function (val) {
       this._filterUpToDate = false;
       if (val > 255) {
@@ -10235,7 +17919,23 @@
           return Math.round(val);
       }
   });
+  /**
+   * get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.
+   * @name green
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} green value between 0 and 255
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'blue', 0, RGBComponent, Factory.afterSetFilter);
+  /**
+   * get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.
+   * @name blue
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Integer} blue value between 0 and 255
+   * @returns {Integer}
+   */
   Factory.addGetterSetter(Node, 'alpha', 1, function (val) {
       this._filterUpToDate = false;
       if (val > 1) {
@@ -10247,8 +17947,26 @@
       else {
           return val;
       }
-  });
+  });
+  /**
+   * get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.
+   * @name alpha
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Float} alpha value between 0 and 1
+   * @returns {Float}
+   */
 
+  // based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
+  /**
+   * @function
+   * @name Sepia
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Sepia]);
+   */
   const Sepia = function (imageData) {
       var data = imageData.data, nPixels = data.length, i, r, g, b;
       for (i = 0; i < nPixels; i += 4) {
@@ -10261,6 +17979,19 @@
       }
   };
 
+  /**
+   * Solarize Filter
+   * Pixastic Lib - Solarize filter - v0.1.0
+   * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+   * License: [http://www.pixastic.com/lib/license.txt]
+   * @function
+   * @name Solarize
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Solarize]);
+   */
   const Solarize = function (imageData) {
       var data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4, y = h;
       do {
@@ -10287,14 +18018,37 @@
       } while (--y);
   };
 
+  /**
+   * Threshold Filter. Pushes any value above the mid point to
+   *  the max and any value below the mid point to the min.
+   *  This affects the alpha channel.
+   * @function
+   * @name Threshold
+   * @memberof Konva.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   * @example
+   * node.cache();
+   * node.filters([Konva.Filters.Threshold]);
+   * node.threshold(0.1);
+   */
   const Threshold = function (imageData) {
       var level = this.threshold() * 255, data = imageData.data, len = data.length, i;
       for (i = 0; i < len; i += 1) {
           data[i] = data[i] < level ? 0 : 255;
       }
   };
-  Factory.addGetterSetter(Node, 'threshold', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  Factory.addGetterSetter(Node, 'threshold', 0.5, getNumberValidator(), Factory.afterSetFilter);
+  /**
+   * get/set threshold.  Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
+   * @name threshold
+   * @method
+   * @memberof Konva.Node.prototype
+   * @param {Number} threshold
+   * @returns {Number}
+   */
 
+  // we need to import core of the Konva and then extend it with all additional objects
   const Konva = Konva$1.Util._assign(Konva$1, {
       Arc,
       Arrow,
@@ -10314,6 +18068,10 @@
       TextPath,
       Transformer,
       Wedge,
+      /**
+       * @namespace Filters
+       * @memberof Konva
+       */
       Filters: {
           Blur,
           Brighten,
diff --git a/konva.min.js b/konva.min.js
index 972b94ee..09fd4922 100644
--- a/konva.min.js
+++ b/konva.min.js
@@ -1 +1,12 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Konva=e()}(this,(function(){"use strict";var t=Math.PI/180;const e="undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope?self:{},i={_global:e,version:"8.2.0",isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/param/.test(function(t){}.toString()),dblClickWindow:400,getAngle:e=>i.angleDeg?e*t:e,enableTrace:!1,pointerEventsEnabled:!0,autoDrawEnabled:!0,hitOnDragEnabled:!1,capturePointerEventsEnabled:!1,_mouseListenClick:!1,_touchListenClick:!1,_pointerListenClick:!1,_mouseInDblClickWindow:!1,_touchInDblClickWindow:!1,_pointerInDblClickWindow:!1,_mouseDblClickPointerId:null,_touchDblClickPointerId:null,_pointerDblClickPointerId:null,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio||1,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:()=>i.DD.isDragging,isDragReady:()=>!!i.DD.node,document:e.document,_injectGlobal(t){e.Konva=t}},r=t=>{i[t.prototype.getClassName()]=t};i._injectGlobal(i);class a{constructor(t=[1,0,0,1,0,0]){this.dirty=!1,this.m=t&&t.slice()||[1,0,0,1,0,0]}reset(){this.m[0]=1,this.m[1]=0,this.m[2]=0,this.m[3]=1,this.m[4]=0,this.m[5]=0}copy(){return new a(this.m)}copyInto(t){t.m[0]=this.m[0],t.m[1]=this.m[1],t.m[2]=this.m[2],t.m[3]=this.m[3],t.m[4]=this.m[4],t.m[5]=this.m[5]}point(t){var e=this.m;return{x:e[0]*t.x+e[2]*t.y+e[4],y:e[1]*t.x+e[3]*t.y+e[5]}}translate(t,e){return this.m[4]+=this.m[0]*t+this.m[2]*e,this.m[5]+=this.m[1]*t+this.m[3]*e,this}scale(t,e){return this.m[0]*=t,this.m[1]*=t,this.m[2]*=e,this.m[3]*=e,this}rotate(t){var e=Math.cos(t),i=Math.sin(t),r=this.m[0]*e+this.m[2]*i,a=this.m[1]*e+this.m[3]*i,n=this.m[0]*-i+this.m[2]*e,s=this.m[1]*-i+this.m[3]*e;return this.m[0]=r,this.m[1]=a,this.m[2]=n,this.m[3]=s,this}getTranslation(){return{x:this.m[4],y:this.m[5]}}skew(t,e){var i=this.m[0]+this.m[2]*e,r=this.m[1]+this.m[3]*e,a=this.m[2]+this.m[0]*t,n=this.m[3]+this.m[1]*t;return this.m[0]=i,this.m[1]=r,this.m[2]=a,this.m[3]=n,this}multiply(t){var e=this.m[0]*t.m[0]+this.m[2]*t.m[1],i=this.m[1]*t.m[0]+this.m[3]*t.m[1],r=this.m[0]*t.m[2]+this.m[2]*t.m[3],a=this.m[1]*t.m[2]+this.m[3]*t.m[3],n=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],s=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}invert(){var t=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),e=this.m[3]*t,i=-this.m[1]*t,r=-this.m[2]*t,a=this.m[0]*t,n=t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),s=t*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}getMatrix(){return this.m}setAbsolutePosition(t,e){var i=this.m[0],r=this.m[1],a=this.m[2],n=this.m[3],s=this.m[4],o=(i*(e-this.m[5])-r*(t-s))/(i*n-r*a),h=(t-s-a*o)/i;return this.translate(h,o)}decompose(){var t=this.m[0],e=this.m[1],i=this.m[2],r=this.m[3],a=t*r-e*i;let n={x:this.m[4],y:this.m[5],rotation:0,scaleX:0,scaleY:0,skewX:0,skewY:0};if(0!=t||0!=e){var s=Math.sqrt(t*t+e*e);n.rotation=e>0?Math.acos(t/s):-Math.acos(t/s),n.scaleX=s,n.scaleY=a/s,n.skewX=(t*i+e*r)/a,n.skewY=0}else if(0!=i||0!=r){var o=Math.sqrt(i*i+r*r);n.rotation=Math.PI/2-(r>0?Math.acos(-i/o):-Math.acos(i/o)),n.scaleX=a/o,n.scaleY=o,n.skewX=0,n.skewY=(t*i+e*r)/a}return n.rotation=g._getRotation(n.rotation),n}}var n=Math.PI/180,s=180/Math.PI,o="Konva error: ",h={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,132,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,255,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,203],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[119,128,144],slategrey:[119,128,144],snow:[255,255,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],transparent:[255,255,255,0],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,5]},l=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,d=[];const c="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame||function(t){setTimeout(t,60)},g={_isElement:t=>!(!t||1!=t.nodeType),_isFunction:t=>!!(t&&t.constructor&&t.call&&t.apply),_isPlainObject:t=>!!t&&t.constructor===Object,_isArray:t=>"[object Array]"===Object.prototype.toString.call(t),_isNumber:t=>"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t),_isString:t=>"[object String]"===Object.prototype.toString.call(t),_isBoolean:t=>"[object Boolean]"===Object.prototype.toString.call(t),isObject:t=>t instanceof Object,isValidSelector(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:t=>0===t||t>0?1:-1,requestAnimFrame(t){d.push(t),1===d.length&&c((function(){const t=d;d=[],t.forEach((function(t){t()}))}))},createCanvasElement(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:()=>document.createElement("img"),_isInDocument(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_urlToImage(t,e){var i=g.createImageElement();i.onload=function(){e(i)},i.src=t},_rgbToHex:(t,e,i)=>((1<<24)+(t<<16)+(e<<8)+i).toString(16).slice(1),_hexToRgb(t){t=t.replace("#","");var e=parseInt(t,16);return{r:e>>16&255,g:e>>8&255,b:255&e}},getRandomColor(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},getRGB(t){var e;return t in h?{r:(e=h[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=l.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:t=>(t=t||"black",g._namedColorToRBA(t)||g._hex3ColorToRGBA(t)||g._hex6ColorToRGBA(t)||g._rgbColorToRGBA(t)||g._rgbaColorToRGBA(t)||g._hslColorToRGBA(t)),_namedColorToRBA(t){var e=h[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_hslColorToRGBA(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){const[e,...i]=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),r=Number(i[0])/360,a=Number(i[1])/100,n=Number(i[2])/100;let s,o,h;if(0===a)return h=255*n,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};s=n<.5?n*(1+a):n+a-n*a;const l=2*n-s,d=[0,0,0];for(let t=0;t<3;t++)o=r+1/3*-(t-1),o<0&&o++,o>1&&o--,h=6*o<1?l+6*(s-l)*o:2*o<1?s:3*o<2?l+(s-l)*(2/3-o)*6:l,d[t]=255*h;return{r:Math.round(d[0]),g:Math.round(d[1]),b:Math.round(d[2]),a:1}}},haveIntersection:(t,e)=>!(e.x>t.x+t.width||e.x+e.width<t.x||e.y>t.y+t.height||e.y+e.height<t.y),cloneObject(t){var e={};for(var i in t)this._isPlainObject(t[i])?e[i]=this.cloneObject(t[i]):this._isArray(t[i])?e[i]=this.cloneArray(t[i]):e[i]=t[i];return e},cloneArray:t=>t.slice(0),degToRad:t=>t*n,radToDeg:t=>t*s,_degToRad:t=>(g.warn("Util._degToRad is removed. Please use public Util.degToRad instead."),g.degToRad(t)),_radToDeg:t=>(g.warn("Util._radToDeg is removed. Please use public Util.radToDeg instead."),g.radToDeg(t)),_getRotation:t=>i.angleDeg?g.radToDeg(t):t,_capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),throw(t){throw new Error(o+t)},error(t){console.error(o+t)},warn(t){i.showWarnings&&console.warn("Konva warning: "+t)},each(t,e){for(var i in t)e(i,t[i])},_inRange:(t,e,i)=>e<=t&&t<i,_getProjectionToSegment(t,e,i,r,a,n){var s,o,h,l=(t-i)*(t-i)+(e-r)*(e-r);if(0==l)s=t,o=e,h=(a-i)*(a-i)+(n-r)*(n-r);else{var d=((a-t)*(i-t)+(n-e)*(r-e))/l;d<0?(s=t,o=e,h=(t-a)*(t-a)+(e-n)*(e-n)):d>1?(s=i,o=r,h=(i-a)*(i-a)+(r-n)*(r-n)):h=((s=t+d*(i-t))-a)*(s-a)+((o=e+d*(r-e))-n)*(o-n)}return[s,o,h]},_getProjectionToLine(t,e,i){var r=g.cloneObject(t),a=Number.MAX_VALUE;return e.forEach((function(n,s){if(i||s!==e.length-1){var o=e[(s+1)%e.length],h=g._getProjectionToSegment(n.x,n.y,o.x,o.y,t.x,t.y),l=h[0],d=h[1],c=h[2];c<a&&(r.x=l,r.y=d,a=c)}})),r},_prepareArrayForTween(t,e,i){var r,a=[],n=[];if(t.length>e.length){var s=e;e=t,t=s}for(r=0;r<t.length;r+=2)a.push({x:t[r],y:t[r+1]});for(r=0;r<e.length;r+=2)n.push({x:e[r],y:e[r+1]});var o=[];return n.forEach((function(t){var e=g._getProjectionToLine(t,a,i);o.push(e.x),o.push(e.y)})),o},_prepareToStringify(t){var e;for(var i in t.visitedByCircularReferenceRemoval=!0,t)if(t.hasOwnProperty(i)&&t[i]&&"object"==typeof t[i])if(e=Object.getOwnPropertyDescriptor(t,i),t[i].visitedByCircularReferenceRemoval||g._isElement(t[i])){if(!e.configurable)return null;delete t[i]}else if(null===g._prepareToStringify(t[i])){if(!e.configurable)return null;delete t[i]}return delete t.visitedByCircularReferenceRemoval,t},_assign(t,e){for(var i in e)t[i]=e[i];return t},_getFirstPointerId:t=>t.touches?t.changedTouches[0].identifier:999};function u(t){return g._isString(t)?'"'+t+'"':"[object Number]"===Object.prototype.toString.call(t)||g._isBoolean(t)?t:Object.prototype.toString.call(t)}function f(t){return t>255?255:t<0?0:Math.round(t)}function p(){if(i.isUnminified)return function(t,e){return g._isNumber(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function v(t){if(i.isUnminified)return function(e,i){let r=g._isNumber(e),a=g._isArray(e)&&e.length==t;return r||a||g.warn(u(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array<number>('+t+")"),e}}function m(){if(i.isUnminified)return function(t,e){return g._isNumber(t)||"auto"===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function _(){if(i.isUnminified)return function(t,e){return g._isString(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function y(){if(i.isUnminified)return function(t,e){const i=g._isString(t),r="[object CanvasGradient]"===Object.prototype.toString.call(t)||t&&t.addColorStop;return i||r||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function x(){if(i.isUnminified)return function(t,e){return!0===t||!1===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}var b="get",S="set";const w={addGetterSetter(t,e,i,r,a){w.addGetter(t,e,i),w.addSetter(t,e,r,a),w.addOverloadedGetterSetter(t,e)},addGetter(t,e,i){var r=b+g._capitalize(e);t.prototype[r]=t.prototype[r]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter(t,e,i,r){var a=S+g._capitalize(e);t.prototype[a]||w.overWriteSetter(t,e,i,r)},overWriteSetter(t,e,i,r){var a=S+g._capitalize(e);t.prototype[a]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),r&&r.call(this),this}},addComponentsGetterSetter(t,e,r,a,n){var s,o,h=r.length,l=g._capitalize,d=b+l(e),c=S+l(e);t.prototype[d]=function(){var t={};for(s=0;s<h;s++)t[o=r[s]]=this.getAttr(e+l(o));return t};var f=function(t){if(i.isUnminified)return function(e,i){return g.isObject(e)||g.warn(u(e)+' is a not valid value for "'+i+'" attribute. The value should be an object with properties '+t),e}}(r);t.prototype[c]=function(t){var i,r=this.attrs[e];for(i in a&&(t=a.call(this,t)),f&&f.call(this,t,e),t)t.hasOwnProperty(i)&&this._setAttr(e+l(i),t[i]);return this._fireChangeEvent(e,r,t),n&&n.call(this),this},w.addOverloadedGetterSetter(t,e)},addOverloadedGetterSetter(t,e){var i=g._capitalize(e),r=S+i,a=b+i;t.prototype[e]=function(){return arguments.length?(this[r](arguments[0]),this):this[a]()}},addDeprecatedGetterSetter(t,e,i,r){g.error("Adding deprecated "+e);var a=b+g._capitalize(e),n=e+" property is deprecated and will be removed soon. Look at Konva change log for more information.";t.prototype[a]=function(){g.error(n);var t=this.attrs[e];return void 0===t?i:t},w.addSetter(t,e,r,(function(){g.error(n)})),w.addOverloadedGetterSetter(t,e)},backCompat(t,e){g.each(e,(function(e,i){var r=t.prototype[i],a=b+g._capitalize(e),n=S+g._capitalize(e);function s(){r.apply(this,arguments),g.error('"'+e+'" method is deprecated and will be removed soon. Use ""'+i+'" instead.')}t.prototype[e]=s,t.prototype[a]=s,t.prototype[n]=s}))},afterSetFilter(){this._filterUpToDate=!1}};function C(t){var e,i,r=[],a=t.length,n=g;for(e=0;e<a;e++)i=t[e],n._isNumber(i)?i=Math.round(1e3*i)/1e3:n._isString(i)||(i+=""),r.push(i);return r}var k=["arc","arcTo","beginPath","bezierCurveTo","clearRect","clip","closePath","createLinearGradient","createPattern","createRadialGradient","drawImage","ellipse","fill","fillText","getImageData","createImageData","lineTo","moveTo","putImageData","quadraticCurveTo","rect","restore","rotate","save","scale","setLineDash","setTransform","stroke","strokeText","transform","translate"];class P{constructor(t){this.canvas=t,this._context=t._canvas.getContext("2d"),i.enableTrace&&(this.traceArr=[],this._enableTrace())}fillShape(t){t.fillEnabled()&&this._fill(t)}_fill(t){}strokeShape(t){t.hasStroke()&&this._stroke(t)}_stroke(t){}fillStrokeShape(t){t.attrs.fillAfterStrokeEnabled?(this.strokeShape(t),this.fillShape(t)):(this.fillShape(t),this.strokeShape(t))}getTrace(t,e){var i,r,a,n,s=this.traceArr,o=s.length,h="";for(i=0;i<o;i++)(a=(r=s[i]).method)?(n=r.args,h+=a,t?h+="()":g._isArray(n[0])?h+="(["+n.join(",")+"])":(e&&(n=n.map((t=>"number"==typeof t?Math.floor(t):t))),h+="("+n.join(",")+")")):(h+=r.property,t||(h+="="+r.val)),h+=";";return h}clearTrace(){this.traceArr=[]}_trace(t){var e=this.traceArr;e.push(t),e.length>=100&&e.shift()}reset(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)}getCanvas(){return this.canvas}clear(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)}_applyLineCap(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)}_applyOpacity(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)}_applyLineJoin(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)}setAttr(t,e){this._context[t]=e}arc(t,e,i,r,a,n){this._context.arc(t,e,i,r,a,n)}arcTo(t,e,i,r,a){this._context.arcTo(t,e,i,r,a)}beginPath(){this._context.beginPath()}bezierCurveTo(t,e,i,r,a,n){this._context.bezierCurveTo(t,e,i,r,a,n)}clearRect(t,e,i,r){this._context.clearRect(t,e,i,r)}clip(){this._context.clip()}closePath(){this._context.closePath()}createImageData(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0}createLinearGradient(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)}createPattern(t,e){return this._context.createPattern(t,e)}createRadialGradient(t,e,i,r,a,n){return this._context.createRadialGradient(t,e,i,r,a,n)}drawImage(t,e,i,r,a,n,s,o,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,a):9===l.length&&d.drawImage(t,e,i,r,a,n,s,o,h)}ellipse(t,e,i,r,a,n,s,o){this._context.ellipse(t,e,i,r,a,n,s,o)}isPointInPath(t,e){return this._context.isPointInPath(t,e)}fill(t){t?this._context.fill(t):this._context.fill()}fillRect(t,e,i,r){this._context.fillRect(t,e,i,r)}strokeRect(t,e,i,r){this._context.strokeRect(t,e,i,r)}fillText(t,e,i,r){r?this._context.fillText(t,e,i,r):this._context.fillText(t,e,i)}measureText(t){return this._context.measureText(t)}getImageData(t,e,i,r){return this._context.getImageData(t,e,i,r)}lineTo(t,e){this._context.lineTo(t,e)}moveTo(t,e){this._context.moveTo(t,e)}rect(t,e,i,r){this._context.rect(t,e,i,r)}putImageData(t,e,i){this._context.putImageData(t,e,i)}quadraticCurveTo(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)}restore(){this._context.restore()}rotate(t){this._context.rotate(t)}save(){this._context.save()}scale(t,e){this._context.scale(t,e)}setLineDash(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)}getLineDash(){return this._context.getLineDash()}setTransform(t,e,i,r,a,n){this._context.setTransform(t,e,i,r,a,n)}stroke(t){t?this._context.stroke(t):this._context.stroke()}strokeText(t,e,i,r){this._context.strokeText(t,e,i,r)}transform(t,e,i,r,a,n){this._context.transform(t,e,i,r,a,n)}translate(t,e){this._context.translate(t,e)}_enableTrace(){var t,e,i=this,r=k.length,a=this.setAttr,n=function(t){var r,a=i[t];i[t]=function(){return e=C(Array.prototype.slice.call(arguments,0)),r=a.apply(i,arguments),i._trace({method:t,args:e}),r}};for(t=0;t<r;t++)n(k[t]);i.setAttr=function(){a.apply(i,arguments);var t=arguments[0],e=arguments[1];"shadowOffsetX"!==t&&"shadowOffsetY"!==t&&"shadowBlur"!==t||(e/=this.canvas.getPixelRatio()),i._trace({property:t,val:e})}}_applyGlobalCompositeOperation(t){const e=t.attrs.globalCompositeOperation;!e||"source-over"===e||this.setAttr("globalCompositeOperation",e)}}["fillStyle","strokeStyle","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY","lineCap","lineDashOffset","lineJoin","lineWidth","miterLimit","font","textAlign","textBaseline","globalAlpha","globalCompositeOperation","imageSmoothingEnabled"].forEach((function(t){Object.defineProperty(P.prototype,t,{get(){return this._context[t]},set(e){this._context[t]=e}})}));class T extends P{_fillColor(t){var e=t.fill();this.setAttr("fillStyle",e),t._fillFunc(this)}_fillPattern(t){this.setAttr("fillStyle",t._getFillPattern()),t._fillFunc(this)}_fillLinearGradient(t){var e=t._getLinearGradient();e&&(this.setAttr("fillStyle",e),t._fillFunc(this))}_fillRadialGradient(t){var e=t._getRadialGradient();e&&(this.setAttr("fillStyle",e),t._fillFunc(this))}_fill(t){var e=t.fill(),i=t.getFillPriority();if(e&&"color"===i)this._fillColor(t);else{var r=t.getFillPatternImage();if(r&&"pattern"===i)this._fillPattern(t);else{var a=t.getFillLinearGradientColorStops();if(a&&"linear-gradient"===i)this._fillLinearGradient(t);else{var n=t.getFillRadialGradientColorStops();n&&"radial-gradient"===i?this._fillRadialGradient(t):e?this._fillColor(t):r?this._fillPattern(t):a?this._fillLinearGradient(t):n&&this._fillRadialGradient(t)}}}}_strokeLinearGradient(t){var e=t.getStrokeLinearGradientStartPoint(),i=t.getStrokeLinearGradientEndPoint(),r=t.getStrokeLinearGradientColorStops(),a=this.createLinearGradient(e.x,e.y,i.x,i.y);if(r){for(var n=0;n<r.length;n+=2)a.addColorStop(r[n],r[n+1]);this.setAttr("strokeStyle",a)}}_stroke(t){var e=t.dash(),i=t.getStrokeScaleEnabled();if(t.hasStroke()){if(!i){this.save();var r=this.getCanvas().getPixelRatio();this.setTransform(r,0,0,r,0,0)}this._applyLineCap(t),e&&t.dashEnabled()&&(this.setLineDash(e),this.setAttr("lineDashOffset",t.dashOffset())),this.setAttr("lineWidth",t.strokeWidth()),t.getShadowForStrokeEnabled()||this.setAttr("shadowColor","rgba(0,0,0,0)"),t.getStrokeLinearGradientColorStops()?this._strokeLinearGradient(t):this.setAttr("strokeStyle",t.stroke()),t._strokeFunc(this),i||this.restore()}}_applyShadow(t){var e,i,r,a=null!==(e=t.getShadowRGBA())&&void 0!==e?e:"black",n=null!==(i=t.getShadowBlur())&&void 0!==i?i:5,s=null!==(r=t.getShadowOffset())&&void 0!==r?r:{x:0,y:0},o=t.getAbsoluteScale(),h=this.canvas.getPixelRatio(),l=o.x*h,d=o.y*h;this.setAttr("shadowColor",a),this.setAttr("shadowBlur",n*Math.min(Math.abs(l),Math.abs(d))),this.setAttr("shadowOffsetX",s.x*l),this.setAttr("shadowOffsetY",s.y*d)}}class A extends P{_fill(t){this.save(),this.setAttr("fillStyle",t.colorKey),t._fillFuncHit(this),this.restore()}strokeShape(t){t.hasHitStroke()&&this._stroke(t)}_stroke(t){if(t.hasHitStroke()){var e=t.getStrokeScaleEnabled();if(!e){this.save();var i=this.getCanvas().getPixelRatio();this.setTransform(i,0,0,i,0,0)}this._applyLineCap(t);var r=t.hitStrokeWidth(),a="auto"===r?t.strokeWidth():r;this.setAttr("lineWidth",a),this.setAttr("strokeStyle",t.colorKey),t._strokeFuncHit(this),e||this.restore()}}}var M;class G{constructor(t){this.pixelRatio=1,this.width=0,this.height=0,this.isCache=!1;var e=(t||{}).pixelRatio||i.pixelRatio||function(){if(M)return M;var t=g.createCanvasElement().getContext("2d");return M=(i._global.devicePixelRatio||1)/(t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1)}();this.pixelRatio=e,this._canvas=g.createCanvasElement(),this._canvas.style.padding="0",this._canvas.style.margin="0",this._canvas.style.border="0",this._canvas.style.background="transparent",this._canvas.style.position="absolute",this._canvas.style.top="0",this._canvas.style.left="0"}getContext(){return this.context}getPixelRatio(){return this.pixelRatio}setPixelRatio(t){var e=this.pixelRatio;this.pixelRatio=t,this.setSize(this.getWidth()/e,this.getHeight()/e)}setWidth(t){this.width=this._canvas.width=t*this.pixelRatio,this._canvas.style.width=t+"px";var e=this.pixelRatio;this.getContext()._context.scale(e,e)}setHeight(t){this.height=this._canvas.height=t*this.pixelRatio,this._canvas.style.height=t+"px";var e=this.pixelRatio;this.getContext()._context.scale(e,e)}getWidth(){return this.width}getHeight(){return this.height}setSize(t,e){this.setWidth(t||0),this.setHeight(e||0)}toDataURL(t,e){try{return this._canvas.toDataURL(t,e)}catch(t){try{return this._canvas.toDataURL()}catch(t){return g.error("Unable to get data URL. "+t.message+" For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html."),""}}}}w.addGetterSetter(G,"pixelRatio",void 0,p());class R extends G{constructor(t={width:0,height:0}){super(t),this.context=new T(this),this.setSize(t.width,t.height)}}class E extends G{constructor(t={width:0,height:0}){super(t),this.hitCanvas=!0,this.context=new A(this),this.setSize(t.width,t.height)}}const L={get isDragging(){var t=!1;return L._dragElements.forEach((e=>{"dragging"===e.dragStatus&&(t=!0)})),t},justDragged:!1,get node(){var t;return L._dragElements.forEach((e=>{t=e.node})),t},_dragElements:new Map,_drag(t){const e=[];L._dragElements.forEach(((i,r)=>{const{node:a}=i,n=a.getStage();n.setPointersPositions(t),void 0===i.pointerId&&(i.pointerId=g._getFirstPointerId(t));const s=n._changedPointerPositions.find((t=>t.id===i.pointerId));if(s){if("dragging"!==i.dragStatus){var o=a.dragDistance();if(Math.max(Math.abs(s.x-i.startPointerPos.x),Math.abs(s.y-i.startPointerPos.y))<o)return;if(a.startDrag({evt:t}),!a.isDragging())return}a._setDragPosition(t,i),e.push(a)}})),e.forEach((e=>{e.fire("dragmove",{type:"dragmove",target:e,evt:t},!0)}))},_endDragBefore(t){L._dragElements.forEach((e=>{const{node:r}=e,a=r.getStage();t&&a.setPointersPositions(t);if(!a._changedPointerPositions.find((t=>t.id===e.pointerId)))return;"dragging"!==e.dragStatus&&"stopped"!==e.dragStatus||(L.justDragged=!0,i._mouseListenClick=!1,i._touchListenClick=!1,i._pointerListenClick=!1,e.dragStatus="stopped");const n=e.node.getLayer()||e.node instanceof i.Stage&&e.node;n&&n.batchDraw()}))},_endDragAfter(t){L._dragElements.forEach(((e,i)=>{"stopped"===e.dragStatus&&e.node.fire("dragend",{type:"dragend",target:e.node,evt:t},!0),"dragging"!==e.dragStatus&&L._dragElements.delete(i)}))}};i.isBrowser&&(window.addEventListener("mouseup",L._endDragBefore,!0),window.addEventListener("touchend",L._endDragBefore,!0),window.addEventListener("mousemove",L._drag),window.addEventListener("touchmove",L._drag),window.addEventListener("mouseup",L._endDragAfter,!1),window.addEventListener("touchend",L._endDragAfter,!1));var D="absoluteOpacity",O="allEventListeners",I="absoluteTransform",F="absoluteScale",N="canvas",B="listening",z="mouseenter",W="mouseleave",H="Shape",Y=" ",X="stage",j="transform",U="visible",q=["xChange.konva","yChange.konva","scaleXChange.konva","scaleYChange.konva","skewXChange.konva","skewYChange.konva","rotationChange.konva","offsetXChange.konva","offsetYChange.konva","transformsEnabledChange.konva"].join(Y);let V=1;class K{constructor(t){this._id=V++,this.eventListeners={},this.attrs={},this.index=0,this._allEventListeners=null,this.parent=null,this._cache=new Map,this._attachedDepsListeners=new Map,this._lastPos=null,this._batchingTransformChange=!1,this._needClearTransformCache=!1,this._filterUpToDate=!1,this._isUnderCache=!1,this._dragEventId=null,this._shouldFireChangeEvents=!1,this.setAttrs(t),this._shouldFireChangeEvents=!0}hasChildren(){return!1}_clearCache(t){t!==j&&t!==I||!this._cache.get(t)?t?this._cache.delete(t):this._cache.clear():this._cache.get(t).dirty=!0}_getCache(t,e){var i=this._cache.get(t);return(void 0===i||(t===j||t===I)&&!0===i.dirty)&&(i=e.call(this),this._cache.set(t,i)),i}_calculate(t,e,i){if(!this._attachedDepsListeners.get(t)){const i=e.map((t=>t+"Change.konva")).join(Y);this.on(i,(()=>{this._clearCache(t)})),this._attachedDepsListeners.set(t,!0)}return this._getCache(t,i)}_getCanvasCache(){return this._cache.get(N)}_clearSelfAndDescendantCache(t){this._clearCache(t),t===I&&this.fire("absoluteTransformChange")}clearCache(){return this._cache.delete(N),this._clearSelfAndDescendantCache(),this._requestDraw(),this}cache(t){var e=t||{},i={};void 0!==e.x&&void 0!==e.y&&void 0!==e.width&&void 0!==e.height||(i=this.getClientRect({skipTransform:!0,relativeTo:this.getParent()}));var r=Math.ceil(e.width||i.width),a=Math.ceil(e.height||i.height),n=e.pixelRatio,s=void 0===e.x?i.x:e.x,o=void 0===e.y?i.y:e.y,h=e.offset||0,l=e.drawBorder||!1,d=e.hitCanvasPixelRatio||1;if(r&&a){s-=h,o-=h;var c=new R({pixelRatio:n,width:r+=2*h,height:a+=2*h}),u=new R({pixelRatio:n,width:0,height:0}),f=new E({pixelRatio:d,width:r,height:a}),p=c.getContext(),v=f.getContext();return f.isCache=!0,c.isCache=!0,this._cache.delete(N),this._filterUpToDate=!1,!1===e.imageSmoothingEnabled&&(c.getContext()._context.imageSmoothingEnabled=!1,u.getContext()._context.imageSmoothingEnabled=!1),p.save(),v.save(),p.translate(-s,-o),v.translate(-s,-o),this._isUnderCache=!0,this._clearSelfAndDescendantCache(D),this._clearSelfAndDescendantCache(F),this.drawScene(c,this),this.drawHit(f,this),this._isUnderCache=!1,p.restore(),v.restore(),l&&(p.save(),p.beginPath(),p.rect(0,0,r,a),p.closePath(),p.setAttr("strokeStyle","red"),p.setAttr("lineWidth",5),p.stroke(),p.restore()),this._cache.set(N,{scene:c,filter:u,hit:f,x:s,y:o}),this._requestDraw(),this}g.error("Can not cache the node. Width or height of the node equals 0. Caching is skipped.")}isCached(){return this._cache.has(N)}getClientRect(t){throw new Error('abstract "getClientRect" method call')}_transformedRect(t,e){var i,r,a,n,s=[{x:t.x,y:t.y},{x:t.x+t.width,y:t.y},{x:t.x+t.width,y:t.y+t.height},{x:t.x,y:t.y+t.height}],o=this.getAbsoluteTransform(e);return s.forEach((function(t){var e=o.point(t);void 0===i&&(i=a=e.x,r=n=e.y),i=Math.min(i,e.x),r=Math.min(r,e.y),a=Math.max(a,e.x),n=Math.max(n,e.y)})),{x:i,y:r,width:a-i,height:n-r}}_drawCachedSceneCanvas(t){t.save(),t._applyOpacity(this),t._applyGlobalCompositeOperation(this);const e=this._getCanvasCache();t.translate(e.x,e.y);var i=this._getCachedSceneCanvas(),r=i.pixelRatio;t.drawImage(i._canvas,0,0,i.width/r,i.height/r),t.restore()}_drawCachedHitCanvas(t){var e=this._getCanvasCache(),i=e.hit;t.save(),t.translate(e.x,e.y),t.drawImage(i._canvas,0,0,i.width/i.pixelRatio,i.height/i.pixelRatio),t.restore()}_getCachedSceneCanvas(){var t,e,i,r,a=this.filters(),n=this._getCanvasCache(),s=n.scene,o=n.filter,h=o.getContext();if(a){if(!this._filterUpToDate){var l=s.pixelRatio;o.setSize(s.width/s.pixelRatio,s.height/s.pixelRatio);try{for(t=a.length,h.clear(),h.drawImage(s._canvas,0,0,s.getWidth()/l,s.getHeight()/l),e=h.getImageData(0,0,o.getWidth(),o.getHeight()),i=0;i<t;i++)"function"==typeof(r=a[i])?(r.call(this,e),h.putImageData(e,0,0)):g.error("Filter should be type of function, but got "+typeof r+" instead. Please check correct filters")}catch(t){g.error("Unable to apply filter. "+t.message+" This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.")}this._filterUpToDate=!0}return o}return s}on(t,e){if(this._cache&&this._cache.delete(O),3===arguments.length)return this._delegate.apply(this,arguments);var i,r,a,n,s=t.split(Y),o=s.length;for(i=0;i<o;i++)a=(r=s[i].split("."))[0],n=r[1]||"",this.eventListeners[a]||(this.eventListeners[a]=[]),this.eventListeners[a].push({name:n,handler:e});return this}off(t,e){var i,r,a,n,s,o=(t||"").split(Y),h=o.length;if(this._cache&&this._cache.delete(O),!t)for(r in this.eventListeners)this._off(r);for(i=0;i<h;i++)if(n=(a=o[i].split("."))[0],s=a[1],n)this.eventListeners[n]&&this._off(n,s,e);else for(r in this.eventListeners)this._off(r,s,e);return this}dispatchEvent(t){var e={target:this,type:t.type,evt:t};return this.fire(t.type,e),this}addEventListener(t,e){return this.on(t,(function(t){e.call(this,t.evt)})),this}removeEventListener(t){return this.off(t),this}_delegate(t,e,i){var r=this;this.on(t,(function(t){for(var a=t.target.findAncestors(e,!0,r),n=0;n<a.length;n++)(t=g.cloneObject(t)).currentTarget=a[n],i.call(a[n],t)}))}remove(){return this.isDragging()&&this.stopDrag(),L._dragElements.delete(this._id),this._remove(),this}_clearCaches(){this._clearSelfAndDescendantCache(I),this._clearSelfAndDescendantCache(D),this._clearSelfAndDescendantCache(F),this._clearSelfAndDescendantCache(X),this._clearSelfAndDescendantCache(U),this._clearSelfAndDescendantCache(B)}_remove(){this._clearCaches();var t=this.getParent();t&&t.children&&(t.children.splice(this.index,1),t._setChildrenIndices(),this.parent=null)}destroy(){return this.remove(),this}getAttr(t){var e="get"+g._capitalize(t);return g._isFunction(this[e])?this[e]():this.attrs[t]}getAncestors(){for(var t=this.getParent(),e=[];t;)e.push(t),t=t.getParent();return e}getAttrs(){return this.attrs||{}}setAttrs(t){return this._batchTransformChanges((()=>{var e,i;if(!t)return this;for(e in t)"children"!==e&&(i="set"+g._capitalize(e),g._isFunction(this[i])?this[i](t[e]):this._setAttr(e,t[e]))})),this}isListening(){return this._getCache(B,this._isListening)}_isListening(t){if(!this.listening())return!1;const e=this.getParent();return!e||e===t||this===t||e._isListening(t)}isVisible(){return this._getCache(U,this._isVisible)}_isVisible(t){if(!this.visible())return!1;const e=this.getParent();return!e||e===t||this===t||e._isVisible(t)}shouldDrawHit(t,e=!1){if(t)return this._isVisible(t)&&this._isListening(t);var r=this.getLayer(),a=!1;L._dragElements.forEach((t=>{"dragging"===t.dragStatus&&("Stage"===t.node.nodeType||t.node.getLayer()===r)&&(a=!0)}));var n=!e&&!i.hitOnDragEnabled&&a;return this.isListening()&&this.isVisible()&&!n}show(){return this.visible(!0),this}hide(){return this.visible(!1),this}getZIndex(){return this.index||0}getAbsoluteZIndex(){var t,e,i,r,a=this.getDepth(),n=this,s=0;return"Stage"!==n.nodeType&&function o(h){for(t=[],e=h.length,i=0;i<e;i++)r=h[i],s++,r.nodeType!==H&&(t=t.concat(r.getChildren().slice())),r._id===n._id&&(i=e);t.length>0&&t[0].getDepth()<=a&&o(t)}(n.getStage().getChildren()),s}getDepth(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t}_batchTransformChanges(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache(j),this._clearSelfAndDescendantCache(I)),this._needClearTransformCache=!1}setPosition(t){return this._batchTransformChanges((()=>{this.x(t.x),this.y(t.y)})),this}getPosition(){return{x:this.x(),y:this.y()}}getRelativePointerPosition(){if(!this.getStage())return null;var t=this.getStage().getPointerPosition();if(!t)return null;var e=this.getAbsoluteTransform().copy();return e.invert(),e.point(t)}getAbsolutePosition(t){let e=!1,i=this.parent;for(;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var r=this.getAbsoluteTransform(t).getMatrix(),n=new a,s=this.offset();return n.m=r.slice(),n.translate(s.x,s.y),n.getTranslation()}setAbsolutePosition(t){var e=this._clearTransform();this.attrs.x=e.x,this.attrs.y=e.y,delete e.x,delete e.y,this._clearCache(j);var i=this._getAbsoluteTransform().copy();return i.invert(),i.translate(t.x,t.y),t={x:this.attrs.x+i.getTranslation().x,y:this.attrs.y+i.getTranslation().y},this._setTransform(e),this.setPosition({x:t.x,y:t.y}),this._clearCache(j),this._clearSelfAndDescendantCache(I),this}_setTransform(t){var e;for(e in t)this.attrs[e]=t[e]}_clearTransform(){var t={x:this.x(),y:this.y(),rotation:this.rotation(),scaleX:this.scaleX(),scaleY:this.scaleY(),offsetX:this.offsetX(),offsetY:this.offsetY(),skewX:this.skewX(),skewY:this.skewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,t}move(t){var e=t.x,i=t.y,r=this.x(),a=this.y();return void 0!==e&&(r+=e),void 0!==i&&(a+=i),this.setPosition({x:r,y:a}),this}_eachAncestorReverse(t,e){var i,r,a=[],n=this.getParent();if(!e||e._id!==this._id){for(a.unshift(this);n&&(!e||n._id!==e._id);)a.unshift(n),n=n.parent;for(i=a.length,r=0;r<i;r++)t(a[r])}}rotate(t){return this.rotation(this.rotation()+t),this}moveToTop(){if(!this.parent)return g.warn("Node has no parent. moveToTop function is ignored."),!1;var t=this.index;return this.parent.children.splice(t,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0}moveUp(){if(!this.parent)return g.warn("Node has no parent. moveUp function is ignored."),!1;var t=this.index;return t<this.parent.getChildren().length-1&&(this.parent.children.splice(t,1),this.parent.children.splice(t+1,0,this),this.parent._setChildrenIndices(),!0)}moveDown(){if(!this.parent)return g.warn("Node has no parent. moveDown function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)}moveToBottom(){if(!this.parent)return g.warn("Node has no parent. moveToBottom function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0)}setZIndex(t){if(!this.parent)return g.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&g.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this}getAbsoluteOpacity(){return this._getCache(D,this._getAbsoluteOpacity)}_getAbsoluteOpacity(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t}moveTo(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this}toObject(){var t,e,i,r,a={},n=this.getAttrs();for(t in a.attrs={},n)e=n[t],g.isObject(e)&&!g._isPlainObject(e)&&!g._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],r=i?i.call(this):null,n[t]=e,r!==e&&(a.attrs[t]=e));return a.className=this.getClassName(),g._prepareToStringify(a)}toJSON(){return JSON.stringify(this.toObject())}getParent(){return this.parent}findAncestors(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var a=this.parent;a;){if(a===i)return r;a._isMatch(t)&&r.push(a),a=a.parent}return r}isAncestorOf(t){return!1}findAncestor(t,e,i){return this.findAncestors(t,e,i)[0]}_isMatch(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,r=t.replace(/ /g,"").split(","),a=r.length;for(e=0;e<a;e++)if(i=r[e],g.isValidSelector(i)||(g.warn('Selector "'+i+'" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".'),g.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".'),g.warn("Konva is awesome, right?")),"#"===i.charAt(0)){if(this.id()===i.slice(1))return!0}else if("."===i.charAt(0)){if(this.hasName(i.slice(1)))return!0}else if(this.className===i||this.nodeType===i)return!0;return!1}getLayer(){var t=this.getParent();return t?t.getLayer():null}getStage(){return this._getCache(X,this._getStage)}_getStage(){var t=this.getParent();return t?t.getStage():void 0}fire(t,e={},i){return e.target=e.target||this,i?this._fireAndBubble(t,e):this._fire(t,e),this}getAbsoluteTransform(t){return t?this._getAbsoluteTransform(t):this._getCache(I,this._getAbsoluteTransform)}_getAbsoluteTransform(t){var e;if(t)return e=new a,this._eachAncestorReverse((function(t){var i=t.transformsEnabled();"all"===i?e.multiply(t.getTransform()):"position"===i&&e.translate(t.x()-t.offsetX(),t.y()-t.offsetY())}),t),e;e=this._cache.get(I)||new a,this.parent?this.parent.getAbsoluteTransform().copyInto(e):e.reset();var i=this.transformsEnabled();if("all"===i)e.multiply(this.getTransform());else if("position"===i){const t=this.attrs.x||0,i=this.attrs.y||0,r=this.attrs.offsetX||0,a=this.attrs.offsetY||0;e.translate(t-r,i-a)}return e.dirty=!1,e}getAbsoluteScale(t){for(var e=this;e;)e._isUnderCache&&(t=e),e=e.getParent();const i=this.getAbsoluteTransform(t).decompose();return{x:i.scaleX,y:i.scaleY}}getAbsoluteRotation(){return this.getAbsoluteTransform().decompose().rotation}getTransform(){return this._getCache(j,this._getTransform)}_getTransform(){var t,e,r=this._cache.get(j)||new a;r.reset();var n=this.x(),s=this.y(),o=i.getAngle(this.rotation()),h=null!==(t=this.attrs.scaleX)&&void 0!==t?t:1,l=null!==(e=this.attrs.scaleY)&&void 0!==e?e:1,d=this.attrs.skewX||0,c=this.attrs.skewY||0,g=this.attrs.offsetX||0,u=this.attrs.offsetY||0;return 0===n&&0===s||r.translate(n,s),0!==o&&r.rotate(o),0===d&&0===c||r.skew(d,c),1===h&&1===l||r.scale(h,l),0===g&&0===u||r.translate(-1*g,-1*u),r.dirty=!1,r}clone(t){var e,i,r,a,n,s=g.cloneObject(this.attrs);for(e in t)s[e]=t[e];var o=new this.constructor(s);for(e in this.eventListeners)for(r=(i=this.eventListeners[e]).length,a=0;a<r;a++)(n=i[a]).name.indexOf("konva")<0&&(o.eventListeners[e]||(o.eventListeners[e]=[]),o.eventListeners[e].push(n));return o}_toKonvaCanvas(t){t=t||{};var e=this.getClientRect(),i=this.getStage(),r=void 0!==t.x?t.x:e.x,a=void 0!==t.y?t.y:e.y,n=t.pixelRatio||1,s=new R({width:t.width||e.width||(i?i.width():0),height:t.height||e.height||(i?i.height():0),pixelRatio:n}),o=s.getContext();return o.save(),(r||a)&&o.translate(-1*r,-1*a),this.drawScene(s),o.restore(),s}toCanvas(t){return this._toKonvaCanvas(t)._canvas}toDataURL(t){var e=(t=t||{}).mimeType||null,i=t.quality||null,r=this._toKonvaCanvas(t).toDataURL(e,i);return t.callback&&t.callback(r),r}toImage(t){if(!t||!t.callback)throw"callback required for toImage method config argument";var e=t.callback;delete t.callback,g._urlToImage(this.toDataURL(t),(function(t){e(t)}))}setSize(t){return this.width(t.width),this.height(t.height),this}getSize(){return{width:this.width(),height:this.height()}}getClassName(){return this.className||this.nodeType}getType(){return this.nodeType}getDragDistance(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():i.dragDistance}_off(t,e,i){var r,a,n,s=this.eventListeners[t];for(r=0;r<s.length;r++)if(a=s[r].name,n=s[r].handler,!("konva"===a&&"konva"!==e||e&&a!==e||i&&i!==n)){if(s.splice(r,1),0===s.length){delete this.eventListeners[t];break}r--}}_fireChangeEvent(t,e,i){this._fire(t+"Change",{oldVal:e,newVal:i})}addName(t){if(!this.hasName(t)){var e=this.name(),i=e?e+" "+t:t;this.name(i)}return this}hasName(t){if(!t)return!1;const e=this.name();return!!e&&-1!==(e||"").split(/\s/g).indexOf(t)}removeName(t){var e=(this.name()||"").split(/\s/g),i=e.indexOf(t);return-1!==i&&(e.splice(i,1),this.name(e.join(" "))),this}setAttr(t,e){var i=this["set"+g._capitalize(t)];return g._isFunction(i)?i.call(this,e):this._setAttr(t,e),this}_requestDraw(){if(i.autoDrawEnabled){const t=this.getLayer()||this.getStage();null==t||t.batchDraw()}}_setAttr(t,e){var i=this.attrs[t];(i!==e||g.isObject(e))&&(null==e?delete this.attrs[t]:this.attrs[t]=e,this._shouldFireChangeEvents&&this._fireChangeEvent(t,i,e),this._requestDraw())}_setComponentAttr(t,e,i){var r;void 0!==i&&((r=this.attrs[t])||(this.attrs[t]=this.getAttr(t)),this.attrs[t][e]=i,this._fireChangeEvent(t,r,i))}_fireAndBubble(t,e,i){if(e&&this.nodeType===H&&(e.target=this),!((t===z||t===W)&&(i&&(this===i||this.isAncestorOf&&this.isAncestorOf(i))||"Stage"===this.nodeType&&!i))){this._fire(t,e);var r=(t===z||t===W)&&i&&i.isAncestorOf&&i.isAncestorOf(this)&&!i.isAncestorOf(this.parent);(e&&!e.cancelBubble||!e)&&this.parent&&this.parent.isListening()&&!r&&(i&&i.parent?this._fireAndBubble.call(this.parent,t,e,i):this._fireAndBubble.call(this.parent,t,e))}}_getProtoListeners(t){let e=this._cache.get(O);if(!e){e={};let t=Object.getPrototypeOf(this);for(;t;)if(t.eventListeners){for(var i in t.eventListeners){const r=t.eventListeners[i],a=e[i]||[];e[i]=r.concat(a)}t=Object.getPrototypeOf(t)}else t=Object.getPrototypeOf(t);this._cache.set(O,e)}return e[t]}_fire(t,e){(e=e||{}).currentTarget=this,e.type=t;const i=this._getProtoListeners(t);if(i)for(var r=0;r<i.length;r++)i[r].handler.call(this,e);const a=this.eventListeners[t];if(a)for(r=0;r<a.length;r++)a[r].handler.call(this,e)}draw(){return this.drawScene(),this.drawHit(),this}_createDragElement(t){var e=t?t.pointerId:void 0,i=this.getStage(),r=this.getAbsolutePosition(),a=i._getPointerById(e)||i._changedPointerPositions[0]||r;L._dragElements.set(this._id,{node:this,startPointerPos:a,offset:{x:a.x-r.x,y:a.y-r.y},dragStatus:"ready",pointerId:e})}startDrag(t,e=!0){L._dragElements.has(this._id)||this._createDragElement(t);L._dragElements.get(this._id).dragStatus="dragging",this.fire("dragstart",{type:"dragstart",target:this,evt:t&&t.evt},e)}_setDragPosition(t,e){const i=this.getStage()._getPointerById(e.pointerId);if(i){var r={x:i.x-e.offset.x,y:i.y-e.offset.y},a=this.dragBoundFunc();if(void 0!==a){const e=a.call(this,r,t);e?r=e:g.warn("dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.")}this._lastPos&&this._lastPos.x===r.x&&this._lastPos.y===r.y||(this.setAbsolutePosition(r),this._requestDraw()),this._lastPos=r}}stopDrag(t){const e=L._dragElements.get(this._id);e&&(e.dragStatus="stopped"),L._endDragBefore(t),L._endDragAfter(t)}setDraggable(t){this._setAttr("draggable",t),this._dragChange()}isDragging(){const t=L._dragElements.get(this._id);return!!t&&"dragging"===t.dragStatus}_listenDrag(){this._dragCleanup(),this.on("mousedown.konva touchstart.konva",(function(t){if((!(void 0!==t.evt.button)||i.dragButtons.indexOf(t.evt.button)>=0)&&!this.isDragging()){var e=!1;L._dragElements.forEach((t=>{this.isAncestorOf(t.node)&&(e=!0)})),e||this._createDragElement(t)}}))}_dragChange(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;const t=L._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&L._dragElements.delete(this._id)}}_dragCleanup(){this.off("mousedown.konva"),this.off("touchstart.konva")}isClientRectOnScreen(t={x:0,y:0}){const e=this.getStage();if(!e)return!1;const i={x:-t.x,y:-t.y,width:e.width()+t.x,height:e.height()+t.y};return g.haveIntersection(i,this.getClientRect())}static create(t,e){return g._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)}static _createNode(t,e){var r,a,n,s=K.prototype.getClassName.call(t),o=t.children;e&&(t.attrs.container=e),i[s]||(g.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape");if(r=new(0,i[s])(t.attrs),o)for(a=o.length,n=0;n<a;n++)r.add(K._createNode(o[n]));return r}}K.prototype.nodeType="Node",K.prototype._attrsAffectingSize=[],K.prototype.eventListeners={},K.prototype.on.call(K.prototype,q,(function(){this._batchingTransformChange?this._needClearTransformCache=!0:(this._clearCache(j),this._clearSelfAndDescendantCache(I))})),K.prototype.on.call(K.prototype,"visibleChange.konva",(function(){this._clearSelfAndDescendantCache(U)})),K.prototype.on.call(K.prototype,"listeningChange.konva",(function(){this._clearSelfAndDescendantCache(B)})),K.prototype.on.call(K.prototype,"opacityChange.konva",(function(){this._clearSelfAndDescendantCache(D)}));const Q=w.addGetterSetter;Q(K,"zIndex"),Q(K,"absolutePosition"),Q(K,"position"),Q(K,"x",0,p()),Q(K,"y",0,p()),Q(K,"globalCompositeOperation","source-over",_()),Q(K,"opacity",1,p()),Q(K,"name","",_()),Q(K,"id","",_()),Q(K,"rotation",0,p()),w.addComponentsGetterSetter(K,"scale",["x","y"]),Q(K,"scaleX",1,p()),Q(K,"scaleY",1,p()),w.addComponentsGetterSetter(K,"skew",["x","y"]),Q(K,"skewX",0,p()),Q(K,"skewY",0,p()),w.addComponentsGetterSetter(K,"offset",["x","y"]),Q(K,"offsetX",0,p()),Q(K,"offsetY",0,p()),Q(K,"dragDistance",null,p()),Q(K,"width",0,p()),Q(K,"height",0,p()),Q(K,"listening",!0,x()),Q(K,"preventDefault",!0,x()),Q(K,"filters",null,(function(t){return this._filterUpToDate=!1,t})),Q(K,"visible",!0,x()),Q(K,"transformsEnabled","all",_()),Q(K,"size"),Q(K,"dragBoundFunc"),Q(K,"draggable",!1,x()),w.backCompat(K,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"});class J extends K{constructor(){super(...arguments),this.children=[]}getChildren(t){if(!t)return this.children||[];const e=this.children||[];var i=[];return e.forEach((function(e){t(e)&&i.push(e)})),i}hasChildren(){return this.getChildren().length>0}removeChildren(){return this.getChildren().forEach((t=>{t.parent=null,t.index=0,t.remove()})),this.children=[],this._requestDraw(),this}destroyChildren(){return this.getChildren().forEach((t=>{t.parent=null,t.index=0,t.destroy()})),this.children=[],this._requestDraw(),this}add(...t){if(arguments.length>1){for(var e=0;e<arguments.length;e++)this.add(arguments[e]);return this}var i=t[0];return i.getParent()?(i.moveTo(this),this):(this._validateAdd(i),i.index=this.getChildren().length,i.parent=this,i._clearCaches(),this.getChildren().push(i),this._fire("add",{child:i}),this._requestDraw(),this)}destroy(){return this.hasChildren()&&this.destroyChildren(),super.destroy(),this}find(t){return this._generalFind(t,!1)}findOne(t){var e=this._generalFind(t,!0);return e.length>0?e[0]:void 0}_generalFind(t,e){var i=[];return this._descendants((r=>{const a=r._isMatch(t);return a&&i.push(r),!(!a||!e)})),i}_descendants(t){let e=!1;const i=this.getChildren();for(const r of i){if(e=t(r),e)return!0;if(r.hasChildren()&&(e=r._descendants(t),e))return!0}return!1}toObject(){var t=K.prototype.toObject.call(this);return t.children=[],this.getChildren().forEach((e=>{t.children.push(e.toObject())})),t}isAncestorOf(t){for(var e=t.getParent();e;){if(e._id===this._id)return!0;e=e.getParent()}return!1}clone(t){var e=K.prototype.clone.call(this,t);return this.getChildren().forEach((function(t){e.add(t.clone())})),e}getAllIntersections(t){var e=[];return this.find("Shape").forEach((function(i){i.isVisible()&&i.intersects(t)&&e.push(i)})),e}_clearSelfAndDescendantCache(t){var e;super._clearSelfAndDescendantCache(t),this.isCached()||null===(e=this.children)||void 0===e||e.forEach((function(e){e._clearSelfAndDescendantCache(t)}))}_setChildrenIndices(){var t;null===(t=this.children)||void 0===t||t.forEach((function(t,e){t.index=e})),this._requestDraw()}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas(),a=r&&r.getContext(),n=this._getCanvasCache(),s=n&&n.scene,o=r&&r.isCache;if(!this.isVisible()&&!o)return this;if(s){a.save();var h=this.getAbsoluteTransform(e).getMatrix();a.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedSceneCanvas(a),a.restore()}else this._drawChildren("drawScene",r,e);return this}drawHit(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),r=t||i&&i.hitCanvas,a=r&&r.getContext(),n=this._getCanvasCache();if(n&&n.hit){a.save();var s=this.getAbsoluteTransform(e).getMatrix();a.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._drawCachedHitCanvas(a),a.restore()}else this._drawChildren("drawHit",r,e);return this}_drawChildren(t,e,i){var r,a=e&&e.getContext(),n=this.clipWidth(),s=this.clipHeight(),o=this.clipFunc(),h=n&&s||o;const l=i===this;if(h){a.save();var d=this.getAbsoluteTransform(i),c=d.getMatrix();if(a.transform(c[0],c[1],c[2],c[3],c[4],c[5]),a.beginPath(),o)o.call(this,a,this);else{var g=this.clipX(),u=this.clipY();a.rect(g,u,n,s)}a.clip(),c=d.copy().invert().getMatrix(),a.transform(c[0],c[1],c[2],c[3],c[4],c[5])}var f=!l&&"source-over"!==this.globalCompositeOperation()&&"drawScene"===t;f&&(a.save(),a._applyGlobalCompositeOperation(this)),null===(r=this.children)||void 0===r||r.forEach((function(r){r[t](e,i)})),f&&a.restore(),h&&a.restore()}getClientRect(t){var e,i,r,a,n,s=(t=t||{}).skipTransform,o=t.relativeTo,h={x:1/0,y:1/0,width:0,height:0},l=this;null===(e=this.children)||void 0===e||e.forEach((function(e){if(e.visible()){var s=e.getClientRect({relativeTo:l,skipShadow:t.skipShadow,skipStroke:t.skipStroke});0===s.width&&0===s.height||(void 0===i?(i=s.x,r=s.y,a=s.x+s.width,n=s.y+s.height):(i=Math.min(i,s.x),r=Math.min(r,s.y),a=Math.max(a,s.x+s.width),n=Math.max(n,s.y+s.height)))}}));for(var d=this.find("Shape"),c=!1,g=0;g<d.length;g++){if(d[g]._isVisible(this)){c=!0;break}}return h=c&&void 0!==i?{x:i,y:r,width:a-i,height:n-r}:{x:0,y:0,width:0,height:0},s?h:this._transformedRect(h,o)}}w.addComponentsGetterSetter(J,"clip",["x","y","width","height"]),w.addGetterSetter(J,"clipX",void 0,p()),w.addGetterSetter(J,"clipY",void 0,p()),w.addGetterSetter(J,"clipWidth",void 0,p()),w.addGetterSetter(J,"clipHeight",void 0,p()),w.addGetterSetter(J,"clipFunc");const Z=new Map,$=void 0!==i._global.PointerEvent;function tt(t){return Z.get(t)}function et(t){return{evt:t,pointerId:t.pointerId}}function it(t,e){return Z.get(t)===e}function rt(t,e){at(t);e.getStage()&&(Z.set(t,e),$&&e._fire("gotpointercapture",et(new PointerEvent("gotpointercapture"))))}function at(t,e){const i=Z.get(t);if(!i)return;const r=i.getStage();r&&r.content,Z.delete(t),$&&i._fire("lostpointercapture",et(new PointerEvent("lostpointercapture")))}var nt="mouseleave",st="mouseover",ot="mouseenter",ht="mousemove",lt="mousedown",dt="mouseup",ct="pointermove",gt="pointerdown",ut="pointerup",ft="pointercancel",pt="pointerout",vt="pointerleave",mt="pointerover",_t="pointerenter",yt="contextmenu",xt="touchstart",bt="touchend",St="touchmove",wt="touchcancel",Ct="wheel",kt=[[ot,"_pointerenter"],[lt,"_pointerdown"],[ht,"_pointermove"],[dt,"_pointerup"],[nt,"_pointerleave"],[xt,"_pointerdown"],[St,"_pointermove"],[bt,"_pointerup"],[wt,"_pointercancel"],[st,"_pointerover"],[Ct,"_wheel"],[yt,"_contextmenu"],[gt,"_pointerdown"],[ct,"_pointermove"],[ut,"_pointerup"],[ft,"_pointercancel"],["lostpointercapture","_lostpointercapture"]];const Pt={mouse:{[pt]:"mouseout",[vt]:nt,[mt]:st,[_t]:ot,[ct]:ht,[gt]:lt,[ut]:dt,[ft]:"mousecancel",pointerclick:"click",pointerdblclick:"dblclick"},touch:{[pt]:"touchout",[vt]:"touchleave",[mt]:"touchover",[_t]:"touchenter",[ct]:St,[gt]:xt,[ut]:bt,[ft]:wt,pointerclick:"tap",pointerdblclick:"dbltap"},pointer:{[pt]:pt,[vt]:vt,[mt]:mt,[_t]:_t,[ct]:ct,[gt]:gt,[ut]:ut,[ft]:ft,pointerclick:"pointerclick",pointerdblclick:"pointerdblclick"}},Tt=t=>t.indexOf("pointer")>=0?"pointer":t.indexOf("touch")>=0?"touch":"mouse",At=t=>{const e=Tt(t);return"pointer"===e?i.pointerEventsEnabled&&Pt.pointer:"touch"===e?Pt.touch:"mouse"===e?Pt.mouse:void 0};function Mt(t={}){return(t.clipFunc||t.clipWidth||t.clipHeight)&&g.warn("Stage does not support clipping. Please use clip for Layers or Groups."),t}const Gt=[];class Rt extends J{constructor(t){super(Mt(t)),this._pointerPositions=[],this._changedPointerPositions=[],this._buildDOM(),this._bindContentEvents(),Gt.push(this),this.on("widthChange.konva heightChange.konva",this._resizeDOM),this.on("visibleChange.konva",this._checkVisibility),this.on("clipWidthChange.konva clipHeightChange.konva clipFuncChange.konva",(()=>{Mt(this.attrs)})),this._checkVisibility()}_validateAdd(t){const e="Layer"===t.getType(),i="FastLayer"===t.getType();e||i||g.throw("You may only add layers to the stage.")}_checkVisibility(){if(!this.content)return;const t=this.visible()?"":"none";this.content.style.display=t}setContainer(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=document.getElementsByClassName(e)[0]}else{var i;i="#"!==t.charAt(0)?t:t.slice(1),t=document.getElementById(i)}if(!t)throw"Can not find container in document with id "+i}return this._setAttr("container",t),this.content&&(this.content.parentElement&&this.content.parentElement.removeChild(this.content),t.appendChild(this.content)),this}shouldDrawHit(){return!0}clear(){var t,e=this.children,i=e.length;for(t=0;t<i;t++)e[t].clear();return this}clone(t){return t||(t={}),t.container="undefined"!=typeof document&&document.createElement("div"),J.prototype.clone.call(this,t)}destroy(){super.destroy();var t=this.content;t&&g._isInDocument(t)&&this.container().removeChild(t);var e=Gt.indexOf(this);return e>-1&&Gt.splice(e,1),this}getPointerPosition(){const t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(g.warn("Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);"),null)}_getPointerById(t){return this._pointerPositions.find((e=>e.id===t))}getPointersPositions(){return this._pointerPositions}getStage(){return this}getContent(){return this.content}_toKonvaCanvas(t){(t=t||{}).x=t.x||0,t.y=t.y||0,t.width=t.width||this.width(),t.height=t.height||this.height();var e=new R({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,r=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),r.forEach((function(e){if(e.isVisible()){var r=e._toKonvaCanvas(t);i.drawImage(r._canvas,t.x,t.y,r.getWidth()/r.getPixelRatio(),r.getHeight()/r.getPixelRatio())}})),e}getIntersection(t){if(!t)return null;var e,i=this.children;for(e=i.length-1;e>=0;e--){const r=i[e].getIntersection(t);if(r)return r}return null}_resizeDOM(){var t=this.width(),e=this.height();this.content&&(this.content.style.width=t+"px",this.content.style.height=e+"px"),this.bufferCanvas.setSize(t,e),this.bufferHitCanvas.setSize(t,e),this.children.forEach((i=>{i.setSize({width:t,height:e}),i.draw()}))}add(t,...e){if(arguments.length>1){for(var r=0;r<arguments.length;r++)this.add(arguments[r]);return this}super.add(t);var a=this.children.length;return a>5&&g.warn("The stage has "+a+" layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."),t.setSize({width:this.width(),height:this.height()}),t.draw(),i.isBrowser&&this.content.appendChild(t.canvas._canvas),this}getParent(){return null}getLayer(){return null}hasPointerCapture(t){return it(t,this)}setPointerCapture(t){rt(t,this)}releaseCapture(t){at(t)}getLayers(){return this.children}_bindContentEvents(){i.isBrowser&&kt.forEach((([t,e])=>{this.content.addEventListener(t,(t=>{this[e](t)}))}))}_pointerenter(t){this.setPointersPositions(t);const e=At(t.type);this._fire(e.pointerenter,{evt:t,target:this,currentTarget:this})}_pointerover(t){this.setPointersPositions(t);const e=At(t.type);this._fire(e.pointerover,{evt:t,target:this,currentTarget:this})}_getTargetShape(t){let e=this[t+"targetShape"];return e&&!e.getStage()&&(e=null),e}_pointerleave(t){const e=At(t.type),r=Tt(t.type);if(e){this.setPointersPositions(t);var a=this._getTargetShape(r),n=!L.isDragging||i.hitOnDragEnabled;a&&n?(a._fireAndBubble(e.pointerout,{evt:t}),a._fireAndBubble(e.pointerleave,{evt:t}),this._fire(e.pointerleave,{evt:t,target:this,currentTarget:this}),this[r+"targetShape"]=null):n&&(this._fire(e.pointerleave,{evt:t,target:this,currentTarget:this}),this._fire(e.pointerout,{evt:t,target:this,currentTarget:this})),this.pointerPos=void 0,this._pointerPositions=[]}}_pointerdown(t){const e=At(t.type),r=Tt(t.type);if(e){this.setPointersPositions(t);var a=!1;this._changedPointerPositions.forEach((n=>{var s=this.getIntersection(n);L.justDragged=!1,i["_"+r+"ListenClick"]=!0;if(!(s&&s.isListening()))return;i.capturePointerEventsEnabled&&s.setPointerCapture(n.id),this[r+"ClickStartShape"]=s,s._fireAndBubble(e.pointerdown,{evt:t,pointerId:n.id}),a=!0;const o=t.type.indexOf("touch")>=0;s.preventDefault()&&t.cancelable&&o&&t.preventDefault()})),a||this._fire(e.pointerdown,{evt:t,target:this,currentTarget:this,pointerId:this._pointerPositions[0].id})}}_pointermove(t){const e=At(t.type),r=Tt(t.type);if(!e)return;if(L.isDragging&&L.node.preventDefault()&&t.cancelable&&t.preventDefault(),this.setPointersPositions(t),!(!L.isDragging||i.hitOnDragEnabled))return;var a={};let n=!1;var s=this._getTargetShape(r);this._changedPointerPositions.forEach((i=>{const o=tt(i.id)||this.getIntersection(i),h=i.id,l={evt:t,pointerId:h};var d=s!==o;if(d&&s&&(s._fireAndBubble(e.pointerout,Object.assign({},l),o),s._fireAndBubble(e.pointerleave,Object.assign({},l),o)),o){if(a[o._id])return;a[o._id]=!0}o&&o.isListening()?(n=!0,d&&(o._fireAndBubble(e.pointerover,Object.assign({},l),s),o._fireAndBubble(e.pointerenter,Object.assign({},l),s),this[r+"targetShape"]=o),o._fireAndBubble(e.pointermove,Object.assign({},l))):s&&(this._fire(e.pointerover,{evt:t,target:this,currentTarget:this,pointerId:h}),this[r+"targetShape"]=null)})),n||this._fire(e.pointermove,{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id})}_pointerup(t){const e=At(t.type),r=Tt(t.type);if(!e)return;this.setPointersPositions(t);const a=this[r+"ClickStartShape"],n=this[r+"ClickEndShape"];var s={};let o=!1;this._changedPointerPositions.forEach((h=>{const l=tt(h.id)||this.getIntersection(h);if(l){if(l.releaseCapture(h.id),s[l._id])return;s[l._id]=!0}const d=h.id,c={evt:t,pointerId:d};let g=!1;i["_"+r+"InDblClickWindow"]&&i["_"+r+"InDblClickWindowId"]===d?(g=!0,clearTimeout(this[r+"DblTimeout"])):L.justDragged||(i["_"+r+"InDblClickWindow"]=!0,i["_"+r+"InDblClickWindowId"]=d,clearTimeout(this[r+"DblTimeout"])),this[r+"DblTimeout"]=setTimeout((function(){i["_"+r+"InDblClickWindow"]=!1}),i.dblClickWindow),l&&l.isListening()?(o=!0,this[r+"ClickEndShape"]=l,l._fireAndBubble(e.pointerup,Object.assign({},c)),i["_"+r+"ListenClick"]&&a&&a===l&&(l._fireAndBubble(e.pointerclick,Object.assign({},c)),g&&n&&n===l&&l._fireAndBubble(e.pointerdblclick,Object.assign({},c)))):(this[r+"ClickEndShape"]=null,i["_"+r+"ListenClick"]&&this._fire(e.pointerclick,{evt:t,target:this,currentTarget:this,pointerId:d}),g&&this._fire(e.pointerdblclick,{evt:t,target:this,currentTarget:this,pointerId:d}))})),o||this._fire(e.pointerup,{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),i["_"+r+"ListenClick"]=!1,t.cancelable&&t.preventDefault()}_contextmenu(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble(yt,{evt:t}):this._fire(yt,{evt:t,target:this,currentTarget:this})}_wheel(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble(Ct,{evt:t}):this._fire(Ct,{evt:t,target:this,currentTarget:this})}_pointercancel(t){this.setPointersPositions(t);const e=tt(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble(ut,et(t)),at(t.pointerId)}_lostpointercapture(t){at(t.pointerId)}setPointersPositions(t){var e=this._getContentPosition(),i=null,r=null;void 0!==(t=t||window.event).touches?(this._pointerPositions=[],this._changedPointerPositions=[],Array.prototype.forEach.call(t.touches,(t=>{this._pointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})})),Array.prototype.forEach.call(t.changedTouches||t.touches,(t=>{this._changedPointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})}))):(i=(t.clientX-e.left)/e.scaleX,r=(t.clientY-e.top)/e.scaleY,this.pointerPos={x:i,y:r},this._pointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}],this._changedPointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}])}_setPointerPosition(t){g.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'),this.setPointersPositions(t)}_getContentPosition(){if(!this.content||!this.content.getBoundingClientRect)return{top:0,left:0,scaleX:1,scaleY:1};var t=this.content.getBoundingClientRect();return{top:t.top,left:t.left,scaleX:t.width/this.content.clientWidth||1,scaleY:t.height/this.content.clientHeight||1}}_buildDOM(){if(this.bufferCanvas=new R({width:this.width(),height:this.height()}),this.bufferHitCanvas=new E({pixelRatio:1,width:this.width(),height:this.height()}),i.isBrowser){var t=this.container();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.userSelect="none",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}}cache(){return g.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes."),this}clearCache(){return this}batchDraw(){return this.getChildren().forEach((function(t){t.batchDraw()})),this}}Rt.prototype.nodeType="Stage",r(Rt),w.addGetterSetter(Rt,"container");var Et="hasShadow",Lt="shadowRGBA",Dt="patternImage",Ot="linearGradient",It="radialGradient";let Ft;function Nt(){return Ft||(Ft=g.createCanvasElement().getContext("2d"),Ft)}const Bt={};class zt extends K{constructor(t){let e;for(super(t);e=g.getRandomColor(),!e||e in Bt;);this.colorKey=e,Bt[e]=this}getContext(){return g.warn("shape.getContext() method is deprecated. Please do not use it."),this.getLayer().getContext()}getCanvas(){return g.warn("shape.getCanvas() method is deprecated. Please do not use it."),this.getLayer().getCanvas()}getSceneFunc(){return this.attrs.sceneFunc||this._sceneFunc}getHitFunc(){return this.attrs.hitFunc||this._hitFunc}hasShadow(){return this._getCache(Et,this._hasShadow)}_hasShadow(){return this.shadowEnabled()&&0!==this.shadowOpacity()&&!!(this.shadowColor()||this.shadowBlur()||this.shadowOffsetX()||this.shadowOffsetY())}_getFillPattern(){return this._getCache(Dt,this.__getFillPattern)}__getFillPattern(){if(this.fillPatternImage()){const t=Nt().createPattern(this.fillPatternImage(),this.fillPatternRepeat()||"repeat");if(t&&t.setTransform){const e=new a;e.translate(this.fillPatternX(),this.fillPatternY()),e.rotate(i.getAngle(this.fillPatternRotation())),e.scale(this.fillPatternScaleX(),this.fillPatternScaleY()),e.translate(-1*this.fillPatternOffsetX(),-1*this.fillPatternOffsetY());const r=e.getMatrix();t.setTransform({a:r[0],b:r[1],c:r[2],d:r[3],e:r[4],f:r[5]})}return t}}_getLinearGradient(){return this._getCache(Ot,this.__getLinearGradient)}__getLinearGradient(){var t=this.fillLinearGradientColorStops();if(t){for(var e=Nt(),i=this.fillLinearGradientStartPoint(),r=this.fillLinearGradientEndPoint(),a=e.createLinearGradient(i.x,i.y,r.x,r.y),n=0;n<t.length;n+=2)a.addColorStop(t[n],t[n+1]);return a}}_getRadialGradient(){return this._getCache(It,this.__getRadialGradient)}__getRadialGradient(){var t=this.fillRadialGradientColorStops();if(t){for(var e=Nt(),i=this.fillRadialGradientStartPoint(),r=this.fillRadialGradientEndPoint(),a=e.createRadialGradient(i.x,i.y,this.fillRadialGradientStartRadius(),r.x,r.y,this.fillRadialGradientEndRadius()),n=0;n<t.length;n+=2)a.addColorStop(t[n],t[n+1]);return a}}getShadowRGBA(){return this._getCache(Lt,this._getShadowRGBA)}_getShadowRGBA(){if(this.hasShadow()){var t=g.colorToRGBA(this.shadowColor());return"rgba("+t.r+","+t.g+","+t.b+","+t.a*(this.shadowOpacity()||1)+")"}}hasFill(){return this._calculate("hasFill",["fillEnabled","fill","fillPatternImage","fillLinearGradientColorStops","fillRadialGradientColorStops"],(()=>this.fillEnabled()&&!!(this.fill()||this.fillPatternImage()||this.fillLinearGradientColorStops()||this.fillRadialGradientColorStops())))}hasStroke(){return this._calculate("hasStroke",["strokeEnabled","strokeWidth","stroke","strokeLinearGradientColorStops"],(()=>this.strokeEnabled()&&this.strokeWidth()&&!(!this.stroke()&&!this.strokeLinearGradientColorStops())))}hasHitStroke(){const t=this.hitStrokeWidth();return"auto"===t?this.hasStroke():this.strokeEnabled()&&!!t}intersects(t){var e=this.getStage().bufferHitCanvas;return e.getContext().clear(),this.drawHit(e,null,!0),e.context.getImageData(Math.round(t.x),Math.round(t.y),1,1).data[3]>0}destroy(){return K.prototype.destroy.call(this),delete Bt[this.colorKey],delete this.colorKey,this}_useBufferCanvas(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;const i=t||this.hasFill(),r=this.hasStroke(),a=1!==this.getAbsoluteOpacity();if(i&&r&&a)return!0;const n=this.hasShadow(),s=this.shadowForStrokeEnabled();return!!(i&&r&&n&&s)}setStrokeHitEnabled(t){g.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)}getStrokeHitEnabled(){return 0!==this.hitStrokeWidth()}getSelfRect(){var t=this.size();return{x:this._centroid?-t.width/2:0,y:this._centroid?-t.height/2:0,width:t.width,height:t.height}}getClientRect(t={}){const e=t.skipTransform,i=t.relativeTo,r=this.getSelfRect(),a=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,n=r.width+a,s=r.height+a,o=!t.skipShadow&&this.hasShadow(),h=o?this.shadowOffsetX():0,l=o?this.shadowOffsetY():0,d=n+Math.abs(h),c=s+Math.abs(l),g=o&&this.shadowBlur()||0,u=d+2*g,f=c+2*g;let p=0;Math.round(a/2)!==a/2&&(p=1);const v={width:u+p,height:f+p,x:-Math.round(a/2+g)+Math.min(h,0)+r.x,y:-Math.round(a/2+g)+Math.min(l,0)+r.y};return e?v:this._transformedRect(v,i)}drawScene(t,e){var i,r,a=this.getLayer(),n=t||a.getCanvas(),s=n.getContext(),o=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),d=n.isCache,c=e===this;if(!this.isVisible()&&!c)return this;if(o){s.save();var g=this.getAbsoluteTransform(e).getMatrix();return s.transform(g[0],g[1],g[2],g[3],g[4],g[5]),this._drawCachedSceneCanvas(s),s.restore(),this}if(!h)return this;if(s.save(),this._useBufferCanvas()&&!d){(r=(i=this.getStage().bufferCanvas).getContext()).clear(),r.save(),r._applyLineJoin(this);var u=this.getAbsoluteTransform(e).getMatrix();r.transform(u[0],u[1],u[2],u[3],u[4],u[5]),h.call(this,r,this),r.restore();var f=i.pixelRatio;l&&s._applyShadow(this),s._applyOpacity(this),s._applyGlobalCompositeOperation(this),s.drawImage(i._canvas,0,0,i.width/f,i.height/f)}else{if(s._applyLineJoin(this),!c){u=this.getAbsoluteTransform(e).getMatrix();s.transform(u[0],u[1],u[2],u[3],u[4],u[5]),s._applyOpacity(this),s._applyGlobalCompositeOperation(this)}l&&s._applyShadow(this),h.call(this,s,this)}return s.restore(),this}drawHit(t,e,i=!1){if(!this.shouldDrawHit(e,i))return this;var r=this.getLayer(),a=t||r.hitCanvas,n=a&&a.getContext(),s=this.hitFunc()||this.sceneFunc(),o=this._getCanvasCache(),h=o&&o.hit;if(this.colorKey||g.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()"),h){n.save();var l=this.getAbsoluteTransform(e).getMatrix();return n.transform(l[0],l[1],l[2],l[3],l[4],l[5]),this._drawCachedHitCanvas(n),n.restore(),this}if(!s)return this;n.save(),n._applyLineJoin(this);if(!(this===e)){var d=this.getAbsoluteTransform(e).getMatrix();n.transform(d[0],d[1],d[2],d[3],d[4],d[5])}return s.call(this,n,this),n.restore(),this}drawHitFromCache(t=0){var e,i,r,a,n,s=this._getCanvasCache(),o=this._getCachedSceneCanvas(),h=s.hit,l=h.getContext(),d=h.getWidth(),c=h.getHeight();l.clear(),l.drawImage(o._canvas,0,0,d,c);try{for(r=(i=(e=l.getImageData(0,0,d,c)).data).length,a=g._hexToRgb(this.colorKey),n=0;n<r;n+=4)i[n+3]>t?(i[n]=a.r,i[n+1]=a.g,i[n+2]=a.b,i[n+3]=255):i[n+3]=0;l.putImageData(e,0,0)}catch(t){g.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this}hasPointerCapture(t){return it(t,this)}setPointerCapture(t){rt(t,this)}releaseCapture(t){at(t)}}zt.prototype._fillFunc=function(t){t.fill()},zt.prototype._strokeFunc=function(t){t.stroke()},zt.prototype._fillFuncHit=function(t){t.fill()},zt.prototype._strokeFuncHit=function(t){t.stroke()},zt.prototype._centroid=!1,zt.prototype.nodeType="Shape",r(zt),zt.prototype.eventListeners={},zt.prototype.on.call(zt.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache(Et)})),zt.prototype.on.call(zt.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache(Lt)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva",(function(){this._clearCache(Dt)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache(Ot)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache(It)})),w.addGetterSetter(zt,"stroke",void 0,y()),w.addGetterSetter(zt,"strokeWidth",2,p()),w.addGetterSetter(zt,"fillAfterStrokeEnabled",!1),w.addGetterSetter(zt,"hitStrokeWidth","auto",m()),w.addGetterSetter(zt,"strokeHitEnabled",!0,x()),w.addGetterSetter(zt,"perfectDrawEnabled",!0,x()),w.addGetterSetter(zt,"shadowForStrokeEnabled",!0,x()),w.addGetterSetter(zt,"lineJoin"),w.addGetterSetter(zt,"lineCap"),w.addGetterSetter(zt,"sceneFunc"),w.addGetterSetter(zt,"hitFunc"),w.addGetterSetter(zt,"dash"),w.addGetterSetter(zt,"dashOffset",0,p()),w.addGetterSetter(zt,"shadowColor",void 0,_()),w.addGetterSetter(zt,"shadowBlur",0,p()),w.addGetterSetter(zt,"shadowOpacity",1,p()),w.addComponentsGetterSetter(zt,"shadowOffset",["x","y"]),w.addGetterSetter(zt,"shadowOffsetX",0,p()),w.addGetterSetter(zt,"shadowOffsetY",0,p()),w.addGetterSetter(zt,"fillPatternImage"),w.addGetterSetter(zt,"fill",void 0,y()),w.addGetterSetter(zt,"fillPatternX",0,p()),w.addGetterSetter(zt,"fillPatternY",0,p()),w.addGetterSetter(zt,"fillLinearGradientColorStops"),w.addGetterSetter(zt,"strokeLinearGradientColorStops"),w.addGetterSetter(zt,"fillRadialGradientStartRadius",0),w.addGetterSetter(zt,"fillRadialGradientEndRadius",0),w.addGetterSetter(zt,"fillRadialGradientColorStops"),w.addGetterSetter(zt,"fillPatternRepeat","repeat"),w.addGetterSetter(zt,"fillEnabled",!0),w.addGetterSetter(zt,"strokeEnabled",!0),w.addGetterSetter(zt,"shadowEnabled",!0),w.addGetterSetter(zt,"dashEnabled",!0),w.addGetterSetter(zt,"strokeScaleEnabled",!0),w.addGetterSetter(zt,"fillPriority","color"),w.addComponentsGetterSetter(zt,"fillPatternOffset",["x","y"]),w.addGetterSetter(zt,"fillPatternOffsetX",0,p()),w.addGetterSetter(zt,"fillPatternOffsetY",0,p()),w.addComponentsGetterSetter(zt,"fillPatternScale",["x","y"]),w.addGetterSetter(zt,"fillPatternScaleX",1,p()),w.addGetterSetter(zt,"fillPatternScaleY",1,p()),w.addComponentsGetterSetter(zt,"fillLinearGradientStartPoint",["x","y"]),w.addComponentsGetterSetter(zt,"strokeLinearGradientStartPoint",["x","y"]),w.addGetterSetter(zt,"fillLinearGradientStartPointX",0),w.addGetterSetter(zt,"strokeLinearGradientStartPointX",0),w.addGetterSetter(zt,"fillLinearGradientStartPointY",0),w.addGetterSetter(zt,"strokeLinearGradientStartPointY",0),w.addComponentsGetterSetter(zt,"fillLinearGradientEndPoint",["x","y"]),w.addComponentsGetterSetter(zt,"strokeLinearGradientEndPoint",["x","y"]),w.addGetterSetter(zt,"fillLinearGradientEndPointX",0),w.addGetterSetter(zt,"strokeLinearGradientEndPointX",0),w.addGetterSetter(zt,"fillLinearGradientEndPointY",0),w.addGetterSetter(zt,"strokeLinearGradientEndPointY",0),w.addComponentsGetterSetter(zt,"fillRadialGradientStartPoint",["x","y"]),w.addGetterSetter(zt,"fillRadialGradientStartPointX",0),w.addGetterSetter(zt,"fillRadialGradientStartPointY",0),w.addComponentsGetterSetter(zt,"fillRadialGradientEndPoint",["x","y"]),w.addGetterSetter(zt,"fillRadialGradientEndPointX",0),w.addGetterSetter(zt,"fillRadialGradientEndPointY",0),w.addGetterSetter(zt,"fillPatternRotation",0),w.backCompat(zt,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"});var Wt=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],Ht=Wt.length;class Yt extends J{constructor(t){super(t),this.canvas=new R,this.hitCanvas=new E({pixelRatio:1}),this._waitingForDraw=!1,this.on("visibleChange.konva",this._checkVisibility),this._checkVisibility(),this.on("imageSmoothingEnabledChange.konva",this._setSmoothEnabled),this._setSmoothEnabled()}createPNGStream(){return this.canvas._canvas.createPNGStream()}getCanvas(){return this.canvas}getNativeCanvasElement(){return this.canvas._canvas}getHitCanvas(){return this.hitCanvas}getContext(){return this.getCanvas().getContext()}clear(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this}setZIndex(t){super.setZIndex(t);var e=this.getStage();return e&&e.content&&(e.content.removeChild(this.getNativeCanvasElement()),t<e.children.length-1?e.content.insertBefore(this.getNativeCanvasElement(),e.children[t+1].getCanvas()._canvas):e.content.appendChild(this.getNativeCanvasElement())),this}moveToTop(){K.prototype.moveToTop.call(this);var t=this.getStage();return t&&t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.appendChild(this.getNativeCanvasElement())),!0}moveUp(){if(!K.prototype.moveUp.call(this))return!1;var t=this.getStage();return!(!t||!t.content)&&(t.content.removeChild(this.getNativeCanvasElement()),this.index<t.children.length-1?t.content.insertBefore(this.getNativeCanvasElement(),t.children[this.index+1].getCanvas()._canvas):t.content.appendChild(this.getNativeCanvasElement()),!0)}moveDown(){if(K.prototype.moveDown.call(this)){var t=this.getStage();if(t){var e=t.children;t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.insertBefore(this.getNativeCanvasElement(),e[this.index+1].getCanvas()._canvas))}return!0}return!1}moveToBottom(){if(K.prototype.moveToBottom.call(this)){var t=this.getStage();if(t){var e=t.children;t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.insertBefore(this.getNativeCanvasElement(),e[1].getCanvas()._canvas))}return!0}return!1}getLayer(){return this}remove(){var t=this.getNativeCanvasElement();return K.prototype.remove.call(this),t&&t.parentNode&&g._isInDocument(t)&&t.parentNode.removeChild(t),this}getStage(){return this.parent}setSize({width:t,height:e}){return this.canvas.setSize(t,e),this.hitCanvas.setSize(t,e),this._setSmoothEnabled(),this}_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&g.throw("You may only add groups and shapes to a layer.")}_toKonvaCanvas(t){return(t=t||{}).width=t.width||this.getWidth(),t.height=t.height||this.getHeight(),t.x=void 0!==t.x?t.x:this.x(),t.y=void 0!==t.y?t.y:this.y(),K.prototype._toKonvaCanvas.call(this,t)}_checkVisibility(){const t=this.visible();this.canvas._canvas.style.display=t?"block":"none"}_setSmoothEnabled(){this.getContext()._context.imageSmoothingEnabled=this.imageSmoothingEnabled()}getWidth(){if(this.parent)return this.parent.width()}setWidth(){g.warn('Can not change width of layer. Use "stage.width(value)" function instead.')}getHeight(){if(this.parent)return this.parent.height()}setHeight(){g.warn('Can not change height of layer. Use "stage.height(value)" function instead.')}batchDraw(){return this._waitingForDraw||(this._waitingForDraw=!0,g.requestAnimFrame((()=>{this.draw(),this._waitingForDraw=!1}))),this}getIntersection(t){if(!this.isListening()||!this.isVisible())return null;for(var e=1,i=!1;;){for(let r=0;r<Ht;r++){const a=Wt[r],n=this._getIntersection({x:t.x+a.x*e,y:t.y+a.y*e}),s=n.shape;if(s)return s;if(i=!!n.antialiased,!n.antialiased)break}if(!i)return null;e+=1}}_getIntersection(t){const e=this.hitCanvas.pixelRatio,i=this.hitCanvas.context.getImageData(Math.round(t.x*e),Math.round(t.y*e),1,1).data,r=i[3];if(255===r){const t=g._rgbToHex(i[0],i[1],i[2]),e=Bt["#"+t];return e?{shape:e}:{antialiased:!0}}return r>0?{antialiased:!0}:{}}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&r.getContext().clear(),J.prototype.drawScene.call(this,r,e),this._fire("draw",{node:this}),this}drawHit(t,e){var i=this.getLayer(),r=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),J.prototype.drawHit.call(this,r,e),this}enableHitGraph(){return this.hitGraphEnabled(!0),this}disableHitGraph(){return this.hitGraphEnabled(!1),this}setHitGraphEnabled(t){g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)}getHitGraphEnabled(t){return g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()}toggleHitCanvas(){if(this.parent&&this.parent.content){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}}}Yt.prototype.nodeType="Layer",r(Yt),w.addGetterSetter(Yt,"imageSmoothingEnabled",!0),w.addGetterSetter(Yt,"clearBeforeDraw",!0),w.addGetterSetter(Yt,"hitGraphEnabled",!0,x());class Xt extends Yt{constructor(t){super(t),this.listening(!1),g.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.')}}Xt.prototype.nodeType="FastLayer",r(Xt);class jt extends J{_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&g.throw("You may only add groups and shapes to groups.")}}jt.prototype.nodeType="Group",r(jt);var Ut=e.performance&&e.performance.now?function(){return e.performance.now()}:function(){return(new Date).getTime()};class qt{constructor(t,e){this.id=qt.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:Ut(),frameRate:0},this.func=t,this.setLayers(e)}setLayers(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this}getLayers(){return this.layers}addLayer(t){var e,i=this.layers,r=i.length;for(e=0;e<r;e++)if(i[e]._id===t._id)return!1;return this.layers.push(t),!0}isRunning(){var t,e=qt.animations,i=e.length;for(t=0;t<i;t++)if(e[t].id===this.id)return!0;return!1}start(){return this.stop(),this.frame.timeDiff=0,this.frame.lastTime=Ut(),qt._addAnimation(this),this}stop(){return qt._removeAnimation(this),this}_updateFrameObject(t){this.frame.timeDiff=t-this.frame.lastTime,this.frame.lastTime=t,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}static _addAnimation(t){this.animations.push(t),this._handleAnimation()}static _removeAnimation(t){var e,i=t.id,r=this.animations,a=r.length;for(e=0;e<a;e++)if(r[e].id===i){this.animations.splice(e,1);break}}static _runFrames(){var t,e,i,r,a,n,s,o,h={},l=this.animations;for(r=0;r<l.length;r++)if(e=(t=l[r]).layers,i=t.func,t._updateFrameObject(Ut()),n=e.length,!i||!1!==i.call(t,t.frame))for(a=0;a<n;a++)void 0!==(s=e[a])._id&&(h[s._id]=s);for(o in h)h.hasOwnProperty(o)&&h[o].batchDraw()}static _animationLoop(){var t=qt;t.animations.length?(t._runFrames(),g.requestAnimFrame(t._animationLoop)):t.animRunning=!1}static _handleAnimation(){this.animRunning||(this.animRunning=!0,g.requestAnimFrame(this._animationLoop))}}qt.animations=[],qt.animIdCounter=0,qt.animRunning=!1;var Vt={node:1,duration:1,easing:1,onFinish:1,yoyo:1},Kt=0,Qt=["fill","stroke","shadowColor"];class Jt{constructor(t,e,i,r,a,n,s){this.prop=t,this.propFunc=e,this.begin=r,this._pos=r,this.duration=n,this._change=0,this.prevPos=0,this.yoyo=s,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=i,this._change=a-this.begin,this.pause()}fire(t){var e=this[t];e&&e()}setTime(t){t>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())}getTime(){return this._time}setPosition(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t}getPosition(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)}play(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")}reverse(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")}seek(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")}reset(){this.pause(),this._time=0,this.update(),this.fire("onReset")}finish(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")}update(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")}onEnterFrame(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)}pause(){this.state=1,this.fire("onPause")}getTimer(){return(new Date).getTime()}}class Zt{constructor(t){var e,r,a=this,n=t.node,s=n._id,o=t.easing||$t.Linear,h=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=Kt++;var l=n.getLayer()||(n instanceof i.Stage?n.getLayers():null);for(r in l||g.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new qt((function(){a.tween.onEnterFrame()}),l),this.tween=new Jt(r,(function(t){a._tweenFunc(t)}),o,0,1,1e3*e,h),this._addListeners(),Zt.attrs[s]||(Zt.attrs[s]={}),Zt.attrs[s][this._id]||(Zt.attrs[s][this._id]={}),Zt.tweens[s]||(Zt.tweens[s]={}),t)void 0===Vt[r]&&this._addAttr(r,t[r]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset,this.onUpdate=t.onUpdate}_addAttr(t,e){var i,r,a,n,s,o,h,l,d=this.node,c=d._id;if((a=Zt.tweens[c][t])&&delete Zt.attrs[c][a][t],i=d.getAttr(t),g._isArray(e))if(r=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=g._prepareArrayForTween(i,e,d.closed())):(o=e,e=g._prepareArrayForTween(e,i,d.closed()))),0===t.indexOf("fill"))for(n=0;n<s;n++)if(n%2==0)r.push(e[n]-i[n]);else{var u=g.colorToRGBA(i[n]);l=g.colorToRGBA(e[n]),i[n]=u,r.push({r:l.r-u.r,g:l.g-u.g,b:l.b-u.b,a:l.a-u.a})}else for(n=0;n<s;n++)r.push(e[n]-i[n]);else-1!==Qt.indexOf(t)?(i=g.colorToRGBA(i),r={r:(l=g.colorToRGBA(e)).r-i.r,g:l.g-i.g,b:l.b-i.b,a:l.a-i.a}):r=e-i;Zt.attrs[c][this._id][t]={start:i,diff:r,end:e,trueEnd:o,trueStart:h},Zt.tweens[c][t]=this._id}_tweenFunc(t){var e,i,r,a,n,s,o,h,l=this.node,d=Zt.attrs[l._id][this._id];for(e in d){if(r=(i=d[e]).start,a=i.diff,h=i.end,g._isArray(r))if(n=[],o=Math.max(r.length,h.length),0===e.indexOf("fill"))for(s=0;s<o;s++)s%2==0?n.push((r[s]||0)+a[s]*t):n.push("rgba("+Math.round(r[s].r+a[s].r*t)+","+Math.round(r[s].g+a[s].g*t)+","+Math.round(r[s].b+a[s].b*t)+","+(r[s].a+a[s].a*t)+")");else for(s=0;s<o;s++)n.push((r[s]||0)+a[s]*t);else n=-1!==Qt.indexOf(e)?"rgba("+Math.round(r.r+a.r*t)+","+Math.round(r.g+a.g*t)+","+Math.round(r.b+a.b*t)+","+(r.a+a.a*t)+")":r+a*t;l.setAttr(e,n)}}_addListeners(){this.tween.onPlay=()=>{this.anim.start()},this.tween.onReverse=()=>{this.anim.start()},this.tween.onPause=()=>{this.anim.stop()},this.tween.onFinish=()=>{var t=this.node,e=Zt.attrs[t._id][this._id];e.points&&e.points.trueEnd&&t.setAttr("points",e.points.trueEnd),this.onFinish&&this.onFinish.call(this)},this.tween.onReset=()=>{var t=this.node,e=Zt.attrs[t._id][this._id];e.points&&e.points.trueStart&&t.points(e.points.trueStart),this.onReset&&this.onReset()},this.tween.onUpdate=()=>{this.onUpdate&&this.onUpdate.call(this)}}play(){return this.tween.play(),this}reverse(){return this.tween.reverse(),this}reset(){return this.tween.reset(),this}seek(t){return this.tween.seek(1e3*t),this}pause(){return this.tween.pause(),this}finish(){return this.tween.finish(),this}destroy(){var t,e=this.node._id,i=this._id,r=Zt.tweens[e];for(t in this.pause(),r)delete Zt.tweens[e][t];delete Zt.attrs[e][i]}}Zt.attrs={},Zt.tweens={},K.prototype.to=function(t){var e=t.onFinish;t.node=this,t.onFinish=function(){this.destroy(),e&&e()},new Zt(t).play()};const $t={BackEaseIn(t,e,i,r){var a=1.70158;return i*(t/=r)*t*((a+1)*t-a)+e},BackEaseOut(t,e,i,r){var a=1.70158;return i*((t=t/r-1)*t*((a+1)*t+a)+1)+e},BackEaseInOut(t,e,i,r){var a=1.70158;return(t/=r/2)<1?i/2*(t*t*((1+(a*=1.525))*t-a))+e:i/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+e},ElasticEaseIn(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),-a*Math.pow(2,10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)+e)},ElasticEaseOut(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),a*Math.pow(2,-10*t)*Math.sin((t*r-s)*(2*Math.PI)/n)+i+e)},ElasticEaseInOut(t,e,i,r,a,n){var s=0;return 0===t?e:2==(t/=r/2)?e+i:(n||(n=r*(.3*1.5)),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),t<1?a*Math.pow(2,10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)*-.5+e:a*Math.pow(2,-10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)*.5+i+e)},BounceEaseOut:(t,e,i,r)=>(t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e,BounceEaseIn:(t,e,i,r)=>i-$t.BounceEaseOut(r-t,0,i,r)+e,BounceEaseInOut:(t,e,i,r)=>t<r/2?.5*$t.BounceEaseIn(2*t,0,i,r)+e:.5*$t.BounceEaseOut(2*t-r,0,i,r)+.5*i+e,EaseIn:(t,e,i,r)=>i*(t/=r)*t+e,EaseOut:(t,e,i,r)=>-i*(t/=r)*(t-2)+e,EaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e,StrongEaseIn:(t,e,i,r)=>i*(t/=r)*t*t*t*t+e,StrongEaseOut:(t,e,i,r)=>i*((t=t/r-1)*t*t*t*t+1)+e,StrongEaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e,Linear:(t,e,i,r)=>i*t/r+e},te=g._assign(i,{Util:g,Transform:a,Node:K,Container:J,Stage:Rt,stages:Gt,Layer:Yt,FastLayer:Xt,Group:jt,DD:L,Shape:zt,shapes:Bt,Animation:qt,Tween:Zt,Easings:$t,Context:P,Canvas:G});class ee extends zt{_sceneFunc(t){var e=i.getAngle(this.angle()),r=this.clockwise();t.beginPath(),t.arc(0,0,this.outerRadius(),0,e,r),t.arc(0,0,this.innerRadius(),e,0,!r),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}function ie(t,e,i,r,a,n,s){var o=Math.sqrt(Math.pow(i-t,2)+Math.pow(r-e,2)),h=Math.sqrt(Math.pow(a-i,2)+Math.pow(n-r,2)),l=s*o/(o+h),d=s*h/(o+h);return[i-l*(a-t),r-l*(n-e),i+d*(a-t),r+d*(n-e)]}function re(t,e){var i,r,a=t.length,n=[];for(i=2;i<a-2;i+=2)r=ie(t[i-2],t[i-1],t[i],t[i+1],t[i+2],t[i+3],e),isNaN(r[0])||(n.push(r[0]),n.push(r[1]),n.push(t[i]),n.push(t[i+1]),n.push(r[2]),n.push(r[3]));return n}ee.prototype._centroid=!0,ee.prototype.className="Arc",ee.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(ee),w.addGetterSetter(ee,"innerRadius",0,p()),w.addGetterSetter(ee,"outerRadius",0,p()),w.addGetterSetter(ee,"angle",0,p()),w.addGetterSetter(ee,"clockwise",!1,x());class ae extends zt{constructor(t){super(t),this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",(function(){this._clearCache("tensionPoints")}))}_sceneFunc(t){var e,i,r,a=this.points(),n=a.length,s=this.tension(),o=this.closed(),h=this.bezier();if(n){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==s&&n>4){for(i=(e=this.getTensionPoints()).length,r=o?0:4,o||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);r<i-2;)t.bezierCurveTo(e[r++],e[r++],e[r++],e[r++],e[r++],e[r++]);o||t.quadraticCurveTo(e[i-2],e[i-1],a[n-2],a[n-1])}else if(h)for(r=2;r<n;)t.bezierCurveTo(a[r++],a[r++],a[r++],a[r++],a[r++],a[r++]);else for(r=2;r<n;r+=2)t.lineTo(a[r],a[r+1]);o?(t.closePath(),t.fillStrokeShape(this)):t.strokeShape(this)}}getTensionPoints(){return this._getCache("tensionPoints",this._getTensionPoints)}_getTensionPoints(){return this.closed()?this._getTensionPointsClosed():re(this.points(),this.tension())}_getTensionPointsClosed(){var t=this.points(),e=t.length,i=this.tension(),r=ie(t[e-2],t[e-1],t[0],t[1],t[2],t[3],i),a=ie(t[e-4],t[e-3],t[e-2],t[e-1],t[0],t[1],i),n=re(t,i);return[r[2],r[3]].concat(n).concat([a[0],a[1],t[e-2],t[e-1],a[2],a[3],r[0],r[1],t[0],t[1]])}getWidth(){return this.getSelfRect().width}getHeight(){return this.getSelfRect().height}getSelfRect(){var t=this.points();if(t.length<4)return{x:t[0]||0,y:t[1]||0,width:0,height:0};for(var e,i,r=(t=0!==this.tension()?[t[0],t[1],...this._getTensionPoints(),t[t.length-2],t[t.length-1]]:this.points())[0],a=t[0],n=t[1],s=t[1],o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],r=Math.min(r,e),a=Math.max(a,e),n=Math.min(n,i),s=Math.max(s,i);return{x:r,y:n,width:a-r,height:s-n}}}ae.prototype.className="Line",ae.prototype._attrsAffectingSize=["points","bezier","tension"],r(ae),w.addGetterSetter(ae,"closed",!1),w.addGetterSetter(ae,"bezier",!1),w.addGetterSetter(ae,"tension",0,p()),w.addGetterSetter(ae,"points",[],function(){if(i.isUnminified)return function(t,e){return g._isArray(t)?t.forEach((function(t){g._isNumber(t)||g.warn('"'+e+'" attribute has non numeric element '+t+". Make sure that all elements are numbers.")})):g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a array of numbers.'),t}}());class ne extends zt{constructor(t){super(t),this.dataArray=[],this.pathLength=0,this.dataArray=ne.parsePathData(this.data()),this.pathLength=0;for(var e=0;e<this.dataArray.length;++e)this.pathLength+=this.dataArray[e].pathLength;this.on("dataChange.konva",(function(){this.dataArray=ne.parsePathData(this.data()),this.pathLength=0;for(var t=0;t<this.dataArray.length;++t)this.pathLength+=this.dataArray[t].pathLength}))}_sceneFunc(t){var e=this.dataArray;t.beginPath();for(var i=!1,r=0;r<e.length;r++){var a=e[r].command,n=e[r].points;switch(a){case"L":t.lineTo(n[0],n[1]);break;case"M":t.moveTo(n[0],n[1]);break;case"C":t.bezierCurveTo(n[0],n[1],n[2],n[3],n[4],n[5]);break;case"Q":t.quadraticCurveTo(n[0],n[1],n[2],n[3]);break;case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6],u=n[7],f=h>l?h:l,p=h>l?1:h/l,v=h>l?l/h:1;t.translate(s,o),t.rotate(g),t.scale(p,v),t.arc(0,0,f,d,d+c,1-u),t.scale(1/p,1/v),t.rotate(-g),t.translate(-s,-o);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)}getSelfRect(){var t=[];this.dataArray.forEach((function(e){if("A"===e.command){var i=e.points[4],r=e.points[5],a=e.points[4]+r,n=Math.PI/180;if(Math.abs(i-a)<n&&(n=Math.abs(i-a)),r<0)for(let r=i-n;r>a;r-=n){const i=ne.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}else for(let r=i+n;r<a;r+=n){const i=ne.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}}else if("C"===e.command)for(let i=0;i<=1;i+=.01){const r=ne.getPointOnCubicBezier(i,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3],e.points[4],e.points[5]);t.push(r.x,r.y)}else t=t.concat(e.points)}));for(var e,i,r=t[0],a=t[0],n=t[1],s=t[1],o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],isNaN(e)||(r=Math.min(r,e),a=Math.max(a,e)),isNaN(i)||(n=Math.min(n,i),s=Math.max(s,i));return{x:Math.round(r),y:Math.round(n),width:Math.round(a-r),height:Math.round(s-n)}}getLength(){return this.pathLength}getPointAtLength(t){var e,i=0,r=this.dataArray.length;if(!r)return null;for(;i<r&&t>this.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],n=a.points;switch(a.command){case"L":return ne.getPointOnLine(t,a.start.x,a.start.y,n[0],n[1]);case"C":return ne.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3],n[4],n[5]);case"Q":return ne.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3]);case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6];return d+=c*t/a.pathLength,ne.getPointOnEllipticalArc(s,o,h,l,d,g)}return null}static getLineLength(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))}static getPointOnLine(t,e,i,r,a,n,s){void 0===n&&(n=e),void 0===s&&(s=i);var o=(a-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+o*o));r<e&&(h*=-1);var l,d=o*h;if(r===e)l={x:n,y:s+d};else if((s-i)/(n-e+1e-8)===o)l={x:n+h,y:s+d};else{var c,g,u=this.getLineLength(e,i,r,a),f=(n-e)*(r-e)+(s-i)*(a-i);c=e+(f/=u*u)*(r-e),g=i+f*(a-i);var p=this.getLineLength(n,s,c,g),v=Math.sqrt(t*t-p*p);h=Math.sqrt(v*v/(1+o*o)),r<e&&(h*=-1),l={x:c+h,y:g+(d=o*h)}}return l}static getPointOnCubicBezier(t,e,i,r,a,n,s,o,h){function l(t){return t*t*t}function d(t){return 3*t*t*(1-t)}function c(t){return 3*t*(1-t)*(1-t)}function g(t){return(1-t)*(1-t)*(1-t)}return{x:o*l(t)+n*d(t)+r*c(t)+e*g(t),y:h*l(t)+s*d(t)+a*c(t)+i*g(t)}}static getPointOnQuadraticBezier(t,e,i,r,a,n,s){function o(t){return t*t}function h(t){return 2*t*(1-t)}function l(t){return(1-t)*(1-t)}return{x:n*o(t)+r*h(t)+e*l(t),y:s*o(t)+a*h(t)+i*l(t)}}static getPointOnEllipticalArc(t,e,i,r,a,n){var s=Math.cos(n),o=Math.sin(n),h=i*Math.cos(a),l=r*Math.sin(a);return{x:t+(h*s-l*o),y:e+(h*o+l*s)}}static parsePathData(t){if(!t)return[];var e=t,i=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];e=e.replace(new RegExp(" ","g"),",");for(var r=0;r<i.length;r++)e=e.replace(new RegExp(i[r],"g"),"|"+i[r]);var a,n=e.split("|"),s=[],o=[],h=0,l=0,d=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;for(r=1;r<n.length;r++){var c=n[r],g=c.charAt(0);for(c=c.slice(1),o.length=0;a=d.exec(c);)o.push(a[0]);for(var u=[],f=0,p=o.length;f<p;f++)if("00"!==o[f]){var v=parseFloat(o[f]);isNaN(v)?u.push(0):u.push(v)}else u.push(0,0);for(;u.length>0&&!isNaN(u[0]);){var m,_,y,x,b,S,w,C,k,P,T=null,A=[],M=h,G=l;switch(g){case"l":h+=u.shift(),l+=u.shift(),T="L",A.push(h,l);break;case"L":h=u.shift(),l=u.shift(),A.push(h,l);break;case"m":var R=u.shift(),E=u.shift();if(h+=R,l+=E,T="M",s.length>2&&"z"===s[s.length-1].command)for(var L=s.length-2;L>=0;L--)if("M"===s[L].command){h=s[L].points[0]+R,l=s[L].points[1]+E;break}A.push(h,l),g="l";break;case"M":h=u.shift(),l=u.shift(),T="M",A.push(h,l),g="L";break;case"h":h+=u.shift(),T="L",A.push(h,l);break;case"H":h=u.shift(),T="L",A.push(h,l);break;case"v":l+=u.shift(),T="L",A.push(h,l);break;case"V":l=u.shift(),T="L",A.push(h,l);break;case"C":A.push(u.shift(),u.shift(),u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"c":A.push(h+u.shift(),l+u.shift(),h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"S":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,u.shift(),u.shift()),h=u.shift(),l=u.shift(),T="C",A.push(h,l);break;case"s":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"Q":A.push(u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"q":A.push(h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="Q",A.push(h,l);break;case"T":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h=u.shift(),l=u.shift(),T="Q",A.push(_,y,h,l);break;case"t":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h+=u.shift(),l+=u.shift(),T="Q",A.push(_,y,h,l);break;case"A":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),k=h,P=l,h=u.shift(),l=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(k,P,h,l,w,C,x,b,S);break;case"a":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),k=h,P=l,h+=u.shift(),l+=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(k,P,h,l,w,C,x,b,S)}s.push({command:T||g,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||g,A)})}"z"!==g&&"Z"!==g||s.push({command:"z",points:[],start:void 0,pathLength:0})}return s}static calcLength(t,e,i,r){var a,n,s,o,h=ne;switch(i){case"L":return h.getLineLength(t,e,r[0],r[1]);case"C":for(a=0,n=h.getPointOnCubicBezier(0,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),o=.01;o<=1;o+=.01)s=h.getPointOnCubicBezier(o,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"Q":for(a=0,n=h.getPointOnQuadraticBezier(0,t,e,r[0],r[1],r[2],r[3]),o=.01;o<=1;o+=.01)s=h.getPointOnQuadraticBezier(o,t,e,r[0],r[1],r[2],r[3]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"A":a=0;var l=r[4],d=r[5],c=r[4]+d,g=Math.PI/180;if(Math.abs(l-c)<g&&(g=Math.abs(l-c)),n=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],l,0),d<0)for(o=l-g;o>c;o-=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;else for(o=l+g;o<c;o+=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],c,0),a+=h.getLineLength(n.x,n.y,s.x,s.y)}return 0}static convertEndpointToCenterParameterization(t,e,i,r,a,n,s,o,h){var l=h*(Math.PI/180),d=Math.cos(l)*(t-i)/2+Math.sin(l)*(e-r)/2,c=-1*Math.sin(l)*(t-i)/2+Math.cos(l)*(e-r)/2,g=d*d/(s*s)+c*c/(o*o);g>1&&(s*=Math.sqrt(g),o*=Math.sqrt(g));var u=Math.sqrt((s*s*(o*o)-s*s*(c*c)-o*o*(d*d))/(s*s*(c*c)+o*o*(d*d)));a===n&&(u*=-1),isNaN(u)&&(u=0);var f=u*s*c/o,p=u*-o*d/s,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*p,m=(e+r)/2+Math.sin(l)*f+Math.cos(l)*p,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},x=function(t,e){return(t[0]*e[1]<t[1]*e[0]?-1:1)*Math.acos(y(t,e))},b=x([1,0],[(d-f)/s,(c-p)/o]),S=[(d-f)/s,(c-p)/o],w=[(-1*d-f)/s,(-1*c-p)/o],C=x(S,w);return y(S,w)<=-1&&(C=Math.PI),y(S,w)>=1&&(C=0),0===n&&C>0&&(C-=2*Math.PI),1===n&&C<0&&(C+=2*Math.PI),[v,m,s,o,b,C,l,n]}}ne.prototype.className="Path",ne.prototype._attrsAffectingSize=["data"],r(ne),w.addGetterSetter(ne,"data");class se extends ae{_sceneFunc(t){super._sceneFunc(t);var e=2*Math.PI,i=this.points(),r=i,a=0!==this.tension()&&i.length>4;a&&(r=this.getTensionPoints());var n,s,o=this.pointerLength(),h=i.length;if(a){const t=[r[r.length-4],r[r.length-3],r[r.length-2],r[r.length-1],i[h-2],i[h-1]],e=ne.calcLength(r[r.length-4],r[r.length-3],"C",t),a=ne.getPointOnQuadraticBezier(Math.min(1,1-o/e),t[0],t[1],t[2],t[3],t[4],t[5]);n=i[h-2]-a.x,s=i[h-1]-a.y}else n=i[h-2]-i[h-4],s=i[h-1]-i[h-3];var l=(Math.atan2(s,n)+e)%e,d=this.pointerWidth();this.pointerAtEnding()&&(t.save(),t.beginPath(),t.translate(i[h-2],i[h-1]),t.rotate(l),t.moveTo(0,0),t.lineTo(-o,d/2),t.lineTo(-o,-d/2),t.closePath(),t.restore()),this.pointerAtBeginning()&&(t.save(),t.beginPath(),t.translate(i[0],i[1]),a?(n=(r[0]+r[2])/2-i[0],s=(r[1]+r[3])/2-i[1]):(n=i[2]-i[0],s=i[3]-i[1]),t.rotate((Math.atan2(-s,-n)+e)%e),t.moveTo(0,0),t.lineTo(-o,d/2),t.lineTo(-o,-d/2),t.closePath(),t.restore());if(this.pointerAtEnding()||this.pointerAtBeginning()){var c=this.dashEnabled();c&&(this.attrs.dashEnabled=!1,t.setLineDash([])),t.fillStrokeShape(this),c&&(this.attrs.dashEnabled=!0)}}getSelfRect(){const t=super.getSelfRect(),e=this.pointerWidth()/2;return{x:t.x-e,y:t.y-e,width:t.width+2*e,height:t.height+2*e}}}se.prototype.className="Arrow",r(se),w.addGetterSetter(se,"pointerLength",10,p()),w.addGetterSetter(se,"pointerWidth",10,p()),w.addGetterSetter(se,"pointerAtBeginning",!1),w.addGetterSetter(se,"pointerAtEnding",!0);class oe extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius()!==t/2&&this.radius(t/2)}setHeight(t){this.radius()!==t/2&&this.radius(t/2)}}oe.prototype._centroid=!0,oe.prototype.className="Circle",oe.prototype._attrsAffectingSize=["radius"],r(oe),w.addGetterSetter(oe,"radius",0,p());class he extends zt{_sceneFunc(t){var e=this.radiusX(),i=this.radiusY();t.beginPath(),t.save(),e!==i&&t.scale(1,i/e),t.arc(0,0,e,0,2*Math.PI,!1),t.restore(),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radiusX()}getHeight(){return 2*this.radiusY()}setWidth(t){this.radiusX(t/2)}setHeight(t){this.radiusY(t/2)}}he.prototype.className="Ellipse",he.prototype._centroid=!0,he.prototype._attrsAffectingSize=["radiusX","radiusY"],r(he),w.addComponentsGetterSetter(he,"radius",["x","y"]),w.addGetterSetter(he,"radiusX",0,p()),w.addGetterSetter(he,"radiusY",0,p());class le extends zt{constructor(t){super(t),this.on("imageChange.konva",(()=>{this._setImageLoad()})),this._setImageLoad()}_setImageLoad(){const t=this.image();t&&t.complete||t&&4===t.readyState||t&&t.addEventListener&&t.addEventListener("load",(()=>{this._requestDraw()}))}_useBufferCanvas(){return super._useBufferCanvas(!0)}_sceneFunc(t){const e=this.getWidth(),i=this.getHeight(),r=this.attrs.image;let a;if(r){const t=this.attrs.cropWidth,n=this.attrs.cropHeight;a=t&&n?[r,this.cropX(),this.cropY(),t,n,0,0,e,i]:[r,0,0,e,i]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,a)}_hitFunc(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}getWidth(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.width}getHeight(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.height}static fromURL(t,e){var i=g.createImageElement();i.onload=function(){var t=new le({image:i});e(t)},i.crossOrigin="Anonymous",i.src=t}}le.prototype.className="Image",r(le),w.addGetterSetter(le,"image"),w.addComponentsGetterSetter(le,"crop",["x","y","width","height"]),w.addGetterSetter(le,"cropX",0,p()),w.addGetterSetter(le,"cropY",0,p()),w.addGetterSetter(le,"cropWidth",0,p()),w.addGetterSetter(le,"cropHeight",0,p());var de=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width","height"],ce="up",ge="right",ue="down",fe="left",pe=de.length;class ve extends jt{constructor(t){super(t),this.on("add.konva",(function(t){this._addListeners(t.child),this._sync()}))}getText(){return this.find("Text")[0]}getTag(){return this.find("Tag")[0]}_addListeners(t){var e,i=this,r=function(){i._sync()};for(e=0;e<pe;e++)t.on(de[e]+"Change.konva",r)}getWidth(){return this.getText().width()}getHeight(){return this.getText().height()}_sync(){var t,e,i,r,a,n,s,o=this.getText(),h=this.getTag();if(o&&h){switch(t=o.width(),e=o.height(),i=h.pointerDirection(),r=h.pointerWidth(),s=h.pointerHeight(),a=0,n=0,i){case ce:a=t/2,n=-1*s;break;case ge:a=t+r,n=e/2;break;case ue:a=t/2,n=e+s;break;case fe:a=-1*r,n=e/2}h.setAttrs({x:-1*a,y:-1*n,width:t,height:e}),o.setAttrs({x:-1*a,y:-1*n})}}}ve.prototype.className="Label",r(ve);class me extends zt{_sceneFunc(t){var e=this.width(),i=this.height(),r=this.pointerDirection(),a=this.pointerWidth(),n=this.pointerHeight(),s=this.cornerRadius();let o=0,h=0,l=0,d=0;"number"==typeof s?o=h=l=d=Math.min(s,e/2,i/2):(o=Math.min(s[0]||0,e/2,i/2),h=Math.min(s[1]||0,e/2,i/2),d=Math.min(s[2]||0,e/2,i/2),l=Math.min(s[3]||0,e/2,i/2)),t.beginPath(),t.moveTo(o,0),r===ce&&(t.lineTo((e-a)/2,0),t.lineTo(e/2,-1*n),t.lineTo((e+a)/2,0)),t.lineTo(e-h,0),t.arc(e-h,h,h,3*Math.PI/2,0,!1),r===ge&&(t.lineTo(e,(i-n)/2),t.lineTo(e+a,i/2),t.lineTo(e,(i+n)/2)),t.lineTo(e,i-d),t.arc(e-d,i-d,d,0,Math.PI/2,!1),r===ue&&(t.lineTo((e+a)/2,i),t.lineTo(e/2,i+n),t.lineTo((e-a)/2,i)),t.lineTo(l,i),t.arc(l,i-l,l,Math.PI/2,Math.PI,!1),r===fe&&(t.lineTo(0,(i+n)/2),t.lineTo(-1*a,i/2),t.lineTo(0,(i-n)/2)),t.lineTo(0,o),t.arc(o,o,o,Math.PI,3*Math.PI/2,!1),t.closePath(),t.fillStrokeShape(this)}getSelfRect(){var t=0,e=0,i=this.pointerWidth(),r=this.pointerHeight(),a=this.pointerDirection(),n=this.width(),s=this.height();return a===ce?(e-=r,s+=r):a===ue?s+=r:a===fe?(t-=1.5*i,n+=i):a===ge&&(n+=1.5*i),{x:t,y:e,width:n,height:s}}}me.prototype.className="Tag",r(me),w.addGetterSetter(me,"pointerDirection","none"),w.addGetterSetter(me,"pointerWidth",0,p()),w.addGetterSetter(me,"pointerHeight",0,p()),w.addGetterSetter(me,"cornerRadius",0,v(4));class _e extends zt{_sceneFunc(t){var e=this.cornerRadius(),i=this.width(),r=this.height();if(t.beginPath(),e){let a=0,n=0,s=0,o=0;"number"==typeof e?a=n=s=o=Math.min(e,i/2,r/2):(a=Math.min(e[0]||0,i/2,r/2),n=Math.min(e[1]||0,i/2,r/2),o=Math.min(e[2]||0,i/2,r/2),s=Math.min(e[3]||0,i/2,r/2)),t.moveTo(a,0),t.lineTo(i-n,0),t.arc(i-n,n,n,3*Math.PI/2,0,!1),t.lineTo(i,r-o),t.arc(i-o,r-o,o,0,Math.PI/2,!1),t.lineTo(s,r),t.arc(s,r-s,s,Math.PI/2,Math.PI,!1),t.lineTo(0,a),t.arc(a,a,a,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,r);t.closePath(),t.fillStrokeShape(this)}}_e.prototype.className="Rect",r(_e),w.addGetterSetter(_e,"cornerRadius",0,v(4));class ye extends zt{_sceneFunc(t){const e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i<e.length;i++)t.lineTo(e[i].x,e[i].y);t.closePath(),t.fillStrokeShape(this)}_getPoints(){const t=this.attrs.sides,e=this.attrs.radius||0,i=[];for(var r=0;r<t;r++)i.push({x:e*Math.sin(2*r*Math.PI/t),y:-1*e*Math.cos(2*r*Math.PI/t)});return i}getSelfRect(){const t=this._getPoints();var e=t[0].x,i=t[0].y,r=t[0].x,a=t[0].y;return t.forEach((t=>{e=Math.min(e,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),a=Math.max(a,t.y)})),{x:e,y:r,width:i-e,height:a-r}}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}ye.prototype.className="RegularPolygon",ye.prototype._centroid=!0,ye.prototype._attrsAffectingSize=["radius"],r(ye),w.addGetterSetter(ye,"radius",0,p()),w.addGetterSetter(ye,"sides",0,p());var xe=2*Math.PI;class be extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.innerRadius(),0,xe,!1),t.moveTo(this.outerRadius(),0),t.arc(0,0,this.outerRadius(),xe,0,!0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}be.prototype.className="Ring",be.prototype._centroid=!0,be.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(be),w.addGetterSetter(be,"innerRadius",0,p()),w.addGetterSetter(be,"outerRadius",0,p());class Se extends zt{constructor(t){super(t),this._updated=!0,this.anim=new qt((()=>{var t=this._updated;return this._updated=!1,t})),this.on("animationChange.konva",(function(){this.frameIndex(0)})),this.on("frameIndexChange.konva",(function(){this._updated=!0})),this.on("frameRateChange.konva",(function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}))}_sceneFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+0],o=a[r+1],h=a[r+2],l=a[r+3],d=this.image();if((this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,h,l),t.closePath(),t.fillStrokeShape(this)),d)if(n){var c=n[e],g=2*i;t.drawImage(d,s,o,h,l,c[g+0],c[g+1],h,l)}else t.drawImage(d,s,o,h,l,0,0,h,l)}_hitFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+2],o=a[r+3];if(t.beginPath(),n){var h=n[e],l=2*i;t.rect(h[l+0],h[l+1],s,o)}else t.rect(0,0,s,o);t.closePath(),t.fillShape(this)}_useBufferCanvas(){return super._useBufferCanvas(!0)}_setInterval(){var t=this;this.interval=setInterval((function(){t._updateIndex()}),1e3/this.frameRate())}start(){if(!this.isRunning()){var t=this.getLayer();this.anim.setLayers(t),this._setInterval(),this.anim.start()}}stop(){this.anim.stop(),clearInterval(this.interval)}isRunning(){return this.anim.isRunning()}_updateIndex(){var t=this.frameIndex(),e=this.animation();t<this.animations()[e].length/4-1?this.frameIndex(t+1):this.frameIndex(0)}}Se.prototype.className="Sprite",r(Se),w.addGetterSetter(Se,"animation"),w.addGetterSetter(Se,"animations"),w.addGetterSetter(Se,"frameOffsets"),w.addGetterSetter(Se,"image"),w.addGetterSetter(Se,"frameIndex",0,p()),w.addGetterSetter(Se,"frameRate",17,p()),w.backCompat(Se,{index:"frameIndex",getIndex:"getFrameIndex",setIndex:"setFrameIndex"});class we extends zt{_sceneFunc(t){var e=this.innerRadius(),i=this.outerRadius(),r=this.numPoints();t.beginPath(),t.moveTo(0,0-i);for(var a=1;a<2*r;a++){var n=a%2==0?i:e,s=n*Math.sin(a*Math.PI/r),o=-1*n*Math.cos(a*Math.PI/r);t.lineTo(s,o)}t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}function Ce(t){return Array.from(t)}we.prototype.className="Star",we.prototype._centroid=!0,we.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(we),w.addGetterSetter(we,"numPoints",5,p()),w.addGetterSetter(we,"innerRadius",0,p()),w.addGetterSetter(we,"outerRadius",0,p());var ke,Pe="auto",Te="justify",Ae="left",Me="middle",Ge="normal",Re=" ",Ee=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","verticalAlign","lineHeight","text","width","height","wrap","ellipsis","letterSpacing"],Le=Ee.length;function De(){return ke||(ke=g.createCanvasElement().getContext("2d"))}class Oe extends zt{constructor(t){super(function(t){return(t=t||{}).fillLinearGradientColorStops||t.fillRadialGradientColorStops||t.fillPatternImage||(t.fill=t.fill||"black"),t}(t)),this._partialTextX=0,this._partialTextY=0;for(var e=0;e<Le;e++)this.on(Ee[e]+"Change.konva",this._setTextData);this._setTextData()}_sceneFunc(t){var e=this.textArr,i=e.length;if(this.text()){var r,a=this.padding(),n=this.fontSize(),s=this.lineHeight()*n,o=this.verticalAlign(),h=0,l=this.align(),d=this.getWidth(),c=this.letterSpacing(),g=this.fill(),u=this.textDecoration(),f=-1!==u.indexOf("underline"),p=-1!==u.indexOf("line-through"),v=0,m=(v=s/2,0),_=0;for(t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",Me),t.setAttr("textAlign",Ae),o===Me?h=(this.getHeight()-i*s-2*a)/2:"bottom"===o&&(h=this.getHeight()-i*s-2*a),t.translate(a,h+a),r=0;r<i;r++){m=0,_=0;var y,x,b,S=e[r],w=S.text,C=S.width,k=r!==i-1;if(t.save(),"right"===l?m+=d-C-2*a:"center"===l&&(m+=(d-C-2*a)/2),f&&(t.save(),t.beginPath(),t.moveTo(m,v+_+Math.round(n/2)),x=0===(y=w.split(" ").length-1),b=l===Te&&k&&!x?d-2*a:C,t.lineTo(m+Math.round(b),v+_+Math.round(n/2)),t.lineWidth=n/15,t.strokeStyle=g,t.stroke(),t.restore()),p&&(t.save(),t.beginPath(),t.moveTo(m,v+_),x=0===(y=w.split(" ").length-1),b=l===Te&&k&&!x?d-2*a:C,t.lineTo(m+Math.round(b),v+_),t.lineWidth=n/15,t.strokeStyle=g,t.stroke(),t.restore()),0!==c||l===Te){y=w.split(" ").length-1;for(var P=Ce(w),T=0;T<P.length;T++){var A=P[T];" "===A&&r!==i-1&&l===Te&&(m+=(d-2*a-C)/y),this._partialTextX=m,this._partialTextY=v+_,this._partialText=A,t.fillStrokeShape(this),m+=this.measureSize(A).width+c}}else this._partialTextX=m,this._partialTextY=v+_,this._partialText=w,t.fillStrokeShape(this);t.restore(),i>1&&(v+=s)}}}_hitFunc(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}setText(t){var e=g._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this}getWidth(){return this.attrs.width===Pe||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width}getHeight(){return this.attrs.height===Pe||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height}getTextWidth(){return this.textWidth}getTextHeight(){return g.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}measureSize(t){var e,i=De(),r=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:r}}_getContextFont(){return this.fontStyle()+Re+this.fontVariant()+Re+(this.fontSize()+"px ")+this.fontFamily().split(",").map((t=>{const e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t=`"${t}"`),t})).join(", ")}_addTextLine(t){this.align()===Te&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})}_getTextWidth(t){var e=this.letterSpacing(),i=t.length;return De().measureText(t).width+(i?e*(i-1):0)}_setTextData(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,r=this.lineHeight()*e,a=this.attrs.width,n=this.attrs.height,s=a!==Pe&&void 0!==a,o=n!==Pe&&void 0!==n,h=this.padding(),l=a-2*h,d=n-2*h,c=0,g=this.wrap(),u="none"!==g,f="char"!==g&&u,p=this.ellipsis();this.textArr=[],De().font=this._getContextFont();for(var v=p?this._getTextWidth("…"):0,m=0,_=t.length;m<_;++m){var y=t[m],x=this._getTextWidth(y);if(s&&x>l)for(;y.length>0;){for(var b=0,S=y.length,w="",C=0;b<S;){var k=b+S>>>1,P=y.slice(0,k+1),T=this._getTextWidth(P)+v;T<=l?(b=k+1,w=P,C=T):S=k}if(!w)break;if(f){var A,M=y[w.length];(A=(M===Re||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(Re),w.lastIndexOf("-"))+1)>0&&(b=A,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!u||o&&c+r>d){var G=this.textArr[this.textArr.length-1];if(G)if(p)this._getTextWidth(G.text+"…")<l||(G.text=G.text.slice(0,G.text.length-3)),this.textArr.splice(this.textArr.length-1,1),this._addTextLine(G.text+"…");break}if((y=(y=y.slice(b)).trimLeft()).length>0&&(x=this._getTextWidth(y))<=l){this._addTextLine(y),c+=r,i=Math.max(i,x);break}}else this._addTextLine(y),c+=r,i=Math.max(i,x);if(o&&c+r>d)break}this.textHeight=e,this.textWidth=i}getStrokeScaleEnabled(){return!0}}Oe.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Oe.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Oe.prototype.className="Text",Oe.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight","letterSpacing"],r(Oe),w.overWriteSetter(Oe,"width",m()),w.overWriteSetter(Oe,"height",m()),w.addGetterSetter(Oe,"fontFamily","Arial"),w.addGetterSetter(Oe,"fontSize",12,p()),w.addGetterSetter(Oe,"fontStyle",Ge),w.addGetterSetter(Oe,"fontVariant",Ge),w.addGetterSetter(Oe,"padding",0,p()),w.addGetterSetter(Oe,"align",Ae),w.addGetterSetter(Oe,"verticalAlign","top"),w.addGetterSetter(Oe,"lineHeight",1,p()),w.addGetterSetter(Oe,"wrap","word"),w.addGetterSetter(Oe,"ellipsis",!1,x()),w.addGetterSetter(Oe,"letterSpacing",0,p()),w.addGetterSetter(Oe,"text","",_()),w.addGetterSetter(Oe,"textDecoration","");var Ie="normal";function Fe(t){t.fillText(this.partialText,0,0)}function Ne(t){t.strokeText(this.partialText,0,0)}class Be extends zt{constructor(t){super(t),this.dummyCanvas=g.createCanvasElement(),this.dataArray=[],this.dataArray=ne.parsePathData(this.attrs.data),this.on("dataChange.konva",(function(){this.dataArray=ne.parsePathData(this.attrs.data),this._setTextData()})),this.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva",this._setTextData),this._setTextData()}_sceneFunc(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),r=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var n=0;n<a.length;n++){t.save();var s=a[n].p0;t.translate(s.x,s.y),t.rotate(a[n].rotation),this.partialText=a[n].text,t.fillStrokeShape(this),"underline"===e&&(0===n&&t.moveTo(0,r/2+1),t.lineTo(r,r/2+1)),t.restore()}"underline"===e&&(t.strokeStyle=i,t.lineWidth=r/20,t.stroke()),t.restore()}_hitFunc(t){t.beginPath();var e=this.glyphInfo;if(e.length>=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var r=0;r<e.length;r++){var a=e[r].p1;t.lineTo(a.x,a.y)}t.setAttr("lineWidth",this.fontSize()),t.setAttr("strokeStyle",this.colorKey),t.stroke()}getTextWidth(){return this.textWidth}getTextHeight(){return g.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}setText(t){return Oe.prototype.setText.call(this,t)}_getContextFont(){return Oe.prototype._getContextFont.call(this)}_getTextSize(t){var e=this.dummyCanvas.getContext("2d");e.save(),e.font=this._getContextFont();var i=e.measureText(t);return e.restore(),{width:i.width,height:parseInt(this.attrs.fontSize,10)}}_setTextData(){var t=this,e=this._getTextSize(this.attrs.text),i=this.letterSpacing(),r=this.align(),a=this.kerningFunc();this.textWidth=e.width,this.textHeight=e.height;var n=Math.max(this.textWidth+((this.attrs.text||"").length-1)*i,0);this.glyphInfo=[];for(var s=0,o=0;o<t.dataArray.length;o++)t.dataArray[o].pathLength>0&&(s+=t.dataArray[o].pathLength);var h=0;"center"===r&&(h=Math.max(0,s/2-n/2)),"right"===r&&(h=Math.max(0,s-n));for(var l,d,c,g=Ce(this.text()),u=this.text().split(" ").length-1,f=-1,p=0,v=function(){p=0;for(var e=t.dataArray,i=f+1;i<e.length;i++){if(e[i].pathLength>0)return f=i,e[i];"M"===e[i].command&&(l={x:e[i].points[0],y:e[i].points[1]})}return{}},m=function(e){var a=t._getTextSize(e).width+i;" "===e&&"justify"===r&&(a+=(s-n)/u);var o=0,h=0;for(d=void 0;Math.abs(a-o)/a>.01&&h<20;){h++;for(var g=o;void 0===c;)(c=v())&&g+c.pathLength<a&&(g+=c.pathLength,c=void 0);if(c==={}||void 0===l)return;var f=!1;switch(c.command){case"L":ne.getLineLength(l.x,l.y,c.points[0],c.points[1])>a?d=ne.getPointOnLine(a,l.x,l.y,c.points[0],c.points[1],l.x,l.y):c=void 0;break;case"A":var m=c.points[4],_=c.points[5],y=c.points[4]+_;0===p?p=m+1e-8:a>o?p+=Math.PI/180*_/Math.abs(_):p-=Math.PI/360*_/Math.abs(_),(_<0&&p<y||_>=0&&p>y)&&(p=y,f=!0),d=ne.getPointOnEllipticalArc(c.points[0],c.points[1],c.points[2],c.points[3],p,c.points[6]);break;case"C":0===p?p=a>c.pathLength?1e-8:a/c.pathLength:a>o?p+=(a-o)/c.pathLength/2:p=Math.max(p-(o-a)/c.pathLength/2,0),p>1&&(p=1,f=!0),d=ne.getPointOnCubicBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3],c.points[4],c.points[5]);break;case"Q":0===p?p=a/c.pathLength:a>o?p+=(a-o)/c.pathLength:p-=(o-a)/c.pathLength,p>1&&(p=1,f=!0),d=ne.getPointOnQuadraticBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3])}void 0!==d&&(o=ne.getLineLength(l.x,l.y,d.x,d.y)),f&&(f=!1,c=void 0)}},_=h/(t._getTextSize("C").width+i)-1,y=0;y<_&&(m("C"),void 0!==l&&void 0!==d);y++)l=d;for(var x=0;x<g.length&&(m(g[x]),void 0!==l&&void 0!==d);x++){var b=ne.getLineLength(l.x,l.y,d.x,d.y),S=0;if(a)try{S=a(g[x-1],g[x])*this.fontSize()}catch(t){S=0}l.x+=S,d.x+=S,this.textWidth+=S;var w=ne.getPointOnLine(S+b/2,l.x,l.y,d.x,d.y),C=Math.atan2(d.y-l.y,d.x-l.x);this.glyphInfo.push({transposeX:w.x,transposeY:w.y,text:g[x],rotation:C,p0:l,p1:d}),l=d}}getSelfRect(){if(!this.glyphInfo.length)return{x:0,y:0,width:0,height:0};var t=[];this.glyphInfo.forEach((function(e){t.push(e.p0.x),t.push(e.p0.y),t.push(e.p1.x),t.push(e.p1.y)}));for(var e,i,r=t[0]||0,a=t[0]||0,n=t[1]||0,s=t[1]||0,o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],r=Math.min(r,e),a=Math.max(a,e),n=Math.min(n,i),s=Math.max(s,i);var h=this.fontSize();return{x:r-h/2,y:n-h/2,width:a-r+h,height:s-n+h}}}Be.prototype._fillFunc=Fe,Be.prototype._strokeFunc=Ne,Be.prototype._fillFuncHit=Fe,Be.prototype._strokeFuncHit=Ne,Be.prototype.className="TextPath",Be.prototype._attrsAffectingSize=["text","fontSize","data"],r(Be),w.addGetterSetter(Be,"data"),w.addGetterSetter(Be,"fontFamily","Arial"),w.addGetterSetter(Be,"fontSize",12,p()),w.addGetterSetter(Be,"fontStyle",Ie),w.addGetterSetter(Be,"align","left"),w.addGetterSetter(Be,"letterSpacing",0,p()),w.addGetterSetter(Be,"textBaseline","middle"),w.addGetterSetter(Be,"fontVariant",Ie),w.addGetterSetter(Be,"text",""),w.addGetterSetter(Be,"textDecoration",null),w.addGetterSetter(Be,"kerningFunc",null);var ze="tr-konva",We=["resizeEnabledChange","rotateAnchorOffsetChange","rotateEnabledChange","enabledAnchorsChange","anchorSizeChange","borderEnabledChange","borderStrokeChange","borderStrokeWidthChange","borderDashChange","anchorStrokeChange","anchorStrokeWidthChange","anchorFillChange","anchorCornerRadiusChange","ignoreStrokeChange"].map((t=>t+".tr-konva")).join(" "),He="nodesRect",Ye=["widthChange","heightChange","scaleXChange","scaleYChange","skewXChange","skewYChange","rotationChange","offsetXChange","offsetYChange","transformsEnabledChange","strokeWidthChange"].map((t=>t+".tr-konva")).join(" "),Xe={"top-left":-45,"top-center":0,"top-right":45,"middle-right":-90,"middle-left":90,"bottom-left":-135,"bottom-center":180,"bottom-right":135};const je="ontouchstart"in i._global;var Ue=["top-left","top-center","top-right","middle-right","middle-left","bottom-left","bottom-center","bottom-right"];function qe(t,e,i){const r=i.x+(t.x-i.x)*Math.cos(e)-(t.y-i.y)*Math.sin(e),a=i.y+(t.x-i.x)*Math.sin(e)+(t.y-i.y)*Math.cos(e);return Object.assign(Object.assign({},t),{rotation:t.rotation+e,x:r,y:a})}function Ve(t,e){const i=function(t){return{x:t.x+t.width/2*Math.cos(t.rotation)+t.height/2*Math.sin(-t.rotation),y:t.y+t.height/2*Math.cos(t.rotation)+t.width/2*Math.sin(t.rotation)}}(t);return qe(t,e,i)}class Ke extends jt{constructor(t){super(t),this._transforming=!1,this._createElements(),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this.update=this.update.bind(this),this.on(We,this.update),this.getNode()&&this.update()}attachTo(t){return this.setNode(t),this}setNode(t){return g.warn("tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead."),this.setNodes([t])}getNode(){return this._nodes&&this._nodes[0]}setNodes(t=[]){return this._nodes&&this._nodes.length&&this.detach(),this._nodes=t,1===t.length&&this.useSingleNodeRotation()?this.rotation(t[0].getAbsoluteRotation()):this.rotation(0),this._nodes.forEach((t=>{const e=t._attrsAffectingSize.map((t=>t+"Change."+ze)).join(" "),i=()=>{1===this.nodes().length&&this.useSingleNodeRotation()&&this.rotation(this.nodes()[0].getAbsoluteRotation()),this._resetTransformCache(),this._transforming||this.isDragging()||this.update()};t.on(e,i),t.on(Ye,i),t.on("absoluteTransformChange.tr-konva",i),t.on("xChange.tr-konva yChange.tr-konva",i),this._proxyDrag(t)})),this._resetTransformCache(),!!this.findOne(".top-left")&&this.update(),this}_proxyDrag(t){let e;t.on("dragstart.tr-konva",(i=>{e=t.getAbsolutePosition(),this.isDragging()||t===this.findOne(".back")||this.startDrag(i,!1)})),t.on("dragmove.tr-konva",(i=>{if(!e)return;const r=t.getAbsolutePosition(),a=r.x-e.x,n=r.y-e.y;this.nodes().forEach((e=>{if(e===t)return;if(e.isDragging())return;const r=e.getAbsolutePosition();e.setAbsolutePosition({x:r.x+a,y:r.y+n}),e.startDrag(i)})),e=null}))}getNodes(){return this._nodes||[]}getActiveAnchor(){return this._movingAnchorName}detach(){this._nodes&&this._nodes.forEach((t=>{t.off(".tr-konva")})),this._nodes=[],this._resetTransformCache()}_resetTransformCache(){this._clearCache(He),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform")}_getNodeRect(){return this._getCache(He,this.__getNodeRect)}__getNodeShape(t,e=this.rotation(),r){var a=t.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),n=t.getAbsoluteScale(r),s=t.getAbsolutePosition(r),o=a.x*n.x-t.offsetX()*n.x,h=a.y*n.y-t.offsetY()*n.y;const l=(i.getAngle(t.getAbsoluteRotation())+2*Math.PI)%(2*Math.PI);return qe({x:s.x+o*Math.cos(l)+h*Math.sin(-l),y:s.y+h*Math.cos(l)+o*Math.sin(l),width:a.width*n.x,height:a.height*n.y,rotation:l},-i.getAngle(e),{x:0,y:0})}__getNodeRect(){if(!this.getNode())return{x:-1e8,y:-1e8,width:0,height:0,rotation:0};const t=[];this.nodes().map((e=>{const i=e.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()});var r=[{x:i.x,y:i.y},{x:i.x+i.width,y:i.y},{x:i.x+i.width,y:i.y+i.height},{x:i.x,y:i.y+i.height}],a=e.getAbsoluteTransform();r.forEach((function(e){var i=a.point(e);t.push(i)}))}));const e=new a;var r,n,s,o;e.rotate(-i.getAngle(this.rotation())),t.forEach((function(t){var i=e.point(t);void 0===r&&(r=s=i.x,n=o=i.y),r=Math.min(r,i.x),n=Math.min(n,i.y),s=Math.max(s,i.x),o=Math.max(o,i.y)})),e.invert();const h=e.point({x:r,y:n});return{x:h.x,y:h.y,width:s-r,height:o-n,rotation:i.getAngle(this.rotation())}}getX(){return this._getNodeRect().x}getY(){return this._getNodeRect().y}getWidth(){return this._getNodeRect().width}getHeight(){return this._getNodeRect().height}_createElements(){this._createBack(),Ue.forEach(function(t){this._createAnchor(t)}.bind(this)),this._createAnchor("rotater")}_createAnchor(t){var e=new _e({stroke:"rgb(0, 161, 255)",fill:"white",strokeWidth:1,name:t+" _anchor",dragDistance:0,draggable:!0,hitStrokeWidth:je?10:"auto"}),r=this;e.on("mousedown touchstart",(function(t){r._handleMouseDown(t)})),e.on("dragstart",(t=>{e.stopDrag(),t.cancelBubble=!0})),e.on("dragend",(t=>{t.cancelBubble=!0})),e.on("mouseenter",(()=>{var r=i.getAngle(this.rotation()),a=function(t,e){if("rotater"===t)return"crosshair";e+=g.degToRad(Xe[t]||0);var i=(g.radToDeg(e)%360+360)%360;return g._inRange(i,337.5,360)||g._inRange(i,0,22.5)?"ns-resize":g._inRange(i,22.5,67.5)?"nesw-resize":g._inRange(i,67.5,112.5)?"ew-resize":g._inRange(i,112.5,157.5)?"nwse-resize":g._inRange(i,157.5,202.5)?"ns-resize":g._inRange(i,202.5,247.5)?"nesw-resize":g._inRange(i,247.5,292.5)?"ew-resize":g._inRange(i,292.5,337.5)?"nwse-resize":(g.error("Transformer has unknown angle for cursor detection: "+i),"pointer")}(t,r);e.getStage().content&&(e.getStage().content.style.cursor=a),this._cursorChange=!0})),e.on("mouseout",(()=>{e.getStage().content&&(e.getStage().content.style.cursor=""),this._cursorChange=!1})),this.add(e)}_createBack(){var t=new zt({name:"back",width:0,height:0,draggable:!0,sceneFunc(t){var e=this.getParent(),i=e.padding();t.beginPath(),t.rect(-i,-i,this.width()+2*i,this.height()+2*i),t.moveTo(this.width()/2,-i),e.rotateEnabled()&&t.lineTo(this.width()/2,-e.rotateAnchorOffset()*g._sign(this.height())-i),t.fillStrokeShape(this)},hitFunc:(t,e)=>{if(this.shouldOverdrawWholeArea()){var i=this.padding();t.beginPath(),t.rect(-i,-i,e.width()+2*i,e.height()+2*i),t.fillStrokeShape(e)}}});this.add(t),this._proxyDrag(t),t.on("dragstart",(t=>{t.cancelBubble=!0})),t.on("dragmove",(t=>{t.cancelBubble=!0})),t.on("dragend",(t=>{t.cancelBubble=!0})),this.on("dragmove",(t=>{this.update()}))}_handleMouseDown(t){this._movingAnchorName=t.target.name().split(" ")[0];var e=this._getNodeRect(),i=e.width,r=e.height,a=Math.sqrt(Math.pow(i,2)+Math.pow(r,2));this.sin=Math.abs(r/a),this.cos=Math.abs(i/a),"undefined"!=typeof window&&(window.addEventListener("mousemove",this._handleMouseMove),window.addEventListener("touchmove",this._handleMouseMove),window.addEventListener("mouseup",this._handleMouseUp,!0),window.addEventListener("touchend",this._handleMouseUp,!0)),this._transforming=!0;var n=t.target.getAbsolutePosition(),s=t.target.getStage().getPointerPosition();this._anchorDragOffset={x:s.x-n.x,y:s.y-n.y},this._fire("transformstart",{evt:t,target:this.getNode()}),this._nodes.forEach((e=>{e._fire("transformstart",{evt:t,target:e})}))}_handleMouseMove(t){var e,r,a,n=this.findOne("."+this._movingAnchorName),s=n.getStage();s.setPointersPositions(t);const o=s.getPointerPosition();var h={x:o.x-this._anchorDragOffset.x,y:o.y-this._anchorDragOffset.y};const l=n.getAbsolutePosition();n.setAbsolutePosition(h);const d=n.getAbsolutePosition();if(l.x!==d.x||l.y!==d.y)if("rotater"!==this._movingAnchorName){var c=this.keepRatio()||t.shiftKey,g=this.centeredScaling()||t.altKey;if("top-left"===this._movingAnchorName){if(c){var u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-right").x(),y:this.findOne(".bottom-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(u.y-n.y(),2));var f=this.findOne(".top-left").x()>u.x?-1:1,p=this.findOne(".top-left").y()>u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-left").x(u.x-e),this.findOne(".top-left").y(u.y-r)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(n.y());else if("top-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};a=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(u.y-n.y(),2));f=this.findOne(".top-right").x()<u.x?-1:1,p=this.findOne(".top-right").y()>u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-right").x(u.x+e),this.findOne(".top-right").y(u.y-r)}var v=n.position();this.findOne(".top-left").y(v.y),this.findOne(".bottom-right").x(v.x)}else if("middle-left"===this._movingAnchorName)this.findOne(".top-left").x(n.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(n.x());else if("bottom-left"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(n.y()-u.y,2));f=u.x<n.x()?-1:1,p=n.y()<u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,n.x(u.x-e),n.y(u.y+r)}v=n.position(),this.findOne(".top-left").x(v.x),this.findOne(".bottom-right").y(v.y)}else if("bottom-center"===this._movingAnchorName)this.findOne(".bottom-right").y(n.y());else if("bottom-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-left").x(),y:this.findOne(".top-left").y()};a=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(n.y()-u.y,2));f=this.findOne(".bottom-right").x()<u.x?-1:1,p=this.findOne(".bottom-right").y()<u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".bottom-right").x(u.x+e),this.findOne(".bottom-right").y(u.y+r)}}else console.error(new Error("Wrong position argument of selection resizer: "+this._movingAnchorName));if(g=this.centeredScaling()||t.altKey){var m=this.findOne(".top-left"),_=this.findOne(".bottom-right"),y=m.x(),x=m.y(),b=this.getWidth()-_.x(),S=this.getHeight()-_.y();_.move({x:-y,y:-x}),m.move({x:b,y:S})}var w=this.findOne(".top-left").getAbsolutePosition();e=w.x,r=w.y;var C=this.findOne(".bottom-right").x()-this.findOne(".top-left").x(),k=this.findOne(".bottom-right").y()-this.findOne(".top-left").y();this._fitNodesInto({x:e,y:r,width:C,height:k,rotation:i.getAngle(this.rotation())},t)}else{var P=this._getNodeRect();e=n.x()-P.width/2,r=-n.y()+P.height/2;let a=Math.atan2(-r,e)+Math.PI/2;P.height<0&&(a-=Math.PI);const s=i.getAngle(this.rotation())+a,o=i.getAngle(this.rotationSnapTolerance()),h=function(t,e,r){let a=e;for(let n=0;n<t.length;n++){const s=i.getAngle(t[n]),o=Math.abs(s-e)%(2*Math.PI);Math.min(o,2*Math.PI-o)<r&&(a=s)}return a}(this.rotationSnaps(),s,o),l=Ve(P,h-P.rotation);this._fitNodesInto(l,t)}}_handleMouseUp(t){this._removeEvents(t)}getAbsoluteTransform(){return this.getTransform()}_removeEvents(t){if(this._transforming){this._transforming=!1,"undefined"!=typeof window&&(window.removeEventListener("mousemove",this._handleMouseMove),window.removeEventListener("touchmove",this._handleMouseMove),window.removeEventListener("mouseup",this._handleMouseUp,!0),window.removeEventListener("touchend",this._handleMouseUp,!0));var e=this.getNode();this._fire("transformend",{evt:t,target:e}),e&&this._nodes.forEach((e=>{e._fire("transformend",{evt:t,target:e})})),this._movingAnchorName=null}}_fitNodesInto(t,e){var r=this._getNodeRect();if(g._inRange(t.width,2*-this.padding()-1,1))return void this.update();if(g._inRange(t.height,2*-this.padding()-1,1))return void this.update();const n=this.flipEnabled();var s=new a;if(s.rotate(i.getAngle(this.rotation())),this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("left")>=0){const e=s.point({x:2*-this.padding(),y:0});if(t.x+=e.x,t.y+=e.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,!n)return void this.update()}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){const e=s.point({x:2*this.padding(),y:0});if(this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.width+=2*this.padding(),!n)return void this.update()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){const e=s.point({x:0,y:2*-this.padding()});if(t.x+=e.x,t.y+=e.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding(),!n)return void this.update()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){const e=s.point({x:0,y:2*this.padding()});if(this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding(),!n)return void this.update()}if(this.boundBoxFunc()){const e=this.boundBoxFunc()(r,t);e?t=e:g.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}const o=1e7,h=new a;h.translate(r.x,r.y),h.rotate(r.rotation),h.scale(r.width/o,r.height/o);const l=new a;l.translate(t.x,t.y),l.rotate(t.rotation),l.scale(t.width/o,t.height/o);const d=l.multiply(h.invert());this._nodes.forEach((t=>{var i;const r=t.getParent().getAbsoluteTransform(),n=t.getTransform().copy();n.translate(t.offsetX(),t.offsetY());const s=new a;s.multiply(r.copy().invert()).multiply(d).multiply(r).multiply(n);const o=s.decompose();t.setAttrs(o),this._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(i=t.getLayer())||void 0===i||i.batchDraw()})),this.rotation(g._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}forceUpdate(){this._resetTransformCache(),this.update()}_batchChangeChild(t,e){this.findOne(t).setAttrs(e)}update(){var t,e=this._getNodeRect();this.rotation(g._getRotation(e.rotation));var i=e.width,r=e.height,a=this.enabledAnchors(),n=this.resizeEnabled(),s=this.padding(),o=this.anchorSize();this.find("._anchor").forEach((t=>{t.setAttrs({width:o,height:o,offsetX:o/2,offsetY:o/2,stroke:this.anchorStroke(),strokeWidth:this.anchorStrokeWidth(),fill:this.anchorFill(),cornerRadius:this.anchorCornerRadius()})})),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:o/2+s,offsetY:o/2+s,visible:n&&a.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:i/2,y:0,offsetY:o/2+s,visible:n&&a.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:i,y:0,offsetX:o/2-s,offsetY:o/2+s,visible:n&&a.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:r/2,offsetX:o/2+s,visible:n&&a.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:i,y:r/2,offsetX:o/2-s,visible:n&&a.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:r,offsetX:o/2+s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:i/2,y:r,offsetY:o/2-s,visible:n&&a.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:i,y:r,offsetX:o/2-s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:i/2,y:-this.rotateAnchorOffset()*g._sign(r)-s,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:i,height:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash(),x:0,y:0}),null===(t=this.getLayer())||void 0===t||t.batchDraw()}isTransforming(){return this._transforming}stopTransform(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}}destroy(){return this.getStage()&&this._cursorChange&&this.getStage().content&&(this.getStage().content.style.cursor=""),jt.prototype.destroy.call(this),this.detach(),this._removeEvents(),this}toObject(){return K.prototype.toObject.call(this)}}Ke.prototype.className="Transformer",r(Ke),w.addGetterSetter(Ke,"enabledAnchors",Ue,(function(t){return t instanceof Array||g.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===Ue.indexOf(t)&&g.warn("Unknown anchor name: "+t+". Available names are: "+Ue.join(", "))})),t||[]})),w.addGetterSetter(Ke,"flipEnabled",!0,x()),w.addGetterSetter(Ke,"resizeEnabled",!0),w.addGetterSetter(Ke,"anchorSize",10,p()),w.addGetterSetter(Ke,"rotateEnabled",!0),w.addGetterSetter(Ke,"rotationSnaps",[]),w.addGetterSetter(Ke,"rotateAnchorOffset",50,p()),w.addGetterSetter(Ke,"rotationSnapTolerance",5,p()),w.addGetterSetter(Ke,"borderEnabled",!0),w.addGetterSetter(Ke,"anchorStroke","rgb(0, 161, 255)"),w.addGetterSetter(Ke,"anchorStrokeWidth",1,p()),w.addGetterSetter(Ke,"anchorFill","white"),w.addGetterSetter(Ke,"anchorCornerRadius",0,p()),w.addGetterSetter(Ke,"borderStroke","rgb(0, 161, 255)"),w.addGetterSetter(Ke,"borderStrokeWidth",1,p()),w.addGetterSetter(Ke,"borderDash"),w.addGetterSetter(Ke,"keepRatio",!0),w.addGetterSetter(Ke,"centeredScaling",!1),w.addGetterSetter(Ke,"ignoreStroke",!1),w.addGetterSetter(Ke,"padding",0,p()),w.addGetterSetter(Ke,"node"),w.addGetterSetter(Ke,"nodes"),w.addGetterSetter(Ke,"boundBoxFunc"),w.addGetterSetter(Ke,"shouldOverdrawWholeArea",!1),w.addGetterSetter(Ke,"useSingleNodeRotation",!0),w.backCompat(Ke,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"});class Qe extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.radius(),0,i.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}function Je(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}Qe.prototype.className="Wedge",Qe.prototype._centroid=!0,Qe.prototype._attrsAffectingSize=["radius"],r(Qe),w.addGetterSetter(Qe,"radius",0,p()),w.addGetterSetter(Qe,"angle",0,p()),w.addGetterSetter(Qe,"clockwise",!1),w.backCompat(Qe,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"});var Ze=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],$e=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];w.addGetterSetter(K,"blurRadius",0,p(),w.afterSetFilter);w.addGetterSetter(K,"brightness",0,p(),w.afterSetFilter);w.addGetterSetter(K,"contrast",0,p(),w.afterSetFilter);function ti(t,e,i,r,a){var n=i-e,s=a-r;return 0===n?r+s/2:0===s?r:s*((t-e)/n)+r}w.addGetterSetter(K,"embossStrength",.5,p(),w.afterSetFilter),w.addGetterSetter(K,"embossWhiteLevel",.5,p(),w.afterSetFilter),w.addGetterSetter(K,"embossDirection","top-left",null,w.afterSetFilter),w.addGetterSetter(K,"embossBlend",!1,null,w.afterSetFilter);w.addGetterSetter(K,"enhance",0,p(),w.afterSetFilter);w.addGetterSetter(K,"hue",0,p(),w.afterSetFilter),w.addGetterSetter(K,"saturation",0,p(),w.afterSetFilter),w.addGetterSetter(K,"luminance",0,p(),w.afterSetFilter);w.addGetterSetter(K,"hue",0,p(),w.afterSetFilter),w.addGetterSetter(K,"saturation",0,p(),w.afterSetFilter),w.addGetterSetter(K,"value",0,p(),w.afterSetFilter);function ei(t,e,i){var r=4*(i*t.width+e),a=[];return a.push(t.data[r++],t.data[r++],t.data[r++],t.data[r++]),a}function ii(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}w.addGetterSetter(K,"kaleidoscopePower",2,p(),w.afterSetFilter),w.addGetterSetter(K,"kaleidoscopeAngle",0,p(),w.afterSetFilter);w.addGetterSetter(K,"threshold",0,p(),w.afterSetFilter);w.addGetterSetter(K,"noise",.2,p(),w.afterSetFilter);w.addGetterSetter(K,"pixelSize",8,p(),w.afterSetFilter);w.addGetterSetter(K,"levels",.5,p(),w.afterSetFilter);w.addGetterSetter(K,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"blue",0,f,w.afterSetFilter);w.addGetterSetter(K,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"blue",0,f,w.afterSetFilter),w.addGetterSetter(K,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));w.addGetterSetter(K,"threshold",.5,p(),w.afterSetFilter);return te.Util._assign(te,{Arc:ee,Arrow:se,Circle:oe,Ellipse:he,Image:le,Label:ve,Tag:me,Line:ae,Path:ne,Rect:_e,RegularPolygon:ye,Ring:be,Sprite:Se,Star:we,Text:Oe,TextPath:Be,Transformer:Ke,Wedge:Qe,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,r,a,n,s,o,h,l,d,c,g,u,f,p,v,m,_,y,x,b,S,w,C,k,P=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,R=A-1,E=e+1,L=E*(E+1)/2,D=new Je,O=null,I=D,F=null,N=null,B=Ze[e],z=$e[e];for(a=1;a<M;a++)I=I.next=new Je,a===E&&(O=I);for(I.next=D,h=o=0,r=0;r<A;r++){for(m=_=y=x=l=d=c=g=0,u=E*(b=P[o]),f=E*(S=P[o+1]),p=E*(w=P[o+2]),v=E*(C=P[o+3]),l+=L*b,d+=L*S,c+=L*w,g+=L*C,I=D,a=0;a<E;a++)I.r=b,I.g=S,I.b=w,I.a=C,I=I.next;for(a=1;a<E;a++)n=o+((G<a?G:a)<<2),l+=(I.r=b=P[n])*(k=E-a),d+=(I.g=S=P[n+1])*k,c+=(I.b=w=P[n+2])*k,g+=(I.a=C=P[n+3])*k,m+=b,_+=S,y+=w,x+=C,I=I.next;for(F=D,N=O,i=0;i<T;i++)P[o+3]=C=g*B>>z,0!==C?(C=255/C,P[o]=(l*B>>z)*C,P[o+1]=(d*B>>z)*C,P[o+2]=(c*B>>z)*C):P[o]=P[o+1]=P[o+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=h+((n=i+e+1)<G?n:G)<<2,l+=m+=F.r=P[n],d+=_+=F.g=P[n+1],c+=y+=F.b=P[n+2],g+=x+=F.a=P[n+3],F=F.next,u+=b=N.r,f+=S=N.g,p+=w=N.b,v+=C=N.a,m-=b,_-=S,y-=w,x-=C,N=N.next,o+=4;h+=T}for(i=0;i<T;i++){for(_=y=x=m=d=c=g=l=0,u=E*(b=P[o=i<<2]),f=E*(S=P[o+1]),p=E*(w=P[o+2]),v=E*(C=P[o+3]),l+=L*b,d+=L*S,c+=L*w,g+=L*C,I=D,a=0;a<E;a++)I.r=b,I.g=S,I.b=w,I.a=C,I=I.next;for(s=T,a=1;a<=e;a++)o=s+i<<2,l+=(I.r=b=P[o])*(k=E-a),d+=(I.g=S=P[o+1])*k,c+=(I.b=w=P[o+2])*k,g+=(I.a=C=P[o+3])*k,m+=b,_+=S,y+=w,x+=C,I=I.next,a<R&&(s+=T);for(o=i,F=D,N=O,r=0;r<A;r++)P[3+(n=o<<2)]=C=g*B>>z,C>0?(C=255/C,P[n]=(l*B>>z)*C,P[n+1]=(d*B>>z)*C,P[n+2]=(c*B>>z)*C):P[n]=P[n+1]=P[n+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=i+((n=r+E)<R?n:R)*T<<2,l+=m+=F.r=P[n],d+=_+=F.g=P[n+1],c+=y+=F.b=P[n+2],g+=x+=F.a=P[n+3],F=F.next,u+=b=N.r,f+=S=N.g,p+=w=N.b,v+=C=N.a,m-=b,_-=S,y-=w,x-=C,N=N.next,o+=T}}(t,e)},Brighten:function(t){var e,i=255*this.brightness(),r=t.data,a=r.length;for(e=0;e<a;e+=4)r[e]+=i,r[e+1]+=i,r[e+2]+=i},Contrast:function(t){var e,i=Math.pow((this.contrast()+100)/100,2),r=t.data,a=r.length,n=150,s=150,o=150;for(e=0;e<a;e+=4)n=r[e],s=r[e+1],o=r[e+2],n/=255,n-=.5,n*=i,n+=.5,s/=255,s-=.5,s*=i,s+=.5,o/=255,o-=.5,o*=i,o+=.5,n=(n*=255)<0?0:n>255?255:n,s=(s*=255)<0?0:s>255?255:s,o=(o*=255)<0?0:o>255?255:o,r[e]=n,r[e+1]=s,r[e+2]=o},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),r=this.embossDirection(),a=this.embossBlend(),n=0,s=0,o=t.data,h=t.width,l=t.height,d=4*h,c=l;switch(r){case"top-left":n=-1,s=-1;break;case"top":n=-1,s=0;break;case"top-right":n=-1,s=1;break;case"right":n=0,s=1;break;case"bottom-right":n=1,s=1;break;case"bottom":n=1,s=0;break;case"bottom-left":n=1,s=-1;break;case"left":n=0,s=-1;break;default:g.error("Unknown emboss direction: "+r)}do{var u=(c-1)*d,f=n;c+f<1&&(f=0),c+f>l&&(f=0);var p=(c-1+f)*h*4,v=h;do{var m=u+4*(v-1),_=s;v+_<1&&(_=0),v+_>h&&(_=0);var y=p+4*(v-1+_),x=o[m]-o[y],b=o[m+1]-o[y+1],S=o[m+2]-o[y+2],w=x,C=w>0?w:-w;if((b>0?b:-b)>C&&(w=b),(S>0?S:-S)>C&&(w=S),w*=e,a){var k=o[m]+w,P=o[m+1]+w,T=o[m+2]+w;o[m]=k>255?255:k<0?0:k,o[m+1]=P>255?255:P<0?0:P,o[m+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),o[m]=o[m+1]=o[m+2]=A}}while(--v)}while(--c)},Enhance:function(t){var e,i,r,a,n=t.data,s=n.length,o=n[0],h=o,l=n[1],d=l,c=n[2],g=c,u=this.enhance();if(0!==u){for(a=0;a<s;a+=4)(e=n[a+0])<o?o=e:e>h&&(h=e),(i=n[a+1])<l?l=i:i>d&&(d=i),(r=n[a+2])<c?c=r:r>g&&(g=r);var f,p,v,m,_,y,x,b,S;for(h===o&&(h=255,o=0),d===l&&(d=255,l=0),g===c&&(g=255,c=0),u>0?(p=h+u*(255-h),v=o-u*(o-0),_=d+u*(255-d),y=l-u*(l-0),b=g+u*(255-g),S=c-u*(c-0)):(p=h+u*(h-(f=.5*(h+o))),v=o+u*(o-f),_=d+u*(d-(m=.5*(d+l))),y=l+u*(l-m),b=g+u*(g-(x=.5*(g+c))),S=c+u*(c-x)),a=0;a<s;a+=4)n[a+0]=ti(n[a+0],o,h,v,p),n[a+1]=ti(n[a+1],l,d,y,_),n[a+2]=ti(n[a+2],c,g,S,b)}},Grayscale:function(t){var e,i,r=t.data,a=r.length;for(e=0;e<a;e+=4)i=.34*r[e]+.5*r[e+1]+.16*r[e+2],r[e]=i,r[e+1]=i,r[e+2]=i},HSL:function(t){var e,i,r,a,n,s=t.data,o=s.length,h=Math.pow(2,this.saturation()),l=Math.abs(this.hue()+360)%360,d=127*this.luminance(),c=1*h*Math.cos(l*Math.PI/180),g=1*h*Math.sin(l*Math.PI/180),u=.299+.701*c+.167*g,f=.587-.587*c+.33*g,p=.114-.114*c-.497*g,v=.299-.299*c-.328*g,m=.587+.413*c+.035*g,_=.114-.114*c+.293*g,y=.299-.3*c+1.25*g,x=.587-.586*c-1.05*g,b=.114+.886*c-.2*g;for(e=0;e<o;e+=4)i=s[e+0],r=s[e+1],a=s[e+2],n=s[e+3],s[e+0]=u*i+f*r+p*a+d,s[e+1]=v*i+m*r+_*a+d,s[e+2]=y*i+x*r+b*a+d,s[e+3]=n},HSV:function(t){var e,i,r,a,n,s=t.data,o=s.length,h=Math.pow(2,this.value()),l=Math.pow(2,this.saturation()),d=Math.abs(this.hue()+360)%360,c=h*l*Math.cos(d*Math.PI/180),g=h*l*Math.sin(d*Math.PI/180),u=.299*h+.701*c+.167*g,f=.587*h-.587*c+.33*g,p=.114*h-.114*c-.497*g,v=.299*h-.299*c-.328*g,m=.587*h+.413*c+.035*g,_=.114*h-.114*c+.293*g,y=.299*h-.3*c+1.25*g,x=.587*h-.586*c-1.05*g,b=.114*h+.886*c-.2*g;for(e=0;e<o;e+=4)i=s[e+0],r=s[e+1],a=s[e+2],n=s[e+3],s[e+0]=u*i+f*r+p*a,s[e+1]=v*i+m*r+_*a,s[e+2]=y*i+x*r+b*a,s[e+3]=n},Invert:function(t){var e,i=t.data,r=i.length;for(e=0;e<r;e+=4)i[e]=255-i[e],i[e+1]=255-i[e+1],i[e+2]=255-i[e+2]},Kaleidoscope:function(t){var e,i,r,a,n,s,o,h,l,d=t.width,c=t.height,u=Math.round(this.kaleidoscopePower()),f=Math.round(this.kaleidoscopeAngle()),p=Math.floor(d*(f%360)/360);if(!(u<1)){var v=g.createCanvasElement();v.width=d,v.height=c;var m=v.getContext("2d").getImageData(0,0,d,c);!function(t,e,i){var r,a,n,s,o=t.data,h=e.data,l=t.width,d=t.height,c=i.polarCenterX||l/2,g=i.polarCenterY||d/2,u=0,f=0,p=0,v=0,m=Math.sqrt(c*c+g*g);a=l-c,n=d-g,m=(s=Math.sqrt(a*a+n*n))>m?s:m;var _,y,x,b,S=d,w=l,C=360/w*Math.PI/180;for(y=0;y<w;y+=1)for(x=Math.sin(y*C),b=Math.cos(y*C),_=0;_<S;_+=1)a=Math.floor(c+m*_/S*b),u=o[0+(r=4*((n=Math.floor(g+m*_/S*x))*l+a))],f=o[r+1],p=o[r+2],v=o[r+3],h[0+(r=4*(y+_*l))]=u,h[r+1]=f,h[r+2]=p,h[r+3]=v}(t,m,{polarCenterX:d/2,polarCenterY:c/2});for(var _=d/Math.pow(2,u);_<=8;)_*=2,u-=1;var y=_=Math.ceil(_),x=0,b=y,S=1;for(p+_>d&&(x=y,b=0,S=-1),i=0;i<c;i+=1)for(e=x;e!==b;e+=S)h=4*(d*i+Math.round(e+p)%d),a=m.data[h+0],n=m.data[h+1],s=m.data[h+2],o=m.data[h+3],l=4*(d*i+e),m.data[l+0]=a,m.data[l+1]=n,m.data[l+2]=s,m.data[l+3]=o;for(i=0;i<c;i+=1)for(y=Math.floor(_),r=0;r<u;r+=1){for(e=0;e<y+1;e+=1)h=4*(d*i+e),a=m.data[h+0],n=m.data[h+1],s=m.data[h+2],o=m.data[h+3],l=4*(d*i+2*y-e-1),m.data[l+0]=a,m.data[l+1]=n,m.data[l+2]=s,m.data[l+3]=o;y*=2}!function(t,e,i){var r,a,n,s,o,h,l=t.data,d=e.data,c=t.width,g=t.height,u=i.polarCenterX||c/2,f=i.polarCenterY||g/2,p=0,v=0,m=0,_=0,y=Math.sqrt(u*u+f*f);a=c-u,n=g-f,y=(h=Math.sqrt(a*a+n*n))>y?h:y;var x,b,S,w=g,C=c,k=i.polarRotation||0;for(a=0;a<c;a+=1)for(n=0;n<g;n+=1)s=a-u,o=n-f,x=Math.sqrt(s*s+o*o)*w/y,b=(b=(180*Math.atan2(o,s)/Math.PI+360+k)%360)*C/360,S=Math.floor(b),p=l[0+(r=4*(Math.floor(x)*c+S))],v=l[r+1],m=l[r+2],_=l[r+3],d[0+(r=4*(n*c+a))]=p,d[r+1]=v,d[r+2]=m,d[r+3]=_}(m,t,{polarRotation:0})}},Mask:function(t){var e=function(t,e){var i=ei(t,0,0),r=ei(t,t.width-1,0),a=ei(t,0,t.height-1),n=ei(t,t.width-1,t.height-1),s=e||10;if(ii(i,r)<s&&ii(r,n)<s&&ii(n,a)<s&&ii(a,i)<s){for(var o=function(t){for(var e=[0,0,0],i=0;i<t.length;i++)e[0]+=t[i][0],e[1]+=t[i][1],e[2]+=t[i][2];return e[0]/=t.length,e[1]/=t.length,e[2]/=t.length,e}([r,i,n,a]),h=[],l=0;l<t.width*t.height;l++){var d=ii(o,[t.data[4*l],t.data[4*l+1],t.data[4*l+2]]);h[l]=d<s?0:255}return h}}(t,this.threshold());return e&&function(t,e){for(var i=0;i<t.width*t.height;i++)t.data[4*i+3]=e[i]}(t,e=function(t,e,i){for(var r=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=d}return s}(e=function(t,e,i){for(var r=[1,1,1,1,1,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=d>=1020?255:0}return s}(e=function(t,e,i){for(var r=[1,1,1,1,0,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=2040===d?255:0}return s}(e,t.width,t.height),t.width,t.height),t.width,t.height)),t},Noise:function(t){var e,i=255*this.noise(),r=t.data,a=r.length,n=i/2;for(e=0;e<a;e+=4)r[e+0]+=n-2*n*Math.random(),r[e+1]+=n-2*n*Math.random(),r[e+2]+=n-2*n*Math.random()},Pixelate:function(t){var e,i,r,a,n,s,o,h,l,d,c,u,f,p,v=Math.ceil(this.pixelSize()),m=t.width,_=t.height,y=Math.ceil(m/v),x=Math.ceil(_/v),b=t.data;if(v<=0)g.error("pixelSize value can not be <= 0");else for(u=0;u<y;u+=1)for(f=0;f<x;f+=1){for(a=0,n=0,s=0,o=0,l=(h=u*v)+v,c=(d=f*v)+v,p=0,e=h;e<l;e+=1)if(!(e>=m))for(i=d;i<c;i+=1)i>=_||(a+=b[(r=4*(m*i+e))+0],n+=b[r+1],s+=b[r+2],o+=b[r+3],p+=1);for(a/=p,n/=p,s/=p,o/=p,e=h;e<l;e+=1)if(!(e>=m))for(i=d;i<c;i+=1)i>=_||(b[(r=4*(m*i+e))+0]=a,b[r+1]=n,b[r+2]=s,b[r+3]=o)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,r=t.data,a=r.length,n=255/i;for(e=0;e<a;e+=1)r[e]=Math.floor(r[e]/n)*n},RGB:function(t){var e,i,r=t.data,a=r.length,n=this.red(),s=this.green(),o=this.blue();for(e=0;e<a;e+=4)i=(.34*r[e]+.5*r[e+1]+.16*r[e+2])/255,r[e]=i*n,r[e+1]=i*s,r[e+2]=i*o,r[e+3]=r[e+3]},RGBA:function(t){var e,i,r=t.data,a=r.length,n=this.red(),s=this.green(),o=this.blue(),h=this.alpha();for(e=0;e<a;e+=4)i=1-h,r[e]=n*h+r[e]*i,r[e+1]=s*h+r[e+1]*i,r[e+2]=o*h+r[e+2]*i},Sepia:function(t){var e,i,r,a,n=t.data,s=n.length;for(e=0;e<s;e+=4)i=n[e+0],r=n[e+1],a=n[e+2],n[e+0]=Math.min(255,.393*i+.769*r+.189*a),n[e+1]=Math.min(255,.349*i+.686*r+.168*a),n[e+2]=Math.min(255,.272*i+.534*r+.131*a)},Solarize:function(t){var e=t.data,i=t.width,r=4*i,a=t.height;do{var n=(a-1)*r,s=i;do{var o=n+4*(s-1),h=e[o],l=e[o+1],d=e[o+2];h>127&&(h=255-h),l>127&&(l=255-l),d>127&&(d=255-d),e[o]=h,e[o+1]=l,e[o+2]=d}while(--s)}while(--a)},Threshold:function(t){var e,i=255*this.threshold(),r=t.data,a=r.length;for(e=0;e<a;e+=1)r[e]=r[e]<i?0:255}}})}));
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Konva=e()}(this,(function(){"use strict";
+/*
+   * Konva JavaScript Framework v8.2.0
+   * http://konvajs.org/
+   * Licensed under the MIT
+   * Date: Thu Sep 23 2021
+   *
+   * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
+   * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
+   *
+   * @license
+   */var t=Math.PI/180;const e="undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope?self:{},i={_global:e,version:"8.2.0",isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/param/.test(function(t){}.toString()),dblClickWindow:400,getAngle:e=>i.angleDeg?e*t:e,enableTrace:!1,pointerEventsEnabled:!0,autoDrawEnabled:!0,hitOnDragEnabled:!1,capturePointerEventsEnabled:!1,_mouseListenClick:!1,_touchListenClick:!1,_pointerListenClick:!1,_mouseInDblClickWindow:!1,_touchInDblClickWindow:!1,_pointerInDblClickWindow:!1,_mouseDblClickPointerId:null,_touchDblClickPointerId:null,_pointerDblClickPointerId:null,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio||1,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:()=>i.DD.isDragging,isDragReady:()=>!!i.DD.node,document:e.document,_injectGlobal(t){e.Konva=t}},r=t=>{i[t.prototype.getClassName()]=t};i._injectGlobal(i);class a{constructor(t=[1,0,0,1,0,0]){this.dirty=!1,this.m=t&&t.slice()||[1,0,0,1,0,0]}reset(){this.m[0]=1,this.m[1]=0,this.m[2]=0,this.m[3]=1,this.m[4]=0,this.m[5]=0}copy(){return new a(this.m)}copyInto(t){t.m[0]=this.m[0],t.m[1]=this.m[1],t.m[2]=this.m[2],t.m[3]=this.m[3],t.m[4]=this.m[4],t.m[5]=this.m[5]}point(t){var e=this.m;return{x:e[0]*t.x+e[2]*t.y+e[4],y:e[1]*t.x+e[3]*t.y+e[5]}}translate(t,e){return this.m[4]+=this.m[0]*t+this.m[2]*e,this.m[5]+=this.m[1]*t+this.m[3]*e,this}scale(t,e){return this.m[0]*=t,this.m[1]*=t,this.m[2]*=e,this.m[3]*=e,this}rotate(t){var e=Math.cos(t),i=Math.sin(t),r=this.m[0]*e+this.m[2]*i,a=this.m[1]*e+this.m[3]*i,n=this.m[0]*-i+this.m[2]*e,s=this.m[1]*-i+this.m[3]*e;return this.m[0]=r,this.m[1]=a,this.m[2]=n,this.m[3]=s,this}getTranslation(){return{x:this.m[4],y:this.m[5]}}skew(t,e){var i=this.m[0]+this.m[2]*e,r=this.m[1]+this.m[3]*e,a=this.m[2]+this.m[0]*t,n=this.m[3]+this.m[1]*t;return this.m[0]=i,this.m[1]=r,this.m[2]=a,this.m[3]=n,this}multiply(t){var e=this.m[0]*t.m[0]+this.m[2]*t.m[1],i=this.m[1]*t.m[0]+this.m[3]*t.m[1],r=this.m[0]*t.m[2]+this.m[2]*t.m[3],a=this.m[1]*t.m[2]+this.m[3]*t.m[3],n=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],s=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}invert(){var t=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),e=this.m[3]*t,i=-this.m[1]*t,r=-this.m[2]*t,a=this.m[0]*t,n=t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),s=t*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}getMatrix(){return this.m}setAbsolutePosition(t,e){var i=this.m[0],r=this.m[1],a=this.m[2],n=this.m[3],s=this.m[4],o=(i*(e-this.m[5])-r*(t-s))/(i*n-r*a),h=(t-s-a*o)/i;return this.translate(h,o)}decompose(){var t=this.m[0],e=this.m[1],i=this.m[2],r=this.m[3],a=t*r-e*i;let n={x:this.m[4],y:this.m[5],rotation:0,scaleX:0,scaleY:0,skewX:0,skewY:0};if(0!=t||0!=e){var s=Math.sqrt(t*t+e*e);n.rotation=e>0?Math.acos(t/s):-Math.acos(t/s),n.scaleX=s,n.scaleY=a/s,n.skewX=(t*i+e*r)/a,n.skewY=0}else if(0!=i||0!=r){var o=Math.sqrt(i*i+r*r);n.rotation=Math.PI/2-(r>0?Math.acos(-i/o):-Math.acos(i/o)),n.scaleX=a/o,n.scaleY=o,n.skewX=0,n.skewY=(t*i+e*r)/a}return n.rotation=g._getRotation(n.rotation),n}}var n=Math.PI/180,s=180/Math.PI,o="Konva error: ",h={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,132,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,255,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,203],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[119,128,144],slategrey:[119,128,144],snow:[255,255,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],transparent:[255,255,255,0],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,5]},l=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,d=[];const c="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame||function(t){setTimeout(t,60)},g={_isElement:t=>!(!t||1!=t.nodeType),_isFunction:t=>!!(t&&t.constructor&&t.call&&t.apply),_isPlainObject:t=>!!t&&t.constructor===Object,_isArray:t=>"[object Array]"===Object.prototype.toString.call(t),_isNumber:t=>"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t),_isString:t=>"[object String]"===Object.prototype.toString.call(t),_isBoolean:t=>"[object Boolean]"===Object.prototype.toString.call(t),isObject:t=>t instanceof Object,isValidSelector(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:t=>0===t||t>0?1:-1,requestAnimFrame(t){d.push(t),1===d.length&&c((function(){const t=d;d=[],t.forEach((function(t){t()}))}))},createCanvasElement(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:()=>document.createElement("img"),_isInDocument(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_urlToImage(t,e){var i=g.createImageElement();i.onload=function(){e(i)},i.src=t},_rgbToHex:(t,e,i)=>((1<<24)+(t<<16)+(e<<8)+i).toString(16).slice(1),_hexToRgb(t){t=t.replace("#","");var e=parseInt(t,16);return{r:e>>16&255,g:e>>8&255,b:255&e}},getRandomColor(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},getRGB(t){var e;return t in h?{r:(e=h[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=l.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:t=>(t=t||"black",g._namedColorToRBA(t)||g._hex3ColorToRGBA(t)||g._hex6ColorToRGBA(t)||g._rgbColorToRGBA(t)||g._rgbaColorToRGBA(t)||g._hslColorToRGBA(t)),_namedColorToRBA(t){var e=h[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_hslColorToRGBA(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){const[e,...i]=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),r=Number(i[0])/360,a=Number(i[1])/100,n=Number(i[2])/100;let s,o,h;if(0===a)return h=255*n,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};s=n<.5?n*(1+a):n+a-n*a;const l=2*n-s,d=[0,0,0];for(let t=0;t<3;t++)o=r+1/3*-(t-1),o<0&&o++,o>1&&o--,h=6*o<1?l+6*(s-l)*o:2*o<1?s:3*o<2?l+(s-l)*(2/3-o)*6:l,d[t]=255*h;return{r:Math.round(d[0]),g:Math.round(d[1]),b:Math.round(d[2]),a:1}}},haveIntersection:(t,e)=>!(e.x>t.x+t.width||e.x+e.width<t.x||e.y>t.y+t.height||e.y+e.height<t.y),cloneObject(t){var e={};for(var i in t)this._isPlainObject(t[i])?e[i]=this.cloneObject(t[i]):this._isArray(t[i])?e[i]=this.cloneArray(t[i]):e[i]=t[i];return e},cloneArray:t=>t.slice(0),degToRad:t=>t*n,radToDeg:t=>t*s,_degToRad:t=>(g.warn("Util._degToRad is removed. Please use public Util.degToRad instead."),g.degToRad(t)),_radToDeg:t=>(g.warn("Util._radToDeg is removed. Please use public Util.radToDeg instead."),g.radToDeg(t)),_getRotation:t=>i.angleDeg?g.radToDeg(t):t,_capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),throw(t){throw new Error(o+t)},error(t){console.error(o+t)},warn(t){i.showWarnings&&console.warn("Konva warning: "+t)},each(t,e){for(var i in t)e(i,t[i])},_inRange:(t,e,i)=>e<=t&&t<i,_getProjectionToSegment(t,e,i,r,a,n){var s,o,h,l=(t-i)*(t-i)+(e-r)*(e-r);if(0==l)s=t,o=e,h=(a-i)*(a-i)+(n-r)*(n-r);else{var d=((a-t)*(i-t)+(n-e)*(r-e))/l;d<0?(s=t,o=e,h=(t-a)*(t-a)+(e-n)*(e-n)):d>1?(s=i,o=r,h=(i-a)*(i-a)+(r-n)*(r-n)):h=((s=t+d*(i-t))-a)*(s-a)+((o=e+d*(r-e))-n)*(o-n)}return[s,o,h]},_getProjectionToLine(t,e,i){var r=g.cloneObject(t),a=Number.MAX_VALUE;return e.forEach((function(n,s){if(i||s!==e.length-1){var o=e[(s+1)%e.length],h=g._getProjectionToSegment(n.x,n.y,o.x,o.y,t.x,t.y),l=h[0],d=h[1],c=h[2];c<a&&(r.x=l,r.y=d,a=c)}})),r},_prepareArrayForTween(t,e,i){var r,a=[],n=[];if(t.length>e.length){var s=e;e=t,t=s}for(r=0;r<t.length;r+=2)a.push({x:t[r],y:t[r+1]});for(r=0;r<e.length;r+=2)n.push({x:e[r],y:e[r+1]});var o=[];return n.forEach((function(t){var e=g._getProjectionToLine(t,a,i);o.push(e.x),o.push(e.y)})),o},_prepareToStringify(t){var e;for(var i in t.visitedByCircularReferenceRemoval=!0,t)if(t.hasOwnProperty(i)&&t[i]&&"object"==typeof t[i])if(e=Object.getOwnPropertyDescriptor(t,i),t[i].visitedByCircularReferenceRemoval||g._isElement(t[i])){if(!e.configurable)return null;delete t[i]}else if(null===g._prepareToStringify(t[i])){if(!e.configurable)return null;delete t[i]}return delete t.visitedByCircularReferenceRemoval,t},_assign(t,e){for(var i in e)t[i]=e[i];return t},_getFirstPointerId:t=>t.touches?t.changedTouches[0].identifier:999};function u(t){return g._isString(t)?'"'+t+'"':"[object Number]"===Object.prototype.toString.call(t)||g._isBoolean(t)?t:Object.prototype.toString.call(t)}function f(t){return t>255?255:t<0?0:Math.round(t)}function p(){if(i.isUnminified)return function(t,e){return g._isNumber(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function v(t){if(i.isUnminified)return function(e,i){let r=g._isNumber(e),a=g._isArray(e)&&e.length==t;return r||a||g.warn(u(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array<number>('+t+")"),e}}function m(){if(i.isUnminified)return function(t,e){return g._isNumber(t)||"auto"===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function _(){if(i.isUnminified)return function(t,e){return g._isString(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function y(){if(i.isUnminified)return function(t,e){const i=g._isString(t),r="[object CanvasGradient]"===Object.prototype.toString.call(t)||t&&t.addColorStop;return i||r||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function x(){if(i.isUnminified)return function(t,e){return!0===t||!1===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}var b="get",S="set";const w={addGetterSetter(t,e,i,r,a){w.addGetter(t,e,i),w.addSetter(t,e,r,a),w.addOverloadedGetterSetter(t,e)},addGetter(t,e,i){var r=b+g._capitalize(e);t.prototype[r]=t.prototype[r]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter(t,e,i,r){var a=S+g._capitalize(e);t.prototype[a]||w.overWriteSetter(t,e,i,r)},overWriteSetter(t,e,i,r){var a=S+g._capitalize(e);t.prototype[a]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),r&&r.call(this),this}},addComponentsGetterSetter(t,e,r,a,n){var s,o,h=r.length,l=g._capitalize,d=b+l(e),c=S+l(e);t.prototype[d]=function(){var t={};for(s=0;s<h;s++)t[o=r[s]]=this.getAttr(e+l(o));return t};var f=function(t){if(i.isUnminified)return function(e,i){return g.isObject(e)||g.warn(u(e)+' is a not valid value for "'+i+'" attribute. The value should be an object with properties '+t),e}}(r);t.prototype[c]=function(t){var i,r=this.attrs[e];for(i in a&&(t=a.call(this,t)),f&&f.call(this,t,e),t)t.hasOwnProperty(i)&&this._setAttr(e+l(i),t[i]);return this._fireChangeEvent(e,r,t),n&&n.call(this),this},w.addOverloadedGetterSetter(t,e)},addOverloadedGetterSetter(t,e){var i=g._capitalize(e),r=S+i,a=b+i;t.prototype[e]=function(){return arguments.length?(this[r](arguments[0]),this):this[a]()}},addDeprecatedGetterSetter(t,e,i,r){g.error("Adding deprecated "+e);var a=b+g._capitalize(e),n=e+" property is deprecated and will be removed soon. Look at Konva change log for more information.";t.prototype[a]=function(){g.error(n);var t=this.attrs[e];return void 0===t?i:t},w.addSetter(t,e,r,(function(){g.error(n)})),w.addOverloadedGetterSetter(t,e)},backCompat(t,e){g.each(e,(function(e,i){var r=t.prototype[i],a=b+g._capitalize(e),n=S+g._capitalize(e);function s(){r.apply(this,arguments),g.error('"'+e+'" method is deprecated and will be removed soon. Use ""'+i+'" instead.')}t.prototype[e]=s,t.prototype[a]=s,t.prototype[n]=s}))},afterSetFilter(){this._filterUpToDate=!1}};function C(t){var e,i,r=[],a=t.length,n=g;for(e=0;e<a;e++)i=t[e],n._isNumber(i)?i=Math.round(1e3*i)/1e3:n._isString(i)||(i+=""),r.push(i);return r}var k=["arc","arcTo","beginPath","bezierCurveTo","clearRect","clip","closePath","createLinearGradient","createPattern","createRadialGradient","drawImage","ellipse","fill","fillText","getImageData","createImageData","lineTo","moveTo","putImageData","quadraticCurveTo","rect","restore","rotate","save","scale","setLineDash","setTransform","stroke","strokeText","transform","translate"];class P{constructor(t){this.canvas=t,this._context=t._canvas.getContext("2d"),i.enableTrace&&(this.traceArr=[],this._enableTrace())}fillShape(t){t.fillEnabled()&&this._fill(t)}_fill(t){}strokeShape(t){t.hasStroke()&&this._stroke(t)}_stroke(t){}fillStrokeShape(t){t.attrs.fillAfterStrokeEnabled?(this.strokeShape(t),this.fillShape(t)):(this.fillShape(t),this.strokeShape(t))}getTrace(t,e){var i,r,a,n,s=this.traceArr,o=s.length,h="";for(i=0;i<o;i++)(a=(r=s[i]).method)?(n=r.args,h+=a,t?h+="()":g._isArray(n[0])?h+="(["+n.join(",")+"])":(e&&(n=n.map((t=>"number"==typeof t?Math.floor(t):t))),h+="("+n.join(",")+")")):(h+=r.property,t||(h+="="+r.val)),h+=";";return h}clearTrace(){this.traceArr=[]}_trace(t){var e=this.traceArr;e.push(t),e.length>=100&&e.shift()}reset(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)}getCanvas(){return this.canvas}clear(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)}_applyLineCap(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)}_applyOpacity(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)}_applyLineJoin(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)}setAttr(t,e){this._context[t]=e}arc(t,e,i,r,a,n){this._context.arc(t,e,i,r,a,n)}arcTo(t,e,i,r,a){this._context.arcTo(t,e,i,r,a)}beginPath(){this._context.beginPath()}bezierCurveTo(t,e,i,r,a,n){this._context.bezierCurveTo(t,e,i,r,a,n)}clearRect(t,e,i,r){this._context.clearRect(t,e,i,r)}clip(){this._context.clip()}closePath(){this._context.closePath()}createImageData(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0}createLinearGradient(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)}createPattern(t,e){return this._context.createPattern(t,e)}createRadialGradient(t,e,i,r,a,n){return this._context.createRadialGradient(t,e,i,r,a,n)}drawImage(t,e,i,r,a,n,s,o,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,a):9===l.length&&d.drawImage(t,e,i,r,a,n,s,o,h)}ellipse(t,e,i,r,a,n,s,o){this._context.ellipse(t,e,i,r,a,n,s,o)}isPointInPath(t,e){return this._context.isPointInPath(t,e)}fill(t){t?this._context.fill(t):this._context.fill()}fillRect(t,e,i,r){this._context.fillRect(t,e,i,r)}strokeRect(t,e,i,r){this._context.strokeRect(t,e,i,r)}fillText(t,e,i,r){r?this._context.fillText(t,e,i,r):this._context.fillText(t,e,i)}measureText(t){return this._context.measureText(t)}getImageData(t,e,i,r){return this._context.getImageData(t,e,i,r)}lineTo(t,e){this._context.lineTo(t,e)}moveTo(t,e){this._context.moveTo(t,e)}rect(t,e,i,r){this._context.rect(t,e,i,r)}putImageData(t,e,i){this._context.putImageData(t,e,i)}quadraticCurveTo(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)}restore(){this._context.restore()}rotate(t){this._context.rotate(t)}save(){this._context.save()}scale(t,e){this._context.scale(t,e)}setLineDash(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)}getLineDash(){return this._context.getLineDash()}setTransform(t,e,i,r,a,n){this._context.setTransform(t,e,i,r,a,n)}stroke(t){t?this._context.stroke(t):this._context.stroke()}strokeText(t,e,i,r){this._context.strokeText(t,e,i,r)}transform(t,e,i,r,a,n){this._context.transform(t,e,i,r,a,n)}translate(t,e){this._context.translate(t,e)}_enableTrace(){var t,e,i=this,r=k.length,a=this.setAttr,n=function(t){var r,a=i[t];i[t]=function(){return e=C(Array.prototype.slice.call(arguments,0)),r=a.apply(i,arguments),i._trace({method:t,args:e}),r}};for(t=0;t<r;t++)n(k[t]);i.setAttr=function(){a.apply(i,arguments);var t=arguments[0],e=arguments[1];"shadowOffsetX"!==t&&"shadowOffsetY"!==t&&"shadowBlur"!==t||(e/=this.canvas.getPixelRatio()),i._trace({property:t,val:e})}}_applyGlobalCompositeOperation(t){const e=t.attrs.globalCompositeOperation;!e||"source-over"===e||this.setAttr("globalCompositeOperation",e)}}["fillStyle","strokeStyle","shadowColor","shadowBlur","shadowOffsetX","shadowOffsetY","lineCap","lineDashOffset","lineJoin","lineWidth","miterLimit","font","textAlign","textBaseline","globalAlpha","globalCompositeOperation","imageSmoothingEnabled"].forEach((function(t){Object.defineProperty(P.prototype,t,{get(){return this._context[t]},set(e){this._context[t]=e}})}));class T extends P{_fillColor(t){var e=t.fill();this.setAttr("fillStyle",e),t._fillFunc(this)}_fillPattern(t){this.setAttr("fillStyle",t._getFillPattern()),t._fillFunc(this)}_fillLinearGradient(t){var e=t._getLinearGradient();e&&(this.setAttr("fillStyle",e),t._fillFunc(this))}_fillRadialGradient(t){var e=t._getRadialGradient();e&&(this.setAttr("fillStyle",e),t._fillFunc(this))}_fill(t){var e=t.fill(),i=t.getFillPriority();if(e&&"color"===i)this._fillColor(t);else{var r=t.getFillPatternImage();if(r&&"pattern"===i)this._fillPattern(t);else{var a=t.getFillLinearGradientColorStops();if(a&&"linear-gradient"===i)this._fillLinearGradient(t);else{var n=t.getFillRadialGradientColorStops();n&&"radial-gradient"===i?this._fillRadialGradient(t):e?this._fillColor(t):r?this._fillPattern(t):a?this._fillLinearGradient(t):n&&this._fillRadialGradient(t)}}}}_strokeLinearGradient(t){var e=t.getStrokeLinearGradientStartPoint(),i=t.getStrokeLinearGradientEndPoint(),r=t.getStrokeLinearGradientColorStops(),a=this.createLinearGradient(e.x,e.y,i.x,i.y);if(r){for(var n=0;n<r.length;n+=2)a.addColorStop(r[n],r[n+1]);this.setAttr("strokeStyle",a)}}_stroke(t){var e=t.dash(),i=t.getStrokeScaleEnabled();if(t.hasStroke()){if(!i){this.save();var r=this.getCanvas().getPixelRatio();this.setTransform(r,0,0,r,0,0)}this._applyLineCap(t),e&&t.dashEnabled()&&(this.setLineDash(e),this.setAttr("lineDashOffset",t.dashOffset())),this.setAttr("lineWidth",t.strokeWidth()),t.getShadowForStrokeEnabled()||this.setAttr("shadowColor","rgba(0,0,0,0)"),t.getStrokeLinearGradientColorStops()?this._strokeLinearGradient(t):this.setAttr("strokeStyle",t.stroke()),t._strokeFunc(this),i||this.restore()}}_applyShadow(t){var e,i,r,a=null!==(e=t.getShadowRGBA())&&void 0!==e?e:"black",n=null!==(i=t.getShadowBlur())&&void 0!==i?i:5,s=null!==(r=t.getShadowOffset())&&void 0!==r?r:{x:0,y:0},o=t.getAbsoluteScale(),h=this.canvas.getPixelRatio(),l=o.x*h,d=o.y*h;this.setAttr("shadowColor",a),this.setAttr("shadowBlur",n*Math.min(Math.abs(l),Math.abs(d))),this.setAttr("shadowOffsetX",s.x*l),this.setAttr("shadowOffsetY",s.y*d)}}class A extends P{_fill(t){this.save(),this.setAttr("fillStyle",t.colorKey),t._fillFuncHit(this),this.restore()}strokeShape(t){t.hasHitStroke()&&this._stroke(t)}_stroke(t){if(t.hasHitStroke()){var e=t.getStrokeScaleEnabled();if(!e){this.save();var i=this.getCanvas().getPixelRatio();this.setTransform(i,0,0,i,0,0)}this._applyLineCap(t);var r=t.hitStrokeWidth(),a="auto"===r?t.strokeWidth():r;this.setAttr("lineWidth",a),this.setAttr("strokeStyle",t.colorKey),t._strokeFuncHit(this),e||this.restore()}}}var M;class G{constructor(t){this.pixelRatio=1,this.width=0,this.height=0,this.isCache=!1;var e=(t||{}).pixelRatio||i.pixelRatio||function(){if(M)return M;var t=g.createCanvasElement().getContext("2d");return M=(i._global.devicePixelRatio||1)/(t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1)}();this.pixelRatio=e,this._canvas=g.createCanvasElement(),this._canvas.style.padding="0",this._canvas.style.margin="0",this._canvas.style.border="0",this._canvas.style.background="transparent",this._canvas.style.position="absolute",this._canvas.style.top="0",this._canvas.style.left="0"}getContext(){return this.context}getPixelRatio(){return this.pixelRatio}setPixelRatio(t){var e=this.pixelRatio;this.pixelRatio=t,this.setSize(this.getWidth()/e,this.getHeight()/e)}setWidth(t){this.width=this._canvas.width=t*this.pixelRatio,this._canvas.style.width=t+"px";var e=this.pixelRatio;this.getContext()._context.scale(e,e)}setHeight(t){this.height=this._canvas.height=t*this.pixelRatio,this._canvas.style.height=t+"px";var e=this.pixelRatio;this.getContext()._context.scale(e,e)}getWidth(){return this.width}getHeight(){return this.height}setSize(t,e){this.setWidth(t||0),this.setHeight(e||0)}toDataURL(t,e){try{return this._canvas.toDataURL(t,e)}catch(t){try{return this._canvas.toDataURL()}catch(t){return g.error("Unable to get data URL. "+t.message+" For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html."),""}}}}w.addGetterSetter(G,"pixelRatio",void 0,p());class R extends G{constructor(t={width:0,height:0}){super(t),this.context=new T(this),this.setSize(t.width,t.height)}}class E extends G{constructor(t={width:0,height:0}){super(t),this.hitCanvas=!0,this.context=new A(this),this.setSize(t.width,t.height)}}const L={get isDragging(){var t=!1;return L._dragElements.forEach((e=>{"dragging"===e.dragStatus&&(t=!0)})),t},justDragged:!1,get node(){var t;return L._dragElements.forEach((e=>{t=e.node})),t},_dragElements:new Map,_drag(t){const e=[];L._dragElements.forEach(((i,r)=>{const{node:a}=i,n=a.getStage();n.setPointersPositions(t),void 0===i.pointerId&&(i.pointerId=g._getFirstPointerId(t));const s=n._changedPointerPositions.find((t=>t.id===i.pointerId));if(s){if("dragging"!==i.dragStatus){var o=a.dragDistance();if(Math.max(Math.abs(s.x-i.startPointerPos.x),Math.abs(s.y-i.startPointerPos.y))<o)return;if(a.startDrag({evt:t}),!a.isDragging())return}a._setDragPosition(t,i),e.push(a)}})),e.forEach((e=>{e.fire("dragmove",{type:"dragmove",target:e,evt:t},!0)}))},_endDragBefore(t){L._dragElements.forEach((e=>{const{node:r}=e,a=r.getStage();t&&a.setPointersPositions(t);if(!a._changedPointerPositions.find((t=>t.id===e.pointerId)))return;"dragging"!==e.dragStatus&&"stopped"!==e.dragStatus||(L.justDragged=!0,i._mouseListenClick=!1,i._touchListenClick=!1,i._pointerListenClick=!1,e.dragStatus="stopped");const n=e.node.getLayer()||e.node instanceof i.Stage&&e.node;n&&n.batchDraw()}))},_endDragAfter(t){L._dragElements.forEach(((e,i)=>{"stopped"===e.dragStatus&&e.node.fire("dragend",{type:"dragend",target:e.node,evt:t},!0),"dragging"!==e.dragStatus&&L._dragElements.delete(i)}))}};i.isBrowser&&(window.addEventListener("mouseup",L._endDragBefore,!0),window.addEventListener("touchend",L._endDragBefore,!0),window.addEventListener("mousemove",L._drag),window.addEventListener("touchmove",L._drag),window.addEventListener("mouseup",L._endDragAfter,!1),window.addEventListener("touchend",L._endDragAfter,!1));var D="absoluteOpacity",O="allEventListeners",I="absoluteTransform",F="absoluteScale",N="canvas",B="listening",z="mouseenter",W="mouseleave",H="Shape",Y=" ",X="stage",j="transform",U="visible",q=["xChange.konva","yChange.konva","scaleXChange.konva","scaleYChange.konva","skewXChange.konva","skewYChange.konva","rotationChange.konva","offsetXChange.konva","offsetYChange.konva","transformsEnabledChange.konva"].join(Y);let V=1;class K{constructor(t){this._id=V++,this.eventListeners={},this.attrs={},this.index=0,this._allEventListeners=null,this.parent=null,this._cache=new Map,this._attachedDepsListeners=new Map,this._lastPos=null,this._batchingTransformChange=!1,this._needClearTransformCache=!1,this._filterUpToDate=!1,this._isUnderCache=!1,this._dragEventId=null,this._shouldFireChangeEvents=!1,this.setAttrs(t),this._shouldFireChangeEvents=!0}hasChildren(){return!1}_clearCache(t){t!==j&&t!==I||!this._cache.get(t)?t?this._cache.delete(t):this._cache.clear():this._cache.get(t).dirty=!0}_getCache(t,e){var i=this._cache.get(t);return(void 0===i||(t===j||t===I)&&!0===i.dirty)&&(i=e.call(this),this._cache.set(t,i)),i}_calculate(t,e,i){if(!this._attachedDepsListeners.get(t)){const i=e.map((t=>t+"Change.konva")).join(Y);this.on(i,(()=>{this._clearCache(t)})),this._attachedDepsListeners.set(t,!0)}return this._getCache(t,i)}_getCanvasCache(){return this._cache.get(N)}_clearSelfAndDescendantCache(t){this._clearCache(t),t===I&&this.fire("absoluteTransformChange")}clearCache(){return this._cache.delete(N),this._clearSelfAndDescendantCache(),this._requestDraw(),this}cache(t){var e=t||{},i={};void 0!==e.x&&void 0!==e.y&&void 0!==e.width&&void 0!==e.height||(i=this.getClientRect({skipTransform:!0,relativeTo:this.getParent()}));var r=Math.ceil(e.width||i.width),a=Math.ceil(e.height||i.height),n=e.pixelRatio,s=void 0===e.x?i.x:e.x,o=void 0===e.y?i.y:e.y,h=e.offset||0,l=e.drawBorder||!1,d=e.hitCanvasPixelRatio||1;if(r&&a){s-=h,o-=h;var c=new R({pixelRatio:n,width:r+=2*h,height:a+=2*h}),u=new R({pixelRatio:n,width:0,height:0}),f=new E({pixelRatio:d,width:r,height:a}),p=c.getContext(),v=f.getContext();return f.isCache=!0,c.isCache=!0,this._cache.delete(N),this._filterUpToDate=!1,!1===e.imageSmoothingEnabled&&(c.getContext()._context.imageSmoothingEnabled=!1,u.getContext()._context.imageSmoothingEnabled=!1),p.save(),v.save(),p.translate(-s,-o),v.translate(-s,-o),this._isUnderCache=!0,this._clearSelfAndDescendantCache(D),this._clearSelfAndDescendantCache(F),this.drawScene(c,this),this.drawHit(f,this),this._isUnderCache=!1,p.restore(),v.restore(),l&&(p.save(),p.beginPath(),p.rect(0,0,r,a),p.closePath(),p.setAttr("strokeStyle","red"),p.setAttr("lineWidth",5),p.stroke(),p.restore()),this._cache.set(N,{scene:c,filter:u,hit:f,x:s,y:o}),this._requestDraw(),this}g.error("Can not cache the node. Width or height of the node equals 0. Caching is skipped.")}isCached(){return this._cache.has(N)}getClientRect(t){throw new Error('abstract "getClientRect" method call')}_transformedRect(t,e){var i,r,a,n,s=[{x:t.x,y:t.y},{x:t.x+t.width,y:t.y},{x:t.x+t.width,y:t.y+t.height},{x:t.x,y:t.y+t.height}],o=this.getAbsoluteTransform(e);return s.forEach((function(t){var e=o.point(t);void 0===i&&(i=a=e.x,r=n=e.y),i=Math.min(i,e.x),r=Math.min(r,e.y),a=Math.max(a,e.x),n=Math.max(n,e.y)})),{x:i,y:r,width:a-i,height:n-r}}_drawCachedSceneCanvas(t){t.save(),t._applyOpacity(this),t._applyGlobalCompositeOperation(this);const e=this._getCanvasCache();t.translate(e.x,e.y);var i=this._getCachedSceneCanvas(),r=i.pixelRatio;t.drawImage(i._canvas,0,0,i.width/r,i.height/r),t.restore()}_drawCachedHitCanvas(t){var e=this._getCanvasCache(),i=e.hit;t.save(),t.translate(e.x,e.y),t.drawImage(i._canvas,0,0,i.width/i.pixelRatio,i.height/i.pixelRatio),t.restore()}_getCachedSceneCanvas(){var t,e,i,r,a=this.filters(),n=this._getCanvasCache(),s=n.scene,o=n.filter,h=o.getContext();if(a){if(!this._filterUpToDate){var l=s.pixelRatio;o.setSize(s.width/s.pixelRatio,s.height/s.pixelRatio);try{for(t=a.length,h.clear(),h.drawImage(s._canvas,0,0,s.getWidth()/l,s.getHeight()/l),e=h.getImageData(0,0,o.getWidth(),o.getHeight()),i=0;i<t;i++)"function"==typeof(r=a[i])?(r.call(this,e),h.putImageData(e,0,0)):g.error("Filter should be type of function, but got "+typeof r+" instead. Please check correct filters")}catch(t){g.error("Unable to apply filter. "+t.message+" This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.")}this._filterUpToDate=!0}return o}return s}on(t,e){if(this._cache&&this._cache.delete(O),3===arguments.length)return this._delegate.apply(this,arguments);var i,r,a,n,s=t.split(Y),o=s.length;for(i=0;i<o;i++)a=(r=s[i].split("."))[0],n=r[1]||"",this.eventListeners[a]||(this.eventListeners[a]=[]),this.eventListeners[a].push({name:n,handler:e});return this}off(t,e){var i,r,a,n,s,o=(t||"").split(Y),h=o.length;if(this._cache&&this._cache.delete(O),!t)for(r in this.eventListeners)this._off(r);for(i=0;i<h;i++)if(n=(a=o[i].split("."))[0],s=a[1],n)this.eventListeners[n]&&this._off(n,s,e);else for(r in this.eventListeners)this._off(r,s,e);return this}dispatchEvent(t){var e={target:this,type:t.type,evt:t};return this.fire(t.type,e),this}addEventListener(t,e){return this.on(t,(function(t){e.call(this,t.evt)})),this}removeEventListener(t){return this.off(t),this}_delegate(t,e,i){var r=this;this.on(t,(function(t){for(var a=t.target.findAncestors(e,!0,r),n=0;n<a.length;n++)(t=g.cloneObject(t)).currentTarget=a[n],i.call(a[n],t)}))}remove(){return this.isDragging()&&this.stopDrag(),L._dragElements.delete(this._id),this._remove(),this}_clearCaches(){this._clearSelfAndDescendantCache(I),this._clearSelfAndDescendantCache(D),this._clearSelfAndDescendantCache(F),this._clearSelfAndDescendantCache(X),this._clearSelfAndDescendantCache(U),this._clearSelfAndDescendantCache(B)}_remove(){this._clearCaches();var t=this.getParent();t&&t.children&&(t.children.splice(this.index,1),t._setChildrenIndices(),this.parent=null)}destroy(){return this.remove(),this}getAttr(t){var e="get"+g._capitalize(t);return g._isFunction(this[e])?this[e]():this.attrs[t]}getAncestors(){for(var t=this.getParent(),e=[];t;)e.push(t),t=t.getParent();return e}getAttrs(){return this.attrs||{}}setAttrs(t){return this._batchTransformChanges((()=>{var e,i;if(!t)return this;for(e in t)"children"!==e&&(i="set"+g._capitalize(e),g._isFunction(this[i])?this[i](t[e]):this._setAttr(e,t[e]))})),this}isListening(){return this._getCache(B,this._isListening)}_isListening(t){if(!this.listening())return!1;const e=this.getParent();return!e||e===t||this===t||e._isListening(t)}isVisible(){return this._getCache(U,this._isVisible)}_isVisible(t){if(!this.visible())return!1;const e=this.getParent();return!e||e===t||this===t||e._isVisible(t)}shouldDrawHit(t,e=!1){if(t)return this._isVisible(t)&&this._isListening(t);var r=this.getLayer(),a=!1;L._dragElements.forEach((t=>{"dragging"===t.dragStatus&&("Stage"===t.node.nodeType||t.node.getLayer()===r)&&(a=!0)}));var n=!e&&!i.hitOnDragEnabled&&a;return this.isListening()&&this.isVisible()&&!n}show(){return this.visible(!0),this}hide(){return this.visible(!1),this}getZIndex(){return this.index||0}getAbsoluteZIndex(){var t,e,i,r,a=this.getDepth(),n=this,s=0;return"Stage"!==n.nodeType&&function o(h){for(t=[],e=h.length,i=0;i<e;i++)r=h[i],s++,r.nodeType!==H&&(t=t.concat(r.getChildren().slice())),r._id===n._id&&(i=e);t.length>0&&t[0].getDepth()<=a&&o(t)}(n.getStage().getChildren()),s}getDepth(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t}_batchTransformChanges(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache(j),this._clearSelfAndDescendantCache(I)),this._needClearTransformCache=!1}setPosition(t){return this._batchTransformChanges((()=>{this.x(t.x),this.y(t.y)})),this}getPosition(){return{x:this.x(),y:this.y()}}getRelativePointerPosition(){if(!this.getStage())return null;var t=this.getStage().getPointerPosition();if(!t)return null;var e=this.getAbsoluteTransform().copy();return e.invert(),e.point(t)}getAbsolutePosition(t){let e=!1,i=this.parent;for(;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var r=this.getAbsoluteTransform(t).getMatrix(),n=new a,s=this.offset();return n.m=r.slice(),n.translate(s.x,s.y),n.getTranslation()}setAbsolutePosition(t){var e=this._clearTransform();this.attrs.x=e.x,this.attrs.y=e.y,delete e.x,delete e.y,this._clearCache(j);var i=this._getAbsoluteTransform().copy();return i.invert(),i.translate(t.x,t.y),t={x:this.attrs.x+i.getTranslation().x,y:this.attrs.y+i.getTranslation().y},this._setTransform(e),this.setPosition({x:t.x,y:t.y}),this._clearCache(j),this._clearSelfAndDescendantCache(I),this}_setTransform(t){var e;for(e in t)this.attrs[e]=t[e]}_clearTransform(){var t={x:this.x(),y:this.y(),rotation:this.rotation(),scaleX:this.scaleX(),scaleY:this.scaleY(),offsetX:this.offsetX(),offsetY:this.offsetY(),skewX:this.skewX(),skewY:this.skewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,t}move(t){var e=t.x,i=t.y,r=this.x(),a=this.y();return void 0!==e&&(r+=e),void 0!==i&&(a+=i),this.setPosition({x:r,y:a}),this}_eachAncestorReverse(t,e){var i,r,a=[],n=this.getParent();if(!e||e._id!==this._id){for(a.unshift(this);n&&(!e||n._id!==e._id);)a.unshift(n),n=n.parent;for(i=a.length,r=0;r<i;r++)t(a[r])}}rotate(t){return this.rotation(this.rotation()+t),this}moveToTop(){if(!this.parent)return g.warn("Node has no parent. moveToTop function is ignored."),!1;var t=this.index;return this.parent.children.splice(t,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0}moveUp(){if(!this.parent)return g.warn("Node has no parent. moveUp function is ignored."),!1;var t=this.index;return t<this.parent.getChildren().length-1&&(this.parent.children.splice(t,1),this.parent.children.splice(t+1,0,this),this.parent._setChildrenIndices(),!0)}moveDown(){if(!this.parent)return g.warn("Node has no parent. moveDown function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)}moveToBottom(){if(!this.parent)return g.warn("Node has no parent. moveToBottom function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0)}setZIndex(t){if(!this.parent)return g.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&g.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this}getAbsoluteOpacity(){return this._getCache(D,this._getAbsoluteOpacity)}_getAbsoluteOpacity(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t}moveTo(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this}toObject(){var t,e,i,r,a={},n=this.getAttrs();for(t in a.attrs={},n)e=n[t],g.isObject(e)&&!g._isPlainObject(e)&&!g._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],r=i?i.call(this):null,n[t]=e,r!==e&&(a.attrs[t]=e));return a.className=this.getClassName(),g._prepareToStringify(a)}toJSON(){return JSON.stringify(this.toObject())}getParent(){return this.parent}findAncestors(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var a=this.parent;a;){if(a===i)return r;a._isMatch(t)&&r.push(a),a=a.parent}return r}isAncestorOf(t){return!1}findAncestor(t,e,i){return this.findAncestors(t,e,i)[0]}_isMatch(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,r=t.replace(/ /g,"").split(","),a=r.length;for(e=0;e<a;e++)if(i=r[e],g.isValidSelector(i)||(g.warn('Selector "'+i+'" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".'),g.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".'),g.warn("Konva is awesome, right?")),"#"===i.charAt(0)){if(this.id()===i.slice(1))return!0}else if("."===i.charAt(0)){if(this.hasName(i.slice(1)))return!0}else if(this.className===i||this.nodeType===i)return!0;return!1}getLayer(){var t=this.getParent();return t?t.getLayer():null}getStage(){return this._getCache(X,this._getStage)}_getStage(){var t=this.getParent();return t?t.getStage():void 0}fire(t,e={},i){return e.target=e.target||this,i?this._fireAndBubble(t,e):this._fire(t,e),this}getAbsoluteTransform(t){return t?this._getAbsoluteTransform(t):this._getCache(I,this._getAbsoluteTransform)}_getAbsoluteTransform(t){var e;if(t)return e=new a,this._eachAncestorReverse((function(t){var i=t.transformsEnabled();"all"===i?e.multiply(t.getTransform()):"position"===i&&e.translate(t.x()-t.offsetX(),t.y()-t.offsetY())}),t),e;e=this._cache.get(I)||new a,this.parent?this.parent.getAbsoluteTransform().copyInto(e):e.reset();var i=this.transformsEnabled();if("all"===i)e.multiply(this.getTransform());else if("position"===i){const t=this.attrs.x||0,i=this.attrs.y||0,r=this.attrs.offsetX||0,a=this.attrs.offsetY||0;e.translate(t-r,i-a)}return e.dirty=!1,e}getAbsoluteScale(t){for(var e=this;e;)e._isUnderCache&&(t=e),e=e.getParent();const i=this.getAbsoluteTransform(t).decompose();return{x:i.scaleX,y:i.scaleY}}getAbsoluteRotation(){return this.getAbsoluteTransform().decompose().rotation}getTransform(){return this._getCache(j,this._getTransform)}_getTransform(){var t,e,r=this._cache.get(j)||new a;r.reset();var n=this.x(),s=this.y(),o=i.getAngle(this.rotation()),h=null!==(t=this.attrs.scaleX)&&void 0!==t?t:1,l=null!==(e=this.attrs.scaleY)&&void 0!==e?e:1,d=this.attrs.skewX||0,c=this.attrs.skewY||0,g=this.attrs.offsetX||0,u=this.attrs.offsetY||0;return 0===n&&0===s||r.translate(n,s),0!==o&&r.rotate(o),0===d&&0===c||r.skew(d,c),1===h&&1===l||r.scale(h,l),0===g&&0===u||r.translate(-1*g,-1*u),r.dirty=!1,r}clone(t){var e,i,r,a,n,s=g.cloneObject(this.attrs);for(e in t)s[e]=t[e];var o=new this.constructor(s);for(e in this.eventListeners)for(r=(i=this.eventListeners[e]).length,a=0;a<r;a++)(n=i[a]).name.indexOf("konva")<0&&(o.eventListeners[e]||(o.eventListeners[e]=[]),o.eventListeners[e].push(n));return o}_toKonvaCanvas(t){t=t||{};var e=this.getClientRect(),i=this.getStage(),r=void 0!==t.x?t.x:e.x,a=void 0!==t.y?t.y:e.y,n=t.pixelRatio||1,s=new R({width:t.width||e.width||(i?i.width():0),height:t.height||e.height||(i?i.height():0),pixelRatio:n}),o=s.getContext();return o.save(),(r||a)&&o.translate(-1*r,-1*a),this.drawScene(s),o.restore(),s}toCanvas(t){return this._toKonvaCanvas(t)._canvas}toDataURL(t){var e=(t=t||{}).mimeType||null,i=t.quality||null,r=this._toKonvaCanvas(t).toDataURL(e,i);return t.callback&&t.callback(r),r}toImage(t){if(!t||!t.callback)throw"callback required for toImage method config argument";var e=t.callback;delete t.callback,g._urlToImage(this.toDataURL(t),(function(t){e(t)}))}setSize(t){return this.width(t.width),this.height(t.height),this}getSize(){return{width:this.width(),height:this.height()}}getClassName(){return this.className||this.nodeType}getType(){return this.nodeType}getDragDistance(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():i.dragDistance}_off(t,e,i){var r,a,n,s=this.eventListeners[t];for(r=0;r<s.length;r++)if(a=s[r].name,n=s[r].handler,!("konva"===a&&"konva"!==e||e&&a!==e||i&&i!==n)){if(s.splice(r,1),0===s.length){delete this.eventListeners[t];break}r--}}_fireChangeEvent(t,e,i){this._fire(t+"Change",{oldVal:e,newVal:i})}addName(t){if(!this.hasName(t)){var e=this.name(),i=e?e+" "+t:t;this.name(i)}return this}hasName(t){if(!t)return!1;const e=this.name();return!!e&&-1!==(e||"").split(/\s/g).indexOf(t)}removeName(t){var e=(this.name()||"").split(/\s/g),i=e.indexOf(t);return-1!==i&&(e.splice(i,1),this.name(e.join(" "))),this}setAttr(t,e){var i=this["set"+g._capitalize(t)];return g._isFunction(i)?i.call(this,e):this._setAttr(t,e),this}_requestDraw(){if(i.autoDrawEnabled){const t=this.getLayer()||this.getStage();null==t||t.batchDraw()}}_setAttr(t,e){var i=this.attrs[t];(i!==e||g.isObject(e))&&(null==e?delete this.attrs[t]:this.attrs[t]=e,this._shouldFireChangeEvents&&this._fireChangeEvent(t,i,e),this._requestDraw())}_setComponentAttr(t,e,i){var r;void 0!==i&&((r=this.attrs[t])||(this.attrs[t]=this.getAttr(t)),this.attrs[t][e]=i,this._fireChangeEvent(t,r,i))}_fireAndBubble(t,e,i){if(e&&this.nodeType===H&&(e.target=this),!((t===z||t===W)&&(i&&(this===i||this.isAncestorOf&&this.isAncestorOf(i))||"Stage"===this.nodeType&&!i))){this._fire(t,e);var r=(t===z||t===W)&&i&&i.isAncestorOf&&i.isAncestorOf(this)&&!i.isAncestorOf(this.parent);(e&&!e.cancelBubble||!e)&&this.parent&&this.parent.isListening()&&!r&&(i&&i.parent?this._fireAndBubble.call(this.parent,t,e,i):this._fireAndBubble.call(this.parent,t,e))}}_getProtoListeners(t){let e=this._cache.get(O);if(!e){e={};let t=Object.getPrototypeOf(this);for(;t;)if(t.eventListeners){for(var i in t.eventListeners){const r=t.eventListeners[i],a=e[i]||[];e[i]=r.concat(a)}t=Object.getPrototypeOf(t)}else t=Object.getPrototypeOf(t);this._cache.set(O,e)}return e[t]}_fire(t,e){(e=e||{}).currentTarget=this,e.type=t;const i=this._getProtoListeners(t);if(i)for(var r=0;r<i.length;r++)i[r].handler.call(this,e);const a=this.eventListeners[t];if(a)for(r=0;r<a.length;r++)a[r].handler.call(this,e)}draw(){return this.drawScene(),this.drawHit(),this}_createDragElement(t){var e=t?t.pointerId:void 0,i=this.getStage(),r=this.getAbsolutePosition(),a=i._getPointerById(e)||i._changedPointerPositions[0]||r;L._dragElements.set(this._id,{node:this,startPointerPos:a,offset:{x:a.x-r.x,y:a.y-r.y},dragStatus:"ready",pointerId:e})}startDrag(t,e=!0){L._dragElements.has(this._id)||this._createDragElement(t);L._dragElements.get(this._id).dragStatus="dragging",this.fire("dragstart",{type:"dragstart",target:this,evt:t&&t.evt},e)}_setDragPosition(t,e){const i=this.getStage()._getPointerById(e.pointerId);if(i){var r={x:i.x-e.offset.x,y:i.y-e.offset.y},a=this.dragBoundFunc();if(void 0!==a){const e=a.call(this,r,t);e?r=e:g.warn("dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.")}this._lastPos&&this._lastPos.x===r.x&&this._lastPos.y===r.y||(this.setAbsolutePosition(r),this._requestDraw()),this._lastPos=r}}stopDrag(t){const e=L._dragElements.get(this._id);e&&(e.dragStatus="stopped"),L._endDragBefore(t),L._endDragAfter(t)}setDraggable(t){this._setAttr("draggable",t),this._dragChange()}isDragging(){const t=L._dragElements.get(this._id);return!!t&&"dragging"===t.dragStatus}_listenDrag(){this._dragCleanup(),this.on("mousedown.konva touchstart.konva",(function(t){if((!(void 0!==t.evt.button)||i.dragButtons.indexOf(t.evt.button)>=0)&&!this.isDragging()){var e=!1;L._dragElements.forEach((t=>{this.isAncestorOf(t.node)&&(e=!0)})),e||this._createDragElement(t)}}))}_dragChange(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;const t=L._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&L._dragElements.delete(this._id)}}_dragCleanup(){this.off("mousedown.konva"),this.off("touchstart.konva")}isClientRectOnScreen(t={x:0,y:0}){const e=this.getStage();if(!e)return!1;const i={x:-t.x,y:-t.y,width:e.width()+t.x,height:e.height()+t.y};return g.haveIntersection(i,this.getClientRect())}static create(t,e){return g._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)}static _createNode(t,e){var r,a,n,s=K.prototype.getClassName.call(t),o=t.children;e&&(t.attrs.container=e),i[s]||(g.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape");if(r=new(0,i[s])(t.attrs),o)for(a=o.length,n=0;n<a;n++)r.add(K._createNode(o[n]));return r}}K.prototype.nodeType="Node",K.prototype._attrsAffectingSize=[],K.prototype.eventListeners={},K.prototype.on.call(K.prototype,q,(function(){this._batchingTransformChange?this._needClearTransformCache=!0:(this._clearCache(j),this._clearSelfAndDescendantCache(I))})),K.prototype.on.call(K.prototype,"visibleChange.konva",(function(){this._clearSelfAndDescendantCache(U)})),K.prototype.on.call(K.prototype,"listeningChange.konva",(function(){this._clearSelfAndDescendantCache(B)})),K.prototype.on.call(K.prototype,"opacityChange.konva",(function(){this._clearSelfAndDescendantCache(D)}));const Q=w.addGetterSetter;Q(K,"zIndex"),Q(K,"absolutePosition"),Q(K,"position"),Q(K,"x",0,p()),Q(K,"y",0,p()),Q(K,"globalCompositeOperation","source-over",_()),Q(K,"opacity",1,p()),Q(K,"name","",_()),Q(K,"id","",_()),Q(K,"rotation",0,p()),w.addComponentsGetterSetter(K,"scale",["x","y"]),Q(K,"scaleX",1,p()),Q(K,"scaleY",1,p()),w.addComponentsGetterSetter(K,"skew",["x","y"]),Q(K,"skewX",0,p()),Q(K,"skewY",0,p()),w.addComponentsGetterSetter(K,"offset",["x","y"]),Q(K,"offsetX",0,p()),Q(K,"offsetY",0,p()),Q(K,"dragDistance",null,p()),Q(K,"width",0,p()),Q(K,"height",0,p()),Q(K,"listening",!0,x()),Q(K,"preventDefault",!0,x()),Q(K,"filters",null,(function(t){return this._filterUpToDate=!1,t})),Q(K,"visible",!0,x()),Q(K,"transformsEnabled","all",_()),Q(K,"size"),Q(K,"dragBoundFunc"),Q(K,"draggable",!1,x()),w.backCompat(K,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"});class J extends K{constructor(){super(...arguments),this.children=[]}getChildren(t){if(!t)return this.children||[];const e=this.children||[];var i=[];return e.forEach((function(e){t(e)&&i.push(e)})),i}hasChildren(){return this.getChildren().length>0}removeChildren(){return this.getChildren().forEach((t=>{t.parent=null,t.index=0,t.remove()})),this.children=[],this._requestDraw(),this}destroyChildren(){return this.getChildren().forEach((t=>{t.parent=null,t.index=0,t.destroy()})),this.children=[],this._requestDraw(),this}add(...t){if(arguments.length>1){for(var e=0;e<arguments.length;e++)this.add(arguments[e]);return this}var i=t[0];return i.getParent()?(i.moveTo(this),this):(this._validateAdd(i),i.index=this.getChildren().length,i.parent=this,i._clearCaches(),this.getChildren().push(i),this._fire("add",{child:i}),this._requestDraw(),this)}destroy(){return this.hasChildren()&&this.destroyChildren(),super.destroy(),this}find(t){return this._generalFind(t,!1)}findOne(t){var e=this._generalFind(t,!0);return e.length>0?e[0]:void 0}_generalFind(t,e){var i=[];return this._descendants((r=>{const a=r._isMatch(t);return a&&i.push(r),!(!a||!e)})),i}_descendants(t){let e=!1;const i=this.getChildren();for(const r of i){if(e=t(r),e)return!0;if(r.hasChildren()&&(e=r._descendants(t),e))return!0}return!1}toObject(){var t=K.prototype.toObject.call(this);return t.children=[],this.getChildren().forEach((e=>{t.children.push(e.toObject())})),t}isAncestorOf(t){for(var e=t.getParent();e;){if(e._id===this._id)return!0;e=e.getParent()}return!1}clone(t){var e=K.prototype.clone.call(this,t);return this.getChildren().forEach((function(t){e.add(t.clone())})),e}getAllIntersections(t){var e=[];return this.find("Shape").forEach((function(i){i.isVisible()&&i.intersects(t)&&e.push(i)})),e}_clearSelfAndDescendantCache(t){var e;super._clearSelfAndDescendantCache(t),this.isCached()||null===(e=this.children)||void 0===e||e.forEach((function(e){e._clearSelfAndDescendantCache(t)}))}_setChildrenIndices(){var t;null===(t=this.children)||void 0===t||t.forEach((function(t,e){t.index=e})),this._requestDraw()}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas(),a=r&&r.getContext(),n=this._getCanvasCache(),s=n&&n.scene,o=r&&r.isCache;if(!this.isVisible()&&!o)return this;if(s){a.save();var h=this.getAbsoluteTransform(e).getMatrix();a.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedSceneCanvas(a),a.restore()}else this._drawChildren("drawScene",r,e);return this}drawHit(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),r=t||i&&i.hitCanvas,a=r&&r.getContext(),n=this._getCanvasCache();if(n&&n.hit){a.save();var s=this.getAbsoluteTransform(e).getMatrix();a.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._drawCachedHitCanvas(a),a.restore()}else this._drawChildren("drawHit",r,e);return this}_drawChildren(t,e,i){var r,a=e&&e.getContext(),n=this.clipWidth(),s=this.clipHeight(),o=this.clipFunc(),h=n&&s||o;const l=i===this;if(h){a.save();var d=this.getAbsoluteTransform(i),c=d.getMatrix();if(a.transform(c[0],c[1],c[2],c[3],c[4],c[5]),a.beginPath(),o)o.call(this,a,this);else{var g=this.clipX(),u=this.clipY();a.rect(g,u,n,s)}a.clip(),c=d.copy().invert().getMatrix(),a.transform(c[0],c[1],c[2],c[3],c[4],c[5])}var f=!l&&"source-over"!==this.globalCompositeOperation()&&"drawScene"===t;f&&(a.save(),a._applyGlobalCompositeOperation(this)),null===(r=this.children)||void 0===r||r.forEach((function(r){r[t](e,i)})),f&&a.restore(),h&&a.restore()}getClientRect(t){var e,i,r,a,n,s=(t=t||{}).skipTransform,o=t.relativeTo,h={x:1/0,y:1/0,width:0,height:0},l=this;null===(e=this.children)||void 0===e||e.forEach((function(e){if(e.visible()){var s=e.getClientRect({relativeTo:l,skipShadow:t.skipShadow,skipStroke:t.skipStroke});0===s.width&&0===s.height||(void 0===i?(i=s.x,r=s.y,a=s.x+s.width,n=s.y+s.height):(i=Math.min(i,s.x),r=Math.min(r,s.y),a=Math.max(a,s.x+s.width),n=Math.max(n,s.y+s.height)))}}));for(var d=this.find("Shape"),c=!1,g=0;g<d.length;g++){if(d[g]._isVisible(this)){c=!0;break}}return h=c&&void 0!==i?{x:i,y:r,width:a-i,height:n-r}:{x:0,y:0,width:0,height:0},s?h:this._transformedRect(h,o)}}w.addComponentsGetterSetter(J,"clip",["x","y","width","height"]),w.addGetterSetter(J,"clipX",void 0,p()),w.addGetterSetter(J,"clipY",void 0,p()),w.addGetterSetter(J,"clipWidth",void 0,p()),w.addGetterSetter(J,"clipHeight",void 0,p()),w.addGetterSetter(J,"clipFunc");const Z=new Map,$=void 0!==i._global.PointerEvent;function tt(t){return Z.get(t)}function et(t){return{evt:t,pointerId:t.pointerId}}function it(t,e){return Z.get(t)===e}function rt(t,e){at(t);e.getStage()&&(Z.set(t,e),$&&e._fire("gotpointercapture",et(new PointerEvent("gotpointercapture"))))}function at(t,e){const i=Z.get(t);if(!i)return;const r=i.getStage();r&&r.content,Z.delete(t),$&&i._fire("lostpointercapture",et(new PointerEvent("lostpointercapture")))}var nt="mouseleave",st="mouseover",ot="mouseenter",ht="mousemove",lt="mousedown",dt="mouseup",ct="pointermove",gt="pointerdown",ut="pointerup",ft="pointercancel",pt="pointerout",vt="pointerleave",mt="pointerover",_t="pointerenter",yt="contextmenu",xt="touchstart",bt="touchend",St="touchmove",wt="touchcancel",Ct="wheel",kt=[[ot,"_pointerenter"],[lt,"_pointerdown"],[ht,"_pointermove"],[dt,"_pointerup"],[nt,"_pointerleave"],[xt,"_pointerdown"],[St,"_pointermove"],[bt,"_pointerup"],[wt,"_pointercancel"],[st,"_pointerover"],[Ct,"_wheel"],[yt,"_contextmenu"],[gt,"_pointerdown"],[ct,"_pointermove"],[ut,"_pointerup"],[ft,"_pointercancel"],["lostpointercapture","_lostpointercapture"]];const Pt={mouse:{[pt]:"mouseout",[vt]:nt,[mt]:st,[_t]:ot,[ct]:ht,[gt]:lt,[ut]:dt,[ft]:"mousecancel",pointerclick:"click",pointerdblclick:"dblclick"},touch:{[pt]:"touchout",[vt]:"touchleave",[mt]:"touchover",[_t]:"touchenter",[ct]:St,[gt]:xt,[ut]:bt,[ft]:wt,pointerclick:"tap",pointerdblclick:"dbltap"},pointer:{[pt]:pt,[vt]:vt,[mt]:mt,[_t]:_t,[ct]:ct,[gt]:gt,[ut]:ut,[ft]:ft,pointerclick:"pointerclick",pointerdblclick:"pointerdblclick"}},Tt=t=>t.indexOf("pointer")>=0?"pointer":t.indexOf("touch")>=0?"touch":"mouse",At=t=>{const e=Tt(t);return"pointer"===e?i.pointerEventsEnabled&&Pt.pointer:"touch"===e?Pt.touch:"mouse"===e?Pt.mouse:void 0};function Mt(t={}){return(t.clipFunc||t.clipWidth||t.clipHeight)&&g.warn("Stage does not support clipping. Please use clip for Layers or Groups."),t}const Gt=[];class Rt extends J{constructor(t){super(Mt(t)),this._pointerPositions=[],this._changedPointerPositions=[],this._buildDOM(),this._bindContentEvents(),Gt.push(this),this.on("widthChange.konva heightChange.konva",this._resizeDOM),this.on("visibleChange.konva",this._checkVisibility),this.on("clipWidthChange.konva clipHeightChange.konva clipFuncChange.konva",(()=>{Mt(this.attrs)})),this._checkVisibility()}_validateAdd(t){const e="Layer"===t.getType(),i="FastLayer"===t.getType();e||i||g.throw("You may only add layers to the stage.")}_checkVisibility(){if(!this.content)return;const t=this.visible()?"":"none";this.content.style.display=t}setContainer(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=document.getElementsByClassName(e)[0]}else{var i;i="#"!==t.charAt(0)?t:t.slice(1),t=document.getElementById(i)}if(!t)throw"Can not find container in document with id "+i}return this._setAttr("container",t),this.content&&(this.content.parentElement&&this.content.parentElement.removeChild(this.content),t.appendChild(this.content)),this}shouldDrawHit(){return!0}clear(){var t,e=this.children,i=e.length;for(t=0;t<i;t++)e[t].clear();return this}clone(t){return t||(t={}),t.container="undefined"!=typeof document&&document.createElement("div"),J.prototype.clone.call(this,t)}destroy(){super.destroy();var t=this.content;t&&g._isInDocument(t)&&this.container().removeChild(t);var e=Gt.indexOf(this);return e>-1&&Gt.splice(e,1),this}getPointerPosition(){const t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(g.warn("Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);"),null)}_getPointerById(t){return this._pointerPositions.find((e=>e.id===t))}getPointersPositions(){return this._pointerPositions}getStage(){return this}getContent(){return this.content}_toKonvaCanvas(t){(t=t||{}).x=t.x||0,t.y=t.y||0,t.width=t.width||this.width(),t.height=t.height||this.height();var e=new R({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,r=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),r.forEach((function(e){if(e.isVisible()){var r=e._toKonvaCanvas(t);i.drawImage(r._canvas,t.x,t.y,r.getWidth()/r.getPixelRatio(),r.getHeight()/r.getPixelRatio())}})),e}getIntersection(t){if(!t)return null;var e,i=this.children;for(e=i.length-1;e>=0;e--){const r=i[e].getIntersection(t);if(r)return r}return null}_resizeDOM(){var t=this.width(),e=this.height();this.content&&(this.content.style.width=t+"px",this.content.style.height=e+"px"),this.bufferCanvas.setSize(t,e),this.bufferHitCanvas.setSize(t,e),this.children.forEach((i=>{i.setSize({width:t,height:e}),i.draw()}))}add(t,...e){if(arguments.length>1){for(var r=0;r<arguments.length;r++)this.add(arguments[r]);return this}super.add(t);var a=this.children.length;return a>5&&g.warn("The stage has "+a+" layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."),t.setSize({width:this.width(),height:this.height()}),t.draw(),i.isBrowser&&this.content.appendChild(t.canvas._canvas),this}getParent(){return null}getLayer(){return null}hasPointerCapture(t){return it(t,this)}setPointerCapture(t){rt(t,this)}releaseCapture(t){at(t)}getLayers(){return this.children}_bindContentEvents(){i.isBrowser&&kt.forEach((([t,e])=>{this.content.addEventListener(t,(t=>{this[e](t)}))}))}_pointerenter(t){this.setPointersPositions(t);const e=At(t.type);this._fire(e.pointerenter,{evt:t,target:this,currentTarget:this})}_pointerover(t){this.setPointersPositions(t);const e=At(t.type);this._fire(e.pointerover,{evt:t,target:this,currentTarget:this})}_getTargetShape(t){let e=this[t+"targetShape"];return e&&!e.getStage()&&(e=null),e}_pointerleave(t){const e=At(t.type),r=Tt(t.type);if(e){this.setPointersPositions(t);var a=this._getTargetShape(r),n=!L.isDragging||i.hitOnDragEnabled;a&&n?(a._fireAndBubble(e.pointerout,{evt:t}),a._fireAndBubble(e.pointerleave,{evt:t}),this._fire(e.pointerleave,{evt:t,target:this,currentTarget:this}),this[r+"targetShape"]=null):n&&(this._fire(e.pointerleave,{evt:t,target:this,currentTarget:this}),this._fire(e.pointerout,{evt:t,target:this,currentTarget:this})),this.pointerPos=void 0,this._pointerPositions=[]}}_pointerdown(t){const e=At(t.type),r=Tt(t.type);if(e){this.setPointersPositions(t);var a=!1;this._changedPointerPositions.forEach((n=>{var s=this.getIntersection(n);L.justDragged=!1,i["_"+r+"ListenClick"]=!0;if(!(s&&s.isListening()))return;i.capturePointerEventsEnabled&&s.setPointerCapture(n.id),this[r+"ClickStartShape"]=s,s._fireAndBubble(e.pointerdown,{evt:t,pointerId:n.id}),a=!0;const o=t.type.indexOf("touch")>=0;s.preventDefault()&&t.cancelable&&o&&t.preventDefault()})),a||this._fire(e.pointerdown,{evt:t,target:this,currentTarget:this,pointerId:this._pointerPositions[0].id})}}_pointermove(t){const e=At(t.type),r=Tt(t.type);if(!e)return;if(L.isDragging&&L.node.preventDefault()&&t.cancelable&&t.preventDefault(),this.setPointersPositions(t),!(!L.isDragging||i.hitOnDragEnabled))return;var a={};let n=!1;var s=this._getTargetShape(r);this._changedPointerPositions.forEach((i=>{const o=tt(i.id)||this.getIntersection(i),h=i.id,l={evt:t,pointerId:h};var d=s!==o;if(d&&s&&(s._fireAndBubble(e.pointerout,Object.assign({},l),o),s._fireAndBubble(e.pointerleave,Object.assign({},l),o)),o){if(a[o._id])return;a[o._id]=!0}o&&o.isListening()?(n=!0,d&&(o._fireAndBubble(e.pointerover,Object.assign({},l),s),o._fireAndBubble(e.pointerenter,Object.assign({},l),s),this[r+"targetShape"]=o),o._fireAndBubble(e.pointermove,Object.assign({},l))):s&&(this._fire(e.pointerover,{evt:t,target:this,currentTarget:this,pointerId:h}),this[r+"targetShape"]=null)})),n||this._fire(e.pointermove,{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id})}_pointerup(t){const e=At(t.type),r=Tt(t.type);if(!e)return;this.setPointersPositions(t);const a=this[r+"ClickStartShape"],n=this[r+"ClickEndShape"];var s={};let o=!1;this._changedPointerPositions.forEach((h=>{const l=tt(h.id)||this.getIntersection(h);if(l){if(l.releaseCapture(h.id),s[l._id])return;s[l._id]=!0}const d=h.id,c={evt:t,pointerId:d};let g=!1;i["_"+r+"InDblClickWindow"]&&i["_"+r+"InDblClickWindowId"]===d?(g=!0,clearTimeout(this[r+"DblTimeout"])):L.justDragged||(i["_"+r+"InDblClickWindow"]=!0,i["_"+r+"InDblClickWindowId"]=d,clearTimeout(this[r+"DblTimeout"])),this[r+"DblTimeout"]=setTimeout((function(){i["_"+r+"InDblClickWindow"]=!1}),i.dblClickWindow),l&&l.isListening()?(o=!0,this[r+"ClickEndShape"]=l,l._fireAndBubble(e.pointerup,Object.assign({},c)),i["_"+r+"ListenClick"]&&a&&a===l&&(l._fireAndBubble(e.pointerclick,Object.assign({},c)),g&&n&&n===l&&l._fireAndBubble(e.pointerdblclick,Object.assign({},c)))):(this[r+"ClickEndShape"]=null,i["_"+r+"ListenClick"]&&this._fire(e.pointerclick,{evt:t,target:this,currentTarget:this,pointerId:d}),g&&this._fire(e.pointerdblclick,{evt:t,target:this,currentTarget:this,pointerId:d}))})),o||this._fire(e.pointerup,{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),i["_"+r+"ListenClick"]=!1,t.cancelable&&t.preventDefault()}_contextmenu(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble(yt,{evt:t}):this._fire(yt,{evt:t,target:this,currentTarget:this})}_wheel(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble(Ct,{evt:t}):this._fire(Ct,{evt:t,target:this,currentTarget:this})}_pointercancel(t){this.setPointersPositions(t);const e=tt(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble(ut,et(t)),at(t.pointerId)}_lostpointercapture(t){at(t.pointerId)}setPointersPositions(t){var e=this._getContentPosition(),i=null,r=null;void 0!==(t=t||window.event).touches?(this._pointerPositions=[],this._changedPointerPositions=[],Array.prototype.forEach.call(t.touches,(t=>{this._pointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})})),Array.prototype.forEach.call(t.changedTouches||t.touches,(t=>{this._changedPointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})}))):(i=(t.clientX-e.left)/e.scaleX,r=(t.clientY-e.top)/e.scaleY,this.pointerPos={x:i,y:r},this._pointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}],this._changedPointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}])}_setPointerPosition(t){g.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'),this.setPointersPositions(t)}_getContentPosition(){if(!this.content||!this.content.getBoundingClientRect)return{top:0,left:0,scaleX:1,scaleY:1};var t=this.content.getBoundingClientRect();return{top:t.top,left:t.left,scaleX:t.width/this.content.clientWidth||1,scaleY:t.height/this.content.clientHeight||1}}_buildDOM(){if(this.bufferCanvas=new R({width:this.width(),height:this.height()}),this.bufferHitCanvas=new E({pixelRatio:1,width:this.width(),height:this.height()}),i.isBrowser){var t=this.container();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.userSelect="none",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}}cache(){return g.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes."),this}clearCache(){return this}batchDraw(){return this.getChildren().forEach((function(t){t.batchDraw()})),this}}Rt.prototype.nodeType="Stage",r(Rt),w.addGetterSetter(Rt,"container");var Et="hasShadow",Lt="shadowRGBA",Dt="patternImage",Ot="linearGradient",It="radialGradient";let Ft;function Nt(){return Ft||(Ft=g.createCanvasElement().getContext("2d"),Ft)}const Bt={};class zt extends K{constructor(t){let e;for(super(t);e=g.getRandomColor(),!e||e in Bt;);this.colorKey=e,Bt[e]=this}getContext(){return g.warn("shape.getContext() method is deprecated. Please do not use it."),this.getLayer().getContext()}getCanvas(){return g.warn("shape.getCanvas() method is deprecated. Please do not use it."),this.getLayer().getCanvas()}getSceneFunc(){return this.attrs.sceneFunc||this._sceneFunc}getHitFunc(){return this.attrs.hitFunc||this._hitFunc}hasShadow(){return this._getCache(Et,this._hasShadow)}_hasShadow(){return this.shadowEnabled()&&0!==this.shadowOpacity()&&!!(this.shadowColor()||this.shadowBlur()||this.shadowOffsetX()||this.shadowOffsetY())}_getFillPattern(){return this._getCache(Dt,this.__getFillPattern)}__getFillPattern(){if(this.fillPatternImage()){const t=Nt().createPattern(this.fillPatternImage(),this.fillPatternRepeat()||"repeat");if(t&&t.setTransform){const e=new a;e.translate(this.fillPatternX(),this.fillPatternY()),e.rotate(i.getAngle(this.fillPatternRotation())),e.scale(this.fillPatternScaleX(),this.fillPatternScaleY()),e.translate(-1*this.fillPatternOffsetX(),-1*this.fillPatternOffsetY());const r=e.getMatrix();t.setTransform({a:r[0],b:r[1],c:r[2],d:r[3],e:r[4],f:r[5]})}return t}}_getLinearGradient(){return this._getCache(Ot,this.__getLinearGradient)}__getLinearGradient(){var t=this.fillLinearGradientColorStops();if(t){for(var e=Nt(),i=this.fillLinearGradientStartPoint(),r=this.fillLinearGradientEndPoint(),a=e.createLinearGradient(i.x,i.y,r.x,r.y),n=0;n<t.length;n+=2)a.addColorStop(t[n],t[n+1]);return a}}_getRadialGradient(){return this._getCache(It,this.__getRadialGradient)}__getRadialGradient(){var t=this.fillRadialGradientColorStops();if(t){for(var e=Nt(),i=this.fillRadialGradientStartPoint(),r=this.fillRadialGradientEndPoint(),a=e.createRadialGradient(i.x,i.y,this.fillRadialGradientStartRadius(),r.x,r.y,this.fillRadialGradientEndRadius()),n=0;n<t.length;n+=2)a.addColorStop(t[n],t[n+1]);return a}}getShadowRGBA(){return this._getCache(Lt,this._getShadowRGBA)}_getShadowRGBA(){if(this.hasShadow()){var t=g.colorToRGBA(this.shadowColor());return"rgba("+t.r+","+t.g+","+t.b+","+t.a*(this.shadowOpacity()||1)+")"}}hasFill(){return this._calculate("hasFill",["fillEnabled","fill","fillPatternImage","fillLinearGradientColorStops","fillRadialGradientColorStops"],(()=>this.fillEnabled()&&!!(this.fill()||this.fillPatternImage()||this.fillLinearGradientColorStops()||this.fillRadialGradientColorStops())))}hasStroke(){return this._calculate("hasStroke",["strokeEnabled","strokeWidth","stroke","strokeLinearGradientColorStops"],(()=>this.strokeEnabled()&&this.strokeWidth()&&!(!this.stroke()&&!this.strokeLinearGradientColorStops())))}hasHitStroke(){const t=this.hitStrokeWidth();return"auto"===t?this.hasStroke():this.strokeEnabled()&&!!t}intersects(t){var e=this.getStage().bufferHitCanvas;return e.getContext().clear(),this.drawHit(e,null,!0),e.context.getImageData(Math.round(t.x),Math.round(t.y),1,1).data[3]>0}destroy(){return K.prototype.destroy.call(this),delete Bt[this.colorKey],delete this.colorKey,this}_useBufferCanvas(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;const i=t||this.hasFill(),r=this.hasStroke(),a=1!==this.getAbsoluteOpacity();if(i&&r&&a)return!0;const n=this.hasShadow(),s=this.shadowForStrokeEnabled();return!!(i&&r&&n&&s)}setStrokeHitEnabled(t){g.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)}getStrokeHitEnabled(){return 0!==this.hitStrokeWidth()}getSelfRect(){var t=this.size();return{x:this._centroid?-t.width/2:0,y:this._centroid?-t.height/2:0,width:t.width,height:t.height}}getClientRect(t={}){const e=t.skipTransform,i=t.relativeTo,r=this.getSelfRect(),a=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,n=r.width+a,s=r.height+a,o=!t.skipShadow&&this.hasShadow(),h=o?this.shadowOffsetX():0,l=o?this.shadowOffsetY():0,d=n+Math.abs(h),c=s+Math.abs(l),g=o&&this.shadowBlur()||0,u=d+2*g,f=c+2*g;let p=0;Math.round(a/2)!==a/2&&(p=1);const v={width:u+p,height:f+p,x:-Math.round(a/2+g)+Math.min(h,0)+r.x,y:-Math.round(a/2+g)+Math.min(l,0)+r.y};return e?v:this._transformedRect(v,i)}drawScene(t,e){var i,r,a=this.getLayer(),n=t||a.getCanvas(),s=n.getContext(),o=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),d=n.isCache,c=e===this;if(!this.isVisible()&&!c)return this;if(o){s.save();var g=this.getAbsoluteTransform(e).getMatrix();return s.transform(g[0],g[1],g[2],g[3],g[4],g[5]),this._drawCachedSceneCanvas(s),s.restore(),this}if(!h)return this;if(s.save(),this._useBufferCanvas()&&!d){(r=(i=this.getStage().bufferCanvas).getContext()).clear(),r.save(),r._applyLineJoin(this);var u=this.getAbsoluteTransform(e).getMatrix();r.transform(u[0],u[1],u[2],u[3],u[4],u[5]),h.call(this,r,this),r.restore();var f=i.pixelRatio;l&&s._applyShadow(this),s._applyOpacity(this),s._applyGlobalCompositeOperation(this),s.drawImage(i._canvas,0,0,i.width/f,i.height/f)}else{if(s._applyLineJoin(this),!c){u=this.getAbsoluteTransform(e).getMatrix();s.transform(u[0],u[1],u[2],u[3],u[4],u[5]),s._applyOpacity(this),s._applyGlobalCompositeOperation(this)}l&&s._applyShadow(this),h.call(this,s,this)}return s.restore(),this}drawHit(t,e,i=!1){if(!this.shouldDrawHit(e,i))return this;var r=this.getLayer(),a=t||r.hitCanvas,n=a&&a.getContext(),s=this.hitFunc()||this.sceneFunc(),o=this._getCanvasCache(),h=o&&o.hit;if(this.colorKey||g.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()"),h){n.save();var l=this.getAbsoluteTransform(e).getMatrix();return n.transform(l[0],l[1],l[2],l[3],l[4],l[5]),this._drawCachedHitCanvas(n),n.restore(),this}if(!s)return this;n.save(),n._applyLineJoin(this);if(!(this===e)){var d=this.getAbsoluteTransform(e).getMatrix();n.transform(d[0],d[1],d[2],d[3],d[4],d[5])}return s.call(this,n,this),n.restore(),this}drawHitFromCache(t=0){var e,i,r,a,n,s=this._getCanvasCache(),o=this._getCachedSceneCanvas(),h=s.hit,l=h.getContext(),d=h.getWidth(),c=h.getHeight();l.clear(),l.drawImage(o._canvas,0,0,d,c);try{for(r=(i=(e=l.getImageData(0,0,d,c)).data).length,a=g._hexToRgb(this.colorKey),n=0;n<r;n+=4)i[n+3]>t?(i[n]=a.r,i[n+1]=a.g,i[n+2]=a.b,i[n+3]=255):i[n+3]=0;l.putImageData(e,0,0)}catch(t){g.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this}hasPointerCapture(t){return it(t,this)}setPointerCapture(t){rt(t,this)}releaseCapture(t){at(t)}}zt.prototype._fillFunc=function(t){t.fill()},zt.prototype._strokeFunc=function(t){t.stroke()},zt.prototype._fillFuncHit=function(t){t.fill()},zt.prototype._strokeFuncHit=function(t){t.stroke()},zt.prototype._centroid=!1,zt.prototype.nodeType="Shape",r(zt),zt.prototype.eventListeners={},zt.prototype.on.call(zt.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache(Et)})),zt.prototype.on.call(zt.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache(Lt)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetXChange.konva fillPatternOffsetYChange.konva fillPatternXChange.konva fillPatternYChange.konva fillPatternRotationChange.konva",(function(){this._clearCache(Dt)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache(Ot)})),zt.prototype.on.call(zt.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache(It)})),w.addGetterSetter(zt,"stroke",void 0,y()),w.addGetterSetter(zt,"strokeWidth",2,p()),w.addGetterSetter(zt,"fillAfterStrokeEnabled",!1),w.addGetterSetter(zt,"hitStrokeWidth","auto",m()),w.addGetterSetter(zt,"strokeHitEnabled",!0,x()),w.addGetterSetter(zt,"perfectDrawEnabled",!0,x()),w.addGetterSetter(zt,"shadowForStrokeEnabled",!0,x()),w.addGetterSetter(zt,"lineJoin"),w.addGetterSetter(zt,"lineCap"),w.addGetterSetter(zt,"sceneFunc"),w.addGetterSetter(zt,"hitFunc"),w.addGetterSetter(zt,"dash"),w.addGetterSetter(zt,"dashOffset",0,p()),w.addGetterSetter(zt,"shadowColor",void 0,_()),w.addGetterSetter(zt,"shadowBlur",0,p()),w.addGetterSetter(zt,"shadowOpacity",1,p()),w.addComponentsGetterSetter(zt,"shadowOffset",["x","y"]),w.addGetterSetter(zt,"shadowOffsetX",0,p()),w.addGetterSetter(zt,"shadowOffsetY",0,p()),w.addGetterSetter(zt,"fillPatternImage"),w.addGetterSetter(zt,"fill",void 0,y()),w.addGetterSetter(zt,"fillPatternX",0,p()),w.addGetterSetter(zt,"fillPatternY",0,p()),w.addGetterSetter(zt,"fillLinearGradientColorStops"),w.addGetterSetter(zt,"strokeLinearGradientColorStops"),w.addGetterSetter(zt,"fillRadialGradientStartRadius",0),w.addGetterSetter(zt,"fillRadialGradientEndRadius",0),w.addGetterSetter(zt,"fillRadialGradientColorStops"),w.addGetterSetter(zt,"fillPatternRepeat","repeat"),w.addGetterSetter(zt,"fillEnabled",!0),w.addGetterSetter(zt,"strokeEnabled",!0),w.addGetterSetter(zt,"shadowEnabled",!0),w.addGetterSetter(zt,"dashEnabled",!0),w.addGetterSetter(zt,"strokeScaleEnabled",!0),w.addGetterSetter(zt,"fillPriority","color"),w.addComponentsGetterSetter(zt,"fillPatternOffset",["x","y"]),w.addGetterSetter(zt,"fillPatternOffsetX",0,p()),w.addGetterSetter(zt,"fillPatternOffsetY",0,p()),w.addComponentsGetterSetter(zt,"fillPatternScale",["x","y"]),w.addGetterSetter(zt,"fillPatternScaleX",1,p()),w.addGetterSetter(zt,"fillPatternScaleY",1,p()),w.addComponentsGetterSetter(zt,"fillLinearGradientStartPoint",["x","y"]),w.addComponentsGetterSetter(zt,"strokeLinearGradientStartPoint",["x","y"]),w.addGetterSetter(zt,"fillLinearGradientStartPointX",0),w.addGetterSetter(zt,"strokeLinearGradientStartPointX",0),w.addGetterSetter(zt,"fillLinearGradientStartPointY",0),w.addGetterSetter(zt,"strokeLinearGradientStartPointY",0),w.addComponentsGetterSetter(zt,"fillLinearGradientEndPoint",["x","y"]),w.addComponentsGetterSetter(zt,"strokeLinearGradientEndPoint",["x","y"]),w.addGetterSetter(zt,"fillLinearGradientEndPointX",0),w.addGetterSetter(zt,"strokeLinearGradientEndPointX",0),w.addGetterSetter(zt,"fillLinearGradientEndPointY",0),w.addGetterSetter(zt,"strokeLinearGradientEndPointY",0),w.addComponentsGetterSetter(zt,"fillRadialGradientStartPoint",["x","y"]),w.addGetterSetter(zt,"fillRadialGradientStartPointX",0),w.addGetterSetter(zt,"fillRadialGradientStartPointY",0),w.addComponentsGetterSetter(zt,"fillRadialGradientEndPoint",["x","y"]),w.addGetterSetter(zt,"fillRadialGradientEndPointX",0),w.addGetterSetter(zt,"fillRadialGradientEndPointY",0),w.addGetterSetter(zt,"fillPatternRotation",0),w.backCompat(zt,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"});var Wt=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],Ht=Wt.length;class Yt extends J{constructor(t){super(t),this.canvas=new R,this.hitCanvas=new E({pixelRatio:1}),this._waitingForDraw=!1,this.on("visibleChange.konva",this._checkVisibility),this._checkVisibility(),this.on("imageSmoothingEnabledChange.konva",this._setSmoothEnabled),this._setSmoothEnabled()}createPNGStream(){return this.canvas._canvas.createPNGStream()}getCanvas(){return this.canvas}getNativeCanvasElement(){return this.canvas._canvas}getHitCanvas(){return this.hitCanvas}getContext(){return this.getCanvas().getContext()}clear(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this}setZIndex(t){super.setZIndex(t);var e=this.getStage();return e&&e.content&&(e.content.removeChild(this.getNativeCanvasElement()),t<e.children.length-1?e.content.insertBefore(this.getNativeCanvasElement(),e.children[t+1].getCanvas()._canvas):e.content.appendChild(this.getNativeCanvasElement())),this}moveToTop(){K.prototype.moveToTop.call(this);var t=this.getStage();return t&&t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.appendChild(this.getNativeCanvasElement())),!0}moveUp(){if(!K.prototype.moveUp.call(this))return!1;var t=this.getStage();return!(!t||!t.content)&&(t.content.removeChild(this.getNativeCanvasElement()),this.index<t.children.length-1?t.content.insertBefore(this.getNativeCanvasElement(),t.children[this.index+1].getCanvas()._canvas):t.content.appendChild(this.getNativeCanvasElement()),!0)}moveDown(){if(K.prototype.moveDown.call(this)){var t=this.getStage();if(t){var e=t.children;t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.insertBefore(this.getNativeCanvasElement(),e[this.index+1].getCanvas()._canvas))}return!0}return!1}moveToBottom(){if(K.prototype.moveToBottom.call(this)){var t=this.getStage();if(t){var e=t.children;t.content&&(t.content.removeChild(this.getNativeCanvasElement()),t.content.insertBefore(this.getNativeCanvasElement(),e[1].getCanvas()._canvas))}return!0}return!1}getLayer(){return this}remove(){var t=this.getNativeCanvasElement();return K.prototype.remove.call(this),t&&t.parentNode&&g._isInDocument(t)&&t.parentNode.removeChild(t),this}getStage(){return this.parent}setSize({width:t,height:e}){return this.canvas.setSize(t,e),this.hitCanvas.setSize(t,e),this._setSmoothEnabled(),this}_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&g.throw("You may only add groups and shapes to a layer.")}_toKonvaCanvas(t){return(t=t||{}).width=t.width||this.getWidth(),t.height=t.height||this.getHeight(),t.x=void 0!==t.x?t.x:this.x(),t.y=void 0!==t.y?t.y:this.y(),K.prototype._toKonvaCanvas.call(this,t)}_checkVisibility(){const t=this.visible();this.canvas._canvas.style.display=t?"block":"none"}_setSmoothEnabled(){this.getContext()._context.imageSmoothingEnabled=this.imageSmoothingEnabled()}getWidth(){if(this.parent)return this.parent.width()}setWidth(){g.warn('Can not change width of layer. Use "stage.width(value)" function instead.')}getHeight(){if(this.parent)return this.parent.height()}setHeight(){g.warn('Can not change height of layer. Use "stage.height(value)" function instead.')}batchDraw(){return this._waitingForDraw||(this._waitingForDraw=!0,g.requestAnimFrame((()=>{this.draw(),this._waitingForDraw=!1}))),this}getIntersection(t){if(!this.isListening()||!this.isVisible())return null;for(var e=1,i=!1;;){for(let r=0;r<Ht;r++){const a=Wt[r],n=this._getIntersection({x:t.x+a.x*e,y:t.y+a.y*e}),s=n.shape;if(s)return s;if(i=!!n.antialiased,!n.antialiased)break}if(!i)return null;e+=1}}_getIntersection(t){const e=this.hitCanvas.pixelRatio,i=this.hitCanvas.context.getImageData(Math.round(t.x*e),Math.round(t.y*e),1,1).data,r=i[3];if(255===r){const t=g._rgbToHex(i[0],i[1],i[2]),e=Bt["#"+t];return e?{shape:e}:{antialiased:!0}}return r>0?{antialiased:!0}:{}}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&r.getContext().clear(),J.prototype.drawScene.call(this,r,e),this._fire("draw",{node:this}),this}drawHit(t,e){var i=this.getLayer(),r=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),J.prototype.drawHit.call(this,r,e),this}enableHitGraph(){return this.hitGraphEnabled(!0),this}disableHitGraph(){return this.hitGraphEnabled(!1),this}setHitGraphEnabled(t){g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)}getHitGraphEnabled(t){return g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()}toggleHitCanvas(){if(this.parent&&this.parent.content){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}}}Yt.prototype.nodeType="Layer",r(Yt),w.addGetterSetter(Yt,"imageSmoothingEnabled",!0),w.addGetterSetter(Yt,"clearBeforeDraw",!0),w.addGetterSetter(Yt,"hitGraphEnabled",!0,x());class Xt extends Yt{constructor(t){super(t),this.listening(!1),g.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.')}}Xt.prototype.nodeType="FastLayer",r(Xt);class jt extends J{_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&g.throw("You may only add groups and shapes to groups.")}}jt.prototype.nodeType="Group",r(jt);var Ut=e.performance&&e.performance.now?function(){return e.performance.now()}:function(){return(new Date).getTime()};class qt{constructor(t,e){this.id=qt.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:Ut(),frameRate:0},this.func=t,this.setLayers(e)}setLayers(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this}getLayers(){return this.layers}addLayer(t){var e,i=this.layers,r=i.length;for(e=0;e<r;e++)if(i[e]._id===t._id)return!1;return this.layers.push(t),!0}isRunning(){var t,e=qt.animations,i=e.length;for(t=0;t<i;t++)if(e[t].id===this.id)return!0;return!1}start(){return this.stop(),this.frame.timeDiff=0,this.frame.lastTime=Ut(),qt._addAnimation(this),this}stop(){return qt._removeAnimation(this),this}_updateFrameObject(t){this.frame.timeDiff=t-this.frame.lastTime,this.frame.lastTime=t,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}static _addAnimation(t){this.animations.push(t),this._handleAnimation()}static _removeAnimation(t){var e,i=t.id,r=this.animations,a=r.length;for(e=0;e<a;e++)if(r[e].id===i){this.animations.splice(e,1);break}}static _runFrames(){var t,e,i,r,a,n,s,o,h={},l=this.animations;for(r=0;r<l.length;r++)if(e=(t=l[r]).layers,i=t.func,t._updateFrameObject(Ut()),n=e.length,!i||!1!==i.call(t,t.frame))for(a=0;a<n;a++)void 0!==(s=e[a])._id&&(h[s._id]=s);for(o in h)h.hasOwnProperty(o)&&h[o].batchDraw()}static _animationLoop(){var t=qt;t.animations.length?(t._runFrames(),g.requestAnimFrame(t._animationLoop)):t.animRunning=!1}static _handleAnimation(){this.animRunning||(this.animRunning=!0,g.requestAnimFrame(this._animationLoop))}}qt.animations=[],qt.animIdCounter=0,qt.animRunning=!1;var Vt={node:1,duration:1,easing:1,onFinish:1,yoyo:1},Kt=0,Qt=["fill","stroke","shadowColor"];class Jt{constructor(t,e,i,r,a,n,s){this.prop=t,this.propFunc=e,this.begin=r,this._pos=r,this.duration=n,this._change=0,this.prevPos=0,this.yoyo=s,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=i,this._change=a-this.begin,this.pause()}fire(t){var e=this[t];e&&e()}setTime(t){t>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())}getTime(){return this._time}setPosition(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t}getPosition(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)}play(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")}reverse(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")}seek(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")}reset(){this.pause(),this._time=0,this.update(),this.fire("onReset")}finish(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")}update(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")}onEnterFrame(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)}pause(){this.state=1,this.fire("onPause")}getTimer(){return(new Date).getTime()}}class Zt{constructor(t){var e,r,a=this,n=t.node,s=n._id,o=t.easing||$t.Linear,h=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=Kt++;var l=n.getLayer()||(n instanceof i.Stage?n.getLayers():null);for(r in l||g.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new qt((function(){a.tween.onEnterFrame()}),l),this.tween=new Jt(r,(function(t){a._tweenFunc(t)}),o,0,1,1e3*e,h),this._addListeners(),Zt.attrs[s]||(Zt.attrs[s]={}),Zt.attrs[s][this._id]||(Zt.attrs[s][this._id]={}),Zt.tweens[s]||(Zt.tweens[s]={}),t)void 0===Vt[r]&&this._addAttr(r,t[r]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset,this.onUpdate=t.onUpdate}_addAttr(t,e){var i,r,a,n,s,o,h,l,d=this.node,c=d._id;if((a=Zt.tweens[c][t])&&delete Zt.attrs[c][a][t],i=d.getAttr(t),g._isArray(e))if(r=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=g._prepareArrayForTween(i,e,d.closed())):(o=e,e=g._prepareArrayForTween(e,i,d.closed()))),0===t.indexOf("fill"))for(n=0;n<s;n++)if(n%2==0)r.push(e[n]-i[n]);else{var u=g.colorToRGBA(i[n]);l=g.colorToRGBA(e[n]),i[n]=u,r.push({r:l.r-u.r,g:l.g-u.g,b:l.b-u.b,a:l.a-u.a})}else for(n=0;n<s;n++)r.push(e[n]-i[n]);else-1!==Qt.indexOf(t)?(i=g.colorToRGBA(i),r={r:(l=g.colorToRGBA(e)).r-i.r,g:l.g-i.g,b:l.b-i.b,a:l.a-i.a}):r=e-i;Zt.attrs[c][this._id][t]={start:i,diff:r,end:e,trueEnd:o,trueStart:h},Zt.tweens[c][t]=this._id}_tweenFunc(t){var e,i,r,a,n,s,o,h,l=this.node,d=Zt.attrs[l._id][this._id];for(e in d){if(r=(i=d[e]).start,a=i.diff,h=i.end,g._isArray(r))if(n=[],o=Math.max(r.length,h.length),0===e.indexOf("fill"))for(s=0;s<o;s++)s%2==0?n.push((r[s]||0)+a[s]*t):n.push("rgba("+Math.round(r[s].r+a[s].r*t)+","+Math.round(r[s].g+a[s].g*t)+","+Math.round(r[s].b+a[s].b*t)+","+(r[s].a+a[s].a*t)+")");else for(s=0;s<o;s++)n.push((r[s]||0)+a[s]*t);else n=-1!==Qt.indexOf(e)?"rgba("+Math.round(r.r+a.r*t)+","+Math.round(r.g+a.g*t)+","+Math.round(r.b+a.b*t)+","+(r.a+a.a*t)+")":r+a*t;l.setAttr(e,n)}}_addListeners(){this.tween.onPlay=()=>{this.anim.start()},this.tween.onReverse=()=>{this.anim.start()},this.tween.onPause=()=>{this.anim.stop()},this.tween.onFinish=()=>{var t=this.node,e=Zt.attrs[t._id][this._id];e.points&&e.points.trueEnd&&t.setAttr("points",e.points.trueEnd),this.onFinish&&this.onFinish.call(this)},this.tween.onReset=()=>{var t=this.node,e=Zt.attrs[t._id][this._id];e.points&&e.points.trueStart&&t.points(e.points.trueStart),this.onReset&&this.onReset()},this.tween.onUpdate=()=>{this.onUpdate&&this.onUpdate.call(this)}}play(){return this.tween.play(),this}reverse(){return this.tween.reverse(),this}reset(){return this.tween.reset(),this}seek(t){return this.tween.seek(1e3*t),this}pause(){return this.tween.pause(),this}finish(){return this.tween.finish(),this}destroy(){var t,e=this.node._id,i=this._id,r=Zt.tweens[e];for(t in this.pause(),r)delete Zt.tweens[e][t];delete Zt.attrs[e][i]}}Zt.attrs={},Zt.tweens={},K.prototype.to=function(t){var e=t.onFinish;t.node=this,t.onFinish=function(){this.destroy(),e&&e()},new Zt(t).play()};const $t={BackEaseIn(t,e,i,r){var a=1.70158;return i*(t/=r)*t*((a+1)*t-a)+e},BackEaseOut(t,e,i,r){var a=1.70158;return i*((t=t/r-1)*t*((a+1)*t+a)+1)+e},BackEaseInOut(t,e,i,r){var a=1.70158;return(t/=r/2)<1?i/2*(t*t*((1+(a*=1.525))*t-a))+e:i/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+e},ElasticEaseIn(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),-a*Math.pow(2,10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)+e)},ElasticEaseOut(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),a*Math.pow(2,-10*t)*Math.sin((t*r-s)*(2*Math.PI)/n)+i+e)},ElasticEaseInOut(t,e,i,r,a,n){var s=0;return 0===t?e:2==(t/=r/2)?e+i:(n||(n=r*(.3*1.5)),!a||a<Math.abs(i)?(a=i,s=n/4):s=n/(2*Math.PI)*Math.asin(i/a),t<1?a*Math.pow(2,10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)*-.5+e:a*Math.pow(2,-10*(t-=1))*Math.sin((t*r-s)*(2*Math.PI)/n)*.5+i+e)},BounceEaseOut:(t,e,i,r)=>(t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e,BounceEaseIn:(t,e,i,r)=>i-$t.BounceEaseOut(r-t,0,i,r)+e,BounceEaseInOut:(t,e,i,r)=>t<r/2?.5*$t.BounceEaseIn(2*t,0,i,r)+e:.5*$t.BounceEaseOut(2*t-r,0,i,r)+.5*i+e,EaseIn:(t,e,i,r)=>i*(t/=r)*t+e,EaseOut:(t,e,i,r)=>-i*(t/=r)*(t-2)+e,EaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e,StrongEaseIn:(t,e,i,r)=>i*(t/=r)*t*t*t*t+e,StrongEaseOut:(t,e,i,r)=>i*((t=t/r-1)*t*t*t*t+1)+e,StrongEaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e,Linear:(t,e,i,r)=>i*t/r+e},te=g._assign(i,{Util:g,Transform:a,Node:K,Container:J,Stage:Rt,stages:Gt,Layer:Yt,FastLayer:Xt,Group:jt,DD:L,Shape:zt,shapes:Bt,Animation:qt,Tween:Zt,Easings:$t,Context:P,Canvas:G});class ee extends zt{_sceneFunc(t){var e=i.getAngle(this.angle()),r=this.clockwise();t.beginPath(),t.arc(0,0,this.outerRadius(),0,e,r),t.arc(0,0,this.innerRadius(),e,0,!r),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}function ie(t,e,i,r,a,n,s){var o=Math.sqrt(Math.pow(i-t,2)+Math.pow(r-e,2)),h=Math.sqrt(Math.pow(a-i,2)+Math.pow(n-r,2)),l=s*o/(o+h),d=s*h/(o+h);return[i-l*(a-t),r-l*(n-e),i+d*(a-t),r+d*(n-e)]}function re(t,e){var i,r,a=t.length,n=[];for(i=2;i<a-2;i+=2)r=ie(t[i-2],t[i-1],t[i],t[i+1],t[i+2],t[i+3],e),isNaN(r[0])||(n.push(r[0]),n.push(r[1]),n.push(t[i]),n.push(t[i+1]),n.push(r[2]),n.push(r[3]));return n}ee.prototype._centroid=!0,ee.prototype.className="Arc",ee.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(ee),w.addGetterSetter(ee,"innerRadius",0,p()),w.addGetterSetter(ee,"outerRadius",0,p()),w.addGetterSetter(ee,"angle",0,p()),w.addGetterSetter(ee,"clockwise",!1,x());class ae extends zt{constructor(t){super(t),this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",(function(){this._clearCache("tensionPoints")}))}_sceneFunc(t){var e,i,r,a=this.points(),n=a.length,s=this.tension(),o=this.closed(),h=this.bezier();if(n){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==s&&n>4){for(i=(e=this.getTensionPoints()).length,r=o?0:4,o||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);r<i-2;)t.bezierCurveTo(e[r++],e[r++],e[r++],e[r++],e[r++],e[r++]);o||t.quadraticCurveTo(e[i-2],e[i-1],a[n-2],a[n-1])}else if(h)for(r=2;r<n;)t.bezierCurveTo(a[r++],a[r++],a[r++],a[r++],a[r++],a[r++]);else for(r=2;r<n;r+=2)t.lineTo(a[r],a[r+1]);o?(t.closePath(),t.fillStrokeShape(this)):t.strokeShape(this)}}getTensionPoints(){return this._getCache("tensionPoints",this._getTensionPoints)}_getTensionPoints(){return this.closed()?this._getTensionPointsClosed():re(this.points(),this.tension())}_getTensionPointsClosed(){var t=this.points(),e=t.length,i=this.tension(),r=ie(t[e-2],t[e-1],t[0],t[1],t[2],t[3],i),a=ie(t[e-4],t[e-3],t[e-2],t[e-1],t[0],t[1],i),n=re(t,i);return[r[2],r[3]].concat(n).concat([a[0],a[1],t[e-2],t[e-1],a[2],a[3],r[0],r[1],t[0],t[1]])}getWidth(){return this.getSelfRect().width}getHeight(){return this.getSelfRect().height}getSelfRect(){var t=this.points();if(t.length<4)return{x:t[0]||0,y:t[1]||0,width:0,height:0};for(var e,i,r=(t=0!==this.tension()?[t[0],t[1],...this._getTensionPoints(),t[t.length-2],t[t.length-1]]:this.points())[0],a=t[0],n=t[1],s=t[1],o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],r=Math.min(r,e),a=Math.max(a,e),n=Math.min(n,i),s=Math.max(s,i);return{x:r,y:n,width:a-r,height:s-n}}}ae.prototype.className="Line",ae.prototype._attrsAffectingSize=["points","bezier","tension"],r(ae),w.addGetterSetter(ae,"closed",!1),w.addGetterSetter(ae,"bezier",!1),w.addGetterSetter(ae,"tension",0,p()),w.addGetterSetter(ae,"points",[],function(){if(i.isUnminified)return function(t,e){return g._isArray(t)?t.forEach((function(t){g._isNumber(t)||g.warn('"'+e+'" attribute has non numeric element '+t+". Make sure that all elements are numbers.")})):g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a array of numbers.'),t}}());class ne extends zt{constructor(t){super(t),this.dataArray=[],this.pathLength=0,this.dataArray=ne.parsePathData(this.data()),this.pathLength=0;for(var e=0;e<this.dataArray.length;++e)this.pathLength+=this.dataArray[e].pathLength;this.on("dataChange.konva",(function(){this.dataArray=ne.parsePathData(this.data()),this.pathLength=0;for(var t=0;t<this.dataArray.length;++t)this.pathLength+=this.dataArray[t].pathLength}))}_sceneFunc(t){var e=this.dataArray;t.beginPath();for(var i=!1,r=0;r<e.length;r++){var a=e[r].command,n=e[r].points;switch(a){case"L":t.lineTo(n[0],n[1]);break;case"M":t.moveTo(n[0],n[1]);break;case"C":t.bezierCurveTo(n[0],n[1],n[2],n[3],n[4],n[5]);break;case"Q":t.quadraticCurveTo(n[0],n[1],n[2],n[3]);break;case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6],u=n[7],f=h>l?h:l,p=h>l?1:h/l,v=h>l?l/h:1;t.translate(s,o),t.rotate(g),t.scale(p,v),t.arc(0,0,f,d,d+c,1-u),t.scale(1/p,1/v),t.rotate(-g),t.translate(-s,-o);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)}getSelfRect(){var t=[];this.dataArray.forEach((function(e){if("A"===e.command){var i=e.points[4],r=e.points[5],a=e.points[4]+r,n=Math.PI/180;if(Math.abs(i-a)<n&&(n=Math.abs(i-a)),r<0)for(let r=i-n;r>a;r-=n){const i=ne.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}else for(let r=i+n;r<a;r+=n){const i=ne.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}}else if("C"===e.command)for(let i=0;i<=1;i+=.01){const r=ne.getPointOnCubicBezier(i,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3],e.points[4],e.points[5]);t.push(r.x,r.y)}else t=t.concat(e.points)}));for(var e,i,r=t[0],a=t[0],n=t[1],s=t[1],o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],isNaN(e)||(r=Math.min(r,e),a=Math.max(a,e)),isNaN(i)||(n=Math.min(n,i),s=Math.max(s,i));return{x:Math.round(r),y:Math.round(n),width:Math.round(a-r),height:Math.round(s-n)}}getLength(){return this.pathLength}getPointAtLength(t){var e,i=0,r=this.dataArray.length;if(!r)return null;for(;i<r&&t>this.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],n=a.points;switch(a.command){case"L":return ne.getPointOnLine(t,a.start.x,a.start.y,n[0],n[1]);case"C":return ne.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3],n[4],n[5]);case"Q":return ne.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3]);case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6];return d+=c*t/a.pathLength,ne.getPointOnEllipticalArc(s,o,h,l,d,g)}return null}static getLineLength(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))}static getPointOnLine(t,e,i,r,a,n,s){void 0===n&&(n=e),void 0===s&&(s=i);var o=(a-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+o*o));r<e&&(h*=-1);var l,d=o*h;if(r===e)l={x:n,y:s+d};else if((s-i)/(n-e+1e-8)===o)l={x:n+h,y:s+d};else{var c,g,u=this.getLineLength(e,i,r,a),f=(n-e)*(r-e)+(s-i)*(a-i);c=e+(f/=u*u)*(r-e),g=i+f*(a-i);var p=this.getLineLength(n,s,c,g),v=Math.sqrt(t*t-p*p);h=Math.sqrt(v*v/(1+o*o)),r<e&&(h*=-1),l={x:c+h,y:g+(d=o*h)}}return l}static getPointOnCubicBezier(t,e,i,r,a,n,s,o,h){function l(t){return t*t*t}function d(t){return 3*t*t*(1-t)}function c(t){return 3*t*(1-t)*(1-t)}function g(t){return(1-t)*(1-t)*(1-t)}return{x:o*l(t)+n*d(t)+r*c(t)+e*g(t),y:h*l(t)+s*d(t)+a*c(t)+i*g(t)}}static getPointOnQuadraticBezier(t,e,i,r,a,n,s){function o(t){return t*t}function h(t){return 2*t*(1-t)}function l(t){return(1-t)*(1-t)}return{x:n*o(t)+r*h(t)+e*l(t),y:s*o(t)+a*h(t)+i*l(t)}}static getPointOnEllipticalArc(t,e,i,r,a,n){var s=Math.cos(n),o=Math.sin(n),h=i*Math.cos(a),l=r*Math.sin(a);return{x:t+(h*s-l*o),y:e+(h*o+l*s)}}static parsePathData(t){if(!t)return[];var e=t,i=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];e=e.replace(new RegExp(" ","g"),",");for(var r=0;r<i.length;r++)e=e.replace(new RegExp(i[r],"g"),"|"+i[r]);var a,n=e.split("|"),s=[],o=[],h=0,l=0,d=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;for(r=1;r<n.length;r++){var c=n[r],g=c.charAt(0);for(c=c.slice(1),o.length=0;a=d.exec(c);)o.push(a[0]);for(var u=[],f=0,p=o.length;f<p;f++)if("00"!==o[f]){var v=parseFloat(o[f]);isNaN(v)?u.push(0):u.push(v)}else u.push(0,0);for(;u.length>0&&!isNaN(u[0]);){var m,_,y,x,b,S,w,C,k,P,T=null,A=[],M=h,G=l;switch(g){case"l":h+=u.shift(),l+=u.shift(),T="L",A.push(h,l);break;case"L":h=u.shift(),l=u.shift(),A.push(h,l);break;case"m":var R=u.shift(),E=u.shift();if(h+=R,l+=E,T="M",s.length>2&&"z"===s[s.length-1].command)for(var L=s.length-2;L>=0;L--)if("M"===s[L].command){h=s[L].points[0]+R,l=s[L].points[1]+E;break}A.push(h,l),g="l";break;case"M":h=u.shift(),l=u.shift(),T="M",A.push(h,l),g="L";break;case"h":h+=u.shift(),T="L",A.push(h,l);break;case"H":h=u.shift(),T="L",A.push(h,l);break;case"v":l+=u.shift(),T="L",A.push(h,l);break;case"V":l=u.shift(),T="L",A.push(h,l);break;case"C":A.push(u.shift(),u.shift(),u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"c":A.push(h+u.shift(),l+u.shift(),h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"S":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,u.shift(),u.shift()),h=u.shift(),l=u.shift(),T="C",A.push(h,l);break;case"s":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"Q":A.push(u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"q":A.push(h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="Q",A.push(h,l);break;case"T":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h=u.shift(),l=u.shift(),T="Q",A.push(_,y,h,l);break;case"t":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h+=u.shift(),l+=u.shift(),T="Q",A.push(_,y,h,l);break;case"A":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),k=h,P=l,h=u.shift(),l=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(k,P,h,l,w,C,x,b,S);break;case"a":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),k=h,P=l,h+=u.shift(),l+=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(k,P,h,l,w,C,x,b,S)}s.push({command:T||g,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||g,A)})}"z"!==g&&"Z"!==g||s.push({command:"z",points:[],start:void 0,pathLength:0})}return s}static calcLength(t,e,i,r){var a,n,s,o,h=ne;switch(i){case"L":return h.getLineLength(t,e,r[0],r[1]);case"C":for(a=0,n=h.getPointOnCubicBezier(0,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),o=.01;o<=1;o+=.01)s=h.getPointOnCubicBezier(o,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"Q":for(a=0,n=h.getPointOnQuadraticBezier(0,t,e,r[0],r[1],r[2],r[3]),o=.01;o<=1;o+=.01)s=h.getPointOnQuadraticBezier(o,t,e,r[0],r[1],r[2],r[3]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"A":a=0;var l=r[4],d=r[5],c=r[4]+d,g=Math.PI/180;if(Math.abs(l-c)<g&&(g=Math.abs(l-c)),n=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],l,0),d<0)for(o=l-g;o>c;o-=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;else for(o=l+g;o<c;o+=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],c,0),a+=h.getLineLength(n.x,n.y,s.x,s.y)}return 0}static convertEndpointToCenterParameterization(t,e,i,r,a,n,s,o,h){var l=h*(Math.PI/180),d=Math.cos(l)*(t-i)/2+Math.sin(l)*(e-r)/2,c=-1*Math.sin(l)*(t-i)/2+Math.cos(l)*(e-r)/2,g=d*d/(s*s)+c*c/(o*o);g>1&&(s*=Math.sqrt(g),o*=Math.sqrt(g));var u=Math.sqrt((s*s*(o*o)-s*s*(c*c)-o*o*(d*d))/(s*s*(c*c)+o*o*(d*d)));a===n&&(u*=-1),isNaN(u)&&(u=0);var f=u*s*c/o,p=u*-o*d/s,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*p,m=(e+r)/2+Math.sin(l)*f+Math.cos(l)*p,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},x=function(t,e){return(t[0]*e[1]<t[1]*e[0]?-1:1)*Math.acos(y(t,e))},b=x([1,0],[(d-f)/s,(c-p)/o]),S=[(d-f)/s,(c-p)/o],w=[(-1*d-f)/s,(-1*c-p)/o],C=x(S,w);return y(S,w)<=-1&&(C=Math.PI),y(S,w)>=1&&(C=0),0===n&&C>0&&(C-=2*Math.PI),1===n&&C<0&&(C+=2*Math.PI),[v,m,s,o,b,C,l,n]}}ne.prototype.className="Path",ne.prototype._attrsAffectingSize=["data"],r(ne),w.addGetterSetter(ne,"data");class se extends ae{_sceneFunc(t){super._sceneFunc(t);var e=2*Math.PI,i=this.points(),r=i,a=0!==this.tension()&&i.length>4;a&&(r=this.getTensionPoints());var n,s,o=this.pointerLength(),h=i.length;if(a){const t=[r[r.length-4],r[r.length-3],r[r.length-2],r[r.length-1],i[h-2],i[h-1]],e=ne.calcLength(r[r.length-4],r[r.length-3],"C",t),a=ne.getPointOnQuadraticBezier(Math.min(1,1-o/e),t[0],t[1],t[2],t[3],t[4],t[5]);n=i[h-2]-a.x,s=i[h-1]-a.y}else n=i[h-2]-i[h-4],s=i[h-1]-i[h-3];var l=(Math.atan2(s,n)+e)%e,d=this.pointerWidth();this.pointerAtEnding()&&(t.save(),t.beginPath(),t.translate(i[h-2],i[h-1]),t.rotate(l),t.moveTo(0,0),t.lineTo(-o,d/2),t.lineTo(-o,-d/2),t.closePath(),t.restore()),this.pointerAtBeginning()&&(t.save(),t.beginPath(),t.translate(i[0],i[1]),a?(n=(r[0]+r[2])/2-i[0],s=(r[1]+r[3])/2-i[1]):(n=i[2]-i[0],s=i[3]-i[1]),t.rotate((Math.atan2(-s,-n)+e)%e),t.moveTo(0,0),t.lineTo(-o,d/2),t.lineTo(-o,-d/2),t.closePath(),t.restore());if(this.pointerAtEnding()||this.pointerAtBeginning()){var c=this.dashEnabled();c&&(this.attrs.dashEnabled=!1,t.setLineDash([])),t.fillStrokeShape(this),c&&(this.attrs.dashEnabled=!0)}}getSelfRect(){const t=super.getSelfRect(),e=this.pointerWidth()/2;return{x:t.x-e,y:t.y-e,width:t.width+2*e,height:t.height+2*e}}}se.prototype.className="Arrow",r(se),w.addGetterSetter(se,"pointerLength",10,p()),w.addGetterSetter(se,"pointerWidth",10,p()),w.addGetterSetter(se,"pointerAtBeginning",!1),w.addGetterSetter(se,"pointerAtEnding",!0);class oe extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius()!==t/2&&this.radius(t/2)}setHeight(t){this.radius()!==t/2&&this.radius(t/2)}}oe.prototype._centroid=!0,oe.prototype.className="Circle",oe.prototype._attrsAffectingSize=["radius"],r(oe),w.addGetterSetter(oe,"radius",0,p());class he extends zt{_sceneFunc(t){var e=this.radiusX(),i=this.radiusY();t.beginPath(),t.save(),e!==i&&t.scale(1,i/e),t.arc(0,0,e,0,2*Math.PI,!1),t.restore(),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radiusX()}getHeight(){return 2*this.radiusY()}setWidth(t){this.radiusX(t/2)}setHeight(t){this.radiusY(t/2)}}he.prototype.className="Ellipse",he.prototype._centroid=!0,he.prototype._attrsAffectingSize=["radiusX","radiusY"],r(he),w.addComponentsGetterSetter(he,"radius",["x","y"]),w.addGetterSetter(he,"radiusX",0,p()),w.addGetterSetter(he,"radiusY",0,p());class le extends zt{constructor(t){super(t),this.on("imageChange.konva",(()=>{this._setImageLoad()})),this._setImageLoad()}_setImageLoad(){const t=this.image();t&&t.complete||t&&4===t.readyState||t&&t.addEventListener&&t.addEventListener("load",(()=>{this._requestDraw()}))}_useBufferCanvas(){return super._useBufferCanvas(!0)}_sceneFunc(t){const e=this.getWidth(),i=this.getHeight(),r=this.attrs.image;let a;if(r){const t=this.attrs.cropWidth,n=this.attrs.cropHeight;a=t&&n?[r,this.cropX(),this.cropY(),t,n,0,0,e,i]:[r,0,0,e,i]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,a)}_hitFunc(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}getWidth(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.width}getHeight(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.height}static fromURL(t,e){var i=g.createImageElement();i.onload=function(){var t=new le({image:i});e(t)},i.crossOrigin="Anonymous",i.src=t}}le.prototype.className="Image",r(le),w.addGetterSetter(le,"image"),w.addComponentsGetterSetter(le,"crop",["x","y","width","height"]),w.addGetterSetter(le,"cropX",0,p()),w.addGetterSetter(le,"cropY",0,p()),w.addGetterSetter(le,"cropWidth",0,p()),w.addGetterSetter(le,"cropHeight",0,p());var de=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width","height"],ce="up",ge="right",ue="down",fe="left",pe=de.length;class ve extends jt{constructor(t){super(t),this.on("add.konva",(function(t){this._addListeners(t.child),this._sync()}))}getText(){return this.find("Text")[0]}getTag(){return this.find("Tag")[0]}_addListeners(t){var e,i=this,r=function(){i._sync()};for(e=0;e<pe;e++)t.on(de[e]+"Change.konva",r)}getWidth(){return this.getText().width()}getHeight(){return this.getText().height()}_sync(){var t,e,i,r,a,n,s,o=this.getText(),h=this.getTag();if(o&&h){switch(t=o.width(),e=o.height(),i=h.pointerDirection(),r=h.pointerWidth(),s=h.pointerHeight(),a=0,n=0,i){case ce:a=t/2,n=-1*s;break;case ge:a=t+r,n=e/2;break;case ue:a=t/2,n=e+s;break;case fe:a=-1*r,n=e/2}h.setAttrs({x:-1*a,y:-1*n,width:t,height:e}),o.setAttrs({x:-1*a,y:-1*n})}}}ve.prototype.className="Label",r(ve);class me extends zt{_sceneFunc(t){var e=this.width(),i=this.height(),r=this.pointerDirection(),a=this.pointerWidth(),n=this.pointerHeight(),s=this.cornerRadius();let o=0,h=0,l=0,d=0;"number"==typeof s?o=h=l=d=Math.min(s,e/2,i/2):(o=Math.min(s[0]||0,e/2,i/2),h=Math.min(s[1]||0,e/2,i/2),d=Math.min(s[2]||0,e/2,i/2),l=Math.min(s[3]||0,e/2,i/2)),t.beginPath(),t.moveTo(o,0),r===ce&&(t.lineTo((e-a)/2,0),t.lineTo(e/2,-1*n),t.lineTo((e+a)/2,0)),t.lineTo(e-h,0),t.arc(e-h,h,h,3*Math.PI/2,0,!1),r===ge&&(t.lineTo(e,(i-n)/2),t.lineTo(e+a,i/2),t.lineTo(e,(i+n)/2)),t.lineTo(e,i-d),t.arc(e-d,i-d,d,0,Math.PI/2,!1),r===ue&&(t.lineTo((e+a)/2,i),t.lineTo(e/2,i+n),t.lineTo((e-a)/2,i)),t.lineTo(l,i),t.arc(l,i-l,l,Math.PI/2,Math.PI,!1),r===fe&&(t.lineTo(0,(i+n)/2),t.lineTo(-1*a,i/2),t.lineTo(0,(i-n)/2)),t.lineTo(0,o),t.arc(o,o,o,Math.PI,3*Math.PI/2,!1),t.closePath(),t.fillStrokeShape(this)}getSelfRect(){var t=0,e=0,i=this.pointerWidth(),r=this.pointerHeight(),a=this.pointerDirection(),n=this.width(),s=this.height();return a===ce?(e-=r,s+=r):a===ue?s+=r:a===fe?(t-=1.5*i,n+=i):a===ge&&(n+=1.5*i),{x:t,y:e,width:n,height:s}}}me.prototype.className="Tag",r(me),w.addGetterSetter(me,"pointerDirection","none"),w.addGetterSetter(me,"pointerWidth",0,p()),w.addGetterSetter(me,"pointerHeight",0,p()),w.addGetterSetter(me,"cornerRadius",0,v(4));class _e extends zt{_sceneFunc(t){var e=this.cornerRadius(),i=this.width(),r=this.height();if(t.beginPath(),e){let a=0,n=0,s=0,o=0;"number"==typeof e?a=n=s=o=Math.min(e,i/2,r/2):(a=Math.min(e[0]||0,i/2,r/2),n=Math.min(e[1]||0,i/2,r/2),o=Math.min(e[2]||0,i/2,r/2),s=Math.min(e[3]||0,i/2,r/2)),t.moveTo(a,0),t.lineTo(i-n,0),t.arc(i-n,n,n,3*Math.PI/2,0,!1),t.lineTo(i,r-o),t.arc(i-o,r-o,o,0,Math.PI/2,!1),t.lineTo(s,r),t.arc(s,r-s,s,Math.PI/2,Math.PI,!1),t.lineTo(0,a),t.arc(a,a,a,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,r);t.closePath(),t.fillStrokeShape(this)}}_e.prototype.className="Rect",r(_e),w.addGetterSetter(_e,"cornerRadius",0,v(4));class ye extends zt{_sceneFunc(t){const e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i<e.length;i++)t.lineTo(e[i].x,e[i].y);t.closePath(),t.fillStrokeShape(this)}_getPoints(){const t=this.attrs.sides,e=this.attrs.radius||0,i=[];for(var r=0;r<t;r++)i.push({x:e*Math.sin(2*r*Math.PI/t),y:-1*e*Math.cos(2*r*Math.PI/t)});return i}getSelfRect(){const t=this._getPoints();var e=t[0].x,i=t[0].y,r=t[0].x,a=t[0].y;return t.forEach((t=>{e=Math.min(e,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),a=Math.max(a,t.y)})),{x:e,y:r,width:i-e,height:a-r}}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}ye.prototype.className="RegularPolygon",ye.prototype._centroid=!0,ye.prototype._attrsAffectingSize=["radius"],r(ye),w.addGetterSetter(ye,"radius",0,p()),w.addGetterSetter(ye,"sides",0,p());var xe=2*Math.PI;class be extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.innerRadius(),0,xe,!1),t.moveTo(this.outerRadius(),0),t.arc(0,0,this.outerRadius(),xe,0,!0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}be.prototype.className="Ring",be.prototype._centroid=!0,be.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(be),w.addGetterSetter(be,"innerRadius",0,p()),w.addGetterSetter(be,"outerRadius",0,p());class Se extends zt{constructor(t){super(t),this._updated=!0,this.anim=new qt((()=>{var t=this._updated;return this._updated=!1,t})),this.on("animationChange.konva",(function(){this.frameIndex(0)})),this.on("frameIndexChange.konva",(function(){this._updated=!0})),this.on("frameRateChange.konva",(function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}))}_sceneFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+0],o=a[r+1],h=a[r+2],l=a[r+3],d=this.image();if((this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,h,l),t.closePath(),t.fillStrokeShape(this)),d)if(n){var c=n[e],g=2*i;t.drawImage(d,s,o,h,l,c[g+0],c[g+1],h,l)}else t.drawImage(d,s,o,h,l,0,0,h,l)}_hitFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+2],o=a[r+3];if(t.beginPath(),n){var h=n[e],l=2*i;t.rect(h[l+0],h[l+1],s,o)}else t.rect(0,0,s,o);t.closePath(),t.fillShape(this)}_useBufferCanvas(){return super._useBufferCanvas(!0)}_setInterval(){var t=this;this.interval=setInterval((function(){t._updateIndex()}),1e3/this.frameRate())}start(){if(!this.isRunning()){var t=this.getLayer();this.anim.setLayers(t),this._setInterval(),this.anim.start()}}stop(){this.anim.stop(),clearInterval(this.interval)}isRunning(){return this.anim.isRunning()}_updateIndex(){var t=this.frameIndex(),e=this.animation();t<this.animations()[e].length/4-1?this.frameIndex(t+1):this.frameIndex(0)}}Se.prototype.className="Sprite",r(Se),w.addGetterSetter(Se,"animation"),w.addGetterSetter(Se,"animations"),w.addGetterSetter(Se,"frameOffsets"),w.addGetterSetter(Se,"image"),w.addGetterSetter(Se,"frameIndex",0,p()),w.addGetterSetter(Se,"frameRate",17,p()),w.backCompat(Se,{index:"frameIndex",getIndex:"getFrameIndex",setIndex:"setFrameIndex"});class we extends zt{_sceneFunc(t){var e=this.innerRadius(),i=this.outerRadius(),r=this.numPoints();t.beginPath(),t.moveTo(0,0-i);for(var a=1;a<2*r;a++){var n=a%2==0?i:e,s=n*Math.sin(a*Math.PI/r),o=-1*n*Math.cos(a*Math.PI/r);t.lineTo(s,o)}t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}function Ce(t){return Array.from(t)}we.prototype.className="Star",we.prototype._centroid=!0,we.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(we),w.addGetterSetter(we,"numPoints",5,p()),w.addGetterSetter(we,"innerRadius",0,p()),w.addGetterSetter(we,"outerRadius",0,p());var ke,Pe="auto",Te="justify",Ae="left",Me="middle",Ge="normal",Re=" ",Ee=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","verticalAlign","lineHeight","text","width","height","wrap","ellipsis","letterSpacing"],Le=Ee.length;function De(){return ke||(ke=g.createCanvasElement().getContext("2d"))}class Oe extends zt{constructor(t){super(function(t){return(t=t||{}).fillLinearGradientColorStops||t.fillRadialGradientColorStops||t.fillPatternImage||(t.fill=t.fill||"black"),t}(t)),this._partialTextX=0,this._partialTextY=0;for(var e=0;e<Le;e++)this.on(Ee[e]+"Change.konva",this._setTextData);this._setTextData()}_sceneFunc(t){var e=this.textArr,i=e.length;if(this.text()){var r,a=this.padding(),n=this.fontSize(),s=this.lineHeight()*n,o=this.verticalAlign(),h=0,l=this.align(),d=this.getWidth(),c=this.letterSpacing(),g=this.fill(),u=this.textDecoration(),f=-1!==u.indexOf("underline"),p=-1!==u.indexOf("line-through"),v=0,m=(v=s/2,0),_=0;for(t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",Me),t.setAttr("textAlign",Ae),o===Me?h=(this.getHeight()-i*s-2*a)/2:"bottom"===o&&(h=this.getHeight()-i*s-2*a),t.translate(a,h+a),r=0;r<i;r++){m=0,_=0;var y,x,b,S=e[r],w=S.text,C=S.width,k=r!==i-1;if(t.save(),"right"===l?m+=d-C-2*a:"center"===l&&(m+=(d-C-2*a)/2),f&&(t.save(),t.beginPath(),t.moveTo(m,v+_+Math.round(n/2)),x=0===(y=w.split(" ").length-1),b=l===Te&&k&&!x?d-2*a:C,t.lineTo(m+Math.round(b),v+_+Math.round(n/2)),t.lineWidth=n/15,t.strokeStyle=g,t.stroke(),t.restore()),p&&(t.save(),t.beginPath(),t.moveTo(m,v+_),x=0===(y=w.split(" ").length-1),b=l===Te&&k&&!x?d-2*a:C,t.lineTo(m+Math.round(b),v+_),t.lineWidth=n/15,t.strokeStyle=g,t.stroke(),t.restore()),0!==c||l===Te){y=w.split(" ").length-1;for(var P=Ce(w),T=0;T<P.length;T++){var A=P[T];" "===A&&r!==i-1&&l===Te&&(m+=(d-2*a-C)/y),this._partialTextX=m,this._partialTextY=v+_,this._partialText=A,t.fillStrokeShape(this),m+=this.measureSize(A).width+c}}else this._partialTextX=m,this._partialTextY=v+_,this._partialText=w,t.fillStrokeShape(this);t.restore(),i>1&&(v+=s)}}}_hitFunc(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}setText(t){var e=g._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this}getWidth(){return this.attrs.width===Pe||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width}getHeight(){return this.attrs.height===Pe||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height}getTextWidth(){return this.textWidth}getTextHeight(){return g.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}measureSize(t){var e,i=De(),r=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:r}}_getContextFont(){return this.fontStyle()+Re+this.fontVariant()+Re+(this.fontSize()+"px ")+this.fontFamily().split(",").map((t=>{const e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t=`"${t}"`),t})).join(", ")}_addTextLine(t){this.align()===Te&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})}_getTextWidth(t){var e=this.letterSpacing(),i=t.length;return De().measureText(t).width+(i?e*(i-1):0)}_setTextData(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,r=this.lineHeight()*e,a=this.attrs.width,n=this.attrs.height,s=a!==Pe&&void 0!==a,o=n!==Pe&&void 0!==n,h=this.padding(),l=a-2*h,d=n-2*h,c=0,g=this.wrap(),u="none"!==g,f="char"!==g&&u,p=this.ellipsis();this.textArr=[],De().font=this._getContextFont();for(var v=p?this._getTextWidth("…"):0,m=0,_=t.length;m<_;++m){var y=t[m],x=this._getTextWidth(y);if(s&&x>l)for(;y.length>0;){for(var b=0,S=y.length,w="",C=0;b<S;){var k=b+S>>>1,P=y.slice(0,k+1),T=this._getTextWidth(P)+v;T<=l?(b=k+1,w=P,C=T):S=k}if(!w)break;if(f){var A,M=y[w.length];(A=(M===Re||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(Re),w.lastIndexOf("-"))+1)>0&&(b=A,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!u||o&&c+r>d){var G=this.textArr[this.textArr.length-1];if(G)if(p)this._getTextWidth(G.text+"…")<l||(G.text=G.text.slice(0,G.text.length-3)),this.textArr.splice(this.textArr.length-1,1),this._addTextLine(G.text+"…");break}if((y=(y=y.slice(b)).trimLeft()).length>0&&(x=this._getTextWidth(y))<=l){this._addTextLine(y),c+=r,i=Math.max(i,x);break}}else this._addTextLine(y),c+=r,i=Math.max(i,x);if(o&&c+r>d)break}this.textHeight=e,this.textWidth=i}getStrokeScaleEnabled(){return!0}}Oe.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Oe.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Oe.prototype.className="Text",Oe.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight","letterSpacing"],r(Oe),w.overWriteSetter(Oe,"width",m()),w.overWriteSetter(Oe,"height",m()),w.addGetterSetter(Oe,"fontFamily","Arial"),w.addGetterSetter(Oe,"fontSize",12,p()),w.addGetterSetter(Oe,"fontStyle",Ge),w.addGetterSetter(Oe,"fontVariant",Ge),w.addGetterSetter(Oe,"padding",0,p()),w.addGetterSetter(Oe,"align",Ae),w.addGetterSetter(Oe,"verticalAlign","top"),w.addGetterSetter(Oe,"lineHeight",1,p()),w.addGetterSetter(Oe,"wrap","word"),w.addGetterSetter(Oe,"ellipsis",!1,x()),w.addGetterSetter(Oe,"letterSpacing",0,p()),w.addGetterSetter(Oe,"text","",_()),w.addGetterSetter(Oe,"textDecoration","");var Ie="normal";function Fe(t){t.fillText(this.partialText,0,0)}function Ne(t){t.strokeText(this.partialText,0,0)}class Be extends zt{constructor(t){super(t),this.dummyCanvas=g.createCanvasElement(),this.dataArray=[],this.dataArray=ne.parsePathData(this.attrs.data),this.on("dataChange.konva",(function(){this.dataArray=ne.parsePathData(this.attrs.data),this._setTextData()})),this.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva",this._setTextData),this._setTextData()}_sceneFunc(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),r=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var n=0;n<a.length;n++){t.save();var s=a[n].p0;t.translate(s.x,s.y),t.rotate(a[n].rotation),this.partialText=a[n].text,t.fillStrokeShape(this),"underline"===e&&(0===n&&t.moveTo(0,r/2+1),t.lineTo(r,r/2+1)),t.restore()}"underline"===e&&(t.strokeStyle=i,t.lineWidth=r/20,t.stroke()),t.restore()}_hitFunc(t){t.beginPath();var e=this.glyphInfo;if(e.length>=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var r=0;r<e.length;r++){var a=e[r].p1;t.lineTo(a.x,a.y)}t.setAttr("lineWidth",this.fontSize()),t.setAttr("strokeStyle",this.colorKey),t.stroke()}getTextWidth(){return this.textWidth}getTextHeight(){return g.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}setText(t){return Oe.prototype.setText.call(this,t)}_getContextFont(){return Oe.prototype._getContextFont.call(this)}_getTextSize(t){var e=this.dummyCanvas.getContext("2d");e.save(),e.font=this._getContextFont();var i=e.measureText(t);return e.restore(),{width:i.width,height:parseInt(this.attrs.fontSize,10)}}_setTextData(){var t=this,e=this._getTextSize(this.attrs.text),i=this.letterSpacing(),r=this.align(),a=this.kerningFunc();this.textWidth=e.width,this.textHeight=e.height;var n=Math.max(this.textWidth+((this.attrs.text||"").length-1)*i,0);this.glyphInfo=[];for(var s=0,o=0;o<t.dataArray.length;o++)t.dataArray[o].pathLength>0&&(s+=t.dataArray[o].pathLength);var h=0;"center"===r&&(h=Math.max(0,s/2-n/2)),"right"===r&&(h=Math.max(0,s-n));for(var l,d,c,g=Ce(this.text()),u=this.text().split(" ").length-1,f=-1,p=0,v=function(){p=0;for(var e=t.dataArray,i=f+1;i<e.length;i++){if(e[i].pathLength>0)return f=i,e[i];"M"===e[i].command&&(l={x:e[i].points[0],y:e[i].points[1]})}return{}},m=function(e){var a=t._getTextSize(e).width+i;" "===e&&"justify"===r&&(a+=(s-n)/u);var o=0,h=0;for(d=void 0;Math.abs(a-o)/a>.01&&h<20;){h++;for(var g=o;void 0===c;)(c=v())&&g+c.pathLength<a&&(g+=c.pathLength,c=void 0);if(c==={}||void 0===l)return;var f=!1;switch(c.command){case"L":ne.getLineLength(l.x,l.y,c.points[0],c.points[1])>a?d=ne.getPointOnLine(a,l.x,l.y,c.points[0],c.points[1],l.x,l.y):c=void 0;break;case"A":var m=c.points[4],_=c.points[5],y=c.points[4]+_;0===p?p=m+1e-8:a>o?p+=Math.PI/180*_/Math.abs(_):p-=Math.PI/360*_/Math.abs(_),(_<0&&p<y||_>=0&&p>y)&&(p=y,f=!0),d=ne.getPointOnEllipticalArc(c.points[0],c.points[1],c.points[2],c.points[3],p,c.points[6]);break;case"C":0===p?p=a>c.pathLength?1e-8:a/c.pathLength:a>o?p+=(a-o)/c.pathLength/2:p=Math.max(p-(o-a)/c.pathLength/2,0),p>1&&(p=1,f=!0),d=ne.getPointOnCubicBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3],c.points[4],c.points[5]);break;case"Q":0===p?p=a/c.pathLength:a>o?p+=(a-o)/c.pathLength:p-=(o-a)/c.pathLength,p>1&&(p=1,f=!0),d=ne.getPointOnQuadraticBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3])}void 0!==d&&(o=ne.getLineLength(l.x,l.y,d.x,d.y)),f&&(f=!1,c=void 0)}},_=h/(t._getTextSize("C").width+i)-1,y=0;y<_&&(m("C"),void 0!==l&&void 0!==d);y++)l=d;for(var x=0;x<g.length&&(m(g[x]),void 0!==l&&void 0!==d);x++){var b=ne.getLineLength(l.x,l.y,d.x,d.y),S=0;if(a)try{S=a(g[x-1],g[x])*this.fontSize()}catch(t){S=0}l.x+=S,d.x+=S,this.textWidth+=S;var w=ne.getPointOnLine(S+b/2,l.x,l.y,d.x,d.y),C=Math.atan2(d.y-l.y,d.x-l.x);this.glyphInfo.push({transposeX:w.x,transposeY:w.y,text:g[x],rotation:C,p0:l,p1:d}),l=d}}getSelfRect(){if(!this.glyphInfo.length)return{x:0,y:0,width:0,height:0};var t=[];this.glyphInfo.forEach((function(e){t.push(e.p0.x),t.push(e.p0.y),t.push(e.p1.x),t.push(e.p1.y)}));for(var e,i,r=t[0]||0,a=t[0]||0,n=t[1]||0,s=t[1]||0,o=0;o<t.length/2;o++)e=t[2*o],i=t[2*o+1],r=Math.min(r,e),a=Math.max(a,e),n=Math.min(n,i),s=Math.max(s,i);var h=this.fontSize();return{x:r-h/2,y:n-h/2,width:a-r+h,height:s-n+h}}}Be.prototype._fillFunc=Fe,Be.prototype._strokeFunc=Ne,Be.prototype._fillFuncHit=Fe,Be.prototype._strokeFuncHit=Ne,Be.prototype.className="TextPath",Be.prototype._attrsAffectingSize=["text","fontSize","data"],r(Be),w.addGetterSetter(Be,"data"),w.addGetterSetter(Be,"fontFamily","Arial"),w.addGetterSetter(Be,"fontSize",12,p()),w.addGetterSetter(Be,"fontStyle",Ie),w.addGetterSetter(Be,"align","left"),w.addGetterSetter(Be,"letterSpacing",0,p()),w.addGetterSetter(Be,"textBaseline","middle"),w.addGetterSetter(Be,"fontVariant",Ie),w.addGetterSetter(Be,"text",""),w.addGetterSetter(Be,"textDecoration",null),w.addGetterSetter(Be,"kerningFunc",null);var ze="tr-konva",We=["resizeEnabledChange","rotateAnchorOffsetChange","rotateEnabledChange","enabledAnchorsChange","anchorSizeChange","borderEnabledChange","borderStrokeChange","borderStrokeWidthChange","borderDashChange","anchorStrokeChange","anchorStrokeWidthChange","anchorFillChange","anchorCornerRadiusChange","ignoreStrokeChange"].map((t=>t+".tr-konva")).join(" "),He="nodesRect",Ye=["widthChange","heightChange","scaleXChange","scaleYChange","skewXChange","skewYChange","rotationChange","offsetXChange","offsetYChange","transformsEnabledChange","strokeWidthChange"].map((t=>t+".tr-konva")).join(" "),Xe={"top-left":-45,"top-center":0,"top-right":45,"middle-right":-90,"middle-left":90,"bottom-left":-135,"bottom-center":180,"bottom-right":135};const je="ontouchstart"in i._global;var Ue=["top-left","top-center","top-right","middle-right","middle-left","bottom-left","bottom-center","bottom-right"];function qe(t,e,i){const r=i.x+(t.x-i.x)*Math.cos(e)-(t.y-i.y)*Math.sin(e),a=i.y+(t.x-i.x)*Math.sin(e)+(t.y-i.y)*Math.cos(e);return Object.assign(Object.assign({},t),{rotation:t.rotation+e,x:r,y:a})}function Ve(t,e){const i=function(t){return{x:t.x+t.width/2*Math.cos(t.rotation)+t.height/2*Math.sin(-t.rotation),y:t.y+t.height/2*Math.cos(t.rotation)+t.width/2*Math.sin(t.rotation)}}(t);return qe(t,e,i)}class Ke extends jt{constructor(t){super(t),this._transforming=!1,this._createElements(),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this.update=this.update.bind(this),this.on(We,this.update),this.getNode()&&this.update()}attachTo(t){return this.setNode(t),this}setNode(t){return g.warn("tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead."),this.setNodes([t])}getNode(){return this._nodes&&this._nodes[0]}setNodes(t=[]){return this._nodes&&this._nodes.length&&this.detach(),this._nodes=t,1===t.length&&this.useSingleNodeRotation()?this.rotation(t[0].getAbsoluteRotation()):this.rotation(0),this._nodes.forEach((t=>{const e=t._attrsAffectingSize.map((t=>t+"Change."+ze)).join(" "),i=()=>{1===this.nodes().length&&this.useSingleNodeRotation()&&this.rotation(this.nodes()[0].getAbsoluteRotation()),this._resetTransformCache(),this._transforming||this.isDragging()||this.update()};t.on(e,i),t.on(Ye,i),t.on("absoluteTransformChange.tr-konva",i),t.on("xChange.tr-konva yChange.tr-konva",i),this._proxyDrag(t)})),this._resetTransformCache(),!!this.findOne(".top-left")&&this.update(),this}_proxyDrag(t){let e;t.on("dragstart.tr-konva",(i=>{e=t.getAbsolutePosition(),this.isDragging()||t===this.findOne(".back")||this.startDrag(i,!1)})),t.on("dragmove.tr-konva",(i=>{if(!e)return;const r=t.getAbsolutePosition(),a=r.x-e.x,n=r.y-e.y;this.nodes().forEach((e=>{if(e===t)return;if(e.isDragging())return;const r=e.getAbsolutePosition();e.setAbsolutePosition({x:r.x+a,y:r.y+n}),e.startDrag(i)})),e=null}))}getNodes(){return this._nodes||[]}getActiveAnchor(){return this._movingAnchorName}detach(){this._nodes&&this._nodes.forEach((t=>{t.off(".tr-konva")})),this._nodes=[],this._resetTransformCache()}_resetTransformCache(){this._clearCache(He),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform")}_getNodeRect(){return this._getCache(He,this.__getNodeRect)}__getNodeShape(t,e=this.rotation(),r){var a=t.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),n=t.getAbsoluteScale(r),s=t.getAbsolutePosition(r),o=a.x*n.x-t.offsetX()*n.x,h=a.y*n.y-t.offsetY()*n.y;const l=(i.getAngle(t.getAbsoluteRotation())+2*Math.PI)%(2*Math.PI);return qe({x:s.x+o*Math.cos(l)+h*Math.sin(-l),y:s.y+h*Math.cos(l)+o*Math.sin(l),width:a.width*n.x,height:a.height*n.y,rotation:l},-i.getAngle(e),{x:0,y:0})}__getNodeRect(){if(!this.getNode())return{x:-1e8,y:-1e8,width:0,height:0,rotation:0};const t=[];this.nodes().map((e=>{const i=e.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()});var r=[{x:i.x,y:i.y},{x:i.x+i.width,y:i.y},{x:i.x+i.width,y:i.y+i.height},{x:i.x,y:i.y+i.height}],a=e.getAbsoluteTransform();r.forEach((function(e){var i=a.point(e);t.push(i)}))}));const e=new a;var r,n,s,o;e.rotate(-i.getAngle(this.rotation())),t.forEach((function(t){var i=e.point(t);void 0===r&&(r=s=i.x,n=o=i.y),r=Math.min(r,i.x),n=Math.min(n,i.y),s=Math.max(s,i.x),o=Math.max(o,i.y)})),e.invert();const h=e.point({x:r,y:n});return{x:h.x,y:h.y,width:s-r,height:o-n,rotation:i.getAngle(this.rotation())}}getX(){return this._getNodeRect().x}getY(){return this._getNodeRect().y}getWidth(){return this._getNodeRect().width}getHeight(){return this._getNodeRect().height}_createElements(){this._createBack(),Ue.forEach(function(t){this._createAnchor(t)}.bind(this)),this._createAnchor("rotater")}_createAnchor(t){var e=new _e({stroke:"rgb(0, 161, 255)",fill:"white",strokeWidth:1,name:t+" _anchor",dragDistance:0,draggable:!0,hitStrokeWidth:je?10:"auto"}),r=this;e.on("mousedown touchstart",(function(t){r._handleMouseDown(t)})),e.on("dragstart",(t=>{e.stopDrag(),t.cancelBubble=!0})),e.on("dragend",(t=>{t.cancelBubble=!0})),e.on("mouseenter",(()=>{var r=i.getAngle(this.rotation()),a=function(t,e){if("rotater"===t)return"crosshair";e+=g.degToRad(Xe[t]||0);var i=(g.radToDeg(e)%360+360)%360;return g._inRange(i,337.5,360)||g._inRange(i,0,22.5)?"ns-resize":g._inRange(i,22.5,67.5)?"nesw-resize":g._inRange(i,67.5,112.5)?"ew-resize":g._inRange(i,112.5,157.5)?"nwse-resize":g._inRange(i,157.5,202.5)?"ns-resize":g._inRange(i,202.5,247.5)?"nesw-resize":g._inRange(i,247.5,292.5)?"ew-resize":g._inRange(i,292.5,337.5)?"nwse-resize":(g.error("Transformer has unknown angle for cursor detection: "+i),"pointer")}(t,r);e.getStage().content&&(e.getStage().content.style.cursor=a),this._cursorChange=!0})),e.on("mouseout",(()=>{e.getStage().content&&(e.getStage().content.style.cursor=""),this._cursorChange=!1})),this.add(e)}_createBack(){var t=new zt({name:"back",width:0,height:0,draggable:!0,sceneFunc(t){var e=this.getParent(),i=e.padding();t.beginPath(),t.rect(-i,-i,this.width()+2*i,this.height()+2*i),t.moveTo(this.width()/2,-i),e.rotateEnabled()&&t.lineTo(this.width()/2,-e.rotateAnchorOffset()*g._sign(this.height())-i),t.fillStrokeShape(this)},hitFunc:(t,e)=>{if(this.shouldOverdrawWholeArea()){var i=this.padding();t.beginPath(),t.rect(-i,-i,e.width()+2*i,e.height()+2*i),t.fillStrokeShape(e)}}});this.add(t),this._proxyDrag(t),t.on("dragstart",(t=>{t.cancelBubble=!0})),t.on("dragmove",(t=>{t.cancelBubble=!0})),t.on("dragend",(t=>{t.cancelBubble=!0})),this.on("dragmove",(t=>{this.update()}))}_handleMouseDown(t){this._movingAnchorName=t.target.name().split(" ")[0];var e=this._getNodeRect(),i=e.width,r=e.height,a=Math.sqrt(Math.pow(i,2)+Math.pow(r,2));this.sin=Math.abs(r/a),this.cos=Math.abs(i/a),"undefined"!=typeof window&&(window.addEventListener("mousemove",this._handleMouseMove),window.addEventListener("touchmove",this._handleMouseMove),window.addEventListener("mouseup",this._handleMouseUp,!0),window.addEventListener("touchend",this._handleMouseUp,!0)),this._transforming=!0;var n=t.target.getAbsolutePosition(),s=t.target.getStage().getPointerPosition();this._anchorDragOffset={x:s.x-n.x,y:s.y-n.y},this._fire("transformstart",{evt:t,target:this.getNode()}),this._nodes.forEach((e=>{e._fire("transformstart",{evt:t,target:e})}))}_handleMouseMove(t){var e,r,a,n=this.findOne("."+this._movingAnchorName),s=n.getStage();s.setPointersPositions(t);const o=s.getPointerPosition();var h={x:o.x-this._anchorDragOffset.x,y:o.y-this._anchorDragOffset.y};const l=n.getAbsolutePosition();n.setAbsolutePosition(h);const d=n.getAbsolutePosition();if(l.x!==d.x||l.y!==d.y)if("rotater"!==this._movingAnchorName){var c=this.keepRatio()||t.shiftKey,g=this.centeredScaling()||t.altKey;if("top-left"===this._movingAnchorName){if(c){var u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-right").x(),y:this.findOne(".bottom-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(u.y-n.y(),2));var f=this.findOne(".top-left").x()>u.x?-1:1,p=this.findOne(".top-left").y()>u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-left").x(u.x-e),this.findOne(".top-left").y(u.y-r)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(n.y());else if("top-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};a=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(u.y-n.y(),2));f=this.findOne(".top-right").x()<u.x?-1:1,p=this.findOne(".top-right").y()>u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-right").x(u.x+e),this.findOne(".top-right").y(u.y-r)}var v=n.position();this.findOne(".top-left").y(v.y),this.findOne(".bottom-right").x(v.x)}else if("middle-left"===this._movingAnchorName)this.findOne(".top-left").x(n.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(n.x());else if("bottom-left"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(n.y()-u.y,2));f=u.x<n.x()?-1:1,p=n.y()<u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,n.x(u.x-e),n.y(u.y+r)}v=n.position(),this.findOne(".top-left").x(v.x),this.findOne(".bottom-right").y(v.y)}else if("bottom-center"===this._movingAnchorName)this.findOne(".bottom-right").y(n.y());else if("bottom-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-left").x(),y:this.findOne(".top-left").y()};a=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(n.y()-u.y,2));f=this.findOne(".bottom-right").x()<u.x?-1:1,p=this.findOne(".bottom-right").y()<u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".bottom-right").x(u.x+e),this.findOne(".bottom-right").y(u.y+r)}}else console.error(new Error("Wrong position argument of selection resizer: "+this._movingAnchorName));if(g=this.centeredScaling()||t.altKey){var m=this.findOne(".top-left"),_=this.findOne(".bottom-right"),y=m.x(),x=m.y(),b=this.getWidth()-_.x(),S=this.getHeight()-_.y();_.move({x:-y,y:-x}),m.move({x:b,y:S})}var w=this.findOne(".top-left").getAbsolutePosition();e=w.x,r=w.y;var C=this.findOne(".bottom-right").x()-this.findOne(".top-left").x(),k=this.findOne(".bottom-right").y()-this.findOne(".top-left").y();this._fitNodesInto({x:e,y:r,width:C,height:k,rotation:i.getAngle(this.rotation())},t)}else{var P=this._getNodeRect();e=n.x()-P.width/2,r=-n.y()+P.height/2;let a=Math.atan2(-r,e)+Math.PI/2;P.height<0&&(a-=Math.PI);const s=i.getAngle(this.rotation())+a,o=i.getAngle(this.rotationSnapTolerance()),h=function(t,e,r){let a=e;for(let n=0;n<t.length;n++){const s=i.getAngle(t[n]),o=Math.abs(s-e)%(2*Math.PI);Math.min(o,2*Math.PI-o)<r&&(a=s)}return a}(this.rotationSnaps(),s,o),l=Ve(P,h-P.rotation);this._fitNodesInto(l,t)}}_handleMouseUp(t){this._removeEvents(t)}getAbsoluteTransform(){return this.getTransform()}_removeEvents(t){if(this._transforming){this._transforming=!1,"undefined"!=typeof window&&(window.removeEventListener("mousemove",this._handleMouseMove),window.removeEventListener("touchmove",this._handleMouseMove),window.removeEventListener("mouseup",this._handleMouseUp,!0),window.removeEventListener("touchend",this._handleMouseUp,!0));var e=this.getNode();this._fire("transformend",{evt:t,target:e}),e&&this._nodes.forEach((e=>{e._fire("transformend",{evt:t,target:e})})),this._movingAnchorName=null}}_fitNodesInto(t,e){var r=this._getNodeRect();if(g._inRange(t.width,2*-this.padding()-1,1))return void this.update();if(g._inRange(t.height,2*-this.padding()-1,1))return void this.update();const n=this.flipEnabled();var s=new a;if(s.rotate(i.getAngle(this.rotation())),this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("left")>=0){const e=s.point({x:2*-this.padding(),y:0});if(t.x+=e.x,t.y+=e.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,!n)return void this.update()}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){const e=s.point({x:2*this.padding(),y:0});if(this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.width+=2*this.padding(),!n)return void this.update()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){const e=s.point({x:0,y:2*-this.padding()});if(t.x+=e.x,t.y+=e.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding(),!n)return void this.update()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){const e=s.point({x:0,y:2*this.padding()});if(this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding(),!n)return void this.update()}if(this.boundBoxFunc()){const e=this.boundBoxFunc()(r,t);e?t=e:g.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}const o=1e7,h=new a;h.translate(r.x,r.y),h.rotate(r.rotation),h.scale(r.width/o,r.height/o);const l=new a;l.translate(t.x,t.y),l.rotate(t.rotation),l.scale(t.width/o,t.height/o);const d=l.multiply(h.invert());this._nodes.forEach((t=>{var i;const r=t.getParent().getAbsoluteTransform(),n=t.getTransform().copy();n.translate(t.offsetX(),t.offsetY());const s=new a;s.multiply(r.copy().invert()).multiply(d).multiply(r).multiply(n);const o=s.decompose();t.setAttrs(o),this._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(i=t.getLayer())||void 0===i||i.batchDraw()})),this.rotation(g._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}forceUpdate(){this._resetTransformCache(),this.update()}_batchChangeChild(t,e){this.findOne(t).setAttrs(e)}update(){var t,e=this._getNodeRect();this.rotation(g._getRotation(e.rotation));var i=e.width,r=e.height,a=this.enabledAnchors(),n=this.resizeEnabled(),s=this.padding(),o=this.anchorSize();this.find("._anchor").forEach((t=>{t.setAttrs({width:o,height:o,offsetX:o/2,offsetY:o/2,stroke:this.anchorStroke(),strokeWidth:this.anchorStrokeWidth(),fill:this.anchorFill(),cornerRadius:this.anchorCornerRadius()})})),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:o/2+s,offsetY:o/2+s,visible:n&&a.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:i/2,y:0,offsetY:o/2+s,visible:n&&a.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:i,y:0,offsetX:o/2-s,offsetY:o/2+s,visible:n&&a.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:r/2,offsetX:o/2+s,visible:n&&a.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:i,y:r/2,offsetX:o/2-s,visible:n&&a.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:r,offsetX:o/2+s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:i/2,y:r,offsetY:o/2-s,visible:n&&a.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:i,y:r,offsetX:o/2-s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:i/2,y:-this.rotateAnchorOffset()*g._sign(r)-s,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:i,height:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash(),x:0,y:0}),null===(t=this.getLayer())||void 0===t||t.batchDraw()}isTransforming(){return this._transforming}stopTransform(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}}destroy(){return this.getStage()&&this._cursorChange&&this.getStage().content&&(this.getStage().content.style.cursor=""),jt.prototype.destroy.call(this),this.detach(),this._removeEvents(),this}toObject(){return K.prototype.toObject.call(this)}}Ke.prototype.className="Transformer",r(Ke),w.addGetterSetter(Ke,"enabledAnchors",Ue,(function(t){return t instanceof Array||g.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===Ue.indexOf(t)&&g.warn("Unknown anchor name: "+t+". Available names are: "+Ue.join(", "))})),t||[]})),w.addGetterSetter(Ke,"flipEnabled",!0,x()),w.addGetterSetter(Ke,"resizeEnabled",!0),w.addGetterSetter(Ke,"anchorSize",10,p()),w.addGetterSetter(Ke,"rotateEnabled",!0),w.addGetterSetter(Ke,"rotationSnaps",[]),w.addGetterSetter(Ke,"rotateAnchorOffset",50,p()),w.addGetterSetter(Ke,"rotationSnapTolerance",5,p()),w.addGetterSetter(Ke,"borderEnabled",!0),w.addGetterSetter(Ke,"anchorStroke","rgb(0, 161, 255)"),w.addGetterSetter(Ke,"anchorStrokeWidth",1,p()),w.addGetterSetter(Ke,"anchorFill","white"),w.addGetterSetter(Ke,"anchorCornerRadius",0,p()),w.addGetterSetter(Ke,"borderStroke","rgb(0, 161, 255)"),w.addGetterSetter(Ke,"borderStrokeWidth",1,p()),w.addGetterSetter(Ke,"borderDash"),w.addGetterSetter(Ke,"keepRatio",!0),w.addGetterSetter(Ke,"centeredScaling",!1),w.addGetterSetter(Ke,"ignoreStroke",!1),w.addGetterSetter(Ke,"padding",0,p()),w.addGetterSetter(Ke,"node"),w.addGetterSetter(Ke,"nodes"),w.addGetterSetter(Ke,"boundBoxFunc"),w.addGetterSetter(Ke,"shouldOverdrawWholeArea",!1),w.addGetterSetter(Ke,"useSingleNodeRotation",!0),w.backCompat(Ke,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"});class Qe extends zt{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.radius(),0,i.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}function Je(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}Qe.prototype.className="Wedge",Qe.prototype._centroid=!0,Qe.prototype._attrsAffectingSize=["radius"],r(Qe),w.addGetterSetter(Qe,"radius",0,p()),w.addGetterSetter(Qe,"angle",0,p()),w.addGetterSetter(Qe,"clockwise",!1),w.backCompat(Qe,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"});var Ze=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],$e=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];w.addGetterSetter(K,"blurRadius",0,p(),w.afterSetFilter);w.addGetterSetter(K,"brightness",0,p(),w.afterSetFilter);w.addGetterSetter(K,"contrast",0,p(),w.afterSetFilter);function ti(t,e,i,r,a){var n=i-e,s=a-r;return 0===n?r+s/2:0===s?r:s*((t-e)/n)+r}w.addGetterSetter(K,"embossStrength",.5,p(),w.afterSetFilter),w.addGetterSetter(K,"embossWhiteLevel",.5,p(),w.afterSetFilter),w.addGetterSetter(K,"embossDirection","top-left",null,w.afterSetFilter),w.addGetterSetter(K,"embossBlend",!1,null,w.afterSetFilter);w.addGetterSetter(K,"enhance",0,p(),w.afterSetFilter);w.addGetterSetter(K,"hue",0,p(),w.afterSetFilter),w.addGetterSetter(K,"saturation",0,p(),w.afterSetFilter),w.addGetterSetter(K,"luminance",0,p(),w.afterSetFilter);w.addGetterSetter(K,"hue",0,p(),w.afterSetFilter),w.addGetterSetter(K,"saturation",0,p(),w.afterSetFilter),w.addGetterSetter(K,"value",0,p(),w.afterSetFilter);function ei(t,e,i){var r=4*(i*t.width+e),a=[];return a.push(t.data[r++],t.data[r++],t.data[r++],t.data[r++]),a}function ii(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}w.addGetterSetter(K,"kaleidoscopePower",2,p(),w.afterSetFilter),w.addGetterSetter(K,"kaleidoscopeAngle",0,p(),w.afterSetFilter);w.addGetterSetter(K,"threshold",0,p(),w.afterSetFilter);w.addGetterSetter(K,"noise",.2,p(),w.afterSetFilter);w.addGetterSetter(K,"pixelSize",8,p(),w.afterSetFilter);w.addGetterSetter(K,"levels",.5,p(),w.afterSetFilter);w.addGetterSetter(K,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"blue",0,f,w.afterSetFilter);w.addGetterSetter(K,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(K,"blue",0,f,w.afterSetFilter),w.addGetterSetter(K,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));w.addGetterSetter(K,"threshold",.5,p(),w.afterSetFilter);return te.Util._assign(te,{Arc:ee,Arrow:se,Circle:oe,Ellipse:he,Image:le,Label:ve,Tag:me,Line:ae,Path:ne,Rect:_e,RegularPolygon:ye,Ring:be,Sprite:Se,Star:we,Text:Oe,TextPath:Be,Transformer:Ke,Wedge:Qe,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,r,a,n,s,o,h,l,d,c,g,u,f,p,v,m,_,y,x,b,S,w,C,k,P=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,R=A-1,E=e+1,L=E*(E+1)/2,D=new Je,O=null,I=D,F=null,N=null,B=Ze[e],z=$e[e];for(a=1;a<M;a++)I=I.next=new Je,a===E&&(O=I);for(I.next=D,h=o=0,r=0;r<A;r++){for(m=_=y=x=l=d=c=g=0,u=E*(b=P[o]),f=E*(S=P[o+1]),p=E*(w=P[o+2]),v=E*(C=P[o+3]),l+=L*b,d+=L*S,c+=L*w,g+=L*C,I=D,a=0;a<E;a++)I.r=b,I.g=S,I.b=w,I.a=C,I=I.next;for(a=1;a<E;a++)n=o+((G<a?G:a)<<2),l+=(I.r=b=P[n])*(k=E-a),d+=(I.g=S=P[n+1])*k,c+=(I.b=w=P[n+2])*k,g+=(I.a=C=P[n+3])*k,m+=b,_+=S,y+=w,x+=C,I=I.next;for(F=D,N=O,i=0;i<T;i++)P[o+3]=C=g*B>>z,0!==C?(C=255/C,P[o]=(l*B>>z)*C,P[o+1]=(d*B>>z)*C,P[o+2]=(c*B>>z)*C):P[o]=P[o+1]=P[o+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=h+((n=i+e+1)<G?n:G)<<2,l+=m+=F.r=P[n],d+=_+=F.g=P[n+1],c+=y+=F.b=P[n+2],g+=x+=F.a=P[n+3],F=F.next,u+=b=N.r,f+=S=N.g,p+=w=N.b,v+=C=N.a,m-=b,_-=S,y-=w,x-=C,N=N.next,o+=4;h+=T}for(i=0;i<T;i++){for(_=y=x=m=d=c=g=l=0,u=E*(b=P[o=i<<2]),f=E*(S=P[o+1]),p=E*(w=P[o+2]),v=E*(C=P[o+3]),l+=L*b,d+=L*S,c+=L*w,g+=L*C,I=D,a=0;a<E;a++)I.r=b,I.g=S,I.b=w,I.a=C,I=I.next;for(s=T,a=1;a<=e;a++)o=s+i<<2,l+=(I.r=b=P[o])*(k=E-a),d+=(I.g=S=P[o+1])*k,c+=(I.b=w=P[o+2])*k,g+=(I.a=C=P[o+3])*k,m+=b,_+=S,y+=w,x+=C,I=I.next,a<R&&(s+=T);for(o=i,F=D,N=O,r=0;r<A;r++)P[3+(n=o<<2)]=C=g*B>>z,C>0?(C=255/C,P[n]=(l*B>>z)*C,P[n+1]=(d*B>>z)*C,P[n+2]=(c*B>>z)*C):P[n]=P[n+1]=P[n+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=i+((n=r+E)<R?n:R)*T<<2,l+=m+=F.r=P[n],d+=_+=F.g=P[n+1],c+=y+=F.b=P[n+2],g+=x+=F.a=P[n+3],F=F.next,u+=b=N.r,f+=S=N.g,p+=w=N.b,v+=C=N.a,m-=b,_-=S,y-=w,x-=C,N=N.next,o+=T}}(t,e)},Brighten:function(t){var e,i=255*this.brightness(),r=t.data,a=r.length;for(e=0;e<a;e+=4)r[e]+=i,r[e+1]+=i,r[e+2]+=i},Contrast:function(t){var e,i=Math.pow((this.contrast()+100)/100,2),r=t.data,a=r.length,n=150,s=150,o=150;for(e=0;e<a;e+=4)n=r[e],s=r[e+1],o=r[e+2],n/=255,n-=.5,n*=i,n+=.5,s/=255,s-=.5,s*=i,s+=.5,o/=255,o-=.5,o*=i,o+=.5,n=(n*=255)<0?0:n>255?255:n,s=(s*=255)<0?0:s>255?255:s,o=(o*=255)<0?0:o>255?255:o,r[e]=n,r[e+1]=s,r[e+2]=o},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),r=this.embossDirection(),a=this.embossBlend(),n=0,s=0,o=t.data,h=t.width,l=t.height,d=4*h,c=l;switch(r){case"top-left":n=-1,s=-1;break;case"top":n=-1,s=0;break;case"top-right":n=-1,s=1;break;case"right":n=0,s=1;break;case"bottom-right":n=1,s=1;break;case"bottom":n=1,s=0;break;case"bottom-left":n=1,s=-1;break;case"left":n=0,s=-1;break;default:g.error("Unknown emboss direction: "+r)}do{var u=(c-1)*d,f=n;c+f<1&&(f=0),c+f>l&&(f=0);var p=(c-1+f)*h*4,v=h;do{var m=u+4*(v-1),_=s;v+_<1&&(_=0),v+_>h&&(_=0);var y=p+4*(v-1+_),x=o[m]-o[y],b=o[m+1]-o[y+1],S=o[m+2]-o[y+2],w=x,C=w>0?w:-w;if((b>0?b:-b)>C&&(w=b),(S>0?S:-S)>C&&(w=S),w*=e,a){var k=o[m]+w,P=o[m+1]+w,T=o[m+2]+w;o[m]=k>255?255:k<0?0:k,o[m+1]=P>255?255:P<0?0:P,o[m+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),o[m]=o[m+1]=o[m+2]=A}}while(--v)}while(--c)},Enhance:function(t){var e,i,r,a,n=t.data,s=n.length,o=n[0],h=o,l=n[1],d=l,c=n[2],g=c,u=this.enhance();if(0!==u){for(a=0;a<s;a+=4)(e=n[a+0])<o?o=e:e>h&&(h=e),(i=n[a+1])<l?l=i:i>d&&(d=i),(r=n[a+2])<c?c=r:r>g&&(g=r);var f,p,v,m,_,y,x,b,S;for(h===o&&(h=255,o=0),d===l&&(d=255,l=0),g===c&&(g=255,c=0),u>0?(p=h+u*(255-h),v=o-u*(o-0),_=d+u*(255-d),y=l-u*(l-0),b=g+u*(255-g),S=c-u*(c-0)):(p=h+u*(h-(f=.5*(h+o))),v=o+u*(o-f),_=d+u*(d-(m=.5*(d+l))),y=l+u*(l-m),b=g+u*(g-(x=.5*(g+c))),S=c+u*(c-x)),a=0;a<s;a+=4)n[a+0]=ti(n[a+0],o,h,v,p),n[a+1]=ti(n[a+1],l,d,y,_),n[a+2]=ti(n[a+2],c,g,S,b)}},Grayscale:function(t){var e,i,r=t.data,a=r.length;for(e=0;e<a;e+=4)i=.34*r[e]+.5*r[e+1]+.16*r[e+2],r[e]=i,r[e+1]=i,r[e+2]=i},HSL:function(t){var e,i,r,a,n,s=t.data,o=s.length,h=Math.pow(2,this.saturation()),l=Math.abs(this.hue()+360)%360,d=127*this.luminance(),c=1*h*Math.cos(l*Math.PI/180),g=1*h*Math.sin(l*Math.PI/180),u=.299+.701*c+.167*g,f=.587-.587*c+.33*g,p=.114-.114*c-.497*g,v=.299-.299*c-.328*g,m=.587+.413*c+.035*g,_=.114-.114*c+.293*g,y=.299-.3*c+1.25*g,x=.587-.586*c-1.05*g,b=.114+.886*c-.2*g;for(e=0;e<o;e+=4)i=s[e+0],r=s[e+1],a=s[e+2],n=s[e+3],s[e+0]=u*i+f*r+p*a+d,s[e+1]=v*i+m*r+_*a+d,s[e+2]=y*i+x*r+b*a+d,s[e+3]=n},HSV:function(t){var e,i,r,a,n,s=t.data,o=s.length,h=Math.pow(2,this.value()),l=Math.pow(2,this.saturation()),d=Math.abs(this.hue()+360)%360,c=h*l*Math.cos(d*Math.PI/180),g=h*l*Math.sin(d*Math.PI/180),u=.299*h+.701*c+.167*g,f=.587*h-.587*c+.33*g,p=.114*h-.114*c-.497*g,v=.299*h-.299*c-.328*g,m=.587*h+.413*c+.035*g,_=.114*h-.114*c+.293*g,y=.299*h-.3*c+1.25*g,x=.587*h-.586*c-1.05*g,b=.114*h+.886*c-.2*g;for(e=0;e<o;e+=4)i=s[e+0],r=s[e+1],a=s[e+2],n=s[e+3],s[e+0]=u*i+f*r+p*a,s[e+1]=v*i+m*r+_*a,s[e+2]=y*i+x*r+b*a,s[e+3]=n},Invert:function(t){var e,i=t.data,r=i.length;for(e=0;e<r;e+=4)i[e]=255-i[e],i[e+1]=255-i[e+1],i[e+2]=255-i[e+2]},Kaleidoscope:function(t){var e,i,r,a,n,s,o,h,l,d=t.width,c=t.height,u=Math.round(this.kaleidoscopePower()),f=Math.round(this.kaleidoscopeAngle()),p=Math.floor(d*(f%360)/360);if(!(u<1)){var v=g.createCanvasElement();v.width=d,v.height=c;var m=v.getContext("2d").getImageData(0,0,d,c);!function(t,e,i){var r,a,n,s,o=t.data,h=e.data,l=t.width,d=t.height,c=i.polarCenterX||l/2,g=i.polarCenterY||d/2,u=0,f=0,p=0,v=0,m=Math.sqrt(c*c+g*g);a=l-c,n=d-g,m=(s=Math.sqrt(a*a+n*n))>m?s:m;var _,y,x,b,S=d,w=l,C=360/w*Math.PI/180;for(y=0;y<w;y+=1)for(x=Math.sin(y*C),b=Math.cos(y*C),_=0;_<S;_+=1)a=Math.floor(c+m*_/S*b),u=o[0+(r=4*((n=Math.floor(g+m*_/S*x))*l+a))],f=o[r+1],p=o[r+2],v=o[r+3],h[0+(r=4*(y+_*l))]=u,h[r+1]=f,h[r+2]=p,h[r+3]=v}(t,m,{polarCenterX:d/2,polarCenterY:c/2});for(var _=d/Math.pow(2,u);_<=8;)_*=2,u-=1;var y=_=Math.ceil(_),x=0,b=y,S=1;for(p+_>d&&(x=y,b=0,S=-1),i=0;i<c;i+=1)for(e=x;e!==b;e+=S)h=4*(d*i+Math.round(e+p)%d),a=m.data[h+0],n=m.data[h+1],s=m.data[h+2],o=m.data[h+3],l=4*(d*i+e),m.data[l+0]=a,m.data[l+1]=n,m.data[l+2]=s,m.data[l+3]=o;for(i=0;i<c;i+=1)for(y=Math.floor(_),r=0;r<u;r+=1){for(e=0;e<y+1;e+=1)h=4*(d*i+e),a=m.data[h+0],n=m.data[h+1],s=m.data[h+2],o=m.data[h+3],l=4*(d*i+2*y-e-1),m.data[l+0]=a,m.data[l+1]=n,m.data[l+2]=s,m.data[l+3]=o;y*=2}!function(t,e,i){var r,a,n,s,o,h,l=t.data,d=e.data,c=t.width,g=t.height,u=i.polarCenterX||c/2,f=i.polarCenterY||g/2,p=0,v=0,m=0,_=0,y=Math.sqrt(u*u+f*f);a=c-u,n=g-f,y=(h=Math.sqrt(a*a+n*n))>y?h:y;var x,b,S,w=g,C=c,k=i.polarRotation||0;for(a=0;a<c;a+=1)for(n=0;n<g;n+=1)s=a-u,o=n-f,x=Math.sqrt(s*s+o*o)*w/y,b=(b=(180*Math.atan2(o,s)/Math.PI+360+k)%360)*C/360,S=Math.floor(b),p=l[0+(r=4*(Math.floor(x)*c+S))],v=l[r+1],m=l[r+2],_=l[r+3],d[0+(r=4*(n*c+a))]=p,d[r+1]=v,d[r+2]=m,d[r+3]=_}(m,t,{polarRotation:0})}},Mask:function(t){var e=function(t,e){var i=ei(t,0,0),r=ei(t,t.width-1,0),a=ei(t,0,t.height-1),n=ei(t,t.width-1,t.height-1),s=e||10;if(ii(i,r)<s&&ii(r,n)<s&&ii(n,a)<s&&ii(a,i)<s){for(var o=function(t){for(var e=[0,0,0],i=0;i<t.length;i++)e[0]+=t[i][0],e[1]+=t[i][1],e[2]+=t[i][2];return e[0]/=t.length,e[1]/=t.length,e[2]/=t.length,e}([r,i,n,a]),h=[],l=0;l<t.width*t.height;l++){var d=ii(o,[t.data[4*l],t.data[4*l+1],t.data[4*l+2]]);h[l]=d<s?0:255}return h}}(t,this.threshold());return e&&function(t,e){for(var i=0;i<t.width*t.height;i++)t.data[4*i+3]=e[i]}(t,e=function(t,e,i){for(var r=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=d}return s}(e=function(t,e,i){for(var r=[1,1,1,1,1,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=d>=1020?255:0}return s}(e=function(t,e,i){for(var r=[1,1,1,1,0,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o<i;o++)for(var h=0;h<e;h++){for(var l=o*e+h,d=0,c=0;c<a;c++)for(var g=0;g<a;g++){var u=o+c-n,f=h+g-n;if(u>=0&&u<i&&f>=0&&f<e){var p=r[c*a+g];d+=t[u*e+f]*p}}s[l]=2040===d?255:0}return s}(e,t.width,t.height),t.width,t.height),t.width,t.height)),t},Noise:function(t){var e,i=255*this.noise(),r=t.data,a=r.length,n=i/2;for(e=0;e<a;e+=4)r[e+0]+=n-2*n*Math.random(),r[e+1]+=n-2*n*Math.random(),r[e+2]+=n-2*n*Math.random()},Pixelate:function(t){var e,i,r,a,n,s,o,h,l,d,c,u,f,p,v=Math.ceil(this.pixelSize()),m=t.width,_=t.height,y=Math.ceil(m/v),x=Math.ceil(_/v),b=t.data;if(v<=0)g.error("pixelSize value can not be <= 0");else for(u=0;u<y;u+=1)for(f=0;f<x;f+=1){for(a=0,n=0,s=0,o=0,l=(h=u*v)+v,c=(d=f*v)+v,p=0,e=h;e<l;e+=1)if(!(e>=m))for(i=d;i<c;i+=1)i>=_||(a+=b[(r=4*(m*i+e))+0],n+=b[r+1],s+=b[r+2],o+=b[r+3],p+=1);for(a/=p,n/=p,s/=p,o/=p,e=h;e<l;e+=1)if(!(e>=m))for(i=d;i<c;i+=1)i>=_||(b[(r=4*(m*i+e))+0]=a,b[r+1]=n,b[r+2]=s,b[r+3]=o)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,r=t.data,a=r.length,n=255/i;for(e=0;e<a;e+=1)r[e]=Math.floor(r[e]/n)*n},RGB:function(t){var e,i,r=t.data,a=r.length,n=this.red(),s=this.green(),o=this.blue();for(e=0;e<a;e+=4)i=(.34*r[e]+.5*r[e+1]+.16*r[e+2])/255,r[e]=i*n,r[e+1]=i*s,r[e+2]=i*o,r[e+3]=r[e+3]},RGBA:function(t){var e,i,r=t.data,a=r.length,n=this.red(),s=this.green(),o=this.blue(),h=this.alpha();for(e=0;e<a;e+=4)i=1-h,r[e]=n*h+r[e]*i,r[e+1]=s*h+r[e+1]*i,r[e+2]=o*h+r[e+2]*i},Sepia:function(t){var e,i,r,a,n=t.data,s=n.length;for(e=0;e<s;e+=4)i=n[e+0],r=n[e+1],a=n[e+2],n[e+0]=Math.min(255,.393*i+.769*r+.189*a),n[e+1]=Math.min(255,.349*i+.686*r+.168*a),n[e+2]=Math.min(255,.272*i+.534*r+.131*a)},Solarize:function(t){var e=t.data,i=t.width,r=4*i,a=t.height;do{var n=(a-1)*r,s=i;do{var o=n+4*(s-1),h=e[o],l=e[o+1],d=e[o+2];h>127&&(h=255-h),l>127&&(l=255-l),d>127&&(d=255-d),e[o]=h,e[o+1]=l,e[o+2]=d}while(--s)}while(--a)},Threshold:function(t){var e,i=255*this.threshold(),r=t.data,a=r.length;for(e=0;e<a;e+=1)r[e]=r[e]<i?0:255}}})}));
\ No newline at end of file
diff --git a/package.json b/package.json
index e099cc8d..8283b115 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
     "test:node": "env TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha -r ts-node/register test/unit/**/*.ts --exit && npm run test:import",
     "test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html",
-    "tsc": "tsc && tsc --build ./tsconfig-cmj.json",
+    "tsc": "tsc --removeComments && tsc --build ./tsconfig-cmj.json",
     "rollup": "rollup -c",
     "clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./cmj && rm -rf ./test-build",
     "watch": "rollup -c -w",
diff --git a/rollup.config.js b/rollup.config.js
index 6a97379f..4edbd360 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -25,7 +25,11 @@ export default {
     // Allow json resolution
     // json(),
     // Compile TypeScript files
-    typescript({ useTsconfigDeclarationDir: true, abortOnError: false }),
+    typescript({
+      useTsconfigDeclarationDir: true,
+      abortOnError: false,
+      removeComments: false,
+    }),
     // // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
     // commonjs(),
     // // Allow node_modules resolution, so you can use 'external' to control
diff --git a/tsconfig.json b/tsconfig.json
index ddfdf78a..f4c2c6bc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "lib": ["ES2015", "dom"],
     "moduleResolution": "node",
     "declaration": true,
-    "removeComments": true
+    "removeComments": false
     // "noImplicitAny": true,
     // "strict": true
   },