@umituz/web-canvas 1.0.1 → 1.0.3

package/src/infrastructure/renderers/CanvasRenderer.ts

@@ -13,9 +13,11 @@ import { DEFAULT_CANVAS_CONFIG } from '../../domain/config/CanvasConfig';
 
 export class CanvasRenderer {
   private config: typeof DEFAULT_CANVAS_CONFIG;
+  private imageCache: Map<string, HTMLImageElement>;
 
   constructor(config = DEFAULT_CANVAS_CONFIG) {
     this.config = { ...DEFAULT_CANVAS_CONFIG, ...config };
+    this.imageCache = new Map();
   }
 
   /**
@@ -164,18 +166,43 @@ export class CanvasRenderer {
   }
 
   /**
-   * Load image from URL
+   * Load image from URL with caching
    */
   private loadImage(url: string): Promise<HTMLImageElement> {
+    // Check cache first
+    if (this.imageCache.has(url)) {
+      return Promise.resolve(this.imageCache.get(url)!);
+    }
+
     return new Promise((resolve, reject) => {
       const img = new Image();
-      img.crossOrigin = this.config.useCORS ? 'anonymous' : (undefined as any);
-      img.onload = () => resolve(img);
+      if (this.config.useCORS) {
+        img.crossOrigin = 'anonymous';
+      }
+      img.onload = () => {
+        // Cache the loaded image
+        this.imageCache.set(url, img);
+        resolve(img);
+      };
       img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
       img.src = url;
     });
   }
 
+  /**
+   * Clear image cache to free memory
+   */
+  public clearImageCache(): void {
+    this.imageCache.clear();
+  }
+
+  /**
+   * Get cache size for monitoring
+   */
+  public getCacheSize(): number {
+    return this.imageCache.size;
+  }
+
   /**
    * Create gradient
    */

package/src/infrastructure/renderers/PatternRenderer.ts

@@ -7,6 +7,9 @@ import type { CanvasDimensions } from '../../domain/types/canvas.types';
 import type { BackgroundPattern } from '../../domain/types/screenshot.types';
 
 export class PatternRenderer {
+  private patternCanvasCache: Map<string, HTMLCanvasElement> = new Map();
+  private readonly MAX_CACHE_SIZE = 10;
+
   /**
    * Render pattern on canvas
    */
@@ -16,6 +19,8 @@ export class PatternRenderer {
     dimensions: CanvasDimensions,
     color: string = '#000000'
   ): void {
+    if (pattern === 'none') return;
+
     ctx.save();
     ctx.globalAlpha = 0.1;
 
@@ -35,17 +40,20 @@ export class PatternRenderer {
       case 'checkers':
         this.renderCheckerPattern(ctx, dimensions, color);
         break;
-      case 'none':
-      default:
-        // Do nothing
-        break;
     }
 
     ctx.restore();
   }
 
   /**
-   * Render dot pattern
+   * Clear pattern cache to free memory
+   */
+  public clearCache(): void {
+    this.patternCanvasCache.clear();
+  }
+
+  /**
+   * Render dot pattern - optimized with batch rendering
    */
   private renderDotPattern(
     ctx: CanvasRenderingContext2D,
@@ -54,18 +62,21 @@ export class PatternRenderer {
   ): void {
     ctx.fillStyle = color;
     const spacing = 30;
+    const radius = 2;
 
+    // Batch rendering for better performance
+    ctx.beginPath();
     for (let x = spacing; x < dimensions.width; x += spacing) {
       for (let y = spacing; y < dimensions.height; y += spacing) {
-        ctx.beginPath();
-        ctx.arc(x, y, 2, 0, Math.PI * 2);
-        ctx.fill();
+        ctx.moveTo(x + radius, y);
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
       }
     }
+    ctx.fill();
   }
 
   /**
-   * Render grid pattern
+   * Render grid pattern - optimized with single path
    */
   private renderGridPattern(
     ctx: CanvasRenderingContext2D,
@@ -76,23 +87,25 @@ export class PatternRenderer {
     ctx.lineWidth = 1;
     const spacing = 30;
 
+    ctx.beginPath();
+
+    // Vertical lines
     for (let x = 0; x <= dimensions.width; x += spacing) {
-      ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, dimensions.height);
-      ctx.stroke();
     }
 
+    // Horizontal lines
     for (let y = 0; y <= dimensions.height; y += spacing) {
-      ctx.beginPath();
       ctx.moveTo(0, y);
       ctx.lineTo(dimensions.width, y);
-      ctx.stroke();
     }
+
+    ctx.stroke();
   }
 
   /**
-   * Render line pattern
+   * Render line pattern - optimized with single path
    */
   private renderLinePattern(
     ctx: CanvasRenderingContext2D,
@@ -103,16 +116,19 @@ export class PatternRenderer {
     ctx.lineWidth = 2;
     const spacing = 20;
 
+    ctx.beginPath();
+
+    // Draw all lines in a single path
     for (let y = spacing; y < dimensions.height; y += spacing) {
-      ctx.beginPath();
       ctx.moveTo(0, y);
       ctx.lineTo(dimensions.width, y);
-      ctx.stroke();
     }
+
+    ctx.stroke();
   }
 
   /**
-   * Render wave pattern
+   * Render wave pattern - optimized with pre-calculated values
    */
   private renderWavePattern(
     ctx: CanvasRenderingContext2D,
@@ -124,17 +140,21 @@ export class PatternRenderer {
     const amplitude = 10;
     const frequency = 0.1;
     const spacing = 40;
+    const step = 5;
 
     for (let y = spacing; y < dimensions.height; y += spacing) {
       ctx.beginPath();
-      for (let x = 0; x <= dimensions.width; x += 5) {
+
+      // Pre-calculate wave points and use more efficient path drawing
+      const startX = 0;
+      const startY = y + Math.sin(startX * frequency) * amplitude;
+      ctx.moveTo(startX, startY);
+
+      for (let x = step; x <= dimensions.width; x += step) {
         const waveY = y + Math.sin(x * frequency) * amplitude;
-        if (x === 0) {
-          ctx.moveTo(x, waveY);
-        } else {
-          ctx.lineTo(x, waveY);
-        }
+        ctx.lineTo(x, waveY);
       }
+
       ctx.stroke();
     }
   }

package/src/infrastructure/renderers/ScreenshotRenderer.ts

@@ -22,6 +22,8 @@ export class ScreenshotRenderer {
   private canvasRenderer: CanvasRenderer;
   private patternRenderer: PatternRenderer;
   private deviceConfigService: DeviceConfigService;
+  private renderCache: Map<string, HTMLCanvasElement> = new Map();
+  private readonly MAX_CACHE_SIZE = 5;
 
   constructor() {
     this.canvasRenderer = new CanvasRenderer();
@@ -29,6 +31,15 @@ export class ScreenshotRenderer {
     this.deviceConfigService = DeviceConfigService.getInstance();
   }
 
+  /**
+   * Clear render cache to free memory
+   */
+  public clearCache(): void {
+    this.renderCache.clear();
+    this.canvasRenderer.clearImageCache?.();
+    this.patternRenderer.clearCache?.();
+  }
+
   /**
    * Render device frame
    */
@@ -108,13 +119,14 @@ export class ScreenshotRenderer {
   }
 
   /**
-   * Render background
+   * Render background - optimized
    */
   public renderBackground(
     ctx: CanvasRenderingContext2D,
     design: ScreenshotDesign,
     dimensions: CanvasDimensions
   ): void {
+    // Fill background
     if (design.backgroundGradientEnd) {
       const gradient = this.canvasRenderer.createLinearGradient(
         ctx,
@@ -134,6 +146,7 @@ export class ScreenshotRenderer {
 
     ctx.fillRect(0, 0, dimensions.width, dimensions.height);
 
+    // Render pattern if specified (and not none)
     if (design.backgroundPattern && design.backgroundPattern !== 'none') {
       this.patternRenderer.renderPattern(
         ctx,

package/src/infrastructure/services/DeviceConfigService.ts

@@ -12,6 +12,9 @@ import { DEVICE_DIMENSIONS } from '../../domain/config/DeviceConfig';
 export class DeviceConfigService {
   private static instance: DeviceConfigService;
   private devices: Map<DeviceType, DeviceConfig>;
+  private phonesCache: DeviceConfig[] | null = null;
+  private tabletsCache: DeviceConfig[] | null = null;
+  private allDevicesCache: DeviceConfig[] | null = null;
 
   private constructor() {
     this.devices = new Map();
@@ -116,15 +119,27 @@ export class DeviceConfigService {
   }
 
   public getAllDevices(): DeviceConfig[] {
-    return Array.from(this.devices.values());
+    // Use cached value if available
+    if (!this.allDevicesCache) {
+      this.allDevicesCache = Array.from(this.devices.values());
+    }
+    return this.allDevicesCache;
   }
 
   public getPhones(): DeviceConfig[] {
-    return this.getAllDevices().filter((d) => d.isPhone);
+    // Use cached value if available
+    if (!this.phonesCache) {
+      this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
+    }
+    return this.phonesCache;
   }
 
   public getTablets(): DeviceConfig[] {
-    return this.getAllDevices().filter((d) => d.isTablet);
+    // Use cached value if available
+    if (!this.tabletsCache) {
+      this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
+    }
+    return this.tabletsCache;
   }
 
   public isPhone(deviceType: DeviceType): boolean {

package/src/presentation/hooks/useCanvasExport.ts

@@ -3,7 +3,7 @@
  * React hook for canvas export operations
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type { CanvasExportOptions, CanvasResult } from '../../domain/types/canvas.types';
 import type { CanvasConfig } from '../../domain/config/CanvasConfig';
 import { DEFAULT_CANVAS_CONFIG } from '../../domain/config/CanvasConfig';
@@ -52,20 +52,50 @@ export function useCanvasExport(
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
-  const renderer = new CanvasRenderer(config);
+  // Use ref to prevent recreating renderer on every render
+  const rendererRef = useRef<CanvasRenderer | null>(null);
+  const urlCleanupRef = useRef<string[]>([]);
+
+  // Initialize renderer once
+  if (!rendererRef.current) {
+    rendererRef.current = new CanvasRenderer(config);
+  }
+
+  // Cleanup URLs on unmount
+  useEffect(() => {
+    return () => {
+      // Clean up any remaining URLs
+      urlCleanupRef.current.forEach(url => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch (e) {
+          // Ignore errors during cleanup
+        }
+      });
+      urlCleanupRef.current = [];
+    };
+  }, []);
 
   const exportToBlob = useCallback(
     async (
       canvas: HTMLCanvasElement,
       options?: CanvasExportOptions
     ): Promise<CanvasResult | null> => {
+      if (!rendererRef.current) return null;
+
       setIsExporting(true);
       setProgress(0);
       setError(null);
 
       try {
-        const result = await renderer.exportToBlob(canvas, options);
+        const result = await rendererRef.current.exportToBlob(canvas, options);
         setProgress(100);
+
+        // Track URL for cleanup
+        if (result?.url) {
+          urlCleanupRef.current.push(result.url);
+        }
+
         return result;
       } catch (err) {
         const errorMessage =
@@ -76,7 +106,7 @@ export function useCanvasExport(
         setIsExporting(false);
       }
     },
-    [renderer]
+    []
   );
 
   const exportToDataURL = useCallback(
@@ -85,8 +115,10 @@ export function useCanvasExport(
       format?: string,
       quality?: number
     ): string | null => {
+      if (!rendererRef.current) return null;
+
       try {
-        return renderer.exportToDataURL(canvas, format, quality);
+        return rendererRef.current.exportToDataURL(canvas, format, quality);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Export failed';
@@ -94,7 +126,7 @@ export function useCanvasExport(
         return null;
       }
     },
-    [renderer]
+    []
   );
 
   const downloadCanvas = useCallback(
@@ -122,8 +154,14 @@ export function useCanvasExport(
 
         setProgress(100);
 
+        // Schedule URL cleanup after a delay
         setTimeout(() => {
           URL.revokeObjectURL(result.url);
+          // Remove from cleanup tracking
+          const index = urlCleanupRef.current.indexOf(result.url);
+          if (index > -1) {
+            urlCleanupRef.current.splice(index, 1);
+          }
         }, 100);
       } catch (err) {
         const errorMessage =
@@ -138,8 +176,10 @@ export function useCanvasExport(
 
   const cloneCanvas = useCallback(
     (canvas: HTMLCanvasElement): HTMLCanvasElement | null => {
+      if (!rendererRef.current) return null;
+
       try {
-        return renderer.cloneCanvas(canvas);
+        return rendererRef.current.cloneCanvas(canvas);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Clone failed';
@@ -147,7 +187,7 @@ export function useCanvasExport(
         return null;
       }
     },
-    [renderer]
+    []
   );
 
   return {

package/src/presentation/hooks/useReportExport.ts

@@ -3,7 +3,7 @@
  * React hook for report export operations
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type { ReportData } from '../../domain/types/report.types';
 import type {
   PDFExportOptions,
@@ -47,15 +47,25 @@ export function useReportExport(): UseReportExportReturn {
   const [isExporting, setIsExporting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const reportService = ReportService.getInstance();
+  // Use ref to prevent recreating service instance on every render
+  const reportServiceRef = useRef<ReportService | null>(null);
+
+  // Initialize service once
+  if (!reportServiceRef.current) {
+    reportServiceRef.current = ReportService.getInstance();
+  }
 
   const exportToPDF = useCallback(
     async (elementId: string, options?: PDFExportOptions): Promise<void> => {
+      if (!reportServiceRef.current) {
+        throw new Error('ReportService not initialized');
+      }
+
       setIsExporting(true);
       setError(null);
 
       try {
-        await reportService.exportToPDF(elementId, options);
+        await reportServiceRef.current.exportToPDF(elementId, options);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'PDF export failed';
@@ -65,7 +75,7 @@ export function useReportExport(): UseReportExportReturn {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
 
   const exportCanvasToPDF = useCallback(
@@ -73,11 +83,15 @@ export function useReportExport(): UseReportExportReturn {
       canvas: HTMLCanvasElement,
       options?: PDFExportOptions
     ): Promise<void> => {
+      if (!reportServiceRef.current) {
+        throw new Error('ReportService not initialized');
+      }
+
       setIsExporting(true);
       setError(null);
 
       try {
-        await reportService.exportCanvasToPDF(canvas, options);
+        await reportServiceRef.current.exportCanvasToPDF(canvas, options);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Canvas PDF export failed';
@@ -87,7 +101,7 @@ export function useReportExport(): UseReportExportReturn {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
 
   const exportMultipleToPDF = useCallback(
@@ -95,11 +109,15 @@ export function useReportExport(): UseReportExportReturn {
       elementIds: string[],
       options?: PDFExportOptions
     ): Promise<void> => {
+      if (!reportServiceRef.current) {
+        throw new Error('ReportService not initialized');
+      }
+
       setIsExporting(true);
       setError(null);
 
       try {
-        await reportService.exportMultipleToPDF(elementIds, options);
+        await reportServiceRef.current.exportMultipleToPDF(elementIds, options);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Multi-page PDF export failed';
@@ -109,16 +127,20 @@ export function useReportExport(): UseReportExportReturn {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
 
   const exportToExcel = useCallback(
     async (data: ReportData, options?: ExcelExportOptions): Promise<void> => {
+      if (!reportServiceRef.current) {
+        throw new Error('ReportService not initialized');
+      }
+
       setIsExporting(true);
       setError(null);
 
       try {
-        await reportService.exportToExcel(data, options);
+        await reportServiceRef.current.exportToExcel(data, options);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'Excel export failed';
@@ -128,7 +150,7 @@ export function useReportExport(): UseReportExportReturn {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
 
   const exportToCSV = useCallback(
@@ -137,8 +159,12 @@ export function useReportExport(): UseReportExportReturn {
       filename?: string,
       delimiter?: ',' | ';'
     ): void => {
+      if (!reportServiceRef.current) {
+        throw new Error('ReportService not initialized');
+      }
+
       try {
-        reportService.exportToCSV(data, filename, delimiter);
+        reportServiceRef.current.exportToCSV(data, filename, delimiter);
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : 'CSV export failed';
@@ -146,7 +172,7 @@ export function useReportExport(): UseReportExportReturn {
         throw err;
       }
     },
-    [reportService]
+    []
   );
 
   return {

package/src/presentation/hooks/useScreenshotStudio.ts

@@ -3,7 +3,7 @@
  * React hook for screenshot studio functionality
  */
 
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type {
   ScreenshotContent,
   ScreenshotDesign,
@@ -198,9 +198,22 @@ export function useScreenshotStudio(
     ...config,
   };
 
-  const serviceRef = useRef(
-    new ScreenshotStudioService(fullConfig)
-  );
+  const serviceRef = useRef<ScreenshotStudioService | null>(null);
+
+  // Initialize service once
+  if (!serviceRef.current) {
+    serviceRef.current = new ScreenshotStudioService(fullConfig);
+  }
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      // Clean up service resources if needed
+      if (serviceRef.current) {
+        // Any cleanup logic can go here
+      }
+    };
+  }, []);
 
   const [screens, setScreens] = useState<ScreenshotContent[]>(DEFAULT_SCREENS);
   const [design, setDesign] = useState<ScreenshotDesign>(DEFAULT_DESIGN);
@@ -342,6 +355,8 @@ export function useScreenshotStudio(
 
   const generateDesignedScreenshot = useCallback(
     async (screenId: string) => {
+      if (!serviceRef.current) return;
+
       const screen = screens.find((s) => s.id === screenId);
       if (!screen) return;
 
@@ -364,7 +379,11 @@ export function useScreenshotStudio(
 
   const exportAllScreensAsZip = useCallback(
     async (format: ScreenshotFormat = 'png') => {
+      if (!serviceRef.current) return;
+
       setIsProcessing(true);
+      let url: string | null = null;
+
       try {
         const project: ScreenshotProject = {
           id: projectId || 'default-project',
@@ -380,12 +399,11 @@ export function useScreenshotStudio(
         };
 
         const blob = await serviceRef.current.exportProjectAsZip(project);
-        const url = URL.createObjectURL(blob);
+        url = URL.createObjectURL(blob);
         const link = document.createElement('a');
         link.href = url;
         link.download = `Studio_${currentLanguage}_${Date.now()}.zip`;
         link.click();
-        URL.revokeObjectURL(url);
 
         onShowToast(
           'Success',
@@ -395,6 +413,17 @@ export function useScreenshotStudio(
         onShowToast('Error', 'ZIP export failed');
       } finally {
         setIsProcessing(false);
+
+        // Clean up object URL after a delay
+        if (url) {
+          setTimeout(() => {
+            try {
+              URL.revokeObjectURL(url!);
+            } catch (e) {
+              // Ignore cleanup errors
+            }
+          }, 100);
+        }
       }
     },
     [