fabric 5.3.0 → 6.0.0-beta3

package/src/util/misc.js

@@ -1,1330 +0,0 @@
-(function(global) {
-
-  var sqrt = Math.sqrt,
-      atan2 = Math.atan2,
-      pow = Math.pow,
-      PiBy180 = Math.PI / 180,
-      PiBy2 = Math.PI / 2;
-
-  /**
-   * @namespace fabric.util
-   */
-  fabric.util = {
-
-    /**
-     * Calculate the cos of an angle, avoiding returning floats for known results
-     * @static
-     * @memberOf fabric.util
-     * @param {Number} angle the angle in radians or in degree
-     * @return {Number}
-     */
-    cos: function(angle) {
-      if (angle === 0) { return 1; }
-      if (angle < 0) {
-        // cos(a) = cos(-a)
-        angle = -angle;
-      }
-      var angleSlice = angle / PiBy2;
-      switch (angleSlice) {
-        case 1: case 3: return 0;
-        case 2: return -1;
-      }
-      return Math.cos(angle);
-    },
-
-    /**
-     * Calculate the sin of an angle, avoiding returning floats for known results
-     * @static
-     * @memberOf fabric.util
-     * @param {Number} angle the angle in radians or in degree
-     * @return {Number}
-     */
-    sin: function(angle) {
-      if (angle === 0) { return 0; }
-      var angleSlice = angle / PiBy2, sign = 1;
-      if (angle < 0) {
-        // sin(-a) = -sin(a)
-        sign = -1;
-      }
-      switch (angleSlice) {
-        case 1: return sign;
-        case 2: return 0;
-        case 3: return -sign;
-      }
-      return Math.sin(angle);
-    },
-
-    /**
-     * Removes value from an array.
-     * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
-     * @static
-     * @memberOf fabric.util
-     * @param {Array} array
-     * @param {*} value
-     * @return {Array} original array
-     */
-    removeFromArray: function(array, value) {
-      var idx = array.indexOf(value);
-      if (idx !== -1) {
-        array.splice(idx, 1);
-      }
-      return array;
-    },
-
-    /**
-     * Returns random number between 2 specified ones.
-     * @static
-     * @memberOf fabric.util
-     * @param {Number} min lower limit
-     * @param {Number} max upper limit
-     * @return {Number} random value (between min and max)
-     */
-    getRandomInt: function(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    },
-
-    /**
-     * Transforms degrees to radians.
-     * @static
-     * @memberOf fabric.util
-     * @param {Number} degrees value in degrees
-     * @return {Number} value in radians
-     */
-    degreesToRadians: function(degrees) {
-      return degrees * PiBy180;
-    },
-
-    /**
-     * Transforms radians to degrees.
-     * @static
-     * @memberOf fabric.util
-     * @param {Number} radians value in radians
-     * @return {Number} value in degrees
-     */
-    radiansToDegrees: function(radians) {
-      return radians / PiBy180;
-    },
-
-    /**
-     * Rotates `point` around `origin` with `radians`
-     * @static
-     * @memberOf fabric.util
-     * @param {fabric.Point} point The point to rotate
-     * @param {fabric.Point} origin The origin of the rotation
-     * @param {Number} radians The radians of the angle for the rotation
-     * @return {fabric.Point} The new rotated point
-     */
-    rotatePoint: function(point, origin, radians) {
-      var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y),
-          v = fabric.util.rotateVector(newPoint, radians);
-      return new fabric.Point(v.x, v.y).addEquals(origin);
-    },
-
-    /**
-     * Rotates `vector` with `radians`
-     * @static
-     * @memberOf fabric.util
-     * @param {Object} vector The vector to rotate (x and y)
-     * @param {Number} radians The radians of the angle for the rotation
-     * @return {Object} The new rotated point
-     */
-    rotateVector: function(vector, radians) {
-      var sin = fabric.util.sin(radians),
-          cos = fabric.util.cos(radians),
-          rx = vector.x * cos - vector.y * sin,
-          ry = vector.x * sin + vector.y * cos;
-      return {
-        x: rx,
-        y: ry
-      };
-    },
-
-    /**
-     * Creates a vetor from points represented as a point
-     * @static
-     * @memberOf fabric.util
-     *
-     * @typedef {Object} Point
-     * @property {number} x
-     * @property {number} y
-     *
-     * @param {Point} from
-     * @param {Point} to
-     * @returns {Point} vector
-     */
-    createVector: function (from, to) {
-      return new fabric.Point(to.x - from.x, to.y - from.y);
-    },
-
-    /**
-     * Calculates angle between 2 vectors using dot product
-     * @static
-     * @memberOf fabric.util
-     * @param {Point} a
-     * @param {Point} b
-     * @returns the angle in radian between the vectors
-     */
-    calcAngleBetweenVectors: function (a, b) {
-      return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y)));
-    },
-
-    /**
-     * @static
-     * @memberOf fabric.util
-     * @param {Point} v
-     * @returns {Point} vector representing the unit vector of pointing to the direction of `v`
-     */
-    getHatVector: function (v) {
-      return new fabric.Point(v.x, v.y).multiply(1 / Math.hypot(v.x, v.y));
-    },
-
-    /**
-     * @static
-     * @memberOf fabric.util
-     * @param {Point} A
-     * @param {Point} B
-     * @param {Point} C
-     * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle
-     */
-    getBisector: function (A, B, C) {
-      var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C);
-      var alpha = fabric.util.calcAngleBetweenVectors(AB, AC);
-      //  check if alpha is relative to AB->BC
-      var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC);
-      var phi = alpha * (ro === 0 ? 1 : -1) / 2;
-      return {
-        vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)),
-        angle: alpha
-      };
-    },
-
-    /**
-     * Project stroke width on points returning 2 projections for each point as follows:
-     * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke.
-     * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector.
-     * - `round`: same as `bevel`
-     * Used to calculate object's bounding box
-     * @static
-     * @memberOf fabric.util
-     * @param {Point[]} points
-     * @param {Object} options
-     * @param {number} options.strokeWidth
-     * @param {'miter'|'bevel'|'round'} options.strokeLineJoin
-     * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit
-     * @param {boolean} options.strokeUniform
-     * @param {number} options.scaleX
-     * @param {number} options.scaleY
-     * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points
-     * @returns {fabric.Point[]} array of size 2n/4n of all suspected points
-     */
-    projectStrokeOnPoints: function (points, options, openPath) {
-      var coords = [], s = options.strokeWidth / 2,
-          strokeUniformScalar = options.strokeUniform ?
-            new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1),
-          getStrokeHatVector = function (v) {
-            var scalar = s / (Math.hypot(v.x, v.y));
-            return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y);
-          };
-      if (points.length <= 1) {return coords;}
-      points.forEach(function (p, index) {
-        var A = new fabric.Point(p.x, p.y), B, C;
-        if (index === 0) {
-          C = points[index + 1];
-          B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1];
-        }
-        else if (index === points.length - 1) {
-          B = points[index - 1];
-          C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0];
-        }
-        else {
-          B = points[index - 1];
-          C = points[index + 1];
-        }
-        var bisector = fabric.util.getBisector(A, B, C),
-            bisectorVector = bisector.vector,
-            alpha = bisector.angle,
-            scalar,
-            miterVector;
-        if (options.strokeLineJoin === 'miter') {
-          scalar = -s / Math.sin(alpha / 2);
-          miterVector = new fabric.Point(
-            bisectorVector.x * scalar * strokeUniformScalar.x,
-            bisectorVector.y * scalar * strokeUniformScalar.y
-          );
-          if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) {
-            coords.push(A.add(miterVector));
-            coords.push(A.subtract(miterVector));
-            return;
-          }
-        }
-        scalar = -s * Math.SQRT2;
-        miterVector = new fabric.Point(
-          bisectorVector.x * scalar * strokeUniformScalar.x,
-          bisectorVector.y * scalar * strokeUniformScalar.y
-        );
-        coords.push(A.add(miterVector));
-        coords.push(A.subtract(miterVector));
-      });
-      return coords;
-    },
-
-    /**
-     * Apply transform t to point p
-     * @static
-     * @memberOf fabric.util
-     * @param  {fabric.Point} p The point to transform
-     * @param  {Array} t The transform
-     * @param  {Boolean} [ignoreOffset] Indicates that the offset should not be applied
-     * @return {fabric.Point} The transformed point
-     */
-    transformPoint: function(p, t, ignoreOffset) {
-      if (ignoreOffset) {
-        return new fabric.Point(
-          t[0] * p.x + t[2] * p.y,
-          t[1] * p.x + t[3] * p.y
-        );
-      }
-      return new fabric.Point(
-        t[0] * p.x + t[2] * p.y + t[4],
-        t[1] * p.x + t[3] * p.y + t[5]
-      );
-    },
-
-    /**
-     * Returns coordinates of points's bounding rectangle (left, top, width, height)
-     * @param {Array} points 4 points array
-     * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix
-     * @return {Object} Object with left, top, width, height properties
-     */
-    makeBoundingBoxFromPoints: function(points, transform) {
-      if (transform) {
-        for (var i = 0; i < points.length; i++) {
-          points[i] = fabric.util.transformPoint(points[i], transform);
-        }
-      }
-      var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x],
-          minX = fabric.util.array.min(xPoints),
-          maxX = fabric.util.array.max(xPoints),
-          width = maxX - minX,
-          yPoints = [points[0].y, points[1].y, points[2].y, points[3].y],
-          minY = fabric.util.array.min(yPoints),
-          maxY = fabric.util.array.max(yPoints),
-          height = maxY - minY;
-
-      return {
-        left: minX,
-        top: minY,
-        width: width,
-        height: height
-      };
-    },
-
-    /**
-     * Invert transformation t
-     * @static
-     * @memberOf fabric.util
-     * @param {Array} t The transform
-     * @return {Array} The inverted transform
-     */
-    invertTransform: function(t) {
-      var a = 1 / (t[0] * t[3] - t[1] * t[2]),
-          r = [a * t[3], -a * t[1], -a * t[2], a * t[0]],
-          o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true);
-      r[4] = -o.x;
-      r[5] = -o.y;
-      return r;
-    },
-
-    /**
-     * A wrapper around Number#toFixed, which contrary to native method returns number, not string.
-     * @static
-     * @memberOf fabric.util
-     * @param {Number|String} number number to operate on
-     * @param {Number} fractionDigits number of fraction digits to "leave"
-     * @return {Number}
-     */
-    toFixed: function(number, fractionDigits) {
-      return parseFloat(Number(number).toFixed(fractionDigits));
-    },
-
-    /**
-     * Converts from attribute value to pixel value if applicable.
-     * Returns converted pixels or original value not converted.
-     * @param {Number|String} value number to operate on
-     * @param {Number} fontSize
-     * @return {Number|String}
-     */
-    parseUnit: function(value, fontSize) {
-      var unit = /\D{0,2}$/.exec(value),
-          number = parseFloat(value);
-      if (!fontSize) {
-        fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
-      }
-      switch (unit[0]) {
-        case 'mm':
-          return number * fabric.DPI / 25.4;
-
-        case 'cm':
-          return number * fabric.DPI / 2.54;
-
-        case 'in':
-          return number * fabric.DPI;
-
-        case 'pt':
-          return number * fabric.DPI / 72; // or * 4 / 3
-
-        case 'pc':
-          return number * fabric.DPI / 72 * 12; // or * 16
-
-        case 'em':
-          return number * fontSize;
-
-        default:
-          return number;
-      }
-    },
-
-    /**
-     * Function which always returns `false`.
-     * @static
-     * @memberOf fabric.util
-     * @return {Boolean}
-     */
-    falseFunction: function() {
-      return false;
-    },
-
-    /**
-     * Returns klass "Class" object of given namespace
-     * @memberOf fabric.util
-     * @param {String} type Type of object (eg. 'circle')
-     * @param {String} namespace Namespace to get klass "Class" object from
-     * @return {Object} klass "Class"
-     */
-    getKlass: function(type, namespace) {
-      // capitalize first letter only
-      type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));
-      return fabric.util.resolveNamespace(namespace)[type];
-    },
-
-    /**
-     * Returns array of attributes for given svg that fabric parses
-     * @memberOf fabric.util
-     * @param {String} type Type of svg element (eg. 'circle')
-     * @return {Array} string names of supported attributes
-     */
-    getSvgAttributes: function(type) {
-      var attributes = [
-        'instantiated_by_use',
-        'style',
-        'id',
-        'class'
-      ];
-      switch (type) {
-        case 'linearGradient':
-          attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']);
-          break;
-        case 'radialGradient':
-          attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']);
-          break;
-        case 'stop':
-          attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']);
-          break;
-      }
-      return attributes;
-    },
-
-    /**
-     * Returns object of given namespace
-     * @memberOf fabric.util
-     * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
-     * @return {Object} Object for given namespace (default fabric)
-     */
-    resolveNamespace: function(namespace) {
-      if (!namespace) {
-        return fabric;
-      }
-
-      var parts = namespace.split('.'),
-          len = parts.length, i,
-          obj = global || fabric.window;
-
-      for (i = 0; i < len; ++i) {
-        obj = obj[parts[i]];
-      }
-
-      return obj;
-    },
-
-    /**
-     * Loads image element from given url and passes it to a callback
-     * @memberOf fabric.util
-     * @param {String} url URL representing an image
-     * @param {Function} callback Callback; invoked with loaded image
-     * @param {*} [context] Context to invoke callback in
-     * @param {Object} [crossOrigin] crossOrigin value to set image element to
-     */
-    loadImage: function(url, callback, context, crossOrigin) {
-      if (!url) {
-        callback && callback.call(context, url);
-        return;
-      }
-
-      var img = fabric.util.createImage();
-
-      /** @ignore */
-      var onLoadCallback = function () {
-        callback && callback.call(context, img, false);
-        img = img.onload = img.onerror = null;
-      };
-
-      img.onload = onLoadCallback;
-      /** @ignore */
-      img.onerror = function() {
-        fabric.log('Error loading ' + img.src);
-        callback && callback.call(context, null, true);
-        img = img.onload = img.onerror = null;
-      };
-
-      // data-urls appear to be buggy with crossOrigin
-      // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767
-      // see https://code.google.com/p/chromium/issues/detail?id=315152
-      //     https://bugzilla.mozilla.org/show_bug.cgi?id=935069
-      // crossOrigin null is the same as not set.
-      if (url.indexOf('data') !== 0 &&
-        crossOrigin !== undefined &&
-        crossOrigin !== null) {
-        img.crossOrigin = crossOrigin;
-      }
-
-      // IE10 / IE11-Fix: SVG contents from data: URI
-      // will only be available if the IMG is present
-      // in the DOM (and visible)
-      if (url.substring(0,14) === 'data:image/svg') {
-        img.onload = null;
-        fabric.util.loadImageInDom(img, onLoadCallback);
-      }
-
-      img.src = url;
-    },
-
-    /**
-     * Attaches SVG image with data: URL to the dom
-     * @memberOf fabric.util
-     * @param {Object} img Image object with data:image/svg src
-     * @param {Function} callback Callback; invoked with loaded image
-     * @return {Object} DOM element (div containing the SVG image)
-     */
-    loadImageInDom: function(img, onLoadCallback) {
-      var div = fabric.document.createElement('div');
-      div.style.width = div.style.height = '1px';
-      div.style.left = div.style.top = '-100%';
-      div.style.position = 'absolute';
-      div.appendChild(img);
-      fabric.document.querySelector('body').appendChild(div);
-      /**
-       * Wrap in function to:
-       *   1. Call existing callback
-       *   2. Cleanup DOM
-       */
-      img.onload = function () {
-        onLoadCallback();
-        div.parentNode.removeChild(div);
-        div = null;
-      };
-    },
-
-    /**
-     * Creates corresponding fabric instances from their object representations
-     * @static
-     * @memberOf fabric.util
-     * @param {Array} objects Objects to enliven
-     * @param {Function} callback Callback to invoke when all objects are created
-     * @param {String} namespace Namespace to get klass "Class" object from
-     * @param {Function} reviver Method for further parsing of object elements,
-     * called after each fabric object created.
-     */
-    enlivenObjects: function(objects, callback, namespace, reviver) {
-      objects = objects || [];
-
-      var enlivenedObjects = [],
-          numLoadedObjects = 0,
-          numTotalObjects = objects.length;
-
-      function onLoaded() {
-        if (++numLoadedObjects === numTotalObjects) {
-          callback && callback(enlivenedObjects.filter(function(obj) {
-            // filter out undefined objects (objects that gave error)
-            return obj;
-          }));
-        }
-      }
-
-      if (!numTotalObjects) {
-        callback && callback(enlivenedObjects);
-        return;
-      }
-
-      objects.forEach(function (o, index) {
-        // if sparse array
-        if (!o || !o.type) {
-          onLoaded();
-          return;
-        }
-        var klass = fabric.util.getKlass(o.type, namespace);
-        klass.fromObject(o, function (obj, error) {
-          error || (enlivenedObjects[index] = obj);
-          reviver && reviver(o, obj, error);
-          onLoaded();
-        });
-      });
-    },
-
-    /**
-     * Creates corresponding fabric instances residing in an object, e.g. `clipPath`
-     * @see {@link fabric.Object.ENLIVEN_PROPS}
-     * @param {Object} object
-     * @param {Object} [context] assign enlived props to this object (pass null to skip this)
-     * @param {(objects:fabric.Object[]) => void} callback
-     */
-    enlivenObjectEnlivables: function (object, context, callback) {
-      var enlivenProps = fabric.Object.ENLIVEN_PROPS.filter(function (key) { return !!object[key]; });
-      fabric.util.enlivenObjects(enlivenProps.map(function (key) { return object[key]; }), function (enlivedProps) {
-        var objects = {};
-        enlivenProps.forEach(function (key, index) {
-          objects[key] = enlivedProps[index];
-          context && (context[key] = enlivedProps[index]);
-        });
-        callback && callback(objects);
-      });
-    },
-
-    /**
-     * Create and wait for loading of patterns
-     * @static
-     * @memberOf fabric.util
-     * @param {Array} patterns Objects to enliven
-     * @param {Function} callback Callback to invoke when all objects are created
-     * called after each fabric object created.
-     */
-    enlivenPatterns: function(patterns, callback) {
-      patterns = patterns || [];
-
-      function onLoaded() {
-        if (++numLoadedPatterns === numPatterns) {
-          callback && callback(enlivenedPatterns);
-        }
-      }
-
-      var enlivenedPatterns = [],
-          numLoadedPatterns = 0,
-          numPatterns = patterns.length;
-
-      if (!numPatterns) {
-        callback && callback(enlivenedPatterns);
-        return;
-      }
-
-      patterns.forEach(function (p, index) {
-        if (p && p.source) {
-          new fabric.Pattern(p, function(pattern) {
-            enlivenedPatterns[index] = pattern;
-            onLoaded();
-          });
-        }
-        else {
-          enlivenedPatterns[index] = p;
-          onLoaded();
-        }
-      });
-    },
-
-    /**
-     * Groups SVG elements (usually those retrieved from SVG document)
-     * @static
-     * @memberOf fabric.util
-     * @param {Array} elements SVG elements to group
-     * @param {Object} [options] Options object
-     * @param {String} path Value to set sourcePath to
-     * @return {fabric.Object|fabric.Group}
-     */
-    groupSVGElements: function(elements, options, path) {
-      var object;
-      if (elements && elements.length === 1) {
-        if (typeof path !== 'undefined') {
-          elements[0].sourcePath = path;
-        }
-        return elements[0];
-      }
-      if (options) {
-        if (options.width && options.height) {
-          options.centerPoint = {
-            x: options.width / 2,
-            y: options.height / 2
-          };
-        }
-        else {
-          delete options.width;
-          delete options.height;
-        }
-      }
-      object = new fabric.Group(elements, options);
-      if (typeof path !== 'undefined') {
-        object.sourcePath = path;
-      }
-      return object;
-    },
-
-    /**
-     * Populates an object with properties of another object
-     * @static
-     * @memberOf fabric.util
-     * @param {Object} source Source object
-     * @param {Object} destination Destination object
-     * @return {Array} properties Properties names to include
-     */
-    populateWithProperties: function(source, destination, properties) {
-      if (properties && Array.isArray(properties)) {
-        for (var i = 0, len = properties.length; i < len; i++) {
-          if (properties[i] in source) {
-            destination[properties[i]] = source[properties[i]];
-          }
-        }
-      }
-    },
-
-    /**
-     * Creates canvas element
-     * @static
-     * @memberOf fabric.util
-     * @return {CanvasElement} initialized canvas element
-     */
-    createCanvasElement: function() {
-      return fabric.document.createElement('canvas');
-    },
-
-    /**
-     * Creates a canvas element that is a copy of another and is also painted
-     * @param {CanvasElement} canvas to copy size and content of
-     * @static
-     * @memberOf fabric.util
-     * @return {CanvasElement} initialized canvas element
-     */
-    copyCanvasElement: function(canvas) {
-      var newCanvas = fabric.util.createCanvasElement();
-      newCanvas.width = canvas.width;
-      newCanvas.height = canvas.height;
-      newCanvas.getContext('2d').drawImage(canvas, 0, 0);
-      return newCanvas;
-    },
-
-    /**
-     * since 2.6.0 moved from canvas instance to utility.
-     * @param {CanvasElement} canvasEl to copy size and content of
-     * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too
-     * @param {Number} quality <= 1 and > 0
-     * @static
-     * @memberOf fabric.util
-     * @return {String} data url
-     */
-    toDataURL: function(canvasEl, format, quality) {
-      return canvasEl.toDataURL('image/' + format, quality);
-    },
-
-    /**
-     * Creates image element (works on client and node)
-     * @static
-     * @memberOf fabric.util
-     * @return {HTMLImageElement} HTML image element
-     */
-    createImage: function() {
-      return fabric.document.createElement('img');
-    },
-
-    /**
-     * Multiply matrix A by matrix B to nest transformations
-     * @static
-     * @memberOf fabric.util
-     * @param  {Array} a First transformMatrix
-     * @param  {Array} b Second transformMatrix
-     * @param  {Boolean} is2x2 flag to multiply matrices as 2x2 matrices
-     * @return {Array} The product of the two transform matrices
-     */
-    multiplyTransformMatrices: function(a, b, is2x2) {
-      // Matrix multiply a * b
-      return [
-        a[0] * b[0] + a[2] * b[1],
-        a[1] * b[0] + a[3] * b[1],
-        a[0] * b[2] + a[2] * b[3],
-        a[1] * b[2] + a[3] * b[3],
-        is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4],
-        is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5]
-      ];
-    },
-
-    /**
-     * Decomposes standard 2x3 matrix into transform components
-     * @static
-     * @memberOf fabric.util
-     * @param  {Array} a transformMatrix
-     * @return {Object} Components of transform
-     */
-    qrDecompose: function(a) {
-      var angle = atan2(a[1], a[0]),
-          denom = pow(a[0], 2) + pow(a[1], 2),
-          scaleX = sqrt(denom),
-          scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,
-          skewX = atan2(a[0] * a[2] + a[1] * a [3], denom);
-      return {
-        angle: angle / PiBy180,
-        scaleX: scaleX,
-        scaleY: scaleY,
-        skewX: skewX / PiBy180,
-        skewY: 0,
-        translateX: a[4],
-        translateY: a[5]
-      };
-    },
-
-    /**
-     * Returns a transform matrix starting from an object of the same kind of
-     * the one returned from qrDecompose, useful also if you want to calculate some
-     * transformations from an object that is not enlived yet
-     * @static
-     * @memberOf fabric.util
-     * @param  {Object} options
-     * @param  {Number} [options.angle] angle in degrees
-     * @return {Number[]} transform matrix
-     */
-    calcRotateMatrix: function(options) {
-      if (!options.angle) {
-        return fabric.iMatrix.concat();
-      }
-      var theta = fabric.util.degreesToRadians(options.angle),
-          cos = fabric.util.cos(theta),
-          sin = fabric.util.sin(theta);
-      return [cos, sin, -sin, cos, 0, 0];
-    },
-
-    /**
-     * Returns a transform matrix starting from an object of the same kind of
-     * the one returned from qrDecompose, useful also if you want to calculate some
-     * transformations from an object that is not enlived yet.
-     * is called DimensionsTransformMatrix because those properties are the one that influence
-     * the size of the resulting box of the object.
-     * @static
-     * @memberOf fabric.util
-     * @param  {Object} options
-     * @param  {Number} [options.scaleX]
-     * @param  {Number} [options.scaleY]
-     * @param  {Boolean} [options.flipX]
-     * @param  {Boolean} [options.flipY]
-     * @param  {Number} [options.skewX]
-     * @param  {Number} [options.skewY]
-     * @return {Number[]} transform matrix
-     */
-    calcDimensionsMatrix: function(options) {
-      var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX,
-          scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY,
-          scaleMatrix = [
-            options.flipX ? -scaleX : scaleX,
-            0,
-            0,
-            options.flipY ? -scaleY : scaleY,
-            0,
-            0],
-          multiply = fabric.util.multiplyTransformMatrices,
-          degreesToRadians = fabric.util.degreesToRadians;
-      if (options.skewX) {
-        scaleMatrix = multiply(
-          scaleMatrix,
-          [1, 0, Math.tan(degreesToRadians(options.skewX)), 1],
-          true);
-      }
-      if (options.skewY) {
-        scaleMatrix = multiply(
-          scaleMatrix,
-          [1, Math.tan(degreesToRadians(options.skewY)), 0, 1],
-          true);
-      }
-      return scaleMatrix;
-    },
-
-    /**
-     * Returns a transform matrix starting from an object of the same kind of
-     * the one returned from qrDecompose, useful also if you want to calculate some
-     * transformations from an object that is not enlived yet
-     * @static
-     * @memberOf fabric.util
-     * @param  {Object} options
-     * @param  {Number} [options.angle]
-     * @param  {Number} [options.scaleX]
-     * @param  {Number} [options.scaleY]
-     * @param  {Boolean} [options.flipX]
-     * @param  {Boolean} [options.flipY]
-     * @param  {Number} [options.skewX]
-     * @param  {Number} [options.skewX]
-     * @param  {Number} [options.translateX]
-     * @param  {Number} [options.translateY]
-     * @return {Number[]} transform matrix
-     */
-    composeMatrix: function(options) {
-      var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0],
-          multiply = fabric.util.multiplyTransformMatrices;
-      if (options.angle) {
-        matrix = multiply(matrix, fabric.util.calcRotateMatrix(options));
-      }
-      if (options.scaleX !== 1 || options.scaleY !== 1 ||
-          options.skewX || options.skewY || options.flipX || options.flipY) {
-        matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options));
-      }
-      return matrix;
-    },
-
-    /**
-     * reset an object transform state to neutral. Top and left are not accounted for
-     * @static
-     * @memberOf fabric.util
-     * @param  {fabric.Object} target object to transform
-     */
-    resetObjectTransform: function (target) {
-      target.scaleX = 1;
-      target.scaleY = 1;
-      target.skewX = 0;
-      target.skewY = 0;
-      target.flipX = false;
-      target.flipY = false;
-      target.rotate(0);
-    },
-
-    /**
-     * Extract Object transform values
-     * @static
-     * @memberOf fabric.util
-     * @param  {fabric.Object} target object to read from
-     * @return {Object} Components of transform
-     */
-    saveObjectTransform: function (target) {
-      return {
-        scaleX: target.scaleX,
-        scaleY: target.scaleY,
-        skewX: target.skewX,
-        skewY: target.skewY,
-        angle: target.angle,
-        left: target.left,
-        flipX: target.flipX,
-        flipY: target.flipY,
-        top: target.top
-      };
-    },
-
-    /**
-     * Returns true if context has transparent pixel
-     * at specified location (taking tolerance into account)
-     * @param {CanvasRenderingContext2D} ctx context
-     * @param {Number} x x coordinate
-     * @param {Number} y y coordinate
-     * @param {Number} tolerance Tolerance
-     */
-    isTransparent: function(ctx, x, y, tolerance) {
-
-      // If tolerance is > 0 adjust start coords to take into account.
-      // If moves off Canvas fix to 0
-      if (tolerance > 0) {
-        if (x > tolerance) {
-          x -= tolerance;
-        }
-        else {
-          x = 0;
-        }
-        if (y > tolerance) {
-          y -= tolerance;
-        }
-        else {
-          y = 0;
-        }
-      }
-
-      var _isTransparent = true, i, temp,
-          imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1),
-          l = imageData.data.length;
-
-      // Split image data - for tolerance > 1, pixelDataSize = 4;
-      for (i = 3; i < l; i += 4) {
-        temp = imageData.data[i];
-        _isTransparent = temp <= 0;
-        if (_isTransparent === false) {
-          break; // Stop if colour found
-        }
-      }
-
-      imageData = null;
-
-      return _isTransparent;
-    },
-
-    /**
-     * Parse preserveAspectRatio attribute from element
-     * @param {string} attribute to be parsed
-     * @return {Object} an object containing align and meetOrSlice attribute
-     */
-    parsePreserveAspectRatioAttribute: function(attribute) {
-      var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid',
-          aspectRatioAttrs = attribute.split(' '), align;
-
-      if (aspectRatioAttrs && aspectRatioAttrs.length) {
-        meetOrSlice = aspectRatioAttrs.pop();
-        if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {
-          align = meetOrSlice;
-          meetOrSlice = 'meet';
-        }
-        else if (aspectRatioAttrs.length) {
-          align = aspectRatioAttrs.pop();
-        }
-      }
-      //divide align in alignX and alignY
-      alignX = align !== 'none' ? align.slice(1, 4) : 'none';
-      alignY = align !== 'none' ? align.slice(5, 8) : 'none';
-      return {
-        meetOrSlice: meetOrSlice,
-        alignX: alignX,
-        alignY: alignY
-      };
-    },
-
-    /**
-     * Clear char widths cache for the given font family or all the cache if no
-     * fontFamily is specified.
-     * Use it if you know you are loading fonts in a lazy way and you are not waiting
-     * for custom fonts to load properly when adding text objects to the canvas.
-     * If a text object is added when its own font is not loaded yet, you will get wrong
-     * measurement and so wrong bounding boxes.
-     * After the font cache is cleared, either change the textObject text content or call
-     * initDimensions() to trigger a recalculation
-     * @memberOf fabric.util
-     * @param {String} [fontFamily] font family to clear
-     */
-    clearFabricFontCache: function(fontFamily) {
-      fontFamily = (fontFamily || '').toLowerCase();
-      if (!fontFamily) {
-        fabric.charWidthsCache = { };
-      }
-      else if (fabric.charWidthsCache[fontFamily]) {
-        delete fabric.charWidthsCache[fontFamily];
-      }
-    },
-
-    /**
-     * Given current aspect ratio, determines the max width and height that can
-     * respect the total allowed area for the cache.
-     * @memberOf fabric.util
-     * @param {Number} ar aspect ratio
-     * @param {Number} maximumArea Maximum area you want to achieve
-     * @return {Object.x} Limited dimensions by X
-     * @return {Object.y} Limited dimensions by Y
-     */
-    limitDimsByArea: function(ar, maximumArea) {
-      var roughWidth = Math.sqrt(maximumArea * ar),
-          perfLimitSizeY = Math.floor(maximumArea / roughWidth);
-      return { x: Math.floor(roughWidth), y: perfLimitSizeY };
-    },
-
-    capValue: function(min, value, max) {
-      return Math.max(min, Math.min(value, max));
-    },
-
-    /**
-     * Finds the scale for the object source to fit inside the object destination,
-     * keeping aspect ratio intact.
-     * respect the total allowed area for the cache.
-     * @memberOf fabric.util
-     * @param {Object | fabric.Object} source
-     * @param {Number} source.height natural unscaled height of the object
-     * @param {Number} source.width natural unscaled width of the object
-     * @param {Object | fabric.Object} destination
-     * @param {Number} destination.height natural unscaled height of the object
-     * @param {Number} destination.width natural unscaled width of the object
-     * @return {Number} scale factor to apply to source to fit into destination
-     */
-    findScaleToFit: function(source, destination) {
-      return Math.min(destination.width / source.width, destination.height / source.height);
-    },
-
-    /**
-     * Finds the scale for the object source to cover entirely the object destination,
-     * keeping aspect ratio intact.
-     * respect the total allowed area for the cache.
-     * @memberOf fabric.util
-     * @param {Object | fabric.Object} source
-     * @param {Number} source.height natural unscaled height of the object
-     * @param {Number} source.width natural unscaled width of the object
-     * @param {Object | fabric.Object} destination
-     * @param {Number} destination.height natural unscaled height of the object
-     * @param {Number} destination.width natural unscaled width of the object
-     * @return {Number} scale factor to apply to source to cover destination
-     */
-    findScaleToCover: function(source, destination) {
-      return Math.max(destination.width / source.width, destination.height / source.height);
-    },
-
-    /**
-     * given an array of 6 number returns something like `"matrix(...numbers)"`
-     * @memberOf fabric.util
-     * @param {Array} transform an array with 6 numbers
-     * @return {String} transform matrix for svg
-     * @return {Object.y} Limited dimensions by Y
-     */
-    matrixToSVG: function(transform) {
-      return 'matrix(' + transform.map(function(value) {
-        return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS);
-      }).join(' ') + ')';
-    },
-
-    /**
-     * given an object and a transform, apply the inverse transform to the object,
-     * this is equivalent to remove from that object that transformation, so that
-     * added in a space with the removed transform, the object will be the same as before.
-     * Removing from an object a transform that scale by 2 is like scaling it by 1/2.
-     * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg
-     * in the opposite direction.
-     * This util is used to add objects inside transformed groups or nested groups.
-     * @memberOf fabric.util
-     * @param {fabric.Object} object the object you want to transform
-     * @param {Array} transform the destination transform
-     */
-    removeTransformFromObject: function(object, transform) {
-      var inverted = fabric.util.invertTransform(transform),
-          finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix());
-      fabric.util.applyTransformToObject(object, finalTransform);
-    },
-
-    /**
-     * given an object and a transform, apply the transform to the object.
-     * this is equivalent to change the space where the object is drawn.
-     * Adding to an object a transform that scale by 2 is like scaling it by 2.
-     * This is used when removing an object from an active selection for example.
-     * @memberOf fabric.util
-     * @param {fabric.Object} object the object you want to transform
-     * @param {Array} transform the destination transform
-     */
-    addTransformToObject: function(object, transform) {
-      fabric.util.applyTransformToObject(
-        object,
-        fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix())
-      );
-    },
-
-    /**
-     * discard an object transform state and apply the one from the matrix.
-     * @memberOf fabric.util
-     * @param {fabric.Object} object the object you want to transform
-     * @param {Array} transform the destination transform
-     */
-    applyTransformToObject: function(object, transform) {
-      var options = fabric.util.qrDecompose(transform),
-          center = new fabric.Point(options.translateX, options.translateY);
-      object.flipX = false;
-      object.flipY = false;
-      object.set('scaleX', options.scaleX);
-      object.set('scaleY', options.scaleY);
-      object.skewX = options.skewX;
-      object.skewY = options.skewY;
-      object.angle = options.angle;
-      object.setPositionByOrigin(center, 'center', 'center');
-    },
-
-    /**
-     * given a width and height, return the size of the bounding box
-     * that can contains the box with width/height with applied transform
-     * described in options.
-     * Use to calculate the boxes around objects for controls.
-     * @memberOf fabric.util
-     * @param {Number} width
-     * @param {Number} height
-     * @param {Object} options
-     * @param {Number} options.scaleX
-     * @param {Number} options.scaleY
-     * @param {Number} options.skewX
-     * @param {Number} options.skewY
-     * @return {Object.x} width of containing
-     * @return {Object.y} height of containing
-     */
-    sizeAfterTransform: function(width, height, options) {
-      var dimX = width / 2, dimY = height / 2,
-          points = [
-            {
-              x: -dimX,
-              y: -dimY
-            },
-            {
-              x: dimX,
-              y: -dimY
-            },
-            {
-              x: -dimX,
-              y: dimY
-            },
-            {
-              x: dimX,
-              y: dimY
-            }],
-          transformMatrix = fabric.util.calcDimensionsMatrix(options),
-          bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix);
-      return {
-        x: bbox.width,
-        y: bbox.height,
-      };
-    },
-
-    /**
-     * Merges 2 clip paths into one visually equal clip path
-     *
-     * **IMPORTANT**:\
-     * Does **NOT** clone the arguments, clone them proir if necessary.
-     *
-     * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap.
-     * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible.
-     *
-     * In order to handle the `inverted` property we follow logic described in the following cases:\
-     * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\
-     * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\
-     * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged.
-     *
-     * @memberOf fabric.util
-     * @param {fabric.Object} c1
-     * @param {fabric.Object} c2
-     * @returns {fabric.Object} merged clip path
-     */
-    mergeClipPaths: function (c1, c2) {
-      var a = c1, b = c2;
-      if (a.inverted && !b.inverted) {
-        //  case (2)
-        a = c2;
-        b = c1;
-      }
-      //  `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane
-      fabric.util.applyTransformToObject(
-        b,
-        fabric.util.multiplyTransformMatrices(
-          fabric.util.invertTransform(a.calcTransformMatrix()),
-          b.calcTransformMatrix()
-        )
-      );
-      //  assign the `inverted` prop to the wrapping group
-      var inverted = a.inverted && b.inverted;
-      if (inverted) {
-        //  case (1)
-        a.inverted = b.inverted = false;
-      }
-      return new fabric.Group([a], { clipPath: b, inverted: inverted });
-    },
-
-    /**
-     * @memberOf fabric.util
-     * @param {Object} prevStyle first style to compare
-     * @param {Object} thisStyle second style to compare
-     * @param {boolean} forTextSpans whether to check overline, underline, and line-through properties
-     * @return {boolean} true if the style changed
-     */
-    hasStyleChanged: function(prevStyle, thisStyle, forTextSpans) {
-      forTextSpans = forTextSpans || false;
-      return (prevStyle.fill !== thisStyle.fill ||
-              prevStyle.stroke !== thisStyle.stroke ||
-              prevStyle.strokeWidth !== thisStyle.strokeWidth ||
-              prevStyle.fontSize !== thisStyle.fontSize ||
-              prevStyle.fontFamily !== thisStyle.fontFamily ||
-              prevStyle.fontWeight !== thisStyle.fontWeight ||
-              prevStyle.fontStyle !== thisStyle.fontStyle ||
-              prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
-              prevStyle.deltaY !== thisStyle.deltaY) ||
-              (forTextSpans &&
-                (prevStyle.overline !== thisStyle.overline ||
-                prevStyle.underline !== thisStyle.underline ||
-                prevStyle.linethrough !== thisStyle.linethrough));
-    },
-
-    /**
-     * Returns the array form of a text object's inline styles property with styles grouped in ranges
-     * rather than per character. This format is less verbose, and is better suited for storage
-     * so it is used in serialization (not during runtime).
-     * @memberOf fabric.util
-     * @param {object} styles per character styles for a text object
-     * @param {String} text the text string that the styles are applied to
-     * @return {{start: number, end: number, style: object}[]}
-     */
-    stylesToArray: function(styles, text) {
-      // clone style structure to prevent mutation
-      var styles = fabric.util.object.clone(styles, true),
-          textLines = text.split('\n'),
-          charIndex = -1, prevStyle = {}, stylesArray = [];
-      //loop through each textLine
-      for (var i = 0; i < textLines.length; i++) {
-        if (!styles[i]) {
-          //no styles exist for this line, so add the line's length to the charIndex total
-          charIndex += textLines[i].length;
-          continue;
-        }
-        //loop through each character of the current line
-        for (var c = 0; c < textLines[i].length; c++) {
-          charIndex++;
-          var thisStyle = styles[i][c];
-          //check if style exists for this character
-          if (thisStyle && Object.keys(thisStyle).length > 0) {
-            var styleChanged = fabric.util.hasStyleChanged(prevStyle, thisStyle, true);
-            if (styleChanged) {
-              stylesArray.push({
-                start: charIndex,
-                end: charIndex + 1,
-                style: thisStyle
-              });
-            }
-            else {
-              //if style is the same as previous character, increase end index
-              stylesArray[stylesArray.length - 1].end++;
-            }
-          }
-          prevStyle = thisStyle || {};
-        }
-      }
-      return stylesArray;
-    },
-
-    /**
-     * Returns the object form of the styles property with styles that are assigned per
-     * character rather than grouped by range. This format is more verbose, and is
-     * only used during runtime (not for serialization/storage)
-     * @memberOf fabric.util
-     * @param {Array} styles the serialized form of a text object's styles
-     * @param {String} text the text string that the styles are applied to
-     * @return {Object}
-     */
-    stylesFromArray: function(styles, text) {
-      if (!Array.isArray(styles)) {
-        return styles;
-      }
-      var textLines = text.split('\n'),
-          charIndex = -1, styleIndex = 0, stylesObject = {};
-      //loop through each textLine
-      for (var i = 0; i < textLines.length; i++) {
-        //loop through each character of the current line
-        for (var c = 0; c < textLines[i].length; c++) {
-          charIndex++;
-          //check if there's a style collection that includes the current character
-          if (styles[styleIndex]
-            && styles[styleIndex].start <= charIndex
-            && charIndex < styles[styleIndex].end) {
-            //create object for line index if it doesn't exist
-            stylesObject[i] = stylesObject[i] || {};
-            //assign a style at this character's index
-            stylesObject[i][c] = Object.assign({}, styles[styleIndex].style);
-            //if character is at the end of the current style collection, move to the next
-            if (charIndex === styles[styleIndex].end - 1) {
-              styleIndex++;
-            }
-          }
-        }
-      }
-      return stylesObject;
-    }
-  };
-})(typeof exports !== 'undefined' ? exports : this);