RubyGems - fabric-rails - Versions diffs - 1.0.12 → 1.0.12.1 - Mend

fabric-rails 1.0.12 → 1.0.12.1

Files changed (56) hide show

data/CHANGELOG.md +16 -0
data/README.md +1 -1
data/lib/fabric/rails/version.rb +2 -2
data/vendor/assets/javascripts/event.js +1909 -0
data/vendor/assets/javascripts/fabric.js +64 -16464
data/vendor/assets/javascripts/fabric/HEADER.js +31 -0
data/vendor/assets/javascripts/fabric/canvas.class.js +1007 -0
data/vendor/assets/javascripts/fabric/canvas_animation.mixin.js +113 -0
data/vendor/assets/javascripts/fabric/canvas_events.mixin.js +482 -0
data/vendor/assets/javascripts/fabric/canvas_gestures.mixin.js +79 -0
data/vendor/assets/javascripts/fabric/canvas_serialization.mixin.js +311 -0
data/vendor/assets/javascripts/fabric/circle.class.js +182 -0
data/vendor/assets/javascripts/fabric/color.class.js +284 -0
data/vendor/assets/javascripts/fabric/ellipse.class.js +169 -0
data/vendor/assets/javascripts/fabric/freedrawing.class.js +256 -0
data/vendor/assets/javascripts/fabric/gradient.class.js +211 -0
data/vendor/assets/javascripts/fabric/group.class.js +556 -0
data/vendor/assets/javascripts/fabric/image.class.js +418 -0
data/vendor/assets/javascripts/fabric/image_filters.js +809 -0
data/vendor/assets/javascripts/fabric/intersection.class.js +178 -0
data/vendor/assets/javascripts/fabric/line.class.js +188 -0
data/vendor/assets/javascripts/fabric/log.js +26 -0
data/vendor/assets/javascripts/fabric/node.js +149 -0
data/vendor/assets/javascripts/fabric/object.class.js +1068 -0
data/vendor/assets/javascripts/fabric/object_geometry.mixin.js +308 -0
data/vendor/assets/javascripts/fabric/object_interactivity.mixin.js +496 -0
data/vendor/assets/javascripts/fabric/object_origin.mixin.js +207 -0
data/vendor/assets/javascripts/fabric/object_straightening.mixin.js +94 -0
data/vendor/assets/javascripts/fabric/observable.mixin.js +91 -0
data/vendor/assets/javascripts/fabric/parser.js +750 -0
data/vendor/assets/javascripts/fabric/path.class.js +794 -0
data/vendor/assets/javascripts/fabric/path_group.class.js +240 -0
data/vendor/assets/javascripts/fabric/pattern.class.js +69 -0
data/vendor/assets/javascripts/fabric/point.class.js +327 -0
data/vendor/assets/javascripts/fabric/polygon.class.js +184 -0
data/vendor/assets/javascripts/fabric/polyline.class.js +157 -0
data/vendor/assets/javascripts/fabric/rect.class.js +298 -0
data/vendor/assets/javascripts/fabric/scout.js +45 -0
data/vendor/assets/javascripts/fabric/shadow.class.js +70 -0
data/vendor/assets/javascripts/fabric/stateful.js +88 -0
data/vendor/assets/javascripts/fabric/static_canvas.class.js +1298 -0
data/vendor/assets/javascripts/fabric/text.class.js +934 -0
data/vendor/assets/javascripts/fabric/triangle.class.js +108 -0
data/vendor/assets/javascripts/fabric/util/anim_ease.js +360 -0
data/vendor/assets/javascripts/fabric/util/dom_event.js +237 -0
data/vendor/assets/javascripts/fabric/util/dom_misc.js +245 -0
data/vendor/assets/javascripts/fabric/util/dom_request.js +72 -0
data/vendor/assets/javascripts/fabric/util/dom_style.js +71 -0
data/vendor/assets/javascripts/fabric/util/lang_array.js +250 -0
data/vendor/assets/javascripts/fabric/util/lang_class.js +97 -0
data/vendor/assets/javascripts/fabric/util/lang_function.js +35 -0
data/vendor/assets/javascripts/fabric/util/lang_object.js +34 -0
data/vendor/assets/javascripts/fabric/util/lang_string.js +60 -0
data/vendor/assets/javascripts/fabric/util/misc.js +406 -0
data/vendor/assets/javascripts/json2.js +491 -0
metadata +53 -2

data/vendor/assets/javascripts/fabric/HEADER.js ADDED

@@ -0,0 +1,31 @@
+/*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */
+var fabric = fabric || { version: "1.0.12" };
+if (typeof exports !== 'undefined') {
+  exports.fabric = fabric;
+}
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+  fabric.document = document;
+  fabric.window = window;
+}
+else {
+  // assume we're running under node.js when document/window are not present
+  fabric.document = require("jsdom").jsdom("<!DOCTYPE html><html><head></head><body></body></html>");
+  fabric.window = fabric.document.createWindow();
+}
+/**
+ * True when in environment that supports touch events
+ * @property isTouchSupported
+ * @type boolean
+ */
+fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement;
+/**
+ * True when in environment that's probably Node.js
+ * @property isLikelyNode
+ * @type boolean
+ */
+fabric.isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined';

data/vendor/assets/javascripts/fabric/canvas.class.js ADDED

@@ -0,0 +1,1007 @@
+(function() {
+  var extend = fabric.util.object.extend,
+      getPointer = fabric.util.getPointer,
+      degreesToRadians = fabric.util.degreesToRadians,
+      radiansToDegrees = fabric.util.radiansToDegrees,
+      atan2 = Math.atan2,
+      abs = Math.abs,
+      min = Math.min,
+      max = Math.max,
+      STROKE_OFFSET = 0.5;
+  /**
+   * Canvas class
+   * @class fabric.Canvas
+   * @constructor
+   * @extends fabric.StaticCanvas
+   * @param {HTMLElement | String} el &lt;canvas> element to initialize instance on
+   * @param {Object} [options] Options object
+   */
+  fabric.Canvas = function(el, options) {
+    options || (options = { });
+    this._initStatic(el, options);
+    this._initInteractive();
+    this._createCacheCanvas();
+    fabric.Canvas.activeInstance = this;
+  };
+  function ProtoProxy(){ }
+  ProtoProxy.prototype = fabric.StaticCanvas.prototype;
+  fabric.Canvas.prototype = new ProtoProxy();
+  var InteractiveMethods = /** @scope fabric.Canvas.prototype */ {
+    /**
+     * When true, objects can be transformed by one side (unproportionally)
+     * @property
+     * @type Boolean
+     */
+    uniScaleTransform:      false,
+    /**
+     * When true, objects use center point as the origin of transformation
+     * @property
+     * @type Boolean
+     */
+    centerTransform:        false,
+    /**
+     * Indicates that canvas is interactive. This property should not be changed.
+     * @property
+     * @type Boolean
+     */
+    interactive:            true,
+    /**
+     * Indicates whether group selection should be enabled
+     * @property
+     * @type Boolean
+     */
+    selection:              true,
+    /**
+     * Color of selection
+     * @property
+     * @type String
+     */
+    selectionColor:         'rgba(100, 100, 255, 0.3)', // blue
+    /**
+     * Default dash array pattern
+     * If not empty the selection border is dashed
+     * @property
+     * @type Array
+     */
+    selectionDashArray:      [ ],
+    /**
+     * Color of the border of selection (usually slightly darker than color of selection itself)
+     * @property
+     * @type String
+     */
+    selectionBorderColor:   'rgba(255, 255, 255, 0.3)',
+    /**
+     * Width of a line used in object/group selection
+     * @property
+     * @type Number
+     */
+    selectionLineWidth:     1,
+    /**
+     * Color of the line used in free drawing mode
+     * @property
+     * @type String
+     */
+    freeDrawingColor:       'rgb(0, 0, 0)',
+    /**
+     * Width of a line used in free drawing mode
+     * @property
+     * @type Number
+     */
+    freeDrawingLineWidth:   1,
+    /**
+     * Default cursor value used when hovering over an object on canvas
+     * @property
+     * @type String
+     */
+    hoverCursor:            'move',
+    /**
+     * Default cursor value used when moving an object on canvas
+     * @property
+     * @type String
+     */
+    moveCursor:             'move',
+    /**
+     * Default cursor value used for the entire canvas
+     * @property
+     * @type String
+     */
+    defaultCursor:          'default',
+    /**
+     * Cursor value used during free drawing
+     * @property
+     * @type String
+     */
+    freeDrawingCursor:      'crosshair',
+    /**
+     * Cursor value used for rotation point
+     * @property
+     * @type String
+     */
+    rotationCursor:         'crosshair',
+    /**
+     * Default element class that's given to wrapper (div) element of canvas
+     * @property
+     * @type String
+     */
+    containerClass:        'canvas-container',
+    /**
+     * When true, object detection happens on per-pixel basis rather than on per-bounding-box
+     * @property
+     * @type Boolean
+     */
+    perPixelTargetFind:     false,
+    /**
+     * Number of pixels around target pixel to tolerate (consider active) during object detection
+     * @property
+     * @type Number
+     */
+    targetFindTolerance: 0,
+    /**
+     * @method _initInteractive
+     * @private
+     */
+    _initInteractive: function() {
+      this._currentTransform = null;
+      this._groupSelector = null;
+      this.freeDrawing = fabric.FreeDrawing && new fabric.FreeDrawing(this);
+      this._initWrapperElement();
+      this._createUpperCanvas();
+      this._initEvents();
+      this.calcOffset();
+    },
+    /**
+     * Resets the current transform to its original values and chooses the type of resizing based on the event
+     * @method _resetCurrentTransform
+     * @param e {Event} Event object fired on mousemove
+     */
+    _resetCurrentTransform: function(e) {
+      var t = this._currentTransform;
+      t.target.set('scaleX', t.original.scaleX);
+      t.target.set('scaleY', t.original.scaleY);
+      t.target.set('left', t.original.left);
+      t.target.set('top', t.original.top);
+      if (e.altKey || this.centerTransform) {
+        if (t.originX !== 'center') {
+          if (t.originX === 'right') {
+            t.mouseXSign = -1;
+          }
+          else {
+            t.mouseXSign = 1;
+          }
+        }
+        if (t.originY !== 'center') {
+          if (t.originY === 'bottom') {
+            t.mouseYSign = -1;
+          }
+          else {
+            t.mouseYSign = 1;
+          }
+        }
+        t.originX = 'center';
+        t.originY = 'center';
+      }
+      else {
+        t.originX = t.original.originX;
+        t.originY = t.original.originY;
+      }
+    },
+    /**
+     * Applies one implementation of 'point inside polygon' algorithm
+     * @method containsPoint
+     * @param e { Event } event object
+     * @param target { fabric.Object } object to test against
+     * @return {Boolean} true if point contains within area of given object
+     */
+    containsPoint: function (e, target) {
+      var pointer = this.getPointer(e),
+          xy = this._normalizePointer(target, pointer),
+          x = xy.x,
+          y = xy.y;
+      // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
+      // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
+      // we iterate through each object. If target found, return it.
+      var iLines = target._getImageLines(target.oCoords),
+          xpoints = target._findCrossPoints(x, y, iLines);
+      // if xcount is odd then we clicked inside the object
+      // For the specific case of square images xcount === 1 in all true cases
+      if ((xpoints && xpoints % 2 === 1) || target._findTargetCorner(e, this._offset)) {
+        return true;
+      }
+      return false;
+    },
+    /**
+     * @private
+     * @method _normalizePointer
+     */
+    _normalizePointer: function (object, pointer) {
+      var activeGroup = this.getActiveGroup(),
+          x = pointer.x,
+          y = pointer.y;
+      var isObjectInGroup = (
+        activeGroup &&
+        object.type !== 'group' &&
+        activeGroup.contains(object)
+      );
+      if (isObjectInGroup) {
+        x -= activeGroup.left;
+        y -= activeGroup.top;
+      }
+      return { x: x, y: y };
+    },
+    /**
+     * @private
+     * @method _isTargetTransparent
+     */
+    _isTargetTransparent: function (target, x, y) {
+      var cacheContext = this.contextCache;
+      var hasBorders = target.hasBorders, transparentCorners = target.transparentCorners;
+      target.hasBorders = target.transparentCorners = false;
+      this._draw(cacheContext, target);
+      target.hasBorders = hasBorders;
+      target.transparentCorners = transparentCorners;
+      // If tolerance is > 0 adjust start coords to take into account. If moves off Canvas fix to 0
+      if (this.targetFindTolerance > 0) {
+        if (x > this.targetFindTolerance) {
+          x -= this.targetFindTolerance;
+        }
+        else {
+          x = 0;
+        }
+        if (y > this.targetFindTolerance) {
+          y -= this.targetFindTolerance;
+        }
+        else {
+          y = 0;
+        }
+      }
+      var isTransparent = true;
+      var imageData = cacheContext.getImageData(
+        x, y, (this.targetFindTolerance * 2) || 1, (this.targetFindTolerance * 2) || 1);
+      // Split image data - for tolerance > 1, pixelDataSize = 4;
+      for (var i = 3; i < imageData.data.length; i += 4) {
+          var temp = imageData.data[i];
+          isTransparent = temp <= 0;
+          if (isTransparent === false) break; //Stop if colour found
+      }
+      imageData = null;
+      this.clearContext(cacheContext);
+      return isTransparent;
+    },
+    /**
+     * @private
+     * @method _shouldClearSelection
+     */
+    _shouldClearSelection: function (e) {
+      var target = this.findTarget(e),
+          activeGroup = this.getActiveGroup();
+      return (
+        !target || (
+          target &&
+          activeGroup &&
+          !activeGroup.contains(target) &&
+          activeGroup !== target &&
+          !e.shiftKey
+        )
+      );
+    },
+    /**
+     * @private
+     * @method _setupCurrentTransform
+     */
+    _setupCurrentTransform: function (e, target) {
+      var action = 'drag',
+          corner,
+          pointer = getPointer(e, target.canvas.upperCanvasEl);
+      corner = target._findTargetCorner(e, this._offset);
+      if (corner) {
+        action = (corner === 'ml' || corner === 'mr')
+          ? 'scaleX'
+          : (corner === 'mt' || corner === 'mb')
+            ? 'scaleY'
+            : corner === 'mtr'
+              ? 'rotate'
+              : 'scale';
+      }
+      var originX = "center", originY = "center";
+      if (corner === 'ml' || corner === 'tl' || corner === 'bl') {
+        originX = "right";
+      }
+      else if (corner === 'mr' || corner === 'tr' || corner === 'br') {
+        originX = "left";
+      }
+      if (corner === 'tl' || corner === 'mt' || corner === 'tr') {
+        originY = "bottom";
+      }
+      else if (corner === 'bl' || corner === 'mb' || corner === 'br') {
+        originY = "top";
+      }
+      if (corner === 'mtr') {
+        originX = 'center';
+        originY = 'center';
+      }
+      // var center = target.getCenterPoint();
+      this._currentTransform = {
+        target: target,
+        action: action,
+        scaleX: target.scaleX,
+        scaleY: target.scaleY,
+        offsetX: pointer.x - target.left,
+        offsetY: pointer.y - target.top,
+        originX: originX,
+        originY: originY,
+        ex: pointer.x,
+        ey: pointer.y,
+        left: target.left,
+        top: target.top,
+        theta: degreesToRadians(target.angle),
+        width: target.width * target.scaleX,
+        mouseXSign: 1,
+        mouseYSign: 1
+      };
+      this._currentTransform.original = {
+        left: target.left,
+        top: target.top,
+        scaleX: target.scaleX,
+        scaleY: target.scaleY,
+        originX: originX,
+        originY: originY
+      };
+      this._resetCurrentTransform(e);
+    },
+    /**
+     * @method _shouldHandleGroupLogic
+     * @param e {Event}
+     * @param target {fabric.Object}
+     * @return {Boolean}
+     */
+    _shouldHandleGroupLogic: function(e, target) {
+      var activeObject = this.getActiveObject();
+      return e.shiftKey &&
+            (this.getActiveGroup() || (activeObject && activeObject !== target))
+            && this.selection;
+    },
+    /**
+     * @private
+     * @method _handleGroupLogic
+     */
+    _handleGroupLogic: function (e, target) {
+      if (target === this.getActiveGroup()) {
+        // if it's a group, find target again, this time skipping group
+        target = this.findTarget(e, true);
+        // if even object is not found, bail out
+        if (!target || target.isType('group')) {
+          return;
+        }
+      }
+      var activeGroup = this.getActiveGroup();
+      if (activeGroup) {
+        if (activeGroup.contains(target)) {
+          activeGroup.removeWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
+          target.setActive(false);
+          if (activeGroup.size() === 1) {
+            // remove group alltogether if after removal it only contains 1 object
+            this.discardActiveGroup();
+          }
+        }
+        else {
+          activeGroup.addWithUpdate(target);
+          this._resetObjectTransform(activeGroup);
+        }
+        this.fire('selection:created', { target: activeGroup, e: e });
+        activeGroup.setActive(true);
+      }
+      else {
+        // group does not exist
+        if (this._activeObject) {
+          // only if there's an active object
+          if (target !== this._activeObject) {
+            // and that object is not the actual target
+            var group = new fabric.Group([ this._activeObject, target ]);
+            this.setActiveGroup(group);
+            activeGroup = this.getActiveGroup();
+          }
+        }
+        // activate target object in any case
+        target.setActive(true);
+      }
+      if (activeGroup) {
+        activeGroup.saveCoords();
+      }
+    },
+    /**
+     * Translates object by "setting" its left/top
+     * @method _translateObject
+     * @param x {Number} pointer's x coordinate
+     * @param y {Number} pointer's y coordinate
+     */
+    _translateObject: function (x, y) {
+      var target = this._currentTransform.target;
+      if (!target.get('lockMovementX')) {
+        target.set('left', x - this._currentTransform.offsetX);
+      }
+      if (!target.get('lockMovementY')) {
+        target.set('top', y - this._currentTransform.offsetY);
+      }
+    },
+    /**
+     * Scales object by invoking its scaleX/scaleY methods
+     * @method _scaleObject
+     * @param x {Number} pointer's x coordinate
+     * @param y {Number} pointer's y coordinate
+     * @param by {String} Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
+     *                    When not provided, an object is scaled by both dimensions equally
+     */
+    _scaleObject: function (x, y, by) {
+      var t = this._currentTransform,
+          offset = this._offset,
+          target = t.target;
+      var lockScalingX = target.get('lockScalingX'),
+          lockScalingY = target.get('lockScalingY');
+      if (lockScalingX && lockScalingY) return;
+      // Get the constraint point
+      var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY);
+      var localMouse = target.toLocalPoint(new fabric.Point(x - offset.left, y - offset.top), t.originX, t.originY);
+      if (t.originX === 'right') {
+        localMouse.x *= -1;
+      }
+      else if (t.originX === 'center') {
+        localMouse.x *= t.mouseXSign * 2;
+        if (localMouse.x < 0) {
+          t.mouseXSign = -t.mouseXSign;
+        }
+      }
+      if (t.originY === 'bottom') {
+        localMouse.y *= -1;
+      }
+      else if (t.originY === 'center') {
+        localMouse.y *= t.mouseYSign * 2;
+        if (localMouse.y < 0) {
+          t.mouseYSign = -t.mouseYSign;
+        }
+      }
+      // Actually scale the object
+      var newScaleX = target.scaleX, newScaleY = target.scaleY;
+      if (by === 'equally' && !lockScalingX && !lockScalingY) {
+        var dist = localMouse.y + localMouse.x;
+        var lastDist = (target.height) * t.original.scaleY +
+                       (target.width) * t.original.scaleX +
+                       (target.padding * 2) -
+                       (target.strokeWidth * 2) + 1 /* additional offset needed probably due to subpixel rendering, and avoids jerk when scaling an object */;
+        // We use t.scaleX/Y instead of target.scaleX/Y because the object may have a min scale and we'll loose the proportions
+        newScaleX = t.original.scaleX * dist/lastDist;
+        newScaleY = t.original.scaleY * dist/lastDist;
+        target.set('scaleX', newScaleX);
+        target.set('scaleY', newScaleY);
+      }
+      else if (!by) {
+        newScaleX = localMouse.x/(target.width+target.padding);
+        newScaleY = localMouse.y/(target.height+target.padding);
+        lockScalingX || target.set('scaleX', newScaleX);
+        lockScalingY || target.set('scaleY', newScaleY);
+      }
+      else if (by === 'x' && !target.get('lockUniScaling')) {
+        newScaleX = localMouse.x/(target.width+target.padding);
+        lockScalingX || target.set('scaleX', newScaleX);
+      }
+      else if (by === 'y' && !target.get('lockUniScaling')) {
+        newScaleY = localMouse.y/(target.height+target.padding);
+        lockScalingY || target.set('scaleY', newScaleY);
+      }
+      // Check if we flipped
+      if (newScaleX < 0)
+      {
+        if (t.originX === 'left')
+          t.originX = 'right';
+        else if (t.originX === 'right')
+          t.originX = 'left';
+      }
+      if (newScaleY < 0)
+      {
+        if (t.originY === 'top')
+          t.originY = 'bottom';
+        else if (t.originY === 'bottom')
+          t.originY = 'top';
+      }
+      // Make sure the constraints apply
+      target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
+    },
+    /**
+     * Rotates object by invoking its rotate method
+     * @method _rotateObject
+     * @param x {Number} pointer's x coordinate
+     * @param y {Number} pointer's y coordinate
+     */
+    _rotateObject: function (x, y) {
+      var t = this._currentTransform,
+          o = this._offset;
+      if (t.target.get('lockRotation')) return;
+      var lastAngle = atan2(t.ey - t.top - o.top, t.ex - t.left - o.left),
+          curAngle = atan2(y - t.top - o.top, x - t.left - o.left);
+      t.target.angle = radiansToDegrees(curAngle - lastAngle + t.theta);
+    },
+    /**
+     * @method _setCursor
+     */
+    _setCursor: function (value) {
+      this.upperCanvasEl.style.cursor = value;
+    },
+    /**
+    * @private
+    * @method _resetObjectTransform:
+    */
+    _resetObjectTransform: function (target) {
+      target.scaleX = 1;
+      target.scaleY = 1;
+      target.setAngle(0);
+    },
+    /**
+     * @method _drawSelection
+     * @private
+     */
+    _drawSelection: function () {
+      var ctx = this.contextTop,
+          groupSelector = this._groupSelector,
+          left = groupSelector.left,
+          top = groupSelector.top,
+          aleft = abs(left),
+          atop = abs(top);
+      ctx.fillStyle = this.selectionColor;
+      ctx.fillRect(
+        groupSelector.ex - ((left > 0) ? 0 : -left),
+        groupSelector.ey - ((top > 0) ? 0 : -top),
+        aleft,
+        atop
+      );
+      ctx.lineWidth = this.selectionLineWidth;
+      ctx.strokeStyle = this.selectionBorderColor;
+      // selection border
+      if (this.selectionDashArray.length > 1) {
+        var px = groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0: aleft);
+        var py = groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0: atop);
+        ctx.beginPath();
+        fabric.util.drawDashedLine(ctx, px, py, px+aleft, py, this.selectionDashArray);
+        fabric.util.drawDashedLine(ctx, px, py+atop-1, px+aleft, py+atop-1, this.selectionDashArray);
+        fabric.util.drawDashedLine(ctx, px, py, px, py+atop, this.selectionDashArray);
+        fabric.util.drawDashedLine(ctx, px+aleft-1, py, px+aleft-1, py+atop, this.selectionDashArray);
+        ctx.closePath();
+        ctx.stroke();
+      }
+      else {
+        ctx.strokeRect(
+          groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
+          groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),
+          aleft,
+          atop
+        );
+      }
+    },
+    /**
+     * @private
+     * @method _findSelectedObjects
+     */
+    _findSelectedObjects: function (e) {
+      var group = [ ],
+          x1 = this._groupSelector.ex,
+          y1 = this._groupSelector.ey,
+          x2 = x1 + this._groupSelector.left,
+          y2 = y1 + this._groupSelector.top,
+          currentObject,
+          selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
+          selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2));
+      for (var i = 0, len = this._objects.length; i < len; ++i) {
+        currentObject = this._objects[i];
+        if (!currentObject) continue;
+        if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
+            currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2)) {
+          if (this.selection && currentObject.selectable) {
+            currentObject.setActive(true);
+            group.push(currentObject);
+          }
+        }
+      }
+      // do not create group for 1 element only
+      if (group.length === 1) {
+        this.setActiveObject(group[0], e);
+      }
+      else if (group.length > 1) {
+        group = new fabric.Group(group);
+        this.setActiveGroup(group);
+        group.saveCoords();
+        this.fire('selection:created', { target: group });
+      }
+      this.renderAll();
+    },
+    /**
+     * Method that determines what object we are clicking on
+     * @method findTarget
+     * @param {Event} e mouse event
+     * @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through
+     */
+    findTarget: function (e, skipGroup) {
+      var target,
+          pointer = this.getPointer(e);
+      if (this.controlsAboveOverlay &&
+          this.lastRenderedObjectWithControlsAboveOverlay &&
+          this.containsPoint(e, this.lastRenderedObjectWithControlsAboveOverlay) &&
+          this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(e, this._offset)) {
+        target = this.lastRenderedObjectWithControlsAboveOverlay;
+        return target;
+      }
+      // first check current group (if one exists)
+      var activeGroup = this.getActiveGroup();
+      if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) {
+        target = activeGroup;
+        return target;
+      }
+      // then check all of the objects on canvas
+      // Cache all targets where their bounding box contains point.
+      var possibleTargets = [];
+      for (var i = this._objects.length; i--; ) {
+        if (this._objects[i] && this.containsPoint(e, this._objects[i])) {
+          if (this.perPixelTargetFind || this._objects[i].perPixelTargetFind) {
+            possibleTargets[possibleTargets.length] = this._objects[i];
+          }
+          else {
+            target = this._objects[i];
+            this.relatedTarget = target;
+            break;
+          }
+        }
+      }
+      for (var j = 0, len = possibleTargets.length; j < len; j++) {
+        pointer = this.getPointer(e);
+        var isTransparent = this._isTargetTransparent(possibleTargets[j], pointer.x, pointer.y);
+        if (!isTransparent) {
+          target = possibleTargets[j];
+          this.relatedTarget = target;
+          break;
+        }
+      }
+      if (target && target.selectable) {
+        return target;
+      }
+    },
+    /**
+     * Returns pointer coordinates relative to canvas.
+     * @method getPointer
+     * @param {Event} e
+     * @return {Object} object with "x" and "y" number values
+     */
+    getPointer: function (e) {
+      var pointer = getPointer(e, this.upperCanvasEl);
+      return {
+        x: pointer.x - this._offset.left,
+        y: pointer.y - this._offset.top
+      };
+    },
+    /**
+     * @private
+     * @method _createUpperCanvas
+     * @param {HTMLElement|String} canvasEl Canvas element
+     * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
+     */
+    _createUpperCanvas: function () {
+      this.upperCanvasEl = this._createCanvasElement();
+      this.upperCanvasEl.className = 'upper-canvas';
+      this.wrapperEl.appendChild(this.upperCanvasEl);
+      this._applyCanvasStyle(this.upperCanvasEl);
+      this.contextTop = this.upperCanvasEl.getContext('2d');
+    },
+    /**
+     * @private
+     * @method _createCacheCanvas
+     */
+    _createCacheCanvas: function () {
+      this.cacheCanvasEl = this._createCanvasElement();
+      this.cacheCanvasEl.setAttribute('width', this.width);
+      this.cacheCanvasEl.setAttribute('height', this.height);
+      this.contextCache = this.cacheCanvasEl.getContext('2d');
+    },
+    /**
+     * @private
+     * @method _initWrapperElement
+     * @param {Number} width
+     * @param {Number} height
+     */
+    _initWrapperElement: function () {
+      this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
+        'class': this.containerClass
+      });
+      fabric.util.setStyle(this.wrapperEl, {
+        width: this.getWidth() + 'px',
+        height: this.getHeight() + 'px',
+        position: 'relative'
+      });
+      fabric.util.makeElementUnselectable(this.wrapperEl);
+    },
+    /**
+     * @private
+     * @method _applyCanvasStyle
+     * @param {Element} element
+     */
+    _applyCanvasStyle: function (element) {
+      var width = this.getWidth() || element.width,
+          height = this.getHeight() || element.height;
+      fabric.util.setStyle(element, {
+        position: 'absolute',
+        width: width + 'px',
+        height: height + 'px',
+        left: 0,
+        top: 0
+      });
+      element.width = width;
+      element.height = height;
+      fabric.util.makeElementUnselectable(element);
+    },
+    /**
+     * Returns context of canvas where object selection is drawn
+     * @method getSelectionContext
+     * @return {CanvasRenderingContext2D}
+     */
+    getSelectionContext: function() {
+      return this.contextTop;
+    },
+    /**
+     * Returns &lt;canvas> element on which object selection is drawn
+     * @method getSelectionElement
+     * @return {HTMLCanvasElement}
+     */
+    getSelectionElement: function () {
+      return this.upperCanvasEl;
+    },
+    /**
+     * Sets given object as active
+     * @method setActiveObject
+     * @param object {fabric.Object} Object to set as an active one
+     * @return {fabric.Canvas} thisArg
+     * @chainable
+     */
+    setActiveObject: function (object, e) {
+      if (this._activeObject) {
+        this._activeObject.setActive(false);
+      }
+      this._activeObject = object;
+      object.setActive(true);
+      this.renderAll();
+      this.fire('object:selected', { target: object, e: e });
+      object.fire('selected', { e: e });
+      return this;
+    },
+    /**
+     * Returns currently active object
+     * @method getActiveObject
+     * @return {fabric.Object} active object
+     */
+    getActiveObject: function () {
+      return this._activeObject;
+    },
+    /**
+     * Discards currently active object
+     * @method discardActiveObject
+     * @return {fabric.Canvas} thisArg
+     * @chainable
+     */
+    discardActiveObject: function () {
+      if (this._activeObject) {
+        this._activeObject.setActive(false);
+      }
+      this._activeObject = null;
+      return this;
+    },
+    /**
+     * Sets active group to a speicified one
+     * @method setActiveGroup
+     * @param {fabric.Group} group Group to set as a current one
+     * @return {fabric.Canvas} thisArg
+     * @chainable
+     */
+    setActiveGroup: function (group) {
+      this._activeGroup = group;
+      if (group) {
+        group.canvas = this;
+        group.setActive(true);
+      }
+      return this;
+    },
+    /**
+     * Returns currently active group
+     * @method getActiveGroup
+     * @return {fabric.Group} Current group
+     */
+    getActiveGroup: function () {
+      return this._activeGroup;
+    },
+    /**
+     * Removes currently active group
+     * @method discardActiveGroup
+     * @return {fabric.Canvas} thisArg
+     */
+    discardActiveGroup: function () {
+      var g = this.getActiveGroup();
+      if (g) {
+        g.destroy();
+      }
+      return this.setActiveGroup(null);
+    },
+    /**
+     * Deactivates all objects by calling their setActive(false)
+     * @method deactivateAll
+     * @return {fabric.Canvas} thisArg
+     */
+    deactivateAll: function () {
+      var allObjects = this.getObjects(),
+          i = 0,
+          len = allObjects.length;
+      for ( ; i < len; i++) {
+        allObjects[i].setActive(false);
+      }
+      this.discardActiveGroup();
+      this.discardActiveObject();
+      return this;
+    },
+    /**
+     * Deactivates all objects and dispatches appropriate events
+     * @method deactivateAllWithDispatch
+     * @return {fabric.Canvas} thisArg
+     */
+    deactivateAllWithDispatch: function () {
+      var activeObject = this.getActiveGroup() || this.getActiveObject();
+      if (activeObject) {
+        this.fire('before:selection:cleared', { target: activeObject });
+      }
+      this.deactivateAll();
+      if (activeObject) {
+        this.fire('selection:cleared');
+      }
+      return this;
+    }
+  };
+  fabric.Canvas.prototype.toString = fabric.StaticCanvas.prototype.toString;
+  extend(fabric.Canvas.prototype, InteractiveMethods);
+  // iterating manually to workaround Opera's bug
+  // where "prototype" property is enumerable and overrides existing prototype
+  for (var prop in fabric.StaticCanvas) {
+    if (prop !== 'prototype') {
+      fabric.Canvas[prop] = fabric.StaticCanvas[prop];
+    }
+  }
+  if (fabric.isTouchSupported) {
+    fabric.Canvas.prototype._setCursorFromEvent = function() { };
+  }
+  /**
+   * @class fabric.Element
+   * @alias fabric.Canvas
+   * @deprecated Use {@link fabric.Canvas} instead.
+   * @constructor
+   */
+  fabric.Element = fabric.Canvas;
+})();