senangwebs-photobooth 1.0.2 → 2.0.2

package/README.md

@@ -1,297 +1,281 @@
-# SenangWebs Photobooth (SWP)
+# SenangWebs Photobooth
 
-A lightweight and easy-to-use JavaScript library for client-side photo editing. No dependencies, no server-side processing - everything happens in your browser!
+A browser-based image editor featuring layers, drawing tools, and filters.
 
-![SenangWebs Photobooth Preview](https://raw.githubusercontent.com/a-hakim/senangwebs-photobooth/master/swp_preview.png)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.md)
+[![Built with SenangStart Icons](https://img.shields.io/badge/Built%20with-SenangStart%20Icons-2563EB.svg)](https://github.com/bookklik-technologies/senangstart-icons)
 
-## Quick Start
-
-### Development
-
-1. **Install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-2. **Start development server:**
-
-   ```bash
-   npm run dev
-   ```
-
-   This will start a dev server at `http://localhost:3000` with hot reloading.
+| example 1                                                                                                        | example 2                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| ![SenangWebs Photobooth Preview 1](https://raw.githubusercontent.com/a-hakim/senangwebs-photobooth/master/swp_preview1.png) | ![SenangWebs Photobooth Preview 2](https://raw.githubusercontent.com/a-hakim/senangwebs-photobooth/master/swp_preview2.png) |
 
-3. **Build for production:**
-
-   ```bash
-   npm run build
-   ```
-
-   This creates optimized files in the `dist/` directory.
-
-### Using the Library
-
-#### Include the built files:
+## Features
 
-```html
-<link rel="stylesheet" href="dist/swp.min.css" />
-<script src="dist/swp.min.js"></script>
+### Layer System
+- Multiple layers with full compositing
+- 24 blend modes (Normal, Multiply, Screen, Overlay, etc.)
+- Layer opacity, visibility, and locking
+- Merge, duplicate, and reorder layers
+- Layers panel with real-time updates
+
+### History & Layers Panels
+- **History Panel** - View and navigate undo/redo history
+- **Layers Panel** - Manage layers with visibility toggles and selection
+- Collapsible side panels with clean UI
+
+### Editing Tools
+| Menu | Description |
+|------|-------------|
+| Crop | Crop with aspect ratio presets (Free, 1:1, 4:3, 16:9) |
+| Rotate | Rotate by ±90° or custom angle slider |
+| Flip | Flip horizontal or vertical |
+| Resize | Resize canvas with presets and aspect ratio lock |
+| Draw | Brush tool with customizable size and color |
+| Shape | Rectangle, ellipse, line with fill and stroke options |
+| Text | Add text with font, size, color, and style controls |
+| Filter | Apply filters with intensity control |
+
+### Filters & Adjustments
+- Brightness, Contrast
+- Blur, Sharpen
+- Grayscale, Sepia, Invert
+
+### Keyboard Shortcuts
+- `Ctrl+Z` / `Ctrl+Shift+Z` - Undo / Redo
+- `Ctrl+N` - New document
+- `Ctrl+O` - Open image
+- `Ctrl+S` - Save project
+- `Ctrl+E` - Export image
+- `[` / `]` - Decrease / Increase brush size
+- `X` - Swap foreground/background colors
+- `D` - Reset to black/white
+- `Tab` - Toggle panels
+- `Space` - Temporary hand tool
+- `DEL` - Delete selected layer
+
+### File Operations
+- Load images (PNG, JPEG, WebP)
+- Download with format selection (PNG, JPEG, WebP)
+- Save projects as `.swp` files
+- Export to PNG, JPEG, WebP
+
+## Installation
+
+### NPM
+```bash
+npm install senangwebs-photobooth
 ```
 
-#### Or use source files directly:
-
+### CDN
 ```html
-<link rel="stylesheet" href="src/css/swp.css" />
-<script src="src/js/swp.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.css">
+<script src="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.js"></script>
 ```
 
-## Features
+### Manual Download
+Download `swp.js` and `swp.css` from the `dist` folder.
 
-- Cropping\*\* - Select and crop image areas with predefined aspect ratios
-- Rotating\*\* - Rotate images in 90-degree increments
-- Flipping\*\* - Flip images horizontally and vertically
-- Adjustments\*\* - Fine-tune brightness, contrast, and saturation
-- Filters\*\* - Apply pre-defined filters (Grayscale, Sepia, Invert, Blur)
-- **Export** - Save edited images in JPEG or PNG format
+## Quick Start
 
-## Usage
+SenangWebs Photobooth supports two initialization methods: JavaScript API and data attributes.
 
-### Programmatic Approach
+### JavaScript API
 
 ```html
-<div id="photobooth-container"></div>
-
-<script>
-  const container = document.getElementById("photobooth-container");
-  const swp = new SWP(container, {
-    imageUrl: "path/to/your/image.jpg",
-    width: 800,
-    height: 600,
-  });
-
-  // Listen to events
-  swp.on("load", () => console.log("Image loaded"));
-  swp.on("change", () => console.log("Image changed"));
-  swp.on("save", () => console.log("Image saved"));
-</script>
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.css">
+  <style>
+    #editor { width: 100%; height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="editor"></div>
+  <script src="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.js"></script>
+  <script>
+    const editor = new SWP('#editor', {
+      width: 1920,
+      height: 1080,
+      theme: 'dark',
+      accentColor: '#00FF99'
+    });
+    
+    editor.on('ready', () => {
+      console.log('Editor ready!');
+    });
+  </script>
+</body>
+</html>
 ```
 
-### Declarative Approach
+### Data Attribute Initialization
 
-Use HTML data attributes for zero-JavaScript configuration:
+You can also initialize the editor using data attributes for a no-code setup:
 
 ```html
-<!-- Basic -->
-<div data-swp></div>
-
-<!-- With configuration -->
-<div
-  data-swp
-  data-swp-width="900"
-  data-swp-height="600"
-  data-swp-show-labels="false"
-></div>
-
-<!-- With custom labels (simple format) -->
-<div
-  data-swp
-  data-swp-labels="upload: 'Muat Naik'; save: 'Simpan'; reset: 'Set Semula'"
-></div>
-
-<!-- With custom labels (JSON format) -->
-<div
-  data-swp
-  data-swp-labels='{"upload":"Télécharger","save":"Enregistrer"}'
-></div>
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.css">
+  <style>
+    #editor { width: 100%; height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="editor" 
+       data-swp 
+       data-swp-width="1920" 
+       data-swp-height="1080" 
+       data-swp-theme="dark"
+       data-swp-accent-color="#00FF99">
+  </div>
+  <script src="https://unpkg.com/senangwebs-photobooth@latest/dist/swp.js"></script>
+</body>
+</html>
 ```
 
-**Available Data Attributes:**
-
-- `data-swp` - Enable auto-initialization
-- `data-swp-width` - Canvas width (number)
-- `data-swp-height` - Canvas height (number)
-- `data-swp-image-url` - Initial image URL
-- `data-swp-show-icons` - Show/hide icons ("true" or "false")
-- `data-swp-show-labels` - Show/hide labels ("true" or "false")
-- `data-swp-labels` - Custom labels (see formats above)
-
-The library will automatically initialize when the DOM is ready.
-
-## API Reference
-
-### Initialization
+#### Accessing Data Attribute Instances
 
 ```javascript
-const swp = new SWP(container, options);
-```
+// Access via element property
+const editor = document.getElementById('editor').swpInstance;
 
-**Options:**
-
-- `imageUrl` (String) - URL of the image to load
-- `width` (Number) - Width of the editor in pixels (default: 800)
-- `height` (Number) - Height of the editor in pixels (default: 600)
-- `showIcons` (Boolean) - Show icons in toolbar buttons (default: true)
-- `showLabels` (Boolean) - Show text labels in toolbar buttons (default: true)
-- `labels` (Object) - Custom labels for toolbar buttons
-  - `upload` (String|null) - Label for upload button (default: 'Upload')
-  - `rotateLeft` (String|null) - Label for rotate left button (default: null)
-  - `rotateRight` (String|null) - Label for rotate right button (default: null)
-  - `flipH` (String|null) - Label for flip horizontal button (default: null)
-  - `flipV` (String|null) - Label for flip vertical button (default: null)
-  - `resize` (String|null) - Label for resize button (default: 'Resize')
-  - `adjust` (String|null) - Label for adjustments button (default: 'Adjust')
-  - `filters` (String|null) - Label for filters button (default: 'Filters')
-  - `reset` (String|null) - Label for reset button (default: 'Reset')
-  - `save` (String|null) - Label for save button (default: 'Save')
-
-**Customization Examples:**
+// Access all auto-initialized instances
+const allEditors = SWP.instances;
 
-```javascript
-// Icons only (compact view)
-const swp = new SWP(container, {
-  showLabels: false,
-});
-
-// Custom labels (multilingual support)
-const swp = new SWP(container, {
-  labels: {
-    upload: "Télécharger",
-    save: "Enregistrer",
-    reset: "Réinitialiser",
-  },
-});
-
-// Hide specific labels (set to null)
-const swp = new SWP(container, {
-  labels: {
-    rotateLeft: null, // No label, icon only
-    rotateRight: null,
-  },
-});
-
-// Show labels for rotate and flip buttons
-const swp = new SWP(container, {
-  labels: {
-    rotateLeft: "Rotate Left",
-    rotateRight: "Rotate Right",
-    flipH: "Flip Horizontal",
-    flipV: "Flip Vertical",
-  },
-});
+// Manually trigger auto-init (if needed after dynamic content load)
+SWP.autoInit();
 ```
 
-**Note:** By default, `rotateLeft`, `rotateRight`, `flipH`, and `flipV` have `null` labels (icon-only display) to keep the toolbar compact. You can add custom labels to these buttons as shown above.
+#### Available Data Attributes
 
-### Methods
-
-#### `loadImage(imageUrl)`
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data-swp` | - | - | Required. Marks element for auto-initialization |
+| `data-swp-width` | number | 1920 | Canvas width in pixels |
+| `data-swp-height` | number | 1080 | Canvas height in pixels |
+| `data-swp-theme` | string | 'dark' | UI theme ('dark' or 'light') |
+| `data-swp-accent-color` | string | '#00FF99' | UI accent color (hex format) |
 
-Load a new image into the editor.
+## API Reference
 
+### Constructor
 ```javascript
-swp.loadImage("path/to/image.jpg");
+const editor = new SWP(container, options);
 ```
 
-#### `rotate(degrees)`
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `width` | number | 1920 | Canvas width |
+| `height` | number | 1080 | Canvas height |
+| `theme` | string | 'dark' | UI theme ('dark' or 'light') |
+| `accentColor` | string | '#00FF99' | UI accent color |
 
-Rotate the image by specified degrees.
+### Methods
 
+#### Document Operations
 ```javascript
-swp.rotate(90); // Rotate 90 degrees clockwise
-swp.rotate(-90); // Rotate 90 degrees counter-clockwise
-```
+// Create new document
+editor.newDocument(width, height, background);
 
-#### `flip(direction)`
+// Load image from URL
+await editor.loadImage('path/to/image.jpg');
 
-Flip the image horizontally or vertically.
+// Export as data URL
+const dataURL = editor.getImageData('png', 1.0);
 
-```javascript
-swp.flip("horizontal");
-swp.flip("vertical");
+// Download export (format: 'png', 'jpeg', or 'webp')
+editor.export('png', 1.0);
 ```
 
-#### `setAdjustment(adjustment, value)`
-
-Apply adjustments to the image.
-
+#### History
 ```javascript
-swp.setAdjustment("brightness", 150); // Range: 0-200
-swp.setAdjustment("contrast", 120); // Range: 0-200
-swp.setAdjustment("saturation", 80); // Range: 0-200
+editor.undo();
+editor.redo();
 ```
 
-#### `applyFilter(filterName)`
-
-Apply a pre-defined filter.
-
+#### Tools
 ```javascript
-swp.applyFilter("grayscale");
-swp.applyFilter("sepia");
-swp.applyFilter("invert");
-swp.applyFilter("blur");
-swp.applyFilter("none"); // Remove filter
+editor.setTool('brush');
+editor.setTool('move');
 ```
 
-#### `crop(x, y, width, height)`
-
-Crop the image to specified dimensions.
-
+#### Filters
 ```javascript
-swp.crop(100, 100, 400, 300);
+editor.applyFilter('brightness', { value: 20 });
+editor.applyFilter('blur', { radius: 5 });
+editor.applyFilter('grayscale');
 ```
 
-#### `reset()`
-
-Reset all edits and revert to original image.
-
+#### Theming
 ```javascript
-swp.reset();
-```
-
-#### `getImageData(format, quality)`
+// Change theme at runtime
+editor.setTheme('light');  // or 'dark'
 
-Export the edited image data.
-
-```javascript
-const dataUrl = swp.getImageData("png"); // PNG format
-const dataUrl = swp.getImageData("jpeg", 0.9); // JPEG with 90% quality
+// Change accent color at runtime
+editor.setAccentColor('#FF6B6B');
 ```
 
-### Events
-
-Listen to events using the `on()` method:
-
+#### Events
 ```javascript
-swp.on("load", () => {
-  console.log("Image loaded successfully");
-});
-
-swp.on("change", () => {
-  console.log("Image has been edited");
-});
-
-swp.on("save", () => {
-  console.log("Image saved");
-});
+editor.on('ready', () => { });
+editor.on('tool:select', (data) => { });
+editor.on('layer:add', (data) => { });
+editor.on('history:push', (data) => { });
 ```
 
-## NPM Scripts
-
-- `npm run dev` - Start development server with hot reload
-- `npm run build` - Build for production
+### Available Events
+- `ready` - Editor initialized
+- `change` - Theme or accent color changed
+- `tool:select` - Tool changed
+- `tool:start` - Tool action started
+- `tool:end` - Tool action ended
+- `layer:add` - Layer added
+- `layer:remove` - Layer removed
+- `layer:select` - Layer selected
+- `history:push` - History state added
+- `history:undo` - Undo performed
+- `history:redo` - Redo performed
+- `canvas:zoom` - Zoom changed
+- `color:foreground` - Foreground color changed
+- `color:background` - Background color changed
+
+## UI Overview
+
+### Header Bar
+- **Load** - Open image file
+- **Download** - Export with format selection (PNG/JPEG/WebP)
+- **Undo/Redo** - History navigation
+- **History** - Toggle history panel
+- **Layers** - Toggle layers panel
+- **Reset** - Reset canvas
+- **Center** - Fit canvas to screen
+- **Fullscreen** - Toggle fullscreen mode
+
+### Menu Bar (Bottom)
+- **Crop** - Crop with aspect ratio presets
+- **Rotate** - Rotate canvas by angle
+- **Flip** - Flip horizontal/vertical
+- **Resize** - Resize canvas dimensions
+- **Draw** - Brush tool with size and color
+- **Shape** - Draw shapes (rectangle, ellipse, line)
+- **Text** - Add and style text
+- **Filter** - Apply image filters
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Development mode with watch
+npm run dev
+
+# Production build
+npm run build
+```
 
 ## License
 
-MIT License
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## Future Enhancements
-
-- More filters and adjustments
-- Text and sticker overlays
-- Touch gesture support
-- Framework integrations (React, Vue, Angular)
+MIT License