fabric 5.3.0 → 5.4.0-browser

package/package.json

@@ -1,92 +1,89 @@
 {
-  "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.3.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": {
-    "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 --require ./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.8.0",
-    "jsdom": "^19.0.0"
-  },
-  "devDependencies": {
-    "auto-changelog": "^2.3.0",
-    "chalk": "^2.4.1",
-    "deep-object-diff": "^1.1.7",
-    "eslint": "4.18.x",
-    "nyc": "^15.1.0",
-    "onchange": "^7.1.0",
-    "pixelmatch": "^4.0.2",
-    "qunit": "^2.17.2",
-    "testem": "^3.2.0",
-    "uglify-js": "3.3.x"
-  },
-  "engines": {
-    "node": ">=14.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.4.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 --require ./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",
+		"deep-object-diff": "^1.1.7",
+		"eslint": "4.18.x",
+		"nyc": "^15.1.0",
+		"onchange": "^7.1.0",
+		"pixelmatch": "^4.0.2",
+		"qunit": "^2.17.2",
+		"testem": "^3.2.0",
+		"uglify-js": "3.3.x"
+	},
+	"engines": {
+		"node": ">=14.0.0"
+	},
+	"main": "./dist/fabric.js",
+	"dependencies": {}
+}

package/src/mixins/canvas_events.mixin.js

@@ -148,8 +148,8 @@
 
       var _this = this;
       this._hoveredTargets.forEach(function(_target){
-        _this.fire('mouse:out', { target: target, e: e });
-        _target && target.fire('mouseout', { e: e });
+        _this.fire('mouse:out', { target: _target, e: e });
+        _target && _target.fire('mouseout', { e: e });
       });
       this._hoveredTargets = [];
     },

package/src/mixins/itext_behavior.mixin.js

@@ -740,8 +740,9 @@
     insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) {
       var currentCharStyle,
           newLineStyles = {},
-          somethingAdded = false,
-          isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex;
+          someStyleIsCarryingOver = false,
+          originalLineLength = this._unwrappedTextLines[lineIndex].length,
+          isEndOfLine = originalLineLength === charIndex;
 
       qty || (qty = 1);
       this.shiftLineStyles(lineIndex, qty);
@@ -753,7 +754,7 @@
       for (var index in this.styles[lineIndex]) {
         var numIndex = parseInt(index, 10);
         if (numIndex >= charIndex) {
-          somethingAdded = true;
+          someStyleIsCarryingOver = true;
           newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index];
           // remove lines from the previous line since they're on a new line now
           if (!(isEndOfLine && charIndex === 0)) {
@@ -762,14 +763,16 @@
         }
       }
       var styleCarriedOver = false;
-      if (somethingAdded && !isEndOfLine) {
+      if (someStyleIsCarryingOver && !isEndOfLine) {
         // if is end of line, the extra style we copied
         // is probably not something we want
         this.styles[lineIndex + qty] = newLineStyles;
         styleCarriedOver = true;
       }
-      if (styleCarriedOver) {
-        // skip the last line of since we already prepared it.
+      if (styleCarriedOver || originalLineLength > charIndex) {
+        // skip the last line of since we already prepared it
+        // or contains text without style that we don't want to style
+        // just because it changed lines
         qty--;
       }
       // for the all the lines or all the other lines

package/src/mixins/object_interactivity.mixin.js

@@ -211,7 +211,10 @@
     drawControls: function(ctx, styleOverride) {
       styleOverride = styleOverride || {};
       ctx.save();
-      var retinaScaling = this.canvas.getRetinaScaling(), matrix, p;
+      var retinaScaling = 1, matrix, p;
+      if (this.canvas) {
+        retinaScaling = this.canvas.getRetinaScaling();
+      }
       ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0);
       ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor;
       if (!this.transparentCorners) {

package/src/mixins/text_style.mixin.js

@@ -177,7 +177,7 @@
             charIndex: selectionStart
           };
         }
-        selectionStart -= lines[i].length + this.missingNewlineOffset(i);
+        selectionStart -= lines[i].length + this.missingNewlineOffset(i, skipWrapping);
       }
       return {
         lineIndex: i - 1,

package/src/shapes/active_selection.class.js

@@ -125,7 +125,6 @@
     _renderControls: function(ctx, styleOverride, childrenOverride) {
       ctx.save();
       ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
-      this.callSuper('_renderControls', ctx, styleOverride);
       childrenOverride = childrenOverride || { };
       if (typeof childrenOverride.hasControls === 'undefined') {
         childrenOverride.hasControls = false;
@@ -134,6 +133,7 @@
       for (var i = 0, len = this._objects.length; i < len; i++) {
         this._objects[i]._renderControls(ctx, childrenOverride);
       }
+      this.callSuper('_renderControls', ctx, styleOverride);
       ctx.restore();
     },
   });

package/src/shapes/itext.class.js

@@ -513,6 +513,7 @@
     var styles = fabric.util.stylesFromArray(object.styles, object.text);
     //copy object to prevent mutation
     var objCopy = Object.assign({}, object, { styles: styles });
+    delete objCopy.path;
     parseDecoration(objCopy);
     if (objCopy.styles) {
       for (var i in objCopy.styles) {
@@ -521,6 +522,16 @@
         }
       }
     }
-    fabric.Object._fromObject('IText', objCopy, callback, 'text');
+    fabric.Object._fromObject('IText', objCopy, function(textInstance) {
+      if (object.path) {
+        fabric.Object._fromObject('Path', object.path, function(pathInstance) {
+          textInstance.set('path', pathInstance);
+          callback(textInstance);
+        }, 'path');
+      }
+      else {
+        callback(textInstance);
+      }
+    }, 'text');
   };
 })();

package/src/shapes/object.class.js

@@ -1577,8 +1577,8 @@
       var dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
           pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(),
           width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling;
-      pCanvas.width = width;
-      pCanvas.height = height;
+      pCanvas.width = Math.ceil(width);
+      pCanvas.height = Math.ceil(height);
       pCtx = pCanvas.getContext('2d');
       pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height);
       pCtx.lineTo(0, height); pCtx.closePath();

package/src/shapes/text.class.js

@@ -1353,6 +1353,11 @@
       if (!this[type] && !this.styleHas(type)) {
         return;
       }
+      ctx.save();
+      // if type is overline or linethrough we shouldn't cast shadow
+      if (type === 'overline' || type === 'linethrough') {
+        this._removeShadow(ctx);
+      }
       var heightOfLine, size, _size,
           lineLeftOffset, dy, _dy,
           line, lastDecoration,
@@ -1439,9 +1444,7 @@
         );
         topOffset += heightOfLine;
       }
-      // if there is text background color no
-      // other shadows should be casted
-      this._removeShadow(ctx);
+      ctx.restore();
     },
 
     /**

package/src/shapes/textbox.class.js

@@ -388,10 +388,12 @@
     /**
      * Detect if a line has a linebreak and so we need to account for it when moving
      * and counting style.
+     * This is important only for splitByGrapheme at the end of wrapping.
+     * If we are not wrapping the offset is always 1
      * @return Number
      */
-    missingNewlineOffset: function(lineIndex) {
-      if (this.splitByGrapheme) {
+    missingNewlineOffset: function(lineIndex, skipWrapping) {
+      if (this.splitByGrapheme && !skipWrapping) {
         return this.isEndOfWrapping(lineIndex) ? 1 : 0;
       }
       return 1;
@@ -456,6 +458,17 @@
     var styles = fabric.util.stylesFromArray(object.styles, object.text);
     //copy object to prevent mutation
     var objCopy = Object.assign({}, object, { styles: styles });
-    return fabric.Object._fromObject('Textbox', objCopy, callback, 'text');
+    delete objCopy.path;
+    return fabric.Object._fromObject('Textbox', objCopy,  function(textInstance) {
+      if (object.path) {
+        fabric.Object._fromObject('Path', object.path, function(pathInstance) {
+          textInstance.set('path', pathInstance);
+          callback(textInstance);
+        }, 'path');
+      }
+      else {
+        callback(textInstance);
+      }
+    }, 'text');
   };
 })(typeof exports !== 'undefined' ? exports : this);

package/src/static_canvas.class.js

@@ -999,10 +999,15 @@
       }
       if (object) {
         ctx.save();
+        var skipOffscreen = this.skipOffscreen;
+        // if the object doesn't move with the viewport,
+        // the offscreen concept does not apply;
+        this.skipOffscreen = needsVpt;
         if (needsVpt) {
           ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
         }
         object.render(ctx);
+        this.skipOffscreen = skipOffscreen;
         ctx.restore();
       }
     },