@jhits/plugin-images 0.0.4 → 0.0.6

package/src/components/index.ts

@@ -3,5 +3,8 @@
  */
 
 export { ImagePicker } from './ImagePicker';
+export { ImageEditor } from './ImageEditor';
+export { ImageEffectsPanel } from './ImageEffectsPanel';
+export { ImageBrowserModal } from './ImageBrowserModal';
 export type { ImagePickerProps } from '../types';
 

package/src/hooks/useImagePicker.ts

@@ -0,0 +1,344 @@
+/**
+ * Hook for Image Picker Logic
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import type { ImageMetadata } from '../types';
+
+export interface UseImagePickerOptions {
+    value?: string;
+    images: ImageMetadata[];
+}
+
+export function useImagePicker({ value, images }: UseImagePickerOptions) {
+    const [selectedImage, setSelectedImage] = useState<ImageMetadata | null>(null);
+    const [uploading, setUploading] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const lastResolvedValueRef = useRef<string | undefined>(undefined);
+    const isResolvingRef = useRef(false);
+    const lastImagesRef = useRef<string>('');
+
+    // Find selected image from value (can be ID or URL)
+    useEffect(() => {
+        // Create a stable reference for images array to detect actual changes
+        const imagesKey = JSON.stringify(images.map(img => ({ id: img.id, url: img.url })));
+        
+        // Prevent infinite loops by checking if we're already resolving or if value and images haven't changed
+        if (isResolvingRef.current || (lastResolvedValueRef.current === value && lastImagesRef.current === imagesKey)) {
+            return;
+        }
+        
+        lastImagesRef.current = imagesKey;
+
+        if (!value) {
+            if (selectedImage !== null) {
+                setSelectedImage(null);
+            }
+            lastResolvedValueRef.current = value;
+            return;
+        }
+
+        isResolvingRef.current = true;
+        const resolveImage = async () => {
+            // Normalize the value - extract filename if it's a URL
+            const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
+            const isRelativeUrl = value.startsWith('/');
+            const isUrl = isFullUrl || isRelativeUrl;
+            
+            // Extract filename from URL if it's a URL
+            let filenameFromUrl: string | null = null;
+            let imageIdToResolve = value;
+            
+            if (isUrl) {
+                const urlParts = value.split('/');
+                filenameFromUrl = urlParts[urlParts.length - 1]?.split('?')[0] || null;
+                // If it's a full URL, try to resolve using the filename instead
+                if (isFullUrl && filenameFromUrl) {
+                    imageIdToResolve = filenameFromUrl;
+                }
+            }
+            
+            // First, try to find by ID (preferred method)
+            let found = images.find(img => img.id === value || img.id === imageIdToResolve);
+            
+            // If not found by ID, try to find by URL
+            if (!found) {
+                found = images.find(img => img.url === value);
+            }
+            
+            // If still not found, try to match by filename extracted from URL
+            if (!found && filenameFromUrl) {
+                found = images.find(img => img.id === filenameFromUrl || img.filename === filenameFromUrl);
+            }
+            
+            if (found) {
+                // Only update if the image is actually different
+                setSelectedImage(prev => {
+                    if (prev?.id === found.id && prev?.url === found.url) {
+                        return prev;
+                    }
+                    return found;
+                });
+            } else {
+                // If value is already a full URL, use it directly
+                if (isFullUrl) {
+                    const newImage = {
+                        id: value,
+                        filename: filenameFromUrl || value,
+                        url: value, // Use the full URL as-is
+                        size: 0,
+                        mimeType: 'image/jpeg',
+                        uploadedAt: new Date().toISOString(),
+                    };
+                    setSelectedImage(prev => {
+                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                            return prev;
+                        }
+                        return newImage;
+                    });
+                    lastResolvedValueRef.current = value;
+                    isResolvingRef.current = false;
+                    return;
+                }
+                
+                // If value is a relative URL, use it directly
+                if (isRelativeUrl) {
+                    const newImage = {
+                        id: value,
+                        filename: filenameFromUrl || value,
+                        url: value, // Use the relative URL as-is
+                        size: 0,
+                        mimeType: 'image/jpeg',
+                        uploadedAt: new Date().toISOString(),
+                    };
+                    setSelectedImage(prev => {
+                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                            return prev;
+                        }
+                        return newImage;
+                    });
+                    lastResolvedValueRef.current = value;
+                    isResolvingRef.current = false;
+                    return;
+                }
+                
+                // Check if value looks like a filename (has extension or starts with digits)
+                const isLikelyPath = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(value) || /^\d+-/.test(value);
+                
+                if (isLikelyPath) {
+                    // It's likely a filename, create image object directly
+                    const newImage = {
+                        id: value,
+                        filename: value,
+                        url: `/api/uploads/${value}`,
+                        size: 0,
+                        mimeType: 'image/jpeg',
+                        uploadedAt: new Date().toISOString(),
+                    };
+                    setSelectedImage(prev => {
+                        if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                            return prev;
+                        }
+                        return newImage;
+                    });
+                    lastResolvedValueRef.current = value;
+                    isResolvingRef.current = false;
+                } else {
+                    // It might be a semantic ID, try to resolve via API
+                    // Use the extracted ID (filename) if value was a URL, otherwise use value
+                    try {
+                        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageIdToResolve)}`);
+                        if (response.ok) {
+                            const data = await response.json();
+                            // Normalize the URL - ensure it's a proper URL
+                            let imageUrl: string;
+                            if (data.url) {
+                                // If API returns a URL, use it (but check if it's already a full URL)
+                                if (data.url.startsWith('http://') || data.url.startsWith('https://')) {
+                                    imageUrl = data.url;
+                                } else if (data.url.startsWith('/')) {
+                                    imageUrl = data.url;
+                                } else {
+                                    // Relative path without leading slash
+                                    imageUrl = `/api/uploads/${data.url}`;
+                                }
+                            } else if (data.filename) {
+                                // Use filename to construct URL
+                                imageUrl = `/api/uploads/${data.filename}`;
+                            } else {
+                                // Fallback: if original value was a URL, use it; otherwise construct
+                                imageUrl = isFullUrl ? value : (isRelativeUrl ? value : `/api/uploads/${value}`);
+                            }
+                            
+                            const newImage = {
+                                id: value,
+                                filename: data.filename || filenameFromUrl || value,
+                                url: imageUrl,
+                                size: 0,
+                                mimeType: 'image/jpeg',
+                                uploadedAt: new Date().toISOString(),
+                            };
+                            setSelectedImage(prev => {
+                                if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                                    return prev;
+                                }
+                                return newImage;
+                            });
+                            lastResolvedValueRef.current = value;
+                            isResolvingRef.current = false;
+                        } else {
+                            // API resolution failed - check if it's a semantic ID or actual filename
+                            const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
+                            
+                            if (!isLikelyFilename) {
+                                // It's a semantic ID that couldn't be resolved - clear selection
+                                // This prevents showing broken URLs like /api/uploads/blog-featured-...
+                                setSelectedImage(null);
+                                lastResolvedValueRef.current = value;
+                                isResolvingRef.current = false;
+                                return;
+                            }
+                            
+                            // It's a filename, create fallback object
+                            const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
+                            const isRelativeUrl = value.startsWith('/');
+                            
+                            let imageUrl: string;
+                            if (isFullUrl) {
+                                // Already a full URL, use as-is
+                                imageUrl = value;
+                            } else if (isRelativeUrl) {
+                                // Already a relative URL starting with /, use as-is
+                                imageUrl = value;
+                            } else {
+                                // It's a filename, construct the URL
+                                imageUrl = `/api/uploads/${value}`;
+                            }
+                            
+                            const urlParts = value.split('/');
+                            const filename = urlParts[urlParts.length - 1]?.split('?')[0] || value;
+                            
+                            const newImage = {
+                                id: value,
+                                filename: filename,
+                                url: imageUrl,
+                                size: 0,
+                                mimeType: 'image/jpeg',
+                                uploadedAt: new Date().toISOString(),
+                            };
+                            setSelectedImage(prev => {
+                                if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                                    return prev;
+                                }
+                                return newImage;
+                            });
+                            lastResolvedValueRef.current = value;
+                            isResolvingRef.current = false;
+                        }
+                    } catch (error) {
+                        // API call failed - check if it's a semantic ID or actual filename
+                        const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
+                        
+                        if (!isLikelyFilename) {
+                            // It's a semantic ID that couldn't be resolved - clear selection
+                            // This prevents showing broken URLs like /api/uploads/blog-featured-...
+                            setSelectedImage(null);
+                            lastResolvedValueRef.current = value;
+                            isResolvingRef.current = false;
+                            return;
+                        }
+                        
+                        // It's a filename, create fallback object
+                        const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
+                        const isRelativeUrl = value.startsWith('/');
+                        
+                        let imageUrl: string;
+                        if (isFullUrl) {
+                            // Already a full URL, use as-is
+                            imageUrl = value;
+                        } else if (isRelativeUrl) {
+                            // Already a relative URL starting with /, use as-is
+                            imageUrl = value;
+                        } else {
+                            // It's a filename, construct the URL
+                            imageUrl = `/api/uploads/${value}`;
+                        }
+                        
+                        const urlParts = value.split('/');
+                        const filename = urlParts[urlParts.length - 1]?.split('?')[0] || value;
+                        
+                        const newImage = {
+                            id: value,
+                            filename: filename,
+                            url: imageUrl,
+                            size: 0,
+                            mimeType: 'image/jpeg',
+                            uploadedAt: new Date().toISOString(),
+                        };
+                        setSelectedImage(prev => {
+                            if (prev?.id === newImage.id && prev?.url === newImage.url) {
+                                return prev;
+                            }
+                            return newImage;
+                        });
+                        lastResolvedValueRef.current = value;
+                        isResolvingRef.current = false;
+                    }
+                }
+            }
+        };
+
+        resolveImage().catch(() => {
+            // Error already handled in catch block
+            isResolvingRef.current = false;
+        });
+    }, [value, images]);
+
+    // Handle file upload
+    const handleFileSelect = async (e?: React.ChangeEvent<HTMLInputElement> | { target: { files: File[] | null } }) => {
+        const file = e?.target?.files?.[0];
+        if (!file) return null;
+
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await fetch('/api/plugin-images/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            const data = await response.json();
+            
+            if (data.success && data.image) {
+                // Select the newly uploaded image
+                setSelectedImage(data.image);
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+                return data.image;
+            } else {
+                alert(data.error || 'Failed to upload image');
+                return null;
+            }
+        } catch (error) {
+            console.error('Upload error:', error);
+            alert('Failed to upload image');
+            return null;
+        } finally {
+            setUploading(false);
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+
+    return {
+        selectedImage,
+        setSelectedImage,
+        uploading,
+        fileInputRef,
+        handleFileSelect,
+    };
+}

package/src/types/index.ts

@@ -52,9 +52,33 @@ export interface ImagePickerProps {
     brightness?: number;
     /** Current blur value (0-20) */
     blur?: number;
+    /** Current scale value (0.1-3.0, 1.0 = normal) */
+    scale?: number;
+    /** Current X position offset (-100 to 100, 0 = center) */
+    positionX?: number;
+    /** Current Y position offset (-100 to 100, 0 = center) */
+    positionY?: number;
+    /** Aspect ratio for preview/editor (e.g., "4/5", "3/4", "16/9", "1/1") */
+    aspectRatio?: string;
+    /** Border radius class (e.g., "rounded-xl", "rounded-3xl") */
+    borderRadius?: string;
+    /** Object fit style (e.g., "cover", "contain") */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Object position (e.g., "center", "top", "bottom") */
+    objectPosition?: string;
     /** Callback when brightness changes */
     onBrightnessChange?: (brightness: number) => void;
     /** Callback when blur changes */
     onBlurChange?: (blur: number) => void;
+    /** Callback when scale changes */
+    onScaleChange?: (scale: number) => void;
+    /** Callback when X position changes */
+    onPositionXChange?: (positionX: number) => void;
+    /** Callback when Y position changes */
+    onPositionYChange?: (positionY: number) => void;
+    /** Callback when editor "Done" button is clicked - triggers immediate save */
+    onEditorSave?: (scale: number, positionX: number, positionY: number, brightness?: number, blur?: number) => void;
+    /** Automatically open the editor when component mounts (useful for modal scenarios) */
+    autoOpenEditor?: boolean;
 }
 

package/src/utils/transforms.ts

@@ -0,0 +1,54 @@
+/**
+ * Image Transform Utilities
+ */
+
+export interface ImageTransformOptions {
+    scale: number;
+    positionX: number;
+    positionY: number;
+    baseScale?: number; 
+}
+
+/**
+ * Calculates the CSS transform string
+ * Order: Center -> Scale -> Translate (Offset)
+ * 
+ * Position values are stored as percentages of the CONTAINER, not the image.
+ * This makes them consistent across different container sizes.
+ * 
+ * IMPORTANT: The image uses width: auto; height: auto with minWidth: 100%; minHeight: 100%
+ * This allows the image to maintain its natural aspect ratio while ensuring it covers the container.
+ * baseScale handles the "fitting" to ensure the image is large enough to fill the container.
+ * 
+ * Applying SCALE before POSITION makes the position relative to the visual size you see,
+ * not the original raw file size. This ensures consistent positioning across different scales.
+ */
+export function getImageTransform(
+    options: ImageTransformOptions,
+    needsCentering: boolean = false,
+    caller?: string
+): string {
+    const { scale, positionX, positionY, baseScale = 1 } = options;
+    const totalScale = baseScale * scale;
+
+    // 1. Center the image (if using top:50% left:50%)
+    const center = needsCentering ? 'translate(-50%, -50%)' : '';
+    
+    // 2. Apply the scaling (base x zoom) FIRST
+    // This ensures the position offset is relative to the scaled visual size
+    const zoom = `scale(${totalScale})`;
+    
+    // 3. Apply the offset (positionX/Y) AFTER scaling
+    // Position values are stored as percentage of CONTAINER
+    // Since scale is applied first, the translate is relative to the scaled visual size
+    const offset = `translate(${positionX}%, ${positionY}%)`;
+
+    // Combining them: Center first, then scale, then move
+    // Order matters: scale before translate ensures position is relative to visual size
+    return `${center} ${zoom} ${offset}`.trim();
+}
+
+export function getImageFilter(brightness: number = 100, blur: number = 0): string | undefined {
+    if (brightness === 100 && blur === 0) return undefined;
+    return `brightness(${brightness}%) blur(${blur}px)`;
+}