senangwebs-photobooth 1.0.1 → 2.0.2

package/src/js/tools/BaseTool.js

@@ -0,0 +1,264 @@
+/**
+ * SenangWebs Studio - Base Tool
+ * Abstract base class for all tools
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+
+export class BaseTool {
+  constructor(app) {
+    this.app = app;
+    this.name = 'base';
+    this.icon = 'cursor';
+    this.cursor = 'default';
+    this.shortcut = null;
+    
+    // Tool state
+    this.isActive = false;
+    this.isDrawing = false;
+    this.startPoint = null;
+    this.lastPoint = null;
+    this.currentPoint = null;
+    
+    // Options (to be overridden by subclasses)
+    this.options = {};
+    this.defaultOptions = {};
+  }
+
+  /**
+   * Activate tool
+   */
+  activate() {
+    this.isActive = true;
+    this.updateCursor();
+    this.onActivate();
+  }
+
+  /**
+   * Deactivate tool
+   */
+  deactivate() {
+    this.isActive = false;
+    this.isDrawing = false;
+    this.onDeactivate();
+  }
+
+  /**
+   * Called when tool is activated (override in subclass)
+   */
+  onActivate() {}
+
+  /**
+   * Called when tool is deactivated (override in subclass)
+   */
+  onDeactivate() {}
+
+  /**
+   * Update cursor
+   */
+  updateCursor() {
+    if (this.app.canvas?.displayCanvas) {
+      this.app.canvas.displayCanvas.style.cursor = this.cursor;
+    }
+  }
+
+  /**
+   * Handle pointer down
+   * @param {PointerEvent} e - Pointer event
+   */
+  onPointerDown(e) {
+    this.isDrawing = true;
+    this.startPoint = this.getCanvasPoint(e);
+    this.lastPoint = this.startPoint;
+    this.currentPoint = this.startPoint;
+    
+    this.app.events.emit(Events.TOOL_START, {
+      tool: this.name,
+      point: this.startPoint
+    });
+  }
+
+  /**
+   * Handle pointer move
+   * @param {PointerEvent} e - Pointer event
+   */
+  onPointerMove(e) {
+    this.lastPoint = this.currentPoint;
+    this.currentPoint = this.getCanvasPoint(e);
+    
+    if (this.isDrawing) {
+      this.app.events.emit(Events.TOOL_MOVE, {
+        tool: this.name,
+        point: this.currentPoint,
+        delta: {
+          x: this.currentPoint.x - this.lastPoint.x,
+          y: this.currentPoint.y - this.lastPoint.y
+        }
+      });
+    }
+  }
+
+  /**
+   * Handle pointer up
+   * @param {PointerEvent} e - Pointer event
+   */
+  onPointerUp(e) {
+    if (this.isDrawing) {
+      this.currentPoint = this.getCanvasPoint(e);
+      
+      this.app.events.emit(Events.TOOL_END, {
+        tool: this.name,
+        startPoint: this.startPoint,
+        endPoint: this.currentPoint
+      });
+    }
+    
+    this.isDrawing = false;
+    this.startPoint = null;
+    this.lastPoint = null;
+  }
+
+  /**
+   * Handle pointer leave
+   * @param {PointerEvent} e - Pointer event
+   */
+  onPointerLeave(e) {
+    // Optional: handle when pointer leaves canvas
+  }
+
+  /**
+   * Get point in canvas coordinates
+   * @param {PointerEvent} e - Pointer event
+   * @returns {Object} Point {x, y}
+   */
+  getCanvasPoint(e) {
+    const rect = this.app.canvas.displayCanvas.getBoundingClientRect();
+    const viewX = e.clientX - rect.left;
+    const viewY = e.clientY - rect.top;
+    return this.app.canvas.viewportToCanvas(viewX, viewY);
+  }
+
+  /**
+   * Get viewport point
+   * @param {PointerEvent} e - Pointer event
+   * @returns {Object} Point {x, y}
+   */
+  getViewportPoint(e) {
+    const rect = this.app.canvas.displayCanvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  }
+
+  /**
+   * Get pressure from pointer event (for tablet support)
+   * @param {PointerEvent} e - Pointer event
+   * @returns {number} Pressure (0-1)
+   */
+  getPressure(e) {
+    return e.pressure !== undefined ? e.pressure : 0.5;
+  }
+
+  /**
+   * Render tool overlay (selection boxes, guides, etc.)
+   * @param {CanvasRenderingContext2D} ctx - Overlay context
+   */
+  renderOverlay(ctx) {
+    // Override in subclass
+  }
+
+  /**
+   * Set tool option
+   * @param {string} key - Option key
+   * @param {*} value - Option value
+   */
+  setOption(key, value) {
+    if (key in this.options) {
+      this.options[key] = value;
+      this.onOptionChange(key, value);
+      this.app.events.emit(Events.TOOL_OPTIONS_CHANGE, {
+        tool: this.name,
+        option: key,
+        value
+      });
+    }
+  }
+
+  /**
+   * Get tool option
+   * @param {string} key - Option key
+   * @returns {*} Option value
+   */
+  getOption(key) {
+    return this.options[key];
+  }
+
+  /**
+   * Called when option changes (override in subclass)
+   * @param {string} key - Option key
+   * @param {*} value - New value
+   */
+  onOptionChange(key, value) {}
+
+  /**
+   * Reset options to defaults
+   */
+  resetOptions() {
+    this.options = { ...this.defaultOptions };
+  }
+
+  /**
+   * Get options for UI
+   * @returns {Object} Options definition
+   */
+  getOptionsUI() {
+    return {};
+  }
+
+  /**
+   * Calculate distance between two points
+   * @param {Object} p1 - Point 1
+   * @param {Object} p2 - Point 2
+   * @returns {number} Distance
+   */
+  distance(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  }
+
+  /**
+   * Calculate angle between two points
+   * @param {Object} p1 - Point 1
+   * @param {Object} p2 - Point 2
+   * @returns {number} Angle in radians
+   */
+  angle(p1, p2) {
+    return Math.atan2(p2.y - p1.y, p2.x - p1.x);
+  }
+
+  /**
+   * Interpolate points between two positions
+   * @param {Object} p1 - Start point
+   * @param {Object} p2 - End point
+   * @param {number} spacing - Spacing between points
+   * @returns {Object[]} Array of interpolated points
+   */
+  interpolatePoints(p1, p2, spacing) {
+    const points = [];
+    const dist = this.distance(p1, p2);
+    const steps = Math.ceil(dist / spacing);
+    
+    for (let i = 0; i <= steps; i++) {
+      const t = i / steps;
+      points.push({
+        x: p1.x + (p2.x - p1.x) * t,
+        y: p1.y + (p2.y - p1.y) * t
+      });
+    }
+    
+    return points;
+  }
+}
+
+export default BaseTool;

package/src/js/tools/BrushTool.js

@@ -0,0 +1,314 @@
+/**
+ * SenangWebs Studio - Brush Tool
+ * Freehand drawing with customizable brush
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class BrushTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'brush';
+    this.icon = 'brush';
+    this.cursor = 'crosshair';
+    this.shortcut = 'b';
+    
+    this.options = {
+      size: 20,
+      hardness: 100,
+      opacity: 100,
+      flow: 100,
+      spacing: 25,
+      smoothing: 50,
+      pressureSize: true,
+      pressureOpacity: false
+    };
+    this.defaultOptions = { ...this.options };
+    
+    // Drawing state
+    this.points = [];
+    this.brushCanvas = null;
+    this.brushCtx = null;
+  }
+
+  onActivate() {
+    this.createBrushTip();
+    this.updateCursor();
+  }
+
+  /**
+   * Create brush tip canvas
+   */
+  createBrushTip() {
+    const size = Math.ceil(this.options.size);
+    this.brushCanvas = document.createElement('canvas');
+    this.brushCanvas.width = size;
+    this.brushCanvas.height = size;
+    this.brushCtx = this.brushCanvas.getContext('2d');
+    this.updateBrushTip();
+  }
+
+  /**
+   * Update brush tip based on options
+   */
+  updateBrushTip() {
+    const size = this.options.size;
+    const hardness = this.options.hardness / 100;
+    
+    this.brushCanvas.width = Math.ceil(size);
+    this.brushCanvas.height = Math.ceil(size);
+    
+    const ctx = this.brushCtx;
+    const center = size / 2;
+    
+    // Create gradient for soft brush
+    const gradient = ctx.createRadialGradient(center, center, 0, center, center, center);
+    
+    if (hardness >= 1) {
+      // Hard brush
+      gradient.addColorStop(0, 'rgba(0, 0, 0, 1)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+    } else {
+      // Soft brush with hardness control
+      const hardnessStop = hardness * 0.9;
+      gradient.addColorStop(0, 'rgba(0, 0, 0, 1)');
+      gradient.addColorStop(hardnessStop, 'rgba(0, 0, 0, 1)');
+      gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    }
+    
+    ctx.clearRect(0, 0, size, size);
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(center, center, center, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  onPointerDown(e) {
+    super.onPointerDown(e);
+    
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer || layer.locked) return;
+    
+    this.points = [{ ...this.startPoint, pressure: this.getPressure(e) }];
+    
+    // Draw initial point
+    this.drawStroke(layer.ctx, [this.startPoint], this.getPressure(e));
+    this.app.canvas.scheduleRender();
+  }
+
+  onPointerMove(e) {
+    super.onPointerMove(e);
+    
+    if (!this.isDrawing) return;
+    
+    const layer = this.app.layers.getActiveLayer();
+    if (!layer || layer.locked) return;
+    
+    const point = { ...this.currentPoint, pressure: this.getPressure(e) };
+    this.points.push(point);
+    
+    // Draw line from last point to current
+    this.drawStroke(layer.ctx, [this.lastPoint, this.currentPoint], this.getPressure(e));
+    this.app.canvas.scheduleRender();
+  }
+
+  onPointerUp(e) {
+    if (this.isDrawing && this.points.length > 0) {
+      this.app.history.pushState('Brush Stroke');
+    }
+    
+    this.points = [];
+    super.onPointerUp(e);
+  }
+
+  /**
+   * Draw stroke on context
+   * @param {CanvasRenderingContext2D} ctx - Target context
+   * @param {Array} points - Points to draw
+   * @param {number} pressure - Current pressure
+   */
+  drawStroke(ctx, points, pressure = 0.5) {
+    if (points.length < 1) return;
+    
+    const color = this.app.colors?.foreground || '#000000';
+    const size = this.options.pressureSize 
+      ? this.options.size * pressure 
+      : this.options.size;
+    const opacity = this.options.pressureOpacity 
+      ? (this.options.opacity / 100) * pressure 
+      : this.options.opacity / 100;
+    const flow = this.options.flow / 100;
+    const spacing = Math.max(1, (this.options.size * this.options.spacing) / 100);
+    
+    ctx.save();
+    ctx.globalAlpha = opacity * flow;
+    ctx.globalCompositeOperation = 'source-over';
+    
+    if (points.length === 1) {
+      // Single point
+      this.drawBrushDab(ctx, points[0].x, points[0].y, size, color);
+    } else {
+      // Interpolate between points
+      for (let i = 1; i < points.length; i++) {
+        const p1 = points[i - 1];
+        const p2 = points[i];
+        const interpolated = this.interpolatePoints(p1, p2, spacing);
+        
+        interpolated.forEach(p => {
+          this.drawBrushDab(ctx, p.x, p.y, size, color);
+        });
+      }
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Draw single brush dab
+   * @param {CanvasRenderingContext2D} ctx - Target context
+   * @param {number} x - X position
+   * @param {number} y - Y position
+   * @param {number} size - Brush size
+   * @param {string} color - Brush color
+   */
+  drawBrushDab(ctx, x, y, size, color) {
+    const halfSize = size / 2;
+    
+    // Use brush tip canvas for soft brushes
+    if (this.options.hardness < 100) {
+      // Scale brush tip to current size
+      ctx.save();
+      ctx.globalCompositeOperation = 'source-over';
+      
+      // Create colored version of brush tip
+      const colorCanvas = document.createElement('canvas');
+      colorCanvas.width = this.brushCanvas.width;
+      colorCanvas.height = this.brushCanvas.height;
+      const colorCtx = colorCanvas.getContext('2d');
+      
+      colorCtx.fillStyle = color;
+      colorCtx.fillRect(0, 0, colorCanvas.width, colorCanvas.height);
+      colorCtx.globalCompositeOperation = 'destination-in';
+      colorCtx.drawImage(this.brushCanvas, 0, 0);
+      
+      ctx.drawImage(colorCanvas, x - halfSize, y - halfSize, size, size);
+      ctx.restore();
+    } else {
+      // Hard brush - simple circle
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.arc(x, y, halfSize, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+
+  onOptionChange(key, value) {
+    if (key === 'size' || key === 'hardness') {
+      this.updateBrushTip();
+    }
+  }
+
+  updateCursor() {
+    // Custom cursor showing brush size
+    const size = Math.max(4, this.options.size * (this.app.canvas?.zoom || 100) / 100);
+    
+    if (size > 4) {
+      const canvas = document.createElement('canvas');
+      canvas.width = size + 2;
+      canvas.height = size + 2;
+      const ctx = canvas.getContext('2d');
+      
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(size / 2 + 1, size / 2 + 1, size / 2, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      ctx.strokeStyle = '#ffffff';
+      ctx.setLineDash([2, 2]);
+      ctx.beginPath();
+      ctx.arc(size / 2 + 1, size / 2 + 1, size / 2, 0, Math.PI * 2);
+      ctx.stroke();
+      
+      const dataURL = canvas.toDataURL();
+      this.cursor = `url(${dataURL}) ${size / 2 + 1} ${size / 2 + 1}, crosshair`;
+    } else {
+      this.cursor = 'crosshair';
+    }
+    
+    if (this.isActive && this.app.canvas?.displayCanvas) {
+      this.app.canvas.displayCanvas.style.cursor = this.cursor;
+    }
+  }
+
+  renderOverlay(ctx) {
+    // Optional: Show brush preview on hover
+    if (this.currentPoint && !this.isDrawing) {
+      const size = this.options.size;
+      ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([2, 2]);
+      ctx.beginPath();
+      ctx.arc(this.currentPoint.x, this.currentPoint.y, size / 2, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+  }
+
+  getOptionsUI() {
+    return {
+      size: {
+        type: 'slider',
+        label: 'Size',
+        min: 1,
+        max: 500,
+        value: this.options.size,
+        unit: 'px'
+      },
+      hardness: {
+        type: 'slider',
+        label: 'Hardness',
+        min: 0,
+        max: 100,
+        value: this.options.hardness,
+        unit: '%'
+      },
+      opacity: {
+        type: 'slider',
+        label: 'Opacity',
+        min: 1,
+        max: 100,
+        value: this.options.opacity,
+        unit: '%'
+      },
+      flow: {
+        type: 'slider',
+        label: 'Flow',
+        min: 1,
+        max: 100,
+        value: this.options.flow,
+        unit: '%'
+      },
+      smoothing: {
+        type: 'slider',
+        label: 'Smoothing',
+        min: 0,
+        max: 100,
+        value: this.options.smoothing,
+        unit: '%'
+      },
+      pressureSize: {
+        type: 'checkbox',
+        label: 'Pressure affects Size',
+        value: this.options.pressureSize
+      },
+      pressureOpacity: {
+        type: 'checkbox',
+        label: 'Pressure affects Opacity',
+        value: this.options.pressureOpacity
+      }
+    };
+  }
+}
+
+export default BrushTool;