senangwebs-photobooth 1.0.1 → 2.0.2

package/src/js/layers/LayerManager.js

@@ -0,0 +1,459 @@
+/**
+ * SenangWebs Studio - Layer Manager
+ * Managing multiple layers
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+import { Layer } from './Layer.js';
+
+export class LayerManager {
+  constructor(app) {
+    this.app = app;
+    this.layers = [];
+    this.activeLayer = null;
+  }
+
+  /**
+   * Initialize with default background layer
+   * @param {number} width - Canvas width
+   * @param {number} height - Canvas height
+   */
+  init(width, height) {
+    this.clear();
+    
+    // Create background layer
+    const bgLayer = this.addLayer({
+      name: 'Background',
+      type: 'raster'
+    });
+    
+    bgLayer.initCanvas(width, height);
+    bgLayer.fill('#ffffff');
+    
+    this.setActiveLayer(bgLayer.id);
+  }
+
+  /**
+   * Add a new layer
+   * @param {Object} options - Layer options
+   * @returns {Layer}
+   */
+  addLayer(options = {}) {
+    const layer = new Layer(options);
+    layer.app = this.app;
+    
+    // Initialize canvas if dimensions available
+    if (!layer.canvas && this.app.canvas) {
+      layer.initCanvas(this.app.canvas.width, this.app.canvas.height);
+    }
+    
+    // Insert at top (or at specified index)
+    const insertIndex = options.index !== undefined ? options.index : this.layers.length;
+    this.layers.splice(insertIndex, 0, layer);
+    
+    // Set as active if no active layer
+    if (!this.activeLayer) {
+      this.activeLayer = layer;
+    }
+    
+    this.app.events.emit(Events.LAYER_ADD, { layer, index: insertIndex });
+    
+    return layer;
+  }
+
+  /**
+   * Remove a layer
+   * @param {string} layerId - Layer ID
+   * @returns {boolean}
+   */
+  removeLayer(layerId) {
+    const index = this.layers.findIndex(l => l.id === layerId);
+    if (index === -1) return false;
+    
+    // Don't remove the last layer
+    if (this.layers.length === 1) {
+      console.warn('Cannot remove the last layer');
+      return false;
+    }
+    
+    const removed = this.layers.splice(index, 1)[0];
+    
+    // Update active layer if needed
+    if (this.activeLayer?.id === layerId) {
+      this.activeLayer = this.layers[Math.min(index, this.layers.length - 1)];
+    }
+    
+    this.app.events.emit(Events.LAYER_REMOVE, { layer: removed, index });
+    this.app.canvas.scheduleRender();
+    
+    return true;
+  }
+
+  /**
+   * Get layer by ID
+   * @param {string} layerId - Layer ID
+   * @returns {Layer|null}
+   */
+  getLayer(layerId) {
+    return this.layers.find(l => l.id === layerId) || null;
+  }
+
+  /**
+   * Get all layers
+   * @returns {Layer[]}
+   */
+  getLayers() {
+    return [...this.layers];
+  }
+
+  /**
+   * Get visible layers
+   * @returns {Layer[]}
+   */
+  getVisibleLayers() {
+    return this.layers.filter(l => l.visible);
+  }
+
+  /**
+   * Set active layer
+   * @param {string} layerId - Layer ID
+   */
+  setActiveLayer(layerId) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      this.activeLayer = layer;
+      this.app.events.emit(Events.LAYER_SELECT, { layer });
+    }
+  }
+
+  /**
+   * Get active layer
+   * @returns {Layer|null}
+   */
+  getActiveLayer() {
+    return this.activeLayer;
+  }
+
+  /**
+   * Move layer to new position
+   * @param {string} layerId - Layer ID
+   * @param {number} newIndex - New index
+   */
+  moveLayer(layerId, newIndex) {
+    const currentIndex = this.layers.findIndex(l => l.id === layerId);
+    if (currentIndex === -1) return;
+    
+    const [layer] = this.layers.splice(currentIndex, 1);
+    this.layers.splice(newIndex, 0, layer);
+    
+    this.app.events.emit(Events.LAYER_REORDER, { layer, oldIndex: currentIndex, newIndex });
+    this.app.canvas.scheduleRender();
+  }
+
+  /**
+   * Move layer up
+   * @param {string} layerId - Layer ID
+   */
+  moveLayerUp(layerId) {
+    const index = this.layers.findIndex(l => l.id === layerId);
+    if (index < this.layers.length - 1) {
+      this.moveLayer(layerId, index + 1);
+    }
+  }
+
+  /**
+   * Move layer down
+   * @param {string} layerId - Layer ID
+   */
+  moveLayerDown(layerId) {
+    const index = this.layers.findIndex(l => l.id === layerId);
+    if (index > 0) {
+      this.moveLayer(layerId, index - 1);
+    }
+  }
+
+  /**
+   * Rename layer
+   * @param {string} layerId - Layer ID
+   * @param {string} name - New name
+   */
+  renameLayer(layerId, name) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      layer.name = name;
+      this.app.events.emit(Events.LAYER_RENAME, { layer, name });
+    }
+  }
+
+  /**
+   * Set layer visibility
+   * @param {string} layerId - Layer ID
+   * @param {boolean} visible - Visibility
+   */
+  setLayerVisibility(layerId, visible) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      layer.visible = visible;
+      this.app.events.emit(Events.LAYER_VISIBILITY, { layer, visible });
+      this.app.canvas.scheduleRender();
+    }
+  }
+
+  /**
+   * Set layer opacity
+   * @param {string} layerId - Layer ID
+   * @param {number} opacity - Opacity (0-100)
+   */
+  setLayerOpacity(layerId, opacity) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      layer.opacity = Math.max(0, Math.min(100, opacity));
+      this.app.events.emit(Events.LAYER_OPACITY, { layer, opacity: layer.opacity });
+      this.app.canvas.scheduleRender();
+    }
+  }
+
+  /**
+   * Set layer blend mode
+   * @param {string} layerId - Layer ID
+   * @param {string} blendMode - Blend mode
+   */
+  setLayerBlendMode(layerId, blendMode) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      layer.blendMode = blendMode;
+      this.app.events.emit(Events.LAYER_BLEND_MODE, { layer, blendMode });
+      this.app.canvas.scheduleRender();
+    }
+  }
+
+  /**
+   * Lock/unlock layer
+   * @param {string} layerId - Layer ID
+   * @param {boolean} locked - Lock state
+   */
+  setLayerLocked(layerId, locked) {
+    const layer = this.getLayer(layerId);
+    if (layer) {
+      layer.locked = locked;
+      this.app.events.emit(Events.LAYER_LOCK, { layer, locked });
+    }
+  }
+
+  /**
+   * Duplicate layer
+   * @param {string} layerId - Layer ID
+   * @returns {Layer|null}
+   */
+  duplicateLayer(layerId) {
+    const layer = this.getLayer(layerId);
+    if (!layer) return null;
+    
+    const cloned = layer.clone();
+    cloned.app = this.app;
+    
+    const index = this.layers.findIndex(l => l.id === layerId);
+    this.layers.splice(index + 1, 0, cloned);
+    
+    this.app.events.emit(Events.LAYER_DUPLICATE, { original: layer, duplicate: cloned });
+    this.app.canvas.scheduleRender();
+    
+    return cloned;
+  }
+
+  /**
+   * Merge layer with layer below
+   * @param {string} layerId - Layer ID
+   */
+  mergeDown(layerId) {
+    const index = this.layers.findIndex(l => l.id === layerId);
+    if (index <= 0) return; // Can't merge bottom layer
+    
+    const topLayer = this.layers[index];
+    const bottomLayer = this.layers[index - 1];
+    
+    if (topLayer.locked || bottomLayer.locked) {
+      console.warn('Cannot merge locked layers');
+      return;
+    }
+    
+    // Draw top layer onto bottom layer
+    bottomLayer.ctx.save();
+    bottomLayer.ctx.globalAlpha = topLayer.opacity / 100;
+    bottomLayer.ctx.globalCompositeOperation = topLayer.getCompositeOperation();
+    bottomLayer.ctx.translate(topLayer.position.x, topLayer.position.y);
+    bottomLayer.ctx.drawImage(topLayer.canvas, 0, 0);
+    bottomLayer.ctx.restore();
+    
+    // Remove top layer
+    this.layers.splice(index, 1);
+    
+    if (this.activeLayer?.id === layerId) {
+      this.activeLayer = bottomLayer;
+    }
+    
+    this.app.events.emit(Events.LAYER_MERGE, { merged: bottomLayer, removed: topLayer });
+    this.app.canvas.scheduleRender();
+  }
+
+  /**
+   * Merge all visible layers
+   * @returns {Layer}
+   */
+  mergeVisible() {
+    const visibleLayers = this.getVisibleLayers();
+    if (visibleLayers.length === 0) return null;
+    
+    // Create new layer for merged result
+    const mergedLayer = new Layer({
+      name: 'Merged',
+      type: 'raster'
+    });
+    mergedLayer.app = this.app;
+    mergedLayer.initCanvas(this.app.canvas.width, this.app.canvas.height);
+    
+    // Composite visible layers
+    visibleLayers.forEach(layer => {
+      mergedLayer.ctx.save();
+      mergedLayer.ctx.globalAlpha = layer.opacity / 100;
+      mergedLayer.ctx.globalCompositeOperation = layer.getCompositeOperation();
+      mergedLayer.ctx.translate(layer.position.x, layer.position.y);
+      if (layer.canvas) {
+        mergedLayer.ctx.drawImage(layer.canvas, 0, 0);
+      }
+      mergedLayer.ctx.restore();
+    });
+    
+    // Remove old visible layers and add merged
+    this.layers = this.layers.filter(l => !l.visible);
+    this.layers.push(mergedLayer);
+    this.activeLayer = mergedLayer;
+    
+    this.app.canvas.scheduleRender();
+    
+    return mergedLayer;
+  }
+
+  /**
+   * Flatten all layers into one
+   * @returns {Layer}
+   */
+  flatten() {
+    const flatLayer = new Layer({
+      name: 'Background',
+      type: 'raster'
+    });
+    flatLayer.app = this.app;
+    flatLayer.initCanvas(this.app.canvas.width, this.app.canvas.height);
+    
+    // Fill with white background
+    flatLayer.fill('#ffffff');
+    
+    // Composite all layers
+    this.layers.forEach(layer => {
+      if (!layer.visible) return;
+      
+      flatLayer.ctx.save();
+      flatLayer.ctx.globalAlpha = layer.opacity / 100;
+      flatLayer.ctx.globalCompositeOperation = layer.getCompositeOperation();
+      flatLayer.ctx.translate(layer.position.x, layer.position.y);
+      if (layer.canvas) {
+        flatLayer.ctx.drawImage(layer.canvas, 0, 0);
+      }
+      flatLayer.ctx.restore();
+    });
+    
+    this.layers = [flatLayer];
+    this.activeLayer = flatLayer;
+    
+    this.app.canvas.scheduleRender();
+    
+    return flatLayer;
+  }
+
+  /**
+   * Render all layers to context
+   * @param {CanvasRenderingContext2D} ctx - Target context
+   */
+  render(ctx) {
+    // Render layers from bottom to top
+    this.layers.forEach(layer => {
+      if (layer.visible) {
+        layer.render(ctx);
+      }
+    });
+  }
+
+  /**
+   * Clear all layers
+   */
+  clear() {
+    this.layers = [];
+    this.activeLayer = null;
+  }
+
+  /**
+   * Delete content in selection on active layer
+   */
+  deleteSelection() {
+    if (!this.activeLayer || this.activeLayer.locked) return;
+    
+    if (!this.app.selection?.hasSelection()) {
+      // No selection - remove the active layer entirely (if more than one layer)
+      if (this.layers.length > 1) {
+        const layerId = this.activeLayer.id;
+        this.removeLayer(layerId);
+        this.app.history.pushState('Delete Layer');
+      } else {
+        // Only one layer - just clear its content
+        this.activeLayer.clear();
+        this.app.canvas.scheduleRender();
+        this.app.history.pushState('Clear Layer');
+      }
+    } else {
+      // Clear selection area
+      this.app.selection.clearSelection(this.activeLayer);
+      this.app.canvas.scheduleRender();
+      this.app.history.pushState('Delete Selection');
+    }
+  }
+
+  /**
+   * Serialize all layers to JSON
+   * @returns {Array}
+   */
+  toJSON() {
+    return this.layers.map(l => l.toJSON());
+  }
+
+  /**
+   * Load layers from JSON
+   * @param {Array} layersData - Layers data
+   */
+  async fromJSON(layersData) {
+    this.clear();
+    
+    for (const data of layersData) {
+      const layer = await Layer.fromJSON(data);
+      layer.app = this.app;
+      this.layers.push(layer);
+    }
+    
+    if (this.layers.length > 0) {
+      this.activeLayer = this.layers[this.layers.length - 1];
+    }
+    
+    this.app.canvas.scheduleRender();
+  }
+
+  /**
+   * Get layer count
+   * @returns {number}
+   */
+  get count() {
+    return this.layers.length;
+  }
+}
+
+export default LayerManager;

package/src/js/selection/Selection.js

@@ -0,0 +1,167 @@
+/**
+ * SenangWebs Studio - Selection System
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+
+export class Selection {
+  constructor(app) {
+    this.app = app;
+    this.path = null;
+    this.bounds = null;
+    this.shape = 'rectangle';
+    this.feather = 0;
+    this.marchingAntsOffset = 0;
+    this.animationId = null;
+  }
+
+  hasSelection() {
+    return this.path !== null || this.bounds !== null;
+  }
+
+  setRect(x, y, width, height, shape = 'rectangle') {
+    this.bounds = { x, y, width, height };
+    this.shape = shape;
+    this.path = null;
+    this.startMarchingAnts();
+    this.app.events.emit(Events.SELECTION_CREATE, { bounds: this.bounds, shape });
+  }
+
+  setPath(points) {
+    this.path = points;
+    this.bounds = this.calculatePathBounds(points);
+    this.shape = 'freeform';
+    this.startMarchingAnts();
+    this.app.events.emit(Events.SELECTION_CREATE, { bounds: this.bounds, path: this.path });
+  }
+
+  calculatePathBounds(points) {
+    if (!points || points.length === 0) return null;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    points.forEach(p => {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x);
+      maxY = Math.max(maxY, p.y);
+    });
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+
+  clear() {
+    this.path = null;
+    this.bounds = null;
+    this.stopMarchingAnts();
+    this.app.events.emit(Events.SELECTION_CLEAR);
+    this.app.canvas.scheduleRender();
+  }
+
+  selectAll() {
+    this.setRect(0, 0, this.app.canvas.width, this.app.canvas.height);
+  }
+
+  deselect() {
+    this.clear();
+  }
+
+  invert() {
+    // TODO: Implement selection inversion
+    this.app.events.emit(Events.SELECTION_INVERT);
+  }
+
+  isPointInSelection(x, y) {
+    if (!this.hasSelection()) return true;
+    if (this.shape === 'ellipse' && this.bounds) {
+      const cx = this.bounds.x + this.bounds.width / 2;
+      const cy = this.bounds.y + this.bounds.height / 2;
+      const rx = this.bounds.width / 2;
+      const ry = this.bounds.height / 2;
+      return Math.pow(x - cx, 2) / Math.pow(rx, 2) + Math.pow(y - cy, 2) / Math.pow(ry, 2) <= 1;
+    }
+    if (this.bounds) {
+      return x >= this.bounds.x && x <= this.bounds.x + this.bounds.width &&
+             y >= this.bounds.y && y <= this.bounds.y + this.bounds.height;
+    }
+    return true;
+  }
+
+  startMarchingAnts() {
+    this.stopMarchingAnts();
+    const animate = () => {
+      this.marchingAntsOffset = (this.marchingAntsOffset + 0.5) % 10;
+      this.app.canvas.scheduleRender();
+      this.animationId = requestAnimationFrame(animate);
+    };
+    this.animationId = requestAnimationFrame(animate);
+  }
+
+  stopMarchingAnts() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+
+  render(ctx) {
+    if (!this.hasSelection()) return;
+    
+    ctx.save();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    ctx.lineDashOffset = -this.marchingAntsOffset;
+    
+    if (this.shape === 'ellipse' && this.bounds) {
+      ctx.beginPath();
+      ctx.ellipse(this.bounds.x + this.bounds.width/2, this.bounds.y + this.bounds.height/2,
+                  this.bounds.width/2, this.bounds.height/2, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    } else if (this.path) {
+      ctx.beginPath();
+      ctx.moveTo(this.path[0].x, this.path[0].y);
+      this.path.slice(1).forEach(p => ctx.lineTo(p.x, p.y));
+      ctx.closePath();
+      ctx.stroke();
+    } else if (this.bounds) {
+      ctx.strokeRect(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
+    }
+    
+    // White stroke for contrast
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineDashOffset = -this.marchingAntsOffset + 5;
+    if (this.shape === 'ellipse' && this.bounds) {
+      ctx.beginPath();
+      ctx.ellipse(this.bounds.x + this.bounds.width/2, this.bounds.y + this.bounds.height/2,
+                  this.bounds.width/2, this.bounds.height/2, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    } else if (this.bounds) {
+      ctx.strokeRect(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
+    }
+    
+    ctx.restore();
+  }
+
+  clearSelection(layer) {
+    if (!this.hasSelection() || !layer.ctx) return;
+    const ctx = layer.ctx;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-out';
+    
+    if (this.shape === 'ellipse' && this.bounds) {
+      ctx.beginPath();
+      ctx.ellipse(this.bounds.x + this.bounds.width/2, this.bounds.y + this.bounds.height/2,
+                  this.bounds.width/2, this.bounds.height/2, 0, 0, Math.PI * 2);
+      ctx.fill();
+    } else if (this.bounds) {
+      ctx.fillRect(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
+    }
+    
+    ctx.restore();
+  }
+
+  destroy() {
+    this.stopMarchingAnts();
+  }
+}
+
+export default Selection;