@jhits/plugin-images 0.0.3 → 0.0.5

package/src/components/GlobalImageEditor/GlobalImageEditor.tsx

@@ -0,0 +1,374 @@
+/**
+ * Global Image Editor Component
+ * Allows clicking on any image in the client app to edit it (admin/dev only)
+ * 
+ * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ */
+
+'use client';
+
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { X, Edit2 } from 'lucide-react';
+import { ImagePicker } from '../ImagePicker';
+import type { ImageMetadata } from '../../types';
+import type { SelectedImage, PendingTransform } from './types';
+import { getPluginConfig } from './config';
+import { parseImageData } from './imageDetection';
+import { setupImageHandlers } from './imageSetup';
+import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './saveLogic';
+import { handleImageChange, handleBrightnessChange, handleBlurChange } from './eventHandlers';
+
+export function GlobalImageEditor() {
+    // Configuration
+    const config = useMemo(() => getPluginConfig(), []);
+    
+    // State
+    const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [userRole, setUserRole] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    // Refs for save debouncing
+    const saveTransformTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const pendingTransformRef = useRef<PendingTransform | null>(null);
+
+    // Check if user is admin/dev
+    useEffect(() => {
+        const checkUser = async () => {
+            try {
+                const res = await fetch('/api/me');
+                const data = await res.json();
+                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
+                    setUserRole(data.user.role);
+                }
+            } catch (error) {
+                console.error('Failed to check user role:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        checkUser();
+    }, []);
+
+    // Listen for open-image-editor custom event from Image/BackgroundImage components
+    useEffect(() => {
+        if (!userRole) return;
+
+        const handleOpenEditor = async (e: CustomEvent) => {
+            const { id, currentBrightness, currentBlur } = e.detail || {};
+            if (!id) return;
+
+            console.log('[GlobalImageEditor] open-image-editor event received for id:', id);
+
+            // Find the element by data-image-id or data-background-image-id
+            let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`) as HTMLElement;
+            
+            if (!element) {
+                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`) as HTMLElement;
+            }
+
+            if (!element) {
+                console.error('[GlobalImageEditor] Element not found for id:', id);
+                return;
+            }
+
+            // Extract semantic ID
+            const semanticId = element.getAttribute('data-image-id') || 
+                             element.getAttribute('data-background-image-id') || 
+                             id;
+
+            // Parse image data
+            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
+            
+            if (!imageData) {
+                console.error('[GlobalImageEditor] Failed to parse image data');
+                return;
+            }
+
+            // Store semantic ID on element if not already set
+            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
+                element.setAttribute('data-background-image-id', semanticId);
+            } else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
+                element.setAttribute('data-image-id', semanticId);
+            }
+
+            setSelectedImage(imageData);
+            setIsOpen(true);
+        };
+
+        window.addEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
+
+        return () => {
+            window.removeEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
+        };
+    }, [userRole]);
+
+    // Add click handlers to all images
+    useEffect(() => {
+        if (isLoading || !userRole) {
+            console.log('[GlobalImageEditor] Skipping image handlers - isLoading:', isLoading, 'userRole:', userRole);
+            return;
+        }
+
+        console.log('[GlobalImageEditor] Setting up image handlers for role:', userRole);
+        
+        const cleanup = setupImageHandlers((imageData) => {
+            setSelectedImage(imageData);
+            setIsOpen(true);
+        });
+
+        // Setup immediately and also after a short delay to catch dynamically loaded images
+        const timeoutId = setTimeout(() => {
+            const cleanup2 = setupImageHandlers((imageData) => {
+                setSelectedImage(imageData);
+                setIsOpen(true);
+            });
+            // Note: This creates a new cleanup, but the first one will handle the initial setup
+        }, 500);
+        
+        return () => {
+            clearTimeout(timeoutId);
+            cleanup();
+        };
+    }, [isLoading, userRole]);
+
+    // Save image transform (scale/position) to API with debouncing
+    const saveImageTransformHandler = useCallback(async (
+        scale: number,
+        positionX: number,
+        positionY: number,
+        immediate: boolean = false,
+        brightnessOverride?: number,
+        blurOverride?: number
+    ) => {
+        if (!selectedImage) return;
+
+        const { element } = selectedImage;
+        const semanticId = element.getAttribute('data-image-id') || 
+                         element.getAttribute('data-background-image-id');
+        
+        if (!semanticId) return;
+
+        const filename = await getFilename(semanticId, selectedImage);
+        if (!filename) {
+            console.error('[GlobalImageEditor] getFilename returned null for semanticId:', semanticId);
+            return;
+        }
+        console.log('[GlobalImageEditor] getFilename returned:', filename, 'for semanticId:', semanticId);
+
+        // Use override values if provided, otherwise use selectedImage values
+        // IMPORTANT: Overrides contain the latest values from the editor
+        const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : (selectedImage?.brightness ?? 100);
+        const finalBlur = blurOverride !== undefined ? blurOverride : (selectedImage?.blur ?? 0);
+
+        // Store pending transform
+        pendingTransformRef.current = { 
+            scale, 
+            positionX, 
+            positionY,
+            semanticId,
+            filename
+        };
+
+        // Clear existing timeout
+        if (saveTransformTimeoutRef.current) {
+            clearTimeout(saveTransformTimeoutRef.current);
+            saveTransformTimeoutRef.current = null;
+        }
+
+        // If immediate save is requested (e.g., when "Done" is clicked), save right away
+        if (immediate) {
+            const normalizedPositionX = normalizePosition(positionX);
+            const normalizedPositionY = normalizePosition(positionY);
+
+            console.log('[GlobalImageEditor] Immediate save to API:', { semanticId, filename, scale, normalizedPositionX, normalizedPositionY, finalBrightness, finalBlur });
+            await saveTransformToAPI(
+                semanticId,
+                filename,
+                scale,
+                normalizedPositionX,
+                normalizedPositionY,
+                finalBrightness,
+                finalBlur
+            );
+            pendingTransformRef.current = null;
+            return;
+        }
+
+        // Debounce: save after 300ms of no changes
+        saveTransformTimeoutRef.current = setTimeout(async () => {
+            const pending = pendingTransformRef.current;
+            if (pending && selectedImage) {
+                await flushPendingSave(pending, selectedImage);
+            }
+        }, 300);
+    }, [selectedImage]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (saveTransformTimeoutRef.current) {
+                clearTimeout(saveTransformTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    // Event handlers
+    const handleImageChangeWrapper = useCallback(async (image: ImageMetadata | null) => {
+        if (!selectedImage) return;
+        await handleImageChange(image, selectedImage, handleClose);
+    }, [selectedImage]);
+
+    const handleBrightnessChangeWrapper = useCallback(async (brightness: number) => {
+        if (!selectedImage) return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
+        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+
+    const handleBlurChangeWrapper = useCallback(async (blur: number) => {
+        if (!selectedImage) return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
+        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+
+    const handleEditorSave = useCallback(async (
+        finalScale: number,
+        finalPositionX: number,
+        finalPositionY: number,
+        finalBrightness?: number,
+        finalBlur?: number
+    ) => {
+        console.log('[GlobalImageEditor] handleEditorSave callback created/updated');
+        console.log('[GlobalImageEditor] handleEditorSave called:', { finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur, hasSelectedImage: !!selectedImage });
+        if (selectedImage) {
+            // Use provided values if they're not undefined, otherwise fall back to selectedImage values
+            // Note: 0 is a valid value for blur, so we check for undefined explicitly
+            const brightness = finalBrightness !== undefined ? finalBrightness : selectedImage.brightness;
+            const blur = finalBlur !== undefined ? finalBlur : selectedImage.blur;
+            
+            const updated = { 
+                ...selectedImage, 
+                scale: finalScale, 
+                positionX: finalPositionX, 
+                positionY: finalPositionY,
+                brightness,
+                blur,
+            };
+            setSelectedImage(updated);
+            
+            console.log('[GlobalImageEditor] Calling saveImageTransformHandler with:', { finalScale, finalPositionX, finalPositionY, brightness, blur, immediate: true });
+            // Only save once when editor closes with all final values
+            // ImagePicker prevents duplicate calls by not calling individual handlers when onEditorSave is provided
+            await saveImageTransformHandler(
+                finalScale, 
+                finalPositionX, 
+                finalPositionY, 
+                true, 
+                brightness, 
+                blur
+            );
+        } else {
+            console.error('[GlobalImageEditor] handleEditorSave called but selectedImage is null!');
+        }
+    }, [selectedImage, saveImageTransformHandler]);
+
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setSelectedImage(null);
+    }, []);
+
+    // Don't render if disabled or user is not admin/dev
+    if (!config.enabled || isLoading || !userRole) {
+        return null;
+    }
+
+    if (!isOpen || !selectedImage) {
+        return null;
+    }
+
+    return (
+        <div 
+            className={`fixed inset-0 z-[9999] flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
+            data-image-editor="true"
+            onClick={(e) => {
+                if (e.target === e.currentTarget) {
+                    handleClose();
+                }
+            }}
+        >
+            <div 
+                className={`relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-7xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b dark:border-neutral-800">
+                    <h2 className="text-2xl font-bold dark:text-white">Edit Image</h2>
+                    <button
+                        onClick={handleClose}
+                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                        aria-label="Close editor"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6">
+                    <ImagePicker
+                        value={selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc}
+                        onChange={handleImageChangeWrapper}
+                        brightness={selectedImage.brightness}
+                        blur={selectedImage.blur}
+                        scale={selectedImage.scale}
+                        positionX={selectedImage.positionX}
+                        positionY={selectedImage.positionY}
+                        onBrightnessChange={handleBrightnessChangeWrapper}
+                        onBlurChange={handleBlurChangeWrapper}
+                        onEditorSave={handleEditorSave}
+                        onScaleChange={async (newScale) => {
+                            console.log('[GlobalImageEditor] onScaleChange called:', newScale);
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, scale: newScale };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY, false);
+                            }
+                        }}
+                        onPositionXChange={async (newPositionX) => {
+                            console.log('[GlobalImageEditor] onPositionXChange called:', newPositionX);
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionX: newPositionX };
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY, false);
+                            }
+                        }}
+                        onPositionYChange={async (newPositionY) => {
+                            console.log('[GlobalImageEditor] onPositionYChange called:', newPositionY);
+                            if (selectedImage) {
+                                const updated = { ...selectedImage, positionY: newPositionY };
+                                setSelectedImage(updated);
+                                // If onEditorSave wasn't provided, this might be called when editor closes
+                                // In that case, we should save immediately with all current values including brightness/blur
+                                // We'll save immediately to ensure the final state is persisted
+                                await saveImageTransformHandler(
+                                    updated.scale, 
+                                    updated.positionX, 
+                                    newPositionY, 
+                                    true, // Save immediately - this is likely the final callback when editor closes
+                                    updated.brightness,
+                                    updated.blur
+                                );
+                            }
+                        }}
+                        onEditorSave={handleEditorSave}
+                        showEffects={true}
+                        darkMode={false}
+                        aspectRatio={selectedImage.aspectRatio}
+                        borderRadius={selectedImage.borderRadius}
+                        objectFit={selectedImage.objectFit}
+                        objectPosition={selectedImage.objectPosition}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/GlobalImageEditor/config.ts

@@ -0,0 +1,21 @@
+/**
+ * Configuration utilities for GlobalImageEditor
+ */
+
+import type { PluginConfig } from './types';
+
+/**
+ * Read plugin configuration from window global
+ */
+export function getPluginConfig(): PluginConfig {
+    if (typeof window === 'undefined') {
+        return { enabled: false };
+    }
+    
+    const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-images'];
+    return {
+        enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
+        className: pluginProps?.className,
+        overlayClassName: pluginProps?.overlayClassName,
+    };
+}

package/src/components/GlobalImageEditor/eventHandlers.ts

@@ -0,0 +1,267 @@
+/**
+ * Event handlers for image changes and effects
+ */
+
+import type { SelectedImage } from './types';
+import type { ImageMetadata } from '../../types';
+import { getFilename, saveTransformToAPI, normalizePosition } from './saveLogic';
+
+/**
+ * Apply image changes to DOM and save to API
+ */
+export async function handleImageChange(
+    image: ImageMetadata | null,
+    selectedImage: SelectedImage,
+    onClose: () => void
+): Promise<void> {
+    if (!image) return;
+
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                     element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) {
+        console.error('[GlobalImageEditor] No semantic ID found for image');
+        return;
+    }
+    
+    // Extract filename from image URL or use image.id
+    const filename = image.url.split('/').pop()?.split('?')[0] || image.id;
+    const normalizedPositionX = normalizePosition(selectedImage.positionX);
+    const normalizedPositionY = normalizePosition(selectedImage.positionY);
+    
+    // Save the mapping between semantic ID and filename, including effects and transforms
+    await saveTransformToAPI(
+        semanticId,
+        filename,
+        selectedImage.scale,
+        normalizedPositionX,
+        normalizedPositionY,
+        selectedImage.brightness,
+        selectedImage.blur
+    );
+    
+    // Update image src immediately - handle background images differently
+    if (selectedImage.isBackground) {
+        updateBackgroundImage(element, image.url, selectedImage, normalizedPositionX, normalizedPositionY);
+    } else {
+        updateRegularImage(element, image.url, semanticId, selectedImage, normalizedPositionX, normalizedPositionY);
+    }
+    
+    // Dispatch a custom event to notify Image components to re-resolve
+    window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+        detail: { 
+            id: semanticId, 
+            filename, 
+            brightness: selectedImage.brightness, 
+            blur: selectedImage.blur,
+            scale: selectedImage.scale,
+            positionX: selectedImage.positionX,
+            positionY: selectedImage.positionY,
+        }
+    }));
+    
+    onClose();
+}
+
+/**
+ * Update background image element
+ */
+function updateBackgroundImage(
+    element: HTMLElement,
+    imageUrl: string,
+    selectedImage: SelectedImage,
+    normalizedPositionX: number,
+    normalizedPositionY: number
+): void {
+    // For background images, update the nested Image component
+    const imgWrapper = element.querySelector('[data-image-id]');
+    if (imgWrapper) {
+        const img = imgWrapper.querySelector('img');
+        if (img) {
+            img.src = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+    } else {
+        // Fallback: update background-image style if no nested Image component
+        const bgImage = window.getComputedStyle(element).backgroundImage;
+        if (bgImage && bgImage !== 'none') {
+            element.style.backgroundImage = `url(${imageUrl})`;
+        }
+    }
+    
+    // Store attributes on the background container
+    const semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id') || '';
+    element.setAttribute('data-background-image-id', semanticId);
+    element.setAttribute('data-edited-src', imageUrl);
+    element.setAttribute('data-brightness', selectedImage.brightness.toString());
+    element.setAttribute('data-blur', selectedImage.blur.toString());
+    element.setAttribute('data-scale', selectedImage.scale.toString());
+    element.setAttribute('data-position-x', normalizedPositionX.toString());
+    element.setAttribute('data-position-y', normalizedPositionY.toString());
+    
+    // Apply filter to the wrapper element
+    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+    } else {
+        element.style.filter = '';
+    }
+}
+
+/**
+ * Update regular image element
+ */
+function updateRegularImage(
+    element: HTMLElement,
+    imageUrl: string,
+    semanticId: string,
+    selectedImage: SelectedImage,
+    normalizedPositionX: number,
+    normalizedPositionY: number
+): void {
+    if (element.tagName === 'IMG') {
+        (element as HTMLImageElement).src = imageUrl;
+        element.setAttribute('data-edited-src', imageUrl);
+        element.setAttribute('data-image-id', semanticId);
+        element.setAttribute('data-brightness', selectedImage.brightness.toString());
+        element.setAttribute('data-blur', selectedImage.blur.toString());
+        
+        // Apply filter
+        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+        } else {
+            element.style.filter = '';
+        }
+    } else {
+        // Next.js Image wrapper - find the actual img element
+        const img = element.querySelector('img');
+        if (img) {
+            img.src = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+        element.setAttribute('data-image-id', semanticId);
+        element.setAttribute('data-edited-src', imageUrl);
+        element.setAttribute('data-brightness', selectedImage.brightness.toString());
+        element.setAttribute('data-blur', selectedImage.blur.toString());
+        element.setAttribute('data-scale', selectedImage.scale.toString());
+        element.setAttribute('data-position-x', normalizedPositionX.toString());
+        element.setAttribute('data-position-y', normalizedPositionY.toString());
+        
+        // Apply filter to wrapper
+        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+        } else {
+            element.style.filter = '';
+        }
+    }
+}
+
+/**
+ * Get filename from element for saving effects
+ */
+async function getFilenameFromElement(
+    semanticId: string,
+    selectedImage: SelectedImage
+): Promise<string> {
+    const filename = await getFilename(semanticId, selectedImage);
+    if (filename) return filename;
+
+    const { element } = selectedImage;
+    if (selectedImage.isBackground) {
+        const bgImage = window.getComputedStyle(element).backgroundImage;
+        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+        if (urlMatch && urlMatch[1]) {
+            return urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+        }
+    } else {
+        let imgSrc: string | null = null;
+        if (element instanceof HTMLImageElement && element.src) {
+            imgSrc = element.src;
+        } else {
+            const img = element.querySelector('img') as HTMLImageElement | null;
+            if (img?.src) {
+                imgSrc = img.src;
+            }
+        }
+        if (imgSrc) {
+            return imgSrc.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+        }
+    }
+    return semanticId;
+}
+
+/**
+ * Handle brightness change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBrightnessChange(
+    brightness: number,
+    selectedImage: SelectedImage,
+    setSelectedImage: (image: SelectedImage) => void,
+    saveImmediately: boolean = true
+): Promise<void> {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                      element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) return;
+
+    const currentFilter = element.style.filter || '';
+    const blurMatch = currentFilter.match(/blur\((\d+)px\)/);
+    const blur = blurMatch ? parseInt(blurMatch[1]) : selectedImage.blur;
+    
+    // Update the selectedImage state
+    setSelectedImage({
+        ...selectedImage,
+        brightness,
+    });
+    
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-brightness', brightness.toString());
+    
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}
+
+/**
+ * Handle blur change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBlurChange(
+    blur: number,
+    selectedImage: SelectedImage,
+    setSelectedImage: (image: SelectedImage) => void,
+    saveImmediately: boolean = true
+): Promise<void> {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') || 
+                      element.getAttribute('data-background-image-id');
+    
+    if (!semanticId) return;
+
+    const currentFilter = element.style.filter || '';
+    const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
+    const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
+    
+    // Update the selectedImage state
+    setSelectedImage({
+        ...selectedImage,
+        blur,
+    });
+    
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-blur', blur.toString());
+    
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}