@umituz/web-canvas 1.0.0

package/dist/infrastructure/index.js

@@ -0,0 +1,714 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/infrastructure/index.ts
+var infrastructure_exports = {};
+__export(infrastructure_exports, {
+  CanvasRenderer: () => CanvasRenderer,
+  DeviceConfigService: () => DeviceConfigService,
+  PatternRenderer: () => PatternRenderer,
+  ScreenshotRenderer: () => ScreenshotRenderer
+});
+module.exports = __toCommonJS(infrastructure_exports);
+
+// src/domain/config/DeviceConfig.ts
+var DEVICE_DIMENSIONS = {
+  "iphone-15-pro": { width: 1290, height: 2796 },
+  "iphone-15": { width: 1179, height: 2556 },
+  "iphone-se": { width: 1080, height: 2340 },
+  "ipad-pro": { width: 2048, height: 2732 },
+  "ipad": { width: 1620, height: 2160 },
+  "android-phone": { width: 1440, height: 3120 },
+  "android-tablet": { width: 2e3, height: 2200 },
+  "desktop": { width: 1920, height: 1080 }
+};
+var DEFAULT_DEVICE_CONFIG = {
+  devices: Object.keys(DEVICE_DIMENSIONS),
+  defaultDevice: "iphone-15-pro",
+  showFrame: true,
+  frameColor: "#1f2937",
+  frameThickness: 8
+};
+
+// src/infrastructure/services/DeviceConfigService.ts
+var DeviceConfigService = class _DeviceConfigService {
+  constructor() {
+    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() {
+    return Array.from(this.devices.values());
+  }
+  getPhones() {
+    return this.getAllDevices().filter((d) => d.isPhone);
+  }
+  getTablets() {
+    return this.getAllDevices().filter((d) => d.isTablet);
+  }
+  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/domain/config/CanvasConfig.ts
+var DEFAULT_CANVAS_CONFIG = {
+  defaultFormat: "png",
+  defaultQuality: 0.9,
+  maxDimension: 4096,
+  scale: 2,
+  backgroundColor: "#ffffff",
+  useCORS: true
+};
+
+// src/infrastructure/renderers/CanvasRenderer.ts
+var CanvasRenderer = class {
+  constructor(config = DEFAULT_CANVAS_CONFIG) {
+    this.config = { ...DEFAULT_CANVAS_CONFIG, ...config };
+  }
+  /**
+   * 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
+   */
+  loadImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = this.config.useCORS ? "anonymous" : void 0;
+      img.onload = () => resolve(img);
+      img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+      img.src = url;
+    });
+  }
+  /**
+   * 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 {
+  /**
+   * Render pattern on canvas
+   */
+  renderPattern(ctx, pattern, dimensions, color = "#000000") {
+    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;
+      case "none":
+      default:
+        break;
+    }
+    ctx.restore();
+  }
+  /**
+   * Render dot pattern
+   */
+  renderDotPattern(ctx, dimensions, color) {
+    ctx.fillStyle = color;
+    const spacing = 30;
+    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();
+      }
+    }
+  }
+  /**
+   * Render grid pattern
+   */
+  renderGridPattern(ctx, dimensions, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    const spacing = 30;
+    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();
+    }
+  }
+  /**
+   * Render line pattern
+   */
+  renderLinePattern(ctx, dimensions, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    const spacing = 20;
+    for (let y = spacing; y < dimensions.height; y += spacing) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(dimensions.width, y);
+      ctx.stroke();
+    }
+  }
+  /**
+   * Render wave pattern
+   */
+  renderWavePattern(ctx, dimensions, color) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    const amplitude = 10;
+    const frequency = 0.1;
+    const spacing = 40;
+    for (let y = spacing; y < dimensions.height; y += spacing) {
+      ctx.beginPath();
+      for (let x = 0; x <= dimensions.width; x += 5) {
+        const waveY = y + Math.sin(x * frequency) * amplitude;
+        if (x === 0) {
+          ctx.moveTo(x, waveY);
+        } else {
+          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/renderers/ScreenshotRenderer.ts
+var ScreenshotRenderer = class {
+  constructor() {
+    this.canvasRenderer = new CanvasRenderer();
+    this.patternRenderer = new PatternRenderer();
+    this.deviceConfigService = DeviceConfigService.getInstance();
+  }
+  /**
+   * 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
+   */
+  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"
+      );
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CanvasRenderer,
+  DeviceConfigService,
+  PatternRenderer,
+  ScreenshotRenderer
+});

package/dist/infrastructure/index.mjs

@@ -0,0 +1,13 @@
+import {
+  CanvasRenderer,
+  DeviceConfigService,
+  PatternRenderer,
+  ScreenshotRenderer
+} from "../chunk-WMKPCJFI.mjs";
+import "../chunk-MC6PNV2F.mjs";
+export {
+  CanvasRenderer,
+  DeviceConfigService,
+  PatternRenderer,
+  ScreenshotRenderer
+};