fabric 5.3.0-browser → 6.0.0-beta1

package/src/util/animate_color.js

@@ -1,74 +0,0 @@
-(function() {
-  // Calculate an in-between color. Returns a "rgba()" string.
-  // Credit: Edwin Martin <edwin@bitstorm.org>
-  //         http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js
-  function calculateColor(begin, end, pos) {
-    var color = 'rgba('
-        + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
-        + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
-        + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
-
-    color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
-    color += ')';
-    return color;
-  }
-
-  /**
-   * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed.
-   * @memberOf fabric.util
-   * @param {String} fromColor The starting color in hex or rgb(a) format.
-   * @param {String} toColor The starting color in hex or rgb(a) format.
-   * @param {Number} [duration] Duration of change (in ms).
-   * @param {Object} [options] Animation options
-   * @param {Function} [options.onChange] Callback; invoked on every value change
-   * @param {Function} [options.onComplete] Callback; invoked when value change is completed
-   * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used.
-   * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called.
-   * @returns {Function} abort function
-   */
-  function animateColor(fromColor, toColor, duration, options) {
-    var startColor = new fabric.Color(fromColor).getSource(),
-        endColor = new fabric.Color(toColor).getSource(),
-        originalOnComplete = options.onComplete,
-        originalOnChange = options.onChange;
-    options = options || {};
-
-    return fabric.util.animate(fabric.util.object.extend(options, {
-      duration: duration || 500,
-      startValue: startColor,
-      endValue: endColor,
-      byValue: endColor,
-      easing: function (currentTime, startValue, byValue, duration) {
-        var posValue = options.colorEasing
-          ? options.colorEasing(currentTime, duration)
-          : 1 - Math.cos(currentTime / duration * (Math.PI / 2));
-        return calculateColor(startValue, byValue, posValue);
-      },
-      // has to take in account for color restoring;
-      onComplete: function(current, valuePerc, timePerc) {
-        if (originalOnComplete) {
-          return originalOnComplete(
-            calculateColor(endColor, endColor, 0),
-            valuePerc,
-            timePerc
-          );
-        }
-      },
-      onChange: function(current, valuePerc, timePerc) {
-        if (originalOnChange) {
-          if (Array.isArray(current)) {
-            return originalOnChange(
-              calculateColor(current, current, 0),
-              valuePerc,
-              timePerc
-            );
-          }
-          originalOnChange(current, valuePerc, timePerc);
-        }
-      }
-    }));
-  }
-
-  fabric.util.animateColor = animateColor;
-
-})();

package/src/util/dom_event.js

@@ -1,50 +0,0 @@
-(function () {
-  // since ie11 can use addEventListener but they do not support options, i need to check
-  var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent,
-      touchEvents = ['touchstart', 'touchmove', 'touchend'];
-  /**
-   * Adds an event listener to an element
-   * @function
-   * @memberOf fabric.util
-   * @param {HTMLElement} element
-   * @param {String} eventName
-   * @param {Function} handler
-   */
-  fabric.util.addListener = function(element, eventName, handler, options) {
-    element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options);
-  };
-
-  /**
-   * Removes an event listener from an element
-   * @function
-   * @memberOf fabric.util
-   * @param {HTMLElement} element
-   * @param {String} eventName
-   * @param {Function} handler
-   */
-  fabric.util.removeListener = function(element, eventName, handler, options) {
-    element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options);
-  };
-
-  function getTouchInfo(event) {
-    var touchProp = event.changedTouches;
-    if (touchProp && touchProp[0]) {
-      return touchProp[0];
-    }
-    return event;
-  }
-
-  fabric.util.getPointer = function(event) {
-    var element = event.target,
-        scroll = fabric.util.getScrollLeftTop(element),
-        _evt = getTouchInfo(event);
-    return {
-      x: _evt.clientX + scroll.left,
-      y: _evt.clientY + scroll.top
-    };
-  };
-
-  fabric.util.isTouchEvent = function(event) {
-    return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch';
-  };
-})();

package/src/util/dom_misc.js

@@ -1,300 +0,0 @@
-(function() {
-
-  var _slice = Array.prototype.slice;
-
-  /**
-   * Takes id and returns an element with that id (if one exists in a document)
-   * @memberOf fabric.util
-   * @param {String|HTMLElement} id
-   * @return {HTMLElement|null}
-   */
-  function getById(id) {
-    return typeof id === 'string' ? fabric.document.getElementById(id) : id;
-  }
-
-  var sliceCanConvertNodelists,
-      /**
-       * Converts an array-like object (e.g. arguments or NodeList) to an array
-       * @memberOf fabric.util
-       * @param {Object} arrayLike
-       * @return {Array}
-       */
-      toArray = function(arrayLike) {
-        return _slice.call(arrayLike, 0);
-      };
-
-  try {
-    sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;
-  }
-  catch (err) { }
-
-  if (!sliceCanConvertNodelists) {
-    toArray = function(arrayLike) {
-      var arr = new Array(arrayLike.length), i = arrayLike.length;
-      while (i--) {
-        arr[i] = arrayLike[i];
-      }
-      return arr;
-    };
-  }
-
-  /**
-   * Creates specified element with specified attributes
-   * @memberOf fabric.util
-   * @param {String} tagName Type of an element to create
-   * @param {Object} [attributes] Attributes to set on an element
-   * @return {HTMLElement} Newly created element
-   */
-  function makeElement(tagName, attributes) {
-    var el = fabric.document.createElement(tagName);
-    for (var prop in attributes) {
-      if (prop === 'class') {
-        el.className = attributes[prop];
-      }
-      else if (prop === 'for') {
-        el.htmlFor = attributes[prop];
-      }
-      else {
-        el.setAttribute(prop, attributes[prop]);
-      }
-    }
-    return el;
-  }
-
-  /**
-   * Adds class to an element
-   * @memberOf fabric.util
-   * @param {HTMLElement} element Element to add class to
-   * @param {String} className Class to add to an element
-   */
-  function addClass(element, className) {
-    if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {
-      element.className += (element.className ? ' ' : '') + className;
-    }
-  }
-
-  /**
-   * Wraps element with another element
-   * @memberOf fabric.util
-   * @param {HTMLElement} element Element to wrap
-   * @param {HTMLElement|String} wrapper Element to wrap with
-   * @param {Object} [attributes] Attributes to set on a wrapper
-   * @return {HTMLElement} wrapper
-   */
-  function wrapElement(element, wrapper, attributes) {
-    if (typeof wrapper === 'string') {
-      wrapper = makeElement(wrapper, attributes);
-    }
-    if (element.parentNode) {
-      element.parentNode.replaceChild(wrapper, element);
-    }
-    wrapper.appendChild(element);
-    return wrapper;
-  }
-
-  /**
-   * Returns element scroll offsets
-   * @memberOf fabric.util
-   * @param {HTMLElement} element Element to operate on
-   * @return {Object} Object with left/top values
-   */
-  function getScrollLeftTop(element) {
-
-    var left = 0,
-        top = 0,
-        docElement = fabric.document.documentElement,
-        body = fabric.document.body || {
-          scrollLeft: 0, scrollTop: 0
-        };
-
-    // While loop checks (and then sets element to) .parentNode OR .host
-    //  to account for ShadowDOM. We still want to traverse up out of ShadowDOM,
-    //  but the .parentNode of a root ShadowDOM node will always be null, instead
-    //  it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938
-    while (element && (element.parentNode || element.host)) {
-
-      // Set element to element parent, or 'host' in case of ShadowDOM
-      element = element.parentNode || element.host;
-
-      if (element === fabric.document) {
-        left = body.scrollLeft || docElement.scrollLeft || 0;
-        top = body.scrollTop ||  docElement.scrollTop || 0;
-      }
-      else {
-        left += element.scrollLeft || 0;
-        top += element.scrollTop || 0;
-      }
-
-      if (element.nodeType === 1 && element.style.position === 'fixed') {
-        break;
-      }
-    }
-
-    return { left: left, top: top };
-  }
-
-  /**
-   * Returns offset for a given element
-   * @function
-   * @memberOf fabric.util
-   * @param {HTMLElement} element Element to get offset for
-   * @return {Object} Object with "left" and "top" properties
-   */
-  function getElementOffset(element) {
-    var docElem,
-        doc = element && element.ownerDocument,
-        box = { left: 0, top: 0 },
-        offset = { left: 0, top: 0 },
-        scrollLeftTop,
-        offsetAttributes = {
-          borderLeftWidth: 'left',
-          borderTopWidth:  'top',
-          paddingLeft:     'left',
-          paddingTop:      'top'
-        };
-
-    if (!doc) {
-      return offset;
-    }
-
-    for (var attr in offsetAttributes) {
-      offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;
-    }
-
-    docElem = doc.documentElement;
-    if ( typeof element.getBoundingClientRect !== 'undefined' ) {
-      box = element.getBoundingClientRect();
-    }
-
-    scrollLeftTop = getScrollLeftTop(element);
-
-    return {
-      left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
-      top: box.top + scrollLeftTop.top - (docElem.clientTop || 0)  + offset.top
-    };
-  }
-
-  /**
-   * Returns style attribute value of a given element
-   * @memberOf fabric.util
-   * @param {HTMLElement} element Element to get style attribute for
-   * @param {String} attr Style attribute to get for element
-   * @return {String} Style attribute value of the given element.
-   */
-  var getElementStyle;
-  if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
-    getElementStyle = function(element, attr) {
-      var style = fabric.document.defaultView.getComputedStyle(element, null);
-      return style ? style[attr] : undefined;
-    };
-  }
-  else {
-    getElementStyle = function(element, attr) {
-      var value = element.style[attr];
-      if (!value && element.currentStyle) {
-        value = element.currentStyle[attr];
-      }
-      return value;
-    };
-  }
-
-  (function () {
-    var style = fabric.document.documentElement.style,
-        selectProp = 'userSelect' in style
-          ? 'userSelect'
-          : 'MozUserSelect' in style
-            ? 'MozUserSelect'
-            : 'WebkitUserSelect' in style
-              ? 'WebkitUserSelect'
-              : 'KhtmlUserSelect' in style
-                ? 'KhtmlUserSelect'
-                : '';
-
-    /**
-     * Makes element unselectable
-     * @memberOf fabric.util
-     * @param {HTMLElement} element Element to make unselectable
-     * @return {HTMLElement} Element that was passed in
-     */
-    function makeElementUnselectable(element) {
-      if (typeof element.onselectstart !== 'undefined') {
-        element.onselectstart = fabric.util.falseFunction;
-      }
-      if (selectProp) {
-        element.style[selectProp] = 'none';
-      }
-      else if (typeof element.unselectable === 'string') {
-        element.unselectable = 'on';
-      }
-      return element;
-    }
-
-    /**
-     * Makes element selectable
-     * @memberOf fabric.util
-     * @param {HTMLElement} element Element to make selectable
-     * @return {HTMLElement} Element that was passed in
-     */
-    function makeElementSelectable(element) {
-      if (typeof element.onselectstart !== 'undefined') {
-        element.onselectstart = null;
-      }
-      if (selectProp) {
-        element.style[selectProp] = '';
-      }
-      else if (typeof element.unselectable === 'string') {
-        element.unselectable = '';
-      }
-      return element;
-    }
-
-    fabric.util.makeElementUnselectable = makeElementUnselectable;
-    fabric.util.makeElementSelectable = makeElementSelectable;
-  })();
-
-  function getNodeCanvas(element) {
-    var impl = fabric.jsdomImplForWrapper(element);
-    return impl._canvas || impl._image;
-  };
-
-  function cleanUpJsdomNode(element) {
-    if (!fabric.isLikelyNode) {
-      return;
-    }
-    var impl = fabric.jsdomImplForWrapper(element);
-    if (impl) {
-      impl._image = null;
-      impl._canvas = null;
-      // unsure if necessary
-      impl._currentSrc = null;
-      impl._attributes = null;
-      impl._classList = null;
-    }
-  }
-
-  function setImageSmoothing(ctx, value) {
-    ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled
-      || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled;
-    ctx.imageSmoothingEnabled = value;
-  }
-
-  /**
-   * setImageSmoothing sets the context imageSmoothingEnabled property.
-   * Used by canvas and by ImageObject.
-   * @memberOf fabric.util
-   * @since 4.0.0
-   * @param {HTMLRenderingContext2D} ctx to set on
-   * @param {Boolean} value true or false
-   */
-  fabric.util.setImageSmoothing = setImageSmoothing;
-  fabric.util.getById = getById;
-  fabric.util.toArray = toArray;
-  fabric.util.addClass = addClass;
-  fabric.util.makeElement = makeElement;
-  fabric.util.wrapElement = wrapElement;
-  fabric.util.getScrollLeftTop = getScrollLeftTop;
-  fabric.util.getElementOffset = getElementOffset;
-  fabric.util.getNodeCanvas = getNodeCanvas;
-  fabric.util.cleanUpJsdomNode = cleanUpJsdomNode;
-
-})();

package/src/util/dom_request.js

@@ -1,54 +0,0 @@
-(function() {
-
-  function addParamToUrl(url, param) {
-    return url + (/\?/.test(url) ? '&' : '?') + param;
-  }
-
-  function emptyFn() { }
-
-  /**
-   * Cross-browser abstraction for sending XMLHttpRequest
-   * @memberOf fabric.util
-   * @param {String} url URL to send XMLHttpRequest to
-   * @param {Object} [options] Options object
-   * @param {String} [options.method="GET"]
-   * @param {String} [options.parameters] parameters to append to url in GET or in body
-   * @param {String} [options.body] body to send with POST or PUT request
-   * @param {Function} options.onComplete Callback to invoke when request is completed
-   * @return {XMLHttpRequest} request
-   */
-  function request(url, options) {
-    options || (options = { });
-
-    var method = options.method ? options.method.toUpperCase() : 'GET',
-        onComplete = options.onComplete || function() { },
-        xhr = new fabric.window.XMLHttpRequest(),
-        body = options.body || options.parameters;
-
-    /** @ignore */
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === 4) {
-        onComplete(xhr);
-        xhr.onreadystatechange = emptyFn;
-      }
-    };
-
-    if (method === 'GET') {
-      body = null;
-      if (typeof options.parameters === 'string') {
-        url = addParamToUrl(url, options.parameters);
-      }
-    }
-
-    xhr.open(method, url, true);
-
-    if (method === 'POST' || method === 'PUT') {
-      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    }
-
-    xhr.send(body);
-    return xhr;
-  }
-
-  fabric.util.request = request;
-})();

package/src/util/dom_style.js

@@ -1,70 +0,0 @@
-(function () {
-
-  /**
-   * Cross-browser wrapper for setting element's style
-   * @memberOf fabric.util
-   * @param {HTMLElement} element
-   * @param {Object} styles
-   * @return {HTMLElement} Element that was passed as a first argument
-   */
-  function setStyle(element, styles) {
-    var elementStyle = element.style;
-    if (!elementStyle) {
-      return element;
-    }
-    if (typeof styles === 'string') {
-      element.style.cssText += ';' + styles;
-      return styles.indexOf('opacity') > -1
-        ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1])
-        : element;
-    }
-    for (var property in styles) {
-      if (property === 'opacity') {
-        setOpacity(element, styles[property]);
-      }
-      else {
-        var normalizedProperty = (property === 'float' || property === 'cssFloat')
-          ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat')
-          : property;
-        elementStyle.setProperty(normalizedProperty, styles[property]);
-      }
-    }
-    return element;
-  }
-
-  var parseEl = fabric.document.createElement('div'),
-      supportsOpacity = typeof parseEl.style.opacity === 'string',
-      supportsFilters = typeof parseEl.style.filter === 'string',
-      reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,
-
-      /** @ignore */
-      setOpacity = function (element) { return element; };
-
-  if (supportsOpacity) {
-    /** @ignore */
-    setOpacity = function(element, value) {
-      element.style.opacity = value;
-      return element;
-    };
-  }
-  else if (supportsFilters) {
-    /** @ignore */
-    setOpacity = function(element, value) {
-      var es = element.style;
-      if (element.currentStyle && !element.currentStyle.hasLayout) {
-        es.zoom = 1;
-      }
-      if (reOpacity.test(es.filter)) {
-        value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');
-        es.filter = es.filter.replace(reOpacity, value);
-      }
-      else {
-        es.filter += ' alpha(opacity=' + (value * 100) + ')';
-      }
-      return element;
-    };
-  }
-
-  fabric.util.setStyle = setStyle;
-
-})();

package/src/util/lang_array.js

@@ -1,94 +0,0 @@
-(function() {
-
-  var slice = Array.prototype.slice;
-
-  /**
-   * Invokes method on all items in a given array
-   * @memberOf fabric.util.array
-   * @param {Array} array Array to iterate over
-   * @param {String} method Name of a method to invoke
-   * @return {Array}
-   */
-  function invoke(array, method) {
-    var args = slice.call(arguments, 2), result = [];
-    for (var i = 0, len = array.length; i < len; i++) {
-      result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);
-    }
-    return result;
-  }
-
-  /**
-   * Finds maximum value in array (not necessarily "first" one)
-   * @memberOf fabric.util.array
-   * @param {Array} array Array to iterate over
-   * @param {String} byProperty
-   * @return {*}
-   */
-  function max(array, byProperty) {
-    return find(array, byProperty, function(value1, value2) {
-      return value1 >= value2;
-    });
-  }
-
-  /**
-   * Finds minimum value in array (not necessarily "first" one)
-   * @memberOf fabric.util.array
-   * @param {Array} array Array to iterate over
-   * @param {String} byProperty
-   * @return {*}
-   */
-  function min(array, byProperty) {
-    return find(array, byProperty, function(value1, value2) {
-      return value1 < value2;
-    });
-  }
-
-  /**
-   * @private
-   */
-  function fill(array, value) {
-    var k = array.length;
-    while (k--) {
-      array[k] = value;
-    }
-    return array;
-  }
-
-  /**
-   * @private
-   */
-  function find(array, byProperty, condition) {
-    if (!array || array.length === 0) {
-      return;
-    }
-
-    var i = array.length - 1,
-        result = byProperty ? array[i][byProperty] : array[i];
-    if (byProperty) {
-      while (i--) {
-        if (condition(array[i][byProperty], result)) {
-          result = array[i][byProperty];
-        }
-      }
-    }
-    else {
-      while (i--) {
-        if (condition(array[i], result)) {
-          result = array[i];
-        }
-      }
-    }
-    return result;
-  }
-
-  /**
-   * @namespace fabric.util.array
-   */
-  fabric.util.array = {
-    fill: fill,
-    invoke: invoke,
-    min: min,
-    max: max
-  };
-
-})();