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
  1. package/README.md +219 -235
  2. package/dist/swp.css +884 -344
  3. package/dist/swp.js +1 -1
  4. package/examples/data-attribute.html +69 -0
  5. package/examples/index.html +56 -51
  6. package/examples/studio.html +83 -0
  7. package/package.json +12 -5
  8. package/src/css/swp.css +884 -344
  9. package/src/js/core/Canvas.js +398 -0
  10. package/src/js/core/EventEmitter.js +188 -0
  11. package/src/js/core/History.js +250 -0
  12. package/src/js/core/Keyboard.js +323 -0
  13. package/src/js/filters/FilterManager.js +248 -0
  14. package/src/js/index.js +48 -0
  15. package/src/js/io/Clipboard.js +52 -0
  16. package/src/js/io/FileManager.js +150 -0
  17. package/src/js/layers/BlendModes.js +342 -0
  18. package/src/js/layers/Layer.js +415 -0
  19. package/src/js/layers/LayerManager.js +459 -0
  20. package/src/js/selection/Selection.js +167 -0
  21. package/src/js/swp.js +297 -709
  22. package/src/js/tools/BaseTool.js +264 -0
  23. package/src/js/tools/BrushTool.js +314 -0
  24. package/src/js/tools/CropTool.js +400 -0
  25. package/src/js/tools/EraserTool.js +155 -0
  26. package/src/js/tools/EyedropperTool.js +184 -0
  27. package/src/js/tools/FillTool.js +109 -0
  28. package/src/js/tools/GradientTool.js +141 -0
  29. package/src/js/tools/HandTool.js +51 -0
  30. package/src/js/tools/MarqueeTool.js +103 -0
  31. package/src/js/tools/MoveTool.js +465 -0
  32. package/src/js/tools/ShapeTool.js +285 -0
  33. package/src/js/tools/TextTool.js +253 -0
  34. package/src/js/tools/ToolManager.js +277 -0
  35. package/src/js/tools/ZoomTool.js +68 -0
  36. package/src/js/ui/ColorManager.js +71 -0
  37. package/src/js/ui/UI.js +1211 -0
  38. package/swp_preview1.png +0 -0
  39. package/swp_preview2.png +0 -0
  40. package/webpack.config.js +4 -11
  41. package/dist/styles.js +0 -1
  42. package/examples/customization.html +0 -360
  43. package/spec.md +0 -239
  44. package/swp_preview.png +0 -0
package/examples/data-attribute.html ADDED
@@ -0,0 +1,69 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SenangWebs Photobooth - Data Attribute Init</title>
7
+
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ html, body {
16
+ width: 100%;
17
+ height: 100%;
18
+ overflow: hidden;
19
+ }
20
+
21
+ #editor {
22
+ width: 100%;
23
+ height: 100%;
24
+ }
25
+ </style>
26
+
27
+ <!-- SWP Library -->
28
+ <link rel="stylesheet" href="../dist/swp.css">
29
+ </head>
30
+ <body>
31
+ <!-- Data attribute initialization - no JavaScript needed! -->
32
+ <div id="editor"
33
+ data-swp
34
+ data-swp-width="600"
35
+ data-swp-height="400"
36
+ data-swp-theme="light"
37
+ data-swp-accent-color="#00FF99">
38
+ </div>
39
+
40
+ <!-- SWP Library Script -->
41
+ <script src="../dist/swp.js"></script>
42
+
43
+ <script>
44
+ // Access the auto-initialized instance via element.swpInstance
45
+ const editorElement = document.getElementById('editor');
46
+
47
+ // Wait for the instance to be ready
48
+ const checkInstance = () => {
49
+ if (editorElement.swpInstance) {
50
+ const editor = editorElement.swpInstance;
51
+
52
+ editor.on('ready', () => {
53
+ console.log('🎨 SenangWebs Photobooth initialized via data attributes!');
54
+ });
55
+
56
+ editor.on('tool:select', (data) => {
57
+ console.log(`Tool selected: ${data.tool}`);
58
+ });
59
+ } else {
60
+ setTimeout(checkInstance, 10);
61
+ }
62
+ };
63
+ checkInstance();
64
+
65
+ // Alternative: Access all instances via SWP.instances
66
+ // console.log('All instances:', SWP.instances);
67
+ </script>
68
+ </body>
69
+ </html>
package/examples/index.html CHANGED
@@ -1,54 +1,59 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>SenangWebs Photobooth - Professional Photo Editor</title>
7
-
8
- <!-- Tailwind CSS -->
9
- <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- SWP Library -->
12
- <link rel="stylesheet" href="../dist/swp.css" />
13
- </head>
14
- <body class="min-h-screen p-8 bg-gray-100">
15
- <main
16
- class="container flex flex-col gap-8 items-center justify-center mx-auto"
17
- >
18
- <h2 class="text-2xl lg:text-4xl capitalize font-bold">
19
- Declarative Approach
20
- </h2>
21
-
22
- <div
23
- data-swp
24
- data-swp-labels="rotateLeft: 'Rotate Left'; rotateRight: 'Rotate Right'; flipH: 'Flip H'; flipV: 'Flip V'; upload: 'Muat Naik'; resize: 'Tukar Saiz'; adjust: 'Laraskan'; filters: 'Penapis'; reset: 'Set Semula'; save: 'Simpan'"
25
- class="border container h-[800px]"
26
- >
27
- <div data-swp-tools></div>
28
- <div data-swp-canvas></div>
29
- </div>
30
-
31
- <h2 class="text-2xl lg:text-4xl capitalize font-bold">
32
- Programmatic Approach
33
- </h2>
34
-
35
- <div id="photobooth" class="border container h-[600px]"></div>
36
- </main>
37
-
38
- <!-- SWP Library Script -->
39
- <script src="../dist/swp.js"></script>
40
-
41
- <!-- Application Script -->
42
- <script>
43
- // Console output helper
44
- const consoleOutput = document.getElementById("console-output");
45
- const statusElement = document.getElementById("status");
46
-
47
- // Initialize SWP
48
- const swpInstance = new SWP(document.getElementById("photobooth"), {
49
- width: 900,
50
- height: 400,
51
- });
52
- </script>
53
- </body>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SenangWebs Photobooth - Image Editor</title>
7
+
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ html, body {
16
+ width: 100%;
17
+ height: 100%;
18
+ overflow: hidden;
19
+ font-family: 'Inter', system-ui, sans-serif;
20
+ background: #0d0d0d;
21
+ }
22
+
23
+ #editor {
24
+ width: 100%;
25
+ height: 100%;
26
+ }
27
+ </style>
28
+
29
+ <link rel="stylesheet" href="../dist/swp.css">
30
+ </head>
31
+ <body>
32
+ <div id="editor"></div>
33
+
34
+ <script src="../dist/swp.js"></script>
35
+
36
+ <script>
37
+ // Initialize editor
38
+ const editor = new SWP('#editor', {
39
+ width: 1920,
40
+ height: 1080,
41
+ theme: 'dark',
42
+ accentColor: '#FFFF00'
43
+ });
44
+
45
+ // Event listeners
46
+ editor.on('ready', () => {
47
+ console.log('%c🎨 SenangWebs Photobooth v3.0.0', 'color: #5b9ef4; font-size: 16px; font-weight: bold;');
48
+ console.log('%cTOAST UI-Inspired Image Editor', 'color: #888; font-size: 12px;');
49
+ console.log('');
50
+ console.log('Use the bottom menu to access tools:');
51
+ console.log(' Crop • Rotate • Flip • Draw • Shape • Text • Filter');
52
+ });
53
+
54
+ editor.on('history:push', (data) => {
55
+ console.log(`History: ${data.actionName}`);
56
+ });
57
+ </script>
58
+ </body>
54
59
  </html>
package/examples/studio.html ADDED
@@ -0,0 +1,83 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SenangWebs Photobooth - Photo Editor</title>
7
+
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ html, body {
16
+ width: 100%;
17
+ height: 100%;
18
+ overflow: hidden;
19
+ }
20
+
21
+ #editor {
22
+ width: 100%;
23
+ height: 100%;
24
+ }
25
+ </style>
26
+
27
+ <!-- SWP Library -->
28
+ <link rel="stylesheet" href="../dist/swp.css">
29
+ </head>
30
+ <body>
31
+ <div id="editor"></div>
32
+
33
+ <!-- SWP Library Script -->
34
+ <script src="../dist/swp.js"></script>
35
+
36
+ <script>
37
+ // Initialize SenangWebs Photobooth
38
+ const editor = new SWP('#editor', {
39
+ width: 1920,
40
+ height: 1080,
41
+ theme: 'dark'
42
+ });
43
+
44
+ // Event listeners
45
+ editor.on('ready', () => {
46
+ console.log('🎨 SenangWebs Photobooth is ready!');
47
+ console.log('Keyboard shortcuts:');
48
+ console.log(' V - Move tool');
49
+ console.log(' B - Brush tool');
50
+ console.log(' E - Eraser tool');
51
+ console.log(' T - Text tool');
52
+ console.log(' M - Marquee selection');
53
+ console.log(' G - Gradient/Fill tool');
54
+ console.log(' U - Shape tool');
55
+ console.log(' I - Eyedropper');
56
+ console.log(' C - Crop tool');
57
+ console.log(' H - Hand tool (or hold Space)');
58
+ console.log(' Z - Zoom tool');
59
+ console.log(' X - Swap colors');
60
+ console.log(' D - Reset colors');
61
+ console.log(' [ / ] - Brush size');
62
+ console.log(' Ctrl+Z - Undo');
63
+ console.log(' Ctrl+Shift+Z - Redo');
64
+ console.log(' Ctrl+N - New document');
65
+ console.log(' Ctrl+O - Open image');
66
+ console.log(' Ctrl+S - Save project');
67
+ console.log(' Ctrl+E - Export');
68
+ });
69
+
70
+ editor.on('tool:select', (data) => {
71
+ console.log(`Tool selected: ${data.tool}`);
72
+ });
73
+
74
+ editor.on('layer:add', (data) => {
75
+ console.log(`Layer added: ${data.layer.name}`);
76
+ });
77
+
78
+ editor.on('history:push', (data) => {
79
+ console.log(`History: ${data.actionName}`);
80
+ });
81
+ </script>
82
+ </body>
83
+ </html>
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "senangwebs-photobooth",
3
- "version": "1.0.1",
4
- "description": "A lightweight client-side photo editing library",
5
- "main": "dist/swp.min.js",
6
- "style": "dist/swp.min.css",
3
+ "version": "2.0.2",
4
+ "description": "A browser-based image editor featuring layers, drawing tools, and filters",
5
+ "main": "dist/swp.js",
6
+ "style": "dist/swp.css",
7
7
  "scripts": {
8
8
  "test": "echo \"Error: no test specified\" && exit 1",
9
9
  "build": "webpack --mode production",
@@ -13,7 +13,11 @@
13
13
  "photo-editor",
14
14
  "image-editing",
15
15
  "canvas",
16
- "photobooth",
16
+ "layers",
17
+ "photoshop",
18
+ "drawing",
19
+ "brush",
20
+ "filters",
17
21
  "javascript"
18
22
  ],
19
23
  "author": "a-hakim",
@@ -28,5 +32,8 @@
28
32
  "webpack": "^5.0.0",
29
33
  "webpack-cli": "^4.0.0",
30
34
  "webpack-dev-server": "^5.2.2"
35
+ },
36
+ "dependencies": {
37
+ "@bookklik/senangstart-icons": "^1.0.7"
31
38
  }
32
39
  }