tokimeki-image-editor 0.1.1 → 0.1.3

package/dist/utils/canvas.js

@@ -0,0 +1,293 @@
+import { applyAllAdjustments, applyGaussianBlur } from './adjustments';
+// Image cache for stamp images
+const stampImageCache = new Map();
+export function preloadStampImage(url) {
+    // Return cached image if available
+    if (stampImageCache.has(url)) {
+        return Promise.resolve(stampImageCache.get(url));
+    }
+    // Load new image
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous'; // Allow CORS for external images
+        img.onload = () => {
+            stampImageCache.set(url, img);
+            resolve(img);
+        };
+        img.onerror = (error) => {
+            console.error(`Failed to load stamp image: ${url}`, error);
+            reject(error);
+        };
+        img.src = url;
+    });
+}
+export function getStampImage(url) {
+    return stampImageCache.get(url) || null;
+}
+export function loadImage(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = e.target?.result;
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+export function calculateFitScale(imageWidth, imageHeight, canvasWidth, canvasHeight) {
+    const scaleX = canvasWidth / imageWidth;
+    const scaleY = canvasHeight / imageHeight;
+    return Math.min(scaleX, scaleY, 1); // Don't scale up, only down
+}
+export function drawImage(canvas, img, viewport, transform, adjustments, cropArea, blurAreas, stampAreas) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Ensure filter is reset before starting
+    ctx.filter = 'none';
+    ctx.save();
+    // Apply viewport transformations
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    ctx.translate(centerX + viewport.offsetX, centerY + viewport.offsetY);
+    // Apply zoom
+    const totalScale = viewport.scale * viewport.zoom;
+    ctx.scale(totalScale, totalScale);
+    // Rotation
+    ctx.rotate((transform.rotation * Math.PI) / 180);
+    // Flip
+    ctx.scale(transform.flipHorizontal ? -1 : 1, transform.flipVertical ? -1 : 1);
+    // Draw image (with crop if specified)
+    if (cropArea) {
+        // Draw only the cropped area
+        ctx.drawImage(img, cropArea.x, cropArea.y, cropArea.width, cropArea.height, -cropArea.width / 2, -cropArea.height / 2, cropArea.width, cropArea.height);
+    }
+    else {
+        // Draw full image centered
+        ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    }
+    ctx.restore();
+    // Apply all adjustments via pixel manipulation (Safari-compatible)
+    // This modifies the canvas pixels after drawing
+    applyAllAdjustments(canvas, img, viewport, adjustments, cropArea);
+    // Apply blur areas
+    if (blurAreas && blurAreas.length > 0) {
+        applyBlurAreas(canvas, img, viewport, blurAreas, cropArea);
+    }
+    // Apply stamps
+    if (stampAreas && stampAreas.length > 0) {
+        applyStamps(canvas, img, viewport, stampAreas, cropArea);
+    }
+}
+export function exportCanvas(canvas, options) {
+    if (options.format === 'jpeg') {
+        return canvas.toDataURL('image/jpeg', options.quality);
+    }
+    return canvas.toDataURL('image/png');
+}
+export function downloadImage(dataUrl, filename) {
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = dataUrl;
+    link.click();
+}
+export function applyTransform(img, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = []) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return canvas;
+    // Calculate source dimensions
+    const sourceWidth = cropArea ? cropArea.width : img.width;
+    const sourceHeight = cropArea ? cropArea.height : img.height;
+    // Calculate canvas size based on rotation
+    const needsSwap = transform.rotation === 90 || transform.rotation === 270;
+    canvas.width = needsSwap ? sourceHeight : sourceWidth;
+    canvas.height = needsSwap ? sourceWidth : sourceHeight;
+    // Ensure filter is reset before starting
+    ctx.filter = 'none';
+    ctx.save();
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate((transform.rotation * Math.PI) / 180);
+    ctx.scale(transform.flipHorizontal ? -1 : 1, transform.flipVertical ? -1 : 1);
+    if (cropArea) {
+        ctx.drawImage(img, cropArea.x, cropArea.y, cropArea.width, cropArea.height, -sourceWidth / 2, -sourceHeight / 2, sourceWidth, sourceHeight);
+    }
+    else {
+        ctx.drawImage(img, -sourceWidth / 2, -sourceHeight / 2);
+    }
+    ctx.restore();
+    // Apply all adjustments via pixel manipulation (Safari-compatible)
+    // For export, create a centered viewport with no offset
+    const exportViewport = {
+        zoom: 1,
+        offsetX: 0,
+        offsetY: 0,
+        scale: 1
+    };
+    applyAllAdjustments(canvas, img, exportViewport, adjustments, cropArea);
+    // Apply blur areas for export
+    if (blurAreas.length > 0) {
+        applyBlurAreas(canvas, img, exportViewport, blurAreas, cropArea);
+    }
+    // Apply stamps for export
+    if (stampAreas.length > 0) {
+        applyStamps(canvas, img, exportViewport, stampAreas, cropArea);
+    }
+    return canvas;
+}
+export function screenToImageCoords(screenX, screenY, canvas, img, viewport, transform) {
+    const rect = canvas.getBoundingClientRect();
+    // Convert screen coordinates to canvas coordinates
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const canvasX = (screenX - rect.left) * scaleX;
+    const canvasY = (screenY - rect.top) * scaleY;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    // Inverse transform
+    const x = (canvasX - centerX - viewport.offsetX) / totalScale + img.width / 2;
+    const y = (canvasY - centerY - viewport.offsetY) / totalScale + img.height / 2;
+    return { x, y };
+}
+export function imageToCanvasCoords(imageX, imageY, canvas, img, viewport) {
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    const x = (imageX - img.width / 2) * totalScale + centerX + viewport.offsetX;
+    const y = (imageY - img.height / 2) * totalScale + centerY + viewport.offsetY;
+    return { x, y };
+}
+// Deprecated: use imageToCanvasCoords instead
+export function imageToScreenCoords(imageX, imageY, canvas, img, viewport) {
+    return imageToCanvasCoords(imageX, imageY, canvas, img, viewport);
+}
+/**
+ * Apply blur effects to specified areas of the canvas
+ * Uses pixel manipulation for Safari compatibility
+ */
+export function applyBlurAreas(canvas, img, viewport, blurAreas, cropArea) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    // Create a temporary canvas to extract regions for blurring
+    const tempCanvas = document.createElement('canvas');
+    const tempCtx = tempCanvas.getContext('2d');
+    if (!tempCtx)
+        return;
+    blurAreas.forEach(blurArea => {
+        // Determine source dimensions based on crop
+        const sourceWidth = cropArea ? cropArea.width : img.width;
+        const sourceHeight = cropArea ? cropArea.height : img.height;
+        const offsetX = cropArea ? cropArea.x : 0;
+        const offsetY = cropArea ? cropArea.y : 0;
+        // Convert blur area to crop-relative coordinates
+        const relativeX = blurArea.x - offsetX;
+        const relativeY = blurArea.y - offsetY;
+        // Calculate blur area in canvas coordinates
+        const canvasBlurX = (relativeX - sourceWidth / 2) * totalScale + centerX + viewport.offsetX;
+        const canvasBlurY = (relativeY - sourceHeight / 2) * totalScale + centerY + viewport.offsetY;
+        const canvasBlurWidth = blurArea.width * totalScale;
+        const canvasBlurHeight = blurArea.height * totalScale;
+        // Calculate image bounds on canvas
+        const imgCanvasLeft = (0 - sourceWidth / 2) * totalScale + centerX + viewport.offsetX;
+        const imgCanvasTop = (0 - sourceHeight / 2) * totalScale + centerY + viewport.offsetY;
+        const imgCanvasRight = imgCanvasLeft + sourceWidth * totalScale;
+        const imgCanvasBottom = imgCanvasTop + sourceHeight * totalScale;
+        // Clip blur area to image bounds
+        const clippedX = Math.max(imgCanvasLeft, canvasBlurX);
+        const clippedY = Math.max(imgCanvasTop, canvasBlurY);
+        const clippedRight = Math.min(imgCanvasRight, canvasBlurX + canvasBlurWidth);
+        const clippedBottom = Math.min(imgCanvasBottom, canvasBlurY + canvasBlurHeight);
+        const clippedWidth = clippedRight - clippedX;
+        const clippedHeight = clippedBottom - clippedY;
+        if (clippedWidth <= 0 || clippedHeight <= 0)
+            return;
+        // Calculate blur radius in pixels
+        const imageBlurPx = (blurArea.blurStrength / 100) * 100;
+        const blurRadius = imageBlurPx * totalScale;
+        // Add padding for blur to work properly at edges
+        const padding = Math.ceil(blurRadius * 2);
+        const paddedX = Math.max(0, clippedX - padding);
+        const paddedY = Math.max(0, clippedY - padding);
+        const paddedRight = Math.min(canvas.width, clippedRight + padding);
+        const paddedBottom = Math.min(canvas.height, clippedBottom + padding);
+        const paddedWidth = paddedRight - paddedX;
+        const paddedHeight = paddedBottom - paddedY;
+        // Extract the padded region from the canvas
+        tempCanvas.width = paddedWidth;
+        tempCanvas.height = paddedHeight;
+        tempCtx.clearRect(0, 0, paddedWidth, paddedHeight);
+        tempCtx.drawImage(canvas, paddedX, paddedY, paddedWidth, paddedHeight, 0, 0, paddedWidth, paddedHeight);
+        // Apply blur to the temporary canvas
+        applyGaussianBlur(tempCanvas, 0, 0, paddedWidth, paddedHeight, blurRadius);
+        // Calculate the portion to draw back (excluding padding)
+        const srcX = clippedX - paddedX;
+        const srcY = clippedY - paddedY;
+        // Draw only the non-padded portion back to the main canvas
+        ctx.drawImage(tempCanvas, srcX, srcY, clippedWidth, clippedHeight, clippedX, clippedY, clippedWidth, clippedHeight);
+    });
+}
+/**
+ * Apply stamp decorations to the canvas
+ */
+export function applyStamps(canvas, img, viewport, stampAreas, cropArea) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const totalScale = viewport.scale * viewport.zoom;
+    stampAreas.forEach(stamp => {
+        // Determine source dimensions based on crop
+        const sourceWidth = cropArea ? cropArea.width : img.width;
+        const sourceHeight = cropArea ? cropArea.height : img.height;
+        const offsetX = cropArea ? cropArea.x : 0;
+        const offsetY = cropArea ? cropArea.y : 0;
+        // Convert stamp area to crop-relative coordinates
+        const relativeX = stamp.x - offsetX;
+        const relativeY = stamp.y - offsetY;
+        // Calculate stamp center in canvas coordinates
+        const canvasCenterX = (relativeX - sourceWidth / 2) * totalScale + centerX + viewport.offsetX;
+        const canvasCenterY = (relativeY - sourceHeight / 2) * totalScale + centerY + viewport.offsetY;
+        const canvasWidth = stamp.width * totalScale;
+        const canvasHeight = stamp.height * totalScale;
+        // Save context
+        ctx.save();
+        // Apply transformation
+        ctx.translate(canvasCenterX, canvasCenterY);
+        ctx.rotate((stamp.rotation || 0) * Math.PI / 180);
+        // Render stamp based on type
+        if (stamp.stampType === 'emoji') {
+            // Render emoji
+            ctx.font = `${canvasHeight}px Arial`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(stamp.stampContent, 0, 0);
+        }
+        else if (stamp.stampType === 'image' || stamp.stampType === 'svg') {
+            // Get image from cache
+            const stampImg = getStampImage(stamp.stampContent);
+            if (stampImg) {
+                ctx.drawImage(stampImg, -canvasWidth / 2, -canvasHeight / 2, canvasWidth, canvasHeight);
+            }
+            else {
+                // Draw placeholder while loading
+                ctx.fillStyle = '#ccc';
+                ctx.fillRect(-canvasWidth / 2, -canvasHeight / 2, canvasWidth, canvasHeight);
+                // Start loading if not already loading
+                preloadStampImage(stamp.stampContent).catch(console.error);
+            }
+        }
+        // Restore context
+        ctx.restore();
+    });
+}

package/dist/utils/filters.d.ts

@@ -0,0 +1,18 @@
+import type { FilterPreset, AdjustmentsState } from '../types';
+/**
+ * Built-in filter presets
+ * Each filter is a combination of adjustment values
+ */
+export declare const FILTER_PRESETS: FilterPreset[];
+/**
+ * Get a filter preset by ID
+ */
+export declare function getFilterPreset(id: string): FilterPreset | undefined;
+/**
+ * Apply a filter preset to adjustments
+ */
+export declare function applyFilterPreset(preset: FilterPreset, baseAdjustments?: AdjustmentsState): AdjustmentsState;
+/**
+ * Check if current adjustments match a filter preset
+ */
+export declare function matchesFilterPreset(adjustments: AdjustmentsState, preset: FilterPreset): boolean;

package/dist/utils/filters.js

@@ -0,0 +1,114 @@
+import { createDefaultAdjustments } from './adjustments';
+/**
+ * Built-in filter presets
+ * Each filter is a combination of adjustment values
+ */
+export const FILTER_PRESETS = [
+    {
+        id: 'none',
+        name: 'None',
+        adjustments: createDefaultAdjustments()
+    },
+    {
+        id: 'vivid',
+        name: 'Vivid',
+        adjustments: {
+            saturation: 40,
+            contrast: 20,
+            brightness: 5
+        }
+    },
+    {
+        id: 'sepia',
+        name: 'Sepia',
+        adjustments: {
+            sepia: 80,
+            brightness: -10,
+            contrast: -30,
+            highlights: -32,
+            shadows: 30,
+            vignette: -20
+        }
+    },
+    {
+        id: 'monochrome',
+        name: 'Monochrome',
+        adjustments: {
+            grayscale: 100,
+            contrast: 15
+        }
+    },
+    {
+        id: 'vintage',
+        name: 'Vintage',
+        adjustments: {
+            sepia: 50,
+            brightness: -15,
+            contrast: -10,
+            vignette: -40,
+            saturation: -20
+        }
+    },
+    {
+        id: 'warm',
+        name: 'Warm',
+        adjustments: {
+            sepia: -10,
+            saturation: 15,
+            brightness: 5,
+            exposure: 10,
+            hue: -10,
+        }
+    },
+    {
+        id: 'cool',
+        name: 'Cool',
+        adjustments: {
+            saturation: 10,
+            brightness: -5,
+            contrast: 10,
+            hue: 15,
+        }
+    },
+    {
+        id: 'film',
+        name: 'Film',
+        adjustments: {
+            contrast: 60,
+            highlights: -45,
+            shadows: -100,
+            saturation: 2,
+            vignette: -24,
+        }
+    }
+];
+/**
+ * Get a filter preset by ID
+ */
+export function getFilterPreset(id) {
+    return FILTER_PRESETS.find(preset => preset.id === id);
+}
+/**
+ * Apply a filter preset to adjustments
+ */
+export function applyFilterPreset(preset, baseAdjustments = createDefaultAdjustments()) {
+    // Start with base adjustments or defaults
+    const result = { ...baseAdjustments };
+    // Apply preset values
+    Object.entries(preset.adjustments).forEach(([key, value]) => {
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    });
+    return result;
+}
+/**
+ * Check if current adjustments match a filter preset
+ */
+export function matchesFilterPreset(adjustments, preset) {
+    const presetAdjustments = applyFilterPreset(preset);
+    // Compare all adjustment values
+    return Object.keys(presetAdjustments).every(key => {
+        return adjustments[key] === presetAdjustments[key];
+    });
+}

package/dist/utils/history.d.ts

@@ -0,0 +1,15 @@
+import type { HistorySnapshot, EditorHistory } from '../types';
+export declare const MAX_HISTORY_SIZE = 50;
+export declare function createEmptyHistory(): EditorHistory;
+export declare function createSnapshot(cropArea: any, transform: any, adjustments: any, viewport: any, blurAreas?: any[], stampAreas?: any[]): HistorySnapshot;
+export declare function addToHistory(history: EditorHistory, snapshot: HistorySnapshot): EditorHistory;
+export declare function undo(history: EditorHistory): {
+    history: EditorHistory;
+    snapshot: HistorySnapshot | null;
+};
+export declare function redo(history: EditorHistory): {
+    history: EditorHistory;
+    snapshot: HistorySnapshot | null;
+};
+export declare function canUndo(history: EditorHistory): boolean;
+export declare function canRedo(history: EditorHistory): boolean;

package/dist/utils/history.js

@@ -0,0 +1,67 @@
+// Maximum number of history states to keep
+export const MAX_HISTORY_SIZE = 50;
+export function createEmptyHistory() {
+    return {
+        past: [],
+        present: null,
+        future: []
+    };
+}
+export function createSnapshot(cropArea, transform, adjustments, viewport, blurAreas = [], stampAreas = []) {
+    return {
+        cropArea: cropArea ? { ...cropArea } : null,
+        transform: { ...transform },
+        adjustments: { ...adjustments },
+        viewport: { ...viewport },
+        blurAreas: blurAreas.map(area => ({ ...area })),
+        stampAreas: stampAreas.map(area => ({ ...area }))
+    };
+}
+export function addToHistory(history, snapshot) {
+    const newPast = history.present
+        ? [...history.past, history.present]
+        : history.past;
+    // Limit history size
+    const limitedPast = newPast.slice(-MAX_HISTORY_SIZE);
+    return {
+        past: limitedPast,
+        present: snapshot,
+        future: [] // Clear future when adding new state
+    };
+}
+export function undo(history) {
+    if (history.past.length === 0 || !history.present) {
+        return { history, snapshot: null };
+    }
+    const previous = history.past[history.past.length - 1];
+    const newPast = history.past.slice(0, -1);
+    return {
+        history: {
+            past: newPast,
+            present: previous,
+            future: [history.present, ...history.future]
+        },
+        snapshot: previous
+    };
+}
+export function redo(history) {
+    if (history.future.length === 0 || !history.present) {
+        return { history, snapshot: null };
+    }
+    const next = history.future[0];
+    const newFuture = history.future.slice(1);
+    return {
+        history: {
+            past: [...history.past, history.present],
+            present: next,
+            future: newFuture
+        },
+        snapshot: next
+    };
+}
+export function canUndo(history) {
+    return history.past.length > 0;
+}
+export function canRedo(history) {
+    return history.future.length > 0;
+}

package/package.json

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