senangwebs-photobooth 1.0.1 → 2.0.2

package/src/js/tools/EyedropperTool.js

@@ -0,0 +1,184 @@
+/**
+ * SenangWebs Studio - Eyedropper Tool
+ * Pick color from canvas
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+import { Events } from '../core/EventEmitter.js';
+
+export class EyedropperTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'eyedropper';
+    this.icon = 'eyedropper';
+    this.cursor = 'crosshair';
+    this.shortcut = 'i';
+    
+    this.options = {
+      sampleSize: 'point', // 'point', '3x3', '5x5'
+      sampleLayers: 'current' // 'current', 'all'
+    };
+    this.defaultOptions = { ...this.options };
+    
+    this.previewColor = null;
+  }
+
+  onPointerDown(e) {
+    super.onPointerDown(e);
+    this.pickColor(this.startPoint, !e.altKey);
+  }
+
+  onPointerMove(e) {
+    super.onPointerMove(e);
+    
+    // Preview color on hover
+    if (!this.isDrawing) {
+      this.previewColor = this.getColorAt(this.currentPoint);
+    } else {
+      this.pickColor(this.currentPoint, !e.altKey);
+    }
+    
+    this.app.canvas.scheduleRender();
+  }
+
+  /**
+   * Pick color at point
+   * @param {Object} point - Point
+   * @param {boolean} foreground - Set as foreground (true) or background (false)
+   */
+  pickColor(point, foreground = true) {
+    const color = this.getColorAt(point);
+    
+    if (color) {
+      if (foreground) {
+        this.app.colors.setForeground(color);
+      } else {
+        this.app.colors.setBackground(color);
+      }
+    }
+  }
+
+  /**
+   * Get color at point
+   * @param {Object} point - Point
+   * @returns {string|null} Hex color
+   */
+  getColorAt(point) {
+    const x = Math.floor(point.x);
+    const y = Math.floor(point.y);
+    
+    if (x < 0 || x >= this.app.canvas.width || y < 0 || y >= this.app.canvas.height) {
+      return null;
+    }
+    
+    let ctx;
+    
+    if (this.options.sampleLayers === 'current') {
+      const layer = this.app.layers.getActiveLayer();
+      if (!layer?.ctx) return null;
+      ctx = layer.ctx;
+    } else {
+      // Sample from composite
+      ctx = this.app.canvas.workCtx;
+    }
+    
+    const sampleSize = this.getSampleSize();
+    const halfSize = Math.floor(sampleSize / 2);
+    
+    // Get average color in sample area
+    let r = 0, g = 0, b = 0, count = 0;
+    
+    for (let sy = -halfSize; sy <= halfSize; sy++) {
+      for (let sx = -halfSize; sx <= halfSize; sx++) {
+        const px = x + sx;
+        const py = y + sy;
+        
+        if (px >= 0 && px < this.app.canvas.width && py >= 0 && py < this.app.canvas.height) {
+          const pixel = ctx.getImageData(px, py, 1, 1).data;
+          r += pixel[0];
+          g += pixel[1];
+          b += pixel[2];
+          count++;
+        }
+      }
+    }
+    
+    if (count === 0) return null;
+    
+    r = Math.round(r / count);
+    g = Math.round(g / count);
+    b = Math.round(b / count);
+    
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+  }
+
+  /**
+   * Get sample size from options
+   * @returns {number}
+   */
+  getSampleSize() {
+    switch (this.options.sampleSize) {
+      case '3x3': return 3;
+      case '5x5': return 5;
+      default: return 1;
+    }
+  }
+
+  renderOverlay(ctx) {
+    if (!this.previewColor || !this.currentPoint) return;
+    
+    const x = this.currentPoint.x;
+    const y = this.currentPoint.y;
+    
+    // Draw color preview
+    ctx.save();
+    
+    // Magnifier circle
+    const radius = 30;
+    ctx.beginPath();
+    ctx.arc(x, y - 50, radius, 0, Math.PI * 2);
+    ctx.fillStyle = this.previewColor;
+    ctx.fill();
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    
+    // Color value
+    ctx.fillStyle = '#ffffff';
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText(this.previewColor.toUpperCase(), x, y - 50 + 4);
+    
+    ctx.restore();
+  }
+
+  getOptionsUI() {
+    return {
+      sampleSize: {
+        type: 'select',
+        label: 'Sample Size',
+        options: [
+          { value: 'point', label: 'Point' },
+          { value: '3x3', label: '3×3 Average' },
+          { value: '5x5', label: '5×5 Average' }
+        ],
+        value: this.options.sampleSize
+      },
+      sampleLayers: {
+        type: 'select',
+        label: 'Sample',
+        options: [
+          { value: 'current', label: 'Current Layer' },
+          { value: 'all', label: 'All Layers' }
+        ],
+        value: this.options.sampleLayers
+      }
+    };
+  }
+}
+
+export default EyedropperTool;

package/src/js/tools/FillTool.js

@@ -0,0 +1,109 @@
+/**
+ * SenangWebs Studio - Fill Tool (Paint Bucket)
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class FillTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'fill';
+    this.icon = 'fill';
+    this.cursor = 'crosshair';
+    this.shortcut = 'g';
+    
+    this.options = {
+      tolerance: 32,
+      contiguous: true,
+      opacity: 100
+    };
+    this.defaultOptions = { ...this.options };
+  }
+
+  onPointerDown(e) {
+    super.onPointerDown(e);
+    
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer || layer.locked || !layer.ctx) return;
+    
+    const x = Math.floor(this.startPoint.x);
+    const y = Math.floor(this.startPoint.y);
+    
+    if (x < 0 || x >= layer.width || y < 0 || y >= layer.height) return;
+    
+    const fillColor = this.app.colors?.foreground || '#000000';
+    this.floodFill(layer, x, y, fillColor);
+    
+    this.app.history.pushState('Fill');
+    this.app.canvas.scheduleRender();
+  }
+
+  floodFill(layer, startX, startY, fillColor) {
+    const ctx = layer.ctx;
+    const imageData = ctx.getImageData(0, 0, layer.width, layer.height);
+    const data = imageData.data;
+    const width = layer.width;
+    const height = layer.height;
+    
+    const startIdx = (startY * width + startX) * 4;
+    const targetR = data[startIdx];
+    const targetG = data[startIdx + 1];
+    const targetB = data[startIdx + 2];
+    const targetA = data[startIdx + 3];
+    
+    const fillRGB = this.hexToRgb(fillColor);
+    const fillA = Math.round((this.options.opacity / 100) * 255);
+    const tolerance = this.options.tolerance;
+    const visited = new Uint8Array(width * height);
+    const stack = [[startX, startY]];
+    
+    while (stack.length > 0) {
+      const [x, y] = stack.pop();
+      const idx = y * width + x;
+      
+      if (x < 0 || x >= width || y < 0 || y >= height) continue;
+      if (visited[idx]) continue;
+      
+      const pixelIdx = idx * 4;
+      if (!this.colorsMatch(targetR, targetG, targetB, targetA, 
+          data[pixelIdx], data[pixelIdx + 1], data[pixelIdx + 2], data[pixelIdx + 3], tolerance)) {
+        continue;
+      }
+      
+      visited[idx] = 1;
+      data[pixelIdx] = fillRGB.r;
+      data[pixelIdx + 1] = fillRGB.g;
+      data[pixelIdx + 2] = fillRGB.b;
+      data[pixelIdx + 3] = fillA;
+      
+      stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+
+  colorsMatch(r1, g1, b1, a1, r2, g2, b2, a2, tolerance) {
+    return Math.abs(r1 - r2) <= tolerance && Math.abs(g1 - g2) <= tolerance &&
+           Math.abs(b1 - b2) <= tolerance && Math.abs(a1 - a2) <= tolerance;
+  }
+
+  hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+  }
+
+  getOptionsUI() {
+    return {
+      tolerance: { type: 'slider', label: 'Tolerance', min: 0, max: 255, value: this.options.tolerance },
+      contiguous: { type: 'checkbox', label: 'Contiguous', value: this.options.contiguous },
+      opacity: { type: 'slider', label: 'Opacity', min: 1, max: 100, value: this.options.opacity, unit: '%' }
+    };
+  }
+}
+
+export default FillTool;

package/src/js/tools/GradientTool.js

@@ -0,0 +1,141 @@
+/**
+ * SenangWebs Studio - Gradient Tool
+ * Draw gradients
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class GradientTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'gradient';
+    this.icon = 'gradient';
+    this.cursor = 'crosshair';
+    this.shortcut = 'g';
+    
+    this.options = {
+      type: 'linear', // 'linear', 'radial', 'angle', 'diamond'
+      opacity: 100,
+      reverse: false,
+      dither: false
+    };
+    this.defaultOptions = { ...this.options };
+  }
+
+  onPointerUp(e) {
+    if (this.isDrawing && this.startPoint && this.currentPoint) {
+      const layer = this.app.layers.getActiveLayer();
+      if (layer && !layer.locked) {
+        this.drawGradient(layer.ctx, this.startPoint, this.currentPoint);
+        this.app.history.pushState('Gradient');
+        this.app.canvas.scheduleRender();
+      }
+    }
+    
+    super.onPointerUp(e);
+  }
+
+  /**
+   * Draw gradient on context
+   * @param {CanvasRenderingContext2D} ctx - Target context
+   * @param {Object} start - Start point
+   * @param {Object} end - End point
+   */
+  drawGradient(ctx, start, end) {
+    const foreground = this.app.colors?.foreground || '#000000';
+    const background = this.app.colors?.background || '#ffffff';
+    
+    const color1 = this.options.reverse ? background : foreground;
+    const color2 = this.options.reverse ? foreground : background;
+    
+    let gradient;
+    
+    switch (this.options.type) {
+      case 'radial':
+        const radius = this.distance(start, end);
+        gradient = ctx.createRadialGradient(start.x, start.y, 0, start.x, start.y, radius);
+        break;
+        
+      case 'angle':
+        // Simulate angular gradient with multiple color stops
+        gradient = ctx.createConicGradient(this.angle(start, end), start.x, start.y);
+        break;
+        
+      default: // linear
+        gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+    }
+    
+    gradient.addColorStop(0, color1);
+    gradient.addColorStop(1, color2);
+    
+    ctx.save();
+    ctx.globalAlpha = this.options.opacity / 100;
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.restore();
+  }
+
+  renderOverlay(ctx) {
+    if (!this.isDrawing || !this.startPoint || !this.currentPoint) return;
+    
+    // Draw gradient preview line
+    ctx.save();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 5]);
+    
+    ctx.beginPath();
+    ctx.moveTo(this.startPoint.x, this.startPoint.y);
+    ctx.lineTo(this.currentPoint.x, this.currentPoint.y);
+    ctx.stroke();
+    
+    // Start point
+    ctx.fillStyle = this.app.colors?.foreground || '#000000';
+    ctx.beginPath();
+    ctx.arc(this.startPoint.x, this.startPoint.y, 5, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // End point
+    ctx.fillStyle = this.app.colors?.background || '#ffffff';
+    ctx.beginPath();
+    ctx.arc(this.currentPoint.x, this.currentPoint.y, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]);
+    ctx.stroke();
+    
+    ctx.restore();
+  }
+
+  getOptionsUI() {
+    return {
+      type: {
+        type: 'select',
+        label: 'Type',
+        options: [
+          { value: 'linear', label: 'Linear' },
+          { value: 'radial', label: 'Radial' },
+          { value: 'angle', label: 'Angle' }
+        ],
+        value: this.options.type
+      },
+      opacity: {
+        type: 'slider',
+        label: 'Opacity',
+        min: 1,
+        max: 100,
+        value: this.options.opacity,
+        unit: '%'
+      },
+      reverse: {
+        type: 'checkbox',
+        label: 'Reverse',
+        value: this.options.reverse
+      }
+    };
+  }
+}
+
+export default GradientTool;

package/src/js/tools/HandTool.js

@@ -0,0 +1,51 @@
+/**
+ * SenangWebs Studio - Hand Tool
+ * Pan the canvas viewport
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class HandTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'hand';
+    this.icon = 'hand';
+    this.cursor = 'grab';
+    this.shortcut = 'h';
+    
+    this.lastViewPoint = null;
+  }
+
+  onPointerDown(e) {
+    this.isDrawing = true;
+    this.lastViewPoint = this.getViewportPoint(e);
+    this.cursor = 'grabbing';
+    this.updateCursor();
+  }
+
+  onPointerMove(e) {
+    if (!this.isDrawing) return;
+    
+    const currentViewPoint = this.getViewportPoint(e);
+    const dx = currentViewPoint.x - this.lastViewPoint.x;
+    const dy = currentViewPoint.y - this.lastViewPoint.y;
+    
+    this.app.canvas.pan(dx, dy);
+    
+    this.lastViewPoint = currentViewPoint;
+  }
+
+  onPointerUp(e) {
+    this.isDrawing = false;
+    this.cursor = 'grab';
+    this.updateCursor();
+    this.lastViewPoint = null;
+  }
+
+  getOptionsUI() {
+    return {};
+  }
+}
+
+export default HandTool;

package/src/js/tools/MarqueeTool.js

@@ -0,0 +1,103 @@
+/**
+ * SenangWebs Studio - Marquee Selection Tool
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class MarqueeTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'marquee';
+    this.icon = 'square-dashed';
+    this.cursor = 'crosshair';
+    this.shortcut = 'm';
+    
+    this.options = {
+      shape: 'rectangle',
+      feather: 0,
+      fixed: false,
+      fixedWidth: 100,
+      fixedHeight: 100
+    };
+    this.defaultOptions = { ...this.options };
+    this.previewBounds = null;
+  }
+
+  onPointerDown(e) {
+    super.onPointerDown(e);
+    if (!e.shiftKey && !e.altKey) {
+      this.app.selection?.clear();
+    }
+    this.previewBounds = null;
+  }
+
+  onPointerMove(e) {
+    super.onPointerMove(e);
+    if (!this.isDrawing) return;
+    
+    this.previewBounds = this.calculateBounds(this.startPoint, this.currentPoint, e.shiftKey);
+    this.app.canvas.scheduleRender();
+  }
+
+  onPointerUp(e) {
+    if (this.isDrawing && this.previewBounds) {
+      const bounds = this.previewBounds;
+      if (bounds.width > 1 && bounds.height > 1) {
+        this.app.selection?.setRect(bounds.x, bounds.y, bounds.width, bounds.height, this.options.shape);
+      }
+    }
+    this.previewBounds = null;
+    super.onPointerUp(e);
+    this.app.canvas.scheduleRender();
+  }
+
+  calculateBounds(start, end, constrain) {
+    let x = Math.min(start.x, end.x);
+    let y = Math.min(start.y, end.y);
+    let width = Math.abs(end.x - start.x);
+    let height = Math.abs(end.y - start.y);
+    
+    if (constrain) {
+      const size = Math.max(width, height);
+      width = height = size;
+      if (end.x < start.x) x = start.x - size;
+      if (end.y < start.y) y = start.y - size;
+    }
+    
+    return { x, y, width, height };
+  }
+
+  renderOverlay(ctx) {
+    const bounds = this.previewBounds;
+    if (!bounds) return;
+    
+    ctx.save();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    
+    if (this.options.shape === 'ellipse') {
+      ctx.beginPath();
+      ctx.ellipse(bounds.x + bounds.width/2, bounds.y + bounds.height/2, 
+                  bounds.width/2, bounds.height/2, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    } else {
+      ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);
+    }
+    ctx.restore();
+  }
+
+  getOptionsUI() {
+    return {
+      shape: {
+        type: 'select', label: 'Shape',
+        options: [{ value: 'rectangle', label: 'Rectangle' }, { value: 'ellipse', label: 'Ellipse' }],
+        value: this.options.shape
+      },
+      feather: { type: 'slider', label: 'Feather', min: 0, max: 100, value: this.options.feather, unit: 'px' }
+    };
+  }
+}
+
+export default MarqueeTool;