@umituz/web-canvas 1.0.5 → 1.0.7

package/dist/chunk-UOGTEMIJ.mjs

@@ -1,712 +0,0 @@
-import {
-  DEFAULT_CANVAS_CONFIG,
-  DEVICE_DIMENSIONS
-} from "./chunk-MC6PNV2F.mjs";
-
-// src/infrastructure/renderers/CanvasRenderer.ts
-var CanvasRenderer = class {
-  constructor(config = DEFAULT_CANVAS_CONFIG) {
-    this.config = { ...DEFAULT_CANVAS_CONFIG, ...config };
-    this.imageCache = /* @__PURE__ */ new Map();
-  }
-  /**
-   * Create a new canvas element
-   */
-  createCanvas(dimensions) {
-    const canvas = document.createElement("canvas");
-    canvas.width = dimensions.width;
-    canvas.height = dimensions.height;
-    return canvas;
-  }
-  /**
-   * Get canvas 2D context
-   */
-  getContext(canvas) {
-    return canvas.getContext("2d");
-  }
-  /**
-   * Apply context configuration
-   */
-  configureContext(ctx, config) {
-    if (config.fillStyle !== void 0) {
-      ctx.fillStyle = config.fillStyle;
-    }
-    if (config.strokeStyle !== void 0) {
-      ctx.strokeStyle = config.strokeStyle;
-    }
-    if (config.lineWidth !== void 0) {
-      ctx.lineWidth = config.lineWidth;
-    }
-    if (config.lineCap !== void 0) {
-      ctx.lineCap = config.lineCap;
-    }
-    if (config.lineJoin !== void 0) {
-      ctx.lineJoin = config.lineJoin;
-    }
-    if (config.globalAlpha !== void 0) {
-      ctx.globalAlpha = config.globalAlpha;
-    }
-    if (config.font !== void 0) {
-      ctx.font = config.font;
-    }
-    if (config.textAlign !== void 0) {
-      ctx.textAlign = config.textAlign;
-    }
-    if (config.textBaseline !== void 0) {
-      ctx.textBaseline = config.textBaseline;
-    }
-  }
-  /**
-   * Clear canvas
-   */
-  clearCanvas(ctx, dimensions) {
-    ctx.clearRect(0, 0, dimensions.width, dimensions.height);
-  }
-  /**
-   * Fill rectangle
-   */
-  fillRect(ctx, x, y, width, height, color) {
-    if (color) {
-      ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
-  }
-  /**
-   * Stroke rectangle
-   */
-  strokeRect(ctx, x, y, width, height, color, lineWidth) {
-    if (color) {
-      ctx.strokeStyle = color;
-    }
-    if (lineWidth !== void 0) {
-      ctx.lineWidth = lineWidth;
-    }
-    ctx.strokeRect(x, y, width, height);
-  }
-  /**
-   * Draw text
-   */
-  drawText(ctx, text, x, y, config) {
-    if (config) {
-      this.configureContext(ctx, config);
-    }
-    ctx.fillText(text, x, y);
-  }
-  /**
-   * Draw image
-   */
-  async drawImage(ctx, imageSource, x, y, width, height) {
-    let img;
-    if (typeof imageSource === "string") {
-      img = await this.loadImage(imageSource);
-    } else {
-      img = imageSource;
-    }
-    if (width && height) {
-      ctx.drawImage(img, x, y, width, height);
-    } else {
-      ctx.drawImage(img, x, y);
-    }
-  }
-  /**
-   * 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();
-      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
-   */
-  createLinearGradient(ctx, x1, y1, x2, y2, colorStops) {
-    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-    colorStops.forEach(({ offset, color }) => {
-      gradient.addColorStop(offset, color);
-    });
-    return gradient;
-  }
-  /**
-   * Export canvas to blob
-   */
-  async exportToBlob(canvas, options = {}) {
-    const format = options.format || this.config.defaultFormat;
-    const quality = options.quality || this.config.defaultQuality;
-    const scale = options.scale || this.config.scale;
-    const scaledCanvas = (scale || 1) !== 1 ? this.scaleCanvas(canvas, scale || 1) : canvas;
-    const mimeType = `image/${format || "png"}`;
-    const blob = await new Promise((resolve) => {
-      scaledCanvas.toBlob(
-        (result) => resolve(result),
-        mimeType,
-        quality
-      );
-    });
-    if (!blob) {
-      throw new Error("Failed to export canvas to blob");
-    }
-    const url = URL.createObjectURL(blob);
-    return {
-      blob,
-      url,
-      dimensions: {
-        width: scaledCanvas.width,
-        height: scaledCanvas.height
-      },
-      format: format || "png",
-      size: blob.size
-    };
-  }
-  /**
-   * Export canvas to data URL
-   */
-  exportToDataURL(canvas, format, quality) {
-    const mimeType = format || `image/${this.config.defaultFormat}`;
-    const q = quality || this.config.defaultQuality;
-    return canvas.toDataURL(mimeType, q);
-  }
-  /**
-   * Scale canvas
-   */
-  scaleCanvas(canvas, scale) {
-    const scaled = document.createElement("canvas");
-    scaled.width = canvas.width * scale;
-    scaled.height = canvas.height * scale;
-    const ctx = scaled.getContext("2d");
-    if (ctx) {
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(canvas, 0, 0, scaled.width, scaled.height);
-    }
-    return scaled;
-  }
-  /**
-   * Clone canvas
-   */
-  cloneCanvas(canvas) {
-    const clone = document.createElement("canvas");
-    clone.width = canvas.width;
-    clone.height = canvas.height;
-    const ctx = clone.getContext("2d");
-    if (ctx) {
-      ctx.drawImage(canvas, 0, 0);
-    }
-    return clone;
-  }
-};
-
-// 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) {
-      case "dots":
-        this.renderDotPattern(ctx, dimensions, color);
-        break;
-      case "grid":
-        this.renderGridPattern(ctx, dimensions, color);
-        break;
-      case "lines":
-        this.renderLinePattern(ctx, dimensions, color);
-        break;
-      case "waves":
-        this.renderWavePattern(ctx, dimensions, color);
-        break;
-      case "checkers":
-        this.renderCheckerPattern(ctx, dimensions, color);
-        break;
-    }
-    ctx.restore();
-  }
-  /**
-   * 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.moveTo(x + radius, y);
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-      }
-    }
-    ctx.fill();
-  }
-  /**
-   * 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.moveTo(x, 0);
-      ctx.lineTo(x, dimensions.height);
-    }
-    for (let y = 0; y <= dimensions.height; y += spacing) {
-      ctx.moveTo(0, y);
-      ctx.lineTo(dimensions.width, y);
-    }
-    ctx.stroke();
-  }
-  /**
-   * 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.moveTo(0, y);
-      ctx.lineTo(dimensions.width, y);
-    }
-    ctx.stroke();
-  }
-  /**
-   * Render wave pattern - optimized with pre-calculated values
-   */
-  renderWavePattern(ctx, dimensions, color) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    const amplitude = 10;
-    const frequency = 0.1;
-    const spacing = 40;
-    const step = 5;
-    for (let y = spacing; y < dimensions.height; y += spacing) {
-      ctx.beginPath();
-      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;
-        ctx.lineTo(x, waveY);
-      }
-      ctx.stroke();
-    }
-  }
-  /**
-   * Render checker pattern
-   */
-  renderCheckerPattern(ctx, dimensions, color) {
-    ctx.fillStyle = color;
-    const size = 20;
-    for (let x = 0; x < dimensions.width; x += size * 2) {
-      for (let y = 0; y < dimensions.height; y += size * 2) {
-        ctx.fillRect(x, y, size, size);
-        ctx.fillRect(x + size, y + size, size, size);
-      }
-    }
-  }
-};
-
-// 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();
-  }
-  static getInstance() {
-    if (!_DeviceConfigService.instance) {
-      _DeviceConfigService.instance = new _DeviceConfigService();
-    }
-    return _DeviceConfigService.instance;
-  }
-  initializeDevices() {
-    const deviceConfigs = [
-      {
-        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: 2e3, 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;
-      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
-        });
-      }
-    });
-  }
-  getDeviceConfig(deviceType) {
-    return this.devices.get(deviceType);
-  }
-  getAllDevices() {
-    if (!this.allDevicesCache) {
-      this.allDevicesCache = Array.from(this.devices.values());
-    }
-    return this.allDevicesCache;
-  }
-  getPhones() {
-    if (!this.phonesCache) {
-      this.phonesCache = this.getAllDevices().filter((d) => d.isPhone);
-    }
-    return this.phonesCache;
-  }
-  getTablets() {
-    if (!this.tabletsCache) {
-      this.tabletsCache = this.getAllDevices().filter((d) => d.isTablet);
-    }
-    return this.tabletsCache;
-  }
-  isPhone(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.isPhone || false;
-  }
-  isTablet(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.isTablet || false;
-  }
-  hasNotch(deviceType) {
-    const config = this.getDeviceConfig(deviceType);
-    return config?.hasNotch || false;
-  }
-};
-
-// 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
-   */
-  renderDeviceFrame(ctx, dimensions, deviceType, frameStyle, frameColor) {
-    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
-   */
-  renderRealisticFrame(ctx, dimensions, color, thickness) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = thickness;
-    ctx.strokeRect(
-      thickness / 2,
-      thickness / 2,
-      dimensions.width - thickness,
-      dimensions.height - thickness
-    );
-  }
-  /**
-   * Render minimal device frame
-   */
-  renderMinimalFrame(ctx, dimensions, color, thickness) {
-    ctx.strokeStyle = color;
-    ctx.lineWidth = thickness;
-    ctx.strokeRect(0, 0, dimensions.width, dimensions.height);
-  }
-  /**
-   * Render device notch
-   */
-  renderNotch(ctx, dimensions) {
-    ctx.fillStyle = "#1f2937";
-    ctx.beginPath();
-    ctx.arc(dimensions.width / 2, 20, 10, 0, Math.PI * 2);
-    ctx.fill();
-  }
-  /**
-   * Render background - optimized
-   */
-  renderBackground(ctx, design, dimensions) {
-    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
-   */
-  renderTextContent(ctx, content, design, dimensions) {
-    const titleConfig = {
-      fillStyle: design.textColor,
-      font: `bold ${design.titleFontSize}px ${design.fontFamily}`,
-      textAlign: design.textAlign
-    };
-    const subtitleConfig = {
-      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
-   */
-  formatText(text, textCase = "none") {
-    switch (textCase) {
-      case "uppercase":
-        return text.toUpperCase();
-      case "lowercase":
-        return text.toLowerCase();
-      default:
-        return text;
-    }
-  }
-  /**
-   * Render screenshot image
-   */
-  async renderScreenshotImage(ctx, imageUrl, design, dimensions) {
-    if (!imageUrl) return;
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(
-      design.deviceType
-    );
-    if (!deviceConfig) return;
-    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
-   */
-  async renderDesignedScreenshot(content, design) {
-    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");
-    }
-    this.renderBackground(ctx, design, dimensions);
-    if (content.screenshot) {
-      await this.renderScreenshotImage(ctx, content.screenshot, design, dimensions);
-    }
-    this.renderTextContent(ctx, content, design, dimensions);
-    this.renderDeviceFrame(
-      ctx,
-      dimensions,
-      design.deviceType,
-      design.frameStyle,
-      design.deviceColor
-    );
-    return canvas;
-  }
-  /**
-   * Render placeholder content
-   */
-  renderPlaceholderContent(ctx, dimensions, deviceType) {
-    this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, dimensions.height, "#ffffff");
-    this.canvasRenderer.fillRect(ctx, 0, 0, dimensions.width, 60, "#f3f4f6");
-    this.canvasRenderer.fillRect(
-      ctx,
-      0,
-      dimensions.height - 80,
-      dimensions.width,
-      80,
-      "#f3f4f6"
-    );
-    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);
-      }
-    }
-    const deviceConfig = this.deviceConfigService.getDeviceConfig(deviceType);
-    if (deviceConfig) {
-      this.renderDeviceFrame(
-        ctx,
-        dimensions,
-        deviceType,
-        "realistic",
-        "#1f2937"
-      );
-    }
-  }
-};
-
-export {
-  CanvasRenderer,
-  PatternRenderer,
-  DeviceConfigService,
-  ScreenshotRenderer
-};