@nasser-sw/fabric 7.0.1-beta22 → 7.0.1-beta23
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/.history/package_20251226225525.json +164 -0
- package/dist/index.js +54 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +54 -13
- package/dist/index.mjs.map +1 -1
- package/dist/index.node.cjs +54 -13
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +54 -13
- package/dist/index.node.mjs.map +1 -1
- package/dist/package.json.mjs +1 -1
- package/dist/src/shapes/Frame.d.ts +12 -0
- package/dist/src/shapes/Frame.d.ts.map +1 -1
- package/dist/src/shapes/Frame.mjs +53 -12
- package/dist/src/shapes/Frame.mjs.map +1 -1
- package/dist-extensions/src/shapes/Frame.d.ts +12 -0
- package/dist-extensions/src/shapes/Frame.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/shapes/Frame.ts +55 -11
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nasser-sw/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": "7.0.1-beta23",
|
|
6
|
+
"author": "Juriy Zaytsev <kangax@gmail.com>",
|
|
7
|
+
"contributors": [
|
|
8
|
+
{
|
|
9
|
+
"name": "Andrea Bogazzi",
|
|
10
|
+
"email": "andreabogazzi79@gmail.com",
|
|
11
|
+
"url": "https://github.com/asturur"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"name": "Shachar Nencel",
|
|
15
|
+
"email": "shacharnen@gmail.com",
|
|
16
|
+
"url": "https://github.com/ShaMan123"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "Steve Eberhardt",
|
|
20
|
+
"email": "melchiar2@gmail.com",
|
|
21
|
+
"url": "https://github.com/melchiar"
|
|
22
|
+
}
|
|
23
|
+
],
|
|
24
|
+
"keywords": [
|
|
25
|
+
"canvas",
|
|
26
|
+
"graphic",
|
|
27
|
+
"graphics",
|
|
28
|
+
"SVG",
|
|
29
|
+
"node-canvas",
|
|
30
|
+
"parser",
|
|
31
|
+
"HTML5",
|
|
32
|
+
"object model"
|
|
33
|
+
],
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/fabricjs/fabric.js"
|
|
40
|
+
},
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://github.com/fabricjs/fabric.js/issues"
|
|
43
|
+
},
|
|
44
|
+
"license": "MIT",
|
|
45
|
+
"scripts": {
|
|
46
|
+
"docs": "typedoc",
|
|
47
|
+
"cli": "node ./scripts/index.mjs",
|
|
48
|
+
"sandboxscript": "node ./scripts/sandbox.mjs",
|
|
49
|
+
"build": "npm run cli -- build",
|
|
50
|
+
"build:fast": "npm run build -- -f",
|
|
51
|
+
"dev": "npm run cli -- dev",
|
|
52
|
+
"start": "npm run sandboxscript -- start",
|
|
53
|
+
"export": "npm run cli -- website export",
|
|
54
|
+
"test:vitest": "vitest --run --project unit-node",
|
|
55
|
+
"test:vitest:chromium": "vitest --run --project unit-chromium",
|
|
56
|
+
"test:vitest:firefox": "vitest --run --project unit-firefox",
|
|
57
|
+
"test:vitest:all": "vitest --run",
|
|
58
|
+
"test:vitest:coverage": "vitest --run --coverage --project unit-node",
|
|
59
|
+
"test:vitest:coverage:watch": "npm run test:vitest --coverage=true",
|
|
60
|
+
"coverage:merge": "nyc merge coveragefiles .nyc_output/merged-coverage.json",
|
|
61
|
+
"coverage:report": "nyc report --skip-full=true --reporter=lcov --reporter=text --reporter=text-summary",
|
|
62
|
+
"coverage:report:ci": "nyc report --reporter=text-summary",
|
|
63
|
+
"test:e2e": "npm run playwright:typecheck && playwright test",
|
|
64
|
+
"playwright:typecheck": "tsc -p ./e2e/tsconfig.json --noEmit",
|
|
65
|
+
"sandbox": "npm run sandboxscript -- sandbox",
|
|
66
|
+
"local-server": "serve ./ -l tcp://localhost:8080",
|
|
67
|
+
"lint": "eslint src extensions",
|
|
68
|
+
"prettier:check": "prettier --check .",
|
|
69
|
+
"prettier:write": "prettier --write ."
|
|
70
|
+
},
|
|
71
|
+
"devDependencies": {
|
|
72
|
+
"@babel/cli": "^7.28.3",
|
|
73
|
+
"@babel/core": "^7.28.3",
|
|
74
|
+
"@babel/preset-env": "^7.28.3",
|
|
75
|
+
"@babel/preset-typescript": "^7.27.1",
|
|
76
|
+
"@eslint/js": "^9.31.0",
|
|
77
|
+
"@playwright/test": "^1.55.0",
|
|
78
|
+
"@rollup/plugin-babel": "^6.0.4",
|
|
79
|
+
"@rollup/plugin-json": "^6.1.0",
|
|
80
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
81
|
+
"@rollup/plugin-typescript": "^12.1.4",
|
|
82
|
+
"@types/fs-extra": "^11.0.4",
|
|
83
|
+
"@types/jsdom": "^21.1.7",
|
|
84
|
+
"@types/micromatch": "^4.0.9",
|
|
85
|
+
"@types/node": "^24.3.0",
|
|
86
|
+
"@vitest/browser": "^3.2.4",
|
|
87
|
+
"@vitest/coverage-v8": "^3.2.4",
|
|
88
|
+
"@vitest/ui": "^3.2.4",
|
|
89
|
+
"babel-plugin-transform-imports": "git+https://git@github.com/fabricjs/babel-plugin-transform-imports.git",
|
|
90
|
+
"chalk": "^5.6.0",
|
|
91
|
+
"commander": "^14.0.0",
|
|
92
|
+
"es-toolkit": "1.39.7",
|
|
93
|
+
"eslint-config-prettier": "^10.1.8",
|
|
94
|
+
"fs-extra": "^11.3.1",
|
|
95
|
+
"inquirer": "^12.9.4",
|
|
96
|
+
"micromatch": "^4.0.8",
|
|
97
|
+
"moment": "^2.30.1",
|
|
98
|
+
"nyc": "^17.1.0",
|
|
99
|
+
"prettier": "^3.6.2",
|
|
100
|
+
"ps-list": "^8.1.1",
|
|
101
|
+
"rollup": "^4.48.0",
|
|
102
|
+
"semver": "^7.7.2",
|
|
103
|
+
"serve": "^14.2.4",
|
|
104
|
+
"tslib": "^2.8.1",
|
|
105
|
+
"typescript": "^5.9.2",
|
|
106
|
+
"typescript-eslint": "^8.40.0",
|
|
107
|
+
"v8-to-istanbul": "^9.3.0",
|
|
108
|
+
"vite": "^6.3.5",
|
|
109
|
+
"vitest": "^3.2.4"
|
|
110
|
+
},
|
|
111
|
+
"engines": {
|
|
112
|
+
"node": ">=18.0.0"
|
|
113
|
+
},
|
|
114
|
+
"overrides": {
|
|
115
|
+
"canvas": {
|
|
116
|
+
"canvas": "3.2.0"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
"module": "./dist/index.mjs",
|
|
120
|
+
"types": "./dist/index.d.ts",
|
|
121
|
+
"typesVersions": {
|
|
122
|
+
">=4.2": {
|
|
123
|
+
"*": [
|
|
124
|
+
"dist/index.d.ts"
|
|
125
|
+
],
|
|
126
|
+
"node": [
|
|
127
|
+
"dist/index.node.d.ts"
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
"sideEffects": false,
|
|
132
|
+
"exports": {
|
|
133
|
+
".": {
|
|
134
|
+
"types": "./dist/index.d.ts",
|
|
135
|
+
"import": "./dist/index.min.mjs",
|
|
136
|
+
"require": "./dist/index.min.js",
|
|
137
|
+
"default": "./dist/index.min.js"
|
|
138
|
+
},
|
|
139
|
+
"./es": {
|
|
140
|
+
"types": "./dist/index.d.ts",
|
|
141
|
+
"import": "./dist/fabric.min.mjs",
|
|
142
|
+
"require": null,
|
|
143
|
+
"default": null
|
|
144
|
+
},
|
|
145
|
+
"./node": {
|
|
146
|
+
"node": "./dist/index.node.cjs",
|
|
147
|
+
"types": "./dist/index.node.d.ts",
|
|
148
|
+
"import": "./dist/index.node.mjs",
|
|
149
|
+
"require": "./dist/index.node.cjs",
|
|
150
|
+
"default": "./dist/index.node.cjs"
|
|
151
|
+
},
|
|
152
|
+
"./extensions": {
|
|
153
|
+
"node": "./dist-extensions/index.mjs",
|
|
154
|
+
"types": "./dist-extensions/extensions/index.d.ts",
|
|
155
|
+
"import": "./dist-extensions/index.mjs",
|
|
156
|
+
"require": null,
|
|
157
|
+
"default": "./dist-extensions/fabric-extensions.min.js"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
"optionalDependencies": {
|
|
161
|
+
"canvas": "^3.2.0",
|
|
162
|
+
"jsdom": "^26.1.0"
|
|
163
|
+
}
|
|
164
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -360,7 +360,7 @@
|
|
|
360
360
|
}
|
|
361
361
|
const cache = new Cache();
|
|
362
362
|
|
|
363
|
-
var version = "7.0.1-
|
|
363
|
+
var version = "7.0.1-beta22";
|
|
364
364
|
|
|
365
365
|
// use this syntax so babel plugin see this import here
|
|
366
366
|
const VERSION = version;
|
|
@@ -30989,6 +30989,13 @@
|
|
|
30989
30989
|
this._editModeObjectCaching = this.objectCaching;
|
|
30990
30990
|
this.objectCaching = false;
|
|
30991
30991
|
|
|
30992
|
+
// Force clear any existing cache
|
|
30993
|
+
this.dirty = true;
|
|
30994
|
+
if (this._cacheCanvas) {
|
|
30995
|
+
this._cacheCanvas = null;
|
|
30996
|
+
this._cacheContext = null;
|
|
30997
|
+
}
|
|
30998
|
+
|
|
30992
30999
|
// Enable sub-target interaction so clicks go through to content
|
|
30993
31000
|
this.subTargetCheck = true;
|
|
30994
31001
|
this.interactive = true;
|
|
@@ -30999,19 +31006,25 @@
|
|
|
30999
31006
|
const minScale = this._calculateCoverScale(originalWidth, originalHeight);
|
|
31000
31007
|
|
|
31001
31008
|
// Make content image interactive with scale constraint
|
|
31009
|
+
// Also disable its caching to ensure it renders fully
|
|
31002
31010
|
this._contentImage.set({
|
|
31003
31011
|
selectable: true,
|
|
31004
31012
|
evented: true,
|
|
31005
31013
|
hasControls: true,
|
|
31006
31014
|
hasBorders: true,
|
|
31007
31015
|
minScaleLimit: minScale,
|
|
31008
|
-
lockScalingFlip: true
|
|
31016
|
+
lockScalingFlip: true,
|
|
31017
|
+
objectCaching: false
|
|
31009
31018
|
});
|
|
31019
|
+
this._contentImage.dirty = true;
|
|
31010
31020
|
|
|
31011
|
-
//
|
|
31021
|
+
// Keep clipPath reference for the overlay effect rendering
|
|
31022
|
+
// NOTE: We do NOT set this.clipPath = undefined because that triggers
|
|
31023
|
+
// coordinate recalculations in Fabric that behave differently with
|
|
31024
|
+
// viewport transforms (autoZoom), causing visual position jumps.
|
|
31025
|
+
// Instead, we override drawObject() to skip clipPath rendering in edit mode.
|
|
31012
31026
|
if (this.clipPath) {
|
|
31013
31027
|
this._editModeClipPath = this.clipPath;
|
|
31014
|
-
this.clipPath = undefined;
|
|
31015
31028
|
}
|
|
31016
31029
|
|
|
31017
31030
|
// Add constraint handlers for moving/scaling
|
|
@@ -31103,6 +31116,38 @@
|
|
|
31103
31116
|
this._boundConstrainScale = undefined;
|
|
31104
31117
|
}
|
|
31105
31118
|
}
|
|
31119
|
+
/**
|
|
31120
|
+
* Override shouldCache to prevent caching during edit mode.
|
|
31121
|
+
* This ensures the full image is rendered without cache-based clipping.
|
|
31122
|
+
* @override
|
|
31123
|
+
*/
|
|
31124
|
+
shouldCache() {
|
|
31125
|
+
if (this.isEditMode) {
|
|
31126
|
+
this.ownCaching = false;
|
|
31127
|
+
return false;
|
|
31128
|
+
}
|
|
31129
|
+
return super.shouldCache();
|
|
31130
|
+
}
|
|
31131
|
+
|
|
31132
|
+
/**
|
|
31133
|
+
* Override drawObject to skip clipPath rendering during edit mode.
|
|
31134
|
+
* This prevents coordinate recalculation issues with viewport transforms.
|
|
31135
|
+
* @override
|
|
31136
|
+
*/
|
|
31137
|
+
drawObject(ctx, forClipping, context) {
|
|
31138
|
+
this._renderBackground(ctx);
|
|
31139
|
+
for (let i = 0; i < this._objects.length; i++) {
|
|
31140
|
+
const obj = this._objects[i];
|
|
31141
|
+
if (obj.group === this) {
|
|
31142
|
+
obj.render(ctx);
|
|
31143
|
+
}
|
|
31144
|
+
}
|
|
31145
|
+
// Skip clipPath rendering in edit mode to show full image
|
|
31146
|
+
if (!this.isEditMode) {
|
|
31147
|
+
this._drawClipPath(ctx, this.clipPath, context);
|
|
31148
|
+
}
|
|
31149
|
+
}
|
|
31150
|
+
|
|
31106
31151
|
/**
|
|
31107
31152
|
* Custom render to show edit mode overlay
|
|
31108
31153
|
* @override
|
|
@@ -31249,21 +31294,17 @@
|
|
|
31249
31294
|
contentScale: currentScale
|
|
31250
31295
|
};
|
|
31251
31296
|
|
|
31252
|
-
// Make content non-interactive again
|
|
31297
|
+
// Make content non-interactive again and restore caching
|
|
31253
31298
|
this._contentImage.set({
|
|
31254
31299
|
selectable: false,
|
|
31255
31300
|
evented: false,
|
|
31256
31301
|
hasControls: false,
|
|
31257
|
-
hasBorders: false
|
|
31302
|
+
hasBorders: false,
|
|
31303
|
+
objectCaching: true
|
|
31258
31304
|
});
|
|
31259
31305
|
|
|
31260
|
-
//
|
|
31261
|
-
|
|
31262
|
-
this.clipPath = this._editModeClipPath;
|
|
31263
|
-
this._editModeClipPath = undefined;
|
|
31264
|
-
} else {
|
|
31265
|
-
this._updateClipPath();
|
|
31266
|
-
}
|
|
31306
|
+
// Clear edit mode clip path reference (clipPath was never removed, just skipped during render)
|
|
31307
|
+
this._editModeClipPath = undefined;
|
|
31267
31308
|
|
|
31268
31309
|
// Restore caching setting
|
|
31269
31310
|
if (this._editModeObjectCaching !== undefined) {
|