@umituz/web-canvas 1.2.1 → 1.2.2

package/src/index.ts

@@ -1,11 +1,5 @@
-/**
- * @umituz/web-canvas
- * Comprehensive canvas and screenshot generation library
- */
 
-// Domain exports
 export type {
-  // Canvas types
   CanvasFormat,
   CanvasQuality,
   CanvasDimensions,
@@ -17,7 +11,6 @@ export type {
   CanvasResult,
   CanvasOperation,
 
-  // Screenshot types
   DeviceType,
   FrameStyle,
   LayoutStyle,
@@ -34,7 +27,6 @@ export type {
   AppStoreMetadata,
   ScreenshotProject,
 
-  // Report types
   ReportItemType,
   ReportItem,
   ReportSummary,
@@ -45,7 +37,6 @@ export type {
   CSVExportOptions,
   ReportExportResult,
 
-  // Freehand types
   FreehandPoint,
   FreehandStroke,
   UseFreehandCanvasOptions,
@@ -72,7 +63,6 @@ export {
   DEFAULT_SCREENSHOT_STUDIO_CONFIG,
 } from './domain/config/ScreenshotStudioConfig';
 
-// Infrastructure exports
 export { CanvasRenderer } from './infrastructure/renderers/CanvasRenderer';
 export { PatternRenderer } from './infrastructure/renderers/PatternRenderer';
 export {
@@ -82,13 +72,11 @@ export {
   DeviceConfigService,
 } from './infrastructure/services/DeviceConfigService';
 
-// Application exports
 export {
   ScreenshotStudioService,
 } from './application/services/ScreenshotStudioService';
 export { ReportService } from './application/services/ReportService';
 
-// Presentation exports
 export {
   useScreenshotStudio,
   type UseScreenshotStudioOptions,

package/src/infrastructure/index.ts

@@ -1,7 +1,3 @@
-/**
- * Infrastructure Layer Index
- * Export all infrastructure services and renderers
- */
 
 export * from './services/DeviceConfigService';
 export * from './renderers/CanvasRenderer';

package/src/infrastructure/renderers/CanvasRenderer.ts

@@ -1,7 +1,3 @@
-/**
- * Canvas Renderer
- * Core canvas rendering operations
- */
 
 import type {
   CanvasDimensions,
@@ -20,9 +16,6 @@ export class CanvasRenderer {
     this.imageCache = new Map();
   }
 
-  /**
-   * Create a new canvas element
-   */
   public createCanvas(dimensions: CanvasDimensions): HTMLCanvasElement {
     const canvas = document.createElement('canvas');
     canvas.width = dimensions.width;
@@ -30,18 +23,12 @@ export class CanvasRenderer {
     return canvas;
   }
 
-  /**
-   * Get canvas 2D context
-   */
   public getContext(
     canvas: HTMLCanvasElement
   ): CanvasRenderingContext2D | null {
     return canvas.getContext('2d');
   }
 
-  /**
-   * Apply context configuration
-   */
   public configureContext(
     ctx: CanvasRenderingContext2D,
     config: CanvasContextConfig
@@ -75,9 +62,6 @@ export class CanvasRenderer {
     }
   }
 
-  /**
-   * Clear canvas
-   */
   public clearCanvas(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions
@@ -85,9 +69,6 @@ export class CanvasRenderer {
     ctx.clearRect(0, 0, dimensions.width, dimensions.height);
   }
 
-  /**
-   * Fill rectangle
-   */
   public fillRect(
     ctx: CanvasRenderingContext2D,
     x: number,
@@ -102,9 +83,6 @@ export class CanvasRenderer {
     ctx.fillRect(x, y, width, height);
   }
 
-  /**
-   * Stroke rectangle
-   */
   public strokeRect(
     ctx: CanvasRenderingContext2D,
     x: number,
@@ -123,9 +101,6 @@ export class CanvasRenderer {
     ctx.strokeRect(x, y, width, height);
   }
 
-  /**
-   * Draw text
-   */
   public drawText(
     ctx: CanvasRenderingContext2D,
     text: string,
@@ -139,9 +114,6 @@ export class CanvasRenderer {
     ctx.fillText(text, x, y);
   }
 
-  /**
-   * Draw image
-   */
   public async drawImage(
     ctx: CanvasRenderingContext2D,
     imageSource: string | HTMLImageElement,
@@ -165,11 +137,7 @@ export class CanvasRenderer {
     }
   }
 
-  /**
-   * 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)!);
     }
@@ -180,7 +148,6 @@ export class CanvasRenderer {
         img.crossOrigin = 'anonymous';
       }
       img.onload = () => {
-        // Cache the loaded image
         this.imageCache.set(url, img);
         resolve(img);
       };
@@ -189,23 +156,14 @@ export class CanvasRenderer {
     });
   }
 
-  /**
-   * 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
-   */
   public createLinearGradient(
     ctx: CanvasRenderingContext2D,
     x1: number,
@@ -221,9 +179,6 @@ export class CanvasRenderer {
     return gradient;
   }
 
-  /**
-   * Export canvas to blob
-   */
   public async exportToBlob(
     canvas: HTMLCanvasElement,
     options: CanvasExportOptions = {}
@@ -232,7 +187,6 @@ export class CanvasRenderer {
     const quality = options.quality || this.config.defaultQuality;
     const scale = options.scale || this.config.scale;
 
-    // Scale canvas if needed
     const scaledCanvas = (scale || 1) !== 1 ? this.scaleCanvas(canvas, scale || 1) : canvas;
 
     const mimeType = `image/${format || 'png'}`;
@@ -262,9 +216,6 @@ export class CanvasRenderer {
     };
   }
 
-  /**
-   * Export canvas to data URL
-   */
   public exportToDataURL(
     canvas: HTMLCanvasElement,
     format?: string,
@@ -275,9 +226,6 @@ export class CanvasRenderer {
     return canvas.toDataURL(mimeType, q);
   }
 
-  /**
-   * Scale canvas
-   */
   private scaleCanvas(
     canvas: HTMLCanvasElement,
     scale: number
@@ -296,9 +244,6 @@ export class CanvasRenderer {
     return scaled;
   }
 
-  /**
-   * Clone canvas
-   */
   public cloneCanvas(canvas: HTMLCanvasElement): HTMLCanvasElement {
     const clone = document.createElement('canvas');
     clone.width = canvas.width;

package/src/infrastructure/renderers/PatternRenderer.ts

@@ -1,7 +1,3 @@
-/**
- * Pattern Renderer
- * Background pattern rendering operations
- */
 
 import type { CanvasDimensions } from '../../domain/types/canvas.types';
 import type { BackgroundPattern } from '../../domain/types/screenshot.types';
@@ -10,9 +6,6 @@ export class PatternRenderer {
   private patternCanvasCache: Map<string, HTMLCanvasElement> = new Map();
   private readonly MAX_CACHE_SIZE = 10;
 
-  /**
-   * Render pattern on canvas
-   */
   public renderPattern(
     ctx: CanvasRenderingContext2D,
     pattern: BackgroundPattern,
@@ -45,16 +38,10 @@ export class PatternRenderer {
     ctx.restore();
   }
 
-  /**
-   * Clear pattern cache to free memory
-   */
   public clearCache(): void {
     this.patternCanvasCache.clear();
   }
 
-  /**
-   * Render dot pattern - optimized with batch rendering
-   */
   private renderDotPattern(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -64,7 +51,6 @@ export class PatternRenderer {
     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) {
@@ -75,9 +61,6 @@ export class PatternRenderer {
     ctx.fill();
   }
 
-  /**
-   * Render grid pattern - optimized with single path
-   */
   private renderGridPattern(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -89,13 +72,11 @@ export class PatternRenderer {
 
     ctx.beginPath();
 
-    // Vertical lines
     for (let x = 0; x <= dimensions.width; x += spacing) {
       ctx.moveTo(x, 0);
       ctx.lineTo(x, dimensions.height);
     }
 
-    // Horizontal lines
     for (let y = 0; y <= dimensions.height; y += spacing) {
       ctx.moveTo(0, y);
       ctx.lineTo(dimensions.width, y);
@@ -104,9 +85,6 @@ export class PatternRenderer {
     ctx.stroke();
   }
 
-  /**
-   * Render line pattern - optimized with single path
-   */
   private renderLinePattern(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -118,7 +96,6 @@ export class PatternRenderer {
 
     ctx.beginPath();
 
-    // Draw all lines in a single path
     for (let y = spacing; y < dimensions.height; y += spacing) {
       ctx.moveTo(0, y);
       ctx.lineTo(dimensions.width, y);
@@ -127,9 +104,6 @@ export class PatternRenderer {
     ctx.stroke();
   }
 
-  /**
-   * Render wave pattern - optimized with pre-calculated values
-   */
   private renderWavePattern(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -145,7 +119,6 @@ export class PatternRenderer {
     for (let y = spacing; y < dimensions.height; y += spacing) {
       ctx.beginPath();
 
-      // 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);
@@ -159,9 +132,6 @@ export class PatternRenderer {
     }
   }
 
-  /**
-   * Render checker pattern
-   */
   private renderCheckerPattern(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,

package/src/infrastructure/renderers/ScreenshotRenderer.ts

@@ -1,7 +1,3 @@
-/**
- * Screenshot Renderer
- * Device frame and screenshot rendering operations
- */
 
 import type {
   CanvasDimensions,
@@ -31,18 +27,12 @@ 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
-   */
   public renderDeviceFrame(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -72,9 +62,6 @@ export class ScreenshotRenderer {
     }
   }
 
-  /**
-   * Render realistic device frame
-   */
   private renderRealisticFrame(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -91,9 +78,6 @@ export class ScreenshotRenderer {
     );
   }
 
-  /**
-   * Render minimal device frame
-   */
   private renderMinimalFrame(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
@@ -105,9 +89,6 @@ export class ScreenshotRenderer {
     ctx.strokeRect(0, 0, dimensions.width, dimensions.height);
   }
 
-  /**
-   * Render device notch
-   */
   private renderNotch(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions
@@ -118,15 +99,11 @@ export class ScreenshotRenderer {
     ctx.fill();
   }
 
-  /**
-   * Render background - optimized
-   */
   public renderBackground(
     ctx: CanvasRenderingContext2D,
     design: ScreenshotDesign,
     dimensions: CanvasDimensions
   ): void {
-    // Fill background
     if (design.backgroundGradientEnd) {
       const gradient = this.canvasRenderer.createLinearGradient(
         ctx,
@@ -146,7 +123,6 @@ 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,
@@ -156,9 +132,6 @@ export class ScreenshotRenderer {
     }
   }
 
-  /**
-   * Render text content
-   */
   public renderTextContent(
     ctx: CanvasRenderingContext2D,
     content: ScreenshotContent,
@@ -200,9 +173,6 @@ export class ScreenshotRenderer {
     );
   }
 
-  /**
-   * Format text case
-   */
   private formatText(
     text: string,
     textCase: 'uppercase' | 'lowercase' | 'none' = 'none'
@@ -217,9 +187,6 @@ export class ScreenshotRenderer {
     }
   }
 
-  /**
-   * Render screenshot image
-   */
   public async renderScreenshotImage(
     ctx: CanvasRenderingContext2D,
     imageUrl: string,
@@ -233,7 +200,6 @@ export class ScreenshotRenderer {
     );
     if (!deviceConfig) return;
 
-    // Calculate screenshot area (inside device frame)
     const frameThickness = deviceConfig.frameThickness || 8;
     const padding = 60 + frameThickness;
     const screenshotWidth = dimensions.width - padding * 2;
@@ -253,9 +219,6 @@ export class ScreenshotRenderer {
     }
   }
 
-  /**
-   * Render complete screenshot
-   */
   public async renderDesignedScreenshot(
     content: ScreenshotContent,
     design: ScreenshotDesign
@@ -274,18 +237,14 @@ export class ScreenshotRenderer {
       throw new Error('Failed to get canvas context');
     }
 
-    // Render background
     this.renderBackground(ctx, design, dimensions);
 
-    // Render screenshot image if available
     if (content.screenshot) {
       await this.renderScreenshotImage(ctx, content.screenshot, design, dimensions);
     }
 
-    // Render text content
     this.renderTextContent(ctx, content, design, dimensions);
 
-    // Render device frame
     this.renderDeviceFrame(
       ctx,
       dimensions,
@@ -297,18 +256,13 @@ export class ScreenshotRenderer {
     return canvas;
   }
 
-  /**
-   * Render placeholder content
-   */
   public renderPlaceholderContent(
     ctx: CanvasRenderingContext2D,
     dimensions: CanvasDimensions,
     deviceType: DeviceType
   ): void {
-    // Background
     this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, dimensions.height, '#ffffff');
 
-    // Header area
     this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, 60, '#f3f4f6');
     this.canvasRenderer.fillRect(
       ctx,
@@ -319,7 +273,6 @@ export class ScreenshotRenderer {
       '#f3f4f6'
     );
 
-    // Placeholder content blocks
     ctx.fillStyle = '#e5e7eb';
     for (let i = 0; i < 5; i++) {
       const y = 80 + i * 120;
@@ -329,7 +282,6 @@ export class ScreenshotRenderer {
       }
     }
 
-    // Device frame
     const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
     if (deviceConfig) {
       this.renderDeviceFrame(

package/src/infrastructure/services/DeviceConfigService.ts

@@ -1,14 +1,7 @@
-/**
- * Device Configuration Service
- * Manages device configurations and dimensions
- */
 
 import { DeviceType, DeviceConfig } from '../../domain/types/screenshot.types';
 import { DEVICE_DIMENSIONS } from '../../domain/config/DeviceConfig';
 
-/**
- * Device configuration service
- */
 export class DeviceConfigService {
   private static instance: DeviceConfigService;
   private devices: Map<DeviceType, DeviceConfig>;
@@ -119,7 +112,6 @@ export class DeviceConfigService {
   }
 
   public getAllDevices(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.allDevicesCache) {
       this.allDevicesCache = Array.from(this.devices.values());
     }
@@ -127,7 +119,6 @@ export class DeviceConfigService {
   }
 
   public getPhones(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.phonesCache) {
       this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
     }
@@ -135,7 +126,6 @@ export class DeviceConfigService {
   }
 
   public getTablets(): DeviceConfig[] {
-    // Use cached value if available
     if (!this.tabletsCache) {
       this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
     }

package/src/infrastructure/services/minimalXlsx.ts

@@ -1,15 +1,6 @@
-/**
- * Minimal XLSX writer — replaces the unmaintained npm `xlsx` (SheetJS)
- * dependency, whose registry build carries open prototype-pollution and
- * ReDoS advisories with no registry fix. The report export only ever
- * writes flat tables (header row + primitive cells), so a hand-rolled
- * SpreadsheetML package on top of jszip covers the need: inline-string
- * and numeric cells, multiple sheets, Excel/LibreOffice/Sheets-compatible.
- */
 
 export interface XlsxSheet {
   name: string;
-  /** Rows of primitive cells; the first row is the header. */
   rows: (string | number | boolean | null | undefined)[][];
 }
 
@@ -24,7 +15,6 @@ function escapeXml(value: string): string {
     .replace(/'/g, ''');
 }
 
-/** Excel sheet names: max 31 chars, no : \ / ? * [ ]. */
 function safeSheetName(name: string, index: number): string {
   const cleaned = name.replace(/[:\\/?*[\]]/g, ' ').slice(0, 31).trim();
   return cleaned.length > 0 ? cleaned : `Sheet${index + 1}`;
@@ -66,7 +56,6 @@ function sheetXml(rows: XlsxSheet['rows']): string {
   return `${XML_HEADER}<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><sheetData>${body}</sheetData></worksheet>`;
 }
 
-/** Assembles the sheets into a .xlsx zip blob using jszip. */
 export async function writeXlsxBlob(sheets: XlsxSheet[], JSZip: typeof import('jszip')): Promise<Blob> {
   const zip = new JSZip();
   const safeNames = sheets.map((sheet, index) => safeSheetName(sheet.name, index));

package/src/presentation/hooks/useCanvasExport.ts

@@ -1,7 +1,3 @@
-/**
- * useCanvasExport Hook
- * React hook for canvas export operations
- */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { CanvasExportOptions, CanvasResult } from '../../domain/types/canvas.types';
@@ -9,16 +5,10 @@ import type { CanvasConfig } from '../../domain/config/CanvasConfig';
 import { DEFAULT_CANVAS_CONFIG } from '../../domain/config/CanvasConfig';
 import { CanvasRenderer } from '../../infrastructure/renderers/CanvasRenderer';
 
-/**
- * useCanvasExport hook options
- */
 export interface UseCanvasExportOptions {
   config?: CanvasConfig;
 }
 
-/**
- * useCanvasExport hook return
- */
 export interface UseCanvasExportReturn {
   isExporting: boolean;
   progress: number;
@@ -40,9 +30,6 @@ export interface UseCanvasExportReturn {
   cloneCanvas: (canvas: HTMLCanvasElement) => HTMLCanvasElement | null;
 }
 
-/**
- * useCanvasExport hook
- */
 export function useCanvasExport(
   options: UseCanvasExportOptions = {}
 ): UseCanvasExportReturn {
@@ -52,26 +39,22 @@ export function useCanvasExport(
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
-  // 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
+        } catch {
         }
       });
+
       urlCleanupRef.current = [];
     };
   }, []);
@@ -91,7 +74,6 @@ export function useCanvasExport(
         const result = await rendererRef.current.exportToBlob(canvas, options);
         setProgress(100);
 
-        // Track URL for cleanup
         if (result?.url) {
           urlCleanupRef.current.push(result.url);
         }
@@ -154,10 +136,8 @@ 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);

package/src/presentation/hooks/useReportExport.ts

@@ -1,7 +1,3 @@
-/**
- * useReportExport Hook
- * React hook for report export operations
- */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import type { ReportData } from '../../domain/types/report.types';
@@ -11,9 +7,6 @@ import type {
 } from '../../domain/types/report.types';
 import { ReportService } from '../../application/services/ReportService';
 
-/**
- * useReportExport hook return
- */
 export interface UseReportExportReturn {
   isExporting: boolean;
   error: string | null;
@@ -40,17 +33,12 @@ export interface UseReportExportReturn {
   ) => void;
 }
 
-/**
- * useReportExport hook
- */
 export function useReportExport(): UseReportExportReturn {
   const [isExporting, setIsExporting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // 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();
   }