@umituz/web-canvas 1.0.1 → 1.0.3

package/dist/presentation/index.js

@@ -81,6 +81,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
@@ -182,17 +183,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
    */
@@ -274,10 +295,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) {
@@ -296,62 +322,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;
@@ -359,15 +388,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();
     }
@@ -409,6 +438,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();
   }
@@ -505,13 +537,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);
@@ -530,10 +571,20 @@ var DeviceConfigService = class _DeviceConfigService {
 // 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
    */
@@ -585,7 +636,7 @@ var ScreenshotRenderer = class {
     ctx.fill();
   }
   /**
-   * Render background
+   * Render background - optimized
    */
   renderBackground(ctx, design, dimensions) {
     if (design.backgroundGradientEnd) {
@@ -795,10 +846,17 @@ var ScreenshotStudioService = class {
    * Generate batch screenshots
    */
   async generateBatchScreenshots(deviceTypes) {
-    const promises = deviceTypes.map(
-      (deviceType) => this.generateScreenshot({ deviceType })
-    );
-    return Promise.all(promises);
+    const BATCH_SIZE = 3;
+    const results = [];
+    for (let i = 0; i < deviceTypes.length; i += BATCH_SIZE) {
+      const batch = deviceTypes.slice(i, i + BATCH_SIZE);
+      const batchPromises = batch.map(
+        (deviceType) => this.generateScreenshot({ deviceType })
+      );
+      const batchResults = await Promise.all(batchPromises);
+      results.push(...batchResults);
+    }
+    return results;
   }
   /**
    * Generate designed screenshot
@@ -839,16 +897,18 @@ WHATS NEW:
 ${project.appMetadata.whatsNew}`;
       folder.file("aso_metadata.txt", metadataText);
     }
-    for (let i = 0; i < project.screens.length; i++) {
-      const screen = project.screens[i];
-      const screenshot = await this.generateDesignedScreenshot(screen, project.design);
+    const screenshotPromises = project.screens.map(
+      (screen, index) => this.generateDesignedScreenshot(screen, project.design).then((screenshot) => ({ screenshot, index }))
+    );
+    const screenshots = await Promise.all(screenshotPromises);
+    screenshots.forEach(({ screenshot, index }) => {
       const base64Data = screenshot.url.split(",")[1];
       folder.file(
-        `screen_${i + 1}_${project.design.deviceType}.png`,
+        `screen_${index + 1}_${project.design.deviceType}.png`,
         base64Data,
         { base64: true }
       );
-    }
+    });
     return await zip.generateAsync({ type: "blob" });
   }
   /**
@@ -932,10 +992,13 @@ ${project.appMetadata.whatsNew}`;
     };
   }
   /**
-   * Generate unique ID
+   * Generate unique ID - optimized version
    */
   generateId() {
-    return Math.random().toString(36).substr(2, 9);
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`;
   }
 };
 
@@ -1033,9 +1096,16 @@ function useScreenshotStudio(options = {}) {
     ...DEFAULT_SCREENSHOT_STUDIO_CONFIG,
     ...config
   };
-  const serviceRef = (0, import_react.useRef)(
-    new ScreenshotStudioService(fullConfig)
-  );
+  const serviceRef = (0, import_react.useRef)(null);
+  if (!serviceRef.current) {
+    serviceRef.current = new ScreenshotStudioService(fullConfig);
+  }
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (serviceRef.current) {
+      }
+    };
+  }, []);
   const [screens, setScreens] = (0, import_react.useState)(DEFAULT_SCREENS);
   const [design, setDesign] = (0, import_react.useState)(DEFAULT_DESIGN);
   const [currentLanguage, setCurrentLanguage] = (0, import_react.useState)(
@@ -1156,6 +1226,7 @@ function useScreenshotStudio(options = {}) {
   );
   const generateDesignedScreenshot = (0, import_react.useCallback)(
     async (screenId) => {
+      if (!serviceRef.current) return;
       const screen = screens.find((s) => s.id === screenId);
       if (!screen) return;
       setIsProcessing(true);
@@ -1176,7 +1247,9 @@ function useScreenshotStudio(options = {}) {
   );
   const exportAllScreensAsZip = (0, import_react.useCallback)(
     async (format = "png") => {
+      if (!serviceRef.current) return;
       setIsProcessing(true);
+      let url = null;
       try {
         const project = {
           id: projectId || "default-project",
@@ -1191,12 +1264,11 @@ function useScreenshotStudio(options = {}) {
           updatedAt: /* @__PURE__ */ new Date()
         };
         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",
           `Exported ${screens.length} screens in ZIP archive.`
@@ -1205,6 +1277,14 @@ function useScreenshotStudio(options = {}) {
         onShowToast("Error", "ZIP export failed");
       } finally {
         setIsProcessing(false);
+        if (url) {
+          setTimeout(() => {
+            try {
+              URL.revokeObjectURL(url);
+            } catch (e) {
+            }
+          }, 100);
+        }
       }
     },
     [
@@ -1290,15 +1370,34 @@ function useCanvasExport(options = {}) {
   const [isExporting, setIsExporting] = (0, import_react2.useState)(false);
   const [progress, setProgress] = (0, import_react2.useState)(0);
   const [error, setError] = (0, import_react2.useState)(null);
-  const renderer = new CanvasRenderer(config);
+  const rendererRef = (0, import_react2.useRef)(null);
+  const urlCleanupRef = (0, import_react2.useRef)([]);
+  if (!rendererRef.current) {
+    rendererRef.current = new CanvasRenderer(config);
+  }
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      urlCleanupRef.current.forEach((url) => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch (e) {
+        }
+      });
+      urlCleanupRef.current = [];
+    };
+  }, []);
   const exportToBlob = (0, import_react2.useCallback)(
     async (canvas, options2) => {
+      if (!rendererRef.current) return null;
       setIsExporting(true);
       setProgress(0);
       setError(null);
       try {
-        const result = await renderer.exportToBlob(canvas, options2);
+        const result = await rendererRef.current.exportToBlob(canvas, options2);
         setProgress(100);
+        if (result?.url) {
+          urlCleanupRef.current.push(result.url);
+        }
         return result;
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Export failed";
@@ -1308,19 +1407,20 @@ function useCanvasExport(options = {}) {
         setIsExporting(false);
       }
     },
-    [renderer]
+    []
   );
   const exportToDataURL = (0, import_react2.useCallback)(
     (canvas, format, quality) => {
+      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";
         setError(errorMessage);
         return null;
       }
     },
-    [renderer]
+    []
   );
   const downloadCanvas = (0, import_react2.useCallback)(
     async (canvas, filename, options2) => {
@@ -1340,6 +1440,10 @@ function useCanvasExport(options = {}) {
         setProgress(100);
         setTimeout(() => {
           URL.revokeObjectURL(result.url);
+          const index = urlCleanupRef.current.indexOf(result.url);
+          if (index > -1) {
+            urlCleanupRef.current.splice(index, 1);
+          }
         }, 100);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Download failed";
@@ -1352,15 +1456,16 @@ function useCanvasExport(options = {}) {
   );
   const cloneCanvas = (0, import_react2.useCallback)(
     (canvas) => {
+      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";
         setError(errorMessage);
         return null;
       }
     },
-    [renderer]
+    []
   );
   return {
     isExporting,
@@ -1522,13 +1627,19 @@ var ReportService = class _ReportService {
 function useReportExport() {
   const [isExporting, setIsExporting] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(null);
-  const reportService = ReportService.getInstance();
+  const reportServiceRef = (0, import_react3.useRef)(null);
+  if (!reportServiceRef.current) {
+    reportServiceRef.current = ReportService.getInstance();
+  }
   const exportToPDF = (0, import_react3.useCallback)(
     async (elementId, options) => {
+      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";
         setError(errorMessage);
@@ -1537,14 +1648,17 @@ function useReportExport() {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
   const exportCanvasToPDF = (0, import_react3.useCallback)(
     async (canvas, options) => {
+      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";
         setError(errorMessage);
@@ -1553,14 +1667,17 @@ function useReportExport() {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
   const exportMultipleToPDF = (0, import_react3.useCallback)(
     async (elementIds, options) => {
+      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";
         setError(errorMessage);
@@ -1569,14 +1686,17 @@ function useReportExport() {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
   const exportToExcel = (0, import_react3.useCallback)(
     async (data, options) => {
+      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";
         setError(errorMessage);
@@ -1585,19 +1705,22 @@ function useReportExport() {
         setIsExporting(false);
       }
     },
-    [reportService]
+    []
   );
   const exportToCSV = (0, import_react3.useCallback)(
     (data, filename, delimiter) => {
+      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";
         setError(errorMessage);
         throw err;
       }
     },
-    [reportService]
+    []
   );
   return {
     isExporting,

package/dist/presentation/index.mjs

@@ -2,9 +2,9 @@ import {
   useCanvasExport,
   useReportExport,
   useScreenshotStudio
-} from "../chunk-SF6WND7M.mjs";
-import "../chunk-BN7JTXL7.mjs";
-import "../chunk-WMKPCJFI.mjs";
+} from "../chunk-LOVI2LTO.mjs";
+import "../chunk-DNKRSL6D.mjs";
+import "../chunk-UOGTEMIJ.mjs";
 import "../chunk-Z6IB4BQV.mjs";
 import "../chunk-MC6PNV2F.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-canvas",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Comprehensive canvas and screenshot generation library with device frames, patterns, and PDF export",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -48,7 +48,7 @@
   "scripts": {
     "build": "tsup src/index.ts src/domain/index.ts src/application/index.ts src/presentation/index.ts src/infrastructure/index.ts src/domain/config/index.ts --format cjs,esm --dts --clean --external react",
     "dev": "tsup src/index.ts src/domain/index.ts src/application/index.ts src/presentation/index.ts src/infrastructure/index.ts src/domain/config/index.ts --format cjs,esm --dts --watch --external react",
-    "lint": "tsc --noEmit"
+    "lint": "eslint ."
   },
   "keywords": [
     "canvas",
@@ -69,13 +69,24 @@
   ],
   "author": "umituz",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/web-canvas"
+  },
+  "bugs": {
+    "url": "https://github.com/umituz/web-canvas/issues"
+  },
+  "homepage": "https://github.com/umituz/web-canvas#readme",
   "peerDependencies": {
     "react": ">=18"
   },
   "devDependencies": {
+    "@eslint/js": "^9.32.0",
     "@types/react": "^18.2.0",
+    "eslint": "^9.32.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.38.0"
   },
   "dependencies": {
     "html2canvas": "^1.4.1",

package/src/application/services/ScreenshotStudioService.ts

@@ -79,10 +79,21 @@ export class ScreenshotStudioService {
   public async generateBatchScreenshots(
     deviceTypes: DeviceType[]
   ): Promise<ScreenshotMetadata[]> {
-    const promises = deviceTypes.map((deviceType) =>
-      this.generateScreenshot({ deviceType })
-    );
-    return Promise.all(promises);
+    // Process in parallel with concurrency control for better performance
+    const BATCH_SIZE = 3; // Process 3 screenshots at a time to avoid memory issues
+
+    const results: ScreenshotMetadata[] = [];
+
+    for (let i = 0; i < deviceTypes.length; i += BATCH_SIZE) {
+      const batch = deviceTypes.slice(i, i + BATCH_SIZE);
+      const batchPromises = batch.map((deviceType) =>
+        this.generateScreenshot({ deviceType })
+      );
+      const batchResults = await Promise.all(batchPromises);
+      results.push(...batchResults);
+    }
+
+    return results;
   }
 
   /**
@@ -136,17 +147,23 @@ ${project.appMetadata.whatsNew}`;
       folder.file('aso_metadata.txt', metadataText);
     }
 
-    // Generate screenshots
-    for (let i = 0; i < project.screens.length; i++) {
-      const screen = project.screens[i];
-      const screenshot = await this.generateDesignedScreenshot(screen, project.design);
+    // Generate screenshots in parallel for better performance
+    const screenshotPromises = project.screens.map((screen, index) =>
+      this.generateDesignedScreenshot(screen, project.design)
+        .then(screenshot => ({ screenshot, index }))
+    );
+
+    const screenshots = await Promise.all(screenshotPromises);
+
+    // Add all screenshots to ZIP
+    screenshots.forEach(({ screenshot, index }) => {
       const base64Data = screenshot.url.split(',')[1];
       folder.file(
-        `screen_${i + 1}_${project.design.deviceType}.png`,
+        `screen_${index + 1}_${project.design.deviceType}.png`,
         base64Data,
         { base64: true }
       );
-    }
+    });
 
     return await zip.generateAsync({ type: 'blob' });
   }
@@ -235,9 +252,15 @@ ${project.appMetadata.whatsNew}`;
   }
 
   /**
-   * Generate unique ID
+   * Generate unique ID - optimized version
    */
   private generateId(): string {
-    return Math.random().toString(36).substr(2, 9);
+    // Use more efficient ID generation with crypto if available
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+
+    // Fallback to timestamp + random for better uniqueness
+    return `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`;
   }
 }