tokimeki-image-editor 0.1.6 → 0.1.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Shoichiro Hori
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,7 +1,34 @@
-# Tokimeki Image Editor
+# TOKIMEKI Image Editor
+
+![screenshot-1.png](/static/screenshot-1.png)
 
 A powerful and modern image editing library for Svelte 5.
 
+# Features
+
+- Cropping
+- Flip
+- Image Adjustment
+- Filtering
+- Blur
+- Stamp
+
+# Demo
+
+https://tokimeki-image-editor.vercel.app/
+
+# Install
+
+```
+npm install tokimeki-image-editor
+```
+
+WIP
+
+# Usage 
+
+WIP
+
 ## License
 
 MIT

package/dist/components/AdjustTool.svelte

@@ -18,9 +18,13 @@ function resetAll() {
         grayscale: 0
     });
 }
+// Prevent wheel events from propagating to canvas zoom handler
+function handleWheel(e) {
+    e.stopPropagation();
+}
 </script>
 
-<div class="adjust-tool">
+<div class="adjust-tool" onwheel={handleWheel}>
   <div class="tool-header">
     <h3>{$_('editor.adjust')}</h3>
     <button class="close-btn" onclick={onClose} title={$_('editor.close')}>

package/dist/components/CropTool.svelte

@@ -406,6 +406,12 @@ function handlePinchZoomEnd() {
 }
 // Unified touch handlers that delegate based on finger count
 function handleContainerTouchStartUnified(event) {
+    // Check if touch is on a button or interactive element
+    const target = event.target;
+    if (target.closest('button') || target.closest('.crop-top-controls') || target.closest('.crop-controls')) {
+        // Let the button handle the event
+        return;
+    }
     // Two fingers = pinch zoom crop area
     if (event.touches.length === 2) {
         handlePinchZoomStart(event);
@@ -742,6 +748,7 @@ function toggleFlipVertical() {
     flex-direction: column;
     gap: 0.75rem;
     z-index: 20;
+    pointer-events: auto;
   }
 
   @media (max-width: 767px) {
@@ -883,6 +890,7 @@ function toggleFlipVertical() {
     display: flex;
     gap: 0.5rem;
     z-index: 20;
+    pointer-events: auto;
   }
 
   @media (max-width: 767px) {

package/dist/components/ExportTool.svelte

@@ -8,9 +8,13 @@ function handleQualityChange(event) {
     const value = parseFloat(event.target.value);
     onChange({ quality: value });
 }
+// Prevent wheel events from propagating to canvas zoom handler
+function handleWheel(e) {
+    e.stopPropagation();
+}
 </script>
 
-<div class="export-tool">
+<div class="export-tool" onwheel={handleWheel}>
   <div class="tool-header">
     <h3>{$_('editor.export')}</h3>
     <button class="close-btn" onclick={onClose}>✕</button>

package/dist/components/FilterTool.svelte

@@ -239,9 +239,13 @@ function handleFilterSelect(filterId) {
         onChange(newAdjustments);
     }
 }
+// Prevent wheel events from propagating to canvas zoom handler
+function handleWheel(e) {
+    e.stopPropagation();
+}
 </script>
 
-<div class="filter-tool">
+<div class="filter-tool" onwheel={handleWheel}>
   <div class="tool-header">
     <h3>{$_('editor.filter')}</h3>
     <button class="close-btn" onclick={onClose} title={$_('editor.close')}>

package/dist/components/ImageEditor.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { _ } from 'svelte-i18n';
+<script lang="ts">import '../i18n';
+import { _ } from 'svelte-i18n';
 import { Redo2, RotateCcw, Undo2 } from 'lucide-svelte';
 import { loadImage, calculateFitScale, exportCanvas, downloadImage, applyTransform } from '../utils/canvas';
 import { createEmptyHistory, createSnapshot, addToHistory, undo, redo, canUndo, canRedo } from '../utils/history';

package/dist/components/ImageEditor.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../i18n';
 interface Props {
     initialImage?: File | string;
     width?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokimeki-image-editor",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",