@umituz/web-canvas 1.0.0

package/src/infrastructure/renderers/ScreenshotRenderer.ts

@@ -0,0 +1,331 @@
+/**
+ * Screenshot Renderer
+ * Device frame and screenshot rendering operations
+ */
+
+import type {
+  CanvasDimensions,
+  CanvasContextConfig,
+} from '../../domain/types/canvas.types';
+import type {
+  DeviceType,
+  ScreenshotContent,
+  ScreenshotDesign,
+  FrameStyle,
+  LayoutStyle,
+} from '../../domain/types/screenshot.types';
+import { CanvasRenderer } from './CanvasRenderer';
+import { PatternRenderer } from './PatternRenderer';
+import { DeviceConfigService } from '../services/DeviceConfigService';
+
+export class ScreenshotRenderer {
+  private canvasRenderer: CanvasRenderer;
+  private patternRenderer: PatternRenderer;
+  private deviceConfigService: DeviceConfigService;
+
+  constructor() {
+    this.canvasRenderer = new CanvasRenderer();
+    this.patternRenderer = new PatternRenderer();
+    this.deviceConfigService = DeviceConfigService.getInstance();
+  }
+
+  /**
+   * Render device frame
+   */
+  public renderDeviceFrame(
+    ctx: CanvasRenderingContext2D,
+    dimensions: CanvasDimensions,
+    deviceType: DeviceType,
+    frameStyle: FrameStyle,
+    frameColor: string
+  ): void {
+    const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
+    if (!deviceConfig) return;
+
+    if (frameStyle === 'none') return;
+
+    const isPhone = this.deviceConfigService.isPhone(deviceType);
+    const isTablet = this.deviceConfigService.isTablet(deviceType);
+
+    if (!isPhone && !isTablet) return;
+
+    const frameThickness = deviceConfig.frameThickness || 8;
+
+    if (frameStyle === 'realistic') {
+      this.renderRealisticFrame(ctx, dimensions, frameColor, frameThickness);
+      if (isPhone && this.deviceConfigService.hasNotch(deviceType)) {
+        this.renderNotch(ctx, dimensions);
+      }
+    } else if (frameStyle === 'minimal') {
+      this.renderMinimalFrame(ctx, dimensions, frameColor, frameThickness);
+    }
+  }
+
+  /**
+   * Render realistic device frame
+   */
+  private renderRealisticFrame(
+    ctx: CanvasRenderingContext2D,
+    dimensions: CanvasDimensions,
+    color: string,
+    thickness: number
+  ): void {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.strokeRect(
+      thickness / 2,
+      thickness / 2,
+      dimensions.width - thickness,
+      dimensions.height - thickness
+    );
+  }
+
+  /**
+   * Render minimal device frame
+   */
+  private renderMinimalFrame(
+    ctx: CanvasRenderingContext2D,
+    dimensions: CanvasDimensions,
+    color: string,
+    thickness: number
+  ): void {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = thickness;
+    ctx.strokeRect(0, 0, dimensions.width, dimensions.height);
+  }
+
+  /**
+   * Render device notch
+   */
+  private renderNotch(
+    ctx: CanvasRenderingContext2D,
+    dimensions: CanvasDimensions
+  ): void {
+    ctx.fillStyle = '#1f2937';
+    ctx.beginPath();
+    ctx.arc(dimensions.width / 2, 20, 10, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  /**
+   * Render background
+   */
+  public renderBackground(
+    ctx: CanvasRenderingContext2D,
+    design: ScreenshotDesign,
+    dimensions: CanvasDimensions
+  ): void {
+    if (design.backgroundGradientEnd) {
+      const gradient = this.canvasRenderer.createLinearGradient(
+        ctx,
+        0,
+        0,
+        dimensions.width,
+        dimensions.height,
+        [
+          { offset: 0, color: design.backgroundColor },
+          { offset: 1, color: design.backgroundGradientEnd },
+        ]
+      );
+      ctx.fillStyle = gradient;
+    } else {
+      ctx.fillStyle = design.backgroundColor;
+    }
+
+    ctx.fillRect(0, 0, dimensions.width, dimensions.height);
+
+    if (design.backgroundPattern && design.backgroundPattern !== 'none') {
+      this.patternRenderer.renderPattern(
+        ctx,
+        design.backgroundPattern,
+        dimensions
+      );
+    }
+  }
+
+  /**
+   * Render text content
+   */
+  public renderTextContent(
+    ctx: CanvasRenderingContext2D,
+    content: ScreenshotContent,
+    design: ScreenshotDesign,
+    dimensions: CanvasDimensions
+  ): void {
+    const titleConfig: CanvasContextConfig = {
+      fillStyle: design.textColor,
+      font: `bold ${design.titleFontSize}px ${design.fontFamily}`,
+      textAlign: design.textAlign,
+    };
+
+    const subtitleConfig: CanvasContextConfig = {
+      fillStyle: design.textColor,
+      font: `${design.subtitleFontSize}px ${design.fontFamily}`,
+      textAlign: design.textAlign,
+    };
+
+    const titleY =
+      design.layout === 'text-bottom'
+        ? dimensions.height - 150
+        : 100 + (design.offsetY || 0);
+
+    this.canvasRenderer.drawText(
+      ctx,
+      this.formatText(content.title, design.textCase),
+      dimensions.width / 2,
+      titleY,
+      titleConfig
+    );
+
+    const subtitleY = titleY + design.titleFontSize + (design.gap || 20);
+    this.canvasRenderer.drawText(
+      ctx,
+      this.formatText(content.subtitle, design.textCase),
+      dimensions.width / 2,
+      subtitleY,
+      subtitleConfig
+    );
+  }
+
+  /**
+   * Format text case
+   */
+  private formatText(
+    text: string,
+    textCase: 'uppercase' | 'lowercase' | 'none' = 'none'
+  ): string {
+    switch (textCase) {
+      case 'uppercase':
+        return text.toUpperCase();
+      case 'lowercase':
+        return text.toLowerCase();
+      default:
+        return text;
+    }
+  }
+
+  /**
+   * Render screenshot image
+   */
+  public async renderScreenshotImage(
+    ctx: CanvasRenderingContext2D,
+    imageUrl: string,
+    design: ScreenshotDesign,
+    dimensions: CanvasDimensions
+  ): Promise<void> {
+    if (!imageUrl) return;
+
+    const deviceConfig = this.deviceConfigService.getDeviceConfig(
+      design.deviceType
+    );
+    if (!deviceConfig) return;
+
+    // Calculate screenshot area (inside device frame)
+    const frameThickness = deviceConfig.frameThickness || 8;
+    const padding = 60 + frameThickness;
+    const screenshotWidth = dimensions.width - padding * 2;
+    const screenshotHeight = dimensions.height - padding * 2;
+
+    try {
+      await this.canvasRenderer.drawImage(
+        ctx,
+        imageUrl,
+        padding,
+        padding,
+        screenshotWidth,
+        screenshotHeight
+      );
+    } catch (error) {
+      console.error('Failed to render screenshot image:', error);
+    }
+  }
+
+  /**
+   * Render complete screenshot
+   */
+  public async renderDesignedScreenshot(
+    content: ScreenshotContent,
+    design: ScreenshotDesign
+  ): Promise<HTMLCanvasElement> {
+    const deviceConfig =
+      this.deviceConfigService.getDeviceConfig(design.deviceType);
+    if (!deviceConfig) {
+      throw new Error(`Device config not found: ${design.deviceType}`);
+    }
+
+    const dimensions = deviceConfig.dimensions;
+    const canvas = this.canvasRenderer.createCanvas(dimensions);
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+      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,
+      design.deviceType,
+      design.frameStyle,
+      design.deviceColor
+    );
+
+    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,
+      0,
+      dimensions.height - 80,
+      dimensions.width,
+      80,
+      '#f3f4f6'
+    );
+
+    // Placeholder content blocks
+    ctx.fillStyle = '#e5e7eb';
+    for (let i = 0; i < 5; i++) {
+      const y = 80 + i * 120;
+      const height = Math.min(100, dimensions.height - y - 100);
+      if (y < dimensions.height - 100) {
+        this.canvasRenderer.fillRect(ctx, 20, y, dimensions.width - 40, height);
+      }
+    }
+
+    // Device frame
+    const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
+    if (deviceConfig) {
+      this.renderDeviceFrame(
+        ctx,
+        dimensions,
+        deviceType,
+        'realistic',
+        '#1f2937'
+      );
+    }
+  }
+}

package/src/infrastructure/services/DeviceConfigService.ts

@@ -0,0 +1,144 @@
+/**
+ * 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>;
+
+  private constructor() {
+    this.devices = new Map();
+    this.initializeDevices();
+  }
+
+  public static getInstance(): DeviceConfigService {
+    if (!DeviceConfigService.instance) {
+      DeviceConfigService.instance = new DeviceConfigService();
+    }
+    return DeviceConfigService.instance;
+  }
+
+  private initializeDevices(): void {
+    const deviceConfigs: Omit<DeviceConfig, 'type'>[] = [
+      {
+        name: 'iPhone 15 Pro',
+        dimensions: { width: 1290, height: 2796, scale: 3 },
+        isPhone: true,
+        hasNotch: true,
+        cornerRadius: 20,
+        frameThickness: 8,
+      },
+      {
+        name: 'iPhone 15',
+        dimensions: { width: 1179, height: 2556, scale: 3 },
+        isPhone: true,
+        hasNotch: true,
+        cornerRadius: 20,
+        frameThickness: 8,
+      },
+      {
+        name: 'iPhone SE',
+        dimensions: { width: 1080, height: 2340, scale: 3 },
+        isPhone: true,
+        hasNotch: false,
+        cornerRadius: 16,
+        frameThickness: 6,
+      },
+      {
+        name: 'iPad Pro',
+        dimensions: { width: 2048, height: 2732, scale: 2 },
+        isTablet: true,
+        hasNotch: false,
+        cornerRadius: 24,
+        frameThickness: 10,
+      },
+      {
+        name: 'iPad',
+        dimensions: { width: 1620, height: 2160, scale: 2 },
+        isTablet: true,
+        hasNotch: false,
+        cornerRadius: 20,
+        frameThickness: 10,
+      },
+      {
+        name: 'Android Phone',
+        dimensions: { width: 1440, height: 3120, scale: 3 },
+        isPhone: true,
+        hasNotch: false,
+        cornerRadius: 24,
+        frameThickness: 8,
+      },
+      {
+        name: 'Android Tablet',
+        dimensions: { width: 2000, height: 2200, scale: 2 },
+        isTablet: true,
+        hasNotch: false,
+        cornerRadius: 24,
+        frameThickness: 10,
+      },
+      {
+        name: 'Desktop',
+        dimensions: { width: 1920, height: 1080, scale: 1 },
+        isPhone: false,
+        isTablet: false,
+        hasNotch: false,
+        cornerRadius: 0,
+        frameThickness: 0,
+      },
+    ];
+
+    Object.entries(DEVICE_DIMENSIONS).forEach(([type, dimensions]) => {
+      const deviceType = type as DeviceType;
+      const config = deviceConfigs.find((_, index) => {
+        const types = Object.keys(DEVICE_DIMENSIONS);
+        return types[index] === type;
+      });
+
+      if (config) {
+        this.devices.set(deviceType, {
+          type: deviceType,
+          ...config,
+          dimensions,
+        });
+      }
+    });
+  }
+
+  public getDeviceConfig(deviceType: DeviceType): DeviceConfig | undefined {
+    return this.devices.get(deviceType);
+  }
+
+  public getAllDevices(): DeviceConfig[] {
+    return Array.from(this.devices.values());
+  }
+
+  public getPhones(): DeviceConfig[] {
+    return this.getAllDevices().filter((d) => d.isPhone);
+  }
+
+  public getTablets(): DeviceConfig[] {
+    return this.getAllDevices().filter((d) => d.isTablet);
+  }
+
+  public isPhone(deviceType: DeviceType): boolean {
+    const config = this.getDeviceConfig(deviceType);
+    return config?.isPhone || false;
+  }
+
+  public isTablet(deviceType: DeviceType): boolean {
+    const config = this.getDeviceConfig(deviceType);
+    return config?.isTablet || false;
+  }
+
+  public hasNotch(deviceType: DeviceType): boolean {
+    const config = this.getDeviceConfig(deviceType);
+    return config?.hasNotch || false;
+  }
+}

package/src/presentation/hooks/useCanvasExport.ts

@@ -0,0 +1,162 @@
+/**
+ * useCanvasExport Hook
+ * React hook for canvas export operations
+ */
+
+import { useState, useCallback } 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';
+import { CanvasRenderer } from '../../infrastructure/renderers/CanvasRenderer';
+
+/**
+ * useCanvasExport hook options
+ */
+export interface UseCanvasExportOptions {
+  config?: CanvasConfig;
+}
+
+/**
+ * useCanvasExport hook return
+ */
+export interface UseCanvasExportReturn {
+  isExporting: boolean;
+  progress: number;
+  error: string | null;
+  exportToBlob: (
+    canvas: HTMLCanvasElement,
+    options?: CanvasExportOptions
+  ) => Promise<CanvasResult | null>;
+  exportToDataURL: (
+    canvas: HTMLCanvasElement,
+    format?: string,
+    quality?: number
+  ) => string | null;
+  downloadCanvas: (
+    canvas: HTMLCanvasElement,
+    filename: string,
+    options?: CanvasExportOptions
+  ) => Promise<void>;
+  cloneCanvas: (canvas: HTMLCanvasElement) => HTMLCanvasElement | null;
+}
+
+/**
+ * useCanvasExport hook
+ */
+export function useCanvasExport(
+  options: UseCanvasExportOptions = {}
+): UseCanvasExportReturn {
+  const { config = DEFAULT_CANVAS_CONFIG } = options;
+
+  const [isExporting, setIsExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const renderer = new CanvasRenderer(config);
+
+  const exportToBlob = useCallback(
+    async (
+      canvas: HTMLCanvasElement,
+      options?: CanvasExportOptions
+    ): Promise<CanvasResult | null> => {
+      setIsExporting(true);
+      setProgress(0);
+      setError(null);
+
+      try {
+        const result = await renderer.exportToBlob(canvas, options);
+        setProgress(100);
+        return result;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Export failed';
+        setError(errorMessage);
+        return null;
+      } finally {
+        setIsExporting(false);
+      }
+    },
+    [renderer]
+  );
+
+  const exportToDataURL = useCallback(
+    (
+      canvas: HTMLCanvasElement,
+      format?: string,
+      quality?: number
+    ): string | null => {
+      try {
+        return renderer.exportToDataURL(canvas, format, quality);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Export failed';
+        setError(errorMessage);
+        return null;
+      }
+    },
+    [renderer]
+  );
+
+  const downloadCanvas = useCallback(
+    async (
+      canvas: HTMLCanvasElement,
+      filename: string,
+      options?: CanvasExportOptions
+    ): Promise<void> => {
+      setIsExporting(true);
+      setProgress(0);
+      setError(null);
+
+      try {
+        const result = await exportToBlob(canvas, options);
+        if (!result) {
+          throw new Error('Export failed');
+        }
+
+        setProgress(50);
+
+        const link = document.createElement('a');
+        link.href = result.url;
+        link.download = filename;
+        link.click();
+
+        setProgress(100);
+
+        setTimeout(() => {
+          URL.revokeObjectURL(result.url);
+        }, 100);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Download failed';
+        setError(errorMessage);
+      } finally {
+        setIsExporting(false);
+      }
+    },
+    [exportToBlob]
+  );
+
+  const cloneCanvas = useCallback(
+    (canvas: HTMLCanvasElement): HTMLCanvasElement | null => {
+      try {
+        return renderer.cloneCanvas(canvas);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Clone failed';
+        setError(errorMessage);
+        return null;
+      }
+    },
+    [renderer]
+  );
+
+  return {
+    isExporting,
+    progress,
+    error,
+    exportToBlob,
+    exportToDataURL,
+    downloadCanvas,
+    cloneCanvas,
+  };
+}