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

package/dist/index.node.cjs

@@ -412,7 +412,7 @@ class Cache {
 }
 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;
@@ -17892,10 +17892,189 @@ _defineProperty(Line, "ATTRIBUTE_NAMES", SHARED_ATTRIBUTES.concat(coordProps));
 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 {
@@ -17914,34 +18093,90 @@ class Triangle extends FabricObject {
     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);
@@ -18106,7 +18341,8 @@ const polylineDefaultValues = {
   /**
    * @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() {
@@ -18320,7 +18556,7 @@ class Polyline extends FabricObject {
   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,
@@ -18340,14 +18576,28 @@ class Polyline extends FabricObject {
    * 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`];
   }
 
   /**
@@ -18363,13 +18613,24 @@ class Polyline extends FabricObject {
       // 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);
   }
 
@@ -18434,10 +18695,15 @@ class Polyline extends FabricObject {
  * @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);
@@ -20247,6 +20513,7 @@ class FabricText extends StyledText {
    */
   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;
@@ -20257,15 +20524,44 @@ class FabricText extends StyledText {
       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;
+              }
+            }
           }
         }
       }
@@ -20923,7 +21219,15 @@ class FabricText extends StyledText {
     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) {
@@ -21159,9 +21463,21 @@ class FabricText extends StyledText {
       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;
     }
@@ -21174,6 +21490,8 @@ class FabricText extends StyledText {
     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;
@@ -22169,13 +22487,86 @@ class OverlayEditor {
     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';
@@ -22186,14 +22577,58 @@ class OverlayEditor {
     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
   }
@@ -22428,6 +22863,23 @@ class OverlayEditor {
     // 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);
       }
@@ -26018,30 +26470,17 @@ class Textbox extends IText {
     // 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);
       }
     });
 
@@ -26049,9 +26488,6 @@ class Textbox extends IText {
     // 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
@@ -26061,7 +26497,6 @@ class Textbox extends IText {
     (_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
       }
@@ -26076,38 +26511,17 @@ class Textbox extends IText {
    * @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]/;
@@ -26127,11 +26541,6 @@ class Textbox extends IText {
       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;
@@ -26147,19 +26556,12 @@ class Textbox extends IText {
       // 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();