@nasser-sw/fabric 7.0.1-beta21 → 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.
@@ -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-beta22",
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
+ }
@@ -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-beta20";
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,28 +31006,35 @@
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
- // Store clip path but keep rendering it for the overlay effect
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
31018
31031
  this._setupEditModeConstraints();
31019
31032
  this.set('dirty', true);
31020
31033
 
31021
- // Select the content image on the canvas
31034
+ // Just render - don't call setActiveObject() on the content image
31035
+ // because it causes position miscalculation with viewport transforms.
31036
+ // The content image is still interactive via subTargetCheck = true
31022
31037
  if (this.canvas) {
31023
- this.canvas.setActiveObject(this._contentImage);
31024
31038
  this.canvas.renderAll();
31025
31039
  }
31026
31040
 
@@ -31102,6 +31116,38 @@
31102
31116
  this._boundConstrainScale = undefined;
31103
31117
  }
31104
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
+
31105
31151
  /**
31106
31152
  * Custom render to show edit mode overlay
31107
31153
  * @override
@@ -31248,21 +31294,17 @@
31248
31294
  contentScale: currentScale
31249
31295
  };
31250
31296
 
31251
- // Make content non-interactive again
31297
+ // Make content non-interactive again and restore caching
31252
31298
  this._contentImage.set({
31253
31299
  selectable: false,
31254
31300
  evented: false,
31255
31301
  hasControls: false,
31256
- hasBorders: false
31302
+ hasBorders: false,
31303
+ objectCaching: true
31257
31304
  });
31258
31305
 
31259
- // Restore clip path
31260
- if (this._editModeClipPath) {
31261
- this.clipPath = this._editModeClipPath;
31262
- this._editModeClipPath = undefined;
31263
- } else {
31264
- this._updateClipPath();
31265
- }
31306
+ // Clear edit mode clip path reference (clipPath was never removed, just skipped during render)
31307
+ this._editModeClipPath = undefined;
31266
31308
 
31267
31309
  // Restore caching setting
31268
31310
  if (this._editModeObjectCaching !== undefined) {