@umituz/web-canvas 1.2.0 → 1.2.2

package/src/domain/types/screenshot.types.ts

@@ -1,11 +1,4 @@
-/**
- * Screenshot Types
- * Screenshot generation and device frame types
- */
-
-/**
- * Device type
- */
+
 export type DeviceType =
   | 'iphone-15-pro'
   | 'iphone-15'
@@ -16,9 +9,6 @@ export type DeviceType =
   | 'android-tablet'
   | 'desktop';
 
-/**
- * Device type enum (for backward compatibility)
- */
 export const DeviceTypeEnum = {
   IPHONE_15_PRO: 'iphone-15-pro',
   IPHONE_15: 'iphone-15',
@@ -30,37 +20,22 @@ export const DeviceTypeEnum = {
   DESKTOP: 'desktop',
 } as const;
 
-/**
- * Frame style options
- */
 export type FrameStyle = 'realistic' | 'minimal' | 'none';
 
-/**
- * Frame style enum (for backward compatibility)
- */
 export const FrameStyleEnum = {
   REALISTIC: 'realistic',
   MINIMAL: 'minimal',
   NONE: 'none',
 } as const;
 
-/**
- * Layout style options
- */
 export type LayoutStyle = 'text-top' | 'text-bottom' | 'text-overlay';
 
-/**
- * Layout style enum (for backward compatibility)
- */
 export const LayoutStyleEnum = {
   TEXT_TOP: 'text-top',
   TEXT_BOTTOM: 'text-bottom',
   TEXT_OVERLAY: 'text-overlay',
 } as const;
 
-/**
- * Background pattern options
- */
 export type BackgroundPattern =
   | 'none'
   | 'dots'
@@ -69,9 +44,6 @@ export type BackgroundPattern =
   | 'waves'
   | 'checkers';
 
-/**
- * Background pattern enum (for backward compatibility)
- */
 export const BackgroundPatternEnum = {
   NONE: 'none',
   DOTS: 'dots',
@@ -81,37 +53,22 @@ export const BackgroundPatternEnum = {
   CHECKERS: 'checkers',
 } as const;
 
-/**
- * Screenshot format
- */
 export type ScreenshotFormat = 'png' | 'jpeg' | 'webp';
 
-/**
- * Screenshot format enum (for backward compatibility)
- */
 export const ScreenshotFormatEnum = {
   PNG: 'png',
   JPEG: 'jpeg',
   WEBP: 'webp',
 } as const;
 
-/**
- * Language code
- */
 export type Language = string;
 
-/**
- * Device dimensions
- */
 export interface DeviceDimensions {
   width: number;
   height: number;
   scale?: number;
 }
 
-/**
- * Device configuration
- */
 export interface DeviceConfig {
   type: DeviceType;
   name: string;
@@ -123,9 +80,6 @@ export interface DeviceConfig {
   frameThickness?: number;
 }
 
-/**
- * Screenshot content
- */
 export interface ScreenshotContent {
   id: string;
   title: string;
@@ -138,9 +92,6 @@ export interface ScreenshotContent {
   imageAnchorY?: number;
 }
 
-/**
- * Screenshot design
- */
 export interface ScreenshotDesign {
   backgroundColor: string;
   backgroundGradientEnd?: string | null;
@@ -175,9 +126,6 @@ export interface ScreenshotDesign {
   isPanoramic?: boolean;
 }
 
-/**
- * Screenshot metadata
- */
 export interface ScreenshotMetadata {
   id: string;
   deviceType: DeviceType;
@@ -188,9 +136,6 @@ export interface ScreenshotMetadata {
   url: string;
 }
 
-/**
- * Screenshot generation options
- */
 export interface ScreenshotGenerationOptions {
   deviceType: DeviceType;
   format?: ScreenshotFormat;
@@ -198,9 +143,6 @@ export interface ScreenshotGenerationOptions {
   customDimensions?: DeviceDimensions;
 }
 
-/**
- * Screenshot template
- */
 export interface ScreenshotTemplate {
   id: string;
   name: string;
@@ -209,9 +151,6 @@ export interface ScreenshotTemplate {
   thumbnail?: string;
 }
 
-/**
- * App Store metadata
- */
 export interface AppStoreMetadata {
   appName: string;
   subtitle: string;
@@ -221,9 +160,6 @@ export interface AppStoreMetadata {
   whatsNew: string;
 }
 
-/**
- * Screenshot project
- */
 export interface ScreenshotProject {
   id: string;
   name: string;

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(