Changeset 0c6b92a for imaps-frontend/node_modules/konva/konva.js

Timestamp:

12/12/24 17:06:06 (5 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

d565449

Message:

Pred finalna verzija

File:

• imaps-frontend/node_modules/konva/konva.js (modified) (367 diffs)

imaps-frontend/node_modules/konva/konva.js

@@ -6 +6 @@
 
   /*
-   * Konva JavaScript Framework v9.3.14
+   * Konva JavaScript Framework v9.3.16
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Jul 16 2024
+   * Date: Mon Oct 21 2024
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
@@ -36 +36 @@
   const Konva$2 = {
       _global: glob,
-      version: '9.3.14',
+      version: '9.3.16',
       isBrowser: detectBrowser(),
       isUnminified: /param/.test(function (param) { }.toString()),
@@ -250 +250 @@
        */
       point(point) {
-          var m = this.m;
+          const m = this.m;
           return {
               x: m[0] * point.x + m[2] * point.y + m[4],
@@ -292 +292 @@
        */
       rotate(rad) {
-          var c = Math.cos(rad);
-          var s = Math.sin(rad);
-          var m11 = this.m[0] * c + this.m[2] * s;
-          var m12 = this.m[1] * c + this.m[3] * s;
-          var m21 = this.m[0] * -s + this.m[2] * c;
-          var m22 = this.m[1] * -s + this.m[3] * c;
+          const c = Math.cos(rad);
+          const s = Math.sin(rad);
+          const m11 = this.m[0] * c + this.m[2] * s;
+          const m12 = this.m[1] * c + this.m[3] * s;
+          const m21 = this.m[0] * -s + this.m[2] * c;
+          const m22 = this.m[1] * -s + this.m[3] * c;
           this.m[0] = m11;
           this.m[1] = m12;
@@ -325 +325 @@
        */
       skew(sx, sy) {
-          var m11 = this.m[0] + this.m[2] * sy;
-          var m12 = this.m[1] + this.m[3] * sy;
-          var m21 = this.m[2] + this.m[0] * sx;
-          var m22 = this.m[3] + this.m[1] * sx;
+          const m11 = this.m[0] + this.m[2] * sy;
+          const m12 = this.m[1] + this.m[3] * sy;
+          const m21 = this.m[2] + this.m[0] * sx;
+          const m22 = this.m[3] + this.m[1] * sx;
           this.m[0] = m11;
           this.m[1] = m12;
@@ -343 +343 @@
        */
       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];
-          var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
-          var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
-          var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
-          var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
+          const m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
+          const m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
+          const m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
+          const m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
+          const dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
+          const dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
           this.m[0] = m11;
           this.m[1] = m12;
@@ -364 +364 @@
        */
       invert() {
-          var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
-          var m0 = this.m[3] * d;
-          var m1 = -this.m[1] * d;
-          var m2 = -this.m[2] * d;
-          var m3 = this.m[0] * d;
-          var m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);
-          var m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);
+          const d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
+          const m0 = this.m[3] * d;
+          const m1 = -this.m[1] * d;
+          const m2 = -this.m[2] * d;
+          const m3 = this.m[0] * d;
+          const m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);
+          const m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);
           this.m[0] = m0;
           this.m[1] = m1;
@@ -394 +394 @@
        */
       decompose() {
-          var a = this.m[0];
-          var b = this.m[1];
-          var c = this.m[2];
-          var d = this.m[3];
-          var e = this.m[4];
-          var f = this.m[5];
-          var delta = a * d - b * c;
-          let result = {
+          const a = this.m[0];
+          const b = this.m[1];
+          const c = this.m[2];
+          const d = this.m[3];
+          const e = this.m[4];
+          const f = this.m[5];
+          const delta = a * d - b * c;
+          const result = {
               x: e,
               y: f,
@@ -412 +412 @@
           // Apply the QR-like decomposition.
           if (a != 0 || b != 0) {
-              var r = Math.sqrt(a * a + b * b);
+              const r = Math.sqrt(a * a + b * b);
               result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
               result.scaleX = r;
@@ -420 +420 @@
           }
           else if (c != 0 || d != 0) {
-              var s = Math.sqrt(c * c + d * d);
+              const s = Math.sqrt(c * c + d * d);
               result.rotation =
                   Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
@@ -434 +434 @@
   }
   // 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 = {
+  let 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],
@@ -628 +628 @@
               return false;
           }
-          var firstChar = selector[0];
+          const firstChar = selector[0];
           return (firstChar === '#' ||
               firstChar === '.' ||
@@ -659 +659 @@
       },
       createCanvasElement() {
-          var canvas = document.createElement('canvas');
+          const canvas = document.createElement('canvas');
           // on some environments canvas.style is readonly
           try {
@@ -683 +683 @@
       _urlToImage(url, callback) {
           // if arg is a string, then it's a data url
-          var imageObj = Util.createImageElement();
+          const imageObj = Util.createImageElement();
           imageObj.onload = function () {
               callback(imageObj);
@@ -694 +694 @@
       _hexToRgb(hex) {
           hex = hex.replace(HASH$1, EMPTY_STRING$1);
-          var bigint = parseInt(hex, 16);
+          const bigint = parseInt(hex, 16);
           return {
               r: (bigint >> 16) & 255,
@@ -709 +709 @@
        */
       getRandomColor() {
-          var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
+          let randColor = ((Math.random() * 0xffffff) << 0).toString(16);
           while (randColor.length < 6) {
               randColor = ZERO + randColor;
@@ -727 +727 @@
        */
       getRGB(color) {
-          var rgb;
+          let rgb;
           // color string
           if (color in COLORS) {
@@ -774 +774 @@
       // Parse named css color. Like "green"
       _namedColorToRBA(str) {
-          var c = COLORS[str.toLowerCase()];
+          const c = COLORS[str.toLowerCase()];
           if (!c) {
               return null;
@@ -789 +789 @@
           if (str.indexOf('rgb(') === 0) {
               str = str.match(/rgb\(([^)]+)\)/)[1];
-              var parts = str.split(/ *, */).map(Number);
+              const parts = str.split(/ *, */).map(Number);
               return {
                   r: parts[0],
@@ -802 +802 @@
           if (str.indexOf('rgba(') === 0) {
               str = str.match(/rgba\(([^)]+)\)/)[1];
-              var parts = str.split(/ *, */).map((n, index) => {
+              const parts = str.split(/ *, */).map((n, index) => {
                   if (n.slice(-1) === '%') {
                       return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
@@ -935 +935 @@
       },
       cloneObject(obj) {
-          var retObj = {};
-          for (var key in obj) {
+          const retObj = {};
+          for (const key in obj) {
               if (this._isPlainObject(obj[key])) {
                   retObj[key] = this.cloneObject(obj[key]);
@@ -985 +985 @@
       },
       each(obj, func) {
-          for (var key in obj) {
+          for (const key in obj) {
               func(key, obj[key]);
           }
@@ -993 +993 @@
       },
       _getProjectionToSegment(x1, y1, x2, y2, x3, y3) {
-          var x, y, dist;
-          var pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+          let x, y, dist;
+          const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
           if (pd2 == 0) {
               x = x1;
@@ -1001 +1001 @@
           }
           else {
-              var u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;
+              const u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;
               if (u < 0) {
                   x = x1;
@@ -1023 +1023 @@
       // line might be closed
       _getProjectionToLine(pt, line, isClosed) {
-          var pc = Util.cloneObject(pt);
-          var dist = Number.MAX_VALUE;
+          const pc = Util.cloneObject(pt);
+          let dist = Number.MAX_VALUE;
           line.forEach(function (p1, i) {
               if (!isClosed && i === line.length - 1) {
                   return;
               }
-              var p2 = line[(i + 1) % line.length];
-              var proj = Util._getProjectionToSegment(p1.x, p1.y, p2.x, p2.y, pt.x, pt.y);
-              var px = proj[0], py = proj[1], pdist = proj[2];
+              const p2 = line[(i + 1) % line.length];
+              const proj = Util._getProjectionToSegment(p1.x, p1.y, p2.x, p2.y, pt.x, pt.y);
+              const px = proj[0], py = proj[1], pdist = proj[2];
               if (pdist < dist) {
                   pc.x = px;
@@ -1041 +1041 @@
       },
       _prepareArrayForTween(startArray, endArray, isClosed) {
-          var n, start = [], end = [];
+          let n, start = [], end = [];
           if (startArray.length > endArray.length) {
-              var temp = endArray;
+              const temp = endArray;
               endArray = startArray;
               startArray = temp;
@@ -1059 +1059 @@
               });
           }
-          var newStart = [];
+          const newStart = [];
           end.forEach(function (point) {
-              var pr = Util._getProjectionToLine(point, start, isClosed);
+              const pr = Util._getProjectionToLine(point, start, isClosed);
               newStart.push(pr.x);
               newStart.push(pr.y);
@@ -1068 +1068 @@
       },
       _prepareToStringify(obj) {
-          var desc;
+          let desc;
           obj.visitedByCircularReferenceRemoval = true;
-          for (var key in obj) {
+          for (const key in obj) {
               if (!(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')) {
                   continue;
@@ -1098 +1098 @@
       // very simplified version of Object.assign
       _assign(target, source) {
-          for (var key in source) {
+          for (const key in source) {
               target[key] = source[key];
           }
@@ -1187 +1187 @@
       if (Konva$2.isUnminified) {
           return function (val, attr) {
-              let isNumber = Util._isNumber(val);
-              let isValidArray = Util._isArray(val) && val.length == noOfElements;
+              const isNumber = Util._isNumber(val);
+              const isValidArray = Util._isArray(val) && val.length == noOfElements;
               if (!isNumber && !isValidArray) {
                   Util.warn(_formatValue(val) +
@@ -1204 +1204 @@
       if (Konva$2.isUnminified) {
           return function (val, attr) {
-              var isNumber = Util._isNumber(val);
-              var isAuto = val === 'auto';
+              const isNumber = Util._isNumber(val);
+              const isAuto = val === 'auto';
               if (!(isNumber || isAuto)) {
                   Util.warn(_formatValue(val) +
@@ -1278 +1278 @@
       if (Konva$2.isUnminified) {
           return function (val, attr) {
-              var isBool = val === true || val === false;
+              const isBool = val === true || val === false;
               if (!isBool) {
                   Util.warn(_formatValue(val) +
@@ -1308 +1308 @@
   }
 
-  var GET = 'get', SET$1 = 'set';
+  const GET = 'get', SET$1 = 'set';
   const Factory = {
       addGetterSetter(constructor, attr, def, validator, after) {
@@ -1316 +1316 @@
       },
       addGetter(constructor, attr, def) {
-          var method = GET + Util._capitalize(attr);
+          const method = GET + Util._capitalize(attr);
           constructor.prototype[method] =
               constructor.prototype[method] ||
                   function () {
-                      var val = this.attrs[attr];
+                      const val = this.attrs[attr];
                       return val === undefined ? def : val;
                   };
       },
       addSetter(constructor, attr, validator, after) {
-          var method = SET$1 + Util._capitalize(attr);
+          const method = SET$1 + Util._capitalize(attr);
           if (!constructor.prototype[method]) {
               Factory.overWriteSetter(constructor, attr, validator, after);
@@ -1331 +1331 @@
       },
       overWriteSetter(constructor, attr, validator, after) {
-          var method = SET$1 + Util._capitalize(attr);
+          const method = SET$1 + Util._capitalize(attr);
           constructor.prototype[method] = function (val) {
               if (validator && val !== undefined && val !== null) {
@@ -1344 +1344 @@
       },
       addComponentsGetterSetter(constructor, attr, components, validator, after) {
-          var len = components.length, capitalize = Util._capitalize, getter = GET + capitalize(attr), setter = SET$1 + capitalize(attr), n, component;
+          let len = components.length, capitalize = Util._capitalize, getter = GET + capitalize(attr), setter = SET$1 + capitalize(attr), n, component;
           // getter
           constructor.prototype[getter] = function () {
-              var ret = {};
+              const ret = {};
               for (n = 0; n < len; n++) {
                   component = components[n];
@@ -1354 +1354 @@
               return ret;
           };
-          var basicValidator = getComponentValidator(components);
+          const basicValidator = getComponentValidator(components);
           // setter
           constructor.prototype[setter] = function (val) {
-              var oldVal = this.attrs[attr], key;
+              let oldVal = this.attrs[attr], key;
               if (validator) {
                   val = validator.call(this, val);
@@ -1384 +1384 @@
       },
       addOverloadedGetterSetter(constructor, attr) {
-          var capitalizedAttr = Util._capitalize(attr), setter = SET$1 + capitalizedAttr, getter = GET + capitalizedAttr;
+          const capitalizedAttr = Util._capitalize(attr), setter = SET$1 + capitalizedAttr, getter = GET + capitalizedAttr;
           constructor.prototype[attr] = function () {
               // setting
@@ -1397 +1397 @@
       addDeprecatedGetterSetter(constructor, attr, def, validator) {
           Util.error('Adding deprecated ' + attr);
-          var method = GET + Util._capitalize(attr);
-          var message = attr +
+          const method = GET + Util._capitalize(attr);
+          const message = attr +
               ' property is deprecated and will be removed soon. Look at Konva change log for more information.';
           constructor.prototype[method] = function () {
               Util.error(message);
-              var val = this.attrs[attr];
+              const val = this.attrs[attr];
               return val === undefined ? def : val;
           };
@@ -1412 +1412 @@
       backCompat(constructor, methods) {
           Util.each(methods, function (oldMethodName, newMethodName) {
-              var method = constructor.prototype[newMethodName];
-              var oldGetter = GET + Util._capitalize(oldMethodName);
-              var oldSetter = SET$1 + Util._capitalize(oldMethodName);
+              const method = constructor.prototype[newMethodName];
+              const oldGetter = GET + Util._capitalize(oldMethodName);
+              const oldSetter = SET$1 + Util._capitalize(oldMethodName);
               function deprecated() {
                   method.apply(this, arguments);
@@ -1434 +1434 @@
 
   function simplifyArray(arr) {
-      var retArr = [], len = arr.length, util = Util, n, val;
+      let retArr = [], len = arr.length, util = Util, n, val;
       for (n = 0; n < len; n++) {
           val = arr[n];
@@ -1447 +1447 @@
       return retArr;
   }
-  var COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', 
+  const COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', 
   // EMPTY_STRING = '',
   EQUALS = '=', 
@@ -1485 +1485 @@
       'translate',
   ];
-  var CONTEXT_PROPERTIES = [
+  const CONTEXT_PROPERTIES = [
       'fillStyle',
       'strokeStyle',
@@ -1582 +1582 @@
       }
       getTrace(relaxed, rounded) {
-          var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
+          let traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
           for (n = 0; n < len; n++) {
               trace = traceArr[n];
@@ -1620 +1620 @@
       }
       _trace(str) {
-          var traceArr = this.traceArr, len;
+          let traceArr = this.traceArr, len;
           traceArr.push(str);
           len = traceArr.length;
@@ -1633 +1633 @@
        */
       reset() {
-          var pixelRatio = this.getCanvas().getPixelRatio();
+          const pixelRatio = this.getCanvas().getPixelRatio();
           this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
       }
@@ -1656 +1656 @@
        */
       clear(bounds) {
-          var canvas = this.getCanvas();
+          const canvas = this.getCanvas();
           if (bounds) {
               this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
@@ -1671 +1671 @@
       }
       _applyOpacity(shape) {
-          var absOpacity = shape.getAbsoluteOpacity();
+          const absOpacity = shape.getAbsoluteOpacity();
           if (absOpacity !== 1) {
               this.setAttr('globalAlpha', absOpacity);
@@ -1743 +1743 @@
        */
       createImageData(width, height) {
-          var a = arguments;
+          const a = arguments;
           if (a.length === 2) {
               return this._context.createImageData(width, height);
@@ -1782 +1782 @@
       drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
           // this._context.drawImage(...arguments);
-          var a = arguments, _context = this._context;
+          const a = arguments, _context = this._context;
           if (a.length === 3) {
               _context.drawImage(image, sx, sy);
@@ -2015 +2015 @@
       }
       _enableTrace() {
-          var that = this, len = CONTEXT_METHODS.length, origSetter = this.setAttr, n, args;
+          let 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;
+          const func = function (methodName) {
+              let origMethod = that[methodName], ret;
               that[methodName] = function () {
                   args = simplifyArray(Array.prototype.slice.call(arguments, 0));
@@ -2036 +2036 @@
           that.setAttr = function () {
               origSetter.apply(that, arguments);
-              var prop = arguments[0];
-              var val = arguments[1];
+              const prop = arguments[0];
+              let val = arguments[1];
               if (prop === 'shadowOffsetX' ||
                   prop === 'shadowOffsetY' ||
@@ -2051 +2051 @@
       _applyGlobalCompositeOperation(node) {
           const op = node.attrs.globalCompositeOperation;
-          var def = !op || op === 'source-over';
+          const def = !op || op === 'source-over';
           if (!def) {
               this.setAttr('globalCompositeOperation', op);
@@ -2075 +2075 @@
       }
       _fillColor(shape) {
-          var fill = shape.fill();
+          const fill = shape.fill();
           this.setAttr('fillStyle', fill);
           shape._fillFunc(this);
@@ -2084 +2084 @@
       }
       _fillLinearGradient(shape) {
-          var grd = shape._getLinearGradient();
+          const grd = shape._getLinearGradient();
           if (grd) {
               this.setAttr('fillStyle', grd);
@@ -2137 +2137 @@
           if (colorStops) {
               // build color stops
-              for (var n = 0; n < colorStops.length; n += 2) {
+              for (let n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -2144 +2144 @@
       }
       _stroke(shape) {
-          var dash = shape.dash(), 
+          const dash = shape.dash(), 
           // ignore strokeScaleEnabled for Text
           strokeScaleEnabled = shape.getStrokeScaleEnabled();
@@ -2150 +2150 @@
               if (!strokeScaleEnabled) {
                   this.save();
-                  var pixelRatio = this.getCanvas().getPixelRatio();
+                  const pixelRatio = this.getCanvas().getPixelRatio();
                   this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
               }
@@ -2162 +2162 @@
                   this.setAttr('shadowColor', 'rgba(0,0,0,0)');
               }
-              var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
+              const hasLinearGradient = shape.getStrokeLinearGradientColorStops();
               if (hasLinearGradient) {
                   this._strokeLinearGradient(shape);
@@ -2177 +2177 @@
       _applyShadow(shape) {
           var _a, _b, _c;
-          var color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
+          const color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
               x: 0,
               y: 0,
@@ -2211 +2211 @@
               if (!strokeScaleEnabled) {
                   this.save();
-                  var pixelRatio = this.getCanvas().getPixelRatio();
+                  const pixelRatio = this.getCanvas().getPixelRatio();
                   this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
               }
               this._applyLineCap(shape);
-              var hitStrokeWidth = shape.hitStrokeWidth();
-              var strokeWidth = hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
+              const hitStrokeWidth = shape.hitStrokeWidth();
+              const strokeWidth = hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
               this.setAttr('lineWidth', strokeWidth);
               this.setAttr('strokeStyle', shape.colorKey);
@@ -2228 +2228 @@
 
   // calculate pixel ratio
-  var _pixelRatio;
+  let _pixelRatio;
   function getDevicePixelRatio() {
       if (_pixelRatio) {
           return _pixelRatio;
       }
-      var canvas = Util.createCanvasElement();
-      var context = canvas.getContext('2d');
+      const canvas = Util.createCanvasElement();
+      const context = canvas.getContext('2d');
       _pixelRatio = (function () {
-          var devicePixelRatio = Konva$2._global.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio ||
+          const devicePixelRatio = Konva$2._global.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio ||
               context.mozBackingStorePixelRatio ||
               context.msBackingStorePixelRatio ||
@@ -2264 +2264 @@
           this.height = 0;
           this.isCache = false;
-          var conf = config || {};
-          var pixelRatio = conf.pixelRatio || Konva$2.pixelRatio || getDevicePixelRatio();
+          const conf = config || {};
+          const pixelRatio = conf.pixelRatio || Konva$2.pixelRatio || getDevicePixelRatio();
           this.pixelRatio = pixelRatio;
           this._canvas = Util.createCanvasElement();
@@ -2290 +2290 @@
       }
       setPixelRatio(pixelRatio) {
-          var previousRatio = this.pixelRatio;
+          const previousRatio = this.pixelRatio;
           this.pixelRatio = pixelRatio;
           this.setSize(this.getWidth() / previousRatio, this.getHeight() / previousRatio);
@@ -2298 +2298 @@
           this.width = this._canvas.width = width * this.pixelRatio;
           this._canvas.style.width = width + 'px';
-          var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
+          const pixelRatio = this.pixelRatio, _context = this.getContext()._context;
           _context.scale(pixelRatio, pixelRatio);
       }
@@ -2305 +2305 @@
           this.height = this._canvas.height = height * this.pixelRatio;
           this._canvas.style.height = height + 'px';
-          var pixelRatio = this.pixelRatio, _context = this.getContext()._context;
+          const pixelRatio = this.pixelRatio, _context = this.getContext()._context;
           _context.scale(pixelRatio, pixelRatio);
       }
@@ -2386 +2386 @@
   const DD = {
       get isDragging() {
-          var flag = false;
+          let flag = false;
           DD._dragElements.forEach((elem) => {
               if (elem.dragStatus === 'dragging') {
@@ -2397 +2397 @@
       get node() {
           // return first dragging node
-          var node;
+          let node;
           DD._dragElements.forEach((elem) => {
               node = elem.node;
@@ -2423 +2423 @@
               }
               if (elem.dragStatus !== 'dragging') {
-                  var dragDistance = node.dragDistance();
-                  var distance = Math.max(Math.abs(pos.x - elem.startPointerPos.x), Math.abs(pos.y - elem.startPointerPos.y));
+                  const dragDistance = node.dragDistance();
+                  const distance = Math.max(Math.abs(pos.x - elem.startPointerPos.x), Math.abs(pos.y - elem.startPointerPos.y));
                   if (distance < dragDistance) {
                       return;
@@ -2501 +2501 @@
       window.addEventListener('mouseup', DD._endDragBefore, true);
       window.addEventListener('touchend', DD._endDragBefore, true);
+      // add touchcancel to fix this: https://github.com/konvajs/konva/issues/1843
+      window.addEventListener('touchcancel', DD._endDragBefore, true);
       window.addEventListener('mousemove', DD._drag);
       window.addEventListener('touchmove', DD._drag);
       window.addEventListener('mouseup', DD._endDragAfter, false);
       window.addEventListener('touchend', DD._endDragAfter, false);
+      window.addEventListener('touchcancel', 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 = [
+  const 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',
@@ -2591 +2594 @@
       }
       _getCache(attr, privateGetter) {
-          var cache = this._cache.get(attr);
+          let 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);
+          const isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
+          const invalid = cache === undefined || (isTransform && cache.dirty === true);
           // if not cached, we need to set it using the private getter method.
           if (invalid) {
@@ -2693 +2696 @@
        */
       cache(config) {
-          var conf = config || {};
-          var rect = {};
+          const conf = config || {};
+          let rect = {};
           // don't call getClientRect if we have all attributes
           // it means call it only if have one undefined
@@ -2706 +2709 @@
               });
           }
-          var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? Math.floor(rect.x) : conf.x, y = conf.y === undefined ? Math.floor(rect.y) : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
+          let width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? Math.floor(rect.x) : conf.x, y = conf.y === undefined ? Math.floor(rect.y) : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
           if (!width || !height) {
               Util.error('Can not cache the node. Width or height of the node equals 0. Caching is skipped.');
@@ -2729 +2732 @@
           // }
           // console.log({ x, y, width, height }, rect);
-          var cachedSceneCanvas = new SceneCanvas({
+          const cachedSceneCanvas = new SceneCanvas({
               pixelRatio: pixelRatio,
               width: width,
@@ -2837 +2840 @@
       }
       _transformedRect(rect, top) {
-          var points = [
+          const points = [
               { x: rect.x, y: rect.y },
               { x: rect.x + rect.width, y: rect.y },
@@ -2843 +2846 @@
               { x: rect.x, y: rect.y + rect.height },
           ];
-          var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-          var trans = this.getAbsoluteTransform(top);
+          let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+          const trans = this.getAbsoluteTransform(top);
           points.forEach(function (point) {
-              var transformed = trans.point(point);
+              const transformed = trans.point(point);
               if (minX === undefined) {
                   minX = maxX = transformed.x;
@@ -2869 +2872 @@
           const canvasCache = this._getCanvasCache();
           context.translate(canvasCache.x, canvasCache.y);
-          var cacheCanvas = this._getCachedSceneCanvas();
-          var ratio = cacheCanvas.pixelRatio;
+          const cacheCanvas = this._getCachedSceneCanvas();
+          const ratio = cacheCanvas.pixelRatio;
           context.drawImage(cacheCanvas._canvas, 0, 0, cacheCanvas.width / ratio, cacheCanvas.height / ratio);
           context.restore();
       }
       _drawCachedHitCanvas(context) {
-          var canvasCache = this._getCanvasCache(), hitCanvas = canvasCache.hit;
+          const canvasCache = this._getCanvasCache(), hitCanvas = canvasCache.hit;
           context.save();
           context.translate(canvasCache.x, canvasCache.y);
@@ -2882 +2885 @@
       }
       _getCachedSceneCanvas() {
-          var filters = this.filters(), cachedCanvas = this._getCanvasCache(), sceneCanvas = cachedCanvas.scene, filterCanvas = cachedCanvas.filter, filterContext = filterCanvas.getContext(), len, imageData, n, filter;
+          let filters = this.filters(), cachedCanvas = this._getCanvasCache(), sceneCanvas = cachedCanvas.scene, filterCanvas = cachedCanvas.filter, filterContext = filterCanvas.getContext(), len, imageData, n, filter;
           if (filters) {
               if (!this._filterUpToDate) {
-                  var ratio = sceneCanvas.pixelRatio;
+                  const ratio = sceneCanvas.pixelRatio;
                   filterCanvas.setSize(sceneCanvas.width / sceneCanvas.pixelRatio, sceneCanvas.height / sceneCanvas.pixelRatio);
                   try {
@@ -2983 +2986 @@
               return this._delegate.apply(this, arguments);
           }
-          var events = evtStr.split(SPACE$1), len = events.length, n, event, parts, baseEvent, name;
+          let events = evtStr.split(SPACE$1), len = events.length, n, event, parts, baseEvent, name;
           /*
            * loop through types and attach event listeners to
@@ -3027 +3030 @@
        */
       off(evtStr, callback) {
-          var events = (evtStr || '').split(SPACE$1), len = events.length, n, t, event, parts, baseEvent, name;
+          let events = (evtStr || '').split(SPACE$1), len = events.length, n, t, event, parts, baseEvent, name;
           this._cache && this._cache.delete(ALL_LISTENERS);
           if (!evtStr) {
@@ -3055 +3058 @@
       // some event aliases for third party integration like HammerJS
       dispatchEvent(evt) {
-          var e = {
+          const e = {
               target: this,
               type: evt.type,
@@ -3076 +3079 @@
       // like node.on
       _delegate(event, selector, handler) {
-          var stopNode = this;
+          const stopNode = this;
           this.on(event, function (evt) {
-              var targets = evt.target.findAncestors(selector, true, stopNode);
-              for (var i = 0; i < targets.length; i++) {
+              const targets = evt.target.findAncestors(selector, true, stopNode);
+              for (let i = 0; i < targets.length; i++) {
                   evt = Util.cloneObject(evt);
                   evt.currentTarget = targets[i];
@@ -3116 +3119 @@
           // traversal must be cleared when removing a node
           this._clearCaches();
-          var parent = this.getParent();
+          const parent = this.getParent();
           if (parent && parent.children) {
               parent.children.splice(this.index, 1);
@@ -3146 +3149 @@
        */
       getAttr(attr) {
-          var method = 'get' + Util._capitalize(attr);
+          const method = 'get' + Util._capitalize(attr);
           if (Util._isFunction(this[method])) {
               return this[method]();
@@ -3164 +3167 @@
        */
       getAncestors() {
-          var parent = this.getParent(), ancestors = [];
+          let parent = this.getParent(), ancestors = [];
           while (parent) {
               ancestors.push(parent);
@@ -3194 +3197 @@
       setAttrs(config) {
           this._batchTransformChanges(() => {
-              var key, method;
+              let key, method;
               if (!config) {
                   return this;
@@ -3280 +3283 @@
               return this._isVisible(top) && this._isListening(top);
           }
-          var layer = this.getLayer();
-          var layerUnderDrag = false;
+          const layer = this.getLayer();
+          let layerUnderDrag = false;
           DD._dragElements.forEach((elem) => {
               if (elem.dragStatus !== 'dragging') {
@@ -3293 +3296 @@
               }
           });
-          var dragSkip = !skipDragCheck &&
+          const dragSkip = !skipDragCheck &&
               !Konva$2.hitOnDragEnabled &&
               (layerUnderDrag || Konva$2.isTransforming());
@@ -3329 +3332 @@
        */
       getAbsoluteZIndex() {
-          var depth = this.getDepth(), that = this, index = 0, nodes, len, n, child;
+          let depth = this.getDepth(), that = this, index = 0, nodes, len, n, child;
           function addChildren(children) {
               nodes = [];
@@ -3362 +3365 @@
        */
       getDepth() {
-          var depth = 0, parent = this.parent;
+          let depth = 0, parent = this.parent;
           while (parent) {
               depth++;
@@ -3414 +3417 @@
           }
           // get pointer (say mouse or touch) position
-          var pos = stage.getPointerPosition();
+          const pos = stage.getPointerPosition();
           if (!pos) {
               return null;
           }
-          var transform = this.getAbsoluteTransform().copy();
+          const transform = this.getAbsoluteTransform().copy();
           // to detect relative position we need to invert transform
           transform.invert();
@@ -3454 +3457 @@
               top = true;
           }
-          var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Transform(), offset = this.offset();
+          const absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Transform(), offset = this.offset();
           // clone the matrix array
           absoluteTransform.m = absoluteMatrix.slice();
@@ -3467 +3470 @@
           // important, use non cached value
           this._clearCache(TRANSFORM);
-          var it = this._getAbsoluteTransform().copy();
+          const it = this._getAbsoluteTransform().copy();
           it.invert();
           it.translate(pos.x, pos.y);
@@ -3481 +3484 @@
       }
       _setTransform(trans) {
-          var key;
+          let key;
           for (key in trans) {
               this.attrs[key] = trans[key];
@@ -3489 +3492 @@
       }
       _clearTransform() {
-          var trans = {
+          const trans = {
               x: this.x(),
               y: this.y(),
@@ -3528 +3531 @@
        */
       move(change) {
-          var changeX = change.x, changeY = change.y, x = this.x(), y = this.y();
+          let changeX = change.x, changeY = change.y, x = this.x(), y = this.y();
           if (changeX !== undefined) {
               x += changeX;
@@ -3539 +3542 @@
       }
       _eachAncestorReverse(func, top) {
-          var family = [], parent = this.getParent(), len, n;
+          let 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
@@ -3579 +3582 @@
               return false;
           }
-          var index = this.index, len = this.parent.getChildren().length;
+          const index = this.index, len = this.parent.getChildren().length;
           if (index < len - 1) {
               this.parent.children.splice(index, 1);
@@ -3599 +3602 @@
               return false;
           }
-          var index = this.index, len = this.parent.getChildren().length;
+          const index = this.index, len = this.parent.getChildren().length;
           if (index < len - 1) {
               this.parent.children.splice(index, 1);
@@ -3619 +3622 @@
               return false;
           }
-          var index = this.index;
+          const index = this.index;
           if (index > 0) {
               this.parent.children.splice(index, 1);
@@ -3639 +3642 @@
               return false;
           }
-          var index = this.index;
+          const index = this.index;
           if (index > 0) {
               this.parent.children.splice(index, 1);
@@ -3660 +3663 @@
                   '.');
           }
-          var index = this.index;
+          const index = this.index;
           this.parent.children.splice(index, 1);
           this.parent.children.splice(zIndex, 0, this);
@@ -3676 +3679 @@
       }
       _getAbsoluteOpacity() {
-          var absOpacity = this.opacity();
-          var parent = this.getParent();
+          let absOpacity = this.opacity();
+          const parent = this.getParent();
           if (parent && !parent._isUnderCache) {
               absOpacity *= parent.getAbsoluteOpacity();
@@ -3708 +3711 @@
        */
       toObject() {
-          var attrs = this.getAttrs(), key, val, getter, defaultValue, nonPlainObject;
+          let attrs = this.getAttrs(), key, val, getter, defaultValue, nonPlainObject;
           const obj = {
               attrs: {},
@@ -3765 +3768 @@
        */
       findAncestors(selector, includeSelf, stopNode) {
-          var res = [];
+          const res = [];
           if (includeSelf && this._isMatch(selector)) {
               res.push(this);
           }
-          var ancestor = this.parent;
+          let ancestor = this.parent;
           while (ancestor) {
               if (ancestor === stopNode) {
@@ -3807 +3810 @@
               return selector(this);
           }
-          var selectorArr = selector.replace(/ /g, '').split(','), len = selectorArr.length, n, sel;
+          let selectorArr = selector.replace(/ /g, '').split(','), len = selectorArr.length, n, sel;
           for (n = 0; n < len; n++) {
               sel = selectorArr[n];
@@ -3842 +3845 @@
        */
       getLayer() {
-          var parent = this.getParent();
+          const parent = this.getParent();
           return parent ? parent.getLayer() : null;
       }
@@ -3855 +3858 @@
       }
       _getStage() {
-          var parent = this.getParent();
+          const parent = this.getParent();
           if (parent) {
               return parent.getStage();
@@ -3917 +3920 @@
       }
       _getAbsoluteTransform(top) {
-          var at;
+          let at;
           // we we need position relative to an ancestor, we will iterate for all
           if (top) {
@@ -3923 +3926 @@
               // start with stage and traverse downwards to self
               this._eachAncestorReverse(function (node) {
-                  var transformsEnabled = node.transformsEnabled();
+                  const transformsEnabled = node.transformsEnabled();
                   if (transformsEnabled === 'all') {
                       at.multiply(node.getTransform());
@@ -3943 +3946 @@
                   at.reset();
               }
-              var transformsEnabled = this.transformsEnabled();
+              const transformsEnabled = this.transformsEnabled();
               if (transformsEnabled === 'all') {
                   at.multiply(this.getTransform());
@@ -3973 +3976 @@
           // because it use cache transform
           // this is special logic for caching with some shapes with shadow
-          var parent = this;
+          let parent = this;
           while (parent) {
               if (parent._isUnderCache) {
@@ -4018 +4021 @@
       _getTransform() {
           var _a, _b;
-          var m = this._cache.get(TRANSFORM) || new Transform();
+          const 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;
+          const 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);
@@ -4061 +4064 @@
       clone(obj) {
           // instantiate new node
-          var attrs = Util.cloneObject(this.attrs), key, allListeners, len, n, listener;
+          let 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);
+          const node = new this.constructor(attrs);
           // copy over listeners
           for (key in this.eventListeners) {
@@ -4090 +4093 @@
       _toKonvaCanvas(config) {
           config = config || {};
-          var box = this.getClientRect();
-          var stage = this.getStage(), x = config.x !== undefined ? config.x : Math.floor(box.x), y = config.y !== undefined ? config.y : Math.floor(box.y), pixelRatio = config.pixelRatio || 1, canvas = new SceneCanvas({
+          const box = this.getClientRect();
+          const stage = this.getStage(), x = config.x !== undefined ? config.x : Math.floor(box.x), y = config.y !== undefined ? config.y : Math.floor(box.y), pixelRatio = config.pixelRatio || 1, canvas = new SceneCanvas({
               width: config.width || Math.ceil(box.width) || (stage ? stage.width() : 0),
               height: config.height ||
@@ -4163 +4166 @@
       toDataURL(config) {
           config = config || {};
-          var mimeType = config.mimeType || null, quality = config.quality || null;
-          var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
+          const mimeType = config.mimeType || null, quality = config.quality || null;
+          const url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
           if (config.callback) {
               config.callback(url);
@@ -4296 +4299 @@
       }
       _off(type, name, callback) {
-          var evtListeners = this.eventListeners[type], i, evtName, handler;
+          let evtListeners = this.eventListeners[type], i, evtName, handler;
           for (i = 0; i < evtListeners.length; i++) {
               evtName = evtListeners[i].name;
@@ -4335 +4338 @@
       addName(name) {
           if (!this.hasName(name)) {
-              var oldName = this.name();
-              var newName = oldName ? oldName + ' ' + name : name;
+              const oldName = this.name();
+              const newName = oldName ? oldName + ' ' + name : name;
               this.name(newName);
           }
@@ -4362 +4365 @@
           }
           // if name is '' the "names" will be [''], so I added extra check above
-          var names = (fullName || '').split(/\s/g);
+          const names = (fullName || '').split(/\s/g);
           return names.indexOf(name) !== -1;
       }
@@ -4378 +4381 @@
        */
       removeName(name) {
-          var names = (this.name() || '').split(/\s/g);
-          var index = names.indexOf(name);
+          const names = (this.name() || '').split(/\s/g);
+          const index = names.indexOf(name);
           if (index !== -1) {
               names.splice(index, 1);
@@ -4397 +4400 @@
        */
       setAttr(attr, val) {
-          var func = this[SET + Util._capitalize(attr)];
+          const func = this[SET + Util._capitalize(attr)];
           if (Util._isFunction(func)) {
               func.call(this, val);
@@ -4414 +4417 @@
       }
       _setAttr(key, val) {
-          var oldVal = this.attrs[key];
+          const oldVal = this.attrs[key];
           if (oldVal === val && !Util.isObject(val)) {
               return;
@@ -4430 +4433 @@
       }
       _setComponentAttr(key, component, val) {
-          var oldVal;
+          let oldVal;
           if (val !== undefined) {
               oldVal = this.attrs[key];
@@ -4445 +4448 @@
               evt.target = this;
           }
-          var shouldStop = (eventType === MOUSEENTER$1 || eventType === MOUSELEAVE$1) &&
+          const shouldStop = (eventType === MOUSEENTER$1 || eventType === MOUSELEAVE$1) &&
               ((compareShape &&
                   (this === compareShape ||
@@ -4453 +4456 @@
               this._fire(eventType, evt);
               // simulate event bubbling
-              var stopBubble = (eventType === MOUSEENTER$1 || eventType === MOUSELEAVE$1) &&
+              const stopBubble = (eventType === MOUSEENTER$1 || eventType === MOUSELEAVE$1) &&
                   compareShape &&
                   compareShape.isAncestorOf &&
@@ -4522 +4525 @@
       // drag & drop
       _createDragElement(evt) {
-          var pointerId = evt ? evt.pointerId : undefined;
-          var stage = this.getStage();
-          var ap = this.getAbsolutePosition();
+          const pointerId = evt ? evt.pointerId : undefined;
+          const stage = this.getStage();
+          const ap = this.getAbsolutePosition();
           if (!stage) {
               return;
           }
-          var pos = stage._getPointerById(pointerId) ||
+          const pos = stage._getPointerById(pointerId) ||
               stage._changedPointerPositions[0] ||
               ap;
@@ -4566 +4569 @@
               return;
           }
-          var newNodePos = {
+          let newNodePos = {
               x: pos.x - elem.offset.x,
               y: pos.y - elem.offset.y,
           };
-          var dbf = this.dragBoundFunc();
+          const dbf = this.dragBoundFunc();
           if (dbf !== undefined) {
               const bounded = dbf.call(this, newNodePos, evt);
@@ -4617 +4620 @@
           this._dragCleanup();
           this.on('mousedown.konva touchstart.konva', function (evt) {
-              var shouldCheckButton = evt.evt['button'] !== undefined;
-              var canDrag = !shouldCheckButton || Konva$2.dragButtons.indexOf(evt.evt['button']) >= 0;
+              const shouldCheckButton = evt.evt['button'] !== undefined;
+              const canDrag = !shouldCheckButton || Konva$2.dragButtons.indexOf(evt.evt['button']) >= 0;
               if (!canDrag) {
                   return;
@@ -4625 +4628 @@
                   return;
               }
-              var hasDraggingChild = false;
+              let hasDraggingChild = false;
               DD._dragElements.forEach((elem) => {
                   if (this.isAncestorOf(elem.node)) {
@@ -4650 +4653 @@
                * drag and drop mode
                */
-              var stage = this.getStage();
+              const stage = this.getStage();
               if (!stage) {
                   return;
@@ -4717 +4720 @@
       }
       static _createNode(obj, container) {
-          var className = Node.prototype.getClassName.call(obj), children = obj.children, no, len, n;
+          let className = Node.prototype.getClassName.call(obj), children = obj.children, no, len, n;
           // if container was passed in, add it to attrs
           if (container) {
@@ -5329 +5332 @@
           }
           const children = this.children || [];
-          var results = [];
+          const results = [];
           children.forEach(function (child) {
               if (filterFunc(child)) {
@@ -5400 +5403 @@
           }
           if (children.length > 1) {
-              for (var i = 0; i < children.length; i++) {
+              for (let i = 0; i < children.length; i++) {
                   this.add(children[i]);
               }
@@ -5493 +5496 @@
        */
       findOne(selector) {
-          var result = this._generalFind(selector, true);
+          const result = this._generalFind(selector, true);
           return result.length > 0 ? result[0] : undefined;
       }
       _generalFind(selector, findOne) {
-          var retArr = [];
+          const retArr = [];
           this._descendants((node) => {
               const valid = node._isMatch(selector);
@@ -5530 +5533 @@
       // extenders
       toObject() {
-          var obj = Node.prototype.toObject.call(this);
+          const obj = Node.prototype.toObject.call(this);
           obj.children = [];
           this.getChildren().forEach((child) => {
@@ -5545 +5548 @@
        */
       isAncestorOf(node) {
-          var parent = node.getParent();
+          let parent = node.getParent();
           while (parent) {
               if (parent._id === this._id) {
@@ -5556 +5559 @@
       clone(obj) {
           // call super method
-          var node = Node.prototype.clone.call(this, obj);
+          const node = Node.prototype.clone.call(this, obj);
           this.getChildren().forEach(function (no) {
               node.add(no.clone());
@@ -5576 +5579 @@
        */
       getAllIntersections(pos) {
-          var arr = [];
+          const arr = [];
           this.find('Shape').forEach((shape) => {
               if (shape.isVisible() && shape.intersects(pos)) {
@@ -5604 +5607 @@
       }
       drawScene(can, top, bufferCanvas) {
-          var layer = this.getLayer(), canvas = can || (layer && layer.getCanvas()), context = canvas && canvas.getContext(), cachedCanvas = this._getCanvasCache(), cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
-          var caching = canvas && canvas.isCache;
+          const layer = this.getLayer(), canvas = can || (layer && layer.getCanvas()), context = canvas && canvas.getContext(), cachedCanvas = this._getCanvasCache(), cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
+          const caching = canvas && canvas.isCache;
           if (!this.isVisible() && !caching) {
               return this;
@@ -5611 +5614 @@
           if (cachedSceneCanvas) {
               context.save();
-              var m = this.getAbsoluteTransform(top).getMatrix();
+              const m = this.getAbsoluteTransform(top).getMatrix();
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
               this._drawCachedSceneCanvas(context);
@@ -5625 +5628 @@
               return this;
           }
-          var layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas), context = canvas && canvas.getContext(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
+          const layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas), context = canvas && canvas.getContext(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
           if (cachedHitCanvas) {
               context.save();
-              var m = this.getAbsoluteTransform(top).getMatrix();
+              const m = this.getAbsoluteTransform(top).getMatrix();
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
               this._drawCachedHitCanvas(context);
@@ -5640 +5643 @@
       _drawChildren(drawMethod, canvas, top, bufferCanvas) {
           var _a;
-          var context = canvas && canvas.getContext(), clipWidth = this.clipWidth(), clipHeight = this.clipHeight(), clipFunc = this.clipFunc(), hasClip = (typeof clipWidth === 'number' && typeof clipHeight === 'number') ||
+          const context = canvas && canvas.getContext(), clipWidth = this.clipWidth(), clipHeight = this.clipHeight(), clipFunc = this.clipFunc(), hasClip = (typeof clipWidth === 'number' && typeof clipHeight === 'number') ||
               clipFunc;
           const selfCache = top === this;
           if (hasClip) {
               context.save();
-              var transform = this.getAbsoluteTransform(top);
-              var m = transform.getMatrix();
+              const transform = this.getAbsoluteTransform(top);
+              let m = transform.getMatrix();
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
               context.beginPath();
@@ -5654 +5657 @@
               }
               else {
-                  var clipX = this.clipX();
-                  var clipY = this.clipY();
+                  const clipX = this.clipX();
+                  const clipY = this.clipY();
                   context.rect(clipX || 0, clipY || 0, clipWidth, clipHeight);
               }
@@ -5662 +5665 @@
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
           }
-          var hasComposition = !selfCache &&
+          const hasComposition = !selfCache &&
               this.globalCompositeOperation() !== 'source-over' &&
               drawMethod === 'drawScene';
@@ -5681 +5684 @@
       getClientRect(config = {}) {
           var _a;
-          var skipTransform = config.skipTransform;
-          var relativeTo = config.relativeTo;
-          var minX, minY, maxX, maxY;
-          var selfRect = {
+          const skipTransform = config.skipTransform;
+          const relativeTo = config.relativeTo;
+          let minX, minY, maxX, maxY;
+          let selfRect = {
               x: Infinity,
               y: Infinity,
@@ -5690 +5693 @@
               height: 0,
           };
-          var that = this;
+          const that = this;
           (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
               // skip invisible children
@@ -5696 +5699 @@
                   return;
               }
-              var rect = child.getClientRect({
+              const rect = child.getClientRect({
                   relativeTo: that,
                   skipShadow: config.skipShadow,
@@ -5720 +5723 @@
           });
           // 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++) {
-              var shape = shapes[i];
+          const shapes = this.find('Shape');
+          let hasVisible = false;
+          for (let i = 0; i < shapes.length; i++) {
+              const shape = shapes[i];
               if (shape._isVisible(this)) {
                   hasVisible = true;
@@ -5897 +5900 @@
 
   // 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 = [
+  const 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'],
@@ -6056 +6059 @@
           if (typeof container === STRING) {
               if (container.charAt(0) === '.') {
-                  var className = container.slice(1);
+                  const className = container.slice(1);
                   container = document.getElementsByClassName(className)[0];
               }
@@ -6091 +6094 @@
        */
       clear() {
-          var layers = this.children, len = layers.length, n;
+          let layers = this.children, len = layers.length, n;
           for (n = 0; n < len; n++) {
               layers[n].clear();
@@ -6107 +6110 @@
       destroy() {
           super.destroy();
-          var content = this.content;
+          const content = this.content;
           if (content && Util._isInDocument(content)) {
               this.container().removeChild(content);
           }
-          var index = stages.indexOf(this);
+          const index = stages.indexOf(this);
           if (index > -1) {
               stages.splice(index, 1);
@@ -6155 +6158 @@
           config.width = config.width || this.width();
           config.height = config.height || this.height();
-          var canvas = new SceneCanvas({
+          const canvas = new SceneCanvas({
               width: config.width,
               height: config.height,
               pixelRatio: config.pixelRatio || 1,
           });
-          var _context = canvas.getContext()._context;
-          var layers = this.children;
+          const _context = canvas.getContext()._context;
+          const layers = this.children;
           if (config.x || config.y) {
               _context.translate(-1 * config.x, -1 * config.y);
@@ -6169 +6172 @@
                   return;
               }
-              var layerCanvas = layer._toKonvaCanvas(config);
+              const layerCanvas = layer._toKonvaCanvas(config);
               _context.drawImage(layerCanvas._canvas, config.x, config.y, layerCanvas.getWidth() / layerCanvas.getPixelRatio(), layerCanvas.getHeight() / layerCanvas.getPixelRatio());
           });
@@ -6191 +6194 @@
               return null;
           }
-          var layers = this.children, len = layers.length, end = len - 1, n;
+          let layers = this.children, len = layers.length, end = len - 1, n;
           for (n = end; n >= 0; n--) {
               const shape = layers[n].getIntersection(pos);
@@ -6201 +6204 @@
       }
       _resizeDOM() {
-          var width = this.width();
-          var height = this.height();
+          const width = this.width();
+          const height = this.height();
           if (this.content) {
               // set content dimensions
@@ -6218 +6221 @@
       add(layer, ...rest) {
           if (arguments.length > 1) {
-              for (var i = 0; i < arguments.length; i++) {
+              for (let i = 0; i < arguments.length; i++) {
                   this.add(arguments[i]);
               }
@@ -6224 +6227 @@
           }
           super.add(layer);
-          var length = this.children.length;
+          const length = this.children.length;
           if (length > MAX_LAYERS_NUMBER) {
               Util.warn('The stage has ' +
@@ -6308 +6311 @@
           }
           this.setPointersPositions(evt);
-          var targetShape = this._getTargetShape(eventType);
-          var eventsEnabled = !(Konva$2.isDragging() || Konva$2.isTransforming()) || Konva$2.hitOnDragEnabled;
+          const targetShape = this._getTargetShape(eventType);
+          const eventsEnabled = !(Konva$2.isDragging() || Konva$2.isTransforming()) || Konva$2.hitOnDragEnabled;
           if (targetShape && eventsEnabled) {
               targetShape._fireAndBubble(events.pointerout, { evt: evt });
@@ -6342 +6345 @@
           }
           this.setPointersPositions(evt);
-          var triggeredOnShape = false;
+          let triggeredOnShape = false;
           this._changedPointerPositions.forEach((pos) => {
-              var shape = this.getIntersection(pos);
+              const shape = this.getIntersection(pos);
               DD.justDragged = false;
               // probably we are staring a click
@@ -6390 +6393 @@
           }
           this.setPointersPositions(evt);
-          var eventsEnabled = !(Konva$2.isDragging() || Konva$2.isTransforming()) || Konva$2.hitOnDragEnabled;
+          const eventsEnabled = !(Konva$2.isDragging() || Konva$2.isTransforming()) || Konva$2.hitOnDragEnabled;
           if (!eventsEnabled) {
               return;
           }
-          var processedShapesIds = {};
+          const processedShapesIds = {};
           let triggeredOnShape = false;
-          var targetShape = this._getTargetShape(eventType);
+          const targetShape = this._getTargetShape(eventType);
           this._changedPointerPositions.forEach((pos) => {
               const shape = (getCapturedShape(pos.id) ||
@@ -6402 +6405 @@
               const pointerId = pos.id;
               const event = { evt: evt, pointerId };
-              var differentTarget = targetShape !== shape;
+              const differentTarget = targetShape !== shape;
               if (differentTarget && targetShape) {
                   targetShape._fireAndBubble(events.pointerout, { ...event }, shape);
@@ -6452 +6455 @@
           const clickStartShape = this[eventType + 'ClickStartShape'];
           const clickEndShape = this[eventType + 'ClickEndShape'];
-          var processedShapesIds = {};
+          const processedShapesIds = {};
           let triggeredOnShape = false;
           this._changedPointerPositions.forEach((pos) => {
@@ -6533 +6536 @@
       _contextmenu(evt) {
           this.setPointersPositions(evt);
-          var shape = this.getIntersection(this.getPointerPosition());
+          const shape = this.getIntersection(this.getPointerPosition());
           if (shape && shape.isListening()) {
               shape._fireAndBubble(CONTEXTMENU, { evt: evt });
@@ -6547 +6550 @@
       _wheel(evt) {
           this.setPointersPositions(evt);
-          var shape = this.getIntersection(this.getPointerPosition());
+          const shape = this.getIntersection(this.getPointerPosition());
           if (shape && shape.isListening()) {
               shape._fireAndBubble(WHEEL, { evt: evt });
@@ -6586 +6589 @@
        */
       setPointersPositions(evt) {
-          var contentPosition = this._getContentPosition(), x = null, y = null;
+          let contentPosition = this._getContentPosition(), x = null, y = null;
           evt = evt ? evt : window.event;
           // touch events
@@ -6636 +6639 @@
               };
           }
-          var rect = this.content.getBoundingClientRect();
+          const rect = this.content.getBoundingClientRect();
           return {
               top: rect.top,
@@ -6659 +6662 @@
               return;
           }
-          var container = this.container();
+          const container = this.container();
           if (!container) {
               throw 'Stage has no container. A container is required.';
@@ -6723 +6726 @@
   }
 
-  var HAS_SHADOW = 'hasShadow';
-  var SHADOW_RGBA = 'shadowRGBA';
-  var patternImage = 'patternImage';
-  var linearGradient = 'linearGradient';
-  var radialGradient = 'radialGradient';
+  const HAS_SHADOW = 'hasShadow';
+  const SHADOW_RGBA = 'shadowRGBA';
+  const patternImage = 'patternImage';
+  const linearGradient = 'linearGradient';
+  const radialGradient = 'radialGradient';
   let dummyContext$1;
   function getDummyContext$1() {
@@ -6929 +6932 @@
       __getFillPattern() {
           if (this.fillPatternImage()) {
-              var ctx = getDummyContext$1();
+              const ctx = getDummyContext$1();
               const pattern = ctx.createPattern(this.fillPatternImage(), this.fillPatternRepeat() || 'repeat');
               if (pattern && pattern.setTransform) {
@@ -6957 +6960 @@
       }
       __getLinearGradient() {
-          var colorStops = this.fillLinearGradientColorStops();
+          const colorStops = this.fillLinearGradientColorStops();
           if (colorStops) {
-              var ctx = getDummyContext$1();
-              var start = this.fillLinearGradientStartPoint();
-              var end = this.fillLinearGradientEndPoint();
-              var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+              const ctx = getDummyContext$1();
+              const start = this.fillLinearGradientStartPoint();
+              const end = this.fillLinearGradientEndPoint();
+              const grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
               // build color stops
-              for (var n = 0; n < colorStops.length; n += 2) {
+              for (let n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -6974 +6977 @@
       }
       __getRadialGradient() {
-          var colorStops = this.fillRadialGradientColorStops();
+          const colorStops = this.fillRadialGradientColorStops();
           if (colorStops) {
-              var ctx = getDummyContext$1();
-              var start = this.fillRadialGradientStartPoint();
-              var end = this.fillRadialGradientEndPoint();
-              var grd = ctx.createRadialGradient(start.x, start.y, this.fillRadialGradientStartRadius(), end.x, end.y, this.fillRadialGradientEndRadius());
+              const ctx = getDummyContext$1();
+              const start = this.fillRadialGradientStartPoint();
+              const end = this.fillRadialGradientEndPoint();
+              const 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) {
+              for (let n = 0; n < colorStops.length; n += 2) {
                   grd.addColorStop(colorStops[n], colorStops[n + 1]);
               }
@@ -6994 +6997 @@
               return;
           }
-          var rgba = Util.colorToRGBA(this.shadowColor());
+          const rgba = Util.colorToRGBA(this.shadowColor());
           if (rgba) {
               return ('rgba(' +
@@ -7077 +7080 @@
        */
       intersects(point) {
-          var stage = this.getStage();
+          const stage = this.getStage();
           if (!stage) {
               return false;
@@ -7149 +7152 @@
        */
       getSelfRect() {
-          var size = this.size();
+          const size = this.size();
           return {
               x: this._centroid ? -size.width / 2 : 0,
@@ -7205 +7208 @@
           // 2 - when we are caching current
           // 3 - when node is cached and we need to draw it into layer
-          var layer = this.getLayer();
-          var canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), hasShadow = this.hasShadow(), stage, bufferContext;
-          var skipBuffer = canvas.isCache;
-          var cachingSelf = top === this;
+          const layer = this.getLayer();
+          let canvas = can || layer.getCanvas(), context = canvas.getContext(), cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), hasShadow = this.hasShadow(), stage, bufferContext;
+          const skipBuffer = canvas.isCache;
+          const cachingSelf = top === this;
           if (!this.isVisible() && !cachingSelf) {
               return this;
@@ -7215 +7218 @@
           if (cachedCanvas) {
               context.save();
-              var m = this.getAbsoluteTransform(top).getMatrix();
+              const m = this.getAbsoluteTransform(top).getMatrix();
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
               this._drawCachedSceneCanvas(context);
@@ -7238 +7241 @@
               drawFunc.call(this, bufferContext, this);
               bufferContext.restore();
-              var ratio = bc.pixelRatio;
+              const ratio = bc.pixelRatio;
               if (hasShadow) {
                   context._applyShadow(this);
@@ -7266 +7269 @@
               return this;
           }
-          var layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
+          const layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
           if (!this.colorKey) {
               Util.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()');
@@ -7272 +7275 @@
           if (cachedHitCanvas) {
               context.save();
-              var m = this.getAbsoluteTransform(top).getMatrix();
+              const m = this.getAbsoluteTransform(top).getMatrix();
               context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
               this._drawCachedHitCanvas(context);
@@ -7285 +7288 @@
           const selfCache = this === top;
           if (!selfCache) {
-              var o = this.getAbsoluteTransform(top).getMatrix();
+              const o = this.getAbsoluteTransform(top).getMatrix();
               context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
           }
@@ -7305 +7308 @@
        */
       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;
+          let 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();
           hitContext.drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
@@ -8369 +8372 @@
 
   // constants
-  var HASH = '#', BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', 
+  const HASH = '#', BEFORE_DRAW = 'beforeDraw', DRAW = 'draw', 
   /*
    * 2 - 3 - 4
@@ -8484 +8487 @@
       setZIndex(index) {
           super.setZIndex(index);
-          var stage = this.getStage();
+          const stage = this.getStage();
           if (stage && stage.content) {
               stage.content.removeChild(this.getNativeCanvasElement());
@@ -8498 +8501 @@
       moveToTop() {
           Node.prototype.moveToTop.call(this);
-          var stage = this.getStage();
+          const stage = this.getStage();
           if (stage && stage.content) {
               stage.content.removeChild(this.getNativeCanvasElement());
@@ -8506 +8509 @@
       }
       moveUp() {
-          var moved = Node.prototype.moveUp.call(this);
+          const moved = Node.prototype.moveUp.call(this);
           if (!moved) {
               return false;
           }
-          var stage = this.getStage();
+          const stage = this.getStage();
           if (!stage || !stage.content) {
               return false;
@@ -8526 +8529 @@
       moveDown() {
           if (Node.prototype.moveDown.call(this)) {
-              var stage = this.getStage();
+              const stage = this.getStage();
               if (stage) {
-                  var children = stage.children;
+                  const children = stage.children;
                   if (stage.content) {
                       stage.content.removeChild(this.getNativeCanvasElement());
@@ -8541 +8544 @@
       moveToBottom() {
           if (Node.prototype.moveToBottom.call(this)) {
-              var stage = this.getStage();
+              const stage = this.getStage();
               if (stage) {
-                  var children = stage.children;
+                  const children = stage.children;
                   if (stage.content) {
                       stage.content.removeChild(this.getNativeCanvasElement());
@@ -8557 +8560 @@
       }
       remove() {
-          var _canvas = this.getNativeCanvasElement();
+          const _canvas = this.getNativeCanvasElement();
           Node.prototype.remove.call(this);
           if (_canvas && _canvas.parentNode && Util._isInDocument(_canvas)) {
@@ -8574 +8577 @@
       }
       _validateAdd(child) {
-          var type = child.getType();
+          const type = child.getType();
           if (type !== 'Group' && type !== 'Shape') {
               Util.throw('You may only add groups and shapes to a layer.');
@@ -8671 +8674 @@
           // 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;
+          let spiralSearchDistance = 1;
+          let continueSearch = false;
           while (true) {
               for (let i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
@@ -8728 +8731 @@
       }
       drawScene(can, top) {
-          var layer = this.getLayer(), canvas = can || (layer && layer.getCanvas());
+          const layer = this.getLayer(), canvas = can || (layer && layer.getCanvas());
           this._fire(BEFORE_DRAW, {
               node: this,
@@ -8742 +8745 @@
       }
       drawHit(can, top) {
-          var layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas);
+          const layer = this.getLayer(), canvas = can || (layer && layer.hitCanvas);
           if (layer && layer.clearBeforeDraw()) {
               layer.getHitCanvas().getContext().clear();
@@ -8786 +8789 @@
               return;
           }
-          var parent = this.parent;
-          var added = !!this.hitCanvas._canvas.parentNode;
+          const parent = this.parent;
+          const added = !!this.hitCanvas._canvas.parentNode;
           if (added) {
               parent.content.removeChild(this.hitCanvas._canvas);
@@ -8924 +8927 @@
   class Group extends Container {
       _validateAdd(child) {
-          var type = child.getType();
+          const type = child.getType();
           if (type !== 'Group' && type !== 'Shape') {
               Util.throw('You may only add groups and shapes to groups.');
@@ -9121 +9124 @@
               }
           }
-          for (let key in layerHash) {
+          for (const key in layerHash) {
               if (!layerHash.hasOwnProperty(key)) {
                   continue;
@@ -9149 +9152 @@
   Animation.animRunning = false;
 
-  var blacklist = {
+  let blacklist = {
       node: 1,
       duration: 1,
@@ -9175 +9178 @@
       }
       fire(str) {
-          var handler = this[str];
+          const handler = this[str];
           if (handler) {
               handler();
@@ -9254 +9257 @@
       }
       onEnterFrame() {
-          var t = this.getTimer() - this._startTime;
+          const t = this.getTimer() - this._startTime;
           if (this.state === PLAYING) {
               this.setTime(t);
@@ -9298 +9301 @@
   class Tween {
       constructor(config) {
-          var that = this, node = config.node, nodeId = node._id, duration, easing = config.easing || Easings.Linear, yoyo = !!config.yoyo, key;
+          let that = this, node = config.node, nodeId = node._id, duration, easing = config.easing || Easings.Linear, yoyo = !!config.yoyo, key;
           if (typeof config.duration === 'undefined') {
               duration = 0.3;
@@ -9311 +9314 @@
           this.node = node;
           this._id = idCounter++;
-          var layers = node.getLayer() ||
+          const layers = node.getLayer() ||
               (node instanceof Konva$2['Stage'] ? node.getLayers() : null);
           if (!layers) {
@@ -9346 +9349 @@
       }
       _addAttr(key, end) {
-          var node = this.node, nodeId = node._id, start, diff, tweenId, n, len, trueEnd, trueStart, endRGBA;
+          let 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];
@@ -9377 +9380 @@
                       }
                       else {
-                          var startRGBA = Util.colorToRGBA(start[n]);
+                          const startRGBA = Util.colorToRGBA(start[n]);
                           endRGBA = Util.colorToRGBA(end[n]);
                           start[n] = startRGBA;
@@ -9418 +9421 @@
       }
       _tweenFunc(i) {
-          var node = this.node, attrs = Tween.attrs[node._id][this._id], key, attr, start, diff, newVal, n, len, end;
+          let node = this.node, attrs = Tween.attrs[node._id][this._id], key, attr, start, diff, newVal, n, len, end;
           for (key in attrs) {
               attr = attrs[key];
@@ -9482 +9485 @@
           };
           this.tween.onFinish = () => {
-              var node = this.node;
+              const node = this.node;
               // after tweening  points of line we need to set original end
-              var attrs = Tween.attrs[node._id][this._id];
+              const attrs = Tween.attrs[node._id][this._id];
               if (attrs.points && attrs.points.trueEnd) {
                   node.setAttr('points', attrs.points.trueEnd);
@@ -9493 +9496 @@
           };
           this.tween.onReset = () => {
-              var node = this.node;
+              const node = this.node;
               // after tweening  points of line we need to set original start
-              var attrs = Tween.attrs[node._id][this._id];
+              const attrs = Tween.attrs[node._id][this._id];
               if (attrs.points && attrs.points.trueStart) {
                   node.points(attrs.points.trueStart);
@@ -9576 +9579 @@
        */
       destroy() {
-          var nodeId = this.node._id, thisId = this._id, attrs = Tween.tweens[nodeId], key;
+          let nodeId = this.node._id, thisId = this._id, attrs = Tween.tweens[nodeId], key;
           this.pause();
           for (key in attrs) {
@@ -9601 +9604 @@
    */
   Node.prototype.to = function (params) {
-      var onFinish = params.onFinish;
+      const onFinish = params.onFinish;
       params.node = this;
       params.onFinish = function () {
@@ -9609 +9612 @@
           }
       };
-      var tween = new Tween(params);
+      const tween = new Tween(params);
       tween.play();
   };
@@ -9627 +9630 @@
        */
       BackEaseIn(t, b, c, d) {
-          var s = 1.70158;
+          const s = 1.70158;
           return c * (t /= d) * t * ((s + 1) * t - s) + b;
       },
@@ -9636 +9639 @@
        */
       BackEaseOut(t, b, c, d) {
-          var s = 1.70158;
+          const s = 1.70158;
           return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
       },
@@ -9645 +9648 @@
        */
       BackEaseInOut(t, b, c, d) {
-          var s = 1.70158;
+          let s = 1.70158;
           if ((t /= d / 2) < 1) {
               return (c / 2) * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
@@ -9658 +9661 @@
       ElasticEaseIn(t, b, c, d, a, p) {
           // added s = 0
-          var s = 0;
+          let s = 0;
           if (t === 0) {
               return b;
@@ -9686 +9689 @@
       ElasticEaseOut(t, b, c, d, a, p) {
           // added s = 0
-          var s = 0;
+          let s = 0;
           if (t === 0) {
               return b;
@@ -9714 +9717 @@
       ElasticEaseInOut(t, b, c, d, a, p) {
           // added s = 0
-          var s = 0;
+          let s = 0;
           if (t === 0) {
               return b;
@@ -9968 +9971 @@
   class Arc extends Shape {
       _sceneFunc(context) {
-          var angle = Konva$2.getAngle(this.angle()), clockwise = this.clockwise();
+          const angle = Konva$2.getAngle(this.angle()), clockwise = this.clockwise();
           context.beginPath();
           context.arc(0, 0, this.outerRadius(), 0, angle, clockwise);
@@ -10074 +10077 @@
 
   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);
+      const 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);
       return [p1x, p1y, p2x, p2y];
   }
   function expandPoints(p, tension) {
-      var len = p.length, allPoints = [], n, cp;
-      for (n = 2; n < len - 2; n += 2) {
-          cp = getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
+      const len = p.length, allPoints = [];
+      for (let n = 2; n < len - 2; n += 2) {
+          const cp = getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
           if (isNaN(cp[0])) {
               continue;
@@ -10196 +10199 @@
       }
       _sceneFunc(context) {
-          var points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
+          let points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
           if (!length) {
               return;
@@ -10252 +10255 @@
       }
       _getTensionPointsClosed() {
-          var p = this.points(), len = p.length, tension = this.tension(), firstControlPoints = getControlPoints(p[len - 2], p[len - 1], p[0], p[1], p[2], p[3], tension), lastControlPoints = getControlPoints(p[len - 4], p[len - 3], p[len - 2], p[len - 1], p[0], p[1], tension), middle = expandPoints(p, tension), tp = [firstControlPoints[2], firstControlPoints[3]]
+          const p = this.points(), len = p.length, tension = this.tension(), firstControlPoints = getControlPoints(p[len - 2], p[len - 1], p[0], p[1], p[2], p[3], tension), lastControlPoints = getControlPoints(p[len - 4], p[len - 3], p[len - 2], p[len - 1], p[0], p[1], tension), middle = expandPoints(p, tension), tp = [firstControlPoints[2], firstControlPoints[3]]
               .concat(middle)
               .concat([
@@ -10276 +10279 @@
       // overload size detection
       getSelfRect() {
-          var points = this.points();
+          let points = this.points();
           if (points.length < 4) {
               return {
@@ -10297 +10300 @@
               points = this.points();
           }
-          var minX = points[0];
-          var maxX = points[0];
-          var minY = points[1];
-          var maxY = points[1];
-          var x, y;
-          for (var i = 0; i < points.length / 2; i++) {
+          let minX = points[0];
+          let maxX = points[0];
+          let minY = points[1];
+          let maxY = points[1];
+          let x, y;
+          for (let i = 0; i < points.length / 2; i++) {
               x = points[i * 2];
               y = points[i * 2 + 1];
@@ -11075 +11078 @@
   const binomialCoefficients = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1]];
   const getCubicArcLength = (xs, ys, t) => {
-      let z;
       let sum;
       let correctedT;
@@ -11082 +11084 @@
           }*/
       const n = 20;
-      z = t / 2;
+      const z = t / 2;
       sum = 0;
       for (let i = 0; i < n; i++) {
@@ -11292 +11294 @@
       }
       _sceneFunc(context) {
-          var ca = this.dataArray;
+          const ca = this.dataArray;
           // context position
           context.beginPath();
-          var isClosed = false;
-          for (var n = 0; n < ca.length; n++) {
-              var c = ca[n].command;
-              var p = ca[n].points;
+          let isClosed = false;
+          for (let n = 0; n < ca.length; n++) {
+              const c = ca[n].command;
+              const p = ca[n].points;
               switch (c) {
                   case 'L':
@@ -11339 +11341 @@
       }
       getSelfRect() {
-          var points = [];
+          let points = [];
           this.dataArray.forEach(function (data) {
               if (data.command === 'A') {
                   // Approximates by breaking curve into line segments
-                  var start = data.points[4];
+                  const start = data.points[4];
                   // 4 = theta
-                  var dTheta = data.points[5];
+                  const dTheta = data.points[5];
                   // 5 = dTheta
-                  var end = data.points[4] + dTheta;
-                  var inc = Math.PI / 180.0;
+                  const end = data.points[4] + dTheta;
+                  let inc = Math.PI / 180.0;
                   // 1 degree resolution
                   if (Math.abs(start - end) < inc) {
@@ -11380 +11382 @@
               }
           });
-          var minX = points[0];
-          var maxX = points[0];
-          var minY = points[1];
-          var maxY = points[1];
-          var x, y;
-          for (var i = 0; i < points.length / 2; i++) {
+          let minX = points[0];
+          let maxX = points[0];
+          let minY = points[1];
+          let maxY = points[1];
+          let x, y;
+          for (let i = 0; i < points.length / 2; i++) {
               x = points[i * 2];
               y = points[i * 2 + 1];
@@ -11433 +11435 @@
       static getPathLength(dataArray) {
           let pathLength = 0;
-          for (var i = 0; i < dataArray.length; ++i) {
+          for (let i = 0; i < dataArray.length; ++i) {
               pathLength += dataArray[i].pathLength;
           }
@@ -11439 +11441 @@
       }
       static getPointAtLengthOfDataArray(length, dataArray) {
-          var point, i = 0, ii = dataArray.length;
+          let points, i = 0, ii = dataArray.length;
           if (!ii) {
               return null;
@@ -11448 +11450 @@
           }
           if (i === ii) {
-              point = dataArray[i - 1].points.slice(-2);
+              points = dataArray[i - 1].points.slice(-2);
               return {
-                  x: point[0],
-                  y: point[1],
+                  x: points[0],
+                  y: points[1],
               };
           }
           if (length < 0.01) {
-              point = dataArray[i].points.slice(0, 2);
+              points = dataArray[i].points.slice(0, 2);
               return {
-                  x: point[0],
-                  y: point[1],
+                  x: points[0],
+                  y: points[1],
               };
           }
-          var cp = dataArray[i];
-          var p = cp.points;
+          const cp = dataArray[i];
+          const p = cp.points;
           switch (cp.command) {
               case 'L':
@@ -11520 +11522 @@
               return (1 - t) * (1 - t) * (1 - t);
           }
-          var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
-          var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
+          const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
+          const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
           return {
               x: x,
@@ -11537 +11539 @@
               return (1 - t) * (1 - t);
           }
-          var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
-          var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
+          const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
+          const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
           return {
               x: x,
@@ -11545 +11547 @@
       }
       static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) {
-          var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
-          var pt = {
+          const cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
+          const pt = {
               x: rx * Math.cos(theta),
               y: ry * Math.sin(theta),
@@ -11588 +11590 @@
           }
           // command string
-          var cs = data;
+          let cs = data;
           // command chars
-          var cc = [
+          const cc = [
               'm',
               'M',
@@ -11619 +11621 @@
           }
           // create array
-          var arr = cs.split('|');
-          var ca = [];
-          var coords = [];
+          const arr = cs.split('|');
+          const ca = [];
+          const coords = [];
           // init context point
-          var cpx = 0;
-          var cpy = 0;
-          var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
-          var match;
+          let cpx = 0;
+          let cpy = 0;
+          const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
+          let match;
           for (n = 1; n < arr.length; n++) {
-              var str = arr[n];
-              var c = str.charAt(0);
+              let str = arr[n];
+              let c = str.charAt(0);
               str = str.slice(1);
               coords.length = 0;
@@ -11638 +11640 @@
               //   coords.push(match[0]);
               // }
-              var p = [];
-              for (var j = 0, jlen = coords.length; j < jlen; j++) {
+              const p = [];
+              for (let j = 0, jlen = coords.length; j < jlen; j++) {
                   // extra case for merged flags
                   if (coords[j] === '00') {
@@ -11645 +11647 @@
                       continue;
                   }
-                  var parsed = parseFloat(coords[j]);
+                  const parsed = parseFloat(coords[j]);
                   if (!isNaN(parsed)) {
                       p.push(parsed);
@@ -11658 +11660 @@
                       break;
                   }
-                  var cmd = '';
-                  var points = [];
-                  var startX = cpx, startY = cpy;
+                  let cmd = '';
+                  let points = [];
+                  const startX = cpx, startY = cpy;
                   // Move var from within the switch to up here (jshint)
                   var prevCmd, ctlPtx, ctlPty; // Ss, Tt
@@ -11688 +11690 @@
                           // 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--) {
+                              for (let idx = ca.length - 2; idx >= 0; idx--) {
                                   if (ca[idx].command === 'M') {
                                       cpx = ca[idx].points[0] + dx;
@@ -11857 +11859 @@
       }
       static calcLength(x, y, cmd, points) {
-          var len, p1, p2, t;
-          var path = Path;
+          let len, p1, p2, t;
+          const path = Path;
           switch (cmd) {
               case 'L':
@@ -11905 +11907 @@
       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 +
+          const psi = psiDeg * (Math.PI / 180.0);
+          const xp = (Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
+          const yp = (-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
               (Math.cos(psi) * (y1 - y2)) / 2.0;
-          var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
+          const lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
           if (lambda > 1) {
               rx *= Math.sqrt(lambda);
               ry *= Math.sqrt(lambda);
           }
-          var f = Math.sqrt((rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /
+          let f = Math.sqrt((rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /
               (rx * rx * (yp * yp) + ry * ry * (xp * xp)));
           if (fa === fs) {
@@ -11922 +11924 @@
               f = 0;
           }
-          var cxp = (f * rx * yp) / ry;
-          var cyp = (f * -ry * xp) / rx;
-          var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
-          var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
-          var vMag = function (v) {
+          const cxp = (f * rx * yp) / ry;
+          const cyp = (f * -ry * xp) / rx;
+          const cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
+          const cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
+          const vMag = function (v) {
               return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
           };
-          var vRatio = function (u, v) {
+          const vRatio = function (u, v) {
               return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
           };
-          var vAngle = function (u, v) {
+          const vAngle = function (u, v) {
               return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
           };
-          var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
-          var u = [(xp - cxp) / rx, (yp - cyp) / ry];
-          var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
-          var dTheta = vAngle(u, v);
+          const theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
+          const u = [(xp - cxp) / rx, (yp - cyp) / ry];
+          const v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
+          let dTheta = vAngle(u, v);
           if (vRatio(u, v) <= -1) {
               dTheta = Math.PI;
@@ -12074 +12076 @@
       _sceneFunc(ctx) {
           super._sceneFunc(ctx);
-          var PI2 = Math.PI * 2;
-          var points = this.points();
-          var tp = points;
-          var fromTension = this.tension() !== 0 && points.length > 4;
+          const PI2 = Math.PI * 2;
+          const points = this.points();
+          let tp = points;
+          const fromTension = this.tension() !== 0 && points.length > 4;
           if (fromTension) {
               tp = this.getTensionPoints();
           }
-          var length = this.pointerLength();
-          var n = points.length;
-          var dx, dy;
+          const length = this.pointerLength();
+          const n = points.length;
+          let dx, dy;
           if (fromTension) {
               const lp = [
@@ -12102 +12104 @@
               dy = points[n - 1] - points[n - 3];
           }
-          var radians = (Math.atan2(dy, dx) + PI2) % PI2;
-          var width = this.pointerWidth();
+          const radians = (Math.atan2(dy, dx) + PI2) % PI2;
+          const width = this.pointerWidth();
           if (this.pointerAtEnding()) {
               ctx.save();
@@ -12140 +12142 @@
           // here is a tricky part
           // we need to disable dash for arrow pointers
-          var isDashEnabled = this.dashEnabled();
+          const isDashEnabled = this.dashEnabled();
           if (isDashEnabled) {
               // manually disable dash for head
@@ -12450 +12452 @@
   class Ellipse extends Shape {
       _sceneFunc(context) {
-          var rx = this.radiusX(), ry = this.radiusY();
+          const rx = this.radiusX(), ry = this.radiusY();
           context.beginPath();
           context.save();
@@ -12697 +12699 @@
       }
       _hitFunc(context) {
-          var width = this.width(), height = this.height(), cornerRadius = this.cornerRadius();
+          const width = this.width(), height = this.height(), cornerRadius = this.cornerRadius();
           context.beginPath();
           if (!cornerRadius) {
@@ -12731 +12733 @@
        */
       static fromURL(url, callback, onError = null) {
-          var img = Util.createImageElement();
+          const img = Util.createImageElement();
           img.onload = function () {
-              var image = new Image({
+              const image = new Image({
                   image: img,
               });
@@ -12858 +12860 @@
 
   // constants
-  var ATTR_CHANGE_LIST$2 = [
+  const ATTR_CHANGE_LIST$2 = [
       'fontFamily',
       'fontSize',
@@ -12959 +12961 @@
       }
       _addListeners(text) {
-          var that = this, n;
-          var func = function () {
+          let that = this, n;
+          const func = function () {
               that._sync();
           };
@@ -12975 +12977 @@
       }
       _sync() {
-          var text = this.getText(), tag = this.getTag(), width, height, pointerDirection, pointerWidth, x, y, pointerHeight;
+          let text = this.getText(), tag = this.getTag(), width, height, pointerDirection, pointerWidth, x, y, pointerHeight;
           if (text && tag) {
               width = text.width();
@@ -13031 +13033 @@
   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();
+          const width = this.width(), height = this.height(), pointerDirection = this.pointerDirection(), pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), cornerRadius = this.cornerRadius();
           let topLeft = 0;
           let topRight = 0;
@@ -13083 +13085 @@
       }
       getSelfRect() {
-          var x = 0, y = 0, pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), direction = this.pointerDirection(), width = this.width(), height = this.height();
+          let x = 0, y = 0, pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), direction = this.pointerDirection(), width = this.width(), height = this.height();
           if (direction === UP) {
               y -= pointerHeight;
@@ -13246 +13248 @@
   class Rect extends Shape {
       _sceneFunc(context) {
-          var cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
+          const cornerRadius = this.cornerRadius(), width = this.width(), height = this.height();
           context.beginPath();
           if (!cornerRadius) {
@@ -13378 +13380 @@
           context.beginPath();
           context.moveTo(points[0].x, points[0].y);
-          for (var n = 1; n < points.length; n++) {
+          for (let n = 1; n < points.length; n++) {
               context.lineTo(points[n].x, points[n].y);
           }
@@ -13388 +13390 @@
           const radius = this.attrs.radius || 0;
           const points = [];
-          for (var n = 0; n < sides; n++) {
+          for (let n = 0; n < sides; n++) {
               points.push({
                   x: radius * Math.sin((n * 2 * Math.PI) / sides),
@@ -13398 +13400 @@
       getSelfRect() {
           const points = this._getPoints();
-          var minX = points[0].x;
-          var maxX = points[0].y;
-          var minY = points[0].x;
-          var maxY = points[0].y;
+          let minX = points[0].x;
+          let maxX = points[0].y;
+          let minY = points[0].x;
+          let maxY = points[0].y;
           points.forEach((point) => {
               minX = Math.min(minX, point.x);
@@ -13461 +13463 @@
   Factory.addGetterSetter(RegularPolygon, 'sides', 0, getNumberValidator());
 
-  var PIx2 = Math.PI * 2;
+  const PIx2 = Math.PI * 2;
   /**
    * Ring constructor
@@ -13733 +13735 @@
           this.anim = new Animation(() => {
               // if we don't need to redraw layer we should return false
-              var updated = this._updated;
+              const updated = this._updated;
               this._updated = false;
               return updated;
@@ -13754 +13756 @@
       }
       _sceneFunc(context) {
-          var anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), x = set[ix4 + 0], y = set[ix4 + 1], width = set[ix4 + 2], height = set[ix4 + 3], image = this.image();
+          const anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), x = set[ix4 + 0], y = set[ix4 + 1], width = set[ix4 + 2], height = set[ix4 + 3], image = this.image();
           if (this.hasFill() || this.hasStroke()) {
               context.beginPath();
@@ -13763 +13765 @@
           if (image) {
               if (offsets) {
-                  var offset = offsets[anim], ix2 = index * 2;
+                  const offset = offsets[anim], ix2 = index * 2;
                   context.drawImage(image, x, y, width, height, offset[ix2 + 0], offset[ix2 + 1], width, height);
               }
@@ -13772 +13774 @@
       }
       _hitFunc(context) {
-          var anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), width = set[ix4 + 2], height = set[ix4 + 3];
+          const anim = this.animation(), index = this.frameIndex(), ix4 = index * 4, set = this.animations()[anim], offsets = this.frameOffsets(), width = set[ix4 + 2], height = set[ix4 + 3];
           context.beginPath();
           if (offsets) {
-              var offset = offsets[anim];
-              var ix2 = index * 2;
+              const offset = offsets[anim];
+              const ix2 = index * 2;
               context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);
           }
@@ -13789 +13791 @@
       }
       _setInterval() {
-          var that = this;
+          const that = this;
           this.interval = setInterval(function () {
               that._updateIndex();
@@ -13803 +13805 @@
               return;
           }
-          var layer = this.getLayer();
+          const layer = this.getLayer();
           /*
            * animation object has no executable function because
@@ -13833 +13835 @@
       }
       _updateIndex() {
-          var index = this.frameIndex(), animation = this.animation(), animations = this.animations(), anim = animations[animation], len = anim.length / 4;
+          const index = this.frameIndex(), animation = this.animation(), animations = this.animations(), anim = animations[animation], len = anim.length / 4;
           if (index < len - 1) {
               this.frameIndex(index + 1);
@@ -14072 +14074 @@
   class Star extends Shape {
       _sceneFunc(context) {
-          var innerRadius = this.innerRadius(), outerRadius = this.outerRadius(), numPoints = this.numPoints();
+          const innerRadius = this.innerRadius(), outerRadius = this.outerRadius(), numPoints = this.numPoints();
           context.beginPath();
           context.moveTo(0, 0 - outerRadius);
-          for (var n = 1; n < numPoints * 2; n++) {
-              var radius = n % 2 === 0 ? outerRadius : innerRadius;
-              var x = radius * Math.sin((n * Math.PI) / numPoints);
-              var y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
+          for (let n = 1; n < numPoints * 2; n++) {
+              const radius = n % 2 === 0 ? outerRadius : innerRadius;
+              const x = radius * Math.sin((n * Math.PI) / numPoints);
+              const y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
               context.lineTo(x, y);
           }
@@ -14145 +14147 @@
 
   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);
+      // Use Unicode-aware splitting
+      return [...string].reduce((acc, char, index, array) => {
+          // Handle emoji sequences (including ZWJ sequences)
+          if (/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?(?:\u200D\p{Emoji_Presentation})+/u.test(char)) {
+              acc.push(char);
+          }
+          // Handle regional indicator symbols (flags)
+          else if (/\p{Regional_Indicator}{2}/u.test(char + (array[index + 1] || ''))) {
+              acc.push(char + array[index + 1]);
+          }
+          // Handle Indic scripts and other combining characters
+          else if (index > 0 && /\p{Mn}|\p{Me}|\p{Mc}/u.test(char)) {
+              acc[acc.length - 1] += char;
+          }
+          // Handle other characters
+          else {
+              acc.push(char);
+          }
+          return acc;
+      }, []);
   }
   // constants
-  var AUTO = 'auto', 
+  const AUTO = 'auto', 
   //CANVAS = 'canvas',
   CENTER = 'center', INHERIT = 'inherit', 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', RTL = 'rtl', WORD = 'word', CHAR = 'char', NONE = 'none', ELLIPSIS = '…', ATTR_CHANGE_LIST$1 = [
@@ -14187 +14204 @@
           .join(', ');
   }
-  var dummyContext;
+  let dummyContext;
   function getDummyContext() {
       if (dummyContext) {
@@ -14321 +14338 @@
           this._partialTextY = 0;
           // update text data for certain attr changes
-          for (var n = 0; n < attrChangeListLen; n++) {
+          for (let n = 0; n < attrChangeListLen; n++) {
               this.on(ATTR_CHANGE_LIST$1[n] + CHANGE_KONVA, this._setTextData);
           }
@@ -14327 +14344 @@
       }
       _sceneFunc(context) {
-          var textArr = this.textArr, textArrLen = textArr.length;
+          const textArr = this.textArr, textArrLen = textArr.length;
           if (!this.text()) {
               return;
           }
-          var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
+          let padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, verticalAlign = this.verticalAlign(), direction = this.direction(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
           direction = direction === INHERIT ? context.direction : direction;
-          var translateY = lineHeightPx / 2;
-          var baseline = MIDDLE;
+          let translateY = lineHeightPx / 2;
+          let baseline = MIDDLE;
           if (Konva$2._fixTextRendering) {
-              var metrics = this.measureSize('M'); // Use a sample character to get the ascent
+              const metrics = this.measureSize('M'); // Use a sample character to get the ascent
               baseline = 'alphabetic';
               translateY =
@@ -14374 +14391 @@
                   context.save();
                   context.beginPath();
-                  let yOffset = Konva$2._fixTextRendering
+                  const yOffset = Konva$2._fixTextRendering
                       ? Math.round(fontSize / 4)
                       : Math.round(fontSize / 2);
@@ -14396 +14413 @@
                   context.save();
                   context.beginPath();
-                  let yOffset = Konva$2._fixTextRendering ? -Math.round(fontSize / 4) : 0;
+                  const yOffset = Konva$2._fixTextRendering ? -Math.round(fontSize / 4) : 0;
                   context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
                   spacesNumber = text.split(' ').length - 1;
@@ -14417 +14434 @@
                   //   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];
+                  const array = stringToArray(text);
+                  for (let li = 0; li < array.length; li++) {
+                      const letter = array[li];
                       // skip justify for the last line
                       if (letter === ' ' && !lastLine && align === JUSTIFY) {
@@ -14451 +14468 @@
       }
       _hitFunc(context) {
-          var width = this.getWidth(), height = this.getHeight();
+          const width = this.getWidth(), height = this.getHeight();
           context.beginPath();
           context.rect(0, 0, width, height);
@@ -14458 +14475 @@
       }
       setText(text) {
-          var str = Util._isString(text)
+          const str = Util._isString(text)
               ? text
               : text === null || text === undefined
@@ -14467 +14484 @@
       }
       getWidth() {
-          var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
+          const isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
           return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
       }
       getHeight() {
-          var isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
+          const isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
           return isAuto
               ? this.fontSize() * this.textArr.length * this.lineHeight() +
@@ -14495 +14512 @@
        * @method
        * @name Konva.Text#measureSize
-       * @param {String} [text] text to measure
-       * @returns {Object} { width , height} of measured text
+       * @param {String} text text to measure
+       * @returns {Object} { width , height } of measured text
        */
       measureSize(text) {
           var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-          var _context = getDummyContext(), fontSize = this.fontSize(), metrics;
+          let _context = getDummyContext(), fontSize = this.fontSize(), metrics;
           _context.save();
           _context.font = this._getContextFont();
@@ -14538 +14555 @@
               line = line.trim();
           }
-          var width = this._getTextWidth(line);
+          const width = this._getTextWidth(line);
           return this.textArr.push({
               text: line,
@@ -14546 +14563 @@
       }
       _getTextWidth(text) {
-          var letterSpacing = this.letterSpacing();
-          var length = text.length;
+          const letterSpacing = this.letterSpacing();
+          const length = text.length;
           return (getDummyContext().measureText(text).width +
               (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(), 
+          let 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;
-          for (var i = 0, max = lines.length; i < max; ++i) {
-              var line = lines[i];
-              var lineWidth = this._getTextWidth(line);
+          const additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
+          for (let i = 0, max = lines.length; i < max; ++i) {
+              let line = lines[i];
+              let lineWidth = this._getTextWidth(line);
               if (fixedWidth && lineWidth > maxWidth) {
                   /*
@@ -14571 +14588 @@
                        * that would fit in the specified width
                        */
-                      var low = 0, high = line.length, match = '', matchWidth = 0;
+                      let 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;
+                          const mid = (low + high) >>> 1, substr = line.slice(0, mid + 1), substrWidth = this._getTextWidth(substr) + additionalWidth;
                           if (substrWidth <= maxWidth) {
                               low = mid + 1;
@@ -14593 +14610 @@
                               // 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;
+                              const nextChar = line[match.length];
+                              const nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
                               if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
                                   wrapIndex = match.length;
@@ -14616 +14633 @@
                           textWidth = Math.max(textWidth, matchWidth);
                           currentHeightPx += lineHeightPx;
-                          var shouldHandleEllipsis = this._shouldHandleEllipsis(currentHeightPx);
+                          const shouldHandleEllipsis = this._shouldHandleEllipsis(currentHeightPx);
                           if (shouldHandleEllipsis) {
                               this._tryToAddEllipsisToLastLine();
@@ -14677 +14694 @@
        */
       _shouldHandleEllipsis(currentHeightPx) {
-          var fontSize = +this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, height = this.attrs.height, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxHeightPx = height - padding * 2, wrap = this.wrap(), shouldWrap = wrap !== NONE;
+          const fontSize = +this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, height = this.attrs.height, fixedHeight = height !== AUTO && height !== undefined, padding = this.padding(), maxHeightPx = height - padding * 2, wrap = this.wrap(), shouldWrap = wrap !== NONE;
           return (!shouldWrap ||
               (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx));
       }
       _tryToAddEllipsisToLastLine() {
-          var width = this.attrs.width, fixedWidth = width !== AUTO && width !== undefined, padding = this.padding(), maxWidth = width - padding * 2, shouldAddEllipsis = this.ellipsis();
-          var lastLine = this.textArr[this.textArr.length - 1];
+          const width = this.attrs.width, fixedWidth = width !== AUTO && width !== undefined, padding = this.padding(), maxWidth = width - padding * 2, shouldAddEllipsis = this.ellipsis();
+          const lastLine = this.textArr[this.textArr.length - 1];
           if (!lastLine || !shouldAddEllipsis) {
               return;
           }
           if (fixedWidth) {
-              var haveSpace = this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
+              const haveSpace = this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
               if (!haveSpace) {
                   lastLine.text = lastLine.text.slice(0, lastLine.text.length - 3);
@@ -14962 +14979 @@
   Factory.addGetterSetter(Text, 'textDecoration', '');
 
-  var EMPTY_STRING = '', NORMAL = 'normal';
+  const EMPTY_STRING = '', NORMAL = 'normal';
   function _fillFunc(context) {
       context.fillText(this.partialText, 0, 0);
@@ -15124 +15141 @@
           context.setAttr('textAlign', 'left');
           context.save();
-          var textDecoration = this.textDecoration();
-          var fill = this.fill();
-          var fontSize = this.fontSize();
-          var glyphInfo = this.glyphInfo;
+          const textDecoration = this.textDecoration();
+          const fill = this.fill();
+          const fontSize = this.fontSize();
+          const glyphInfo = this.glyphInfo;
           if (textDecoration === 'underline') {
               context.beginPath();
           }
-          for (var i = 0; i < glyphInfo.length; i++) {
+          for (let i = 0; i < glyphInfo.length; i++) {
               context.save();
-              var p0 = glyphInfo[i].p0;
+              const p0 = glyphInfo[i].p0;
               context.translate(p0.x, p0.y);
               context.rotate(glyphInfo[i].rotation);
@@ -15163 +15180 @@
       _hitFunc(context) {
           context.beginPath();
-          var glyphInfo = this.glyphInfo;
+          const glyphInfo = this.glyphInfo;
           if (glyphInfo.length >= 1) {
-              var p0 = glyphInfo[0].p0;
+              const p0 = glyphInfo[0].p0;
               context.moveTo(p0.x, p0.y);
           }
-          for (var i = 0; i < glyphInfo.length; i++) {
-              var p1 = glyphInfo[i].p1;
+          for (let i = 0; i < glyphInfo.length; i++) {
+              const p1 = glyphInfo[i].p1;
               context.lineTo(p1.x, p1.y);
           }
@@ -15195 +15212 @@
       }
       _getTextSize(text) {
-          var dummyCanvas = this.dummyCanvas;
-          var _context = dummyCanvas.getContext('2d');
+          const dummyCanvas = this.dummyCanvas;
+          const _context = dummyCanvas.getContext('2d');
           _context.save();
           _context.font = this._getContextFont();
-          var metrics = _context.measureText(text);
+          const metrics = _context.measureText(text);
           _context.restore();
           return {
@@ -15233 +15250 @@
           // 4. Add glyph width to the offsetToGlyph and repeat
           let offsetToGlyph = offset;
-          for (var i = 0; i < charArr.length; i++) {
+          for (let i = 0; i < charArr.length; i++) {
               const charStartPoint = this._getPointAtLength(offsetToGlyph);
               if (!charStartPoint)
@@ -15281 +15298 @@
               };
           }
-          var points = [];
+          const points = [];
           this.glyphInfo.forEach(function (info) {
               points.push(info.p0.x);
@@ -15288 +15305 @@
               points.push(info.p1.y);
           });
-          var minX = points[0] || 0;
-          var maxX = points[0] || 0;
-          var minY = points[1] || 0;
-          var maxY = points[1] || 0;
-          var x, y;
-          for (var i = 0; i < points.length / 2; i++) {
+          let minX = points[0] || 0;
+          let maxX = points[0] || 0;
+          let minY = points[1] || 0;
+          let maxY = points[1] || 0;
+          let x, y;
+          for (let i = 0; i < points.length / 2; i++) {
               x = points[i * 2];
               y = points[i * 2 + 1];
@@ -15301 +15318 @@
               maxY = Math.max(maxY, y);
           }
-          var fontSize = this.fontSize();
+          const fontSize = this.fontSize();
           return {
               x: minX - fontSize / 2,
@@ -15484 +15501 @@
   Factory.addGetterSetter(TextPath, 'kerningFunc', null);
 
-  var EVENTS_NAME = 'tr-konva';
-  var ATTR_CHANGE_LIST = [
+  const EVENTS_NAME = 'tr-konva';
+  const ATTR_CHANGE_LIST = [
       'resizeEnabledChange',
       'rotateAnchorOffsetChange',
@@ -15504 +15521 @@
       .map((e) => e + `.${EVENTS_NAME}`)
       .join(' ');
-  var NODES_RECT = 'nodesRect';
-  var TRANSFORM_CHANGE_STR = [
+  const NODES_RECT = 'nodesRect';
+  const TRANSFORM_CHANGE_STR = [
       'widthChange',
       'heightChange',
@@ -15518 +15535 @@
       'strokeWidthChange',
   ];
-  var ANGLES = {
+  const ANGLES = {
       'top-left': -45,
       'top-center': 0,
@@ -15534 +15551 @@
       }
       rad += Util.degToRad(ANGLES[anchorName] || 0);
-      var angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
+      const angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
       if (Util._inRange(angle, 315 + 22.5, 360) || Util._inRange(angle, 0, 22.5)) {
           // TOP
@@ -15573 +15590 @@
       }
   }
-  var ANCHORS_NAMES = [
+  const ANCHORS_NAMES = [
       'top-left',
       'top-center',
@@ -15583 +15600 @@
       'bottom-right',
   ];
-  var MAX_SAFE_INTEGER = 100000000;
+  const MAX_SAFE_INTEGER = 100000000;
   function getCenter(shape) {
       return {
@@ -15745 +15762 @@
           // we may need it if we set node in initial props
           // so elements are not defined yet
-          var elementsCreated = !!this.findOne('.top-left');
+          const elementsCreated = !!this.findOne('.top-left');
           if (elementsCreated) {
               this.update();
@@ -15840 +15857 @@
       // return absolute rotated bounding rectangle
       __getNodeShape(node, rot = this.rotation(), relative) {
-          var rect = node.getClientRect({
+          const rect = node.getClientRect({
               skipTransform: true,
               skipShadow: true,
               skipStroke: this.ignoreStroke(),
           });
-          var absScale = node.getAbsoluteScale(relative);
-          var absPos = node.getAbsolutePosition(relative);
-          var dx = rect.x * absScale.x - node.offsetX() * absScale.x;
-          var dy = rect.y * absScale.y - node.offsetY() * absScale.y;
+          const absScale = node.getAbsoluteScale(relative);
+          const absPos = node.getAbsolutePosition(relative);
+          const dx = rect.x * absScale.x - node.offsetX() * absScale.x;
+          const dy = rect.y * absScale.y - node.offsetY() * absScale.y;
           const rotation = (Konva$2.getAngle(node.getAbsoluteRotation()) + Math.PI * 2) %
               (Math.PI * 2);
@@ -15865 +15882 @@
       // returns box + rotation of all shapes
       __getNodeRect() {
-          var node = this.getNode();
+          const node = this.getNode();
           if (!node) {
               return {
@@ -15882 +15899 @@
                   skipStroke: this.ignoreStroke(),
               });
-              var points = [
+              const points = [
                   { x: box.x, y: box.y },
                   { x: box.x + box.width, y: box.y },
@@ -15888 +15905 @@
                   { x: box.x, y: box.y + box.height },
               ];
-              var trans = node.getAbsoluteTransform();
+              const trans = node.getAbsoluteTransform();
               points.forEach(function (point) {
-                  var transformed = trans.point(point);
+                  const transformed = trans.point(point);
                   totalPoints.push(transformed);
               });
@@ -15896 +15913 @@
           const tr = new Transform();
           tr.rotate(-Konva$2.getAngle(this.rotation()));
-          var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+          let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
           totalPoints.forEach(function (point) {
-              var transformed = tr.point(point);
+              const transformed = tr.point(point);
               if (minX === undefined) {
                   minX = maxX = transformed.x;
@@ -15946 +15963 @@
       }
       _createAnchor(name) {
-          var anchor = new Rect({
+          const anchor = new Rect({
               stroke: 'rgb(0, 161, 255)',
               fill: 'white',
@@ -15957 +15974 @@
               hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
           });
-          var self = this;
+          const self = this;
           anchor.on('mousedown touchstart', function (e) {
               self._handleMouseDown(e);
@@ -15970 +15987 @@
           // add hover styling
           anchor.on('mouseenter', () => {
-              var rad = Konva$2.getAngle(this.rotation());
-              var rotateCursor = this.rotateAnchorCursor();
-              var cursor = getCursor(name, rad, rotateCursor);
+              const rad = Konva$2.getAngle(this.rotation());
+              const rotateCursor = this.rotateAnchorCursor();
+              const cursor = getCursor(name, rad, rotateCursor);
               anchor.getStage().content &&
                   (anchor.getStage().content.style.cursor = cursor);
@@ -15985 +16002 @@
       }
       _createBack() {
-          var back = new Shape({
+          const back = new Shape({
               name: 'back',
               width: 0,
@@ -15991 +16008 @@
               draggable: true,
               sceneFunc(ctx, shape) {
-                  var tr = shape.getParent();
-                  var padding = tr.padding();
+                  const tr = shape.getParent();
+                  const padding = tr.padding();
                   ctx.beginPath();
                   ctx.rect(-padding, -padding, shape.width() + padding * 2, shape.height() + padding * 2);
@@ -16005 +16022 @@
                       return;
                   }
-                  var padding = this.padding();
+                  const padding = this.padding();
                   ctx.beginPath();
                   ctx.rect(-padding, -padding, shape.width() + padding * 2, shape.height() + padding * 2);
@@ -16037 +16054 @@
           }
           this._movingAnchorName = e.target.name().split(' ')[0];
-          var attrs = this._getNodeRect();
-          var width = attrs.width;
-          var height = attrs.height;
-          var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+          const attrs = this._getNodeRect();
+          const width = attrs.width;
+          const height = attrs.height;
+          const hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
           this.sin = Math.abs(height / hypotenuse);
           this.cos = Math.abs(width / hypotenuse);
@@ -16050 +16067 @@
           }
           this._transforming = true;
-          var ap = e.target.getAbsolutePosition();
-          var pos = e.target.getStage().getPointerPosition();
+          const ap = e.target.getAbsolutePosition();
+          const pos = e.target.getStage().getPointerPosition();
           this._anchorDragOffset = {
               x: pos.x - ap.x,
@@ -16063 +16080 @@
       }
       _handleMouseMove(e) {
-          var x, y, newHypotenuse;
-          var anchorNode = this.findOne('.' + this._movingAnchorName);
-          var stage = anchorNode.getStage();
+          let x, y, newHypotenuse;
+          const anchorNode = this.findOne('.' + this._movingAnchorName);
+          const stage = anchorNode.getStage();
           stage.setPointersPositions(e);
           const pp = stage.getPointerPosition();
@@ -16084 +16101 @@
           // rotater is working very differently, so do it first
           if (this._movingAnchorName === 'rotater') {
-              var attrs = this._getNodeRect();
+              const attrs = this._getNodeRect();
               x = anchorNode.x() - attrs.width / 2;
               y = -anchorNode.y() + attrs.height / 2;
@@ -16092 +16109 @@
                   delta -= Math.PI;
               }
-              var oldRotation = Konva$2.getAngle(this.rotation());
+              const oldRotation = Konva$2.getAngle(this.rotation());
               const newRotation = oldRotation + delta;
               const tol = Konva$2.getAngle(this.rotationSnapTolerance());
@@ -16101 +16118 @@
               return;
           }
-          var shiftBehavior = this.shiftBehavior();
-          var keepProportion;
+          const shiftBehavior = this.shiftBehavior();
+          let keepProportion;
           if (shiftBehavior === 'inverted') {
               keepProportion = this.keepRatio() && !e.shiftKey;
@@ -16221 +16238 @@
           var centeredScaling = this.centeredScaling() || e.altKey;
           if (centeredScaling) {
-              var topLeft = this.findOne('.top-left');
-              var bottomRight = this.findOne('.bottom-right');
-              var topOffsetX = topLeft.x();
-              var topOffsetY = topLeft.y();
-              var bottomOffsetX = this.getWidth() - bottomRight.x();
-              var bottomOffsetY = this.getHeight() - bottomRight.y();
+              const topLeft = this.findOne('.top-left');
+              const bottomRight = this.findOne('.bottom-right');
+              const topOffsetX = topLeft.x();
+              const topOffsetY = topLeft.y();
+              const bottomOffsetX = this.getWidth() - bottomRight.x();
+              const bottomOffsetY = this.getHeight() - bottomRight.y();
               bottomRight.move({
                   x: -topOffsetX,
@@ -16236 +16253 @@
               });
           }
-          var absPos = this.findOne('.top-left').getAbsolutePosition();
+          const absPos = this.findOne('.top-left').getAbsolutePosition();
           x = absPos.x;
           y = absPos.y;
-          var width = this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
-          var height = this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
+          const width = this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
+          const height = this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
           this._fitNodesInto({
               x: x,
@@ -16265 +16282 @@
                   window.removeEventListener('touchend', this._handleMouseUp, true);
               }
-              var node = this.getNode();
+              const node = this.getNode();
               activeTransformersCount--;
               this._fire('transformend', { evt: e, target: node });
@@ -16282 +16299 @@
       }
       _fitNodesInto(newAttrs, evt) {
-          var oldAttrs = this._getNodeRect();
+          const oldAttrs = this._getNodeRect();
           const minSize = 1;
           if (Util._inRange(newAttrs.width, -this.padding() * 2 - minSize, minSize)) {
@@ -16292 +16309 @@
               return;
           }
-          var t = new Transform();
+          const t = new Transform();
           t.rotate(Konva$2.getAngle(this.rotation()));
           if (this._movingAnchorName &&
@@ -16432 +16449 @@
       update() {
           var _a;
-          var attrs = this._getNodeRect();
+          const attrs = this._getNodeRect();
           this.rotation(Util._getRotation(attrs.rotation));
-          var width = attrs.width;
-          var height = attrs.height;
-          var enabledAnchors = this.enabledAnchors();
-          var resizeEnabled = this.resizeEnabled();
-          var padding = this.padding();
-          var anchorSize = this.anchorSize();
+          const width = attrs.width;
+          const height = attrs.height;
+          const enabledAnchors = this.enabledAnchors();
+          const resizeEnabled = this.resizeEnabled();
+          const padding = this.padding();
+          const anchorSize = this.anchorSize();
           const anchors = this.find('._anchor');
           anchors.forEach((node) => {
@@ -16546 +16563 @@
           if (this._transforming) {
               this._removeEvents();
-              var anchorNode = this.findOne('.' + this._movingAnchorName);
+              const anchorNode = this.findOne('.' + this._movingAnchorName);
               if (anchorNode) {
                   anchorNode.stopDrag();
@@ -16568 +16585 @@
       // overwrite clone to NOT use method from Container
       clone(obj) {
-          var node = Node.prototype.clone.call(this, obj);
+          const node = Node.prototype.clone.call(this, obj);
           return node;
       }
@@ -17266 +17283 @@
       this.next = null;
   }
-  var mul_table = [
+  const mul_table = [
       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,
@@ -17285 +17302 @@
       289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
   ];
-  var shg_table = [
+  const shg_table = [
       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,
@@ -17302 +17319 @@
   ];
   function filterGaussBlurRGBA(imageData, radius) {
-      var pixels = imageData.data, width = imageData.width, height = imageData.height;
-      var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;
-      var div = radius + radius + 1, widthMinus1 = width - 1, heightMinus1 = height - 1, radiusPlus1 = radius + 1, sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2, stackStart = new BlurStack(), stackEnd = null, stack = stackStart, stackIn = null, stackOut = null, mul_sum = mul_table[radius], shg_sum = shg_table[radius];
+      const pixels = imageData.data, width = imageData.width, height = imageData.height;
+      let x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;
+      let div = radius + radius + 1, widthMinus1 = width - 1, heightMinus1 = height - 1, radiusPlus1 = radius + 1, sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2, stackStart = new BlurStack(), stackEnd = null, stack = stackStart, stackIn = null, stackOut = null, mul_sum = mul_table[radius], shg_sum = shg_table[radius];
       for (i = 1; i < div; i++) {
           stack = stack.next = new BlurStack();
@@ -17495 +17512 @@
    */
   const Blur = function Blur(imageData) {
-      var radius = Math.round(this.blurRadius());
+      const radius = Math.round(this.blurRadius());
       if (radius > 0) {
           filterGaussBlurRGBA(imageData, radius);
@@ -17520 +17537 @@
    */
   const Brighten = function (imageData) {
-      var brightness = this.brightness() * 255, data = imageData.data, len = data.length, i;
+      let brightness = this.brightness() * 255, data = imageData.data, len = data.length, i;
       for (i = 0; i < len; i += 4) {
           // red
@@ -17552 +17569 @@
    */
   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;
+      const adjust = Math.pow((this.contrast() + 100) / 100, 2);
+      let data = imageData.data, nPixels = data.length, red = 150, green = 150, blue = 150, i;
       for (i = 0; i < nPixels; i += 4) {
           red = data[i];
@@ -17615 +17632 @@
       // 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;
+      let 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':
@@ -17653 +17670 @@
       }
       do {
-          var offsetY = (y - 1) * w4;
-          var otherY = dirY;
+          const offsetY = (y - 1) * w4;
+          let otherY = dirY;
           if (y + otherY < 1) {
               otherY = 0;
@@ -17661 +17678 @@
               otherY = 0;
           }
-          var offsetYOther = (y - 1 + otherY) * w * 4;
-          var x = w;
+          const offsetYOther = (y - 1 + otherY) * w * 4;
+          let x = w;
           do {
-              var offset = offsetY + (x - 1) * 4;
-              var otherX = dirX;
+              const offset = offsetY + (x - 1) * 4;
+              let otherX = dirX;
               if (x + otherX < 1) {
                   otherX = 0;
@@ -17672 +17689 @@
                   otherX = 0;
               }
-              var offsetOther = offsetYOther + (x - 1 + otherX) * 4;
-              var dR = data[offset] - data[offsetOther];
-              var dG = data[offset + 1] - data[offsetOther + 1];
-              var dB = data[offset + 2] - data[offsetOther + 2];
-              var dif = dR;
-              var absDif = dif > 0 ? dif : -dif;
-              var absG = dG > 0 ? dG : -dG;
-              var absB = dB > 0 ? dB : -dB;
+              const offsetOther = offsetYOther + (x - 1 + otherX) * 4;
+              const dR = data[offset] - data[offsetOther];
+              const dG = data[offset + 1] - data[offsetOther + 1];
+              const dB = data[offset + 2] - data[offsetOther + 2];
+              let dif = dR;
+              const absDif = dif > 0 ? dif : -dif;
+              const absG = dG > 0 ? dG : -dG;
+              const absB = dB > 0 ? dB : -dB;
               if (absG > absDif) {
                   dif = dG;
@@ -17688 +17705 @@
               dif *= strength;
               if (blend) {
-                  var r = data[offset] + dif;
-                  var g = data[offset + 1] + dif;
-                  var b = data[offset + 2] + dif;
+                  const r = data[offset] + dif;
+                  const g = data[offset + 1] + dif;
+                  const b = data[offset + 2] + dif;
                   data[offset] = r > 255 ? 255 : r < 0 ? 0 : r;
                   data[offset + 1] = g > 255 ? 255 : g < 0 ? 0 : g;
@@ -17696 +17713 @@
               }
               else {
-                  var grey = greyLevel - dif;
+                  let grey = greyLevel - dif;
                   if (grey < 0) {
                       grey = 0;
@@ -17744 +17761 @@
   function remap(fromValue, fromMin, fromMax, toMin, toMax) {
       // Compute the range of the data
-      var fromRange = fromMax - fromMin, toRange = toMax - toMin, toValue;
+      let 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) {
@@ -17772 +17789 @@
    */
   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;
+      let 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();
+      const enhanceAmount = this.enhance();
       if (enhanceAmount === 0) {
           return;
@@ -17818 +17835 @@
           bMin = 0;
       }
-      var rMid, rGoalMax, rGoalMin, gMid, gGoalMax, gGoalMin, bMid, bGoalMax, bGoalMin;
+      let rMid, rGoalMax, rGoalMin, gMid, gGoalMax, gGoalMin, bMid, bGoalMax, bGoalMin;
       // If the enhancement is positive - stretch the histogram
       if (enhanceAmount > 0) {
@@ -17867 +17884 @@
    */
   const Grayscale = function (imageData) {
-      var data = imageData.data, len = data.length, i, brightness;
+      let 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];
@@ -17914 +17931 @@
    */
   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;
+      let 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
@@ -17926 +17943 @@
       //[ .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);
+      const 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;
-      var r, g, b, a;
+      const 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;
+      const 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;
+      const 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;
+      let r, g, b, a;
       for (i = 0; i < nPixels; i += 4) {
           r = data[i + 0];
@@ -17956 +17973 @@
    */
   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;
+      const 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;
       // Basis for the technique used:
       // http://beesbuzz.biz/code/hsv_color_transforms.php
@@ -17968 +17985 @@
       //[ .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);
+      const 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;
-      var r, g, b, a;
-      for (i = 0; i < nPixels; i += 4) {
+      const 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;
+      const 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;
+      const 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;
+      let r, g, b, a;
+      for (let i = 0; i < nPixels; i += 4) {
           r = data[i + 0];
           g = data[i + 1];
@@ -18020 +18037 @@
    */
   const Invert = function (imageData) {
-      var data = imageData.data, len = data.length, i;
+      let data = imageData.data, len = data.length, i;
       for (i = 0; i < len; i += 4) {
           // red
@@ -18046 +18063 @@
    *  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;
+  const ToPolar = function (src, dst, opt) {
+      let 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);
+      let rad, rMax = Math.sqrt(xMid * xMid + yMid * yMid);
       x = xSize - xMid;
       y = ySize - yMid;
@@ -18055 +18072 @@
       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;
+      let 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;
+      let 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) {
@@ -18097 +18114 @@
    *  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;
+  const FromPolar = function (src, dst, opt) {
+      let 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);
+      let rad, rMax = Math.sqrt(xMid * xMid + yMid * yMid);
       x = xSize - xMid;
       y = ySize - yMid;
@@ -18106 +18123 @@
       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 = 0;
+      let rSize = ySize, tSize = xSize, radius, theta, phaseShift = 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;
+      let x1, y1;
       for (x = 0; x < xSize; x += 1) {
           for (y = 0; y < ySize; y += 1) {
@@ -18151 +18168 @@
    */
   const Kaleidoscope = function (imageData) {
-      var xSize = imageData.width, ySize = imageData.height;
-      var x, y, xoff, i, r, g, b, a, srcPos, dstPos;
-      var power = Math.round(this.kaleidoscopePower());
-      var angle = Math.round(this.kaleidoscopeAngle());
-      var offset = Math.floor((xSize * (angle % 360)) / 360);
+      const xSize = imageData.width, ySize = imageData.height;
+      let x, y, xoff, i, r, g, b, a, srcPos, dstPos;
+      let power = Math.round(this.kaleidoscopePower());
+      const angle = Math.round(this.kaleidoscopeAngle());
+      const offset = Math.floor((xSize * (angle % 360)) / 360);
       if (power < 1) {
           return;
       }
       // Work with our shared buffer canvas
-      var tempCanvas = Util.createCanvasElement();
+      const tempCanvas = Util.createCanvasElement();
       tempCanvas.width = xSize;
       tempCanvas.height = ySize;
-      var scratchData = tempCanvas
+      const scratchData = tempCanvas
           .getContext('2d')
           .getImageData(0, 0, xSize, ySize);
@@ -18174 +18191 @@
       // Determine how big each section will be, if it's too small
       // make it bigger
-      var minSectionSize = xSize / Math.pow(2, power);
+      let minSectionSize = xSize / Math.pow(2, power);
       while (minSectionSize <= 8) {
           minSectionSize = minSectionSize * 2;
@@ -18180 +18197 @@
       }
       minSectionSize = Math.ceil(minSectionSize);
-      var sectionSize = minSectionSize;
+      let 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;
+      let xStart = 0, xEnd = sectionSize, xDelta = 1;
       if (offset + minSectionSize > xSize) {
           xStart = sectionSize;
@@ -18245 +18262 @@
 
   function pixelAt(idata, x, y) {
-      var idx = (y * idata.width + x) * 4;
-      var d = [];
+      let idx = (y * idata.width + x) * 4;
+      const d = [];
       d.push(idata.data[idx++], idata.data[idx++], idata.data[idx++], idata.data[idx++]);
       return d;
@@ -18256 +18273 @@
   }
   function rgbMean(pTab) {
-      var m = [0, 0, 0];
-      for (var i = 0; i < pTab.length; i++) {
+      const m = [0, 0, 0];
+      for (let i = 0; i < pTab.length; i++) {
           m[0] += pTab[i][0];
           m[1] += pTab[i][1];
@@ -18268 +18285 @@
   }
   function backgroundMask(idata, threshold) {
-      var rgbv_no = pixelAt(idata, 0, 0);
-      var rgbv_ne = pixelAt(idata, idata.width - 1, 0);
-      var rgbv_so = pixelAt(idata, 0, idata.height - 1);
-      var rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
-      var thres = threshold || 10;
+      const rgbv_no = pixelAt(idata, 0, 0);
+      const rgbv_ne = pixelAt(idata, idata.width - 1, 0);
+      const rgbv_so = pixelAt(idata, 0, idata.height - 1);
+      const rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
+      const thres = threshold || 10;
       if (rgbDistance(rgbv_no, rgbv_ne) < thres &&
           rgbDistance(rgbv_ne, rgbv_se) < thres &&
@@ -18278 +18295 @@
           rgbDistance(rgbv_so, rgbv_no) < thres) {
           // Mean color
-          var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
+          const 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, [
+          const mask = [];
+          for (let i = 0; i < idata.width * idata.height; i++) {
+              const d = rgbDistance(mean, [
                   idata.data[i * 4],
                   idata.data[i * 4 + 1],
@@ -18293 +18310 @@
   }
   function applyMask(idata, mask) {
-      for (var i = 0; i < idata.width * idata.height; i++) {
+      for (let i = 0; i < idata.width * idata.height; i++) {
           idata.data[4 * i + 3] = mask[i];
       }
   }
   function erodeMask(mask, sw, sh) {
-      var weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
-      var side = Math.round(Math.sqrt(weights.length));
-      var halfSide = Math.floor(side / 2);
-      var maskResult = [];
-      for (var y = 0; y < sh; y++) {
-          for (var x = 0; x < sw; x++) {
-              var so = y * sw + x;
-              var a = 0;
-              for (var cy = 0; cy < side; cy++) {
-                  for (var cx = 0; cx < side; cx++) {
-                      var scy = y + cy - halfSide;
-                      var scx = x + cx - halfSide;
+      const weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
+      const side = Math.round(Math.sqrt(weights.length));
+      const halfSide = Math.floor(side / 2);
+      const maskResult = [];
+      for (let y = 0; y < sh; y++) {
+          for (let x = 0; x < sw; x++) {
+              const so = y * sw + x;
+              let a = 0;
+              for (let cy = 0; cy < side; cy++) {
+                  for (let cx = 0; cx < side; cx++) {
+                      const scy = y + cy - halfSide;
+                      const scx = x + cx - halfSide;
                       if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
-                          var srcOff = scy * sw + scx;
-                          var wt = weights[cy * side + cx];
+                          const srcOff = scy * sw + scx;
+                          const wt = weights[cy * side + cx];
                           a += mask[srcOff] * wt;
                       }
@@ -18323 +18340 @@
   }
   function dilateMask(mask, sw, sh) {
-      var weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
-      var side = Math.round(Math.sqrt(weights.length));
-      var halfSide = Math.floor(side / 2);
-      var maskResult = [];
-      for (var y = 0; y < sh; y++) {
-          for (var x = 0; x < sw; x++) {
-              var so = y * sw + x;
-              var a = 0;
-              for (var cy = 0; cy < side; cy++) {
-                  for (var cx = 0; cx < side; cx++) {
-                      var scy = y + cy - halfSide;
-                      var scx = x + cx - halfSide;
+      const weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+      const side = Math.round(Math.sqrt(weights.length));
+      const halfSide = Math.floor(side / 2);
+      const maskResult = [];
+      for (let y = 0; y < sh; y++) {
+          for (let x = 0; x < sw; x++) {
+              const so = y * sw + x;
+              let a = 0;
+              for (let cy = 0; cy < side; cy++) {
+                  for (let cx = 0; cx < side; cx++) {
+                      const scy = y + cy - halfSide;
+                      const scx = x + cx - halfSide;
                       if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
-                          var srcOff = scy * sw + scx;
-                          var wt = weights[cy * side + cx];
+                          const srcOff = scy * sw + scx;
+                          const wt = weights[cy * side + cx];
                           a += mask[srcOff] * wt;
                       }
@@ -18348 +18365 @@
   }
   function smoothEdgeMask(mask, sw, sh) {
-      var weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
-      var side = Math.round(Math.sqrt(weights.length));
-      var halfSide = Math.floor(side / 2);
-      var maskResult = [];
-      for (var y = 0; y < sh; y++) {
-          for (var x = 0; x < sw; x++) {
-              var so = y * sw + x;
-              var a = 0;
-              for (var cy = 0; cy < side; cy++) {
-                  for (var cx = 0; cx < side; cx++) {
-                      var scy = y + cy - halfSide;
-                      var scx = x + cx - halfSide;
+      const weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
+      const side = Math.round(Math.sqrt(weights.length));
+      const halfSide = Math.floor(side / 2);
+      const maskResult = [];
+      for (let y = 0; y < sh; y++) {
+          for (let x = 0; x < sw; x++) {
+              const so = y * sw + x;
+              let a = 0;
+              for (let cy = 0; cy < side; cy++) {
+                  for (let cx = 0; cx < side; cx++) {
+                      const scy = y + cy - halfSide;
+                      const scx = x + cx - halfSide;
                       if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
-                          var srcOff = scy * sw + scx;
-                          var wt = weights[cy * side + cx];
+                          const srcOff = scy * sw + scx;
+                          const wt = weights[cy * side + cx];
                           a += mask[srcOff] * wt;
                       }
@@ -18385 +18402 @@
   const Mask = function (imageData) {
       // Detect pixels close to the background color
-      var threshold = this.threshold(), mask = backgroundMask(imageData, threshold);
+      let threshold = this.threshold(), mask = backgroundMask(imageData, threshold);
       if (mask) {
           // Erode
@@ -18413 +18430 @@
    */
   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) {
+      const amount = this.noise() * 255, data = imageData.data, nPixels = data.length, half = amount / 2;
+      for (let i = 0; i < nPixels; i += 4) {
           data[i + 0] += half - 2 * half * Math.random();
           data[i + 1] += half - 2 * half * Math.random();
@@ -18429 +18446 @@
    */
 
-  /*eslint-disable max-depth */
   /**
    * Pixelate Filter. Averages groups of pixels and redraws
@@ -18444 +18460 @@
    */
   const Pixelate = function (imageData) {
-      var pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, height = imageData.height, x, y, i, 
+      let 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;
@@ -18530 +18546 @@
   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;
+      let 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;
@@ -18558 +18574 @@
    */
   const RGB = function (imageData) {
-      var data = imageData.data, nPixels = data.length, red = this.red(), green = this.green(), blue = this.blue(), i, brightness;
+      let 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 =
@@ -18633 +18649 @@
    */
   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;
+      const data = imageData.data, nPixels = data.length, red = this.red(), green = this.green(), blue = this.blue(), alpha = this.alpha();
+      for (let i = 0; i < nPixels; i += 4) {
+          const ia = 1 - alpha;
           data[i] = red * alpha + data[i] * ia; // r
           data[i + 1] = green * alpha + data[i + 1] * ia; // g
@@ -18722 +18738 @@
    */
   const Sepia = function (imageData) {
-      var data = imageData.data, nPixels = data.length, i, r, g, b;
+      let data = imageData.data, nPixels = data.length, i, r, g, b;
       for (i = 0; i < nPixels; i += 4) {
           r = data[i + 0];
@@ -18747 +18763 @@
    */
   const Solarize = function (imageData) {
-      var data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4, y = h;
+      const data = imageData.data, w = imageData.width, h = imageData.height, w4 = w * 4;
+      let y = h;
       do {
-          var offsetY = (y - 1) * w4;
-          var x = w;
+          const offsetY = (y - 1) * w4;
+          let x = w;
           do {
-              var offset = offsetY + (x - 1) * 4;
-              var r = data[offset];
-              var g = data[offset + 1];
-              var b = data[offset + 2];
+              const offset = offsetY + (x - 1) * 4;
+              let r = data[offset];
+              let g = data[offset + 1];
+              let b = data[offset + 2];
               if (r > 127) {
                   r = 255 - r;
@@ -18787 +18804 @@
    */
   const Threshold = function (imageData) {
-      var level = this.threshold() * 255, data = imageData.data, len = data.length, i;
-      for (i = 0; i < len; i += 1) {
+      const level = this.threshold() * 255, data = imageData.data, len = data.length;
+      for (let i = 0; i < len; i += 1) {
           data[i] = data[i] < level ? 0 : 255;
       }