@umituz/react-native-image 1.1.6 → 1.2.1

package/src/infrastructure/utils/FilterProcessor.ts

@@ -0,0 +1,361 @@
+/**
+ * Infrastructure - Filter Processor
+ * 
+ * Real-time filter processing with preview
+ */
+
+export interface FilterPreset {
+  id: string;
+  name: string;
+  category: 'basic' | 'color' | 'artistic' | 'vintage';
+  parameters: FilterParameter[];
+  preview?: string;
+}
+
+export interface FilterParameter {
+  name: string;
+  type: 'slider' | 'color' | 'boolean';
+  min?: number;
+  max?: number;
+  value: number | string | boolean;
+  step?: number;
+  label: string;
+}
+
+export interface FilterState {
+  id: string;
+  intensity: number;
+  parameters: Record<string, any>;
+  enabled: boolean;
+}
+
+export class FilterProcessor {
+  private static readonly PRESETS: FilterPreset[] = [
+    {
+      id: 'brightness',
+      name: 'Brightness',
+      category: 'basic',
+      parameters: [
+        {
+          name: 'brightness',
+          type: 'slider',
+          min: -100,
+          max: 100,
+          value: 0,
+          label: 'Brightness',
+        },
+      ],
+    },
+    {
+      id: 'contrast',
+      name: 'Contrast',
+      category: 'basic',
+      parameters: [
+        {
+          name: 'contrast',
+          type: 'slider',
+          min: -100,
+          max: 100,
+          value: 0,
+          label: 'Contrast',
+        },
+      ],
+    },
+    {
+      id: 'saturation',
+      name: 'Saturation',
+      category: 'color',
+      parameters: [
+        {
+          name: 'saturation',
+          type: 'slider',
+          min: -100,
+          max: 100,
+          value: 0,
+          label: 'Saturation',
+        },
+      ],
+    },
+    {
+      id: 'vintage',
+      name: 'Vintage',
+      category: 'vintage',
+      parameters: [
+        {
+          name: 'intensity',
+          type: 'slider',
+          min: 0,
+          max: 100,
+          value: 50,
+          label: 'Intensity',
+        },
+        {
+          name: 'warmth',
+          type: 'slider',
+          min: 0,
+          max: 100,
+          value: 30,
+          label: 'Warmth',
+        },
+      ],
+    },
+    {
+      id: 'blur',
+      name: 'Blur',
+      category: 'artistic',
+      parameters: [
+        {
+          name: 'radius',
+          type: 'slider',
+          min: 0,
+          max: 20,
+          value: 0,
+          label: 'Blur Radius',
+        },
+      ],
+    },
+  ];
+
+  static getPresets(category?: string): FilterPreset[] {
+    if (category) {
+      return this.PRESETS.filter(preset => preset.category === category);
+    }
+    return this.PRESETS;
+  }
+
+  static getPreset(id: string): FilterPreset | undefined {
+    return this.PRESETS.find(preset => preset.id === id);
+  }
+
+  static createFilterState(presetId: string): FilterState {
+    const preset = this.getPreset(presetId);
+    if (!preset) {
+      throw new Error(`Filter preset not found: ${presetId}`);
+    }
+
+    const parameters: Record<string, any> = {};
+    preset.parameters.forEach(param => {
+      parameters[param.name] = param.value;
+    });
+
+    return {
+      id: presetId,
+      intensity: 100,
+      parameters,
+      enabled: true,
+    };
+  }
+
+  static applyFilter(
+    imageData: ImageData,
+    filterState: FilterState
+  ): ImageData {
+    const preset = this.getPreset(filterState.id);
+    if (!preset || !filterState.enabled) {
+      return imageData;
+    }
+
+    let processedData = new Uint8ClampedArray(imageData.data);
+
+    // Apply filter based on preset type
+    switch (filterState.id) {
+      case 'brightness':
+        processedData = this.applyBrightness(processedData, filterState.parameters.brightness) as any;
+        break;
+      case 'contrast':
+        processedData = this.applyContrast(processedData, filterState.parameters.contrast) as any;
+        break;
+      case 'saturation':
+        processedData = this.applySaturation(processedData, filterState.parameters.saturation) as any;
+        break;
+      case 'vintage':
+        processedData = this.applyVintage(processedData, filterState.parameters.intensity, filterState.parameters.warmth) as any;
+        break;
+      case 'blur':
+        processedData = this.applyBlur(processedData, filterState.parameters.radius) as any;
+        break;
+    }
+
+    // Apply intensity
+    if (filterState.intensity < 100) {
+      processedData = this.applyIntensity(imageData.data, processedData, filterState.intensity / 100) as any;
+    }
+
+    return {
+      ...imageData,
+      data: processedData,
+    };
+  }
+
+  private static applyBrightness(
+    data: Uint8ClampedArray,
+    brightness: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = brightness * 2.55; // Convert -100 to 100 to -255 to 255
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, result[i] + adjustment));
+      result[i + 1] = Math.min(255, Math.max(0, result[i + 1] + adjustment));
+      result[i + 2] = Math.min(255, Math.max(0, result[i + 2] + adjustment));
+    }
+
+    return result;
+  }
+
+  private static applyContrast(
+    data: Uint8ClampedArray,
+    contrast: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, factor * (result[i] - 128) + 128));
+      result[i + 1] = Math.min(255, Math.max(0, factor * (result[i + 1] - 128) + 128));
+      result[i + 2] = Math.min(255, Math.max(0, factor * (result[i + 2] - 128) + 128));
+    }
+
+    return result;
+  }
+
+  private static applySaturation(
+    data: Uint8ClampedArray,
+    saturation: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = 1 + (saturation / 100);
+
+    for (let i = 0; i < result.length; i += 4) {
+      const r = result[i];
+      const g = result[i + 1];
+      const b = result[i + 2];
+
+      const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+
+      result[i] = Math.min(255, Math.max(0, gray + adjustment * (r - gray)));
+      result[i + 1] = Math.min(255, Math.max(0, gray + adjustment * (g - gray)));
+      result[i + 2] = Math.min(255, Math.max(0, gray + adjustment * (b - gray)));
+    }
+
+    return result;
+  }
+
+  private static applyVintage(
+    data: Uint8ClampedArray,
+    intensity: number,
+    warmth: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = intensity / 100;
+    const warmFactor = warmth / 100;
+
+    for (let i = 0; i < result.length; i += 4) {
+      let r = result[i];
+      let g = result[i + 1];
+      let b = result[i + 2];
+
+      // Apply sepia effect
+      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
+      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
+      const tb = 0.272 * r + 0.534 * g + 0.131 * b;
+
+      // Mix with original based on intensity
+      r = r * (1 - factor) + tr * factor;
+      g = g * (1 - factor) + tg * factor;
+      b = b * (1 - factor) + tb * factor;
+
+      // Apply warmth
+      if (warmFactor > 0) {
+        result[i] = Math.min(255, r + warmFactor * 20);
+        result[i + 1] = Math.min(255, g + warmFactor * 10);
+        result[i + 2] = Math.min(255, b * (1 - warmFactor * 0.3));
+      } else {
+        result[i] = r;
+        result[i + 1] = g;
+        result[i + 2] = Math.min(255, b * (1 - Math.abs(warmFactor) * 0.3));
+      }
+    }
+
+    return result;
+  }
+
+  private static applyBlur(
+    data: Uint8ClampedArray,
+    radius: number
+  ): Uint8ClampedArray {
+    // Simple box blur implementation
+    const result = new Uint8ClampedArray(data);
+    const width = Math.sqrt(data.length / 4);
+    const height = width;
+    const size = Math.floor(radius) || 1;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+
+        for (let dy = -size; dy <= size; dy++) {
+          for (let dx = -size; dx <= size; dx++) {
+            const ny = y + dy;
+            const nx = x + dx;
+
+            if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
+              const idx = (ny * width + nx) * 4;
+              r += data[idx];
+              g += data[idx + 1];
+              b += data[idx + 2];
+              a += data[idx + 3];
+              count++;
+            }
+          }
+        }
+
+        const idx = (y * width + x) * 4;
+        result[idx] = r / count;
+        result[idx + 1] = g / count;
+        result[idx + 2] = b / count;
+        result[idx + 3] = a / count;
+      }
+    }
+
+    return result;
+  }
+
+  private static applyIntensity(
+    originalData: Uint8ClampedArray,
+    processedData: Uint8ClampedArray,
+    intensity: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(originalData.length);
+
+    for (let i = 0; i < originalData.length; i++) {
+      result[i] = originalData[i] * (1 - intensity) + processedData[i] * intensity;
+    }
+
+    return result;
+  }
+
+  static createPreview(
+    imageData: ImageData,
+    filterState: FilterState,
+    previewSize: { width: number; height: number }
+  ): ImageData {
+    // Create a smaller preview version
+    const previewCanvas = document.createElement('canvas') || {} as any;
+    previewCanvas.width = previewSize.width;
+    previewCanvas.height = previewSize.height;
+    const ctx = previewCanvas.getContext('2d');
+
+    if (!ctx) return imageData;
+
+    // Scale down the image for preview
+    ctx.drawImage(
+      {} as HTMLImageElement, // Would be the actual image
+      0, 0, previewSize.width, previewSize.height
+    );
+
+    const previewImageData = ctx.getImageData(0, 0, previewSize.width, previewSize.height);
+    return this.applyFilter(previewImageData, filterState);
+  }
+}

package/src/infrastructure/utils/LayerManager.ts

@@ -0,0 +1,158 @@
+/**
+ * Infrastructure - Layer Manager
+ * 
+ * Manages editor layers with composition and rendering
+ */
+
+export type LayerOperation = 'add' | 'remove' | 'move' | 'merge' | 'duplicate';
+
+export interface LayerComposition {
+  width: number;
+  height: number;
+  backgroundColor?: string;
+}
+
+export class LayerManager {
+  static composeLayers(
+    layers: Array<{
+      canvas: HTMLCanvasElement | any;
+      opacity: number;
+      visible: boolean;
+      x?: number;
+      y?: number;
+    }>,
+    composition: LayerComposition
+  ): HTMLCanvasElement | any {
+    // Create composition canvas
+    const composedCanvas = document.createElement('canvas') || {} as any;
+    composedCanvas.width = composition.width;
+    composedCanvas.height = composition.height;
+    const ctx = composedCanvas.getContext('2d');
+
+    if (!ctx) return composedCanvas;
+
+    // Clear canvas with background color
+    ctx.fillStyle = composition.backgroundColor || '#ffffff';
+    ctx.fillRect(0, 0, composition.width, composition.height);
+
+    // Draw each layer
+    layers.forEach(layer => {
+      if (!layer.visible) return;
+
+      ctx.save();
+      ctx.globalAlpha = layer.opacity;
+      ctx.drawImage(
+        layer.canvas,
+        layer.x || 0,
+        layer.y || 0
+      );
+      ctx.restore();
+    });
+
+    return composedCanvas;
+  }
+
+  static mergeLayers(
+    layers: Array<{
+      id: string;
+      name: string;
+      elements: any[];
+    }>,
+    targetIds: string[]
+  ): Array<{
+    id: string;
+    name: string;
+    elements: any[];
+  }> {
+    const targetLayers = layers.filter(layer => targetIds.includes(layer.id));
+    const otherLayers = layers.filter(layer => !targetIds.includes(layer.id));
+
+    if (targetLayers.length === 0) return layers;
+
+    // Merge elements from target layers
+    const mergedElements = targetLayers.flatMap(layer => layer.elements);
+    const mergedLayer = {
+      id: Math.random().toString(36).substr(2, 9),
+      name: targetLayers.map(l => l.name).join(' + '),
+      elements: mergedElements,
+    };
+
+    return [...otherLayers, mergedLayer];
+  }
+
+  static duplicateLayer(
+    layer: {
+      id: string;
+      name: string;
+      elements: any[];
+    }
+  ): {
+    id: string;
+    name: string;
+    elements: any[];
+  } {
+    return {
+      id: Math.random().toString(36).substr(2, 9),
+      name: `${layer.name} Copy`,
+      elements: [...layer.elements],
+    };
+  }
+
+  static reorderLayers(
+    layers: Array<{ id: string; index?: number }>,
+    fromIndex: number,
+    toIndex: number
+  ): Array<{ id: string; index?: number }> {
+    const result = [...layers];
+    const [moved] = result.splice(fromIndex, 1);
+    result.splice(toIndex, 0, moved);
+    
+    return result.map((layer, index) => ({ ...layer, index }));
+  }
+
+  static flattenLayers(
+    layers: Array<{
+      canvas: HTMLCanvasElement | any;
+      opacity: number;
+      visible: boolean;
+    }>,
+    composition: LayerComposition
+  ): HTMLCanvasElement | any {
+    return LayerManager.composeLayers(layers, composition);
+  }
+
+  static createLayerCanvas(
+    width: number,
+    height: number,
+    transparent: boolean = true
+  ): HTMLCanvasElement | any {
+    const canvas = document.createElement('canvas') || {} as any;
+    canvas.width = width;
+    canvas.height = height;
+    
+    if (!transparent) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, width, height);
+      }
+    }
+
+    return canvas;
+  }
+
+  static clearLayer(
+    canvas: HTMLCanvasElement | any,
+    preserveAlpha: boolean = true
+  ): void {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    if (preserveAlpha) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    } else {
+      ctx.fillStyle = 'transparent';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  }
+}

package/src/infrastructure/utils/ShapeRenderer.ts

@@ -0,0 +1,168 @@
+/**
+ * Infrastructure - Shape Renderer
+ * 
+ * Advanced shape drawing with different styles
+ */
+
+export interface ShapeStyle {
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  dash?: number[];
+  opacity?: number;
+}
+
+export class ShapeRenderer {
+  static drawRoundedRect(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+    
+    if (style.dash) {
+      ctx.setLineDash(style.dash);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawStar(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    outerRadius: number,
+    innerRadius: number,
+    points: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    for (let i = 0; i < points * 2; i++) {
+      const angle = (Math.PI * i) / points - Math.PI / 2;
+      const radius = i % 2 === 0 ? outerRadius : innerRadius;
+      const x = cx + Math.cos(angle) * radius;
+      const y = cy + Math.sin(angle) * radius;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawHeart(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    size: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    const topCurveHeight = size * 0.3;
+    ctx.moveTo(x, y + topCurveHeight);
+
+    // Top left curve
+    ctx.bezierCurveTo(
+      x, y,
+      x - size / 2, y,
+      x - size / 2, y + topCurveHeight
+    );
+
+    // Bottom left curve
+    ctx.bezierCurveTo(
+      x - size / 2, y + (size + topCurveHeight) / 2,
+      x, y + (size + topCurveHeight) / 1.5,
+      x, y + size
+    );
+
+    // Bottom right curve
+    ctx.bezierCurveTo(
+      x, y + (size + topCurveHeight) / 1.5,
+      x + size / 2, y + (size + topCurveHeight) / 2,
+      x + size / 2, y + topCurveHeight
+    );
+
+    // Top right curve
+    ctx.bezierCurveTo(
+      x + size / 2, y,
+      x, y,
+      x, y + topCurveHeight
+    );
+
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawTriangle(
+    ctx: CanvasRenderingContext2D,
+    points: Array<{ x: number; y: number }>,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    ctx.lineTo(points[1].x, points[1].y);
+    ctx.lineTo(points[2].x, points[2].y);
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+}