fabric 5.0.0 → 5.1.0-browser
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/HEADER.js +1 -1
- package/dist/fabric.js +56 -23
- package/dist/fabric.min.js +1 -1
- package/package.json +87 -90
- package/src/filters/blendcolor_filter.class.js +6 -0
- package/src/filters/blendimage_filter.class.js +3 -2
- package/src/filters/blur_filter.class.js +2 -0
- package/src/filters/colormatrix_filter.class.js +3 -1
- package/src/shapes/object.class.js +1 -0
- package/src/static_canvas.class.js +0 -4
- package/src/util/animate.js +40 -15
package/package.json
CHANGED
|
@@ -1,91 +1,88 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
"main": "./dist/fabric.js",
|
|
90
|
-
"dependencies": {}
|
|
91
|
-
}
|
|
2
|
+
"name": "fabric",
|
|
3
|
+
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
|
|
4
|
+
"homepage": "http://fabricjs.com/",
|
|
5
|
+
"version": "5.1.0-browser",
|
|
6
|
+
"author": "Juriy Zaytsev <kangax@gmail.com>",
|
|
7
|
+
"contributors": [
|
|
8
|
+
{
|
|
9
|
+
"name": "Andrea Bogazzi",
|
|
10
|
+
"email": "andreabogazzi79@gmail.com"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"name": "Steve Eberhardt",
|
|
14
|
+
"email": "melchiar2@gmail.com"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"keywords": [
|
|
18
|
+
"canvas",
|
|
19
|
+
"graphic",
|
|
20
|
+
"graphics",
|
|
21
|
+
"SVG",
|
|
22
|
+
"node-canvas",
|
|
23
|
+
"parser",
|
|
24
|
+
"HTML5",
|
|
25
|
+
"object model"
|
|
26
|
+
],
|
|
27
|
+
"browser": {
|
|
28
|
+
"canvas": false,
|
|
29
|
+
"fs": false,
|
|
30
|
+
"jsdom": false,
|
|
31
|
+
"jsdom/lib/jsdom/living/generated/utils": false,
|
|
32
|
+
"jsdom/lib/jsdom/utils": false,
|
|
33
|
+
"http": false,
|
|
34
|
+
"https": false,
|
|
35
|
+
"xmldom": false,
|
|
36
|
+
"url": false
|
|
37
|
+
},
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "https://github.com/fabricjs/fabric.js"
|
|
41
|
+
},
|
|
42
|
+
"bugs": {
|
|
43
|
+
"url": "https://github.com/fabricjs/fabric.js/issues"
|
|
44
|
+
},
|
|
45
|
+
"license": "MIT",
|
|
46
|
+
"scripts": {
|
|
47
|
+
"changelog": "auto-changelog -o change-output.md --unreleased-only",
|
|
48
|
+
"build": "node build.js modules=ALL requirejs exclude=gestures,accessors,erasing",
|
|
49
|
+
"build:fast": "node build.js modules=ALL requirejs fast exclude=gestures,accessors,erasing",
|
|
50
|
+
"build:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm run build_export",
|
|
51
|
+
"link:watch": "onchange 'src/**/**' 'HEADER.js' 'lib/**/**' -- npm link",
|
|
52
|
+
"build_with_gestures": "node build.js modules=ALL exclude=accessors",
|
|
53
|
+
"build_export": "npm run build:fast && npm run export_dist_to_site",
|
|
54
|
+
"test:single": "qunit test/node_test_setup.js test/lib",
|
|
55
|
+
"test:coverage": "nyc --silent qunit test/node_test_setup.js test/lib test/unit",
|
|
56
|
+
"test:visual:coverage": "nyc --silent --no-clean qunit test/node_test_setup.js test/lib test/visual",
|
|
57
|
+
"coverage:report": "nyc report --reporter=lcov --reporter=text",
|
|
58
|
+
"test": "qunit test/node_test_setup.js test/lib test/unit",
|
|
59
|
+
"test:visual": "qunit test/node_test_setup.js test/lib test/visual",
|
|
60
|
+
"test:visual:single": "qunit test/node_test_setup.js test/lib",
|
|
61
|
+
"test:all": "npm run test && npm run test:visual",
|
|
62
|
+
"lint": "eslint --config .eslintrc.json src",
|
|
63
|
+
"lint_tests": "eslint test/unit --config .eslintrc_tests && eslint test/visual --config .eslintrc_tests",
|
|
64
|
+
"export_gesture_to_site": "cp dist/fabric.js ../fabricjs.com/lib/fabric_with_gestures.js",
|
|
65
|
+
"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/",
|
|
66
|
+
"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",
|
|
67
|
+
"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",
|
|
68
|
+
"testem": "testem .",
|
|
69
|
+
"testem:ci": "testem ci"
|
|
70
|
+
},
|
|
71
|
+
"optionalDependencies": {},
|
|
72
|
+
"devDependencies": {
|
|
73
|
+
"auto-changelog": "^2.3.0",
|
|
74
|
+
"chalk": "^2.4.1",
|
|
75
|
+
"eslint": "4.18.x",
|
|
76
|
+
"nyc": "^15.1.0",
|
|
77
|
+
"onchange": "^7.1.0",
|
|
78
|
+
"pixelmatch": "^4.0.2",
|
|
79
|
+
"qunit": "^2.13.0",
|
|
80
|
+
"testem": "^3.2.0",
|
|
81
|
+
"uglify-js": "3.3.x"
|
|
82
|
+
},
|
|
83
|
+
"engines": {
|
|
84
|
+
"node": ">=14.0.0"
|
|
85
|
+
},
|
|
86
|
+
"main": "./dist/fabric.js",
|
|
87
|
+
"dependencies": {}
|
|
88
|
+
}
|
|
@@ -32,17 +32,23 @@
|
|
|
32
32
|
/**
|
|
33
33
|
* Color to make the blend operation with. default to a reddish color since black or white
|
|
34
34
|
* gives always strong result.
|
|
35
|
+
* @type String
|
|
36
|
+
* @default
|
|
35
37
|
**/
|
|
36
38
|
color: '#F95C63',
|
|
37
39
|
|
|
38
40
|
/**
|
|
39
41
|
* Blend mode for the filter: one of multiply, add, diff, screen, subtract,
|
|
40
42
|
* darken, lighten, overlay, exclusion, tint.
|
|
43
|
+
* @type String
|
|
44
|
+
* @default
|
|
41
45
|
**/
|
|
42
46
|
mode: 'multiply',
|
|
43
47
|
|
|
44
48
|
/**
|
|
45
49
|
* alpha value. represent the strength of the blend color operation.
|
|
50
|
+
* @type Number
|
|
51
|
+
* @default
|
|
46
52
|
**/
|
|
47
53
|
alpha: 1,
|
|
48
54
|
|
|
@@ -36,8 +36,9 @@
|
|
|
36
36
|
image: null,
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
|
-
* Blend mode for the filter
|
|
40
|
-
*
|
|
39
|
+
* Blend mode for the filter (one of "multiply", "mask")
|
|
40
|
+
* @type String
|
|
41
|
+
* @default
|
|
41
42
|
**/
|
|
42
43
|
mode: 'multiply',
|
|
43
44
|
|
|
@@ -66,8 +66,10 @@
|
|
|
66
66
|
mainParameter: 'matrix',
|
|
67
67
|
|
|
68
68
|
/**
|
|
69
|
-
* Lock the colormatrix on the color part, skipping alpha,
|
|
69
|
+
* Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario
|
|
70
70
|
* to save some calculation
|
|
71
|
+
* @type Boolean
|
|
72
|
+
* @default true
|
|
71
73
|
*/
|
|
72
74
|
colorsOnly: true,
|
|
73
75
|
|
|
@@ -1762,10 +1762,6 @@
|
|
|
1762
1762
|
}
|
|
1763
1763
|
this.forEachObject(function(object) {
|
|
1764
1764
|
object.dispose && object.dispose();
|
|
1765
|
-
// animation module is still optional
|
|
1766
|
-
if (fabric.runningAnimations) {
|
|
1767
|
-
fabric.runningAnimations.cancelByTarget(object);
|
|
1768
|
-
}
|
|
1769
1765
|
});
|
|
1770
1766
|
this._objects = [];
|
|
1771
1767
|
if (this.backgroundImage && this.backgroundImage.dispose) {
|
package/src/util/animate.js
CHANGED
|
@@ -5,19 +5,34 @@
|
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* @typedef {Object} AnimationOptions
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
8
|
+
* Animation of a value or list of values.
|
|
9
|
+
* When using lists, think of something like this:
|
|
10
|
+
* fabric.util.animate({
|
|
11
|
+
* startValue: [1, 2, 3],
|
|
12
|
+
* endValue: [2, 4, 6],
|
|
13
|
+
* onChange: function([a, b, c]) {
|
|
14
|
+
* canvas.zoomToPoint({x: b, y: c}, a)
|
|
15
|
+
* canvas.renderAll()
|
|
16
|
+
* }
|
|
17
|
+
* });
|
|
18
|
+
* @example
|
|
19
|
+
* @property {Function} [onChange] Callback; invoked on every value change
|
|
20
|
+
* @property {Function} [onComplete] Callback; invoked when value change is completed
|
|
21
|
+
* @example
|
|
22
|
+
* // Note: startValue, endValue, and byValue must match the type
|
|
23
|
+
* var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }
|
|
24
|
+
* var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }
|
|
25
|
+
* @property {number | number[]} [startValue=0] Starting value
|
|
26
|
+
* @property {number | number[]} [endValue=100] Ending value
|
|
27
|
+
* @property {number | number[]} [byValue=100] Value to modify the property by
|
|
28
|
+
* @property {Function} [easing] Easing function
|
|
29
|
+
* @property {Number} [duration=500] Duration of change (in ms)
|
|
30
|
+
* @property {Function} [abort] Additional function with logic. If returns true, animation aborts.
|
|
16
31
|
*
|
|
17
32
|
* @typedef {() => void} CancelFunction
|
|
18
33
|
*
|
|
19
34
|
* @typedef {Object} AnimationCurrentState
|
|
20
|
-
* @property {number} currentValue value in range [`startValue`, `endValue`]
|
|
35
|
+
* @property {number | number[]} currentValue value in range [`startValue`, `endValue`]
|
|
21
36
|
* @property {number} completionRate value in range [0, 1]
|
|
22
37
|
* @property {number} durationRate value in range [0, 1]
|
|
23
38
|
*
|
|
@@ -122,6 +137,10 @@
|
|
|
122
137
|
* Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
|
|
123
138
|
* @memberOf fabric.util
|
|
124
139
|
* @param {AnimationOptions} [options] Animation options
|
|
140
|
+
* @example
|
|
141
|
+
* // Note: startValue, endValue, and byValue must match the type
|
|
142
|
+
* fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })
|
|
143
|
+
* fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })
|
|
125
144
|
* @returns {CancelFunction} cancel function
|
|
126
145
|
*/
|
|
127
146
|
function animate(options) {
|
|
@@ -152,9 +171,12 @@
|
|
|
152
171
|
abort = options.abort || noop,
|
|
153
172
|
onComplete = options.onComplete || noop,
|
|
154
173
|
easing = options.easing || defaultEasing,
|
|
174
|
+
isMany = 'startValue' in options ? options.startValue.length > 0 : false,
|
|
155
175
|
startValue = 'startValue' in options ? options.startValue : 0,
|
|
156
176
|
endValue = 'endValue' in options ? options.endValue : 100,
|
|
157
|
-
byValue = options.byValue ||
|
|
177
|
+
byValue = options.byValue || (isMany ? startValue.map(function(value, i) {
|
|
178
|
+
return endValue[i] - startValue[i];
|
|
179
|
+
}) : endValue - startValue);
|
|
158
180
|
|
|
159
181
|
options.onStart && options.onStart();
|
|
160
182
|
|
|
@@ -162,10 +184,13 @@
|
|
|
162
184
|
time = ticktime || +new Date();
|
|
163
185
|
var currentTime = time > finish ? duration : (time - start),
|
|
164
186
|
timePerc = currentTime / duration,
|
|
165
|
-
current =
|
|
166
|
-
|
|
187
|
+
current = isMany ? startValue.map(function(_value, i) {
|
|
188
|
+
return easing(currentTime, startValue[i], byValue[i], duration);
|
|
189
|
+
}) : easing(currentTime, startValue, byValue, duration),
|
|
190
|
+
valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0])
|
|
191
|
+
: Math.abs((current - startValue) / byValue);
|
|
167
192
|
// update context
|
|
168
|
-
context.currentValue = current;
|
|
193
|
+
context.currentValue = isMany ? current.slice() : current;
|
|
169
194
|
context.completionRate = valuePerc;
|
|
170
195
|
context.durationRate = timePerc;
|
|
171
196
|
if (cancel) {
|
|
@@ -177,11 +202,11 @@
|
|
|
177
202
|
}
|
|
178
203
|
if (time > finish) {
|
|
179
204
|
// update context
|
|
180
|
-
context.currentValue = endValue;
|
|
205
|
+
context.currentValue = isMany ? endValue.slice() : endValue;
|
|
181
206
|
context.completionRate = 1;
|
|
182
207
|
context.durationRate = 1;
|
|
183
208
|
// execute callbacks
|
|
184
|
-
onChange(endValue, 1, 1);
|
|
209
|
+
onChange(isMany ? endValue.slice() : endValue, 1, 1);
|
|
185
210
|
onComplete(endValue, 1, 1);
|
|
186
211
|
removeFromRegistry();
|
|
187
212
|
return;
|