fabric 4.6.0 → 5.0.0-browser

package/lib/event.js

@@ -1368,7 +1368,11 @@ root.gesture = function(conf) {
 			var dx = touch.move.x - self.x;
 			var dy = touch.move.y - self.y;
 			var distance = Math.sqrt(dx * dx + dy * dy);
-			scale += distance / start.distance;
+			// If touch start.distance from centroid is 0, scale should not be updated. 
+			// This prevents dividing by 0 in cases where start.distance is oddly 0.
+			if (start.distance !== 0) {
+			  scale += distance / start.distance;
+			}
 			// Calculate rotation.
 			var angle = Math.atan2(dx, dy) / RAD_DEG;
 			var rotate = (start.angle - angle + 360) % 360 - 180;
@@ -1765,8 +1769,8 @@ root.tap = function(conf) {
 			var identifier = touch.identifier || Infinity;
 			var pt = conf.tracker[identifier];
 			if (!pt) continue;
-			var x = (touch.pageX - bbox.x1);
-			var y = (touch.pageY - bbox.y1);
+			var x = (touch.pageX - bbox.x1 - parseInt(window.scrollX));
+			var y = (touch.pageY - bbox.y1 - parseInt(window.scrollY));
 			///
 			var dx = x - pt.start.x;
 			var dy = y - pt.start.y;

package/package.json

@@ -1,89 +1,88 @@
 {
-  "name": "fabric",
-  "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
-  "homepage": "http://fabricjs.com/",
-  "version": "4.6.0",
-  "author": "Juriy Zaytsev <kangax@gmail.com>",
-  "contributors": [
-    {
-      "name": "Andrea Bogazzi",
-      "email": "andreabogazzi79@gmail.com"
-    },
-    {
-      "name": "Steve Eberhardt",
-      "email": "melchiar2@gmail.com"
-    }
-  ],
-  "keywords": [
-    "canvas",
-    "graphic",
-    "graphics",
-    "SVG",
-    "node-canvas",
-    "parser",
-    "HTML5",
-    "object model"
-  ],
-  "browser": {
-    "canvas": false,
-    "fs": false,
-    "jsdom": false,
-    "jsdom/lib/jsdom/living/generated/utils": false,
-    "jsdom/lib/jsdom/utils": false,
-    "http": false,
-    "https": false,
-    "xmldom": false,
-    "url": false
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fabricjs/fabric.js"
-  },
-  "bugs": {
-    "url": "https://github.com/fabricjs/fabric.js/issues"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
-    "build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
-    "build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
-    "link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
-    "build_with_gestures": "node build.js modules=ALL exclude=accessors",
-    "build_export": "npm run build:fast && npm run export_dist_to_site",
-    "test:single": "qunit test/node_test_setup.js test/lib",
-    "test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
-    "test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
-    "coverage:report": "nyc report --reporter=lcov --reporter=text",
-    "test": "qunit test/node_test_setup.js test/lib test/unit",
-    "test:visual": "qunit test/node_test_setup.js test/lib test/visual",
-    "test:visual:single": "qunit test/node_test_setup.js test/lib",
-    "test:all": "npm run test && npm run test:visual",
-    "lint": "eslint --config .eslintrc.json src",
-    "lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
-    "export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
-    "export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
-    "export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
-    "all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
-    "testem": "testem .",
-    "testem:ci": "testem ci"
-  },
-  "optionalDependencies": {
-    "canvas": "^2.6.1",
-    "jsdom": "^15.2.1"
-  },
-  "devDependencies": {
-    "chalk": "^2.4.1",
-    "eslint": "4.18.x",
-    "nyc": "^15.1.0",
-    "onchange": "^3.x.x",
-    "pixelmatch": "^4.0.2",
-    "qunit": "^2.13.0",
-    "testem": "^3.2.0",
-    "uglify-js": "3.3.x"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
-  "main": "./dist/fabric.js",
-  "dependencies": {}
-}
+	"name": "fabric",
+	"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
+	"homepage": "http://fabricjs.com/",
+	"version": "5.0.0-browser",
+	"author": "Juriy Zaytsev <kangax@gmail.com>",
+	"contributors": [
+		{
+			"name": "Andrea Bogazzi",
+			"email": "andreabogazzi79@gmail.com"
+		},
+		{
+			"name": "Steve Eberhardt",
+			"email": "melchiar2@gmail.com"
+		}
+	],
+	"keywords": [
+		"canvas",
+		"graphic",
+		"graphics",
+		"SVG",
+		"node-canvas",
+		"parser",
+		"HTML5",
+		"object model"
+	],
+	"browser": {
+		"canvas": false,
+		"fs": false,
+		"jsdom": false,
+		"jsdom/lib/jsdom/living/generated/utils": false,
+		"jsdom/lib/jsdom/utils": false,
+		"http": false,
+		"https": false,
+		"xmldom": false,
+		"url": false
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fabricjs/fabric.js"
+	},
+	"bugs": {
+		"url": "https://github.com/fabricjs/fabric.js/issues"
+	},
+	"license": "MIT",
+	"scripts": {
+		"changelog": "auto-changelog -o change-output.md --unreleased-only",
+		"build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
+		"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
+		"build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
+		"link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
+		"build_with_gestures": "node build.js modules=ALL exclude=accessors",
+		"build_export": "npm run build:fast && npm run export_dist_to_site",
+		"test:single": "qunit test/node_test_setup.js test/lib",
+		"test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
+		"test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
+		"coverage:report": "nyc report --reporter=lcov --reporter=text",
+		"test": "qunit test/node_test_setup.js test/lib test/unit",
+		"test:visual": "qunit test/node_test_setup.js test/lib test/visual",
+		"test:visual:single": "qunit test/node_test_setup.js test/lib",
+		"test:all": "npm run test && npm run test:visual",
+		"lint": "eslint --config .eslintrc.json src",
+		"lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
+		"export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
+		"export_dist_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric.js && cp package.json ../fabricjs.com/lib/package.json && cp -r src HEADER.js lib ../fabricjs.com/build/files/",
+		"export_tests_to_site": "cp test/unit/*.js ../fabricjs.com/test/unit && cp -r test/visual/* ../fabricjs.com/test/visual && cp -r test/fixtures/* ../fabricjs.com/test/fixtures && cp -r test/lib/* ../fabricjs.com/test/lib",
+		"all": "npm run build && npm run test && npm run test:visual && npm run lint && npm run lint_tests && npm run export_dist_to_site && npm run export_tests_to_site",
+		"testem": "testem .",
+		"testem:ci": "testem ci"
+	},
+	"optionalDependencies": {},
+	"devDependencies": {
+		"auto-changelog": "^2.3.0",
+		"chalk": "^2.4.1",
+		"eslint": "4.18.x",
+		"nyc": "^15.1.0",
+		"onchange": "^7.1.0",
+		"pixelmatch": "^4.0.2",
+		"qunit": "^2.13.0",
+		"testem": "^3.2.0",
+		"uglify-js": "3.3.x"
+	},
+	"engines": {
+		"node": ">=14.0.0"
+	},
+	"main": "./dist/fabric.js",
+	"dependencies": {}
+}

package/src/brushes/base_brush.class.js

@@ -68,9 +68,9 @@ fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype
   /**
    * Sets brush styles
    * @private
+   * @param {CanvasRenderingContext2D} ctx
    */
-  _setBrushStyles: function() {
-    var ctx = this.canvas.contextTop;
+  _setBrushStyles: function (ctx) {
     ctx.strokeStyle = this.color;
     ctx.lineWidth = this.width;
     ctx.lineCap = this.strokeLineCap;

package/src/brushes/pattern_brush.class.js

@@ -29,17 +29,19 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
 
   /**
    * Creates "pattern" instance property
+   * @param {CanvasRenderingContext2D} ctx
    */
-  getPattern: function() {
-    return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat');
+  getPattern: function(ctx) {
+    return ctx.createPattern(this.source || this.getPatternSrc(), 'repeat');
   },
 
   /**
    * Sets brush styles
+   * @param {CanvasRenderingContext2D} ctx
    */
-  _setBrushStyles: function() {
-    this.callSuper('_setBrushStyles');
-    this.canvas.contextTop.strokeStyle = this.getPattern();
+  _setBrushStyles: function(ctx) {
+    this.callSuper('_setBrushStyles', ctx);
+    ctx.strokeStyle = this.getPattern(ctx);
   },
 
   /**

package/src/brushes/pencil_brush.class.js

@@ -13,6 +13,22 @@
      */
     decimate: 0.4,
 
+    /**
+     * Draws a straight line between last recorded point to current pointer
+     * Used for `shift` functionality
+     *
+     * @type boolean
+     * @default false
+     */
+    drawStraightLine: false,
+
+    /**
+     * The event modifier key that makes the brush draw a straight line.
+     * If `null` or 'none' or any other string that is not a modifier key the feature is disabled.
+     * @type {'altKey' | 'shiftKey' | 'ctrlKey' | 'none' | undefined | null}
+     */
+    straightLineKey: 'shiftKey',
+
     /**
      * Constructor
      * @param {fabric.Canvas} canvas
@@ -23,6 +39,10 @@
       this._points = [];
     },
 
+    needsFullRender: function () {
+      return this.callSuper('needsFullRender') || this._hasStraightLine;
+    },
+
     /**
      * Invoked inside on mouse down and mouse move
      * @param {Object} pointer
@@ -41,6 +61,7 @@
       if (!this.canvas._isMainEvent(options.e)) {
         return;
       }
+      this.drawStraightLine = options.e[this.straightLineKey];
       this._prepareForDrawing(pointer);
       // capture coordinates immediately
       // this allows to draw dots (when movement never occurs)
@@ -56,6 +77,7 @@
       if (!this.canvas._isMainEvent(options.e)) {
         return;
       }
+      this.drawStraightLine = options.e[this.straightLineKey];
       if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) {
         return;
       }
@@ -88,6 +110,7 @@
       if (!this.canvas._isMainEvent(options.e)) {
         return true;
       }
+      this.drawStraightLine = false;
       this.oldEnd = undefined;
       this._finalizeAndAddPath();
       return false;
@@ -114,6 +137,10 @@
       if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) {
         return false;
       }
+      if (this.drawStraightLine && this._points.length > 1) {
+        this._hasStraightLine = true;
+        this._points.pop();
+      }
       this._points.push(point);
       return true;
     },
@@ -124,8 +151,9 @@
      */
     _reset: function() {
       this._points = [];
-      this._setBrushStyles();
+      this._setBrushStyles(this.canvas.contextTop);
       this._setShadow();
+      this._hasStraightLine = false;
     },
 
     /**
@@ -140,12 +168,13 @@
     /**
      * Draw a smooth path on the topCanvas using quadraticCurveTo
      * @private
+     * @param {CanvasRenderingContext2D} [ctx]
      */
-    _render: function() {
-      var ctx  = this.canvas.contextTop, i, len,
+    _render: function(ctx) {
+      var i, len,
           p1 = this._points[0],
           p2 = this._points[1];
-
+      ctx = ctx || this.canvas.contextTop;
       this._saveAndTransform(ctx);
       ctx.beginPath();
       //if we only have 2 points in the path and they are the same

package/src/canvas.class.js

@@ -37,15 +37,11 @@
    * @fires dragover
    * @fires dragenter
    * @fires dragleave
+   * @fires drop:before before drop event. same native event. This is added to handle edge cases
    * @fires drop
    * @fires after:render at the end of the render process, receives the context in the callback
    * @fires before:render at start the render process, receives the context in the callback
    *
-   * the following events are deprecated:
-   * @fires object:rotated at the end of a rotation transform
-   * @fires object:scaled at the end of a scale transform
-   * @fires object:moved at the end of translation transform
-   * @fires object:skewed at the end of a skew transform
    */
   fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {
 
@@ -230,13 +226,6 @@
      */
     freeDrawingCursor:      'crosshair',
 
-    /**
-     * Cursor value used for rotation point
-     * @type String
-     * @default
-     */
-    rotationCursor:         'crosshair',
-
     /**
      * Cursor value used for disabled elements ( corners with disabled action )
      * @type String
@@ -342,6 +331,13 @@
      */
     targets: [],
 
+    /**
+     * When the option is enabled, PointerEvent is used instead of MouseEvent.
+     * @type Boolean
+     * @default
+     */
+    enablePointerEvents: false,
+
     /**
      * Keep track of the hovered target
      * @type fabric.Object
@@ -417,6 +413,7 @@
       }
       if (this.hasLostContext) {
         this.renderTopLayer(this.contextTop);
+        this.hasLostContext = false;
       }
       var canvasToDrawOn = this.contextContainer;
       this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
@@ -1086,17 +1083,12 @@
           e: e,
           selected: added,
           deselected: removed,
-          // added for backward compatibility
-          // deprecated
-          updated: added[0] || removed[0],
-          target: this._activeObject,
         });
       }
       else if (objects.length > 0) {
         this.fire('selection:created', {
           e: e,
           selected: added,
-          target: this._activeObject,
         });
       }
       else if (oldObjects.length > 0) {

package/src/mixins/animation.mixin.js

@@ -13,8 +13,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
    * @param {Function} [callbacks.onComplete] Invoked on completion
    * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.Canvas} thisArg
-   * @chainable
+   * @return {fabric.AnimationContext} context
    */
   fxCenterObjectH: function (object, callbacks) {
     callbacks = callbacks || { };
@@ -24,7 +23,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onChange = callbacks.onChange || empty,
         _this = this;
 
-    fabric.util.animate({
+    return fabric.util.animate({
+      target: this,
       startValue: object.left,
       endValue: this.getCenter().left,
       duration: this.FX_DURATION,
@@ -38,8 +38,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onComplete();
       }
     });
-
-    return this;
   },
 
   /**
@@ -48,8 +46,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
    * @param {Function} [callbacks.onComplete] Invoked on completion
    * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.Canvas} thisArg
-   * @chainable
+   * @return {fabric.AnimationContext} context
    */
   fxCenterObjectV: function (object, callbacks) {
     callbacks = callbacks || { };
@@ -59,7 +56,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onChange = callbacks.onChange || empty,
         _this = this;
 
-    fabric.util.animate({
+    return fabric.util.animate({
+      target: this,
       startValue: object.top,
       endValue: this.getCenter().top,
       duration: this.FX_DURATION,
@@ -73,8 +71,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onComplete();
       }
     });
-
-    return this;
   },
 
   /**
@@ -83,8 +79,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
    * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
    * @param {Function} [callbacks.onComplete] Invoked on completion
    * @param {Function} [callbacks.onChange] Invoked on every step of animation
-   * @return {fabric.Canvas} thisArg
-   * @chainable
+   * @return {fabric.AnimationContext} context
    */
   fxRemove: function (object, callbacks) {
     callbacks = callbacks || { };
@@ -94,7 +89,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onChange = callbacks.onChange || empty,
         _this = this;
 
-    fabric.util.animate({
+    return fabric.util.animate({
+      target: this,
       startValue: object.opacity,
       endValue: 0,
       duration: this.FX_DURATION,
@@ -108,8 +104,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
         onComplete();
       }
     });
-
-    return this;
   }
 });
 
@@ -120,7 +114,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * @param {Number|Object} value Value to animate property to (if string was given first) or options object
    * @return {fabric.Object} thisArg
    * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation}
-   * @chainable
+   * @return {fabric.AnimationContext | fabric.AnimationContext[]} animation context (or an array if passed multiple properties)
    *
    * As object — multiple properties
    *
@@ -133,22 +127,22 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
    * object.animate('left', { duration: ... });
    *
    */
-  animate: function() {
+  animate: function () {
     if (arguments[0] && typeof arguments[0] === 'object') {
-      var propsToAnimate = [], prop, skipCallbacks;
+      var propsToAnimate = [], prop, skipCallbacks, out = [];
       for (prop in arguments[0]) {
         propsToAnimate.push(prop);
       }
       for (var i = 0, len = propsToAnimate.length; i < len; i++) {
         prop = propsToAnimate[i];
         skipCallbacks = i !== len - 1;
-        this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
+        out.push(this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks));
       }
+      return out;
     }
     else {
-      this._animate.apply(this, arguments);
+      return this._animate.apply(this, arguments);
     }
-    return this;
   },
 
   /**
@@ -196,6 +190,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
     }
 
     var _options = {
+      target: this,
       startValue: options.from,
       endValue: to,
       byValue: options.by,