@nasser-sw/fabric 7.0.1-beta7 → 7.0.1-beta9

package/debug/konva-master/src/Util.ts

@@ -0,0 +1,1123 @@
+import { Konva } from './Global.ts';
+import type { Context } from './Context.ts';
+import type { IRect, RGB, Vector2d } from './types.ts';
+
+const NODE_ERROR = `Konva.js unsupported environment.
+
+Looks like you are trying to use Konva.js in Node.js environment. because "document" object is undefined.
+
+To use Konva.js in Node.js environment, you need to use the "canvas-backend" or "skia-backend" module.
+
+bash: npm install canvas
+js: import "konva/canvas-backend";
+
+or
+
+bash: npm install skia-canvas
+js: import "konva/skia-backend";
+`;
+const ensureBrowser = () => {
+  if (typeof document === 'undefined') {
+    throw new Error(NODE_ERROR);
+  }
+};
+
+/*
+ * Last updated November 2011
+ * By Simon Sarris
+ * www.simonsarris.com
+ * sarris@acm.org
+ *
+ * Free to use and distribute at will
+ * So long as you are nice to people, etc
+ */
+/*
+ * The usage of this class was inspired by some of the work done by a forked
+ * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
+ * class.  Modified by Eric Rowell
+ */
+
+/**
+ * Transform constructor.
+ * In most of the cases you don't need to use it in your app. Because it is for internal usage in Konva core.
+ * But there is a documentation for that class in case you still want
+ * to make some manual calculations.
+ * @constructor
+ * @param {Array} [m] Optional six-element matrix
+ * @memberof Konva
+ */
+export class Transform {
+  m: Array<number>;
+  dirty = false;
+  constructor(m = [1, 0, 0, 1, 0, 0]) {
+    this.m = (m && m.slice()) || [1, 0, 0, 1, 0, 0];
+  }
+  reset() {
+    this.m[0] = 1;
+    this.m[1] = 0;
+    this.m[2] = 0;
+    this.m[3] = 1;
+    this.m[4] = 0;
+    this.m[5] = 0;
+  }
+  /**
+   * Copy Konva.Transform object
+   * @method
+   * @name Konva.Transform#copy
+   * @returns {Konva.Transform}
+   * @example
+   * const tr = shape.getTransform().copy()
+   */
+  copy() {
+    return new Transform(this.m);
+  }
+  copyInto(tr: Transform) {
+    tr.m[0] = this.m[0];
+    tr.m[1] = this.m[1];
+    tr.m[2] = this.m[2];
+    tr.m[3] = this.m[3];
+    tr.m[4] = this.m[4];
+    tr.m[5] = this.m[5];
+  }
+  /**
+   * Transform point
+   * @method
+   * @name Konva.Transform#point
+   * @param {Object} point 2D point(x, y)
+   * @returns {Object} 2D point(x, y)
+   */
+  point(point: Vector2d) {
+    const m = this.m;
+    return {
+      x: m[0] * point.x + m[2] * point.y + m[4],
+      y: m[1] * point.x + m[3] * point.y + m[5],
+    };
+  }
+  /**
+   * Apply translation
+   * @method
+   * @name Konva.Transform#translate
+   * @param {Number} x
+   * @param {Number} y
+   * @returns {Konva.Transform}
+   */
+  translate(x: number, y: number) {
+    this.m[4] += this.m[0] * x + this.m[2] * y;
+    this.m[5] += this.m[1] * x + this.m[3] * y;
+    return this;
+  }
+  /**
+   * Apply scale
+   * @method
+   * @name Konva.Transform#scale
+   * @param {Number} sx
+   * @param {Number} sy
+   * @returns {Konva.Transform}
+   */
+  scale(sx: number, sy: number) {
+    this.m[0] *= sx;
+    this.m[1] *= sx;
+    this.m[2] *= sy;
+    this.m[3] *= sy;
+    return this;
+  }
+  /**
+   * Apply rotation
+   * @method
+   * @name Konva.Transform#rotate
+   * @param {Number} rad  Angle in radians
+   * @returns {Konva.Transform}
+   */
+  rotate(rad: number) {
+    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;
+    this.m[2] = m21;
+    this.m[3] = m22;
+    return this;
+  }
+  /**
+   * Returns the translation
+   * @method
+   * @name Konva.Transform#getTranslation
+   * @returns {Object} 2D point(x, y)
+   */
+  getTranslation() {
+    return {
+      x: this.m[4],
+      y: this.m[5],
+    };
+  }
+  /**
+   * Apply skew
+   * @method
+   * @name Konva.Transform#skew
+   * @param {Number} sx
+   * @param {Number} sy
+   * @returns {Konva.Transform}
+   */
+  skew(sx: number, sy: number) {
+    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;
+    this.m[2] = m21;
+    this.m[3] = m22;
+    return this;
+  }
+  /**
+   * Transform multiplication
+   * @method
+   * @name Konva.Transform#multiply
+   * @param {Konva.Transform} matrix
+   * @returns {Konva.Transform}
+   */
+  multiply(matrix: Transform) {
+    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;
+    this.m[2] = m21;
+    this.m[3] = m22;
+    this.m[4] = dx;
+    this.m[5] = dy;
+    return this;
+  }
+  /**
+   * Invert the matrix
+   * @method
+   * @name Konva.Transform#invert
+   * @returns {Konva.Transform}
+   */
+  invert() {
+    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;
+    this.m[2] = m2;
+    this.m[3] = m3;
+    this.m[4] = m4;
+    this.m[5] = m5;
+    return this;
+  }
+  /**
+   * return matrix
+   * @method
+   * @name Konva.Transform#getMatrix
+   */
+  getMatrix() {
+    return this.m;
+  }
+  /**
+   * convert transformation matrix back into node's attributes
+   * @method
+   * @name Konva.Transform#decompose
+   * @returns {Konva.Transform}
+   */
+  decompose() {
+    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,
+      rotation: 0,
+      scaleX: 0,
+      scaleY: 0,
+      skewX: 0,
+      skewY: 0,
+    };
+
+    // Apply the QR-like decomposition.
+    if (a != 0 || b != 0) {
+      const r = Math.sqrt(a * a + b * b);
+      result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
+      result.scaleX = r;
+      result.scaleY = delta / r;
+      result.skewX = (a * c + b * d) / delta;
+      result.skewY = 0;
+    } else if (c != 0 || d != 0) {
+      const s = Math.sqrt(c * c + d * d);
+      result.rotation =
+        Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
+      result.scaleX = delta / s;
+      result.scaleY = s;
+      result.skewX = 0;
+      result.skewY = (a * c + b * d) / delta;
+    } else {
+      // a = b = c = d = 0
+    }
+
+    result.rotation = Util._getRotation(result.rotation);
+
+    return result;
+  }
+}
+
+// CONSTANTS
+const 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 = '#',
+  EMPTY_STRING = '',
+  ZERO = '0',
+  KONVA_WARNING = 'Konva warning: ',
+  KONVA_ERROR = 'Konva error: ',
+  RGB_PAREN = 'rgb(',
+  COLORS = {
+    aliceblue: [240, 248, 255],
+    antiquewhite: [250, 235, 215],
+    aqua: [0, 255, 255],
+    aquamarine: [127, 255, 212],
+    azure: [240, 255, 255],
+    beige: [245, 245, 220],
+    bisque: [255, 228, 196],
+    black: [0, 0, 0],
+    blanchedalmond: [255, 235, 205],
+    blue: [0, 0, 255],
+    blueviolet: [138, 43, 226],
+    brown: [165, 42, 42],
+    burlywood: [222, 184, 135],
+    cadetblue: [95, 158, 160],
+    chartreuse: [127, 255, 0],
+    chocolate: [210, 105, 30],
+    coral: [255, 127, 80],
+    cornflowerblue: [100, 149, 237],
+    cornsilk: [255, 248, 220],
+    crimson: [220, 20, 60],
+    cyan: [0, 255, 255],
+    darkblue: [0, 0, 139],
+    darkcyan: [0, 139, 139],
+    darkgoldenrod: [184, 132, 11],
+    darkgray: [169, 169, 169],
+    darkgreen: [0, 100, 0],
+    darkgrey: [169, 169, 169],
+    darkkhaki: [189, 183, 107],
+    darkmagenta: [139, 0, 139],
+    darkolivegreen: [85, 107, 47],
+    darkorange: [255, 140, 0],
+    darkorchid: [153, 50, 204],
+    darkred: [139, 0, 0],
+    darksalmon: [233, 150, 122],
+    darkseagreen: [143, 188, 143],
+    darkslateblue: [72, 61, 139],
+    darkslategray: [47, 79, 79],
+    darkslategrey: [47, 79, 79],
+    darkturquoise: [0, 206, 209],
+    darkviolet: [148, 0, 211],
+    deeppink: [255, 20, 147],
+    deepskyblue: [0, 191, 255],
+    dimgray: [105, 105, 105],
+    dimgrey: [105, 105, 105],
+    dodgerblue: [30, 144, 255],
+    firebrick: [178, 34, 34],
+    floralwhite: [255, 255, 240],
+    forestgreen: [34, 139, 34],
+    fuchsia: [255, 0, 255],
+    gainsboro: [220, 220, 220],
+    ghostwhite: [248, 248, 255],
+    gold: [255, 215, 0],
+    goldenrod: [218, 165, 32],
+    gray: [128, 128, 128],
+    green: [0, 128, 0],
+    greenyellow: [173, 255, 47],
+    grey: [128, 128, 128],
+    honeydew: [240, 255, 240],
+    hotpink: [255, 105, 180],
+    indianred: [205, 92, 92],
+    indigo: [75, 0, 130],
+    ivory: [255, 255, 240],
+    khaki: [240, 230, 140],
+    lavender: [230, 230, 250],
+    lavenderblush: [255, 240, 245],
+    lawngreen: [124, 252, 0],
+    lemonchiffon: [255, 250, 205],
+    lightblue: [173, 216, 230],
+    lightcoral: [240, 128, 128],
+    lightcyan: [224, 255, 255],
+    lightgoldenrodyellow: [250, 250, 210],
+    lightgray: [211, 211, 211],
+    lightgreen: [144, 238, 144],
+    lightgrey: [211, 211, 211],
+    lightpink: [255, 182, 193],
+    lightsalmon: [255, 160, 122],
+    lightseagreen: [32, 178, 170],
+    lightskyblue: [135, 206, 250],
+    lightslategray: [119, 136, 153],
+    lightslategrey: [119, 136, 153],
+    lightsteelblue: [176, 196, 222],
+    lightyellow: [255, 255, 224],
+    lime: [0, 255, 0],
+    limegreen: [50, 205, 50],
+    linen: [250, 240, 230],
+    magenta: [255, 0, 255],
+    maroon: [128, 0, 0],
+    mediumaquamarine: [102, 205, 170],
+    mediumblue: [0, 0, 205],
+    mediumorchid: [186, 85, 211],
+    mediumpurple: [147, 112, 219],
+    mediumseagreen: [60, 179, 113],
+    mediumslateblue: [123, 104, 238],
+    mediumspringgreen: [0, 250, 154],
+    mediumturquoise: [72, 209, 204],
+    mediumvioletred: [199, 21, 133],
+    midnightblue: [25, 25, 112],
+    mintcream: [245, 255, 250],
+    mistyrose: [255, 228, 225],
+    moccasin: [255, 228, 181],
+    navajowhite: [255, 222, 173],
+    navy: [0, 0, 128],
+    oldlace: [253, 245, 230],
+    olive: [128, 128, 0],
+    olivedrab: [107, 142, 35],
+    orange: [255, 165, 0],
+    orangered: [255, 69, 0],
+    orchid: [218, 112, 214],
+    palegoldenrod: [238, 232, 170],
+    palegreen: [152, 251, 152],
+    paleturquoise: [175, 238, 238],
+    palevioletred: [219, 112, 147],
+    papayawhip: [255, 239, 213],
+    peachpuff: [255, 218, 185],
+    peru: [205, 133, 63],
+    pink: [255, 192, 203],
+    plum: [221, 160, 203],
+    powderblue: [176, 224, 230],
+    purple: [128, 0, 128],
+    rebeccapurple: [102, 51, 153],
+    red: [255, 0, 0],
+    rosybrown: [188, 143, 143],
+    royalblue: [65, 105, 225],
+    saddlebrown: [139, 69, 19],
+    salmon: [250, 128, 114],
+    sandybrown: [244, 164, 96],
+    seagreen: [46, 139, 87],
+    seashell: [255, 245, 238],
+    sienna: [160, 82, 45],
+    silver: [192, 192, 192],
+    skyblue: [135, 206, 235],
+    slateblue: [106, 90, 205],
+    slategray: [119, 128, 144],
+    slategrey: [119, 128, 144],
+    snow: [255, 255, 250],
+    springgreen: [0, 255, 127],
+    steelblue: [70, 130, 180],
+    tan: [210, 180, 140],
+    teal: [0, 128, 128],
+    thistle: [216, 191, 216],
+    transparent: [255, 255, 255, 0],
+    tomato: [255, 99, 71],
+    turquoise: [64, 224, 208],
+    violet: [238, 130, 238],
+    wheat: [245, 222, 179],
+    white: [255, 255, 255],
+    whitesmoke: [245, 245, 245],
+    yellow: [255, 255, 0],
+    yellowgreen: [154, 205, 5],
+  },
+  RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
+let animQueue: Array<Function> = [];
+
+const req =
+  (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
+  function (f) {
+    setTimeout(f, 60);
+  };
+/**
+ * @namespace Util
+ * @memberof Konva
+ */
+export const Util = {
+  /*
+   * cherry-picked utilities from underscore.js
+   */
+  _isElement(obj: any): obj is Element {
+    return !!(obj && obj.nodeType == 1);
+  },
+  _isFunction(obj: any) {
+    return !!(obj && obj.constructor && obj.call && obj.apply);
+  },
+  _isPlainObject(obj: any) {
+    return !!obj && obj.constructor === Object;
+  },
+  _isArray(obj: any): obj is Array<any> {
+    return Object.prototype.toString.call(obj) === OBJECT_ARRAY;
+  },
+  _isNumber(obj: any): obj is number {
+    return (
+      Object.prototype.toString.call(obj) === OBJECT_NUMBER &&
+      !isNaN(obj) &&
+      isFinite(obj)
+    );
+  },
+  _isString(obj: any): obj is string {
+    return Object.prototype.toString.call(obj) === OBJECT_STRING;
+  },
+  _isBoolean(obj: any): obj is boolean {
+    return Object.prototype.toString.call(obj) === OBJECT_BOOLEAN;
+  },
+  // arrays are objects too
+  isObject(val: any): val is object {
+    return val instanceof Object;
+  },
+  isValidSelector(selector: any) {
+    if (typeof selector !== 'string') {
+      return false;
+    }
+    const firstChar = selector[0];
+    return (
+      firstChar === '#' ||
+      firstChar === '.' ||
+      firstChar === firstChar.toUpperCase()
+    );
+  },
+  _sign(number: number) {
+    if (number === 0) {
+      // that is not what sign usually returns
+      // but that is what we need
+      return 1;
+    }
+    if (number > 0) {
+      return 1;
+    } else {
+      return -1;
+    }
+  },
+
+  requestAnimFrame(callback: Function) {
+    animQueue.push(callback);
+    if (animQueue.length === 1) {
+      req(function () {
+        const queue = animQueue;
+        animQueue = [];
+        queue.forEach(function (cb) {
+          cb();
+        });
+      });
+    }
+  },
+  createCanvasElement() {
+    ensureBrowser();
+    const canvas = document.createElement('canvas');
+    // on some environments canvas.style is readonly
+    try {
+      (canvas as any).style = canvas.style || {};
+    } catch (e) {}
+    return canvas;
+  },
+  createImageElement() {
+    ensureBrowser();
+    return document.createElement('img');
+  },
+  _isInDocument(el: any) {
+    while ((el = el.parentNode)) {
+      if (el == document) {
+        return true;
+      }
+    }
+    return false;
+  },
+
+  /*
+   * arg can be an image object or image data
+   */
+  _urlToImage(url: string, callback: Function) {
+    // if arg is a string, then it's a data url
+    const imageObj = Util.createImageElement();
+    imageObj.onload = function () {
+      callback(imageObj);
+    };
+    imageObj.src = url;
+  },
+  _rgbToHex(r: number, g: number, b: number) {
+    return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  },
+  _hexToRgb(hex: string): RGB {
+    hex = hex.replace(HASH, EMPTY_STRING);
+    const bigint = parseInt(hex, 16);
+    return {
+      r: (bigint >> 16) & 255,
+      g: (bigint >> 8) & 255,
+      b: bigint & 255,
+    };
+  },
+  /**
+   * return random hex color
+   * @method
+   * @memberof Konva.Util
+   * @example
+   * shape.fill(Konva.Util.getRandomColor());
+   */
+  getRandomColor() {
+    let randColor = ((Math.random() * 0xffffff) << 0).toString(16);
+    while (randColor.length < 6) {
+      randColor = ZERO + randColor;
+    }
+    return HASH + randColor;
+  },
+
+  /**
+   * get RGB components of a color
+   * @method
+   * @memberof Konva.Util
+   * @param {String} color
+   * @example
+   * // each of the following examples return {r:0, g:0, b:255}
+   * var rgb = Konva.Util.getRGB('blue');
+   * var rgb = Konva.Util.getRGB('#0000ff');
+   * var rgb = Konva.Util.getRGB('rgb(0,0,255)');
+   */
+  getRGB(color: string): RGB {
+    let rgb;
+    // color string
+    if (color in COLORS) {
+      rgb = COLORS[color as keyof typeof COLORS];
+      return {
+        r: rgb[0],
+        g: rgb[1],
+        b: rgb[2],
+      };
+    } else if (color[0] === HASH) {
+      // hex
+      return this._hexToRgb(color.substring(1));
+    } else if (color.substr(0, 4) === RGB_PAREN) {
+      // rgb string
+      rgb = RGB_REGEX.exec(color.replace(/ /g, '')) as RegExpExecArray;
+      return {
+        r: parseInt(rgb[1], 10),
+        g: parseInt(rgb[2], 10),
+        b: parseInt(rgb[3], 10),
+      };
+    } else {
+      // default
+      return {
+        r: 0,
+        g: 0,
+        b: 0,
+      };
+    }
+  },
+  // convert any color string to RGBA object
+  // from https://github.com/component/color-parser
+  colorToRGBA(str: string) {
+    str = str || 'black';
+    return (
+      Util._namedColorToRBA(str) ||
+      Util._hex3ColorToRGBA(str) ||
+      Util._hex4ColorToRGBA(str) ||
+      Util._hex6ColorToRGBA(str) ||
+      Util._hex8ColorToRGBA(str) ||
+      Util._rgbColorToRGBA(str) ||
+      Util._rgbaColorToRGBA(str) ||
+      Util._hslColorToRGBA(str)
+    );
+  },
+  // Parse named css color. Like "green"
+  _namedColorToRBA(str: string) {
+    const c = COLORS[str.toLowerCase() as keyof typeof COLORS];
+    if (!c) {
+      return null;
+    }
+    return {
+      r: c[0],
+      g: c[1],
+      b: c[2],
+      a: 1,
+    };
+  },
+  // Parse rgb(n, n, n)
+  _rgbColorToRGBA(str: string) {
+    if (str.indexOf('rgb(') === 0) {
+      str = str.match(/rgb\(([^)]+)\)/)![1];
+      const parts = str.split(/ *, */).map(Number);
+      return {
+        r: parts[0],
+        g: parts[1],
+        b: parts[2],
+        a: 1,
+      };
+    }
+  },
+  // Parse rgba(n, n, n, n)
+  _rgbaColorToRGBA(str: string) {
+    if (str.indexOf('rgba(') === 0) {
+      str = str.match(/rgba\(([^)]+)\)/)![1]!;
+      const parts = str.split(/ *, */).map((n, index) => {
+        if (n.slice(-1) === '%') {
+          return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
+        }
+        return Number(n);
+      });
+      return {
+        r: parts[0],
+        g: parts[1],
+        b: parts[2],
+        a: parts[3],
+      };
+    }
+  },
+  // Parse #nnnnnnnn
+  _hex8ColorToRGBA(str: string) {
+    if (str[0] === '#' && str.length === 9) {
+      return {
+        r: parseInt(str.slice(1, 3), 16),
+        g: parseInt(str.slice(3, 5), 16),
+        b: parseInt(str.slice(5, 7), 16),
+        a: parseInt(str.slice(7, 9), 16) / 0xff,
+      };
+    }
+  },
+  // Parse #nnnnnn
+  _hex6ColorToRGBA(str: string) {
+    if (str[0] === '#' && str.length === 7) {
+      return {
+        r: parseInt(str.slice(1, 3), 16),
+        g: parseInt(str.slice(3, 5), 16),
+        b: parseInt(str.slice(5, 7), 16),
+        a: 1,
+      };
+    }
+  },
+  // Parse #nnnn
+  _hex4ColorToRGBA(str: string) {
+    if (str[0] === '#' && str.length === 5) {
+      return {
+        r: parseInt(str[1] + str[1], 16),
+        g: parseInt(str[2] + str[2], 16),
+        b: parseInt(str[3] + str[3], 16),
+        a: parseInt(str[4] + str[4], 16) / 0xff,
+      };
+    }
+  },
+  // Parse #nnn
+  _hex3ColorToRGBA(str: string) {
+    if (str[0] === '#' && str.length === 4) {
+      return {
+        r: parseInt(str[1] + str[1], 16),
+        g: parseInt(str[2] + str[2], 16),
+        b: parseInt(str[3] + str[3], 16),
+        a: 1,
+      };
+    }
+  },
+  // Code adapted from https://github.com/Qix-/color-convert/blob/master/conversions.js#L244
+  _hslColorToRGBA(str: string) {
+    // Check hsl() format
+    if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) {
+      // Extract h, s, l
+      const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str)!;
+
+      const h = Number(hsl[0]) / 360;
+      const s = Number(hsl[1]) / 100;
+      const l = Number(hsl[2]) / 100;
+
+      let t2;
+      let t3;
+      let val;
+
+      if (s === 0) {
+        val = l * 255;
+        return {
+          r: Math.round(val),
+          g: Math.round(val),
+          b: Math.round(val),
+          a: 1,
+        };
+      }
+
+      if (l < 0.5) {
+        t2 = l * (1 + s);
+      } else {
+        t2 = l + s - l * s;
+      }
+
+      const t1 = 2 * l - t2;
+
+      const rgb = [0, 0, 0];
+      for (let i = 0; i < 3; i++) {
+        t3 = h + (1 / 3) * -(i - 1);
+        if (t3 < 0) {
+          t3++;
+        }
+
+        if (t3 > 1) {
+          t3--;
+        }
+
+        if (6 * t3 < 1) {
+          val = t1 + (t2 - t1) * 6 * t3;
+        } else if (2 * t3 < 1) {
+          val = t2;
+        } else if (3 * t3 < 2) {
+          val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+        } else {
+          val = t1;
+        }
+
+        rgb[i] = val * 255;
+      }
+
+      return {
+        r: Math.round(rgb[0]),
+        g: Math.round(rgb[1]),
+        b: Math.round(rgb[2]),
+        a: 1,
+      };
+    }
+  },
+  /**
+   * check intersection of two client rectangles
+   * @method
+   * @memberof Konva.Util
+   * @param {Object} r1 - { x, y, width, height } client rectangle
+   * @param {Object} r2 - { x, y, width, height } client rectangle
+   * @example
+   * const overlapping = Konva.Util.haveIntersection(shape1.getClientRect(), shape2.getClientRect());
+   */
+  haveIntersection(r1: IRect, r2: IRect) {
+    return !(
+      r2.x > r1.x + r1.width ||
+      r2.x + r2.width < r1.x ||
+      r2.y > r1.y + r1.height ||
+      r2.y + r2.height < r1.y
+    );
+  },
+  cloneObject<Any>(obj: Any): Any {
+    const retObj: any = {};
+    for (const key in obj) {
+      if (this._isPlainObject(obj[key])) {
+        retObj[key] = this.cloneObject(obj[key]);
+      } else if (this._isArray(obj[key])) {
+        retObj[key] = this.cloneArray(obj[key] as Array<any>);
+      } else {
+        retObj[key] = obj[key];
+      }
+    }
+    return retObj;
+  },
+  cloneArray(arr: Array<any>) {
+    return arr.slice(0);
+  },
+  degToRad(deg: number) {
+    return deg * PI_OVER_DEG180;
+  },
+  radToDeg(rad: number) {
+    return rad * DEG180_OVER_PI;
+  },
+  _degToRad(deg: number) {
+    Util.warn(
+      'Util._degToRad is removed. Please use public Util.degToRad instead.'
+    );
+    return Util.degToRad(deg);
+  },
+  _radToDeg(rad: number) {
+    Util.warn(
+      'Util._radToDeg is removed. Please use public Util.radToDeg instead.'
+    );
+    return Util.radToDeg(rad);
+  },
+  _getRotation(radians: number) {
+    return Konva.angleDeg ? Util.radToDeg(radians) : radians;
+  },
+  _capitalize(str: string) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  },
+  throw(str: string) {
+    throw new Error(KONVA_ERROR + str);
+  },
+  error(str: string) {
+    console.error(KONVA_ERROR + str);
+  },
+  warn(str: string) {
+    if (!Konva.showWarnings) {
+      return;
+    }
+    console.warn(KONVA_WARNING + str);
+  },
+  each(obj: object, func: Function) {
+    for (const key in obj) {
+      func(key, obj[key as keyof typeof obj]);
+    }
+  },
+  _inRange(val: number, left: number, right: number) {
+    return left <= val && val < right;
+  },
+  _getProjectionToSegment(x1, y1, x2, y2, x3, y3) {
+    let x, y, dist;
+
+    const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+    if (pd2 == 0) {
+      x = x1;
+      y = y1;
+      dist = (x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2);
+    } else {
+      const u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;
+      if (u < 0) {
+        x = x1;
+        y = y1;
+        dist = (x1 - x3) * (x1 - x3) + (y1 - y3) * (y1 - y3);
+      } else if (u > 1.0) {
+        x = x2;
+        y = y2;
+        dist = (x2 - x3) * (x2 - x3) + (y2 - y3) * (y2 - y3);
+      } else {
+        x = x1 + u * (x2 - x1);
+        y = y1 + u * (y2 - y1);
+        dist = (x - x3) * (x - x3) + (y - y3) * (y - y3);
+      }
+    }
+    return [x, y, dist];
+  },
+  // line as array of points.
+  // line might be closed
+  _getProjectionToLine(pt: Vector2d, line: Array<Vector2d>, isClosed: boolean) {
+    const pc = Util.cloneObject(pt);
+    let dist = Number.MAX_VALUE;
+    line.forEach(function (p1, i) {
+      if (!isClosed && i === line.length - 1) {
+        return;
+      }
+      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;
+        pc.y = py;
+        dist = pdist;
+      }
+    });
+    return pc;
+  },
+  _prepareArrayForTween(startArray, endArray, isClosed) {
+    const start: Vector2d[] = [],
+      end: Vector2d[] = [];
+    if (startArray.length > endArray.length) {
+      const temp = endArray;
+      endArray = startArray;
+      startArray = temp;
+    }
+    for (let n = 0; n < startArray.length; n += 2) {
+      start.push({
+        x: startArray[n],
+        y: startArray[n + 1],
+      });
+    }
+    for (let n = 0; n < endArray.length; n += 2) {
+      end.push({
+        x: endArray[n],
+        y: endArray[n + 1],
+      });
+    }
+
+    const newStart: number[] = [];
+    end.forEach(function (point) {
+      const pr = Util._getProjectionToLine(point, start, isClosed);
+      newStart.push(pr.x);
+      newStart.push(pr.y);
+    });
+    return newStart;
+  },
+  _prepareToStringify<T>(obj: any): T | null {
+    let desc;
+
+    obj.visitedByCircularReferenceRemoval = true;
+
+    for (const key in obj) {
+      if (
+        !(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')
+      ) {
+        continue;
+      }
+      desc = Object.getOwnPropertyDescriptor(obj, key);
+      if (
+        obj[key].visitedByCircularReferenceRemoval ||
+        Util._isElement(obj[key])
+      ) {
+        if (desc.configurable) {
+          delete obj[key];
+        } else {
+          return null;
+        }
+      } else if (Util._prepareToStringify(obj[key]) === null) {
+        if (desc.configurable) {
+          delete obj[key];
+        } else {
+          return null;
+        }
+      }
+    }
+
+    delete obj.visitedByCircularReferenceRemoval;
+
+    return obj;
+  },
+  // very simplified version of Object.assign
+  _assign<T, U>(target: T, source: U) {
+    for (const key in source) {
+      (target as any)[key] = source[key];
+    }
+    return target as T & U;
+  },
+  _getFirstPointerId(evt) {
+    if (!evt.touches) {
+      // try to use pointer id or fake id
+      return evt.pointerId || 999;
+    } else {
+      return evt.changedTouches[0].identifier;
+    }
+  },
+  releaseCanvas(...canvases: HTMLCanvasElement[]) {
+    if (!Konva.releaseCanvasOnDestroy) return;
+
+    canvases.forEach((c) => {
+      c.width = 0;
+      c.height = 0;
+    });
+  },
+  drawRoundedRectPath(
+    context: Context,
+    width: number,
+    height: number,
+    cornerRadius: number | number[]
+  ) {
+    // if negative dimensions, abs width/height and move rectangle
+    let xOrigin = width < 0 ? width : 0;
+    let yOrigin = height < 0 ? height : 0;
+    width = Math.abs(width);
+    height = Math.abs(height);
+    let topLeft = 0;
+    let topRight = 0;
+    let bottomLeft = 0;
+    let bottomRight = 0;
+    if (typeof cornerRadius === 'number') {
+      topLeft =
+        topRight =
+        bottomLeft =
+        bottomRight =
+          Math.min(cornerRadius, width / 2, height / 2);
+    } else {
+      topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
+      topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
+      bottomRight = Math.min(cornerRadius[2] || 0, width / 2, height / 2);
+      bottomLeft = Math.min(cornerRadius[3] || 0, width / 2, height / 2);
+    }
+    context.moveTo(xOrigin + topLeft, yOrigin);
+    context.lineTo(xOrigin + width - topRight, yOrigin);
+    context.arc(
+      xOrigin + width - topRight,
+      yOrigin + topRight,
+      topRight,
+      (Math.PI * 3) / 2,
+      0,
+      false
+    );
+    context.lineTo(xOrigin + width, yOrigin + height - bottomRight);
+    context.arc(
+      xOrigin + width - bottomRight,
+      yOrigin + height - bottomRight,
+      bottomRight,
+      0,
+      Math.PI / 2,
+      false
+    );
+    context.lineTo(xOrigin + bottomLeft, yOrigin + height);
+    context.arc(
+      xOrigin + bottomLeft,
+      yOrigin + height - bottomLeft,
+      bottomLeft,
+      Math.PI / 2,
+      Math.PI,
+      false
+    );
+    context.lineTo(xOrigin, yOrigin + topLeft);
+    context.arc(
+      xOrigin + topLeft,
+      yOrigin + topLeft,
+      topLeft,
+      Math.PI,
+      (Math.PI * 3) / 2,
+      false
+    );
+  },
+  drawRoundedPolygonPath(
+    context: Context,
+    points: Vector2d[],
+    sides: number,
+    radius: number,
+    cornerRadius: number | number[]
+  ) {
+    radius = Math.abs(radius);
+    for (let i = 0; i < sides; i++) {
+      const prev = points[(i - 1 + sides) % sides];
+      const curr = points[i];
+      const next = points[(i + 1) % sides];
+      const vec1 = { x: curr.x - prev.x, y: curr.y - prev.y };
+      const vec2 = { x: next.x - curr.x, y: next.y - curr.y };
+      const len1 = Math.hypot(vec1.x, vec1.y);
+      const len2 = Math.hypot(vec2.x, vec2.y);
+      let currCornerRadius;
+      if (typeof cornerRadius === 'number') {
+        currCornerRadius = cornerRadius;
+      } else {
+        currCornerRadius = i < cornerRadius.length ? cornerRadius[i] : 0;
+      }
+      const maxCornerRadius = radius * Math.cos(Math.PI / sides);
+      // cornerRadius creates perfect circle at 1/2 radius
+      currCornerRadius =
+        maxCornerRadius * Math.min(1, (currCornerRadius / radius) * 2);
+      const normalVec1 = { x: vec1.x / len1, y: vec1.y / len1 };
+      const normalVec2 = { x: vec2.x / len2, y: vec2.y / len2 };
+      const p1 = {
+        x: curr.x - normalVec1.x * currCornerRadius,
+        y: curr.y - normalVec1.y * currCornerRadius,
+      };
+      const p2 = {
+        x: curr.x + normalVec2.x * currCornerRadius,
+        y: curr.y + normalVec2.y * currCornerRadius,
+      };
+      if (i === 0) {
+        context.moveTo(p1.x, p1.y);
+      } else {
+        context.lineTo(p1.x, p1.y);
+      }
+      context.arcTo(curr.x, curr.y, p2.x, p2.y, currCornerRadius);
+    }
+  },
+};