@nasser-sw/fabric 7.0.1-beta29 → 7.0.1-beta30

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.
Files changed (32) hide show
  1. package/.history/package_20251227153856.json +164 -0
  2. package/dist/index.js +40 -56
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.min.js +1 -1
  5. package/dist/index.min.js.map +1 -1
  6. package/dist/index.min.mjs +1 -1
  7. package/dist/index.min.mjs.map +1 -1
  8. package/dist/index.mjs +40 -56
  9. package/dist/index.mjs.map +1 -1
  10. package/dist/index.node.cjs +40 -56
  11. package/dist/index.node.cjs.map +1 -1
  12. package/dist/index.node.mjs +40 -56
  13. package/dist/index.node.mjs.map +1 -1
  14. package/dist/package.json.min.mjs +1 -1
  15. package/dist/package.json.mjs +1 -1
  16. package/dist/src/controls/expandControl.d.ts +1 -1
  17. package/dist/src/controls/expandControl.d.ts.map +1 -1
  18. package/dist/src/controls/expandControl.min.mjs +1 -1
  19. package/dist/src/controls/expandControl.min.mjs.map +1 -1
  20. package/dist/src/controls/expandControl.mjs +28 -35
  21. package/dist/src/controls/expandControl.mjs.map +1 -1
  22. package/dist/src/shapes/Object/InteractiveObject.d.ts.map +1 -1
  23. package/dist/src/shapes/Object/InteractiveObject.min.mjs +1 -1
  24. package/dist/src/shapes/Object/InteractiveObject.min.mjs.map +1 -1
  25. package/dist/src/shapes/Object/InteractiveObject.mjs +10 -19
  26. package/dist/src/shapes/Object/InteractiveObject.mjs.map +1 -1
  27. package/dist-extensions/src/controls/expandControl.d.ts +1 -1
  28. package/dist-extensions/src/controls/expandControl.d.ts.map +1 -1
  29. package/dist-extensions/src/shapes/Object/InteractiveObject.d.ts.map +1 -1
  30. package/package.json +1 -1
  31. package/src/controls/expandControl.ts +28 -32
  32. package/src/shapes/Object/InteractiveObject.ts +10 -20
@@ -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-beta30",
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-beta28";
363
+ var version = "7.0.1-beta29";
364
364
 
365
365
  // use this syntax so babel plugin see this import here
366
366
  const VERSION = version;
@@ -9337,7 +9337,7 @@
9337
9337
  /**
9338
9338
  * Position handler for expand controls
9339
9339
  * Positions controls at the expansion boundary, not the object boundary
9340
- * Note: expansion values are stored in local object coordinates
9340
+ * Note: expansion values are stored in UNSCALED local object coordinates
9341
9341
  */
9342
9342
  positionHandler(dim, finalMatrix, fabricObject, currentControl) {
9343
9343
  const expansion = getExpansion(fabricObject);
@@ -9348,23 +9348,15 @@
9348
9348
  expandBottom
9349
9349
  } = expansion;
9350
9350
 
9351
- // dim already includes object's own scale
9351
+ // dim already includes object's own scale (dim = width * scaleX, height * scaleY)
9352
9352
  const halfWidth = dim.x / 2;
9353
9353
  const halfHeight = dim.y / 2;
9354
9354
 
9355
- // When object is in a group (like Frame), we need to scale expansion values
9356
- // to match the coordinate space of dim
9357
- let scaleFactorX = 1;
9358
- let scaleFactorY = 1;
9359
- if (fabricObject.group) {
9360
- // dim is in object's scaled local space
9361
- // expansion values are also in local space
9362
- // But we need to account for the object's scale since dim includes it
9363
- const objectScaleX = fabricObject.scaleX || 1;
9364
- const objectScaleY = fabricObject.scaleY || 1;
9365
- scaleFactorX = objectScaleX;
9366
- scaleFactorY = objectScaleY;
9367
- }
9355
+ // Expansion values are in UNSCALED coordinates.
9356
+ // dim is in SCALED coordinates.
9357
+ // Scale expansion by object's scale to match dim.
9358
+ const scaleFactorX = fabricObject.scaleX || 1;
9359
+ const scaleFactorY = fabricObject.scaleY || 1;
9368
9360
 
9369
9361
  // Scale expansion values to match dim's coordinate space
9370
9362
  const scaledExpandLeft = expandLeft * scaleFactorX;
@@ -9460,15 +9452,15 @@
9460
9452
 
9461
9453
  // Use Fabric's getLocalPoint with center origin (returns scaled coordinates)
9462
9454
  const localPoint = getLocalPoint(transform, CENTER, CENTER, x, y);
9463
-
9464
- // Use SCALED half width since localPoint is in scaled coords
9465
9455
  const scaleX = target.scaleX || 1;
9466
9456
  const scaledHalfWidth = target.width * scaleX / 2;
9467
9457
 
9468
- // Calculate new expansion (how far left of the object's left edge)
9469
- // localPoint.x is negative when left of center
9470
- // Expansion starts when localPoint.x < -scaledHalfWidth
9471
- const newExpandLeft = Math.max(0, -scaledHalfWidth - localPoint.x);
9458
+ // Calculate expansion in scaled coordinates first
9459
+ const scaledExpansion = Math.max(0, -scaledHalfWidth - localPoint.x);
9460
+
9461
+ // Store in UNSCALED coordinates (divide by scale)
9462
+ // This ensures positionHandler can scale it back correctly
9463
+ const newExpandLeft = scaledExpansion / scaleX;
9472
9464
  if (Math.abs(newExpandLeft - expansion.expandLeft) > 0.5) {
9473
9465
  var _target$canvas;
9474
9466
  expansion.expandLeft = newExpandLeft;
@@ -9490,15 +9482,14 @@
9490
9482
 
9491
9483
  // Use Fabric's getLocalPoint with center origin (returns scaled coordinates)
9492
9484
  const localPoint = getLocalPoint(transform, CENTER, CENTER, x, y);
9493
-
9494
- // Use SCALED half width since localPoint is in scaled coords
9495
9485
  const scaleX = target.scaleX || 1;
9496
9486
  const scaledHalfWidth = target.width * scaleX / 2;
9497
9487
 
9498
- // Calculate new expansion (how far right of the object's right edge)
9499
- // localPoint.x is positive when right of center
9500
- // Expansion starts when localPoint.x > scaledHalfWidth
9501
- const newExpandRight = Math.max(0, localPoint.x - scaledHalfWidth);
9488
+ // Calculate expansion in scaled coordinates first
9489
+ const scaledExpansion = Math.max(0, localPoint.x - scaledHalfWidth);
9490
+
9491
+ // Store in UNSCALED coordinates (divide by scale)
9492
+ const newExpandRight = scaledExpansion / scaleX;
9502
9493
  if (Math.abs(newExpandRight - expansion.expandRight) > 0.5) {
9503
9494
  var _target$canvas2;
9504
9495
  expansion.expandRight = newExpandRight;
@@ -9520,13 +9511,14 @@
9520
9511
 
9521
9512
  // Use Fabric's getLocalPoint with center origin (returns scaled coordinates)
9522
9513
  const localPoint = getLocalPoint(transform, CENTER, CENTER, x, y);
9523
-
9524
- // Use SCALED half height since localPoint is in scaled coords
9525
9514
  const scaleY = target.scaleY || 1;
9526
9515
  const scaledHalfHeight = target.height * scaleY / 2;
9527
9516
 
9528
- // Calculate new expansion (how far above the object's top edge)
9529
- const newExpandTop = Math.max(0, -scaledHalfHeight - localPoint.y);
9517
+ // Calculate expansion in scaled coordinates first
9518
+ const scaledExpansion = Math.max(0, -scaledHalfHeight - localPoint.y);
9519
+
9520
+ // Store in UNSCALED coordinates (divide by scale)
9521
+ const newExpandTop = scaledExpansion / scaleY;
9530
9522
  if (Math.abs(newExpandTop - expansion.expandTop) > 0.5) {
9531
9523
  var _target$canvas3;
9532
9524
  expansion.expandTop = newExpandTop;
@@ -9548,13 +9540,14 @@
9548
9540
 
9549
9541
  // Use Fabric's getLocalPoint with center origin (returns scaled coordinates)
9550
9542
  const localPoint = getLocalPoint(transform, CENTER, CENTER, x, y);
9551
-
9552
- // Use SCALED half height since localPoint is in scaled coords
9553
9543
  const scaleY = target.scaleY || 1;
9554
9544
  const scaledHalfHeight = target.height * scaleY / 2;
9555
9545
 
9556
- // Calculate new expansion (how far below the object's bottom edge)
9557
- const newExpandBottom = Math.max(0, localPoint.y - scaledHalfHeight);
9546
+ // Calculate expansion in scaled coordinates first
9547
+ const scaledExpansion = Math.max(0, localPoint.y - scaledHalfHeight);
9548
+
9549
+ // Store in UNSCALED coordinates (divide by scale)
9550
+ const newExpandBottom = scaledExpansion / scaleY;
9558
9551
  if (Math.abs(newExpandBottom - expansion.expandBottom) > 0.5) {
9559
9552
  var _target$canvas4;
9560
9553
  expansion.expandBottom = newExpandBottom;
@@ -9990,8 +9983,8 @@
9990
9983
  size = this._calculateCurrentDimensions().scalarAdd(this.borderScaleFactor);
9991
9984
  }
9992
9985
 
9993
- // Draw expansion preview if in expand mode or has expansion
9994
- if (this.expandMode || this.hasExpansion()) {
9986
+ // Draw expansion preview only when actively in expand mode
9987
+ if (this.expandMode) {
9995
9988
  this.drawExpandPreview(ctx, size, options);
9996
9989
  }
9997
9990
  this._drawBorders(ctx, size, styleOverride);
@@ -10405,7 +10398,7 @@
10405
10398
  * Note: expansion values are stored in local object coordinates
10406
10399
  */
10407
10400
  drawExpandPreview(ctx, size, options) {
10408
- if (!this.expandMode && !this.hasExpansion()) return;
10401
+ if (!this.expandMode) return;
10409
10402
  const {
10410
10403
  expandLeft,
10411
10404
  expandRight,
@@ -10413,23 +10406,14 @@
10413
10406
  expandBottom
10414
10407
  } = this.expansion;
10415
10408
 
10416
- // When object is in a group (like Frame), expansion values are in local coords
10417
- // but context is transformed. We need to scale expansion by the transform.
10418
- // For standalone objects, options.scaleX/Y will be just the object's own scale.
10419
- // For objects in groups, it includes parent scale too.
10420
- let scaleFactorX = 1;
10421
- let scaleFactorY = 1;
10422
- if (this.group && options) {
10423
- // Get the group's contribution to the scale
10424
- // options.scaleX includes both object scale and parent scale
10425
- // We want just the parent's scale contribution
10426
- const objectScaleX = this.scaleX || 1;
10427
- const objectScaleY = this.scaleY || 1;
10428
- scaleFactorX = (options.scaleX || 1) / objectScaleX;
10429
- scaleFactorY = (options.scaleY || 1) / objectScaleY;
10430
- }
10431
-
10432
- // Scale expansion values by the parent's scale factor
10409
+ // Expansion values are stored in UNSCALED object coordinates.
10410
+ // size is in screen coordinates (includes full transform).
10411
+ // We need to scale expansion by the FULL transform to match size.
10412
+ // options.scaleX/Y contains the full scale (object * parent * viewport).
10413
+ const scaleFactorX = (options === null || options === void 0 ? void 0 : options.scaleX) || this.scaleX || 1;
10414
+ const scaleFactorY = (options === null || options === void 0 ? void 0 : options.scaleY) || this.scaleY || 1;
10415
+
10416
+ // Scale expansion values to screen coordinates
10433
10417
  const scaledExpandLeft = expandLeft * scaleFactorX;
10434
10418
  const scaledExpandRight = expandRight * scaleFactorX;
10435
10419
  const scaledExpandTop = expandTop * scaleFactorY;