tokimeki-image-editor 0.1.1 → 0.1.3

package/dist/components/Toolbar.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">import { _ } from 'svelte-i18n';
+import { Crop, Download, SlidersHorizontal, Sparkles, Droplet, Sticker } from 'lucide-svelte';
+let { mode, hasImage, isStandalone = false, onModeChange, } = $props();
+</script>
+
+<div class="toolbar">
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'crop'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('crop')}
+    title={$_('toolbar.crop')}
+  >
+    <Crop size={20} />
+    <span>{$_('editor.crop')}</span>
+  </button>
+
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'adjust'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('adjust')}
+    title={$_('toolbar.adjust')}
+  >
+    <SlidersHorizontal size={20} />
+    <span>{$_('editor.adjust')}</span>
+  </button>
+
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'filter'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('filter')}
+    title={$_('toolbar.filter')}
+  >
+    <Sparkles size={20} />
+    <span>{$_('editor.filter')}</span>
+  </button>
+
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'blur'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('blur')}
+    title={$_('toolbar.blur')}
+  >
+    <Droplet size={20} />
+    <span>{$_('editor.blur')}</span>
+  </button>
+
+  <button
+    class="toolbar-btn"
+    class:active={mode === 'stamp'}
+    disabled={!hasImage}
+    onclick={() => onModeChange('stamp')}
+    title={$_('toolbar.stamp')}
+  >
+    <Sticker size={20} />
+    <span>{$_('editor.stamp')}</span>
+  </button>
+
+  {#if isStandalone}
+    <button
+      class="toolbar-btn"
+      class:active={mode === 'export'}
+      disabled={!hasImage}
+      onclick={() => onModeChange('export')}
+      title={$_('toolbar.export')}
+    >
+      <Download size={20} />
+    </button>
+  {/if}
+</div>
+
+<style>
+  .toolbar {
+    width: 100%;
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+    justify-content: center;
+    overflow-x: auto;
+  }
+
+    @media (max-width: 767px) {
+  .toolbar {
+      align-items: stretch
+  }
+    }
+
+  .toolbar-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: #333;
+    color: #fff;
+    border: 1px solid #444;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+  }
+
+  @media (max-width: 767px) {
+
+  .toolbar-btn {
+      flex-direction: column;
+      justify-content: center;
+      font-size: .6rem;
+      gap: .3rem;
+      width: 64px
+  }
+    }
+
+  .toolbar-btn:hover:not(:disabled) {
+    opacity: .7;
+  }
+
+  .toolbar-btn.active {
+    background: var(--primary-color, #63b97b);
+    border-color: var(--primary-color, #63b97b);
+  }
+
+  .toolbar-btn.active:hover {
+      opacity: 1;
+    }
+
+  .toolbar-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .toolbar-btn span {
+    white-space: nowrap;
+  }</style>

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

@@ -0,0 +1,10 @@
+import type { EditorMode } from '../types';
+interface Props {
+    mode: EditorMode;
+    hasImage: boolean;
+    isStandalone?: boolean;
+    onModeChange: (mode: EditorMode) => void;
+}
+declare const Toolbar: import("svelte").Component<Props, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/config/stamps.d.ts

@@ -0,0 +1,2 @@
+import type { StampAsset } from '../types';
+export declare const STAMP_ASSETS: StampAsset[];

package/dist/config/stamps.js

@@ -0,0 +1,22 @@
+export const STAMP_ASSETS = [
+    // Emojis
+    { id: 'emoji-heart', type: 'emoji', content: '❤️', preview: '❤️' },
+    { id: 'emoji-star', type: 'emoji', content: '⭐', preview: '⭐' },
+    { id: 'emoji-fire', type: 'emoji', content: '🔥', preview: '🔥' },
+    { id: 'emoji-sparkles', type: 'emoji', content: '✨', preview: '✨' },
+    { id: 'emoji-smile', type: 'emoji', content: '😊', preview: '😊' },
+    { id: 'emoji-cool', type: 'emoji', content: '😎', preview: '😎' },
+    { id: 'emoji-laugh', type: 'emoji', content: '😂', preview: '😂' },
+    { id: 'emoji-love', type: 'emoji', content: '😍', preview: '😍' },
+    { id: 'emoji-thumbs', type: 'emoji', content: '👍', preview: '👍' },
+    { id: 'emoji-party', type: 'emoji', content: '🎉', preview: '🎉' },
+    { id: 'emoji-tada', type: 'emoji', content: '🎊', preview: '🎊' },
+    { id: 'emoji-rainbow', type: 'emoji', content: '🌈', preview: '🌈' },
+    { id: 'emoji-sun', type: 'emoji', content: '☀️', preview: '☀️' },
+    { id: 'emoji-moon', type: 'emoji', content: '🌙', preview: '🌙' },
+    { id: 'emoji-cloud', type: 'emoji', content: '☁️', preview: '☁️' },
+    { id: 'emoji-flower', type: 'emoji', content: '🌸', preview: '🌸' },
+    { id: 'emoji-cherry', type: 'emoji', content: '🍒', preview: '🍒' },
+    // { id: 'image-1', type: 'image', content: '/stamps/christmas_tree.png', preview: '/stamps/christmas_tree.png' },
+    // { id: 'svg-1', type: 'svg', content: '/stamps/svg-1.svg', preview: '/stamps/svg-1.svg' }
+];

package/dist/i18n/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/i18n/index.js

@@ -0,0 +1,9 @@
+import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
+import en from './locales/en.json';
+import ja from './locales/ja.json';
+addMessages('en', en);
+addMessages('ja', ja);
+init({
+    fallbackLocale: 'en',
+    initialLocale: getLocaleFromNavigator(),
+});

package/dist/i18n/locales/en.json

@@ -0,0 +1,68 @@
+{
+  "editor": {
+    "title": "Image Editor",
+    "upload": "Upload Image",
+    "crop": "Crop",
+    "rotate": "Rotate",
+    "adjust": "Adjust",
+    "filter": "Filter",
+    "blur": "Blur",
+    "stamp": "Stamp",
+    "none": "None",
+    "flip": "Flip",
+    "flipHorizontal": "Flip Horizontal",
+    "flipVertical": "Flip Vertical",
+    "rotateLeft": "Rotate Left",
+    "rotateRight": "Rotate Right",
+    "export": "Export",
+    "reset": "Reset",
+    "apply": "Apply",
+    "cancel": "Cancel",
+    "close": "Close",
+    "delete": "Delete",
+    "zoom": "Zoom",
+    "quality": "Quality",
+    "format": "Format",
+    "download": "Download",
+    "dropImageHere": "Drop image here or click to upload",
+    "noImage": "No image loaded",
+    "undo": "Undo",
+    "redo": "Redo",
+    "selectStamp": "Select Stamp"
+  },
+  "toolbar": {
+    "crop": "Crop Tool",
+    "rotate": "Rotate & Flip",
+    "adjust": "Adjust Image",
+    "filter": "Filters",
+    "blur": "Blur Tool",
+    "stamp": "Stamp Tool",
+    "export": "Export Image",
+    "undo": "Undo (Ctrl+Z)",
+    "redo": "Redo (Ctrl+Shift+Z)"
+  },
+  "adjustments": {
+    "exposure": "Exposure",
+    "contrast": "Contrast",
+    "highlights": "Highlights",
+    "shadows": "Shadows",
+    "brightness": "Brightness",
+    "saturation": "Saturation",
+    "hue": "Hue",
+    "vignette": "Vignette"
+  },
+  "filters": {
+    "vivid": "Vivid",
+    "sepia": "Sepia",
+    "monochrome": "Monochrome",
+    "vintage": "Vintage",
+    "warm": "Warm",
+    "cool": "Cool",
+    "film": "Film",
+    "info": "Selecting a filter will override all current adjustments."
+  },
+  "blur": {
+    "strength": "Blur Strength",
+    "hint": "Drag on the image to create a blur area. Click on an existing area to edit it."
+  }
+}

package/dist/i18n/locales/ja.json

@@ -0,0 +1,68 @@
+{
+  "editor": {
+    "title": "画像エディター",
+    "upload": "画像をアップロード",
+    "crop": "トリミング",
+    "rotate": "回転",
+    "adjust": "調整",
+    "filter": "フィルター",
+    "blur": "ぼかし",
+    "stamp": "スタンプ",
+    "none": "なし",
+    "flip": "反転",
+    "flipHorizontal": "左右反転",
+    "flipVertical": "上下反転",
+    "rotateLeft": "左に回転",
+    "rotateRight": "右に回転",
+    "export": "エクスポート",
+    "reset": "リセット",
+    "apply": "適用",
+    "cancel": "キャンセル",
+    "close": "閉じる",
+    "delete": "削除",
+    "zoom": "ズーム",
+    "quality": "品質",
+    "format": "形式",
+    "download": "ダウンロード",
+    "dropImageHere": "画像をドロップまたはクリックしてアップロード",
+    "noImage": "画像が読み込まれていません",
+    "undo": "元に戻す",
+    "redo": "やり直す",
+    "selectStamp": "スタンプを選択"
+  },
+  "toolbar": {
+    "crop": "トリミングツール",
+    "rotate": "回転・反転",
+    "adjust": "画像調整",
+    "filter": "フィルター",
+    "blur": "ぼかしツール",
+    "stamp": "スタンプツール",
+    "export": "画像をエクスポート",
+    "undo": "元に戻す (Ctrl+Z)",
+    "redo": "やり直す (Ctrl+Shift+Z)"
+  },
+  "adjustments": {
+    "exposure": "露出",
+    "contrast": "コントラスト",
+    "highlights": "ハイライト",
+    "shadows": "シャドウ",
+    "brightness": "明るさ",
+    "saturation": "彩度",
+    "hue": "色合い",
+    "vignette": "周辺光量補正"
+  },
+  "filters": {
+    "vivid": "ビビッド",
+    "sepia": "セピア",
+    "monochrome": "モノクローム",
+    "vintage": "ビンテージ",
+    "warm": "ウォーム",
+    "cool": "クール",
+    "film": "フィルム",
+    "info": "フィルターを選択すると、すべての調整値が上書きされます。"
+  },
+  "blur": {
+    "strength": "ぼかしの強さ",
+    "hint": "画像上をドラッグしてぼかし領域を作成します。既存の領域をクリックすると編集できます。"
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import ImageEditor from './components/ImageEditor.svelte';
+export { ImageEditor };
+export type { EditorMode, ImageData, CropArea, TransformState, ExportOptions, EditorState } from './types';
+export * from './utils/canvas';

package/dist/index.js

@@ -0,0 +1,5 @@
+// Main component
+import ImageEditor from './components/ImageEditor.svelte';
+export { ImageEditor };
+// Utils
+export * from './utils/canvas';

package/dist/types.d.ts

@@ -0,0 +1,97 @@
+export type EditorMode = 'crop' | 'rotate' | 'adjust' | 'filter' | 'blur' | 'stamp' | 'export' | null;
+export interface ImageData {
+    original: HTMLImageElement | null;
+    current: HTMLImageElement | null;
+    width: number;
+    height: number;
+}
+export interface CropArea {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface BlurArea {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    blurStrength: number;
+}
+export type StampType = 'emoji' | 'image' | 'svg';
+export interface StampAsset {
+    id: string;
+    type: StampType;
+    content: string;
+    preview?: string;
+}
+export interface StampArea {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    stampAssetId: string;
+    stampType: StampType;
+    stampContent: string;
+}
+export interface TransformState {
+    rotation: number;
+    flipHorizontal: boolean;
+    flipVertical: boolean;
+    scale: number;
+}
+export interface AdjustmentsState {
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    brightness: number;
+    saturation: number;
+    hue: number;
+    vignette: number;
+    sepia: number;
+    grayscale: number;
+}
+export interface FilterPreset {
+    id: string;
+    name: string;
+    adjustments: Partial<AdjustmentsState>;
+}
+export interface ExportOptions {
+    format: 'png' | 'jpeg';
+    quality: number;
+}
+export interface Viewport {
+    zoom: number;
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+}
+export interface HistorySnapshot {
+    cropArea: CropArea | null;
+    transform: TransformState;
+    adjustments: AdjustmentsState;
+    viewport: Viewport;
+    blurAreas: BlurArea[];
+    stampAreas: StampArea[];
+}
+export interface EditorHistory {
+    past: HistorySnapshot[];
+    present: HistorySnapshot | null;
+    future: HistorySnapshot[];
+}
+export interface EditorState {
+    mode: EditorMode;
+    imageData: ImageData;
+    cropArea: CropArea | null;
+    transform: TransformState;
+    adjustments: AdjustmentsState;
+    exportOptions: ExportOptions;
+    viewport: Viewport;
+    history: EditorHistory;
+    blurAreas: BlurArea[];
+    stampAreas: StampArea[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/adjustments.d.ts

@@ -0,0 +1,26 @@
+import type { AdjustmentsState, Viewport, CropArea } from '../types';
+/**
+ * Create default adjustments state (all values at 0 = no adjustment)
+ */
+export declare function createDefaultAdjustments(): AdjustmentsState;
+/**
+ * Apply adjustments to a canvas context
+ * NOTE: For Safari compatibility, we don't use ctx.filter anymore.
+ * All adjustments are now applied via pixel manipulation in applyAllAdjustments.
+ */
+export declare function applyAdjustments(ctx: CanvasRenderingContext2D, adjustments: AdjustmentsState): void;
+/**
+ * Apply ALL adjustments via pixel manipulation
+ * This works in all browsers including Safari (no ctx.filter needed)
+ */
+export declare function applyAllAdjustments(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, adjustments: AdjustmentsState, cropArea?: CropArea | null): void;
+/**
+ * Apply Gaussian blur to a region of canvas via pixel manipulation (Safari-compatible)
+ * Uses optimized separable box blur with running sums for O(n) performance
+ */
+export declare function applyGaussianBlur(canvas: HTMLCanvasElement, x: number, y: number, width: number, height: number, radius: number): void;
+/**
+ * Legacy function for backwards compatibility
+ * @deprecated Use applyAllAdjustments instead
+ */
+export declare function applyPixelAdjustments(canvas: HTMLCanvasElement, img: HTMLImageElement, viewport: Viewport, adjustments: AdjustmentsState, cropArea?: CropArea | null): void;