Update script.js

script.js

@@ -208,125 +208,134 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // カーブのインタラクションを設定
-    function setupCurveInteraction(canvas, points, color) {
-        let isDragging = false;
-        let draggedPoint = null;
-        
-        canvas.addEventListener('mousedown', function(e) {
-            const rect = canvas.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width * 255;
-            const y = 255 - (e.clientY - rect.top) / rect.height * 255;
-            
-            // 既存の点をチェック
-            for (let i = 0; i < points.length; i++) {
-                const point = points[i];
-                const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
-                
-                if (distance < 15) {
-                    isDragging = true;
-                    draggedPoint = point;
-                    return;
-                }
-            }
+function setupCurveInteraction(canvas, points, color) {
+    let isDragging = false;
+    let draggedPoint = null;
+    let needsUpdate = false;
+    let updateTimeout = null;
+
+    canvas.addEventListener('mousedown', function(e) {
+        const rect = canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width * 255;
+        const y = 255 - (e.clientY - rect.top) / rect.height * 255;
+        
+        // 既存の点をチェック
+        for (let i = 0; i < points.length; i++) {
+            const point = points[i];
+            const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
             
-            // 新しい点を追加
-            if (x > 0 && x < 255 && y > 0 && y < 255) {
-                points.push({x, y});
-                points.sort((a, b) => a.x - b.x);
+            if (distance < 15) {
                 isDragging = true;
-                draggedPoint = {x, y};
-            }
-            
-            drawCurve(canvas, points, color);
-            if (canvas !== luminanceCurveCanvas) {
-                applyBtn.click();
+                draggedPoint = point;
+                return;
             }
-        });
+        }
         
-        canvas.addEventListener('mousemove', function(e) {
-            if (!isDragging || !draggedPoint) return;
-            
-            const rect = canvas.getBoundingClientRect();
-            let x = (e.clientX - rect.left) / rect.width * 255;
-            let y = 255 - (e.clientY - rect.top) / rect.height * 255;
-            
-            // 境界チェック
-            x = Math.max(0, Math.min(255, x));
-            y = Math.max(0, Math.min(255, y));
-            
-            // 最初と最後の点はx座標を固定
-            if (points.indexOf(draggedPoint) === 0) {
-                x = 0;
-            } else if (points.indexOf(draggedPoint) === points.length - 1) {
-                x = 255;
-            }
-            
-            draggedPoint.x = x;
-            draggedPoint.y = y;
-            
-            drawCurve(canvas, points, color);
-            if (canvas !== luminanceCurveCanvas) {
-                applyBtn.click();
-            }
-        });
+        // 新しい点を追加
+        if (x > 0 && x < 255 && y > 0 && y < 255) {
+            points.push({x, y});
+            points.sort((a, b) => a.x - b.x);
+            isDragging = true;
+            draggedPoint = {x, y};
+        }
         
-        canvas.addEventListener('mouseup', function() {
-            isDragging = false;
-            draggedPoint = null;
-            if (canvas === luminanceCurveCanvas) {
-                applyBtn.click();
-            }
-        });
+        drawCurve(canvas, points, color);
+        needsUpdate = true;
+    });
+    
+    canvas.addEventListener('mousemove', function(e) {
+        if (!isDragging || !draggedPoint) return;
+        
+        const rect = canvas.getBoundingClientRect();
+        let x = (e.clientX - rect.left) / rect.width * 255;
+        let y = 255 - (e.clientY - rect.top) / rect.height * 255;
+        
+        // 境界チェック
+        x = Math.max(0, Math.min(255, x));
+        y = Math.max(0, Math.min(255, y));
+        
+        // 最初と最後の点はx座標を固定
+        if (points.indexOf(draggedPoint) === 0) {
+            x = 0;
+        } else if (points.indexOf(draggedPoint) === points.length - 1) {
+            x = 255;
+        }
+        
+        draggedPoint.x = x;
+        draggedPoint.y = y;
+        
+        drawCurve(canvas, points, color);
+        needsUpdate = true;
         
-        canvas.addEventListener('mouseleave', function() {
-            isDragging = false;
-            draggedPoint = null;
-            if (canvas === luminanceCurveCanvas && isDragging) {
-                applyBtn.click();
+        // リアルタイムプレビュー更新（デバウンス付き）
+        if (updateTimeout) clearTimeout(updateTimeout);
+        updateTimeout = setTimeout(() => {
+            if (needsUpdate) {
+                applyFilters();
+                needsUpdate = false;
             }
-        });
+        }, 200);
+    });
+    
+    canvas.addEventListener('mouseup', function() {
+        isDragging = false;
+        draggedPoint = null;
+        if (needsUpdate) {
+            applyFilters();
+            needsUpdate = false;
+        }
+    });
+    
+    canvas.addEventListener('mouseleave', function() {
+        isDragging = false;
+        draggedPoint = null;
+        if (needsUpdate) {
+            applyFilters();
+            needsUpdate = false;
+        }
+    });
+    
+    // ポイントを削除するダブルクリック
+    canvas.addEventListener('dblclick', function(e) {
+        if (points.length <= 2) return;
         
-        // ポイントを削除するダブルクリック
-        canvas.addEventListener('dblclick', function(e) {
-            if (points.length <= 2) return;
-            
-            const rect = canvas.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width * 255;
-            const y = 255 - (e.clientY - rect.top) / rect.height * 255;
+        const rect = canvas.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width * 255;
+        const y = 255 - (e.clientY - rect.top) / rect.height * 255;
+        
+        for (let i = 1; i < points.length - 1; i++) {
+            const point = points[i];
+            const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
             
-            for (let i = 1; i < points.length - 1; i++) {
-                const point = points[i];
-                const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
-                
-                if (distance < 15) {
-                    points.splice(i, 1);
-                    drawCurve(canvas, points, color);
-                    if (canvas !== luminanceCurveCanvas) {
-                        applyBtn.click();
-                    }
-                    return;
-                }
+            if (distance < 15) {
+                points.splice(i, 1);
+                drawCurve(canvas, points, color);
+                applyFilters();
+                return;
             }
-        });
-    }
+        }
+    });
+}
+    
+function applyFilters() {
+    if (!camanInstance) return;
+    
+    // ローディング表示なしで直接適用
+    camanInstance.revert(false);
+    
+    // 基本調整
+    camanInstance.brightness(parseInt(brightnessSlider.value));
+    camanInstance.contrast(parseInt(contrastSlider.value) * 1.5);
+    camanInstance.saturation(parseInt(saturationSlider.value));
     
     // RGBカーブを適用
-    function applyRgbCurves() {
-        if (!camanInstance) return;
-        
-        // カーブデータを準備
-        const redCurve = createCurveData(redCurvePoints);
-        const greenCurve = createCurveData(greenCurvePoints);
-        const blueCurve = createCurveData(blueCurvePoints);
-        
-        // カーブを適用
-        camanInstance.process("rgbCurve", function(rgba) {
-            rgba.r = redCurve[rgba.r];
-            rgba.g = greenCurve[rgba.g];
-            rgba.b = blueCurve[rgba.b];
-            return rgba;
-        });
-    }
+    applyRgbCurves();
+    
+    // 輝度カーブを適用
+    applyLuminanceCurve();
+    
+    camanInstance.render();
+}
     
     // 輝度カーブを適用（連続的なシャドウ/ハイライト調整）
     function applyLuminanceCurve() {