@nasser-sw/fabric 7.0.1-beta31 → 7.0.1-beta32

package/.history/package_20251227191616.json

@@ -0,0 +1,164 @@
+{
+  "name": "@nasser-sw/fabric",
+  "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
+  "homepage": "http://fabricjs.com/",
+  "version": "7.0.1-beta32",
+  "author": "Juriy Zaytsev <kangax@gmail.com>",
+  "contributors": [
+    {
+      "name": "Andrea Bogazzi",
+      "email": "andreabogazzi79@gmail.com",
+      "url": "https://github.com/asturur"
+    },
+    {
+      "name": "Shachar Nencel",
+      "email": "shacharnen@gmail.com",
+      "url": "https://github.com/ShaMan123"
+    },
+    {
+      "name": "Steve Eberhardt",
+      "email": "melchiar2@gmail.com",
+      "url": "https://github.com/melchiar"
+    }
+  ],
+  "keywords": [
+    "canvas",
+    "graphic",
+    "graphics",
+    "SVG",
+    "node-canvas",
+    "parser",
+    "HTML5",
+    "object model"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fabricjs/fabric.js"
+  },
+  "bugs": {
+    "url": "https://github.com/fabricjs/fabric.js/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "docs": "typedoc",
+    "cli": "node ./scripts/index.mjs",
+    "sandboxscript": "node ./scripts/sandbox.mjs",
+    "build": "npm run cli -- build",
+    "build:fast": "npm run build -- -f",
+    "dev": "npm run cli -- dev",
+    "start": "npm run sandboxscript -- start",
+    "export": "npm run cli -- website export",
+    "test:vitest": "vitest --run --project unit-node",
+    "test:vitest:chromium": "vitest --run --project unit-chromium",
+    "test:vitest:firefox": "vitest --run --project unit-firefox",
+    "test:vitest:all": "vitest --run",
+    "test:vitest:coverage": "vitest --run --coverage --project unit-node",
+    "test:vitest:coverage:watch": "npm run test:vitest --coverage=true",
+    "coverage:merge": "nyc merge coveragefiles .nyc_output/merged-coverage.json",
+    "coverage:report": "nyc report --skip-full=true --reporter=lcov --reporter=text --reporter=text-summary",
+    "coverage:report:ci": "nyc report --reporter=text-summary",
+    "test:e2e": "npm run playwright:typecheck && playwright test",
+    "playwright:typecheck": "tsc -p ./e2e/tsconfig.json --noEmit",
+    "sandbox": "npm run sandboxscript -- sandbox",
+    "local-server": "serve ./ -l tcp://localhost:8080",
+    "lint": "eslint src extensions",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write ."
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
+    "@eslint/js": "^9.31.0",
+    "@playwright/test": "^1.55.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/fs-extra": "^11.0.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/micromatch": "^4.0.9",
+    "@types/node": "^24.3.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "babel-plugin-transform-imports": "git+https://git@github.com/fabricjs/babel-plugin-transform-imports.git",
+    "chalk": "^5.6.0",
+    "commander": "^14.0.0",
+    "es-toolkit": "1.39.7",
+    "eslint-config-prettier": "^10.1.8",
+    "fs-extra": "^11.3.1",
+    "inquirer": "^12.9.4",
+    "micromatch": "^4.0.8",
+    "moment": "^2.30.1",
+    "nyc": "^17.1.0",
+    "prettier": "^3.6.2",
+    "ps-list": "^8.1.1",
+    "rollup": "^4.48.0",
+    "semver": "^7.7.2",
+    "serve": "^14.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.40.0",
+    "v8-to-istanbul": "^9.3.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "overrides": {
+    "canvas": {
+      "canvas": "3.2.0"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    ">=4.2": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "node": [
+        "dist/index.node.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.min.mjs",
+      "require": "./dist/index.min.js",
+      "default": "./dist/index.min.js"
+    },
+    "./es": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fabric.min.mjs",
+      "require": null,
+      "default": null
+    },
+    "./node": {
+      "node": "./dist/index.node.cjs",
+      "types": "./dist/index.node.d.ts",
+      "import": "./dist/index.node.mjs",
+      "require": "./dist/index.node.cjs",
+      "default": "./dist/index.node.cjs"
+    },
+    "./extensions": {
+      "node": "./dist-extensions/index.mjs",
+      "types": "./dist-extensions/extensions/index.d.ts",
+      "import": "./dist-extensions/index.mjs",
+      "require": null,
+      "default": "./dist-extensions/fabric-extensions.min.js"
+    }
+  },
+  "optionalDependencies": {
+    "canvas": "^3.2.0",
+    "jsdom": "^26.1.0"
+  }
+}

package/dist/index.js

@@ -9338,9 +9338,12 @@
      * Position handler for expand controls
      * Positions controls at the expansion boundary, not the object boundary
      * Note: expansion values are stored in UNSCALED local object coordinates
+     *
+     * Key insight: dim already includes zoom, and finalMatrix undoes zoom.
+     * So we need to express expansion as a PROPORTION of dim, not as a separate offset.
+     * This ensures the expansion scales correctly with zoom.
      */
     positionHandler(dim, finalMatrix, fabricObject, currentControl) {
-      var _fabricObject$canvas;
       const expansion = getExpansion(fabricObject);
       const {
         expandLeft,
@@ -9349,56 +9352,39 @@
         expandBottom
       } = expansion;
 
-      // dim already includes object's scale AND viewport zoom via _calculateCurrentDimensions
-      // which calls: _getTransformedDimensions().transform(viewportTransform, true)
-      const halfWidth = dim.x / 2;
-      const halfHeight = dim.y / 2;
-
-      // Expansion values are in UNSCALED coordinates.
-      // dim includes both object scale AND viewport zoom.
-      // We need to scale expansion by both to match dim.
-      const zoom = ((_fabricObject$canvas = fabricObject.canvas) === null || _fabricObject$canvas === void 0 ? void 0 : _fabricObject$canvas.getZoom()) || 1;
-      const scaleFactorX = (fabricObject.scaleX || 1) * zoom;
-      const scaleFactorY = (fabricObject.scaleY || 1) * zoom;
-
-      // Scale expansion values to match dim's coordinate space (includes zoom)
-      const scaledExpandLeft = expandLeft * scaleFactorX;
-      const scaledExpandRight = expandRight * scaleFactorX;
-      const scaledExpandTop = expandTop * scaleFactorY;
-      const scaledExpandBottom = expandBottom * scaleFactorY;
-
-      // Calculate the expanded half dimensions
-      const expandedHalfWidth = halfWidth + (scaledExpandLeft + scaledExpandRight) / 2;
-      const expandedHalfHeight = halfHeight + (scaledExpandTop + scaledExpandBottom) / 2;
-
-      // Calculate offset from center based on asymmetric expansion
-      const centerOffsetX = (scaledExpandRight - scaledExpandLeft) / 2;
-      const centerOffsetY = (scaledExpandBottom - scaledExpandTop) / 2;
-      let posX;
-      let posY;
-
-      // Position based on which side this control is on
+      // Get object's base dimensions (unscaled)
+      const objWidth = fabricObject.width || 1;
+      const objHeight = fabricObject.height || 1;
+
+      // Express expansion as a proportion of object size
+      // dim includes zoom, finalMatrix applies inverse zoom
+      // The result matches drawExpandPreview which also uses ratio * size
+      const expandLeftRatio = expandLeft / objWidth;
+      const expandRightRatio = expandRight / objWidth;
+      const expandTopRatio = expandTop / objHeight;
+      const expandBottomRatio = expandBottom / objHeight;
+
+      // Calculate position as a multiple of dim (same pattern as default control)
+      // this.x is -0.5 for left, 0 for center, 0.5 for right
+      let xMultiplier = this.x;
+      let yMultiplier = this.y;
       if (this.x < 0) {
-        // Left side controls
-        posX = -expandedHalfWidth + centerOffsetX;
+        // Left side: extend further left
+        xMultiplier = this.x - expandLeftRatio;
       } else if (this.x > 0) {
-        // Right side controls
-        posX = expandedHalfWidth + centerOffsetX;
-      } else {
-        // Center (top/bottom only)
-        posX = centerOffsetX;
+        // Right side: extend further right
+        xMultiplier = this.x + expandRightRatio;
       }
       if (this.y < 0) {
-        // Top side controls
-        posY = -expandedHalfHeight + centerOffsetY;
+        // Top side: extend further up
+        yMultiplier = this.y - expandTopRatio;
       } else if (this.y > 0) {
-        // Bottom side controls
-        posY = expandedHalfHeight + centerOffsetY;
-      } else {
-        // Center (left/right only)
-        posY = centerOffsetY;
+        // Bottom side: extend further down
+        yMultiplier = this.y + expandBottomRatio;
       }
-      return new Point(posX, posY).transform(finalMatrix);
+
+      // Same formula as default positionHandler, just with adjusted multipliers
+      return new Point(xMultiplier * dim.x + this.offsetX, yMultiplier * dim.y + this.offsetY).transform(finalMatrix);
     }
 
     /**
@@ -9453,16 +9439,17 @@
     } = transform;
     const expansion = getExpansion(target);
 
-    // Use Fabric's getLocalPoint with center origin (returns scaled coordinates)
+    // Use Fabric's getLocalPoint with center origin
     const localPoint = getLocalPoint(transform, CENTER, CENTER, x, y);
     const scaleX = target.scaleX || 1;
-    const scaledHalfWidth = target.width * scaleX / 2;
+    // Use _getTransformedDimensions for consistency with scale handlers
+    const dim = target._getTransformedDimensions();
+    const scaledHalfWidth = dim.x / 2;
 
-    // Calculate expansion in scaled coordinates first
+    // Calculate expansion in scaled coordinates
     const scaledExpansion = Math.max(0, -scaledHalfWidth - localPoint.x);
 
-    // Store in UNSCALED coordinates (divide by scale)
-    // This ensures positionHandler can scale it back correctly
+    // Store in UNSCALED object coordinates (divide by scale)
     const newExpandLeft = scaledExpansion / scaleX;
     if (Math.abs(newExpandLeft - expansion.expandLeft) > 0.5) {
       var _target$canvas;
@@ -10396,12 +10383,15 @@
      * Draw the expansion preview area
      * Called during border rendering when in expand mode
      * @param ctx Canvas rendering context
-     * @param size Object dimensions (already includes scale and viewport zoom via _calculateCurrentDimensions)
-     * @param options Decomposed transform options (contains scaleX, scaleY from object transform only)
+     * @param size Object dimensions (already in correct coordinate space from drawBorders)
+     * @param options Decomposed transform options (contains scaleX, scaleY)
      * Note: expansion values are stored in local object coordinates
+     *
+     * Key insight: size is proportional to object dimensions.
+     * Express expansion as a proportion of object size, then scale by size.
+     * This ensures correct behavior with zoom and grouped objects.
      */
     drawExpandPreview(ctx, size, options) {
-      var _this$canvas6;
       if (!this.expandMode) return;
       const {
         expandLeft,
@@ -10410,21 +10400,20 @@
         expandBottom
       } = this.expansion;
 
-      // Expansion values are stored in UNSCALED object coordinates.
-      // size includes both object scale AND viewport zoom (via _calculateCurrentDimensions).
-      // options.scaleX/Y only contains object scale (from calcTransformMatrix, no viewport).
-      // We need to multiply by zoom to match size's coordinate space.
-      const zoom = ((_this$canvas6 = this.canvas) === null || _this$canvas6 === void 0 ? void 0 : _this$canvas6.getZoom()) || 1;
-      const scaleFactorX = ((options === null || options === void 0 ? void 0 : options.scaleX) || this.scaleX || 1) * zoom;
-      const scaleFactorY = ((options === null || options === void 0 ? void 0 : options.scaleY) || this.scaleY || 1) * zoom;
-
-      // Scale expansion values to screen coordinates (includes zoom)
-      const scaledExpandLeft = expandLeft * scaleFactorX;
-      const scaledExpandRight = expandRight * scaleFactorX;
-      const scaledExpandTop = expandTop * scaleFactorY;
-      const scaledExpandBottom = expandBottom * scaleFactorY;
-
-      // size already accounts for full transform, add scaled expansion
+      // Express expansion as proportions of object dimensions
+      // size already includes scale and zoom, so ratio * size gives correct scaling
+      const expandLeftRatio = expandLeft / (this.width || 1);
+      const expandRightRatio = expandRight / (this.width || 1);
+      const expandTopRatio = expandTop / (this.height || 1);
+      const expandBottomRatio = expandBottom / (this.height || 1);
+
+      // Scale expansion proportionally to size
+      const scaledExpandLeft = expandLeftRatio * size.x;
+      const scaledExpandRight = expandRightRatio * size.x;
+      const scaledExpandTop = expandTopRatio * size.y;
+      const scaledExpandBottom = expandBottomRatio * size.y;
+
+      // Calculate expanded dimensions
       const expandedWidth = size.x + scaledExpandLeft + scaledExpandRight;
       const expandedHeight = size.y + scaledExpandTop + scaledExpandBottom;
 
@@ -31808,11 +31797,8 @@
       // Draw edit mode overlay if in edit mode
       if (this.isEditMode && this._editModeClipPath) {
         this._renderEditModeOverlay(ctx, false);
-
-        // In expand mode, re-render the content image's controls ON TOP of the overlay
-        if (this._contentExpandMode && this._contentImage) {
-          this._contentImage._renderControls(ctx);
-        }
+        // Note: Controls are rendered by the canvas's normal rendering pipeline
+        // with proper viewport transforms - no manual _renderControls call needed
       }
     }