tokimeki-image-editor 0.4.14 → 0.5.0

package/dist/components/CropTool.svelte

@@ -54,6 +54,7 @@ function swapOrientation() {
         lockedAspectRatio = 1 / lockedAspectRatio;
     }
     haptic('selection');
+    autoFit(300);
 }
 function resetCrop() {
     if (!image)
@@ -62,6 +63,7 @@ function resetCrop() {
     aspectLocked = false;
     lockedAspectRatio = null;
     haptic('warning');
+    autoFit(300);
 }
 // Display helpers
 let displayWidth = $derived(Math.round(cropArea.width));
@@ -99,17 +101,15 @@ let isResizing = $state(false);
 let dragStart = $state({ x: 0, y: 0 });
 let resizeHandle = $state(null);
 let initialCropArea = $state(null);
-// Viewport panning state.
-//   'frame'  — drag inside frame: image scrolls under stationary frame (iOS Photos)
-//   'canvas' — drag outside frame: viewport itself moves (image + frame together)
+// Viewport panning state — all drags move the image under a stationary frame (Lightroom style).
 let isPanning = $state(false);
-let panType = $state('frame');
 let lastPanPosition = $state({ x: 0, y: 0 });
-// Touch pinch zoom state — pinch now zooms the underlying image, not the crop area.
+// Touch pinch zoom state — pinch changes cropArea (not viewport.zoom) for crop-contextual zoom.
 let initialPinchDistance = $state(0);
-let initialPinchZoom = $state(1);
+let initialPinchCropArea = $state(null);
+let initialPinchFocusRel = $state({ x: 0.5, y: 0.5 });
 // True when any drag-like interaction is in progress (used to brighten the grid)
-let isInteracting = $derived(isResizing || isPanning);
+let isInteracting = $derived(isResizing || isPanning || initialPinchDistance > 0);
 // SVG render constants — placed up here, derived geometry placed after canvasCoords below
 const cornerLen = 22;
 const cornerThickness = 4;
@@ -154,6 +154,7 @@ onMount(() => {
         containerElement.addEventListener('touchend', handleContainerTouchEndUnified, { passive: false });
     }
     return () => {
+        cancelAnimation();
         if (containerElement) {
             containerElement.removeEventListener('touchstart', handleContainerTouchStartUnified);
             containerElement.removeEventListener('touchmove', handleContainerTouchMoveUnified);
@@ -183,11 +184,14 @@ $effect(() => {
                 height: image.height
             };
         }
+        // Auto-fit viewport to center and fill the crop frame (after state settles)
+        queueMicrotask(() => autoFit(400));
     }
 });
 function handleMouseDown(event, handle) {
     if (!canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     const coords = getEventCoords(event);
@@ -201,10 +205,9 @@ function handleMouseDown(event, handle) {
         haptic('selection');
     }
     else {
-        // Frame interior drag → pan the underlying image (iOS Photos / Lightroom style).
+        // Drag → pan the underlying image (Lightroom style).
         // The frame stays put on screen; the image moves beneath it.
         isPanning = true;
-        panType = 'frame';
         isDragging = false;
         lastPanPosition = { x: coords.clientX, y: coords.clientY };
     }
@@ -237,15 +240,15 @@ function isNearResizeHandle(mouseX, mouseY, handleRadius) {
     return false;
 }
 // Container mousedown — frame interior and handles stop propagation in their
-// own handlers, so this only fires when the user pressed *outside* the frame.
-// That case = canvas pan (viewport moves, image and frame both follow the finger).
+// Container mousedown — fires when user pressed outside the frame.
+// Same behavior as inside: image scrolls under stationary frame (Lightroom style).
 function handleContainerMouseDown(event) {
     if (event.button !== 0)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     isPanning = true;
-    panType = 'canvas';
     isResizing = false;
     resizeHandle = null;
     initialCropArea = null;
@@ -255,27 +258,11 @@ function handleMouseMove(event) {
     if (!canvas || !image)
         return;
     const coords = getEventCoords(event);
-    // ── Pan — two flavours depending on where the drag started ──
+    // ── Pan — image scrolls under stationary frame (Lightroom style) ──
     if (isPanning) {
         const deltaX = coords.clientX - lastPanPosition.x;
         const deltaY = coords.clientY - lastPanPosition.y;
         event.preventDefault();
-        if (panType === 'canvas') {
-            // Drag started outside the frame → move the viewport itself.
-            // Both image and frame translate together (cropArea is untouched).
-            if (onViewportChange) {
-                onViewportChange({
-                    offsetX: viewport.offsetX + deltaX,
-                    offsetY: viewport.offsetY + deltaY
-                });
-            }
-            lastPanPosition = { x: coords.clientX, y: coords.clientY };
-            return;
-        }
-        // panType === 'frame'
-        // Drag inside the frame → image scrolls under a stationary frame.
-        // cropArea moves in image space by the inverse of the finger motion, and
-        // viewport.offset is counter-adjusted so the frame's canvas position stays put.
         const scale = viewport.scale * viewport.zoom;
         const imageDeltaX = deltaX / scale;
         const imageDeltaY = deltaY / scale;
@@ -394,12 +381,73 @@ function handleMouseMove(event) {
         cropArea = next;
     }
 }
+// ── Auto-fit: calculate viewport that centers and fills the crop frame ──
+const AUTO_FIT_PADDING = 0.80; // crop frame fills 80% of canvas
+function calculateAutoFitViewport(crop, img, cvs, baseScale) {
+    const targetW = cvs.width * AUTO_FIT_PADDING;
+    const targetH = cvs.height * AUTO_FIT_PADDING;
+    const fitZoom = Math.min(targetW / (crop.width * baseScale), targetH / (crop.height * baseScale));
+    const totalScale = baseScale * fitZoom;
+    const cropCenterX = crop.x + crop.width / 2;
+    const cropCenterY = crop.y + crop.height / 2;
+    const offsetX = -(cropCenterX - img.width / 2) * totalScale;
+    const offsetY = -(cropCenterY - img.height / 2) * totalScale;
+    return { zoom: fitZoom, offsetX, offsetY };
+}
+// ── Smooth viewport animation (ease-out cubic) ──
+let animationFrameId = null;
+function cancelAnimation() {
+    if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+}
+function animateViewportTo(target, duration = 300) {
+    cancelAnimation();
+    if (!onViewportChange)
+        return;
+    const start = { zoom: viewport.zoom, offsetX: viewport.offsetX, offsetY: viewport.offsetY };
+    const startTime = performance.now();
+    function tick(now) {
+        const elapsed = now - startTime;
+        const t = Math.min(1, elapsed / duration);
+        const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
+        onViewportChange({
+            zoom: start.zoom + (target.zoom - start.zoom) * eased,
+            offsetX: start.offsetX + (target.offsetX - start.offsetX) * eased,
+            offsetY: start.offsetY + (target.offsetY - start.offsetY) * eased
+        });
+        if (t < 1) {
+            animationFrameId = requestAnimationFrame(tick);
+        }
+        else {
+            animationFrameId = null;
+        }
+    }
+    animationFrameId = requestAnimationFrame(tick);
+}
+function autoFit(duration = 300) {
+    if (!canvas || !image)
+        return;
+    const target = calculateAutoFitViewport(cropArea, image, canvas, viewport.scale);
+    if (duration > 0) {
+        animateViewportTo(target, duration);
+    }
+    else if (onViewportChange) {
+        onViewportChange(target);
+    }
+}
 function handleMouseUp() {
+    const wasResizing = isResizing;
     isDragging = false;
     isResizing = false;
     isPanning = false;
     resizeHandle = null;
     initialCropArea = null;
+    // Snap-back: auto-fit after resize to re-center the new crop frame
+    if (wasResizing) {
+        autoFit(300);
+    }
 }
 // These will be defined below after pinch zoom handlers are renamed
 function apply() {
@@ -431,12 +479,14 @@ function setAspectRatio(ratio) {
         width: newWidth,
         height: newHeight
     };
+    autoFit(300);
 }
-// Wheel zoom — exponential (log-scale feel), cursor-focused.
-// Normalizes trackpad line-mode / pixel-mode. Shift = coarse step.
+// Wheel zoom — crop-contextual: changes cropArea size, not viewport.zoom.
+// Scroll up = zoom in = cropArea shrinks. Cursor-focused.
 function handleWheel(event) {
     if (!canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     let dy = event.deltaY;
@@ -446,11 +496,31 @@ function handleWheel(event) {
         dy *= 100; // page
     const coarseness = event.shiftKey ? 0.0048 : 0.002;
     const factor = Math.exp(-dy * coarseness);
-    const targetZoom = viewport.zoom * factor;
-    const rect = canvas.getBoundingClientRect();
-    const focusX = event.clientX - rect.left;
-    const focusY = event.clientY - rect.top;
-    applyCursorFocusedZoom(targetZoom, focusX, focusY);
+    // factor > 1 = scroll up = zoom in = crop shrinks
+    const inverseRatio = 1 / factor;
+    const minSize = 50;
+    let newWidth = cropArea.width * inverseRatio;
+    let newHeight = cropArea.height * inverseRatio;
+    newWidth = Math.max(minSize, Math.min(image.width, newWidth));
+    newHeight = Math.max(minSize, Math.min(image.height, newHeight));
+    if (lockedAspectRatio !== null) {
+        if (newWidth / newHeight > lockedAspectRatio) {
+            newWidth = newHeight * lockedAspectRatio;
+        }
+        else {
+            newHeight = newWidth / lockedAspectRatio;
+        }
+    }
+    // Re-center around cursor position in image coords
+    const imgCoords = screenToImageCoords(event.clientX, event.clientY, canvas, image, viewport, transform);
+    const relX = Math.max(0, Math.min(1, (imgCoords.x - cropArea.x) / cropArea.width));
+    const relY = Math.max(0, Math.min(1, (imgCoords.y - cropArea.y) / cropArea.height));
+    let newX = imgCoords.x - relX * newWidth;
+    let newY = imgCoords.y - relY * newHeight;
+    newX = Math.max(0, Math.min(image.width - newWidth, newX));
+    newY = Math.max(0, Math.min(image.height - newHeight, newY));
+    cropArea = { x: newX, y: newY, width: newWidth, height: newHeight };
+    autoFit(0); // instant re-center
 }
 // Keyboard shortcuts — Enter / Esc / Arrow keys (1px), Shift+Arrow (10px)
 function handleKeyDown(event) {
@@ -492,70 +562,72 @@ function handleKeyDown(event) {
         fitToScreen();
     }
 }
-// ── Cursor-focused canvas zoom ─────────────────────────────────────────
-// This is the *standard* zoom: both the image and the frame scale together
-// (the frame is drawn relative to cropArea in image space, so as viewport.zoom
-//  changes, the frame naturally follows the image on screen). cropArea is
-//  NOT modified — the "which part of the image is cropped" selection is
-//  preserved across zooms, only its visual size on canvas changes.
-//
-// Pan (frame-stationary) is still handled separately in handleMouseMove,
-// where both cropArea and viewport.offset update together.
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 10;
-function applyCursorFocusedZoom(targetZoom, focusCanvasX, focusCanvasY) {
-    if (!canvas || !onViewportChange)
-        return false;
-    const oldZoom = viewport.zoom;
-    const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, targetZoom));
-    if (Math.abs(clampedZoom - oldZoom) < 1e-4)
-        return false;
-    // Keep the image point under the focus stationary on screen.
-    const cxRel = focusCanvasX - canvas.width / 2;
-    const cyRel = focusCanvasY - canvas.height / 2;
-    const zoomRatio = clampedZoom / oldZoom;
-    const newOffsetX = cxRel - (cxRel - viewport.offsetX) * zoomRatio;
-    const newOffsetY = cyRel - (cyRel - viewport.offsetY) * zoomRatio;
-    onViewportChange({
-        zoom: clampedZoom,
-        offsetX: newOffsetX,
-        offsetY: newOffsetY
-    });
-    return true;
-}
 function fitToScreen() {
-    if (!onViewportChange)
-        return;
     haptic('light');
-    onViewportChange({ zoom: 1, offsetX: 0, offsetY: 0 });
+    autoFit(300);
 }
 function handlePinchZoomStart(event) {
-    if (event.touches.length !== 2)
+    if (event.touches.length !== 2 || !canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     const t1 = event.touches[0];
     const t2 = event.touches[1];
     initialPinchDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-    initialPinchZoom = viewport.zoom;
+    initialPinchCropArea = { ...cropArea };
+    // Calculate pinch midpoint's relative position within the crop area
+    const midX = (t1.clientX + t2.clientX) / 2;
+    const midY = (t1.clientY + t2.clientY) / 2;
+    const imgCoords = screenToImageCoords(midX, midY, canvas, image, viewport, transform);
+    initialPinchFocusRel = {
+        x: Math.max(0, Math.min(1, (imgCoords.x - cropArea.x) / cropArea.width)),
+        y: Math.max(0, Math.min(1, (imgCoords.y - cropArea.y) / cropArea.height))
+    };
 }
 function handlePinchZoomMove(event) {
-    if (event.touches.length !== 2 || initialPinchDistance === 0)
+    if (event.touches.length !== 2 || initialPinchDistance === 0 || !initialPinchCropArea)
         return;
-    if (!canvas)
+    if (!canvas || !image)
         return;
     event.preventDefault();
     const t1 = event.touches[0];
     const t2 = event.touches[1];
     const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
     const scaleRatio = distance / initialPinchDistance;
-    const targetZoom = initialPinchZoom * scaleRatio;
-    const rect = canvas.getBoundingClientRect();
-    const focusX = (t1.clientX + t2.clientX) / 2 - rect.left;
-    const focusY = (t1.clientY + t2.clientY) / 2 - rect.top;
-    applyCursorFocusedZoom(targetZoom, focusX, focusY);
+    // Pinch out (scaleRatio > 1) = zoom in = crop area shrinks
+    const inverseRatio = 1 / scaleRatio;
+    const minSize = 50;
+    let newWidth = initialPinchCropArea.width * inverseRatio;
+    let newHeight = initialPinchCropArea.height * inverseRatio;
+    // Enforce minimum size
+    newWidth = Math.max(minSize, Math.min(image.width, newWidth));
+    newHeight = Math.max(minSize, Math.min(image.height, newHeight));
+    // If aspect locked, enforce ratio
+    if (lockedAspectRatio !== null) {
+        if (newWidth / newHeight > lockedAspectRatio) {
+            newWidth = newHeight * lockedAspectRatio;
+        }
+        else {
+            newHeight = newWidth / lockedAspectRatio;
+        }
+    }
+    // Re-center around the pinch focus point
+    const focusImgX = initialPinchCropArea.x + initialPinchFocusRel.x * initialPinchCropArea.width;
+    const focusImgY = initialPinchCropArea.y + initialPinchFocusRel.y * initialPinchCropArea.height;
+    let newX = focusImgX - initialPinchFocusRel.x * newWidth;
+    let newY = focusImgY - initialPinchFocusRel.y * newHeight;
+    // Clamp to image bounds
+    newX = Math.max(0, Math.min(image.width - newWidth, newX));
+    newY = Math.max(0, Math.min(image.height - newHeight, newY));
+    cropArea = { x: newX, y: newY, width: newWidth, height: newHeight };
+    // Auto-fit viewport to keep frame centered (instant, no animation during pinch)
+    autoFit(0);
 }
 function handlePinchZoomEnd() {
     initialPinchDistance = 0;
+    initialPinchCropArea = null;
+    // Smooth snap-back after pinch ends
+    autoFit(300);
 }
 // Unified touch handlers — 1 finger pan (frame or canvas based on start position),
 // 2 fingers = pinch zoom.
@@ -570,13 +642,10 @@ function handleContainerTouchStartUnified(event) {
         return;
     }
     if (event.touches.length === 1) {
-        // Child elements (frame border / handles) stopPropagation in their own
-        // touchstart, so if we reach here the touch is *outside* the frame.
-        // That maps to canvas pan (move viewport, keep cropArea in place).
+        // Outside frame touch — same as inside: image scrolls under frame (Lightroom style).
         event.preventDefault();
         const touch = event.touches[0];
         isPanning = true;
-        panType = 'canvas';
         isResizing = false;
         lastPanPosition = { x: touch.clientX, y: touch.clientY };
     }

package/dist/components/FilterTool.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
 import { FILTER_PRESETS, applyFilterPreset, matchesFilterPreset } from '../utils/filters';
-import { applyGaussianBlur } from '../utils/adjustments';
+import { applyGaussianBlur, generateCurveLUT, isToneCurveDefault, isHSLDefault } from '../utils/adjustments';
 import ToolPanel from './ToolPanel.svelte';
 let { image, adjustments, transform, cropArea, onChange, onClose } = $props();
 // Find currently selected filter (if any)
@@ -35,6 +35,38 @@ function createSimpleThumb() {
         return null;
     }
 }
+// Lightroom-style HSL per-color blending (matches shader blendHSLAdjustments)
+function blendHSLAdjustmentsJS(hueDeg, hslAdj) {
+    let h = ((hueDeg % 360) + 360) % 360;
+    const r = [hslAdj.red.hue, hslAdj.red.saturation, hslAdj.red.luminance];
+    const o = [hslAdj.orange.hue, hslAdj.orange.saturation, hslAdj.orange.luminance];
+    const y = [hslAdj.yellow.hue, hslAdj.yellow.saturation, hslAdj.yellow.luminance];
+    const g = [hslAdj.green.hue, hslAdj.green.saturation, hslAdj.green.luminance];
+    const a = [hslAdj.aqua.hue, hslAdj.aqua.saturation, hslAdj.aqua.luminance];
+    const b = [hslAdj.blue.hue, hslAdj.blue.saturation, hslAdj.blue.luminance];
+    const p = [hslAdj.purple.hue, hslAdj.purple.saturation, hslAdj.purple.luminance];
+    const m = [hslAdj.magenta.hue, hslAdj.magenta.saturation, hslAdj.magenta.luminance];
+    const mix3 = (a, b, t) => [
+        a[0] + (b[0] - a[0]) * t,
+        a[1] + (b[1] - a[1]) * t,
+        a[2] + (b[2] - a[2]) * t,
+    ];
+    if (h < 30)
+        return mix3(r, o, h / 30);
+    if (h < 60)
+        return mix3(o, y, (h - 30) / 30);
+    if (h < 120)
+        return mix3(y, g, (h - 60) / 60);
+    if (h < 180)
+        return mix3(g, a, (h - 120) / 60);
+    if (h < 240)
+        return mix3(a, b, (h - 180) / 60);
+    if (h < 270)
+        return mix3(b, p, (h - 240) / 30);
+    if (h < 300)
+        return mix3(p, m, (h - 270) / 30);
+    return mix3(m, r, (h - 300) / 60);
+}
 // Apply adjustments to canvas via pixel manipulation (Safari-compatible)
 // Must match the shader order and calculations EXACTLY
 function applyAdjustmentsToCanvas(ctx, canvas, adjustments, sourceImageSize) {
@@ -50,11 +82,21 @@ function applyAdjustmentsToCanvas(ctx, canvas, adjustments, sourceImageSize) {
         adjustments.grayscale === 0 &&
         adjustments.vignette === 0 &&
         adjustments.blur === 0 &&
-        adjustments.grain === 0) {
+        adjustments.grain === 0 &&
+        (!adjustments.toneCurve || isToneCurveDefault(adjustments.toneCurve)) &&
+        (!adjustments.hsl || isHSLDefault(adjustments.hsl))) {
         return;
     }
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const data = imageData.data;
+    // Tone curve LUT (applied before all other adjustments, matching shader)
+    const hasToneCurve = !!adjustments.toneCurve && !isToneCurveDefault(adjustments.toneCurve);
+    let curveLUT = null;
+    if (hasToneCurve) {
+        curveLUT = generateCurveLUT(adjustments.toneCurve);
+    }
+    // HSL per-color
+    const hasHSL = !!adjustments.hsl && !isHSLDefault(adjustments.hsl);
     // Pre-calculate adjustment factors
     const hasBrightness = adjustments.brightness !== 0;
     const hasContrast = adjustments.contrast !== 0;
@@ -85,6 +127,15 @@ function applyAdjustmentsToCanvas(ctx, canvas, adjustments, sourceImageSize) {
         let r = data[i] / 255;
         let g = data[i + 1] / 255;
         let b = data[i + 2] / 255;
+        // 0. Tone curve (before all adjustments, matching shader)
+        if (hasToneCurve && curveLUT) {
+            const ri = Math.max(0, Math.min(255, Math.round(r * 255)));
+            const gi = Math.max(0, Math.min(255, Math.round(g * 255)));
+            const bi = Math.max(0, Math.min(255, Math.round(b * 255)));
+            r = curveLUT[ri * 4 + 0] / 255;
+            g = curveLUT[gi * 4 + 1] / 255;
+            b = curveLUT[bi * 4 + 2] / 255;
+        }
         // 1. Brightness (FIRST, like shader)
         if (hasBrightness) {
             r *= brightnessFactor;
@@ -119,6 +170,35 @@ function applyAdjustmentsToCanvas(ctx, canvas, adjustments, sourceImageSize) {
                 b = b + b * (adjustments.highlights / 100) * highlightMask * 0.5;
             }
         }
+        // 4.5. HSL per-color adjustment (Lightroom-style, matching shader)
+        if (hasHSL && adjustments.hsl) {
+            r = Math.max(0, Math.min(1, r));
+            g = Math.max(0, Math.min(1, g));
+            b = Math.max(0, Math.min(1, b));
+            // rgbToHsl returns [h: 0-360, s: 0-100, l: 0-100]
+            const [hDeg, sVal, lVal] = rgbToHsl(r * 255, g * 255, b * 255);
+            let hNorm = hDeg / 360;
+            let sNorm = sVal / 100;
+            let lNorm = lVal / 100;
+            const adj = blendHSLAdjustmentsJS(hDeg, adjustments.hsl);
+            if (adj[0] !== 0 || adj[1] !== 0 || adj[2] !== 0) {
+                // Hue shift (additive, wrapping)
+                hNorm = hNorm + adj[0] / 360;
+                if (hNorm < 0)
+                    hNorm += 1;
+                if (hNorm > 1)
+                    hNorm -= 1;
+                // Saturation (proportional)
+                sNorm = Math.max(0, Math.min(1, sNorm * (1 + adj[1] / 100)));
+                // Luminance (weighted additive — stronger in midtones)
+                const lumWeight = 4 * lNorm * (1 - lNorm);
+                lNorm = Math.max(0, Math.min(1, lNorm + (adj[2] / 100) * Math.max(lumWeight, 0.15)));
+                [r, g, b] = hslToRgb(hNorm * 360, sNorm * 100, lNorm * 100);
+                r /= 255;
+                g /= 255;
+                b /= 255;
+            }
+        }
         // 5. Saturation (via HSL)
         if (hasSaturation) {
             // Clamp before HSL conversion
@@ -490,7 +570,7 @@ function handleWheel(e) {
       rgba(0, 0, 0, 0.4) 60%,
       transparent 100%
     );
-    color: var(--tk-text-primary);
+    color: #ffffff;
     padding: var(--tk-space-3) var(--tk-space-2) var(--tk-space-1);
     font-size: var(--tk-text-2xs);
     font-weight: var(--tk-weight-semibold);

package/package.json

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