senangwebs-photobooth 1.0.2 → 2.0.2

package/src/js/filters/FilterManager.js

@@ -0,0 +1,248 @@
+/**
+ * SenangWebs Studio - Filter Manager
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+
+export class FilterManager {
+  constructor(app) {
+    this.app = app;
+    this.previewActive = false;
+    this.originalImageData = null;
+  }
+
+  startPreview() {
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer?.ctx) return;
+    this.originalImageData = layer.ctx.getImageData(0, 0, layer.width, layer.height);
+    this.previewActive = true;
+  }
+
+  cancelPreview() {
+    if (!this.previewActive || !this.originalImageData) return;
+    const layer = this.app.layers.getActiveLayer();
+    if (layer?.ctx) {
+      layer.ctx.putImageData(this.originalImageData, 0, 0);
+      this.app.canvas.scheduleRender();
+    }
+    this.originalImageData = null;
+    this.previewActive = false;
+    this.app.events.emit(Events.FILTER_CANCEL);
+  }
+
+  applyFilter(filterName, options = {}) {
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer?.ctx) return;
+    
+    // Use original image data if preview was active, otherwise get current
+    const imageData = this.originalImageData 
+      ? new ImageData(
+          new Uint8ClampedArray(this.originalImageData.data),
+          this.originalImageData.width, 
+          this.originalImageData.height
+        )
+      : layer.ctx.getImageData(0, 0, layer.width, layer.height);
+    
+    const filtered = this.processFilter(filterName, imageData, options);
+    
+    layer.ctx.putImageData(filtered, 0, 0);
+    this.originalImageData = null;
+    this.previewActive = false;
+    
+    this.app.history.pushState(`Filter: ${filterName}`);
+    this.app.canvas.scheduleRender();
+    this.app.events.emit(Events.FILTER_APPLY, { filter: filterName, options });
+  }
+
+  previewFilter(filterName, options = {}) {
+    if (!this.previewActive) this.startPreview();
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer?.ctx || !this.originalImageData) return;
+    
+    const filtered = this.processFilter(filterName, new ImageData(
+      new Uint8ClampedArray(this.originalImageData.data),
+      this.originalImageData.width, this.originalImageData.height
+    ), options);
+    
+    layer.ctx.putImageData(filtered, 0, 0);
+    this.app.canvas.scheduleRender();
+    this.app.events.emit(Events.FILTER_PREVIEW, { filter: filterName, options });
+  }
+
+  processFilter(filterName, imageData, options) {
+    switch (filterName) {
+      case 'brightness': return this.adjustBrightness(imageData, options.value || 0);
+      case 'contrast': return this.adjustContrast(imageData, options.value || 0);
+      case 'saturation': return this.adjustSaturation(imageData, options.value || 0);
+      case 'grayscale': return this.grayscale(imageData);
+      case 'sepia': return this.sepia(imageData);
+      case 'invert': return this.invert(imageData);
+      case 'blur': return this.blur(imageData, options.radius || 5);
+      case 'sharpen': return this.sharpen(imageData, options.amount || 1);
+      case 'hueRotate': return this.hueRotate(imageData, options.angle || 0);
+      default: return imageData;
+    }
+  }
+
+  adjustBrightness(imageData, value) {
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = Math.min(255, Math.max(0, data[i] + value));
+      data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + value));
+      data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + value));
+    }
+    return imageData;
+  }
+
+  adjustContrast(imageData, value) {
+    const data = imageData.data;
+    const factor = (259 * (value + 255)) / (255 * (259 - value));
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
+      data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
+      data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
+    }
+    return imageData;
+  }
+
+  adjustSaturation(imageData, value) {
+    const data = imageData.data;
+    const factor = 1 + value / 100;
+    for (let i = 0; i < data.length; i += 4) {
+      const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+      data[i] = Math.min(255, Math.max(0, gray + factor * (data[i] - gray)));
+      data[i + 1] = Math.min(255, Math.max(0, gray + factor * (data[i + 1] - gray)));
+      data[i + 2] = Math.min(255, Math.max(0, gray + factor * (data[i + 2] - gray)));
+    }
+    return imageData;
+  }
+
+  grayscale(imageData) {
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+      data[i] = data[i + 1] = data[i + 2] = gray;
+    }
+    return imageData;
+  }
+
+  sepia(imageData) {
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i], g = data[i + 1], b = data[i + 2];
+      data[i] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
+      data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
+      data[i + 2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
+    }
+    return imageData;
+  }
+
+  invert(imageData) {
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = 255 - data[i];
+      data[i + 1] = 255 - data[i + 1];
+      data[i + 2] = 255 - data[i + 2];
+    }
+    return imageData;
+  }
+
+  blur(imageData, radius) {
+    // Simple box blur
+    const data = imageData.data;
+    const width = imageData.width;
+    const height = imageData.height;
+    const result = new Uint8ClampedArray(data);
+    
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, count = 0;
+        for (let dy = -radius; dy <= radius; dy++) {
+          for (let dx = -radius; dx <= radius; dx++) {
+            const nx = x + dx, ny = y + dy;
+            if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+              const idx = (ny * width + nx) * 4;
+              r += data[idx]; g += data[idx + 1]; b += data[idx + 2];
+              count++;
+            }
+          }
+        }
+        const idx = (y * width + x) * 4;
+        result[idx] = r / count;
+        result[idx + 1] = g / count;
+        result[idx + 2] = b / count;
+      }
+    }
+    
+    return new ImageData(result, width, height);
+  }
+
+  sharpen(imageData, amount) {
+    const kernel = [0, -amount, 0, -amount, 1 + 4 * amount, -amount, 0, -amount, 0];
+    return this.convolve(imageData, kernel);
+  }
+
+  hueRotate(imageData, angle) {
+    const data = imageData.data;
+    const cos = Math.cos(angle * Math.PI / 180);
+    const sin = Math.sin(angle * Math.PI / 180);
+    
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i], g = data[i + 1], b = data[i + 2];
+      data[i] = Math.min(255, Math.max(0, r * (0.213 + cos * 0.787 - sin * 0.213) +
+        g * (0.715 - cos * 0.715 - sin * 0.715) + b * (0.072 - cos * 0.072 + sin * 0.928)));
+      data[i + 1] = Math.min(255, Math.max(0, r * (0.213 - cos * 0.213 + sin * 0.143) +
+        g * (0.715 + cos * 0.285 + sin * 0.140) + b * (0.072 - cos * 0.072 - sin * 0.283)));
+      data[i + 2] = Math.min(255, Math.max(0, r * (0.213 - cos * 0.213 - sin * 0.787) +
+        g * (0.715 - cos * 0.715 + sin * 0.715) + b * (0.072 + cos * 0.928 + sin * 0.072)));
+    }
+    return imageData;
+  }
+
+  convolve(imageData, kernel) {
+    const data = imageData.data;
+    const width = imageData.width;
+    const height = imageData.height;
+    const result = new Uint8ClampedArray(data);
+    const kSize = Math.sqrt(kernel.length);
+    const half = Math.floor(kSize / 2);
+    
+    for (let y = half; y < height - half; y++) {
+      for (let x = half; x < width - half; x++) {
+        let r = 0, g = 0, b = 0;
+        for (let ky = 0; ky < kSize; ky++) {
+          for (let kx = 0; kx < kSize; kx++) {
+            const idx = ((y + ky - half) * width + (x + kx - half)) * 4;
+            const k = kernel[ky * kSize + kx];
+            r += data[idx] * k;
+            g += data[idx + 1] * k;
+            b += data[idx + 2] * k;
+          }
+        }
+        const idx = (y * width + x) * 4;
+        result[idx] = Math.min(255, Math.max(0, r));
+        result[idx + 1] = Math.min(255, Math.max(0, g));
+        result[idx + 2] = Math.min(255, Math.max(0, b));
+      }
+    }
+    
+    return new ImageData(result, width, height);
+  }
+
+  getAvailableFilters() {
+    return [
+      { name: 'brightness', label: 'Brightness', hasOptions: true },
+      { name: 'contrast', label: 'Contrast', hasOptions: true },
+      { name: 'saturation', label: 'Saturation', hasOptions: true },
+      { name: 'hueRotate', label: 'Hue/Saturation', hasOptions: true },
+      { name: 'grayscale', label: 'Grayscale', hasOptions: false },
+      { name: 'sepia', label: 'Sepia', hasOptions: false },
+      { name: 'invert', label: 'Invert', hasOptions: false },
+      { name: 'blur', label: 'Blur', hasOptions: true },
+      { name: 'sharpen', label: 'Sharpen', hasOptions: true }
+    ];
+  }
+}
+
+export default FilterManager;

package/src/js/index.js

@@ -0,0 +1,48 @@
+/**
+ * SenangWebs Photobooth (SWP) - Module Exports
+ * @version 2.0.0
+ */
+
+// Core
+export { EventEmitter, Events } from './core/EventEmitter.js';
+export { Canvas } from './core/Canvas.js';
+export { History } from './core/History.js';
+export { Keyboard } from './core/Keyboard.js';
+
+// Layers
+export { Layer } from './layers/Layer.js';
+export { LayerManager } from './layers/LayerManager.js';
+export { BlendModes, applyBlendMode, getBlendModeList } from './layers/BlendModes.js';
+
+// Tools
+export { BaseTool } from './tools/BaseTool.js';
+export { ToolManager } from './tools/ToolManager.js';
+export { MoveTool } from './tools/MoveTool.js';
+export { BrushTool } from './tools/BrushTool.js';
+export { EraserTool } from './tools/EraserTool.js';
+export { ShapeTool } from './tools/ShapeTool.js';
+export { TextTool } from './tools/TextTool.js';
+export { CropTool } from './tools/CropTool.js';
+export { ZoomTool } from './tools/ZoomTool.js';
+export { HandTool } from './tools/HandTool.js';
+export { EyedropperTool } from './tools/EyedropperTool.js';
+export { GradientTool } from './tools/GradientTool.js';
+export { FillTool } from './tools/FillTool.js';
+export { MarqueeTool } from './tools/MarqueeTool.js';
+
+// Selection
+export { Selection } from './selection/Selection.js';
+
+// Filters
+export { FilterManager } from './filters/FilterManager.js';
+
+// UI
+export { UI } from './ui/UI.js';
+export { ColorManager } from './ui/ColorManager.js';
+
+// IO
+export { FileManager } from './io/FileManager.js';
+export { Clipboard } from './io/Clipboard.js';
+
+// Main
+export { default as SWP } from './swp.js';

package/src/js/io/Clipboard.js

@@ -0,0 +1,52 @@
+/**
+ * SenangWebs Studio - Clipboard Manager
+ * @version 2.0.0
+ */
+
+export class Clipboard {
+  constructor(app) {
+    this.app = app;
+    this.data = null;
+    this.type = null;
+  }
+
+  copy() {
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer?.canvas) return;
+    
+    const selection = this.app.selection;
+    
+    if (selection?.hasSelection() && selection.bounds) {
+      const { x, y, width, height } = selection.bounds;
+      this.data = layer.ctx.getImageData(x, y, width, height);
+      this.type = 'imageData';
+    } else {
+      this.data = layer.canvas.toDataURL();
+      this.type = 'dataURL';
+    }
+  }
+
+  cut() {
+    this.copy();
+    this.app.layers.deleteSelection();
+  }
+
+  async paste() {
+    if (!this.data) return;
+    
+    const layer = this.app.layers.addLayer({ name: 'Pasted Layer' });
+    
+    if (this.type === 'imageData') {
+      layer.initCanvas(this.data.width, this.data.height);
+      layer.ctx.putImageData(this.data, 0, 0);
+    } else if (this.type === 'dataURL') {
+      await layer.loadFromDataURL(this.data);
+    }
+    
+    this.app.layers.setActiveLayer(layer.id);
+    this.app.history.pushState('Paste');
+    this.app.canvas.scheduleRender();
+  }
+}
+
+export default Clipboard;

package/src/js/io/FileManager.js

@@ -0,0 +1,150 @@
+/**
+ * SenangWebs Studio - File Manager
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+
+export class FileManager {
+  constructor(app) {
+    this.app = app;
+    this.projectName = 'Untitled';
+    this.projectData = null;
+    this.hasUnsavedChanges = false;
+    
+    this.app.events.on(Events.CHANGE, () => {
+      this.hasUnsavedChanges = true;
+    });
+  }
+
+  newDocument(options = {}) {
+    const width = options.width || 1920;
+    const height = options.height || 1080;
+    const background = options.background || '#ffffff';
+    
+    this.app.canvas.resize(width, height);
+    this.app.layers.init(width, height);
+    
+    if (background !== 'transparent') {
+      const bgLayer = this.app.layers.getLayers()[0];
+      if (bgLayer) bgLayer.fill(background);
+    }
+    
+    this.app.history.init();
+    this.projectName = 'Untitled';
+    this.hasUnsavedChanges = false;
+    
+    this.app.canvas.fitToScreen();
+    this.app.events.emit(Events.DOCUMENT_NEW, { width, height });
+  }
+
+  async open() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*,.sws';
+    
+    return new Promise((resolve) => {
+      input.onchange = async (e) => {
+        const file = e.target.files[0];
+        if (!file) return resolve(null);
+        
+        if (file.name.endsWith('.sws')) {
+          await this.openProject(file);
+        } else {
+          await this.openImage(file);
+        }
+        resolve(file);
+      };
+      input.click();
+    });
+  }
+
+  async openImage(file) {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    
+    return new Promise((resolve, reject) => {
+      img.onload = () => {
+        this.newDocument({ width: img.width, height: img.height });
+        const layer = this.app.layers.getActiveLayer();
+        if (layer) {
+          layer.ctx.drawImage(img, 0, 0);
+          this.app.history.pushState('Open Image');
+        }
+        URL.revokeObjectURL(url);
+        this.projectName = file.name.replace(/\.[^/.]+$/, '');
+        this.app.events.emit(Events.DOCUMENT_OPEN, { name: this.projectName });
+        resolve();
+      };
+      img.onerror = reject;
+      img.src = url;
+    });
+  }
+
+  async openProject(file) {
+    const text = await file.text();
+    const project = JSON.parse(text);
+    
+    this.app.canvas.resize(project.width, project.height);
+    await this.app.layers.fromJSON(project.layers);
+    
+    this.projectName = project.name || file.name.replace('.sws', '');
+    this.hasUnsavedChanges = false;
+    this.app.history.init();
+    this.app.canvas.fitToScreen();
+    this.app.events.emit(Events.DOCUMENT_OPEN, { name: this.projectName });
+  }
+
+  async save() {
+    const project = {
+      name: this.projectName,
+      version: '2.0.0',
+      width: this.app.canvas.width,
+      height: this.app.canvas.height,
+      layers: this.app.layers.toJSON()
+    };
+    
+    const blob = new Blob([JSON.stringify(project)], { type: 'application/json' });
+    this.downloadBlob(blob, `${this.projectName}.sws`);
+    
+    this.hasUnsavedChanges = false;
+    this.app.events.emit(Events.DOCUMENT_SAVE, { name: this.projectName });
+  }
+
+  async saveAs() {
+    const name = prompt('Project name:', this.projectName);
+    if (name) {
+      this.projectName = name;
+      await this.save();
+    }
+  }
+
+  async export(format = 'png', quality = 1) {
+    const dataURL = this.app.canvas.toDataURL(`image/${format}`, quality);
+    const link = document.createElement('a');
+    link.download = `${this.projectName}.${format}`;
+    link.href = dataURL;
+    link.click();
+    
+    this.app.events.emit(Events.DOCUMENT_EXPORT, { format, name: this.projectName });
+  }
+
+  async exportAs() {
+    const format = prompt('Format (png, jpeg, webp):', 'png');
+    if (format && ['png', 'jpeg', 'webp'].includes(format)) {
+      const quality = format === 'png' ? 1 : parseFloat(prompt('Quality (0.1-1.0):', '0.9')) || 0.9;
+      await this.export(format, quality);
+    }
+  }
+
+  downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+}
+
+export default FileManager;