fabric - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0-browser

HEADER.js

 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '5.0.0' };
+var fabric = fabric || { version: '5.1.0' };
 if (typeof exports !== 'undefined') {
@@ -5,0 +5,0 @@ exports.fabric = fabric;

package.json

 {
-  "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",
-  "author": "Juriy Zaytsev <[e-mail]>",
-  "contributors": [
-    {
-      "name": "Andrea Bogazzi",
-      "email": "[e-mail]"
-    },
-    {
-      "name": "Steve Eberhardt",
-      "email": "[e-mail]"
-    }
-  ],
-  "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": {
-    "canvas": "^2.8.0",
-    "jsdom": "^19.0.0"
-  },
-  "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": {}
-}
+	"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.1.0-browser",
+	"author": "Juriy Zaytsev <[e-mail]>",
+	"contributors": [
+		{
+			"name": "Andrea Bogazzi",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Steve Eberhardt",
+			"email": "[e-mail]"
+		}
+	],
+	"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": {}
+}

src/filters/blendcolor_filter.class.js

@@ -35,2 +35,4 @@ (function(global) {
      * gives always strong result.
+     * @type String
+     * @default
      **/
@@ -42,2 +44,4 @@ color: '#F95C63',
      * darken, lighten, overlay, exclusion, tint.
+     * @type String
+     * @default
      **/
@@ -48,2 +52,4 @@ mode: 'multiply',
      * alpha value. represent the strength of the blend color operation.
+     * @type Number
+     * @default
      **/
@@ -50,0 +56,0 @@ alpha: 1,

src/filters/blendimage_filter.class.js

@@ -39,4 +39,5 @@ (function(global) {
     /**
-     * Blend mode for the filter: one of multiply, add, diff, screen, subtract,
-     * darken, lighten, overlay, exclusion, tint.
+     * Blend mode for the filter (one of "multiply", "mask")
+     * @type String
+     * @default
      **/
@@ -43,0 +44,0 @@ mode: 'multiply',

src/filters/blur_filter.class.js

@@ -76,2 +76,4 @@ (function(global) {
      * range between 0 and 1.
+     * @type Number
+     * @default
      */
@@ -78,0 +80,0 @@ blur: 0,

src/filters/colormatrix_filter.class.js

@@ -69,4 +69,6 @@ (function(global) {
     /**
-     * Lock the colormatrix on the color part, skipping alpha, manly for non webgl scenario
+     * Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario
      * to save some calculation
+     * @type Boolean
+     * @default true
      */
@@ -73,0 +75,0 @@ colorsOnly: true,

src/static_canvas.class.js

@@ -1765,6 +1765,2 @@ (function () {
         object.dispose && object.dispose();
-        // animation module is still optional
-        if (fabric.runningAnimations) {
-          fabric.runningAnimations.cancelByTarget(object);
-        }
       });
@@ -1771,0 +1767,0 @@ this._objects = [];

src/util/animate.js

@@ -8,10 +8,25 @@ (function () {
    * @typedef {Object} AnimationOptions
-   * @property {Function} [options.onChange] Callback; invoked on every value change
-   * @property {Function} [options.onComplete] Callback; invoked when value change is completed
-   * @property {Number} [options.startValue=0] Starting value
-   * @property {Number} [options.endValue=100] Ending value
-   * @property {Number} [options.byValue=100] Value to modify the property by
-   * @property {Function} [options.easing] Easing function
-   * @property {Number} [options.duration=500] Duration of change (in ms)
-   * @property {Function} [options.abort] Additional function with logic. If returns true, animation aborts.
+   * Animation of a value or list of values.
+   * When using lists, think of something like this:
+   * fabric.util.animate({
+   *   startValue: [1, 2, 3],
+   *   endValue: [2, 4, 6],
+   *   onChange: function([a, b, c]) {
+   *     canvas.zoomToPoint({x: b, y: c}, a)
+   *     canvas.renderAll()
+   *   }
+   * });
+   * @example
+   * @property {Function} [onChange] Callback; invoked on every value change
+   * @property {Function} [onComplete] Callback; invoked when value change is completed
+   * @example
+   * // Note: startValue, endValue, and byValue must match the type
+   * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }
+   * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }
+   * @property {number | number[]} [startValue=0] Starting value
+   * @property {number | number[]} [endValue=100] Ending value
+   * @property {number | number[]} [byValue=100] Value to modify the property by
+   * @property {Function} [easing] Easing function
+   * @property {Number} [duration=500] Duration of change (in ms)
+   * @property {Function} [abort] Additional function with logic. If returns true, animation aborts.
    *
@@ -21,3 +36,3 @@ * @typedef {() => void} CancelFunction
    * @typedef {Object} AnimationCurrentState
-   * @property {number} currentValue value in range [`startValue`, `endValue`]
+   * @property {number | number[]} currentValue value in range [`startValue`, `endValue`]
    * @property {number} completionRate value in range [0, 1]
@@ -127,2 +142,6 @@ * @property {number} durationRate value in range [0, 1]
    * @param {AnimationOptions} [options] Animation options
+   * @example
+   * // Note: startValue, endValue, and byValue must match the type
+   * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })
+   * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })
    * @returns {CancelFunction} cancel function
@@ -158,5 +177,8 @@ */
           easing = options.easing || defaultEasing,
+          isMany = 'startValue' in options ? options.startValue.length > 0 : false,
           startValue = 'startValue' in options ? options.startValue : 0,
           endValue = 'endValue' in options ? options.endValue : 100,
-          byValue = options.byValue || endValue - startValue;
+          byValue = options.byValue || (isMany ? startValue.map(function(value, i) {
+            return endValue[i] - startValue[i];
+          }) : endValue - startValue);
 
@@ -169,6 +191,9 @@ options.onStart && options.onStart();
             timePerc = currentTime / duration,
-            current = easing(currentTime, startValue, byValue, duration),
-            valuePerc = Math.abs((current - startValue) / byValue);
+            current = isMany ? startValue.map(function(_value, i) {
+              return easing(currentTime, startValue[i], byValue[i], duration);
+            }) : easing(currentTime, startValue, byValue, duration),
+            valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0])
+              : Math.abs((current - startValue) / byValue);
         //  update context
-        context.currentValue = current;
+        context.currentValue = isMany ? current.slice() : current;
         context.completionRate = valuePerc;
@@ -185,7 +210,7 @@ context.durationRate = timePerc;
           //  update context
-          context.currentValue = endValue;
+          context.currentValue = isMany ? endValue.slice() : endValue;
           context.completionRate = 1;
           context.durationRate = 1;
           //  execute callbacks
-          onChange(endValue, 1, 1);
+          onChange(isMany ? endValue.slice() : endValue, 1, 1);
           onComplete(endValue, 1, 1);
@@ -192,0 +217,0 @@ removeFromRegistry();

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2591484

increased by0.15%

Dependency count

0

decreased by-100%

Lines of code

60021

increased by0.11%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes