Update script.js

script.js

@@ -31,122 +31,115 @@ document.addEventListener('DOMContentLoaded', function() {
     
     let camanInstance = null;
     let originalImageData = null;
-    
-    // 画像アップロードの処理
-    imageUpload.addEventListener('change', function(e) {
-        const file = e.target.files[0];
-        if (!file) return;
+    let isApplyingFilters = false;
+
+    // RGBカーブを適用する関数
+    const applyRgbCurves = function() {
+        if (!camanInstance) return;
         
-        showLoading();
+        // カーブデータを準備
+        const redCurve = createCurveData(redCurvePoints);
+        const greenCurve = createCurveData(greenCurvePoints);
+        const blueCurve = createCurveData(blueCurvePoints);
         
-        const reader = new FileReader();
-        reader.onload = function(event) {
-            const img = new Image();
-            img.onload = function() {
-                // キャンバスのサイズを画像に合わせる
-                const maxWidth = 800;
-                const maxHeight = 600;
-                let width = img.width;
-                let height = img.height;
-                
-                if (width > maxWidth) {
-                    height = (maxWidth / width) * height;
-                    width = maxWidth;
-                }
-                
-                if (height > maxHeight) {
-                    width = (maxHeight / height) * width;
-                    height = maxHeight;
-                }
-                
-                imageCanvas.width = width;
-                imageCanvas.height = height;
-                
-                // CamanJSで画像を読み込む
-                Caman(imageCanvas, function() {
-                    this.revert(false);
-                    this.render();
-                    camanInstance = this;
-                    originalImageData = this.canvas.toDataURL();
-                    
-                    // カーブを初期化
-                    initCurves();
-                    hideLoading();
-                });
-                
-                const ctx = imageCanvas.getContext('2d');
-                ctx.drawImage(img, 0, 0, width, height);
-            };
-            img.src = event.target.result;
-        };
-        reader.readAsDataURL(file);
-    });
-    
-    // スライダーイベントの設定
-    function setupSlider(slider, valueElement) {
-        slider.addEventListener('input', function() {
-            valueElement.textContent = this.value;
+        // カーブを適用
+        this.process("rgbCurve", function(rgba) {
+            rgba.r = redCurve[rgba.r];
+            rgba.g = greenCurve[rgba.g];
+            rgba.b = blueCurve[rgba.b];
+            return rgba;
         });
-    }
-    
-    setupSlider(brightnessSlider, brightnessValue);
-    setupSlider(contrastSlider, contrastValue);
-    setupSlider(saturationSlider, saturationValue);
-    setupSlider(shadowsSlider, shadowsValue);
-    setupSlider(highlightsSlider, highlightsValue);
-    
-    // 適用ボタンのイベントリスナー
-    applyBtn.addEventListener('click', function() {
-        if (!camanInstance) return;
-        showLoading();
-        
-        // 非同期で処理を行う
-        setTimeout(function() {
-            applyFilters();
-            hideLoading();
-        }, 100);
-    });
-    
-    // フィルターを適用する関数
-    function applyFilters() {
+    };
+
+    // 輝度カーブを適用する関数
+    const applyLuminanceCurve = function() {
         if (!camanInstance) return;
         
-        camanInstance.revert(false);
+        const luminanceCurve = createCurveData(luminanceCurvePoints);
+        const shadowAmount = parseInt(shadowsSlider.value) / 100 * 50;
+        const highlightAmount = parseInt(highlightsSlider.value) / 100 * 50;
         
-        // 基本調整
-        camanInstance.brightness(parseInt(brightnessSlider.value));
-        camanInstance.contrast(parseInt(contrastSlider.value) * 1.5); // コントラスト強化
-        camanInstance.saturation(parseInt(saturationSlider.value));
+        this.process("luminanceAdjustment", function(rgba) {
+            const luminance = 0.299 * rgba.r + 0.587 * rgba.g + 0.114 * rgba.b;
+            const curveAdjustment = (luminanceCurve[luminance] - luminance) / 255 * 100;
+            
+            let adjustment = 0;
+            
+            if (shadowAmount !== 0) {
+                const shadowFactor = 1 - (luminance / 255);
+                adjustment += shadowAmount * shadowFactor;
+            }
+            
+            if (highlightAmount !== 0) {
+                const highlightFactor = luminance / 255;
+                adjustment += highlightAmount * highlightFactor;
+            }
+            
+            adjustment += curveAdjustment;
+            
+            rgba.r = Math.min(255, Math.max(0, rgba.r + adjustment));
+            rgba.g = Math.min(255, Math.max(0, rgba.g + adjustment));
+            rgba.b = Math.min(255, Math.max(0, rgba.b + adjustment));
+            
+            return rgba;
+        });
+    };
+
+    // カーブデータを作成する関数
+    const createCurveData = function(points) {
+        points.sort((a, b) => a.x - b.x);
+        const curve = new Array(256);
         
-        // RGBカーブを適用
-        applyRgbCurves();
+        for (let i = 0; i < points.length - 1; i++) {
+            const start = points[i];
+            const end = points[i + 1];
+            
+            const x1 = Math.round(start.x);
+            const y1 = Math.round(start.y);
+            const x2 = Math.round(end.x);
+            const y2 = Math.round(end.y);
+            
+            for (let x = x1; x <= x2; x++) {
+                const t = (x - x1) / (x2 - x1);
+                curve[x] = Math.round(y1 + t * (y2 - y1));
+            }
+        }
         
-        // 輝度カーブを適用（シャドウ/ハイライト調整）
-        applyLuminanceCurve();
+        return curve;
+    };
+
+    // フィルターを適用する関数
+    const applyFilters = function() {
+        if (!camanInstance || isApplyingFilters) return;
         
-        camanInstance.render();
-    }
-    
-    // RGBカーブを初期化
-    function initCurves() {
-        drawCurve(redCurveCanvas, redCurvePoints, 'red');
-        drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
-        drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
-        drawCurve(luminanceCurveCanvas, luminanceCurvePoints, '#888');
+        isApplyingFilters = true;
         
-        setupCurveInteraction(redCurveCanvas, redCurvePoints, 'red');
-        setupCurveInteraction(greenCurveCanvas, greenCurvePoints, 'green');
-        setupCurveInteraction(blueCurveCanvas, blueCurvePoints, 'blue');
-        setupCurveInteraction(luminanceCurveCanvas, luminanceCurvePoints, '#888');
-    }
-    
-    // カーブを描画
-    function drawCurve(canvas, points, color) {
+        try {
+            camanInstance.revert(false);
+            
+            camanInstance.newLayer(function() {
+                this.brightness(parseInt(brightnessSlider.value));
+                this.contrast(parseInt(contrastSlider.value) * 1.5);
+                this.saturation(parseInt(saturationSlider.value));
+                
+                applyRgbCurves.call(this);
+                applyLuminanceCurve.call(this);
+            });
+            
+            camanInstance.render();
+        } catch (e) {
+            console.error("Error applying filters:", e);
+        } finally {
+            isApplyingFilters = false;
+        }
+    };
+
+    // カーブを描画する関数
+    const drawCurve = function(canvas, points, color) {
         const ctx = canvas.getContext('2d');
         const width = canvas.width;
         const height = canvas.height;
         
-        // クリア
         ctx.clearRect(0, 0, width, height);
         
         // グリッドを描画
@@ -181,14 +174,11 @@ document.addEventListener('DOMContentLoaded', function() {
         ctx.lineWidth = 2;
         ctx.beginPath();
         
-        // 点をソート
         points.sort((a, b) => a.x - b.x);
         
-        // 最初の点
         const firstPoint = points[0];
         ctx.moveTo(firstPoint.x / 255 * width, (255 - firstPoint.y) / 255 * height);
         
-        // 中間の点
         for (let i = 1; i < points.length; i++) {
             const point = points[i];
             ctx.lineTo(point.x / 255 * width, (255 - point.y) / 255 * height);
@@ -205,211 +195,182 @@ document.addEventListener('DOMContentLoaded', function() {
             ctx.arc(x, y, 5, 0, Math.PI * 2);
             ctx.fill();
         });
-    }
-    
-    // カーブのインタラクションを設定
-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 (distance < 15) {
-                isDragging = true;
-                draggedPoint = point;
-                return;
-            }
-        }
-        
-        // 新しい点を追加
-        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};
-        }
-        
-        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;
-        
-        // リアルタイムプレビュー更新（デバウンス付き）
-        if (updateTimeout) clearTimeout(updateTimeout);
-        updateTimeout = setTimeout(() => {
-            if (needsUpdate) {
+    // カーブのインタラクションを設定
+    const setupCurveInteraction = function(canvas, points, color) {
+        let isDragging = false;
+        let draggedPoint = null;
+        let lastUpdateTime = 0;
+        
+        const handleUpdate = function() {
+            drawCurve(canvas, points, color);
+            const now = Date.now();
+            if (now - lastUpdateTime > 200) { // 200msごとに更新
                 applyFilters();
-                needsUpdate = false;
+                lastUpdateTime = now;
             }
-        }, 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;
-        
-        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));
+        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;
             
-            if (distance < 15) {
-                points.splice(i, 1);
-                drawCurve(canvas, points, color);
-                applyFilters();
-                return;
+            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;
+                    break;
+                }
             }
-        }
-    });
-}
-    
-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カーブを適用
-    applyRgbCurves();
-    
-    // 輝度カーブを適用
-    applyLuminanceCurve();
-    
-    camanInstance.render();
-}
-    
-    // 輝度カーブを適用（連続的なシャドウ/ハイライト調整）
-    function applyLuminanceCurve() {
-        if (!camanInstance) return;
-        
-        const luminanceCurve = createCurveData(luminanceCurvePoints);
-        const shadowAmount = parseInt(shadowsSlider.value) / 100 * 50; // -50から50の範囲に調整
-        const highlightAmount = parseInt(highlightsSlider.value) / 100 * 50;
-        
-        camanInstance.process("luminanceAdjustment", function(rgba) {
-            // ピクセルの輝度を計算
-            const luminance = 0.299 * rgba.r + 0.587 * rgba.g + 0.114 * rgba.b;
             
-            // 輝度カーブから調整値を取得
-            const curveAdjustment = (luminanceCurve[luminance] - luminance) / 255 * 100;
+            if (!isDragging && x > 0 && x < 255 && y > 0 && y < 255) {
+                points.push({x, y});
+                points.sort((a, b) => a.x - b.x);
+                isDragging = true;
+                draggedPoint = points.find(p => p.x === x && p.y === y);
+            }
             
-            // シャドウ/ハイライト調整を適用
-            let adjustment = 0;
+            handleUpdate();
+        });
+        
+        canvas.addEventListener('mousemove', function(e) {
+            if (!isDragging || !draggedPoint) return;
             
-            // シャドウ調整（低輝度ほど強く適用）
-            if (shadowAmount !== 0) {
-                const shadowFactor = 1 - (luminance / 255); // 0（明るい）～1（暗い）
-                adjustment += shadowAmount * shadowFactor;
-            }
+            const rect = canvas.getBoundingClientRect();
+            let x = (e.clientX - rect.left) / rect.width * 255;
+            let y = 255 - (e.clientY - rect.top) / rect.height * 255;
             
-            // ハイライト調整（高輝度ほど強く適用）
-            if (highlightAmount !== 0) {
-                const highlightFactor = luminance / 255; // 0（暗い）～1（明るい）
-                adjustment += highlightAmount * highlightFactor;
+            x = Math.max(0, Math.min(255, x));
+            y = Math.max(0, Math.min(255, y));
+            
+            if (points.indexOf(draggedPoint) === 0) {
+                x = 0;
+            } else if (points.indexOf(draggedPoint) === points.length - 1) {
+                x = 255;
             }
             
-            // 輝度カーブの調整を追加
-            adjustment += curveAdjustment;
+            draggedPoint.x = x;
+            draggedPoint.y = y;
             
-            // 調整を適用
-            rgba.r = Math.min(255, Math.max(0, rgba.r + adjustment));
-            rgba.g = Math.min(255, Math.max(0, rgba.g + adjustment));
-            rgba.b = Math.min(255, Math.max(0, rgba.b + adjustment));
-            
-            return rgba;
+            handleUpdate();
         });
-    }
-    
-    // カーブデータを作成
-    function createCurveData(points) {
-        points.sort((a, b) => a.x - b.x);
-        const curve = new Array(256);
         
-        for (let i = 0; i < points.length - 1; i++) {
-            const start = points[i];
-            const end = points[i + 1];
+        canvas.addEventListener('mouseup', function() {
+            if (isDragging) {
+                isDragging = false;
+                applyFilters(); // 最後に確実に適用
+            }
+        });
+        
+        canvas.addEventListener('mouseleave', function() {
+            if (isDragging) {
+                isDragging = false;
+                applyFilters(); // 最後に確実に適用
+            }
+        });
+        
+        canvas.addEventListener('dblclick', function(e) {
+            if (points.length <= 2) return;
             
-            const x1 = Math.round(start.x);
-            const y1 = Math.round(start.y);
-            const x2 = Math.round(end.x);
-            const y2 = Math.round(end.y);
+            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 x = x1; x <= x2; x++) {
-                const t = (x - x1) / (x2 - x1);
-                curve[x] = Math.round(y1 + t * (y2 - y1));
+            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);
+                    applyFilters();
+                    break;
+                }
             }
-        }
+        });
+    };
+
+    // 初期化関数
+    const initCurves = function() {
+        drawCurve(redCurveCanvas, redCurvePoints, 'red');
+        drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
+        drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
+        drawCurve(luminanceCurveCanvas, luminanceCurvePoints, '#888');
         
-        return curve;
+        setupCurveInteraction(redCurveCanvas, redCurvePoints, 'red');
+        setupCurveInteraction(greenCurveCanvas, greenCurvePoints, 'green');
+        setupCurveInteraction(blueCurveCanvas, blueCurvePoints, 'blue');
+        setupCurveInteraction(luminanceCurveCanvas, luminanceCurvePoints, '#888');
+    };
+
+    // 画像アップロードの処理
+    imageUpload.addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const img = new Image();
+            img.onload = function() {
+                const maxWidth = 800;
+                const maxHeight = 600;
+                let width = img.width;
+                let height = img.height;
+                
+                if (width > maxWidth) {
+                    height = (maxWidth / width) * height;
+                    width = maxWidth;
+                }
+                
+                if (height > maxHeight) {
+                    width = (maxHeight / height) * width;
+                    height = maxHeight;
+                }
+                
+                imageCanvas.width = width;
+                imageCanvas.height = height;
+                
+                Caman(imageCanvas, function() {
+                    this.revert(false);
+                    this.render();
+                    camanInstance = this;
+                    originalImageData = this.canvas.toDataURL();
+                    initCurves();
+                });
+                
+                const ctx = imageCanvas.getContext('2d');
+                ctx.drawImage(img, 0, 0, width, height);
+            };
+            img.src = event.target.result;
+        };
+        reader.readAsDataURL(file);
+    });
+
+    // スライダーイベントの設定
+    function setupSlider(slider, valueElement) {
+        slider.addEventListener('input', function() {
+            valueElement.textContent = this.value;
+        });
     }
     
+    setupSlider(brightnessSlider, brightnessValue);
+    setupSlider(contrastSlider, contrastValue);
+    setupSlider(saturationSlider, saturationValue);
+    setupSlider(shadowsSlider, shadowsValue);
+    setupSlider(highlightsSlider, highlightsValue);
+    
+    // 適用ボタン
+    applyBtn.addEventListener('click', applyFilters);
+    
     // リセットボタン
     resetBtn.addEventListener('click', function() {
         if (!camanInstance) return;
         
-        showLoading();
-        
-        // スライダーをリセット
         brightnessSlider.value = 0;
         contrastSlider.value = 0;
         saturationSlider.value = 0;
@@ -422,18 +383,13 @@ function applyFilters() {
         shadowsValue.textContent = '0';
         highlightsValue.textContent = '0';
         
-        // カーブをリセット
         redCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         greenCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         blueCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         luminanceCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         
-        drawCurve(redCurveCanvas, redCurvePoints, 'red');
-        drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
-        drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
-        drawCurve(luminanceCurveCanvas, luminanceCurvePoints, '#888');
+        initCurves();
         
-        // 画像をリセット
         const img = new Image();
         img.onload = function() {
             const ctx = imageCanvas.getContext('2d');
@@ -443,7 +399,6 @@ function applyFilters() {
                 this.revert(false);
                 this.render();
                 camanInstance = this;
-                hideLoading();
             });
         };
         img.src = originalImageData;
@@ -458,13 +413,4 @@ function applyFilters() {
         link.href = imageCanvas.toDataURL('image/png');
         link.click();
     });
-    
-    // 読み込み表示を制御する関数
-    function showLoading() {
-        loadingOverlay.style.display = 'flex';
-    }
-    
-    function hideLoading() {
-        loadingOverlay.style.display = 'none';
-    }
 });