@nasser-sw/fabric 7.0.1-beta1 → 7.0.1-beta3

package/package.json

@@ -1,164 +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-beta1",
-  "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"
-  }
-}
+{
+  "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-beta3",
+  "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/src/shapes/Polyline.ts

@@ -25,16 +25,23 @@ import {
   TOP,
 } from '../constants';
 import type { CSSRules } from '../parser/typedefs';
+import {
+  applyCornerRadiusToPolygon,
+  renderRoundedPolygon,
+  generateRoundedPolygonPath,
+} from '../util/misc/cornerRadius';
 
 export const polylineDefaultValues: Partial<TClassProperties<Polyline>> = {
   /**
    * @deprecated transient option soon to be removed in favor of a different design
    */
   exactBoundingBox: false,
+  cornerRadius: 0,
 };
 
 export interface SerializedPolylineProps extends SerializedObjectProps {
   points: XY[];
+  cornerRadius: number;
 }
 
 export class Polyline<
@@ -59,6 +66,13 @@ export class Polyline<
    */
   declare exactBoundingBox: boolean;
 
+  /**
+   * Corner radius for rounded corners
+   * @type Number
+   * @default 0
+   */
+  declare cornerRadius: number;
+
   declare private initialized: true | undefined;
 
   static ownDefaults = polylineDefaultValues;
@@ -91,7 +105,7 @@ export class Polyline<
 
   declare strokeOffset: Point;
 
-  static cacheProperties = [...cacheProperties, 'points'];
+  static cacheProperties = [...cacheProperties, 'points', 'cornerRadius'];
 
   strokeDiff: Point;
 
@@ -312,7 +326,7 @@ export class Polyline<
     K extends keyof T = never,
   >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
     return {
-      ...super.toObject(propertiesToInclude),
+      ...super.toObject(['cornerRadius', ...propertiesToInclude]),
       points: this.points.map(({ x, y }) => ({ x, y })),
     };
   }
@@ -323,28 +337,42 @@ export class Polyline<
    * of the instance
    */
   _toSVG() {
-    const points = [],
-      diffX = this.pathOffset.x,
-      diffY = this.pathOffset.y,
-      NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
-
-    for (let i = 0, len = this.points.length; i < len; i++) {
-      points.push(
-        toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS),
-        ',',
-        toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS),
-        ' ',
-      );
+    if (this.cornerRadius > 0 && this.points.length >= 3) {
+      // Generate rounded polygon/polyline as path
+      const diffX = this.pathOffset.x;
+      const diffY = this.pathOffset.y;
+      const adjustedPoints = this.points.map(point => ({
+        x: point.x - diffX,
+        y: point.y - diffY,
+      }));
+      const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+      const pathData = generateRoundedPolygonPath(roundedCorners, !this.isOpen());
+      return ['<path ', 'COMMON_PARTS', `d="${pathData}" />\n`];
+    } else {
+      // Original sharp corners implementation
+      const points = [];
+      const diffX = this.pathOffset.x;
+      const diffY = this.pathOffset.y;
+      const NUM_FRACTION_DIGITS = config.NUM_FRACTION_DIGITS;
+
+      for (let i = 0, len = this.points.length; i < len; i++) {
+        points.push(
+          toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS),
+          ',',
+          toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS),
+          ' ',
+        );
+      }
+      return [
+        `<${
+          (this.constructor as typeof Polyline).type.toLowerCase() as
+            | 'polyline'
+            | 'polygon'
+        } `,
+        'COMMON_PARTS',
+        `points="${points.join('')}" />\n`,
+      ];
     }
-    return [
-      `<${
-        (this.constructor as typeof Polyline).type.toLowerCase() as
-          | 'polyline'
-          | 'polygon'
-      } `,
-      'COMMON_PARTS',
-      `points="${points.join('')}" />\n`,
-    ];
   }
 
   /**
@@ -361,13 +389,26 @@ export class Polyline<
       // NaN comes from parseFloat of a empty string in parser
       return;
     }
-    ctx.beginPath();
-    ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
-    for (let i = 0; i < len; i++) {
-      const point = this.points[i];
-      ctx.lineTo(point.x - x, point.y - y);
+
+    if (this.cornerRadius > 0 && len >= 3) {
+      // Render with rounded corners
+      const adjustedPoints = this.points.map(point => ({
+        x: point.x - x,
+        y: point.y - y,
+      }));
+      const roundedCorners = applyCornerRadiusToPolygon(adjustedPoints, this.cornerRadius);
+      renderRoundedPolygon(ctx, roundedCorners, !this.isOpen());
+    } else {
+      // Original sharp corners implementation
+      ctx.beginPath();
+      ctx.moveTo(this.points[0].x - x, this.points[0].y - y);
+      for (let i = 0; i < len; i++) {
+        const point = this.points[i];
+        ctx.lineTo(point.x - x, point.y - y);
+      }
+      !this.isOpen() && ctx.closePath();
     }
-    !this.isOpen() && ctx.closePath();
+
     this._renderPaintInOrder(ctx);
   }
 

package/src/shapes/Text/Text.ts

@@ -593,6 +593,8 @@ export class FabricText<
       line,
       charBound,
       spaces;
+    const isRtl = this.direction === 'rtl';
+    
     for (let i = 0, len = this._textLines.length; i < len; i++) {
       if (
         this.textAlign !== JUSTIFY &&
@@ -609,15 +611,56 @@ export class FabricText<
       ) {
         numberOfSpaces = spaces.length;
         diffSpace = (this.width - currentLineWidth) / numberOfSpaces;
-        for (let j = 0; j <= line.length; j++) {
-          charBound = this.__charBounds[i][j];
-          if (this._reSpaceAndTab.test(line[j])) {
-            charBound.width += diffSpace;
-            charBound.kernedWidth += diffSpace;
-            charBound.left += accumulatedSpace;
-            accumulatedSpace += diffSpace;
-          } else {
-            charBound.left += accumulatedSpace;
+        
+        if (isRtl) {
+          // For RTL text, we need to redistribute spaces while maintaining correct visual order
+          // The key insight is that RTL text is stored in logical order but displayed in visual order
+          // We need to adjust bounds to account for the visual positioning
+          
+          // First, collect all space positions
+          const spaceIndices = [];
+          for (let j = 0; j < line.length; j++) {
+            if (this._reSpaceAndTab.test(line[j])) {
+              spaceIndices.push(j);
+            }
+          }
+          
+          // Calculate total expansion
+          const totalExpansion = diffSpace * numberOfSpaces;
+          
+          // For RTL, we need to work backwards through the visual positions
+          // but still update logical positions correctly
+          let spaceCount = 0;
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                charBound.kernedWidth += diffSpace;
+                spaceCount++;
+              }
+              
+              // For RTL, shift all characters to the right by the total expansion
+              // minus the expansion that comes after this character
+              const remainingSpaces = numberOfSpaces - spaceCount;
+              const shiftAmount = remainingSpaces * diffSpace;
+              charBound.left += shiftAmount;
+            }
+          }
+        } else {
+          // LTR processing (original logic)
+          for (let j = 0; j <= line.length; j++) {
+            charBound = this.__charBounds[i][j];
+            if (charBound) {
+              if (this._reSpaceAndTab.test(line[j])) {
+                charBound.width += diffSpace;
+                charBound.kernedWidth += diffSpace;
+                charBound.left += accumulatedSpace;
+                accumulatedSpace += diffSpace;
+              } else {
+                charBound.left += accumulatedSpace;
+              }
+            }
           }
         }
       }
@@ -1376,7 +1419,15 @@ export class FabricText<
     if (currentDirection !== this.direction) {
       ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl');
       ctx.direction = isLtr ? 'ltr' : 'rtl';
-      ctx.textAlign = isLtr ? LEFT : RIGHT;
+      
+      // For justify alignments, we need to set the correct canvas text alignment
+      // This is crucial for RTL text to render in the correct order
+      if (isJustify) {
+        // Justify uses LEFT alignment as a base, letting the character positioning handle justification
+        ctx.textAlign = LEFT;
+      } else {
+        ctx.textAlign = isLtr ? LEFT : RIGHT;
+      }
     }
     top -= (lineHeight * this._fontSizeFraction) / this.lineHeight;
     if (shortCut) {
@@ -1665,14 +1716,26 @@ export class FabricText<
       direction = this.direction,
       isEndOfWrapping = this.isEndOfWrapping(lineIndex);
     let leftOffset = 0;
-    if (
+    
+    // Handle justify alignments (excluding last lines and wrapped line ends)
+    const isJustifyLine = 
       textAlign === JUSTIFY ||
       (textAlign === JUSTIFY_CENTER && !isEndOfWrapping) ||
       (textAlign === JUSTIFY_RIGHT && !isEndOfWrapping) ||
-      (textAlign === JUSTIFY_LEFT && !isEndOfWrapping)
-    ) {
-      return 0;
+      (textAlign === JUSTIFY_LEFT && !isEndOfWrapping);
+    
+    if (isJustifyLine) {
+      // Justify lines should start at the left edge for LTR and right edge for RTL
+      // The space distribution is handled by enlargeSpaces()
+      if (direction === 'rtl') {
+        // For RTL justify, we need to account for the line being right-aligned
+        return 0;
+      } else {
+        return 0;
+      }
     }
+    
+    // Handle non-justify alignments
     if (textAlign === CENTER) {
       leftOffset = lineDiff / 2;
     }
@@ -1685,6 +1748,8 @@ export class FabricText<
     if (textAlign === JUSTIFY_RIGHT) {
       leftOffset = lineDiff;
     }
+    
+    // Apply RTL adjustments for non-justify alignments
     if (direction === 'rtl') {
       if (
         textAlign === RIGHT ||

package/src/shapes/Textbox.ts

@@ -2,7 +2,7 @@ import type { TClassProperties, TOptions } from '../typedefs';
 import { IText } from './IText/IText';
 import { classRegistry } from '../ClassRegistry';
 import { createTextboxDefaultControls } from '../controls/commonControls';
-import { JUSTIFY } from './Text/constants';
+import { JUSTIFY, JUSTIFY_CENTER } from './Text/constants';
 import type { TextStyleDeclaration } from './Text/StyledText';
 import type { SerializedITextProps, ITextProps } from './IText/IText';
 import type { ITextEvents } from './IText/ITextBehavior';