senangwebs-photobooth 1.0.1 → 2.0.2

package/src/js/tools/ToolManager.js

@@ -0,0 +1,277 @@
+/**
+ * SenangWebs Studio - Tool Manager
+ * Manages tool selection and events
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+import { MoveTool } from './MoveTool.js';
+import { BrushTool } from './BrushTool.js';
+import { EraserTool } from './EraserTool.js';
+import { ShapeTool } from './ShapeTool.js';
+import { TextTool } from './TextTool.js';
+import { CropTool } from './CropTool.js';
+import { ZoomTool } from './ZoomTool.js';
+import { HandTool } from './HandTool.js';
+import { EyedropperTool } from './EyedropperTool.js';
+import { GradientTool } from './GradientTool.js';
+import { FillTool } from './FillTool.js';
+import { MarqueeTool } from './MarqueeTool.js';
+
+export class ToolManager {
+  constructor(app) {
+    this.app = app;
+    this.tools = new Map();
+    this.currentTool = null;
+    this.previousTool = null;
+    this.temporaryTool = null;
+    
+    this.init();
+  }
+
+  /**
+   * Initialize tools
+   */
+  init() {
+    // Register all tools
+    this.registerTool('move', new MoveTool(this.app));
+    this.registerTool('marquee', new MarqueeTool(this.app));
+    this.registerTool('brush', new BrushTool(this.app));
+    this.registerTool('eraser', new EraserTool(this.app));
+    this.registerTool('shape', new ShapeTool(this.app));
+    this.registerTool('text', new TextTool(this.app));
+    this.registerTool('crop', new CropTool(this.app));
+    this.registerTool('zoom', new ZoomTool(this.app));
+    this.registerTool('hand', new HandTool(this.app));
+    this.registerTool('eyedropper', new EyedropperTool(this.app));
+    this.registerTool('gradient', new GradientTool(this.app));
+    this.registerTool('fill', new FillTool(this.app));
+
+    // Set default tool
+    this.setTool('move');
+  }
+
+  /**
+   * Register a tool
+   * @param {string} name - Tool name
+   * @param {BaseTool} tool - Tool instance
+   */
+  registerTool(name, tool) {
+    this.tools.set(name, tool);
+  }
+
+  /**
+   * Get tool by name
+   * @param {string} name - Tool name
+   * @returns {BaseTool|null}
+   */
+  getTool(name) {
+    return this.tools.get(name) || null;
+  }
+
+  /**
+   * Set active tool
+   * @param {string} name - Tool name
+   */
+  setTool(name) {
+    const tool = this.getTool(name);
+    if (!tool) {
+      console.warn(`Tool "${name}" not found`);
+      return;
+    }
+
+    // Deactivate current tool
+    if (this.currentTool) {
+      this.currentTool.deactivate();
+      this.previousTool = this.currentTool;
+    }
+
+    // Activate new tool
+    this.currentTool = tool;
+    this.currentTool.activate();
+
+    this.app.events.emit(Events.TOOL_SELECT, { tool: name });
+  }
+
+  /**
+   * Activate temporary tool (e.g., hand tool when space is pressed)
+   * @param {string} name - Tool name
+   */
+  activateTemporaryTool(name) {
+    if (this.temporaryTool) return;
+
+    const tool = this.getTool(name);
+    if (!tool) return;
+
+    this.temporaryTool = this.currentTool;
+    this.currentTool.deactivate();
+    this.currentTool = tool;
+    this.currentTool.activate();
+  }
+
+  /**
+   * Deactivate temporary tool
+   */
+  deactivateTemporaryTool() {
+    if (!this.temporaryTool) return;
+
+    this.currentTool.deactivate();
+    this.currentTool = this.temporaryTool;
+    this.currentTool.activate();
+    this.temporaryTool = null;
+  }
+
+  /**
+   * Get all tools
+   * @returns {Map} Tools map
+   */
+  getAllTools() {
+    return this.tools;
+  }
+
+  /**
+   * Get current tool name
+   * @returns {string|null}
+   */
+  getCurrentToolName() {
+    for (const [name, tool] of this.tools) {
+      if (tool === this.currentTool) return name;
+    }
+    return null;
+  }
+
+  /**
+   * Switch to previous tool
+   */
+  switchToPreviousTool() {
+    if (this.previousTool) {
+      for (const [name, tool] of this.tools) {
+        if (tool === this.previousTool) {
+          this.setTool(name);
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Increase brush size
+   */
+  increaseBrushSize() {
+    if (this.currentTool?.options?.size !== undefined) {
+      const size = this.currentTool.options.size;
+      const newSize = Math.min(500, size + (size < 10 ? 1 : size < 100 ? 5 : 20));
+      this.currentTool.setOption('size', newSize);
+    }
+  }
+
+  /**
+   * Decrease brush size
+   */
+  decreaseBrushSize() {
+    if (this.currentTool?.options?.size !== undefined) {
+      const size = this.currentTool.options.size;
+      const newSize = Math.max(1, size - (size <= 10 ? 1 : size <= 100 ? 5 : 20));
+      this.currentTool.setOption('size', newSize);
+    }
+  }
+
+  /**
+   * Increase brush hardness
+   */
+  increaseBrushHardness() {
+    if (this.currentTool?.options?.hardness !== undefined) {
+      const hardness = this.currentTool.options.hardness;
+      this.currentTool.setOption('hardness', Math.min(100, hardness + 10));
+    }
+  }
+
+  /**
+   * Decrease brush hardness
+   */
+  decreaseBrushHardness() {
+    if (this.currentTool?.options?.hardness !== undefined) {
+      const hardness = this.currentTool.options.hardness;
+      this.currentTool.setOption('hardness', Math.max(0, hardness - 10));
+    }
+  }
+
+  /**
+   * Start free transform on active layer
+   */
+  startTransform() {
+    // TODO: Implement transform mode
+    console.log('Transform mode');
+  }
+
+  /**
+   * Bind canvas events
+   * @param {HTMLCanvasElement} canvas - Display canvas
+   */
+  bindCanvasEvents(canvas) {
+    canvas.addEventListener('pointerdown', this.handlePointerDown.bind(this));
+    canvas.addEventListener('pointermove', this.handlePointerMove.bind(this));
+    canvas.addEventListener('pointerup', this.handlePointerUp.bind(this));
+    canvas.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+    
+    // Prevent context menu on right-click
+    canvas.addEventListener('contextmenu', e => e.preventDefault());
+  }
+
+  /**
+   * Handle pointer down
+   * @param {PointerEvent} e - Pointer event
+   */
+  handlePointerDown(e) {
+    if (!this.currentTool) return;
+    
+    // Set pointer capture
+    e.target.setPointerCapture(e.pointerId);
+    
+    this.currentTool.onPointerDown(e);
+  }
+
+  /**
+   * Handle pointer move
+   * @param {PointerEvent} e - Pointer event
+   */
+  handlePointerMove(e) {
+    if (!this.currentTool) return;
+    this.currentTool.onPointerMove(e);
+  }
+
+  /**
+   * Handle pointer up
+   * @param {PointerEvent} e - Pointer event
+   */
+  handlePointerUp(e) {
+    if (!this.currentTool) return;
+    
+    e.target.releasePointerCapture(e.pointerId);
+    
+    this.currentTool.onPointerUp(e);
+  }
+
+  /**
+   * Handle pointer leave
+   * @param {PointerEvent} e - Pointer event
+   */
+  handlePointerLeave(e) {
+    if (!this.currentTool) return;
+    this.currentTool.onPointerLeave(e);
+  }
+
+  /**
+   * Destroy tool manager
+   */
+  destroy() {
+    this.tools.forEach(tool => {
+      if (tool.destroy) tool.destroy();
+    });
+    this.tools.clear();
+    this.currentTool = null;
+    this.previousTool = null;
+  }
+}
+
+export default ToolManager;

package/src/js/tools/ZoomTool.js

@@ -0,0 +1,68 @@
+/**
+ * SenangWebs Studio - Zoom Tool
+ * Zoom the canvas viewport
+ * @version 2.0.0
+ */
+
+import { BaseTool } from './BaseTool.js';
+
+export class ZoomTool extends BaseTool {
+  constructor(app) {
+    super(app);
+    this.name = 'zoom';
+    this.icon = 'zoom-in';
+    this.cursor = 'zoom-in';
+    this.shortcut = 'z';
+    
+    this.options = {
+      zoomIn: true // false = zoom out
+    };
+    this.defaultOptions = { ...this.options };
+  }
+
+  onPointerDown(e) {
+    super.onPointerDown(e);
+    
+    const viewPoint = this.getViewportPoint(e);
+    
+    if (this.options.zoomIn) {
+      this.app.canvas.zoomIn();
+    } else {
+      this.app.canvas.zoomOut();
+    }
+  }
+
+  onPointerMove(e) {
+    super.onPointerMove(e);
+    
+    // Update cursor based on Alt key
+    if (e.altKey || !this.options.zoomIn) {
+      this.cursor = 'zoom-out';
+    } else {
+      this.cursor = 'zoom-in';
+    }
+    this.updateCursor();
+  }
+
+  getOptionsUI() {
+    return {
+      zoomIn: {
+        type: 'checkbox',
+        label: 'Zoom In',
+        value: this.options.zoomIn
+      },
+      fitToScreen: {
+        type: 'button',
+        label: 'Fit to Screen',
+        action: () => this.app.canvas.fitToScreen()
+      },
+      actualSize: {
+        type: 'button',
+        label: '100%',
+        action: () => this.app.canvas.setZoom(100)
+      }
+    };
+  }
+}
+
+export default ZoomTool;

package/src/js/ui/ColorManager.js

@@ -0,0 +1,71 @@
+/**
+ * SenangWebs Studio - Color Manager
+ * @version 2.0.0
+ */
+
+import { Events } from '../core/EventEmitter.js';
+
+export class ColorManager {
+  constructor(app) {
+    this.app = app;
+    this.foreground = '#000000';
+    this.background = '#ffffff';
+    this.swatches = [
+      '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
+      '#ffff00', '#00ffff', '#ff00ff', '#ff8800', '#8800ff',
+      '#888888', '#444444', '#cccccc', '#880000', '#008800'
+    ];
+  }
+
+  setForeground(color) {
+    this.foreground = color;
+    this.app.events.emit(Events.COLOR_FOREGROUND, { color });
+  }
+
+  setBackground(color) {
+    this.background = color;
+    this.app.events.emit(Events.COLOR_BACKGROUND, { color });
+  }
+
+  swap() {
+    const temp = this.foreground;
+    this.foreground = this.background;
+    this.background = temp;
+    this.app.events.emit(Events.COLOR_SWAP, { 
+      foreground: this.foreground, 
+      background: this.background 
+    });
+  }
+
+  reset() {
+    this.foreground = '#000000';
+    this.background = '#ffffff';
+    this.app.events.emit(Events.COLOR_FOREGROUND, { color: this.foreground });
+    this.app.events.emit(Events.COLOR_BACKGROUND, { color: this.background });
+  }
+
+  addSwatch(color) {
+    if (!this.swatches.includes(color)) {
+      this.swatches.push(color);
+    }
+  }
+
+  removeSwatch(index) {
+    this.swatches.splice(index, 1);
+  }
+
+  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)
+    } : null;
+  }
+
+  rgbToHex(r, g, b) {
+    return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+  }
+}
+
+export default ColorManager;