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

package/src/shapes/Triangle.spec.ts

@@ -0,0 +1,76 @@
+import { Triangle } from './Triangle';
+
+describe('Triangle with Corner Radius', () => {
+  describe('constructor', () => {
+    it('should create triangle with default cornerRadius of 0', () => {
+      const triangle = new Triangle();
+      expect(triangle.cornerRadius).toBe(0);
+    });
+
+    it('should create triangle with specified cornerRadius', () => {
+      const triangle = new Triangle({ cornerRadius: 10 });
+      expect(triangle.cornerRadius).toBe(10);
+    });
+  });
+
+  describe('rendering', () => {
+    let canvas: HTMLCanvasElement;
+    let ctx: CanvasRenderingContext2D;
+
+    beforeEach(() => {
+      canvas = document.createElement('canvas');
+      canvas.width = 200;
+      canvas.height = 200;
+      ctx = canvas.getContext('2d')!;
+    });
+
+    it('should render sharp triangle when cornerRadius is 0', () => {
+      const triangle = new Triangle({ width: 100, height: 100, cornerRadius: 0 });
+      const spy = jest.spyOn(ctx, 'moveTo');
+      const lineSpy = jest.spyOn(ctx, 'lineTo');
+      const bezierSpy = jest.spyOn(ctx, 'bezierCurveTo');
+
+      triangle._render(ctx);
+
+      expect(spy).toHaveBeenCalled();
+      expect(lineSpy).toHaveBeenCalled();
+      expect(bezierSpy).not.toHaveBeenCalled(); // No curves for sharp corners
+    });
+
+    it('should render rounded triangle when cornerRadius > 0', () => {
+      const triangle = new Triangle({ width: 100, height: 100, cornerRadius: 10 });
+      const bezierSpy = jest.spyOn(ctx, 'bezierCurveTo');
+
+      triangle._render(ctx);
+
+      expect(bezierSpy).toHaveBeenCalled(); // Should use curves for rounded corners
+    });
+  });
+
+  describe('toObject', () => {
+    it('should include cornerRadius in serialized object', () => {
+      const triangle = new Triangle({ cornerRadius: 15 });
+      const obj = triangle.toObject();
+      
+      expect(obj.cornerRadius).toBe(15);
+    });
+  });
+
+  describe('_toSVG', () => {
+    it('should generate polygon SVG for sharp triangle', () => {
+      const triangle = new Triangle({ width: 100, height: 100, cornerRadius: 0 });
+      const svg = triangle._toSVG();
+      
+      expect(svg.join('')).toContain('<polygon');
+      expect(svg.join('')).toContain('points=');
+    });
+
+    it('should generate path SVG for rounded triangle', () => {
+      const triangle = new Triangle({ width: 100, height: 100, cornerRadius: 10 });
+      const svg = triangle._toSVG();
+      
+      expect(svg.join('')).toContain('<path');
+      expect(svg.join('')).toContain('d=');
+    });
+  });
+});

package/src/shapes/Triangle.ts

@@ -1,24 +1,50 @@
 import { classRegistry } from '../ClassRegistry';
-import { FabricObject } from './Object/FabricObject';
+import { FabricObject, cacheProperties } from './Object/FabricObject';
 import type { FabricObjectProps, SerializedObjectProps } from './Object/types';
 import type { TClassProperties, TOptions } from '../typedefs';
 import type { ObjectEvents } from '../EventTypeDefs';
+import {
+  applyCornerRadiusToPolygon,
+  renderRoundedPolygon,
+  generateRoundedPolygonPath,
+} from '../util/misc/cornerRadius';
 
 export const triangleDefaultValues: Partial<TClassProperties<Triangle>> = {
   width: 100,
   height: 100,
+  cornerRadius: 0,
 };
 
+interface UniqueTriangleProps {
+  cornerRadius: number;
+}
+
+export interface SerializedTriangleProps
+  extends SerializedObjectProps,
+    UniqueTriangleProps {}
+
+export interface TriangleProps extends FabricObjectProps, UniqueTriangleProps {}
+
+const TRIANGLE_PROPS = ['cornerRadius'] as const;
+
 export class Triangle<
-    Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,
-    SProps extends SerializedObjectProps = SerializedObjectProps,
+    Props extends TOptions<TriangleProps> = Partial<TriangleProps>,
+    SProps extends SerializedTriangleProps = SerializedTriangleProps,
     EventSpec extends ObjectEvents = ObjectEvents,
   >
   extends FabricObject<Props, SProps, EventSpec>
-  implements FabricObjectProps
+  implements TriangleProps
 {
+  /**
+   * Corner radius for rounded triangle corners
+   * @type Number
+   */
+  declare cornerRadius: number;
+
   static type = 'Triangle';
 
+  static cacheProperties = [...cacheProperties, ...TRIANGLE_PROPS];
+
   static ownDefaults = triangleDefaultValues;
 
   static getDefaults(): Record<string, any> {
@@ -35,33 +61,77 @@ export class Triangle<
     this.setOptions(options);
   }
 
+  /**
+   * Get triangle points as an array of XY coordinates
+   * @private
+   */
+  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: CanvasRenderingContext2D) {
-    const widthBy2 = this.width / 2,
-      heightBy2 = this.height / 2;
+    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();
+      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<
+    T extends Omit<Props & TClassProperties<this>, keyof SProps>,
+    K extends keyof T = never,
+  >(propertiesToInclude: K[] = []): Pick<T, K> & SProps {
+    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, '" />'];
+    }
   }
 }
 

package/src/text/overlayEditor.ts

@@ -343,15 +343,88 @@ export 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 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 +436,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
   }
@@ -664,6 +784,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
+    });
+  });
+});