senangwebs-photobooth 1.0.2 → 2.0.2

package/src/js/core/Canvas.js

@@ -0,0 +1,398 @@
+/**
+ * SenangWebs Studio - Canvas Manager
+ * Multi-layer canvas with viewport management
+ * @version 2.0.0
+ */
+
+import { Events } from './EventEmitter.js';
+
+export class Canvas {
+  constructor(app, options = {}) {
+    this.app = app;
+    this.width = options.width || 1920;
+    this.height = options.height || 1080;
+    this.zoom = 100;
+    this.panX = 0;
+    this.panY = 0;
+    this.minZoom = 1;
+    this.maxZoom = 3200;
+
+    // Canvas elements
+    this.container = null;
+    this.viewport = null;
+    this.workCanvas = null;
+    this.workCtx = null;
+    this.displayCanvas = null;
+    this.displayCtx = null;
+    this.overlayCanvas = null;
+    this.overlayCtx = null;
+
+    // Rendering
+    this.needsRender = false;
+    this.renderScheduled = false;
+
+    // Checkerboard pattern for transparency
+    this.checkerboardPattern = null;
+  }
+
+  /**
+   * Initialize canvas system
+   * @param {HTMLElement} container - Container element
+   */
+  init(container) {
+    this.container = container;
+    this.createCanvasElements();
+    this.createCheckerboardPattern();
+    this.bindEvents();
+    this.render();
+  }
+
+  /**
+   * Create canvas elements
+   */
+  createCanvasElements() {
+    // Viewport container
+    this.viewport = document.createElement('div');
+    this.viewport.className = 'swp-viewport';
+
+    // Canvas wrapper (for transform)
+    this.canvasWrapper = document.createElement('div');
+    this.canvasWrapper.className = 'swp-canvas-wrapper';
+
+    // Work canvas (composited layers)
+    this.workCanvas = document.createElement('canvas');
+    this.workCanvas.width = this.width;
+    this.workCanvas.height = this.height;
+    this.workCanvas.className = 'swp-work-canvas';
+    this.workCtx = this.workCanvas.getContext('2d');
+
+    // Display canvas (what user sees, with zoom/pan applied)
+    this.displayCanvas = document.createElement('canvas');
+    this.displayCanvas.className = 'swp-display-canvas';
+    this.displayCtx = this.displayCanvas.getContext('2d');
+
+    // Overlay canvas (selection, guides, tool feedback)
+    this.overlayCanvas = document.createElement('canvas');
+    this.overlayCanvas.className = 'swp-overlay-canvas';
+    this.overlayCtx = this.overlayCanvas.getContext('2d');
+
+    // Assemble
+    this.canvasWrapper.appendChild(this.displayCanvas);
+    this.canvasWrapper.appendChild(this.overlayCanvas);
+    this.viewport.appendChild(this.canvasWrapper);
+    this.container.appendChild(this.viewport);
+
+    // Initial size
+    this.updateDisplaySize();
+  }
+
+  /**
+   * Create checkerboard pattern for transparency
+   */
+  createCheckerboardPattern() {
+    const size = 16;
+    const patternCanvas = document.createElement('canvas');
+    patternCanvas.width = size * 2;
+    patternCanvas.height = size * 2;
+    const ctx = patternCanvas.getContext('2d');
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, size * 2, size * 2);
+    ctx.fillStyle = '#e0e0e0';
+    ctx.fillRect(0, 0, size, size);
+    ctx.fillRect(size, size, size, size);
+
+    this.checkerboardPattern = this.workCtx.createPattern(patternCanvas, 'repeat');
+  }
+
+  /**
+   * Bind viewport events
+   */
+  bindEvents() {
+    // Wheel zoom
+    this.viewport.addEventListener('wheel', this.handleWheel.bind(this), { passive: false });
+
+    // Resize observer
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateDisplaySize();
+      this.render();
+    });
+    this.resizeObserver.observe(this.viewport);
+  }
+
+  /**
+   * Handle mouse wheel for zoom
+   * @param {WheelEvent} e - Wheel event
+   */
+  handleWheel(e) {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      const newZoom = Math.round(this.zoom * delta);
+
+      // Zoom towards cursor position
+      const rect = this.displayCanvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      this.setZoom(newZoom, x, y);
+    } else {
+      // Pan
+      e.preventDefault();
+      this.panX -= e.deltaX;
+      this.panY -= e.deltaY;
+      this.render();
+    }
+  }
+
+  /**
+   * Update display canvas size based on viewport
+   */
+  updateDisplaySize() {
+    if (!this.viewport) return;
+
+    const rect = this.viewport.getBoundingClientRect();
+    this.displayCanvas.width = rect.width;
+    this.displayCanvas.height = rect.height;
+    this.overlayCanvas.width = rect.width;
+    this.overlayCanvas.height = rect.height;
+  }
+
+  /**
+   * Resize document
+   * @param {number} width - New width
+   * @param {number} height - New height
+   */
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.workCanvas.width = width;
+    this.workCanvas.height = height;
+    this.createCheckerboardPattern();
+    this.render();
+
+    this.app.events.emit(Events.DOCUMENT_RESIZE, { width, height });
+  }
+
+  /**
+   * Set zoom level
+   * @param {number} zoom - Zoom percentage (1-3200)
+   * @param {number} centerX - Center X for zoom
+   * @param {number} centerY - Center Y for zoom
+   */
+  setZoom(zoom, centerX = null, centerY = null) {
+    const oldZoom = this.zoom;
+    this.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, zoom));
+
+    // Adjust pan to zoom toward point
+    if (centerX !== null && centerY !== null) {
+      const scale = this.zoom / oldZoom;
+      this.panX = centerX - (centerX - this.panX) * scale;
+      this.panY = centerY - (centerY - this.panY) * scale;
+    }
+
+    this.render();
+    this.app.events.emit(Events.CANVAS_ZOOM, { zoom: this.zoom });
+  }
+
+  /**
+   * Zoom in by step
+   */
+  zoomIn() {
+    const zoomSteps = [1, 2, 3, 4, 5, 6.25, 8.33, 12.5, 16.67, 25, 33.33, 50, 66.67, 100, 150, 200, 300, 400, 500, 600, 800, 1200, 1600, 2400, 3200];
+    const nextZoom = zoomSteps.find(z => z > this.zoom) || this.maxZoom;
+    this.setZoom(nextZoom, this.displayCanvas.width / 2, this.displayCanvas.height / 2);
+  }
+
+  /**
+   * Zoom out by step
+   */
+  zoomOut() {
+    const zoomSteps = [1, 2, 3, 4, 5, 6.25, 8.33, 12.5, 16.67, 25, 33.33, 50, 66.67, 100, 150, 200, 300, 400, 500, 600, 800, 1200, 1600, 2400, 3200];
+    const prevZoom = [...zoomSteps].reverse().find(z => z < this.zoom) || this.minZoom;
+    this.setZoom(prevZoom, this.displayCanvas.width / 2, this.displayCanvas.height / 2);
+  }
+
+  /**
+   * Fit canvas to screen
+   */
+  fitToScreen() {
+    const padding = 40;
+    const viewportWidth = this.displayCanvas.width - padding * 2;
+    const viewportHeight = this.displayCanvas.height - padding * 2;
+
+    const scaleX = viewportWidth / this.width;
+    const scaleY = viewportHeight / this.height;
+    const scale = Math.min(scaleX, scaleY);
+
+    this.zoom = Math.round(scale * 100);
+    this.panX = (this.displayCanvas.width - this.width * scale) / 2;
+    this.panY = (this.displayCanvas.height - this.height * scale) / 2;
+
+    this.render();
+  }
+
+  /**
+   * Pan canvas
+   * @param {number} dx - Delta X
+   * @param {number} dy - Delta Y
+   */
+  pan(dx, dy) {
+    this.panX += dx;
+    this.panY += dy;
+    this.render();
+    this.app.events.emit(Events.CANVAS_PAN, { panX: this.panX, panY: this.panY });
+  }
+
+  /**
+   * Convert viewport coordinates to canvas coordinates
+   * @param {number} viewX - Viewport X
+   * @param {number} viewY - Viewport Y
+   * @returns {Object} Canvas coordinates
+   */
+  viewportToCanvas(viewX, viewY) {
+    const scale = this.zoom / 100;
+    return {
+      x: (viewX - this.panX) / scale,
+      y: (viewY - this.panY) / scale
+    };
+  }
+
+  /**
+   * Convert canvas coordinates to viewport coordinates
+   * @param {number} canvasX - Canvas X
+   * @param {number} canvasY - Canvas Y
+   * @returns {Object} Viewport coordinates
+   */
+  canvasToViewport(canvasX, canvasY) {
+    const scale = this.zoom / 100;
+    return {
+      x: canvasX * scale + this.panX,
+      y: canvasY * scale + this.panY
+    };
+  }
+
+  /**
+   * Schedule a render
+   */
+  scheduleRender() {
+    this.needsRender = true;
+    if (!this.renderScheduled) {
+      this.renderScheduled = true;
+      requestAnimationFrame(() => {
+        this.renderScheduled = false;
+        if (this.needsRender) {
+          this.needsRender = false;
+          this.render();
+        }
+      });
+    }
+  }
+
+  /**
+   * Render the canvas
+   */
+  render() {
+    // Clear work canvas
+    this.workCtx.clearRect(0, 0, this.width, this.height);
+
+    // Draw checkerboard background
+    this.workCtx.fillStyle = this.checkerboardPattern;
+    this.workCtx.fillRect(0, 0, this.width, this.height);
+
+    // Composite all layers
+    this.app.layers.render(this.workCtx);
+
+    // Draw to display canvas with zoom/pan
+    this.displayCtx.clearRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
+
+    // Fill with gray background
+    if (this.app.options.theme === 'dark') {
+      this.displayCtx.fillStyle = '#18181B';
+    } else {
+      this.displayCtx.fillStyle = '#f5f5f5';
+    }
+    this.displayCtx.fillRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
+
+    // Draw work canvas with transform
+    const scale = this.zoom / 100;
+    this.displayCtx.save();
+    this.displayCtx.translate(this.panX, this.panY);
+    this.displayCtx.scale(scale, scale);
+
+    // Draw shadow
+    this.displayCtx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+    this.displayCtx.shadowBlur = 20;
+    this.displayCtx.shadowOffsetX = 5;
+    this.displayCtx.shadowOffsetY = 5;
+
+    this.displayCtx.drawImage(this.workCanvas, 0, 0);
+    this.displayCtx.restore();
+
+    // Draw overlay (selection, guides, etc.)
+    this.renderOverlay();
+
+    this.app.events.emit(Events.CANVAS_RENDER);
+  }
+
+  /**
+   * Render overlay elements
+   */
+  renderOverlay() {
+    this.overlayCtx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
+
+    const scale = this.zoom / 100;
+    this.overlayCtx.save();
+    this.overlayCtx.translate(this.panX, this.panY);
+    this.overlayCtx.scale(scale, scale);
+
+    // Draw selection if any
+    if (this.app.selection) {
+      this.app.selection.render(this.overlayCtx);
+    }
+
+    // Draw tool overlay
+    if (this.app.tools?.currentTool) {
+      this.app.tools.currentTool.renderOverlay(this.overlayCtx);
+    }
+
+    this.overlayCtx.restore();
+  }
+
+  /**
+   * Get image data from work canvas
+   * @param {string} format - Image format
+   * @param {number} quality - Quality (0-1)
+   * @returns {string} Data URL
+   */
+  toDataURL(format = 'image/png', quality = 1) {
+    return this.workCanvas.toDataURL(format, quality);
+  }
+
+  /**
+   * Get image blob
+   * @param {string} format - Image format
+   * @param {number} quality - Quality (0-1)
+   * @returns {Promise<Blob>}
+   */
+  toBlob(format = 'image/png', quality = 1) {
+    return new Promise(resolve => {
+      this.workCanvas.toBlob(resolve, format, quality);
+    });
+  }
+
+  /**
+   * Destroy canvas system
+   */
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.viewport) {
+      this.viewport.remove();
+    }
+  }
+}
+
+export default Canvas;

package/src/js/core/EventEmitter.js

@@ -0,0 +1,188 @@
+/**
+ * SenangWebs Studio - EventEmitter
+ * Central event bus for module communication
+ * @version 2.0.0
+ */
+
+export class EventEmitter {
+  constructor() {
+    this.events = new Map();
+    this.onceEvents = new Map();
+  }
+
+  /**
+   * Subscribe to an event
+   * @param {string} event - Event name
+   * @param {Function} callback - Callback function
+   * @returns {Function} Unsubscribe function
+   */
+  on(event, callback) {
+    if (!this.events.has(event)) {
+      this.events.set(event, new Set());
+    }
+    this.events.get(event).add(callback);
+
+    // Return unsubscribe function
+    return () => this.off(event, callback);
+  }
+
+  /**
+   * Subscribe to an event once
+   * @param {string} event - Event name
+   * @param {Function} callback - Callback function
+   */
+  once(event, callback) {
+    if (!this.onceEvents.has(event)) {
+      this.onceEvents.set(event, new Set());
+    }
+    this.onceEvents.get(event).add(callback);
+  }
+
+  /**
+   * Unsubscribe from an event
+   * @param {string} event - Event name
+   * @param {Function} callback - Callback function
+   */
+  off(event, callback) {
+    if (this.events.has(event)) {
+      this.events.get(event).delete(callback);
+    }
+    if (this.onceEvents.has(event)) {
+      this.onceEvents.get(event).delete(callback);
+    }
+  }
+
+  /**
+   * Emit an event
+   * @param {string} event - Event name
+   * @param {*} data - Event data
+   */
+  emit(event, data) {
+    // Call regular listeners
+    if (this.events.has(event)) {
+      this.events.get(event).forEach(callback => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in event listener for "${event}":`, error);
+        }
+      });
+    }
+
+    // Call once listeners and remove them
+    if (this.onceEvents.has(event)) {
+      this.onceEvents.get(event).forEach(callback => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in once listener for "${event}":`, error);
+        }
+      });
+      this.onceEvents.delete(event);
+    }
+
+    // Also emit a wildcard event for debugging
+    if (event !== '*') {
+      this.emit('*', { event, data });
+    }
+  }
+
+  /**
+   * Remove all listeners for an event
+   * @param {string} event - Event name (optional, removes all if not provided)
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this.events.delete(event);
+      this.onceEvents.delete(event);
+    } else {
+      this.events.clear();
+      this.onceEvents.clear();
+    }
+  }
+
+  /**
+   * Get listener count for an event
+   * @param {string} event - Event name
+   * @returns {number} Listener count
+   */
+  listenerCount(event) {
+    const regular = this.events.has(event) ? this.events.get(event).size : 0;
+    const once = this.onceEvents.has(event) ? this.onceEvents.get(event).size : 0;
+    return regular + once;
+  }
+}
+
+// Event name constants
+export const Events = {
+  // Document events
+  DOCUMENT_NEW: 'document:new',
+  DOCUMENT_OPEN: 'document:open',
+  DOCUMENT_SAVE: 'document:save',
+  DOCUMENT_EXPORT: 'document:export',
+  DOCUMENT_CLOSE: 'document:close',
+  DOCUMENT_RESIZE: 'document:resize',
+
+  // Layer events
+  LAYER_ADD: 'layer:add',
+  LAYER_REMOVE: 'layer:remove',
+  LAYER_SELECT: 'layer:select',
+  LAYER_RENAME: 'layer:rename',
+  LAYER_REORDER: 'layer:reorder',
+  LAYER_VISIBILITY: 'layer:visibility',
+  LAYER_OPACITY: 'layer:opacity',
+  LAYER_BLEND_MODE: 'layer:blendMode',
+  LAYER_LOCK: 'layer:lock',
+  LAYER_MERGE: 'layer:merge',
+  LAYER_DUPLICATE: 'layer:duplicate',
+  LAYER_UPDATE: 'layer:update',
+
+  // Tool events
+  TOOL_SELECT: 'tool:select',
+  TOOL_OPTIONS_CHANGE: 'tool:optionsChange',
+  TOOL_START: 'tool:start',
+  TOOL_MOVE: 'tool:move',
+  TOOL_END: 'tool:end',
+
+  // Canvas events
+  CANVAS_DRAW: 'canvas:draw',
+  CANVAS_CLEAR: 'canvas:clear',
+  CANVAS_RENDER: 'canvas:render',
+  CANVAS_ZOOM: 'canvas:zoom',
+  CANVAS_PAN: 'canvas:pan',
+
+  // History events
+  HISTORY_PUSH: 'history:push',
+  HISTORY_UNDO: 'history:undo',
+  HISTORY_REDO: 'history:redo',
+  HISTORY_CLEAR: 'history:clear',
+
+  // Selection events
+  SELECTION_CREATE: 'selection:create',
+  SELECTION_MODIFY: 'selection:modify',
+  SELECTION_CLEAR: 'selection:clear',
+  SELECTION_INVERT: 'selection:invert',
+
+  // Filter events
+  FILTER_APPLY: 'filter:apply',
+  FILTER_PREVIEW: 'filter:preview',
+  FILTER_CANCEL: 'filter:cancel',
+
+  // Color events
+  COLOR_FOREGROUND: 'color:foreground',
+  COLOR_BACKGROUND: 'color:background',
+  COLOR_SWAP: 'color:swap',
+
+  // UI events
+  UI_PANEL_TOGGLE: 'ui:panelToggle',
+  UI_DIALOG_OPEN: 'ui:dialogOpen',
+  UI_DIALOG_CLOSE: 'ui:dialogClose',
+  UI_MENU_ACTION: 'ui:menuAction',
+
+  // General
+  CHANGE: 'change',
+  ERROR: 'error',
+  READY: 'ready'
+};
+
+export default EventEmitter;