npm - senangwebs-photobooth - Versions diffs - 1.0.1 → 2.0.2 - Mend

senangwebs-photobooth 1.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/README.md +219 -235
package/dist/swp.css +884 -344
package/dist/swp.js +1 -1
package/examples/data-attribute.html +69 -0
package/examples/index.html +56 -51
package/examples/studio.html +83 -0
package/package.json +12 -5
package/src/css/swp.css +884 -344
package/src/js/core/Canvas.js +398 -0
package/src/js/core/EventEmitter.js +188 -0
package/src/js/core/History.js +250 -0
package/src/js/core/Keyboard.js +323 -0
package/src/js/filters/FilterManager.js +248 -0
package/src/js/index.js +48 -0
package/src/js/io/Clipboard.js +52 -0
package/src/js/io/FileManager.js +150 -0
package/src/js/layers/BlendModes.js +342 -0
package/src/js/layers/Layer.js +415 -0
package/src/js/layers/LayerManager.js +459 -0
package/src/js/selection/Selection.js +167 -0
package/src/js/swp.js +297 -709
package/src/js/tools/BaseTool.js +264 -0
package/src/js/tools/BrushTool.js +314 -0
package/src/js/tools/CropTool.js +400 -0
package/src/js/tools/EraserTool.js +155 -0
package/src/js/tools/EyedropperTool.js +184 -0
package/src/js/tools/FillTool.js +109 -0
package/src/js/tools/GradientTool.js +141 -0
package/src/js/tools/HandTool.js +51 -0
package/src/js/tools/MarqueeTool.js +103 -0
package/src/js/tools/MoveTool.js +465 -0
package/src/js/tools/ShapeTool.js +285 -0
package/src/js/tools/TextTool.js +253 -0
package/src/js/tools/ToolManager.js +277 -0
package/src/js/tools/ZoomTool.js +68 -0
package/src/js/ui/ColorManager.js +71 -0
package/src/js/ui/UI.js +1211 -0
package/swp_preview1.png +0 -0
package/swp_preview2.png +0 -0
package/webpack.config.js +4 -11
package/dist/styles.js +0 -1
package/examples/customization.html +0 -360
package/spec.md +0 -239
package/swp_preview.png +0 -0

package/swp_preview1.png ADDED Viewed

Binary file

package/swp_preview2.png ADDED Viewed

Binary file

package/webpack.config.js CHANGED Viewed

@@ -2,12 +2,9 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
-  entry: {
-    swp: './src/js/swp.js',
-    styles: './src/css/swp.css'
-  },
+  entry: './src/js/swp.js',
   output: {
-    filename: '[name].js',
+    filename: 'swp.js',
     path: path.resolve(__dirname, 'dist'),
     library: {
       name: 'SWP',
@@ -21,9 +18,7 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
+        use: { loader: 'babel-loader' }
       },
       {
         test: /\.css$/,
@@ -32,8 +27,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'swp.css'
-    })
+    new MiniCssExtractPlugin({ filename: 'swp.css' })
   ]
 };

package/dist/styles.js DELETED Viewed

	@@ -1 +0,0 @@
1	- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SWP=t():e.SWP=t()}(this,()=>(()=>{"use strict";var e={};return e.default})());

package/examples/customization.html DELETED Viewed

@@ -1,360 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SWP - Customization Examples</title>
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- SWP Library -->
-    <link rel="stylesheet" href="../dist/swp.css" />
-    <style>
-      .example-section {
-        margin-bottom: 40px;
-        padding: 30px;
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-      }
-      .example-title {
-        font-size: 20px;
-        font-weight: 600;
-        color: #333;
-        margin-bottom: 10px;
-      }
-      .example-desc {
-        font-size: 14px;
-        color: #666;
-        margin-bottom: 20px;
-      }
-      .code-block {
-        background: #f7fafc;
-        border: 1px solid #e2e8f0;
-        border-radius: 6px;
-        padding: 15px;
-        font-family: "Courier New", monospace;
-        font-size: 13px;
-        overflow-x: auto;
-        margin-bottom: 20px;
-      }
-    </style>
-  </head>
-  <body class="bg-gray-100 py-8">
-    <div class="max-w-7xl mx-auto px-4">
-      <!-- Header -->
-      <div class="text-center mb-8">
-        <h1 class="text-4xl font-bold text-gray-800 mb-2">
-          SWP Customization Examples
-        </h1>
-        <p class="text-gray-600">
-          Explore different ways to customize the photo editor UI
-        </p>
-      </div>
-      <!-- Example 1: Default (Icons + Labels) -->
-      <div class="example-section">
-        <div class="example-title">
-          1. Default Configuration (Icons + Labels)
-        </div>
-        <div class="example-desc">
-          Shows both icons and labels for all tools
-        </div>
-        <div class="code-block">
-          <pre>
-const swp1 = new SWP(document.getElementById('editor1'), {
-    width: 800,
-    height: 500
-});</pre
-          >
-        </div>
-        <div id="editor1"></div>
-      </div>
-      <!-- Example 2: Icons Only -->
-      <div class="example-section">
-        <div class="example-title">2. Icons Only (Compact View)</div>
-        <div class="example-desc">
-          Hides all labels, shows only icons with tooltips
-        </div>
-        <div class="code-block">
-          <pre>
-const swp2 = new SWP(document.getElementById('editor2'), {
-    width: 800,
-    height: 500,
-    showLabels: false  // Hide all labels
-});</pre
-          >
-        </div>
-        <div id="editor2"></div>
-      </div>
-      <!-- Example 3: Labels Only -->
-      <div class="example-section">
-        <div class="example-title">3. Labels Only (Text-based)</div>
-        <div class="example-desc">Hides all icons, shows only text labels</div>
-        <div class="code-block">
-          <pre>
-const swp3 = new SWP(document.getElementById('editor3'), {
-    width: 800,
-    height: 500,
-    showIcons: false  // Hide all icons
-    labels: {
-        upload: 'Upload',
-        rotateLeft: 'Rotate Left',
-        rotateRight: 'Rotate Right',
-        flipH: 'Flip Horiz...',
-        flipV: 'Flip Verti...',
-        resize: 'Resize',
-        adjust: 'Adjust',
-        filters: 'Filters',
-        reset: 'Reset',
-        save: 'Save'
-    }
-});</pre
-          >
-        </div>
-        <div id="editor3"></div>
-      </div>
-      <!-- Example 4: Custom Labels -->
-      <div class="example-section">
-        <div class="example-title">4. Custom Labels (Multilingual)</div>
-        <div class="example-desc">
-          Customize button labels for different languages or preferences
-        </div>
-        <div class="code-block">
-          <pre>
-const swp4 = new SWP(document.getElementById('editor4'), {
-    width: 800,
-    height: 500,
-    labels: {
-        upload: 'Télécharger',      // French
-        resize: 'Redimensionner',
-        adjust: 'Ajuster',
-        filters: 'Filtres',
-        reset: 'Réinitialiser',
-        save: 'Enregistrer'
-    }
-});</pre
-          >
-        </div>
-        <div id="editor4"></div>
-      </div>
-      <!-- Example 5: Selective Labels -->
-      <div class="example-section">
-        <div class="example-title">
-          5. Selective Labels (Icons Only for Rotate/Flip)
-        </div>
-        <div class="example-desc">
-          Hide labels for specific tools by setting them to null
-        </div>
-        <div class="code-block">
-          <pre>
-const swp5 = new SWP(document.getElementById('editor5'), {
-    width: 800,
-    height: 500,
-    labels: {
-        rotateLeft: null,   // No label for rotate left
-        rotateRight: null,  // No label for rotate right
-        flipH: null,        // No label for flip horizontal
-        flipV: null         // No label for flip vertical
-    }
-});</pre
-          >
-        </div>
-        <div id="editor5"></div>
-      </div>
-      <!-- Example 6: Creative Labels -->
-      <div class="example-section">
-        <div class="example-title">6. Creative Custom Labels</div>
-        <div class="example-desc">Use creative or branded terminology</div>
-        <div class="code-block">
-          <pre>
-const swp6 = new SWP(document.getElementById('editor6'), {
-    width: 800,
-    height: 500,
-    showIcons: false,
-    labels: {
-        upload: '📸',
-        rotateLeft: '↩️',
-        rotateRight: '↪️',
-        flipH: '↔️',
-        flipV: '↕️',
-        resize: '📏',
-        adjust: '🎨',
-        filters: '✨',
-        reset: '🔄',
-        save: '💾'
-    }
-});</pre
-          >
-        </div>
-        <div id="editor6"></div>
-      </div>
-      <!-- Example 7: Minimal UI -->
-      <div class="example-section">
-        <div class="example-title">
-          7. Minimal UI (Icons Only + Selected Labels)
-        </div>
-        <div class="example-desc">
-          Combine showLabels: false with custom labels for specific buttons
-        </div>
-        <div class="code-block">
-          <pre>
-const swp7 = new SWP(document.getElementById('editor7'), {
-    width: 800,
-    height: 500,
-    showIcons: false,
-    labels: {
-        upload: null,
-        rotateLeft: null,
-        rotateRight: null,
-        flipH: null,
-        flipV: null,
-        resize: null,
-        adjust: null,
-        filters: null,
-        reset: null,
-        save: 'Save'  // Only show Save label
-    }
-});</pre
-          >
-        </div>
-        <div id="editor7"></div>
-      </div>
-      <!-- Footer -->
-      <div class="text-center mt-12 text-gray-600 text-sm">
-        <p>
-          SenangWebs Photobooth v1.0.0 |
-          <a href="index.html" class="text-blue-600 hover:underline"
-            >Back to Main Example</a
-          >
-        </p>
-      </div>
-    </div>
-    <!-- SWP Library Script -->
-    <script src="../dist/swp.js"></script>
-    <!-- Initialize Examples -->
-    <script>
-      // Example 1: Default
-      const swp1 = new SWP(document.getElementById("editor1"), {
-        width: 800,
-        height: 500,
-      });
-      // Example 2: Icons Only
-      const swp2 = new SWP(document.getElementById("editor2"), {
-        width: 800,
-        height: 500,
-        showLabels: false,
-      });
-      // Example 3: Labels Only
-      const swp3 = new SWP(document.getElementById("editor3"), {
-        width: 800,
-        height: 500,
-        showIcons: false,
-        labels: {
-          upload: "Upload",
-          rotateLeft: "Rotate Left",
-          rotateRight: "Rotate Right",
-          flipH: "Flip Horiz...",
-          flipV: "Flip Verti...",
-          resize: "Resize",
-          adjust: "Adjust",
-          filters: "Filters",
-          reset: "Reset",
-          save: "Save",
-        },
-      });
-      // Example 4: French Labels
-      const swp4 = new SWP(document.getElementById("editor4"), {
-        width: 800,
-        height: 500,
-        labels: {
-          upload: "Télécharger",
-          resize: "Redimensionner",
-          adjust: "Ajuster",
-          filters: "Filtres",
-          reset: "Réinitialiser",
-          save: "Enregistrer",
-        },
-      });
-      // Example 5: Selective Labels
-      const swp5 = new SWP(document.getElementById("editor5"), {
-        width: 800,
-        height: 500,
-        labels: {
-          rotateLeft: null,
-          rotateRight: null,
-          flipH: null,
-          flipV: null,
-        },
-      });
-      // Example 6: Creative Labels
-      const swp6 = new SWP(document.getElementById("editor6"), {
-        width: 800,
-        height: 500,
-        showIcons: false,
-        labels: {
-          upload: "📸",
-          rotateLeft: "↩️",
-          rotateRight: "↪️",
-          flipH: "↔️",
-          flipV: "↕️",
-          resize: "📏",
-          adjust: "🎨",
-          filters: "✨",
-          reset: "🔄",
-          save: "💾",
-        },
-      });
-      // Example 7: Minimal UI
-      const swp7 = new SWP(document.getElementById("editor7"), {
-        width: 800,
-        height: 500,
-        showIcons: true,
-        labels: {
-          upload: null,
-          rotateLeft: null,
-          rotateRight: null,
-          flipH: null,
-          flipV: null,
-          resize: null,
-          adjust: null,
-          filters: null,
-          reset: null,
-          save: "Save",
-        },
-      });
-      // Add console logging for all instances
-      [swp1, swp2, swp3, swp4, swp5, swp6, swp7].forEach((instance, idx) => {
-        instance.on("load", () =>
-          console.log(`Example ${idx + 1}: Image loaded`)
-        );
-        instance.on("change", () =>
-          console.log(`Example ${idx + 1}: Image changed`)
-        );
-        instance.on("save", () =>
-          console.log(`Example ${idx + 1}: Image saved`)
-        );
-      });
-      console.log("All 7 examples initialized! Upload images to test them.");
-    </script>
-  </body>
-</html>

package/spec.md DELETED Viewed

@@ -1,239 +0,0 @@
-# SenangWebs Photobooth (SWP) - Specification
-## 1. Introduction
-SenangWebs Photobooth (SWP) is a lightweight and easy-to-use JavaScript library for client-side photo editing. It provides a simple and intuitive interface for users to perform basic image manipulations directly in the browser. This document outlines the technical specifications, features, and API of the SWP library.
-The primary goal of SWP is to offer a straightforward solution for developers to integrate photo editing capabilities into their web applications without the need for complex server-side processing.
-## 2. Features
-SWP will provide the following core photo editing features:
-### 2.1. Core Manipulations
-*   **Cropping:** Users can select an area of the image and crop it to the desired dimensions. This includes options for predefined aspect ratios (e.g., 1:1, 4:3, 16:9) and a freeform selection.
-*   **Rotating:** Users can rotate the image in 90-degree increments to the left and right.
-*   **Flipping:** Users can flip the image horizontally and vertically.
-### 2.2. Adjustments
-Users can fine-tune the appearance of the image with the following adjustments:
-*   **Brightness:** Increase or decrease the overall lightness of the image.
-*   **Contrast:** Adjust the difference between the light and dark areas of the image.
-*   **Saturation:** Control the intensity of the colors in the image.
-### 2.3. Filters
-A selection of pre-defined filters will be available to apply one-click effects to the image. These filters will be implemented using CSS `filter` properties. Initial filters will include:
-*   **Grayscale:** Converts the image to shades of gray.
-*   **Sepia:** Gives the image a reddish-brown tone.
-*   **Invert:** Inverts the colors of the image.
-*   **Blur:** Applies a Gaussian blur to the image.
-## 3. Technical Specifications
-### 3.1. Architecture
-SWP is a client-side JavaScript library with no server-side dependencies. It will utilize the HTML5 Canvas API for image rendering and manipulation. This approach ensures that all image processing is done within the user's browser, providing a fast and responsive experience.
-### 3.2. Dependencies
-The library will have no external dependencies to keep it lightweight and easy to integrate.
-### 3.3. Browser Compatibility
-SWP will be compatible with all modern web browsers that support the HTML5 Canvas API and the CSS `filter` property. The target browsers include:
-*   Google Chrome (latest 2 versions)
-*   Mozilla Firefox (latest 2 versions)
-*   Microsoft Edge (latest 2 versions)
-*   Safari (latest 2 versions)
-### 3.4. File Output
-The edited image can be exported in the following formats:
-*   JPEG
-*   PNG
-Users will be able to specify the output format and, for JPEG, the image quality.
-## 4. API Reference
-The SWP library will be instantiated on a container `div` element in the HTML.
-### 4.1. Initialization
-To initialize the photo booth, create a new instance of `SenangWebsPhotobooth`:
-```javascript
-const swp = new SWP(container, options);
-```
-**Parameters:**
-*   `container` (HTMLElement): The DOM element that will contain the photo booth interface.
-*   `options` (Object): An optional configuration object.
-**Options:**
-*   `imageUrl` (String): The URL of the image to be loaded into the editor.
-*   `width` (Number): The width of the editor in pixels.
-*   `height` (Number): The height of the editor in pixels.
-### 4.2. Methods
-The `swp` instance will expose the following public methods:
-#### `loadImage(imageUrl)`
-Loads a new image into the editor.
-*   **`imageUrl`** (String): The URL of the image to load.
-#### `crop(x, y, width, height)`
-Crops the image to the specified dimensions.
-*   **`x`** (Number): The x-coordinate of the top-left corner of the crop area.
-*   **`y`** (Number): The y-coordinate of the top-left corner of the crop area.
-*   **`width`** (Number): The width of the crop area.
-*   **`height`** (Number): The height of the crop area.
-#### `rotate(degrees)`
-Rotates the image by the specified degrees.
-*   **`degrees`** (Number): The degree of rotation. Positive values rotate clockwise, negative values rotate counter-clockwise. For the initial version, this will be limited to multiples of 90.
-#### `flip(direction)`
-Flips the image.
-*   **`direction`** (String): The direction to flip. Can be `'horizontal'` or `'vertical'`.
-#### `setAdjustment(adjustment, value)`
-Applies an adjustment to the image.
-*   **`adjustment`** (String): The adjustment to apply. Can be `'brightness'`, `'contrast'`, or `'saturation'`.
-*   **`value`** (Number): The value of the adjustment. The range will be specific to each adjustment.
-#### `applyFilter(filterName)`
-Applies a pre-defined filter to the image.
-*   **`filterName`** (String): The name of the filter to apply (e.g., `'grayscale'`, `'sepia'`).
-#### `reset()`
-Resets all edits and reverts the image to its original state.
-#### `getImageData(format, quality)`
-Exports the edited image data.
-*   **`format`** (String): The desired output format (`'jpeg'` or `'png'`). Defaults to `'jpeg'`.
-*   **`quality`** (Number): For JPEG format, a number between 0 and 1 representing the image quality. Defaults to 0.9.
-*   **Returns:** A data URL representing the image.
-### 4.3. Events
-The SWP instance will emit the following events that can be listened to:
-*   **`'load'`**: Fired when an image has been successfully loaded into the editor.
-*   **`'change'`**: Fired whenever an edit is applied to the image.
-*   **`'save'`**: Fired when the image data has been successfully exported.
-## 5. User Interface
-The SWP library will generate a user-friendly interface within the specified container element. The UI will consist of:
-*   **Canvas Area:** The main area where the image is displayed and manipulated.
-*   **Toolbar:** A toolbar containing buttons for all the editing features (crop, rotate, flip, adjustments, filters).
-*   **Adjustment Sliders:** For adjustments like brightness and contrast, sliders will be provided for intuitive control.
-*   **Filter Thumbnails:** A gallery of thumbnails will display a preview of each filter effect.
-## 6. Example Usage
-### HTML/Declarative Approach
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>SenangWebs Photobooth</title>
-    <link rel="stylesheet" href="swp.css">
-</head>
-<body>
-    <!-- Basic initialization -->
-    <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 -->
-    <div data-swp
-         data-swp-labels="upload: 'Muat Naik'; resize: 'Tukar Saiz'; save: 'Simpan'"></div>
-    <script src="swp.js"></script>
-</body>
-</html>
-```
-**Supported Data Attributes:**
-- `data-swp` - Enables auto-initialization
-- `data-swp-width` - Canvas width in pixels
-- `data-swp-height` - Canvas height in pixels
-- `data-swp-image-url` - URL of image to load on initialization
-- `data-swp-show-icons` - Show/hide toolbar icons ("true" or "false")
-- `data-swp-show-labels` - Show/hide toolbar labels ("true" or "false")
-- `data-swp-labels` - Custom button labels in simple format (`key: 'value'; key2: 'value2'`) or JSON format
-### JS/Programmatic Approach
-```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>SenangWebs Photobooth</title>
-    <link rel="stylesheet" href="senangwebs-photobooth.css">
-</head>
-<body>
-    <div id="photobooth-container"></div>
-    <script src="swp.js"></script>
-    <script>
-        const container = document.getElementById('photobooth-container');
-        const options = {
-            imageUrl: 'path/to/your/image.jpg',
-            width: 800,
-            height: 600
-        };
-        const swp = new SWP(container, options);
-        swp.on('change', () => {
-            console.log('Image has been edited.');
-        });
-        // Example of programmatically applying an edit
-        // swp.rotate(90);
-    </script>
-</body>
-</html>
-```
-## 7. Future Enhancements
-*   **More Filters and Adjustments:** Addition of more advanced filters and adjustments like temperature, tint, and vibrance.
-*   **Text and Stickers:** Ability to add text overlays and stickers to the image.
-*   **Redo/Undo Functionality:** A history mechanism to allow users to undo and redo their edits.
-*   **Touch Support:** Improved support for touch gestures on mobile devices.
-*   **Framework Integration:** Wrappers for popular JavaScript frameworks like React, Vue, and Angular.

package/swp_preview.png DELETED Viewed

Binary file