@umituz/web-canvas 1.0.1 → 1.0.3

package/dist/infrastructure/index.d.ts

@@ -2,6 +2,7 @@ import { a as CanvasConfig, c as CanvasDimensions, b as CanvasContextConfig, d a
 
 declare class CanvasRenderer {
     private config;
+    private imageCache;
     constructor(config?: CanvasConfig);
     /**
      * Create a new canvas element
@@ -36,9 +37,17 @@ declare class CanvasRenderer {
      */
     drawImage(ctx: CanvasRenderingContext2D, imageSource: string | HTMLImageElement, x: number, y: number, width?: number, height?: number): Promise<void>;
     /**
-     * Load image from URL
+     * Load image from URL with caching
      */
     private loadImage;
+    /**
+     * Clear image cache to free memory
+     */
+    clearImageCache(): void;
+    /**
+     * Get cache size for monitoring
+     */
+    getCacheSize(): number;
     /**
      * Create gradient
      */
@@ -70,24 +79,30 @@ declare class CanvasRenderer {
  */
 
 declare class PatternRenderer {
+    private patternCanvasCache;
+    private readonly MAX_CACHE_SIZE;
     /**
      * Render pattern on canvas
      */
     renderPattern(ctx: CanvasRenderingContext2D, pattern: BackgroundPattern, dimensions: CanvasDimensions, color?: string): void;
     /**
-     * Render dot pattern
+     * Clear pattern cache to free memory
+     */
+    clearCache(): void;
+    /**
+     * Render dot pattern - optimized with batch rendering
      */
     private renderDotPattern;
     /**
-     * Render grid pattern
+     * Render grid pattern - optimized with single path
      */
     private renderGridPattern;
     /**
-     * Render line pattern
+     * Render line pattern - optimized with single path
      */
     private renderLinePattern;
     /**
-     * Render wave pattern
+     * Render wave pattern - optimized with pre-calculated values
      */
     private renderWavePattern;
     /**
@@ -105,7 +120,13 @@ declare class ScreenshotRenderer {
     private canvasRenderer;
     private patternRenderer;
     private deviceConfigService;
+    private renderCache;
+    private readonly MAX_CACHE_SIZE;
     constructor();
+    /**
+     * Clear render cache to free memory
+     */
+    clearCache(): void;
     /**
      * Render device frame
      */
@@ -123,7 +144,7 @@ declare class ScreenshotRenderer {
      */
     private renderNotch;
     /**
-     * Render background
+     * Render background - optimized
      */
     renderBackground(ctx: CanvasRenderingContext2D, design: ScreenshotDesign, dimensions: CanvasDimensions): void;
     /**
@@ -159,6 +180,9 @@ declare class ScreenshotRenderer {
 declare class DeviceConfigService {
     private static instance;
     private devices;
+    private phonesCache;
+    private tabletsCache;
+    private allDevicesCache;
     private constructor();
     static getInstance(): DeviceConfigService;
     private initializeDevices;

package/dist/infrastructure/index.js

@@ -49,6 +49,9 @@ var DEFAULT_DEVICE_CONFIG = {
 // src/infrastructure/services/DeviceConfigService.ts
 var DeviceConfigService = class _DeviceConfigService {
   constructor() {
+    this.phonesCache = null;
+    this.tabletsCache = null;
+    this.allDevicesCache = null;
     this.devices = /* @__PURE__ */ new Map();
     this.initializeDevices();
   }
@@ -145,13 +148,22 @@ var DeviceConfigService = class _DeviceConfigService {
     return this.devices.get(deviceType);
   }
   getAllDevices() {
-    return Array.from(this.devices.values());
+    if (!this.allDevicesCache) {
+      this.allDevicesCache = Array.from(this.devices.values());
+    }
+    return this.allDevicesCache;
   }
   getPhones() {
-    return this.getAllDevices().filter((d) => d.isPhone);
+    if (!this.phonesCache) {
+      this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
+    }
+    return this.phonesCache;
   }
   getTablets() {
-    return this.getAllDevices().filter((d) => d.isTablet);
+    if (!this.tabletsCache) {
+      this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
+    }
+    return this.tabletsCache;
   }
   isPhone(deviceType) {
     const config = this.getDeviceConfig(deviceType);
@@ -181,6 +193,7 @@ var DEFAULT_CANVAS_CONFIG = {
 var CanvasRenderer = class {
   constructor(config = DEFAULT_CANVAS_CONFIG) {
     this.config = { ...DEFAULT_CANVAS_CONFIG, ...config };
+    this.imageCache = /* @__PURE__ */ new Map();
   }
   /**
    * Create a new canvas element
@@ -282,17 +295,37 @@ var CanvasRenderer = class {
     }
   }
   /**
-   * Load image from URL
+   * Load image from URL with caching
    */
   loadImage(url) {
+    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" : void 0;
-      img.onload = () => resolve(img);
+      if (this.config.useCORS) {
+        img.crossOrigin = "anonymous";
+      }
+      img.onload = () => {
+        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
+   */
+  clearImageCache() {
+    this.imageCache.clear();
+  }
+  /**
+   * Get cache size for monitoring
+   */
+  getCacheSize() {
+    return this.imageCache.size;
+  }
   /**
    * Create gradient
    */
@@ -374,10 +407,15 @@ var CanvasRenderer = class {
 
 // src/infrastructure/renderers/PatternRenderer.ts
 var PatternRenderer = class {
+  constructor() {
+    this.patternCanvasCache = /* @__PURE__ */ new Map();
+    this.MAX_CACHE_SIZE = 10;
+  }
   /**
    * Render pattern on canvas
    */
   renderPattern(ctx, pattern, dimensions, color = "#000000") {
+    if (pattern === "none") return;
     ctx.save();
     ctx.globalAlpha = 0.1;
     switch (pattern) {
@@ -396,62 +434,65 @@ var PatternRenderer = class {
       case "checkers":
         this.renderCheckerPattern(ctx, dimensions, color);
         break;
-      case "none":
-      default:
-        break;
     }
     ctx.restore();
   }
   /**
-   * Render dot pattern
+   * Clear pattern cache to free memory
+   */
+  clearCache() {
+    this.patternCanvasCache.clear();
+  }
+  /**
+   * Render dot pattern - optimized with batch rendering
    */
   renderDotPattern(ctx, dimensions, color) {
     ctx.fillStyle = color;
     const spacing = 30;
+    const radius = 2;
+    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
    */
   renderGridPattern(ctx, dimensions, color) {
     ctx.strokeStyle = color;
     ctx.lineWidth = 1;
     const spacing = 30;
+    ctx.beginPath();
     for (let x = 0; x <= dimensions.width; x += spacing) {
-      ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, dimensions.height);
-      ctx.stroke();
     }
     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
    */
   renderLinePattern(ctx, dimensions, color) {
     ctx.strokeStyle = color;
     ctx.lineWidth = 2;
     const spacing = 20;
+    ctx.beginPath();
     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
    */
   renderWavePattern(ctx, dimensions, color) {
     ctx.strokeStyle = color;
@@ -459,15 +500,15 @@ var PatternRenderer = class {
     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) {
+      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();
     }
@@ -490,10 +531,20 @@ var PatternRenderer = class {
 // src/infrastructure/renderers/ScreenshotRenderer.ts
 var ScreenshotRenderer = class {
   constructor() {
+    this.renderCache = /* @__PURE__ */ new Map();
+    this.MAX_CACHE_SIZE = 5;
     this.canvasRenderer = new CanvasRenderer();
     this.patternRenderer = new PatternRenderer();
     this.deviceConfigService = DeviceConfigService.getInstance();
   }
+  /**
+   * Clear render cache to free memory
+   */
+  clearCache() {
+    this.renderCache.clear();
+    this.canvasRenderer.clearImageCache?.();
+    this.patternRenderer.clearCache?.();
+  }
   /**
    * Render device frame
    */
@@ -545,7 +596,7 @@ var ScreenshotRenderer = class {
     ctx.fill();
   }
   /**
-   * Render background
+   * Render background - optimized
    */
   renderBackground(ctx, design, dimensions) {
     if (design.backgroundGradientEnd) {

package/dist/infrastructure/index.mjs

@@ -3,7 +3,7 @@ import {
   DeviceConfigService,
   PatternRenderer,
   ScreenshotRenderer
-} from "../chunk-WMKPCJFI.mjs";
+} from "../chunk-UOGTEMIJ.mjs";
 import "../chunk-MC6PNV2F.mjs";
 export {
   CanvasRenderer,