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

package/dist/index.js

@@ -360,7 +360,7 @@
   }
   const cache = new Cache();
 
-  var version = "7.0.0-beta1";
+  var version = "7.0.1-beta2";
 
   // use this syntax so babel plugin see this import here
   const VERSION = version;
@@ -17840,10 +17840,189 @@
   classRegistry.setClass(Line);
   classRegistry.setSVGClass(Line);
 
+  /**
+   * Calculate the distance between two points
+   */
+  function pointDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  }
+
+  /**
+   * Normalize a vector
+   */
+  function normalizeVector(vector) {
+    const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y);
+    if (length === 0) return {
+      x: 0,
+      y: 0
+    };
+    return {
+      x: vector.x / length,
+      y: vector.y / length
+    };
+  }
+
+  /**
+   * Get the maximum allowed radius for a corner based on adjacent edge lengths
+   */
+  function getMaxRadius(prevPoint, currentPoint, nextPoint) {
+    const dist1 = pointDistance(prevPoint, currentPoint);
+    const dist2 = pointDistance(currentPoint, nextPoint);
+    return Math.min(dist1, dist2) / 2;
+  }
+
+  /**
+   * Calculate rounded corner data for a single corner
+   */
+  function calculateRoundedCorner(prevPoint, currentPoint, nextPoint, radius) {
+    // Calculate edge vectors
+    const edge1 = {
+      x: currentPoint.x - prevPoint.x,
+      y: currentPoint.y - prevPoint.y
+    };
+    const edge2 = {
+      x: nextPoint.x - currentPoint.x,
+      y: nextPoint.y - currentPoint.y
+    };
+
+    // Normalize edge vectors
+    const norm1 = normalizeVector(edge1);
+    const norm2 = normalizeVector(edge2);
+
+    // Calculate the maximum allowed radius
+    const maxRadius = getMaxRadius(prevPoint, currentPoint, nextPoint);
+    const actualRadius = Math.min(radius, maxRadius);
+
+    // Calculate start and end points of the rounded corner
+    const startPoint = {
+      x: currentPoint.x - norm1.x * actualRadius,
+      y: currentPoint.y - norm1.y * actualRadius
+    };
+    const endPoint = {
+      x: currentPoint.x + norm2.x * actualRadius,
+      y: currentPoint.y + norm2.y * actualRadius
+    };
+
+    // Calculate control points for bezier curve
+    // Using the magic number kRect for optimal circular approximation
+    const controlOffset = actualRadius * kRect;
+    const cp1 = {
+      x: startPoint.x + norm1.x * controlOffset,
+      y: startPoint.y + norm1.y * controlOffset
+    };
+    const cp2 = {
+      x: endPoint.x - norm2.x * controlOffset,
+      y: endPoint.y - norm2.y * controlOffset
+    };
+    return {
+      corner: currentPoint,
+      start: startPoint,
+      end: endPoint,
+      cp1,
+      cp2,
+      actualRadius
+    };
+  }
+
+  /**
+   * Apply corner radius to a polygon defined by points
+   */
+  function applyCornerRadiusToPolygon(points, radius) {
+    let radiusAsPercentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (points.length < 3) {
+      throw new Error('Polygon must have at least 3 points');
+    }
+
+    // Calculate bounding box if radius is percentage-based
+    let actualRadius = radius;
+    if (radiusAsPercentage) {
+      const minX = Math.min(...points.map(p => p.x));
+      const maxX = Math.max(...points.map(p => p.x));
+      const minY = Math.min(...points.map(p => p.y));
+      const maxY = Math.max(...points.map(p => p.y));
+      const width = maxX - minX;
+      const height = maxY - minY;
+      const minDimension = Math.min(width, height);
+      actualRadius = radius / 100 * minDimension;
+    }
+    const roundedCorners = [];
+    for (let i = 0; i < points.length; i++) {
+      const prevIndex = (i - 1 + points.length) % points.length;
+      const nextIndex = (i + 1) % points.length;
+      const prevPoint = points[prevIndex];
+      const currentPoint = points[i];
+      const nextPoint = points[nextIndex];
+      const roundedCorner = calculateRoundedCorner(prevPoint, currentPoint, nextPoint, actualRadius);
+      roundedCorners.push(roundedCorner);
+    }
+    return roundedCorners;
+  }
+
+  /**
+   * Render a rounded polygon to a canvas context
+   */
+  function renderRoundedPolygon(ctx, roundedCorners) {
+    let closed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    if (roundedCorners.length === 0) return;
+    ctx.beginPath();
+
+    // Start at the first corner's start point
+    const firstCorner = roundedCorners[0];
+    ctx.moveTo(firstCorner.start.x, firstCorner.start.y);
+    for (let i = 0; i < roundedCorners.length; i++) {
+      const corner = roundedCorners[i];
+      const nextIndex = (i + 1) % roundedCorners.length;
+      const nextCorner = roundedCorners[nextIndex];
+
+      // Draw the rounded corner using bezier curve
+      ctx.bezierCurveTo(corner.cp1.x, corner.cp1.y, corner.cp2.x, corner.cp2.y, corner.end.x, corner.end.y);
+
+      // Draw line to next corner's start point (if not the last segment in open path)
+      if (i < roundedCorners.length - 1 || closed) {
+        ctx.lineTo(nextCorner.start.x, nextCorner.start.y);
+      }
+    }
+    if (closed) {
+      ctx.closePath();
+    }
+  }
+
+  /**
+   * Generate SVG path data for a rounded polygon
+   */
+  function generateRoundedPolygonPath(roundedCorners) {
+    let closed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (roundedCorners.length === 0) return '';
+    const pathData = [];
+    const firstCorner = roundedCorners[0];
+
+    // Move to first corner's start point
+    pathData.push(`M ${firstCorner.start.x} ${firstCorner.start.y}`);
+    for (let i = 0; i < roundedCorners.length; i++) {
+      const corner = roundedCorners[i];
+      const nextIndex = (i + 1) % roundedCorners.length;
+      const nextCorner = roundedCorners[nextIndex];
+
+      // Add bezier curve for the rounded corner
+      pathData.push(`C ${corner.cp1.x} ${corner.cp1.y} ${corner.cp2.x} ${corner.cp2.y} ${corner.end.x} ${corner.end.y}`);
+
+      // Add line to next corner's start point (if not the last segment in open path)
+      if (i < roundedCorners.length - 1 || closed) {
+        pathData.push(`L ${nextCorner.start.x} ${nextCorner.start.y}`);
+      }
+    }
+    if (closed) {
+      pathData.push('Z');
+    }
+    return pathData.join(' ');
+  }
+
   const triangleDefaultValues = {
     width: 100,
-    height: 100
+    height: 100,
+    cornerRadius: 0
   };
+  const TRIANGLE_PROPS = ['cornerRadius'];
   class Triangle extends FabricObject {
     static getDefaults() {
       return {
@@ -17862,34 +18041,90 @@
       this.setOptions(options);
     }
 
+    /**
+     * Get triangle points as an array of XY coordinates
+     * @private
+     */
+    _getTrianglePoints() {
+      const widthBy2 = this.width / 2;
+      const heightBy2 = this.height / 2;
+      return [{
+        x: -widthBy2,
+        y: heightBy2
+      },
+      // bottom left
+      {
+        x: 0,
+        y: -heightBy2
+      },
+      // top center
+      {
+        x: widthBy2,
+        y: heightBy2
+      } // bottom right
+      ];
+    }
+
     /**
      * @private
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _render(ctx) {
-      const widthBy2 = this.width / 2,
-        heightBy2 = this.height / 2;
-      ctx.beginPath();
-      ctx.moveTo(-widthBy2, heightBy2);
-      ctx.lineTo(0, -heightBy2);
-      ctx.lineTo(widthBy2, heightBy2);
-      ctx.closePath();
+      if (this.cornerRadius > 0) {
+        // Render rounded triangle
+        const points = this._getTrianglePoints();
+        const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+        renderRoundedPolygon(ctx, roundedCorners, true);
+      } else {
+        // Render sharp triangle (original implementation)
+        const widthBy2 = this.width / 2;
+        const heightBy2 = this.height / 2;
+        ctx.beginPath();
+        ctx.moveTo(-widthBy2, heightBy2);
+        ctx.lineTo(0, -heightBy2);
+        ctx.lineTo(widthBy2, heightBy2);
+        ctx.closePath();
+      }
       this._renderPaintInOrder(ctx);
     }
 
+    /**
+     * Returns object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} object representation of an instance
+     */
+    toObject() {
+      let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return super.toObject([...TRIANGLE_PROPS, ...propertiesToInclude]);
+    }
+
     /**
      * Returns svg representation of an instance
      * @return {Array} an array of strings with the specific svg representation
      * of the instance
      */
     _toSVG() {
-      const widthBy2 = this.width / 2,
-        heightBy2 = this.height / 2,
-        points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
-      return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+      if (this.cornerRadius > 0) {
+        // Generate rounded triangle as path
+        const points = this._getTrianglePoints();
+        const roundedCorners = applyCornerRadiusToPolygon(points, this.cornerRadius);
+        const pathData = generateRoundedPolygonPath(roundedCorners, true);
+        return ['<path ', 'COMMON_PARTS', `d="${pathData}" />`];
+      } else {
+        // Original sharp triangle implementation
+        const widthBy2 = this.width / 2;
+        const heightBy2 = this.height / 2;
+        const points = `${-widthBy2} ${heightBy2},0 ${-heightBy2},${widthBy2} ${heightBy2}`;
+        return ['<polygon ', 'COMMON_PARTS', 'points="', points, '" />'];
+      }
     }
   }
+  /**
+   * Corner radius for rounded triangle corners
+   * @type Number
+   */
   _defineProperty(Triangle, "type", 'Triangle');
+  _defineProperty(Triangle, "cacheProperties", [...cacheProperties, ...TRIANGLE_PROPS]);
   _defineProperty(Triangle, "ownDefaults", triangleDefaultValues);
   classRegistry.setClass(Triangle);
   classRegistry.setSVGClass(Triangle);
@@ -18054,7 +18289,8 @@
     /**
      * @deprecated transient option soon to be removed in favor of a different design
      */
-    exactBoundingBox: false
+    exactBoundingBox: false,
+    cornerRadius: 0
   };
   class Polyline extends FabricObject {
     static getDefaults() {
@@ -18268,7 +18504,7 @@
     toObject() {
       let propertiesToInclude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return {
-        ...super.toObject(propertiesToInclude),
+        ...super.toObject(['cornerRadius', ...propertiesToInclude]),
         points: this.points.map(_ref => {
           let {
             x,
@@ -18288,14 +18524,28 @@
      * 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.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
       }
-      return [`<${this.constructor.type.toLowerCase()} `, 'COMMON_PARTS', `points="${points.join('')}" />\n`];
     }
 
     /**
@@ -18311,13 +18561,24 @@
         // 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);
     }
 
@@ -18382,10 +18643,15 @@
    * @type Boolean
    * @default false
    */
+  /**
+   * Corner radius for rounded corners
+   * @type Number
+   * @default 0
+   */
   _defineProperty(Polyline, "ownDefaults", polylineDefaultValues);
   _defineProperty(Polyline, "type", 'Polyline');
   _defineProperty(Polyline, "layoutProperties", [SKEW_X, SKEW_Y, 'strokeLineCap', 'strokeLineJoin', 'strokeMiterLimit', 'strokeWidth', 'strokeUniform', 'points']);
-  _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points']);
+  _defineProperty(Polyline, "cacheProperties", [...cacheProperties, 'points', 'cornerRadius']);
   _defineProperty(Polyline, "ATTRIBUTE_NAMES", [...SHARED_ATTRIBUTES]);
   classRegistry.setClass(Polyline);
   classRegistry.setSVGClass(Polyline);
@@ -20195,6 +20461,7 @@
      */
     enlargeSpaces() {
       let diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces;
+      const isRtl = this.direction === 'rtl';
       for (let i = 0, len = this._textLines.length; i < len; i++) {
         if (this.textAlign !== JUSTIFY && (i === len - 1 || this.isEndOfWrapping(i))) {
           continue;
@@ -20205,15 +20472,44 @@
         if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) {
           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 (let j = 0; j < line.length; j++) {
+              if (this._reSpaceAndTab.test(line[j])) ;
+            }
+
+            // 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;
+                }
+              }
             }
           }
         }
@@ -20871,7 +21167,15 @@
       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) {
@@ -21107,9 +21411,21 @@
         direction = this.direction,
         isEndOfWrapping = this.isEndOfWrapping(lineIndex);
       let leftOffset = 0;
-      if (textAlign === JUSTIFY || textAlign === JUSTIFY_CENTER && !isEndOfWrapping || textAlign === JUSTIFY_RIGHT && !isEndOfWrapping || textAlign === JUSTIFY_LEFT && !isEndOfWrapping) {
-        return 0;
+
+      // 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;
+      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;
       }
@@ -21122,6 +21438,8 @@
       if (textAlign === JUSTIFY_RIGHT) {
         leftOffset = lineDiff;
       }
+
+      // Apply RTL adjustments for non-justify alignments
       if (direction === 'rtl') {
         if (textAlign === RIGHT || textAlign === JUSTIFY || textAlign === JUSTIFY_RIGHT) {
           leftOffset = 0;
@@ -22117,13 +22435,86 @@
       this.textarea.style.fontFamily = target.fontFamily || 'Arial';
       this.textarea.style.fontWeight = String(target.fontWeight || 'normal');
       this.textarea.style.fontStyle = target.fontStyle || 'normal';
-      this.textarea.style.textAlign = target.textAlign || 'left';
+      // Handle text alignment and justification
+      const textAlign = target.textAlign || 'left';
+      let cssTextAlign = textAlign;
+
+      // Detect text direction from content for proper justify handling
+      const autoDetectedDirection = this.firstStrongDir(this.textarea.value || '');
+
+      // DEBUG: Log alignment details
+      console.log('🔍 ALIGNMENT DEBUG:');
+      console.log('   Fabric textAlign:', textAlign);
+      console.log('   Fabric direction:', target.direction);
+      console.log('   Text content:', JSON.stringify(target.text));
+      console.log('   Detected direction:', autoDetectedDirection);
+
+      // Map fabric.js justify to CSS
+      if (textAlign.includes('justify')) {
+        // Try to match fabric.js justify behavior more precisely
+        try {
+          // For justify, we need to replicate fabric.js space expansion
+          // Use CSS justify but with specific settings to match fabric.js better
+          cssTextAlign = 'justify';
+
+          // Set text-align-last based on justify type and detected direction
+          // Smart justify: respect detected direction even when fabric alignment doesn't match
+          if (textAlign === 'justify') {
+            this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';
+          } else if (textAlign === 'justify-left') {
+            // If text is RTL but fabric says justify-left, override to justify-right for better UX
+            if (autoDetectedDirection === 'rtl') {
+              this.textarea.style.textAlignLast = 'right';
+              console.log('   → Overrode justify-left to justify-right for RTL text');
+            } else {
+              this.textarea.style.textAlignLast = 'left';
+            }
+          } else if (textAlign === 'justify-right') {
+            // If text is LTR but fabric says justify-right, override to justify-left for better UX  
+            if (autoDetectedDirection === 'ltr') {
+              this.textarea.style.textAlignLast = 'left';
+              console.log('   → Overrode justify-right to justify-left for LTR text');
+            } else {
+              this.textarea.style.textAlignLast = 'right';
+            }
+          } else if (textAlign === 'justify-center') {
+            this.textarea.style.textAlignLast = 'center';
+          }
+
+          // Enhanced justify settings for better fabric.js matching
+          this.textarea.style.textJustify = 'inter-word';
+          this.textarea.style.wordSpacing = 'normal';
+
+          // Additional CSS properties for better justify matching
+          this.textarea.style.textAlign = 'justify';
+          this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;
+
+          // Try to force better justify behavior
+          this.textarea.style.textJustifyTrim = 'none';
+          this.textarea.style.textAutospace = 'none';
+          console.log('   → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);
+        } catch (error) {
+          console.warn('   → Justify setup failed, falling back to standard alignment:', error);
+          cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');
+        }
+      } else {
+        this.textarea.style.textAlignLast = 'auto';
+        this.textarea.style.textJustify = 'auto';
+        this.textarea.style.wordSpacing = 'normal';
+        console.log('   → Applied standard alignment:', cssTextAlign);
+      }
+      this.textarea.style.textAlign = cssTextAlign;
       this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
       this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
-      this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+
+      // Use the already detected direction from above
+      const fabricDirection = target.direction;
+
+      // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense
+      this.textarea.style.direction = autoDetectedDirection || fabricDirection || 'ltr';
       this.textarea.style.fontVariant = 'normal';
       this.textarea.style.fontStretch = 'normal';
-      this.textarea.style.textRendering = 'optimizeLegibility';
+      this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas
       this.textarea.style.fontKerning = 'normal';
       this.textarea.style.fontFeatureSettings = 'normal';
       this.textarea.style.fontVariationSettings = 'normal';
@@ -22134,14 +22525,58 @@
       this.textarea.style.overflowWrap = 'break-word';
       this.textarea.style.whiteSpace = 'pre-wrap';
       this.textarea.style.hyphens = 'none';
-      this.textarea.style.webkitFontSmoothing = 'antialiased';
-      this.textarea.style.mozOsxFontSmoothing = 'grayscale';
 
-      // Debug: Compare textarea and canvas object bounding boxes
-      this.debugBoundingBoxComparison();
+      // DEBUG: Log final CSS properties
+      console.log('🎨 FINAL TEXTAREA CSS:');
+      console.log('   textAlign:', this.textarea.style.textAlign);
+      console.log('   textAlignLast:', this.textarea.style.textAlignLast);
+      console.log('   direction:', this.textarea.style.direction);
+      console.log('   unicodeBidi:', this.textarea.style.unicodeBidi);
+      console.log('   width:', this.textarea.style.width);
+      console.log('   textJustify:', this.textarea.style.textJustify);
+      console.log('   wordSpacing:', this.textarea.style.wordSpacing);
+      console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+
+      // If justify, log Fabric object dimensions for comparison
+      if (textAlign.includes('justify')) {
+        var _calcTextWidth, _ref;
+        console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+        console.log('   Fabric width:', target.width);
+        console.log('   Fabric calcTextWidth:', (_calcTextWidth = (_ref = target).calcTextWidth) === null || _calcTextWidth === void 0 ? void 0 : _calcTextWidth.call(_ref));
+        console.log('   Fabric textAlign:', target.textAlign);
+        console.log('   Text lines:', target.textLines);
+      }
+
+      // Debug font properties matching
+      console.log('🔤 FONT PROPERTIES COMPARISON:');
+      console.log('   Fabric fontFamily:', target.fontFamily);
+      console.log('   Fabric fontWeight:', target.fontWeight);
+      console.log('   Fabric fontStyle:', target.fontStyle);
+      console.log('   Fabric fontSize:', target.fontSize);
+      console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
+      console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
+      console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
+      console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+      console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
 
-      // Debug: Compare text wrapping behavior
-      this.debugTextWrapping();
+      // Enhanced font rendering to better match fabric.js canvas rendering
+      // Default to auto for more natural rendering
+      this.textarea.style.webkitFontSmoothing = 'auto';
+      this.textarea.style.mozOsxFontSmoothing = 'auto';
+      this.textarea.style.fontSmooth = 'auto';
+      this.textarea.style.textSizeAdjust = 'none';
+
+      // For bold fonts, use subpixel rendering to match canvas thickness better
+      const fontWeight = String(target.fontWeight || 'normal');
+      const isBold = fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 600;
+      if (isBold) {
+        this.textarea.style.webkitFontSmoothing = 'subpixel-antialiased';
+        this.textarea.style.mozOsxFontSmoothing = 'unset';
+        console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+      }
+      console.log('🎨 FONT SMOOTHING APPLIED:');
+      console.log('   webkitFontSmoothing:', this.textarea.style.webkitFontSmoothing);
+      console.log('   mozOsxFontSmoothing:', this.textarea.style.mozOsxFontSmoothing);
 
       // Initial bounds are set correctly by Fabric.js - don't force update here
     }
@@ -22376,6 +22811,23 @@
       // Handle commit/cancel after restoring visibility
       if (commit && !this.isComposing) {
         const finalText = this.textarea.value;
+
+        // Auto-detect text direction and update fabric object if needed
+        const detectedDirection = this.firstStrongDir(finalText);
+        const currentDirection = this.target.direction || 'ltr';
+        if (detectedDirection && detectedDirection !== currentDirection) {
+          console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
+          console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+
+          // Update the fabric object's direction
+          this.target.set('direction', detectedDirection);
+
+          // Force a re-render to apply the direction change
+          this.canvas.requestRenderAll();
+          console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+        } else {
+          console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+        }
         if (this.onCommit) {
           this.onCommit(finalText);
         }
@@ -25966,30 +26418,17 @@
       // Detect resize origin during resizing
       this.on('resizing', e => {
         // Check transform origin to determine which side is being resized
-        console.log('🔍 Resize event data:', e);
         if (e.transform) {
           const {
-            originX,
-            originY
+            originX
           } = e.transform;
-          console.log('🔍 Transform origins:', {
-            originX,
-            originY
-          });
           // originX tells us which side is the anchor - opposite side is being dragged
           resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-          console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
         } else if (e.originX) {
           const {
-            originX,
-            originY
+            originX
           } = e;
-          console.log('🔍 Event origins:', {
-            originX,
-            originY
-          });
           resizeOrigin = originX === 'right' ? 'left' : originX === 'left' ? 'right' : null;
-          console.log('🎯 Setting resizeOrigin to:', resizeOrigin);
         }
       });
 
@@ -25997,9 +26436,6 @@
       // Use 'modified' event which fires after user releases the mouse
       this.on('modified', () => {
         const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-        console.log('✅ Modified event fired - resize complete, triggering safety snap', {
-          resizeOrigin: currentResizeOrigin
-        });
         // Small delay to ensure text layout is updated
         setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
         resizeOrigin = null; // Reset after capturing
@@ -26009,7 +26445,6 @@
       (_this$canvas = this.canvas) === null || _this$canvas === void 0 || _this$canvas.on('object:modified', e => {
         if (e.target === this) {
           const currentResizeOrigin = resizeOrigin; // Capture the value before reset
-          console.log('✅ Canvas object:modified fired for this textbox');
           setTimeout(() => this.safetySnapWidth(currentResizeOrigin), 10);
           resizeOrigin = null; // Reset after capturing
         }
@@ -26024,38 +26459,17 @@
      * @param resizeOrigin - Which side was used for resizing ('left' or 'right')
      */
     safetySnapWidth(resizeOrigin) {
-      var _this$_textLines;
-      console.log('🔍 safetySnapWidth called', {
-        isWrapping: this.isWrapping,
-        hasTextLines: !!this._textLines,
-        lineCount: ((_this$_textLines = this._textLines) === null || _this$_textLines === void 0 ? void 0 : _this$_textLines.length) || 0,
-        currentWidth: this.width,
-        type: this.type,
-        text: this.text
-      });
-
       // For Textbox objects, we always want to check for clipping regardless of isWrapping flag
       if (!this._textLines || this.type.toLowerCase() !== 'textbox' || this._textLines.length === 0) {
-        var _this$_textLines2;
-        console.log('❌ Early return - missing requirements', {
-          hasTextLines: !!this._textLines,
-          typeMatch: this.type.toLowerCase() === 'textbox',
-          actualType: this.type,
-          hasLines: ((_this$_textLines2 = this._textLines) === null || _this$_textLines2 === void 0 ? void 0 : _this$_textLines2.length) > 0
-        });
         return;
       }
       const lineCount = this._textLines.length;
       if (lineCount === 0) return;
-
-      // Check all lines, not just the last one
-      let maxActualLineWidth = 0; // Actual measured width without buffers
       let maxRequiredWidth = 0; // Width including RTL buffer
 
       for (let i = 0; i < lineCount; i++) {
         const lineText = this._textLines[i].join(''); // Convert grapheme array to string
         const lineWidth = this.getLineWidth(i);
-        maxActualLineWidth = Math.max(maxActualLineWidth, lineWidth);
 
         // RTL detection - regex for Arabic, Hebrew, and other RTL characters
         const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
@@ -26075,11 +26489,6 @@
         var _this$canvas2;
         // Set width to exactly what's needed + minimal safety margin
         const newWidth = maxRequiredWidth + 1; // Add just 1px safety margin
-        console.log(`Safety snap: ${this.width.toFixed(0)}px -> ${newWidth.toFixed(0)}px`, {
-          maxActualLineWidth: maxActualLineWidth.toFixed(1),
-          maxRequiredWidth: maxRequiredWidth.toFixed(1),
-          difference: (newWidth - this.width).toFixed(1)
-        });
 
         // Store original position before width change
         const originalLeft = this.left;
@@ -26095,19 +26504,12 @@
         // Only compensate position when resizing from left handle
         // Right handle resize doesn't shift the text position
         if (resizeOrigin === 'left') {
-          console.log('🔧 Compensating for left-side resize', {
-            originalLeft,
-            widthIncrease,
-            newLeft: originalLeft - widthIncrease
-          });
           // When resizing from left, the expansion pushes text right
           // Compensate by moving the textbox left by the width increase
           this.set({
             'left': originalLeft - widthIncrease,
             'top': originalTop
           });
-        } else {
-          console.log('✅ Right-side resize, no compensation needed');
         }
         this.setCoords();