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

package/src/text/overlayEditor.ts

@@ -337,21 +337,101 @@ export class OverlayEditor {
 
     // Apply all other font and text styles to match Fabric
     const letterSpacingPx = ((target.charSpacing || 0) / 1000) * finalFontSize;
+    
+    // Special handling for text objects loaded from JSON - ensure they're properly initialized
+    if (target.dirty !== false && target.initDimensions) {
+      console.log('🔧 Ensuring text object is properly initialized before overlay editing');
+      // Force re-initialization if the text object seems to be in a dirty state
+      target.initDimensions();
+    }
 
     this.textarea.style.fontSize = `${finalFontSize}px`;
     this.textarea.style.lineHeight = String(fabricLineHeight);
     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 as any).textAlign || 'left';
+    // Handle text alignment and justification
+    const textAlign = (target as any).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 as any).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 as any).textJustify = 'inter-word';
+        (this.textarea.style as any).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 as any).textJustifyTrim = 'none';
+        (this.textarea.style as any).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 as any).textJustify = 'auto';
+      (this.textarea.style as any).wordSpacing = 'normal';
+      console.log('   → Applied standard alignment:', cssTextAlign);
+    }
+    
+    this.textarea.style.textAlign = cssTextAlign;
     this.textarea.style.color = target.fill?.toString() || '#000';
     this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
-    this.textarea.style.direction =
-      (target as any).direction ||
-      this.firstStrongDir(this.textarea.value || '');
+    
+    // Use the already detected direction from above
+    const fabricDirection = (target as any).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';
@@ -363,14 +443,61 @@ export class OverlayEditor {
     this.textarea.style.whiteSpace = 'pre-wrap';
     this.textarea.style.hyphens = 'none';
     
-    (this.textarea.style as any).webkitFontSmoothing = 'antialiased';
-    (this.textarea.style as any).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 as any).textJustify);
+    console.log('   wordSpacing:', (this.textarea.style as any).wordSpacing);
+    console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+    
+    // If justify, log Fabric object dimensions for comparison
+    if (textAlign.includes('justify')) {
+      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      console.log('   Fabric width:', (target as any).width);
+      console.log('   Fabric calcTextWidth:', (target as any).calcTextWidth?.());
+      console.log('   Fabric textAlign:', (target as any).textAlign);
+      console.log('   Text lines:', (target as any).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('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    
+    // Enhanced font rendering to better match fabric.js canvas rendering
+    // Default to auto for more natural rendering
+    (this.textarea.style as any).webkitFontSmoothing = 'auto';
+    (this.textarea.style as any).mozOsxFontSmoothing = 'auto';
+    (this.textarea.style as any).fontSmooth = 'auto';
+    (this.textarea.style as any).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 as any).webkitFontSmoothing = 'subpixel-antialiased';
+      (this.textarea.style as any).mozOsxFontSmoothing = 'unset';
+      console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+    }
+    
+    console.log('🎨 FONT SMOOTHING APPLIED:');
+    console.log('   webkitFontSmoothing:', (this.textarea.style as any).webkitFontSmoothing);
+    console.log('   mozOsxFontSmoothing:', (this.textarea.style as any).mozOsxFontSmoothing);
 
-    // Debug: Compare text wrapping behavior
-    this.debugTextWrapping();
 
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
@@ -615,6 +742,11 @@ export class OverlayEditor {
     this.target.setCoords();
     this.applyOverlayStyle();
 
+    // Fix character mapping issues after JSON loading for browser-wrapped fonts
+    if ((this.target as any)._fixCharacterMappingAfterJsonLoad) {
+      (this.target as any)._fixCharacterMappingAfterJsonLoad();
+    }
+
     this.textarea.focus();
 
     this.textarea.setSelectionRange(
@@ -664,6 +796,26 @@ export 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 as any).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 as any).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);
       }

package/src/util/misc/cornerRadius.spec.ts

@@ -0,0 +1,141 @@
+import {
+  pointDistance,
+  normalizeVector,
+  angleBetweenVectors,
+  getMaxRadius,
+  calculateRoundedCorner,
+  applyCornerRadiusToPolygon,
+  generateRoundedPolygonPath,
+} from './cornerRadius';
+
+describe('cornerRadius utilities', () => {
+  describe('pointDistance', () => {
+    it('should calculate distance between two points correctly', () => {
+      expect(pointDistance({ x: 0, y: 0 }, { x: 3, y: 4 })).toBe(5);
+      expect(pointDistance({ x: 1, y: 1 }, { x: 1, y: 1 })).toBe(0);
+      expect(pointDistance({ x: 0, y: 0 }, { x: 1, y: 0 })).toBe(1);
+    });
+  });
+
+  describe('normalizeVector', () => {
+    it('should normalize vectors correctly', () => {
+      const result = normalizeVector({ x: 3, y: 4 });
+      expect(result.x).toBeCloseTo(0.6);
+      expect(result.y).toBeCloseTo(0.8);
+    });
+
+    it('should handle zero vector', () => {
+      const result = normalizeVector({ x: 0, y: 0 });
+      expect(result).toEqual({ x: 0, y: 0 });
+    });
+  });
+
+  describe('getMaxRadius', () => {
+    it('should return half of the shortest adjacent edge', () => {
+      const prevPoint = { x: 0, y: 0 };
+      const currentPoint = { x: 10, y: 0 };
+      const nextPoint = { x: 10, y: 5 };
+      
+      expect(getMaxRadius(prevPoint, currentPoint, nextPoint)).toBe(2.5);
+    });
+  });
+
+  describe('calculateRoundedCorner', () => {
+    it('should calculate rounded corner data correctly', () => {
+      const prevPoint = { x: 0, y: 0 };
+      const currentPoint = { x: 10, y: 0 };
+      const nextPoint = { x: 10, y: 10 };
+      const radius = 2;
+
+      const result = calculateRoundedCorner(prevPoint, currentPoint, nextPoint, radius);
+      
+      expect(result.corner).toEqual(currentPoint);
+      expect(result.actualRadius).toBe(radius);
+      expect(result.start.x).toBeCloseTo(8);
+      expect(result.start.y).toBeCloseTo(0);
+      expect(result.end.x).toBeCloseTo(10);
+      expect(result.end.y).toBeCloseTo(2);
+    });
+
+    it('should constrain radius to maximum allowed', () => {
+      const prevPoint = { x: 0, y: 0 };
+      const currentPoint = { x: 2, y: 0 };
+      const nextPoint = { x: 2, y: 2 };
+      const radius = 5; // Request larger radius than possible
+
+      const result = calculateRoundedCorner(prevPoint, currentPoint, nextPoint, radius);
+      
+      expect(result.actualRadius).toBe(1); // Should be constrained to 1
+    });
+  });
+
+  describe('applyCornerRadiusToPolygon', () => {
+    it('should apply corner radius to a simple triangle', () => {
+      const points = [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 },
+        { x: 5, y: 10 }
+      ];
+      const radius = 2;
+
+      const result = applyCornerRadiusToPolygon(points, radius);
+      
+      expect(result).toHaveLength(3);
+      expect(result[0].actualRadius).toBeCloseTo(2);
+      expect(result[1].actualRadius).toBeCloseTo(2);
+      expect(result[2].actualRadius).toBeCloseTo(2);
+    });
+
+    it('should handle percentage-based radius', () => {
+      const points = [
+        { x: 0, y: 0 },
+        { x: 100, y: 0 },
+        { x: 100, y: 100 },
+        { x: 0, y: 100 }
+      ];
+      const radius = 10; // 10%
+
+      const result = applyCornerRadiusToPolygon(points, radius, true);
+      
+      expect(result).toHaveLength(4);
+      expect(result[0].actualRadius).toBeCloseTo(10); // 10% of 100px = 10px
+    });
+
+    it('should throw error for polygons with less than 3 points', () => {
+      expect(() => {
+        applyCornerRadiusToPolygon([{ x: 0, y: 0 }, { x: 1, y: 1 }], 5);
+      }).toThrow('Polygon must have at least 3 points');
+    });
+  });
+
+  describe('generateRoundedPolygonPath', () => {
+    it('should generate valid SVG path data', () => {
+      const points = [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 },
+        { x: 5, y: 10 }
+      ];
+      const roundedCorners = applyCornerRadiusToPolygon(points, 2);
+      
+      const pathData = generateRoundedPolygonPath(roundedCorners, true);
+      
+      expect(pathData).toContain('M '); // Should start with move command
+      expect(pathData).toContain('C '); // Should contain bezier curve commands  
+      expect(pathData).toContain('L '); // Should contain line commands
+      expect(pathData).toContain('Z');  // Should end with close command for closed path
+    });
+
+    it('should generate open path when closed=false', () => {
+      const points = [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 },
+        { x: 5, y: 10 }
+      ];
+      const roundedCorners = applyCornerRadiusToPolygon(points, 2);
+      
+      const pathData = generateRoundedPolygonPath(roundedCorners, false);
+      
+      expect(pathData).not.toContain('Z'); // Should not end with close command
+    });
+  });
+});

package/src/util/misc/cornerRadius.ts

@@ -0,0 +1,269 @@
+import type { XY } from '../../Point';
+import { Point } from '../../Point';
+import { kRect } from '../../constants';
+
+export interface CornerRadiusOptions {
+  /**
+   * Corner radius value
+   */
+  radius: number;
+  /**
+   * Whether to apply radius as percentage of the smallest dimension
+   */
+  radiusAsPercentage?: boolean;
+}
+
+export interface RoundedCornerPoint {
+  /**
+   * Original corner point
+   */
+  corner: XY;
+  /**
+   * Start point of the rounded corner arc
+   */
+  start: XY;
+  /**
+   * End point of the rounded corner arc
+   */
+  end: XY;
+  /**
+   * First control point for bezier curve
+   */
+  cp1: XY;
+  /**
+   * Second control point for bezier curve
+   */
+  cp2: XY;
+  /**
+   * Actual radius used (may be different from requested if constrained)
+   */
+  actualRadius: number;
+}
+
+/**
+ * Calculate the distance between two points
+ */
+export function pointDistance(p1: XY, p2: XY): number {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+
+/**
+ * Normalize a vector
+ */
+export function normalizeVector(vector: XY): XY {
+  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 };
+}
+
+/**
+ * Calculate the angle between two vectors
+ */
+export function angleBetweenVectors(v1: XY, v2: XY): number {
+  const dot = v1.x * v2.x + v1.y * v2.y;
+  const det = v1.x * v2.y - v1.y * v2.x;
+  return Math.atan2(det, dot);
+}
+
+/**
+ * Get the maximum allowed radius for a corner based on adjacent edge lengths
+ */
+export function getMaxRadius(
+  prevPoint: XY,
+  currentPoint: XY,
+  nextPoint: XY,
+): number {
+  const dist1 = pointDistance(prevPoint, currentPoint);
+  const dist2 = pointDistance(currentPoint, nextPoint);
+  return Math.min(dist1, dist2) / 2;
+}
+
+/**
+ * Calculate rounded corner data for a single corner
+ */
+export function calculateRoundedCorner(
+  prevPoint: XY,
+  currentPoint: XY,
+  nextPoint: XY,
+  radius: number,
+): RoundedCornerPoint {
+  // 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
+ */
+export function applyCornerRadiusToPolygon(
+  points: XY[],
+  radius: number,
+  radiusAsPercentage = false,
+): RoundedCornerPoint[] {
+  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: RoundedCornerPoint[] = [];
+
+  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
+ */
+export function renderRoundedPolygon(
+  ctx: CanvasRenderingContext2D,
+  roundedCorners: RoundedCornerPoint[],
+  closed = 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
+ */
+export function generateRoundedPolygonPath(
+  roundedCorners: RoundedCornerPoint[],
+  closed = true,
+): string {
+  if (roundedCorners.length === 0) return '';
+
+  const pathData: string[] = [];
+  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(' ');
+}