fabric 5.3.0 → 6.0.0-beta1

package/src/shapes/polyline.class.js

@@ -1,268 +0,0 @@
-(function(global) {
-
-  'use strict';
-
-  var fabric = global.fabric || (global.fabric = { }),
-      extend = fabric.util.object.extend,
-      min = fabric.util.array.min,
-      max = fabric.util.array.max,
-      toFixed = fabric.util.toFixed,
-      projectStrokeOnPoints = fabric.util.projectStrokeOnPoints;
-
-  if (fabric.Polyline) {
-    fabric.warn('fabric.Polyline is already defined');
-    return;
-  }
-
-  /**
-   * Polyline class
-   * @class fabric.Polyline
-   * @extends fabric.Object
-   * @see {@link fabric.Polyline#initialize} for constructor definition
-   */
-  fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ {
-
-    /**
-     * Type of an object
-     * @type String
-     * @default
-     */
-    type: 'polyline',
-
-    /**
-     * Points array
-     * @type Array
-     * @default
-     */
-    points: null,
-
-    /**
-     * WARNING: Feature in progress
-     * Calculate the exact bounding box taking in account strokeWidth on acute angles
-     * this will be turned to true by default on fabric 6.0
-     * maybe will be left in as an optimization since calculations may be slow
-     * @deprecated
-     * @type Boolean
-     * @default false
-     */
-    exactBoundingBox: false,
-
-    cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'),
-
-    /**
-     * Constructor
-     * @param {Array} points Array of points (where each point is an object with x and y)
-     * @param {Object} [options] Options object
-     * @return {fabric.Polyline} thisArg
-     * @example
-     * var poly = new fabric.Polyline([
-     *     { x: 10, y: 10 },
-     *     { x: 50, y: 30 },
-     *     { x: 40, y: 70 },
-     *     { x: 60, y: 50 },
-     *     { x: 100, y: 150 },
-     *     { x: 40, y: 100 }
-     *   ], {
-     *   stroke: 'red',
-     *   left: 100,
-     *   top: 100
-     * });
-     */
-    initialize: function(points, options) {
-      options = options || {};
-      this.points = points || [];
-      this.callSuper('initialize', options);
-      this._setPositionDimensions(options);
-    },
-
-    /**
-     * @private
-     */
-    _projectStrokeOnPoints: function () {
-      return projectStrokeOnPoints(this.points, this, true);
-    },
-
-    _setPositionDimensions: function(options) {
-      var calcDim = this._calcDimensions(options), correctLeftTop,
-          correctSize = this.exactBoundingBox ? this.strokeWidth : 0;
-      this.width = calcDim.width - correctSize;
-      this.height = calcDim.height - correctSize;
-      if (!options.fromSVG) {
-        correctLeftTop = this.translateToGivenOrigin(
-          {
-            // this looks bad, but is one way to keep it optional for now.
-            x: calcDim.left - this.strokeWidth / 2 + correctSize / 2,
-            y: calcDim.top - this.strokeWidth / 2 + correctSize / 2
-          },
-          'left',
-          'top',
-          this.originX,
-          this.originY
-        );
-      }
-      if (typeof options.left === 'undefined') {
-        this.left = options.fromSVG ? calcDim.left : correctLeftTop.x;
-      }
-      if (typeof options.top === 'undefined') {
-        this.top = options.fromSVG ? calcDim.top : correctLeftTop.y;
-      }
-      this.pathOffset = {
-        x: calcDim.left + this.width / 2 + correctSize / 2,
-        y: calcDim.top + this.height / 2 + correctSize / 2
-      };
-    },
-
-    /**
-     * Calculate the polygon min and max point from points array,
-     * returning an object with left, top, width, height to measure the
-     * polygon size
-     * @return {Object} object.left X coordinate of the polygon leftmost point
-     * @return {Object} object.top Y coordinate of the polygon topmost point
-     * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point
-     * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point
-     * @private
-     */
-    _calcDimensions: function() {
-
-      var points = this.exactBoundingBox ? this._projectStrokeOnPoints() : this.points,
-          minX = min(points, 'x') || 0,
-          minY = min(points, 'y') || 0,
-          maxX = max(points, 'x') || 0,
-          maxY = max(points, 'y') || 0,
-          width = (maxX - minX),
-          height = (maxY - minY);
-
-      return {
-        left: minX,
-        top: minY,
-        width: width,
-        height: height,
-      };
-    },
-
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} Object representation of an instance
-     */
-    toObject: function(propertiesToInclude) {
-      return extend(this.callSuper('toObject', propertiesToInclude), {
-        points: this.points.concat()
-      });
-    },
-
-    /* _TO_SVG_START_ */
-    /**
-     * Returns svg representation of an instance
-     * @return {Array} an array of strings with the specific svg representation
-     * of the instance
-     */
-    _toSVG: function() {
-      var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y,
-          NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
-
-      for (var i = 0, len = this.points.length; i < len; i++) {
-        points.push(
-          toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',',
-          toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' '
-        );
-      }
-      return [
-        '<' + this.type + ' ', 'COMMON_PARTS',
-        'points="', points.join(''),
-        '" />\n'
-      ];
-    },
-    /* _TO_SVG_END_ */
-
-
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     */
-    commonRender: function(ctx) {
-      var point, len = this.points.length,
-          x = this.pathOffset.x,
-          y = this.pathOffset.y;
-
-      if (!len || isNaN(this.points[len - 1].y)) {
-        // do not draw if no points or odd points
-        // NaN comes from parseFloat of a empty string in parser
-        return false;
-      }
-      ctx.beginPath();
-      ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
-      for (var i = 0; i < len; i++) {
-        point = this.points[i];
-        ctx.lineTo(point.x - x, point.y - y);
-      }
-      return true;
-    },
-
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     */
-    _render: function(ctx) {
-      if (!this.commonRender(ctx)) {
-        return;
-      }
-      this._renderPaintInOrder(ctx);
-    },
-
-    /**
-     * Returns complexity of an instance
-     * @return {Number} complexity of this instance
-     */
-    complexity: function() {
-      return this.get('points').length;
-    }
-  });
-
-  /* _FROM_SVG_START_ */
-  /**
-   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement})
-   * @static
-   * @memberOf fabric.Polyline
-   * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement
-   */
-  fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
-
-  /**
-   * Returns fabric.Polyline instance from an SVG element
-   * @static
-   * @memberOf fabric.Polyline
-   * @param {SVGElement} element Element to parser
-   * @param {Function} callback callback function invoked after parsing
-   * @param {Object} [options] Options object
-   */
-  fabric.Polyline.fromElementGenerator = function(_class) {
-    return function(element, callback, options) {
-      if (!element) {
-        return callback(null);
-      }
-      options || (options = { });
-
-      var points = fabric.parsePointsAttribute(element.getAttribute('points')),
-          parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES);
-      parsedAttributes.fromSVG = true;
-      callback(new fabric[_class](points, extend(parsedAttributes, options)));
-    };
-  };
-
-  fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline');
-
-  /* _FROM_SVG_END_ */
-
-  /**
-   * Returns fabric.Polyline instance from an object representation
-   * @static
-   * @memberOf fabric.Polyline
-   * @param {Object} object Object to create an instance from
-   * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created
-   */
-  fabric.Polyline.fromObject = function(object, callback) {
-    return fabric.Object._fromObject('Polyline', object, callback, 'points');
-  };
-
-})(typeof exports !== 'undefined' ? exports : this);

package/src/shapes/rect.class.js

@@ -1,187 +0,0 @@
-(function(global) {
-
-  'use strict';
-
-  var fabric = global.fabric || (global.fabric = { }),
-      extend = fabric.util.object.extend;
-
-  if (fabric.Rect) {
-    fabric.warn('fabric.Rect is already defined');
-    return;
-  }
-
-  /**
-   * Rectangle class
-   * @class fabric.Rect
-   * @extends fabric.Object
-   * @return {fabric.Rect} thisArg
-   * @see {@link fabric.Rect#initialize} for constructor definition
-   */
-  fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ {
-
-    /**
-     * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged})
-     * as well as for history (undo/redo) purposes
-     * @type Array
-     */
-    stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'),
-
-    /**
-     * Type of an object
-     * @type String
-     * @default
-     */
-    type: 'rect',
-
-    /**
-     * Horizontal border radius
-     * @type Number
-     * @default
-     */
-    rx:   0,
-
-    /**
-     * Vertical border radius
-     * @type Number
-     * @default
-     */
-    ry:   0,
-
-    cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'),
-
-    /**
-     * Constructor
-     * @param {Object} [options] Options object
-     * @return {Object} thisArg
-     */
-    initialize: function(options) {
-      this.callSuper('initialize', options);
-      this._initRxRy();
-    },
-
-    /**
-     * Initializes rx/ry attributes
-     * @private
-     */
-    _initRxRy: function() {
-      if (this.rx && !this.ry) {
-        this.ry = this.rx;
-      }
-      else if (this.ry && !this.rx) {
-        this.rx = this.ry;
-      }
-    },
-
-    /**
-     * @private
-     * @param {CanvasRenderingContext2D} ctx Context to render on
-     */
-    _render: function(ctx) {
-
-      // 1x1 case (used in spray brush) optimization was removed because
-      // with caching and higher zoom level this makes more damage than help
-
-      var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
-          ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
-          w = this.width,
-          h = this.height,
-          x = -this.width / 2,
-          y = -this.height / 2,
-          isRounded = rx !== 0 || ry !== 0,
-          /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */
-          k = 1 - 0.5522847498;
-      ctx.beginPath();
-
-      ctx.moveTo(x + rx, y);
-
-      ctx.lineTo(x + w - rx, y);
-      isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
-
-      ctx.lineTo(x + w, y + h - ry);
-      isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
-
-      ctx.lineTo(x + rx, y + h);
-      isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
-
-      ctx.lineTo(x, y + ry);
-      isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
-
-      ctx.closePath();
-
-      this._renderPaintInOrder(ctx);
-    },
-
-    /**
-     * Returns object representation of an instance
-     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
-     * @return {Object} object representation of an instance
-     */
-    toObject: function(propertiesToInclude) {
-      return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude));
-    },
-
-    /* _TO_SVG_START_ */
-    /**
-     * Returns svg representation of an instance
-     * @return {Array} an array of strings with the specific svg representation
-     * of the instance
-     */
-    _toSVG: function() {
-      var x = -this.width / 2, y = -this.height / 2;
-      return [
-        '<rect ', 'COMMON_PARTS',
-        'x="', x, '" y="', y,
-        '" rx="', this.rx, '" ry="', this.ry,
-        '" width="', this.width, '" height="', this.height,
-        '" />\n'
-      ];
-    },
-    /* _TO_SVG_END_ */
-  });
-
-  /* _FROM_SVG_START_ */
-  /**
-   * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
-   * @static
-   * @memberOf fabric.Rect
-   * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement
-   */
-  fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' '));
-
-  /**
-   * Returns {@link fabric.Rect} instance from an SVG element
-   * @static
-   * @memberOf fabric.Rect
-   * @param {SVGElement} element Element to parse
-   * @param {Function} callback callback function invoked after parsing
-   * @param {Object} [options] Options object
-   */
-  fabric.Rect.fromElement = function(element, callback, options) {
-    if (!element) {
-      return callback(null);
-    }
-    options = options || { };
-
-    var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);
-    parsedAttributes.left = parsedAttributes.left || 0;
-    parsedAttributes.top  = parsedAttributes.top  || 0;
-    parsedAttributes.height  = parsedAttributes.height || 0;
-    parsedAttributes.width  = parsedAttributes.width || 0;
-    var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
-    rect.visible = rect.visible && rect.width > 0 && rect.height > 0;
-    callback(rect);
-  };
-  /* _FROM_SVG_END_ */
-
-  /**
-   * Returns {@link fabric.Rect} instance from an object representation
-   * @static
-   * @memberOf fabric.Rect
-   * @param {Object} object Object to create an instance from
-   * @param {Function} [callback] Callback to invoke when an fabric.Rect instance is created
-   */
-  fabric.Rect.fromObject = function(object, callback) {
-    return fabric.Object._fromObject('Rect', object, callback);
-  };
-
-})(typeof exports !== 'undefined' ? exports : this);