fabric 5.3.0 → 6.0.0-beta1

package/src/mixins/object_interactivity.mixin.js

@@ -1,314 +0,0 @@
-(function() {
-
-  var degreesToRadians = fabric.util.degreesToRadians;
-
-  fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
-    /**
-     * Determines which corner has been clicked
-     * @private
-     * @param {Object} pointer The pointer indicating the mouse position
-     * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
-     */
-    _findTargetCorner: function(pointer, forTouch) {
-      // objects in group, anykind, are not self modificable,
-      // must not return an hovered corner.
-      if (!this.hasControls || this.group || (!this.canvas || this.canvas._activeObject !== this)) {
-        return false;
-      }
-
-      var ex = pointer.x,
-          ey = pointer.y,
-          xPoints,
-          lines, keys = Object.keys(this.oCoords),
-          j = keys.length - 1, i;
-      this.__corner = 0;
-
-      // cycle in reverse order so we pick first the one on top
-      for (; j >= 0; j--) {
-        i = keys[j];
-        if (!this.isControlVisible(i)) {
-          continue;
-        }
-
-        lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner);
-        // // debugging
-        //
-        // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
-        //
-        // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
-        // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
-
-        xPoints = this._findCrossPoints({ x: ex, y: ey }, lines);
-        if (xPoints !== 0 && xPoints % 2 === 1) {
-          this.__corner = i;
-          return i;
-        }
-      }
-      return false;
-    },
-
-    /**
-     * Calls a function for each control. The function gets called,
-     * with the control, the object that is calling the iterator and the control's key
-     * @param {Function} fn function to iterate over the controls over
-     */
-    forEachControl: function(fn) {
-      for (var i in this.controls) {
-        fn(this.controls[i], i, this);
-      };
-    },
-
-    /**
-     * Sets the coordinates of the draggable boxes in the corners of
-     * the image used to scale/rotate it.
-     * note: if we would switch to ROUND corner area, all of this would disappear.
-     * everything would resolve to a single point and a pythagorean theorem for the distance
-     * @private
-     */
-    _setCornerCoords: function() {
-      var coords = this.oCoords;
-
-      for (var control in coords) {
-        var controlObject = this.controls[control];
-        coords[control].corner = controlObject.calcCornerCoords(
-          this.angle, this.cornerSize, coords[control].x, coords[control].y, false);
-        coords[control].touchCorner = controlObject.calcCornerCoords(
-          this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true);
-      }
-    },
-
-    /**
-     * Draws a colored layer behind the object, inside its selection borders.
-     * Requires public options: padding, selectionBackgroundColor
-     * this function is called when the context is transformed
-     * has checks to be skipped when the object is on a staticCanvas
-     * @param {CanvasRenderingContext2D} ctx Context to draw on
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    drawSelectionBackground: function(ctx) {
-      if (!this.selectionBackgroundColor ||
-        (this.canvas && !this.canvas.interactive) ||
-        (this.canvas && this.canvas._activeObject !== this)
-      ) {
-        return this;
-      }
-      ctx.save();
-      var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions(),
-          vpt = this.canvas.viewportTransform;
-      ctx.translate(center.x, center.y);
-      ctx.scale(1 / vpt[0], 1 / vpt[3]);
-      ctx.rotate(degreesToRadians(this.angle));
-      ctx.fillStyle = this.selectionBackgroundColor;
-      ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y);
-      ctx.restore();
-      return this;
-    },
-
-    /**
-     * Draws borders of an object's bounding box.
-     * Requires public properties: width, height
-     * Requires public options: padding, borderColor
-     * @param {CanvasRenderingContext2D} ctx Context to draw on
-     * @param {Object} styleOverride object to override the object style
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    drawBorders: function(ctx, styleOverride) {
-      styleOverride = styleOverride || {};
-      var wh = this._calculateCurrentDimensions(),
-          strokeWidth = this.borderScaleFactor,
-          width = wh.x + strokeWidth,
-          height = wh.y + strokeWidth,
-          hasControls = typeof styleOverride.hasControls !== 'undefined' ?
-            styleOverride.hasControls : this.hasControls,
-          shouldStroke = false;
-
-      ctx.save();
-      ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
-      this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray);
-
-      ctx.strokeRect(
-        -width / 2,
-        -height / 2,
-        width,
-        height
-      );
-
-      if (hasControls) {
-        ctx.beginPath();
-        this.forEachControl(function(control, key, fabricObject) {
-          // in this moment, the ctx is centered on the object.
-          // width and height of the above function are the size of the bbox.
-          if (control.withConnection && control.getVisibility(fabricObject, key)) {
-            // reset movement for each control
-            shouldStroke = true;
-            ctx.moveTo(control.x * width, control.y * height);
-            ctx.lineTo(
-              control.x * width + control.offsetX,
-              control.y * height + control.offsetY
-            );
-          }
-        });
-        if (shouldStroke) {
-          ctx.stroke();
-        }
-      }
-      ctx.restore();
-      return this;
-    },
-
-    /**
-     * Draws borders of an object's bounding box when it is inside a group.
-     * Requires public properties: width, height
-     * Requires public options: padding, borderColor
-     * @param {CanvasRenderingContext2D} ctx Context to draw on
-     * @param {object} options object representing current object parameters
-     * @param {Object} styleOverride object to override the object style
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    drawBordersInGroup: function(ctx, options, styleOverride) {
-      styleOverride = styleOverride || {};
-      var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options),
-          strokeWidth = this.strokeWidth,
-          strokeUniform = this.strokeUniform,
-          borderScaleFactor = this.borderScaleFactor,
-          width =
-            bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor,
-          height =
-            bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor;
-      ctx.save();
-      this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray);
-      ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
-      ctx.strokeRect(
-        -width / 2,
-        -height / 2,
-        width,
-        height
-      );
-
-      ctx.restore();
-      return this;
-    },
-
-    /**
-     * Draws corners of an object's bounding box.
-     * Requires public properties: width, height
-     * Requires public options: cornerSize, padding
-     * @param {CanvasRenderingContext2D} ctx Context to draw on
-     * @param {Object} styleOverride object to override the object style
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    drawControls: function(ctx, styleOverride) {
-      styleOverride = styleOverride || {};
-      ctx.save();
-      var retinaScaling = this.canvas.getRetinaScaling(), matrix, p;
-      ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0);
-      ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor;
-      if (!this.transparentCorners) {
-        ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor;
-      }
-      this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray);
-      this.setCoords();
-      if (this.group) {
-        // fabricJS does not really support drawing controls inside groups,
-        // this piece of code here helps having at least the control in places.
-        // If an application needs to show some objects as selected because of some UI state
-        // can still call Object._renderControls() on any object they desire, independently of groups.
-        // using no padding, circular controls and hiding the rotating cursor is higly suggested,
-        matrix = this.group.calcTransformMatrix();
-      }
-      this.forEachControl(function(control, key, fabricObject) {
-        p = fabricObject.oCoords[key];
-        if (control.getVisibility(fabricObject, key)) {
-          if (matrix) {
-            p = fabric.util.transformPoint(p, matrix);
-          }
-          control.render(ctx, p.x, p.y, styleOverride, fabricObject);
-        }
-      });
-      ctx.restore();
-
-      return this;
-    },
-
-    /**
-     * Returns true if the specified control is visible, false otherwise.
-     * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
-     * @returns {Boolean} true if the specified control is visible, false otherwise
-     */
-    isControlVisible: function(controlKey) {
-      return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey);
-    },
-
-    /**
-     * Sets the visibility of the specified control.
-     * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
-     * @param {Boolean} visible true to set the specified control visible, false otherwise
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    setControlVisible: function(controlKey, visible) {
-      if (!this._controlsVisibility) {
-        this._controlsVisibility = {};
-      }
-      this._controlsVisibility[controlKey] = visible;
-      return this;
-    },
-
-    /**
-     * Sets the visibility state of object controls.
-     * @param {Object} [options] Options object
-     * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
-     * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it
-     * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it
-     * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it
-     * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it
-     * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it
-     * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it
-     * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it
-     * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    setControlsVisibility: function(options) {
-      options || (options = { });
-
-      for (var p in options) {
-        this.setControlVisible(p, options[p]);
-      }
-      return this;
-    },
-
-
-    /**
-     * This callback function is called every time _discardActiveObject or _setActiveObject
-     * try to to deselect this object. If the function returns true, the process is cancelled
-     * @param {Object} [options] options sent from the upper functions
-     * @param {Event} [options.e] event if the process is generated by an event
-     */
-    onDeselect: function() {
-      // implemented by sub-classes, as needed.
-    },
-
-
-    /**
-     * This callback function is called every time _discardActiveObject or _setActiveObject
-     * try to to select this object. If the function returns true, the process is cancelled
-     * @param {Object} [options] options sent from the upper functions
-     * @param {Event} [options.e] event if the process is generated by an event
-     */
-    onSelect: function() {
-      // implemented by sub-classes, as needed.
-    }
-  });
-})();

package/src/mixins/object_origin.mixin.js

@@ -1,255 +0,0 @@
-(function() {
-
-  var degreesToRadians = fabric.util.degreesToRadians,
-      originXOffset = {
-        left: -0.5,
-        center: 0,
-        right: 0.5
-      },
-      originYOffset = {
-        top: -0.5,
-        center: 0,
-        bottom: 0.5
-      };
-
-  fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
-
-    /**
-     * Translates the coordinates from a set of origin to another (based on the object's dimensions)
-     * @param {fabric.Point} point The point which corresponds to the originX and originY params
-     * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
-     * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {fabric.Point}
-     */
-    translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
-      var x = point.x,
-          y = point.y,
-          offsetX, offsetY, dim;
-
-      if (typeof fromOriginX === 'string') {
-        fromOriginX = originXOffset[fromOriginX];
-      }
-      else {
-        fromOriginX -= 0.5;
-      }
-
-      if (typeof toOriginX === 'string') {
-        toOriginX = originXOffset[toOriginX];
-      }
-      else {
-        toOriginX -= 0.5;
-      }
-
-      offsetX = toOriginX - fromOriginX;
-
-      if (typeof fromOriginY === 'string') {
-        fromOriginY = originYOffset[fromOriginY];
-      }
-      else {
-        fromOriginY -= 0.5;
-      }
-
-      if (typeof toOriginY === 'string') {
-        toOriginY = originYOffset[toOriginY];
-      }
-      else {
-        toOriginY -= 0.5;
-      }
-
-      offsetY = toOriginY - fromOriginY;
-
-      if (offsetX || offsetY) {
-        dim = this._getTransformedDimensions();
-        x = point.x + offsetX * dim.x;
-        y = point.y + offsetY * dim.y;
-      }
-
-      return new fabric.Point(x, y);
-    },
-
-    /**
-     * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
-     * @param {fabric.Point} point The point which corresponds to the originX and originY params
-     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {fabric.Point}
-     */
-    translateToCenterPoint: function(point, originX, originY) {
-      var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center');
-      if (this.angle) {
-        return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle));
-      }
-      return p;
-    },
-
-    /**
-     * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
-     * @param {fabric.Point} center The point which corresponds to center of the object
-     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {fabric.Point}
-     */
-    translateToOriginPoint: function(center, originX, originY) {
-      var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
-      if (this.angle) {
-        return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle));
-      }
-      return p;
-    },
-
-    /**
-     * Returns the real center coordinates of the object
-     * @return {fabric.Point}
-     */
-    getCenterPoint: function() {
-      var leftTop = new fabric.Point(this.left, this.top);
-      return this.translateToCenterPoint(leftTop, this.originX, this.originY);
-    },
-
-    /**
-     * Returns the coordinates of the object based on center coordinates
-     * @param {fabric.Point} point The point which corresponds to the originX and originY params
-     * @return {fabric.Point}
-     */
-    // getOriginPoint: function(center) {
-    //   return this.translateToOriginPoint(center, this.originX, this.originY);
-    // },
-
-    /**
-     * Returns the coordinates of the object as if it has a different origin
-     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {fabric.Point}
-     */
-    getPointByOrigin: function(originX, originY) {
-      var center = this.getCenterPoint();
-      return this.translateToOriginPoint(center, originX, originY);
-    },
-
-    /**
-     * Returns the point in local coordinates
-     * @param {fabric.Point} point The point relative to the global coordinate system
-     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {fabric.Point}
-     */
-    toLocalPoint: function(point, originX, originY) {
-      var center = this.getCenterPoint(),
-          p, p2;
-
-      if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) {
-        p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
-      }
-      else {
-        p = new fabric.Point(this.left, this.top);
-      }
-
-      p2 = new fabric.Point(point.x, point.y);
-      if (this.angle) {
-        p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle));
-      }
-      return p2.subtractEquals(p);
-    },
-
-    /**
-     * Returns the point in global coordinates
-     * @param {fabric.Point} The point relative to the local coordinate system
-     * @return {fabric.Point}
-     */
-    // toGlobalPoint: function(point) {
-    //   return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top));
-    // },
-
-    /**
-     * Sets the position of the object taking into consideration the object's origin
-     * @param {fabric.Point} pos The new position of the object
-     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
-     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
-     * @return {void}
-     */
-    setPositionByOrigin: function(pos, originX, originY) {
-      var center = this.translateToCenterPoint(pos, originX, originY),
-          position = this.translateToOriginPoint(center, this.originX, this.originY);
-      this.set('left', position.x);
-      this.set('top', position.y);
-    },
-
-    /**
-     * @param {String} to One of 'left', 'center', 'right'
-     */
-    adjustPosition: function(to) {
-      var angle = degreesToRadians(this.angle),
-          hypotFull = this.getScaledWidth(),
-          xFull = fabric.util.cos(angle) * hypotFull,
-          yFull = fabric.util.sin(angle) * hypotFull,
-          offsetFrom, offsetTo;
-
-      //TODO: this function does not consider mixed situation like top, center.
-      if (typeof this.originX === 'string') {
-        offsetFrom = originXOffset[this.originX];
-      }
-      else {
-        offsetFrom = this.originX - 0.5;
-      }
-      if (typeof to === 'string') {
-        offsetTo = originXOffset[to];
-      }
-      else {
-        offsetTo = to - 0.5;
-      }
-      this.left += xFull * (offsetTo - offsetFrom);
-      this.top += yFull * (offsetTo - offsetFrom);
-      this.setCoords();
-      this.originX = to;
-    },
-
-    /**
-     * Sets the origin/position of the object to it's center point
-     * @private
-     * @return {void}
-     */
-    _setOriginToCenter: function() {
-      this._originalOriginX = this.originX;
-      this._originalOriginY = this.originY;
-
-      var center = this.getCenterPoint();
-
-      this.originX = 'center';
-      this.originY = 'center';
-
-      this.left = center.x;
-      this.top = center.y;
-    },
-
-    /**
-     * Resets the origin/position of the object to it's original origin
-     * @private
-     * @return {void}
-     */
-    _resetOrigin: function() {
-      var originPoint = this.translateToOriginPoint(
-        this.getCenterPoint(),
-        this._originalOriginX,
-        this._originalOriginY);
-
-      this.originX = this._originalOriginX;
-      this.originY = this._originalOriginY;
-
-      this.left = originPoint.x;
-      this.top = originPoint.y;
-
-      this._originalOriginX = null;
-      this._originalOriginY = null;
-    },
-
-    /**
-     * @private
-     */
-    _getLeftTopCoords: function() {
-      return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');
-    },
-  });
-
-})();

package/src/mixins/object_stacking.mixin.js

@@ -1,80 +0,0 @@
-fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
-
-  /**
-   * Moves an object to the bottom of the stack of drawn objects
-   * @return {fabric.Object} thisArg
-   * @chainable
-   */
-  sendToBack: function() {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);
-    }
-    else if (this.canvas) {
-      this.canvas.sendToBack(this);
-    }
-    return this;
-  },
-
-  /**
-   * Moves an object to the top of the stack of drawn objects
-   * @return {fabric.Object} thisArg
-   * @chainable
-   */
-  bringToFront: function() {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);
-    }
-    else if (this.canvas) {
-      this.canvas.bringToFront(this);
-    }
-    return this;
-  },
-
-  /**
-   * Moves an object down in stack of drawn objects
-   * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
-   * @return {fabric.Object} thisArg
-   * @chainable
-   */
-  sendBackwards: function(intersecting) {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);
-    }
-    else if (this.canvas) {
-      this.canvas.sendBackwards(this, intersecting);
-    }
-    return this;
-  },
-
-  /**
-   * Moves an object up in stack of drawn objects
-   * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
-   * @return {fabric.Object} thisArg
-   * @chainable
-   */
-  bringForward: function(intersecting) {
-    if (this.group) {
-      fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);
-    }
-    else if (this.canvas) {
-      this.canvas.bringForward(this, intersecting);
-    }
-    return this;
-  },
-
-  /**
-   * Moves an object to specified level in stack of drawn objects
-   * @param {Number} index New position of object
-   * @return {fabric.Object} thisArg
-   * @chainable
-   */
-  moveTo: function(index) {
-    if (this.group && this.group.type !== 'activeSelection') {
-      fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);
-    }
-    else if (this.canvas) {
-      this.canvas.moveTo(this, index);
-    }
-    return this;
-  }
-});