fabric 5.3.0 → 6.0.0-beta3

package/src/mixins/canvas_gestures.mixin.js

@@ -1,149 +0,0 @@
-/**
- * Adds support for multi-touch gestures using the Event.js library.
- * Fires the following custom events:
- * - touch:gesture
- * - touch:drag
- * - touch:orientation
- * - touch:shake
- * - touch:longpress
- */
-(function() {
-
-  var degreesToRadians = fabric.util.degreesToRadians,
-      radiansToDegrees = fabric.util.radiansToDegrees;
-
-  fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
-    /**
-     * Method that defines actions when an Event.js gesture is detected on an object. Currently only supports
-     * 2 finger gestures.
-     * @param {Event} e Event object by Event.js
-     * @param {Event} self Event proxy object by Event.js
-     */
-    __onTransformGesture: function(e, self) {
-
-      if (this.isDrawingMode || !e.touches || e.touches.length !== 2 || 'gesture' !== self.gesture) {
-        return;
-      }
-
-      var target = this.findTarget(e);
-      if ('undefined' !== typeof target) {
-        this.__gesturesParams = {
-          e: e,
-          self: self,
-          target: target
-        };
-
-        this.__gesturesRenderer();
-      }
-
-      this.fire('touch:gesture', {
-        target: target, e: e, self: self
-      });
-    },
-    __gesturesParams: null,
-    __gesturesRenderer: function() {
-
-      if (this.__gesturesParams === null || this._currentTransform === null) {
-        return;
-      }
-
-      var self = this.__gesturesParams.self,
-          t = this._currentTransform,
-          e = this.__gesturesParams.e;
-
-      t.action = 'scale';
-      t.originX = t.originY = 'center';
-
-      this._scaleObjectBy(self.scale, e);
-
-      if (self.rotation !== 0) {
-        t.action = 'rotate';
-        this._rotateObjectByAngle(self.rotation, e);
-      }
-
-      this.requestRenderAll();
-
-      t.action = 'drag';
-    },
-
-    /**
-     * Method that defines actions when an Event.js drag is detected.
-     *
-     * @param {Event} e Event object by Event.js
-     * @param {Event} self Event proxy object by Event.js
-     */
-    __onDrag: function(e, self) {
-      this.fire('touch:drag', {
-        e: e, self: self
-      });
-    },
-
-    /**
-     * Method that defines actions when an Event.js orientation event is detected.
-     *
-     * @param {Event} e Event object by Event.js
-     * @param {Event} self Event proxy object by Event.js
-     */
-    __onOrientationChange: function(e, self) {
-      this.fire('touch:orientation', {
-        e: e, self: self
-      });
-    },
-
-    /**
-     * Method that defines actions when an Event.js shake event is detected.
-     *
-     * @param {Event} e Event object by Event.js
-     * @param {Event} self Event proxy object by Event.js
-     */
-    __onShake: function(e, self) {
-      this.fire('touch:shake', {
-        e: e, self: self
-      });
-    },
-
-    /**
-     * Method that defines actions when an Event.js longpress event is detected.
-     *
-     * @param {Event} e Event object by Event.js
-     * @param {Event} self Event proxy object by Event.js
-     */
-    __onLongPress: function(e, self) {
-      this.fire('touch:longpress', {
-        e: e, self: self
-      });
-    },
-
-    /**
-     * Scales an object by a factor
-     * @param {Number} s The scale factor to apply to the current scale level
-     * @param {Event} e Event object by Event.js
-     */
-    _scaleObjectBy: function(s, e) {
-      var t = this._currentTransform,
-          target = t.target;
-      t.gestureScale = s;
-      target._scaling = true;
-      return fabric.controlsUtils.scalingEqually(e, t, 0, 0);
-    },
-
-    /**
-     * Rotates object by an angle
-     * @param {Number} curAngle The angle of rotation in degrees
-     * @param {Event} e Event object by Event.js
-     */
-    _rotateObjectByAngle: function(curAngle, e) {
-      var t = this._currentTransform;
-
-      if (t.target.get('lockRotation')) {
-        return;
-      }
-      t.target.rotate(radiansToDegrees(degreesToRadians(curAngle) + t.theta));
-      this._fire('rotating', {
-        target: t.target,
-        e: e,
-        transform: t,
-      });
-    }
-  });
-})();

package/src/mixins/canvas_grouping.mixin.js

@@ -1,177 +0,0 @@
-(function() {
-
-  var min = Math.min,
-      max = Math.max;
-
-  fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
-
-    /**
-     * @private
-     * @param {Event} e Event object
-     * @param {fabric.Object} target
-     * @return {Boolean}
-     */
-    _shouldGroup: function(e, target) {
-      var activeObject = this._activeObject;
-      return activeObject && this._isSelectionKeyPressed(e) && target && target.selectable && this.selection &&
-            (activeObject !== target || activeObject.type === 'activeSelection') && !target.onSelect({ e: e });
-    },
-
-    /**
-     * @private
-     * @param {Event} e Event object
-     * @param {fabric.Object} target
-     */
-    _handleGrouping: function (e, target) {
-      var activeObject = this._activeObject;
-      // avoid multi select when shift click on a corner
-      if (activeObject.__corner) {
-        return;
-      }
-      if (target === activeObject) {
-        // if it's a group, find target again, using activeGroup objects
-        target = this.findTarget(e, true);
-        // if even object is not found or we are on activeObjectCorner, bail out
-        if (!target || !target.selectable) {
-          return;
-        }
-      }
-      if (activeObject && activeObject.type === 'activeSelection') {
-        this._updateActiveSelection(target, e);
-      }
-      else {
-        this._createActiveSelection(target, e);
-      }
-    },
-
-    /**
-     * @private
-     */
-    _updateActiveSelection: function(target, e) {
-      var activeSelection = this._activeObject,
-          currentActiveObjects = activeSelection._objects.slice(0);
-      if (activeSelection.contains(target)) {
-        activeSelection.removeWithUpdate(target);
-        this._hoveredTarget = target;
-        this._hoveredTargets = this.targets.concat();
-        if (activeSelection.size() === 1) {
-          // activate last remaining object
-          this._setActiveObject(activeSelection.item(0), e);
-        }
-      }
-      else {
-        activeSelection.addWithUpdate(target);
-        this._hoveredTarget = activeSelection;
-        this._hoveredTargets = this.targets.concat();
-      }
-      this._fireSelectionEvents(currentActiveObjects, e);
-    },
-
-    /**
-     * @private
-     */
-    _createActiveSelection: function(target, e) {
-      var currentActives = this.getActiveObjects(), group = this._createGroup(target);
-      this._hoveredTarget = group;
-      // ISSUE 4115: should we consider subTargets here?
-      // this._hoveredTargets = [];
-      // this._hoveredTargets = this.targets.concat();
-      this._setActiveObject(group, e);
-      this._fireSelectionEvents(currentActives, e);
-    },
-
-    /**
-     * @private
-     * @param {Object} target
-     */
-    _createGroup: function(target) {
-      var objects = this._objects,
-          isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target),
-          groupObjects = isActiveLower
-            ? [this._activeObject, target]
-            : [target, this._activeObject];
-      this._activeObject.isEditing && this._activeObject.exitEditing();
-      return new fabric.ActiveSelection(groupObjects, {
-        canvas: this
-      });
-    },
-
-    /**
-     * @private
-     * @param {Event} e mouse event
-     */
-    _groupSelectedObjects: function (e) {
-
-      var group = this._collectObjects(e),
-          aGroup;
-
-      // do not create group for 1 element only
-      if (group.length === 1) {
-        this.setActiveObject(group[0], e);
-      }
-      else if (group.length > 1) {
-        aGroup = new fabric.ActiveSelection(group.reverse(), {
-          canvas: this
-        });
-        this.setActiveObject(aGroup, e);
-      }
-    },
-
-    /**
-     * @private
-     */
-    _collectObjects: function(e) {
-      var group = [],
-          currentObject,
-          x1 = this._groupSelector.ex,
-          y1 = this._groupSelector.ey,
-          x2 = x1 + this._groupSelector.left,
-          y2 = y1 + this._groupSelector.top,
-          selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
-          selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
-          allowIntersect = !this.selectionFullyContained,
-          isClick = x1 === x2 && y1 === y2;
-      // we iterate reverse order to collect top first in case of click.
-      for (var i = this._objects.length; i--; ) {
-        currentObject = this._objects[i];
-
-        if (!currentObject || !currentObject.selectable || !currentObject.visible) {
-          continue;
-        }
-
-        if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) ||
-            currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) ||
-            (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) ||
-            (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true))
-        ) {
-          group.push(currentObject);
-          // only add one object if it's a click
-          if (isClick) {
-            break;
-          }
-        }
-      }
-
-      if (group.length > 1) {
-        group = group.filter(function(object) {
-          return !object.onSelect({ e: e });
-        });
-      }
-
-      return group;
-    },
-
-    /**
-     * @private
-     */
-    _maybeGroupObjects: function(e) {
-      if (this.selection && this._groupSelector) {
-        this._groupSelectedObjects(e);
-      }
-      this.setCursor(this.defaultCursor);
-      // clear selection and current transformation
-      this._groupSelector = null;
-    }
-  });
-
-})();

package/src/mixins/canvas_serialization.mixin.js

@@ -1,228 +0,0 @@
-fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
-  /**
-   * Populates canvas with data from the specified JSON.
-   * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
-   * @param {String|Object} json JSON string or object
-   * @param {Function} callback Callback, invoked when json is parsed
-   *                            and corresponding objects (e.g: {@link fabric.Image})
-   *                            are initialized
-   * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
-   * @return {fabric.Canvas} instance
-   * @chainable
-   * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization}
-   * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
-   * @example <caption>loadFromJSON</caption>
-   * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
-   * @example <caption>loadFromJSON with reviver</caption>
-   * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
-   *   // `o` = json object
-   *   // `object` = fabric.Object instance
-   *   // ... do some stuff ...
-   * });
-   */
-  loadFromJSON: function (json, callback, reviver) {
-    if (!json) {
-      return;
-    }
-
-    // serialize if it wasn't already
-    var serialized = (typeof json === 'string')
-      ? JSON.parse(json)
-      : fabric.util.object.clone(json);
-
-    var _this = this,
-        clipPath = serialized.clipPath,
-        renderOnAddRemove = this.renderOnAddRemove;
-
-    this.renderOnAddRemove = false;
-
-    delete serialized.clipPath;
-
-    this._enlivenObjects(serialized.objects, function (enlivenedObjects) {
-      _this.clear();
-      _this._setBgOverlay(serialized, function () {
-        if (clipPath) {
-          _this._enlivenObjects([clipPath], function (enlivenedCanvasClip) {
-            _this.clipPath = enlivenedCanvasClip[0];
-            _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback);
-          });
-        }
-        else {
-          _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback);
-        }
-      });
-    }, reviver);
-    return this;
-  },
-
-  /**
-   * @private
-   * @param {Object} serialized Object with background and overlay information
-   * @param {Array} restored canvas objects
-   * @param {Function} cached renderOnAddRemove callback
-   * @param {Function} callback Invoked after all background and overlay images/patterns loaded
-   */
-  __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove, callback) {
-    var _this = this;
-    enlivenedObjects.forEach(function(obj, index) {
-      // we splice the array just in case some custom classes restored from JSON
-      // will add more object to canvas at canvas init.
-      _this.insertAt(obj, index);
-    });
-    this.renderOnAddRemove = renderOnAddRemove;
-    // remove parts i cannot set as options
-    delete serialized.objects;
-    delete serialized.backgroundImage;
-    delete serialized.overlayImage;
-    delete serialized.background;
-    delete serialized.overlay;
-    // this._initOptions does too many things to just
-    // call it. Normally loading an Object from JSON
-    // create the Object instance. Here the Canvas is
-    // already an instance and we are just loading things over it
-    this._setOptions(serialized);
-    this.renderAll();
-    callback && callback();
-  },
-
-  /**
-   * @private
-   * @param {Object} serialized Object with background and overlay information
-   * @param {Function} callback Invoked after all background and overlay images/patterns loaded
-   */
-  _setBgOverlay: function(serialized, callback) {
-    var loaded = {
-      backgroundColor: false,
-      overlayColor: false,
-      backgroundImage: false,
-      overlayImage: false
-    };
-
-    if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) {
-      callback && callback();
-      return;
-    }
-
-    var cbIfLoaded = function () {
-      if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) {
-        callback && callback();
-      }
-    };
-
-    this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded);
-    this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded);
-    this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded);
-    this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded);
-  },
-
-  /**
-   * @private
-   * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor)
-   * @param {(Object|String)} value Value to set
-   * @param {Object} loaded Set loaded property to true if property is set
-   * @param {Object} callback Callback function to invoke after property is set
-   */
-  __setBgOverlay: function(property, value, loaded, callback) {
-    var _this = this;
-
-    if (!value) {
-      loaded[property] = true;
-      callback && callback();
-      return;
-    }
-
-    if (property === 'backgroundImage' || property === 'overlayImage') {
-      fabric.util.enlivenObjects([value], function(enlivedObject){
-        _this[property] = enlivedObject[0];
-        loaded[property] = true;
-        callback && callback();
-      });
-    }
-    else {
-      this['set' + fabric.util.string.capitalize(property, true)](value, function() {
-        loaded[property] = true;
-        callback && callback();
-      });
-    }
-  },
-
-  /**
-   * @private
-   * @param {Array} objects
-   * @param {Function} callback
-   * @param {Function} [reviver]
-   */
-  _enlivenObjects: function (objects, callback, reviver) {
-    if (!objects || objects.length === 0) {
-      callback && callback([]);
-      return;
-    }
-
-    fabric.util.enlivenObjects(objects, function(enlivenedObjects) {
-      callback && callback(enlivenedObjects);
-    }, null, reviver);
-  },
-
-  /**
-   * @private
-   * @param {String} format
-   * @param {Function} callback
-   */
-  _toDataURL: function (format, callback) {
-    this.clone(function (clone) {
-      callback(clone.toDataURL(format));
-    });
-  },
-
-  /**
-   * @private
-   * @param {String} format
-   * @param {Number} multiplier
-   * @param {Function} callback
-   */
-  _toDataURLWithMultiplier: function (format, multiplier, callback) {
-    this.clone(function (clone) {
-      callback(clone.toDataURLWithMultiplier(format, multiplier));
-    });
-  },
-
-  /**
-   * Clones canvas instance
-   * @param {Object} [callback] Receives cloned instance as a first argument
-   * @param {Array} [properties] Array of properties to include in the cloned canvas and children
-   */
-  clone: function (callback, properties) {
-    var data = JSON.stringify(this.toJSON(properties));
-    this.cloneWithoutData(function(clone) {
-      clone.loadFromJSON(data, function() {
-        callback && callback(clone);
-      });
-    });
-  },
-
-  /**
-   * Clones canvas instance without cloning existing data.
-   * This essentially copies canvas dimensions, clipping properties, etc.
-   * but leaves data empty (so that you can populate it with your own)
-   * @param {Object} [callback] Receives cloned instance as a first argument
-   */
-  cloneWithoutData: function(callback) {
-    var el = fabric.util.createCanvasElement();
-
-    el.width = this.width;
-    el.height = this.height;
-
-    var clone = new fabric.Canvas(el);
-    if (this.backgroundImage) {
-      clone.setBackgroundImage(this.backgroundImage.src, function() {
-        clone.renderAll();
-        callback && callback(clone);
-      });
-      clone.backgroundImageOpacity = this.backgroundImageOpacity;
-      clone.backgroundImageStretch = this.backgroundImageStretch;
-    }
-    else {
-      callback && callback(clone);
-    }
-  }
-});