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

senangwebs-photobooth 1.0.2 → 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 (43) hide show

package/README.md +220 -236
package/dist/swp.css +790 -256
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 +10 -6
package/src/css/swp.css +790 -256
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 +247 -761
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/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/swp_preview.png DELETED Viewed

Binary file