@jhits/plugin-images 0.0.8 → 0.0.9

package/src/components/GlobalImageEditor/eventHandlers.ts

@@ -1,267 +0,0 @@
-/**
- * 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);
-    }
-}

package/src/components/GlobalImageEditor/imageDetection.d.ts

@@ -1,16 +0,0 @@
-/**
- * Image detection and parsing utilities
- */
-import type { SelectedImage } from './types';
-/**
- * Extract image source from element (handles Next.js Image wrapper)
- */
-export declare function getImageSource(element: HTMLElement, isBackground: boolean): {
-    currentSrc: string;
-    actualImgElement: HTMLImageElement | null;
-};
-/**
- * Parse image data from element to create SelectedImage
- */
-export declare function parseImageData(element: HTMLElement, id: string, currentBrightness?: number, currentBlur?: number): SelectedImage | null;
-//# sourceMappingURL=imageDetection.d.ts.map

package/src/components/GlobalImageEditor/imageDetection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"imageDetection.d.ts","sourceRoot":"","sources":["imageDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC7C,CAmCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC1B,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE,MAAM,EACV,iBAAiB,CAAC,EAAE,MAAM,EAC1B,WAAW,CAAC,EAAE,MAAM,GACrB,aAAa,GAAG,IAAI,CAoGtB"}

package/src/components/GlobalImageEditor/imageDetection.js

@@ -1,130 +0,0 @@
-/**
- * Image detection and parsing utilities
- */
-import { parseScaleFromTransform, parsePositionFromTransform } from './transformParsing';
-import { detectStyling } from './stylingDetection';
-/**
- * Extract image source from element (handles Next.js Image wrapper)
- */
-export function getImageSource(element, isBackground) {
-    let currentSrc = '';
-    let actualImgElement = null;
-    if (isBackground) {
-        // For background images, look for nested Image component
-        const imgWrapper = element.querySelector('[data-image-id]');
-        if (imgWrapper) {
-            actualImgElement = imgWrapper.querySelector('img') || null;
-            if (actualImgElement) {
-                currentSrc = actualImgElement.src;
-            }
-            else {
-                // Fallback: try to get from background-image style
-                const bgImage = window.getComputedStyle(element).backgroundImage;
-                const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                if (urlMatch && urlMatch[1]) {
-                    currentSrc = urlMatch[1];
-                }
-            }
-        }
-    }
-    else {
-        // For regular images, check if element is img or wrapper
-        if (element.tagName === 'IMG') {
-            actualImgElement = element;
-            currentSrc = actualImgElement.src;
-        }
-        else {
-            // Next.js Image wrapper - find the actual img element
-            actualImgElement = element.querySelector('img');
-            if (actualImgElement) {
-                currentSrc = actualImgElement.src;
-            }
-        }
-    }
-    return { currentSrc, actualImgElement };
-}
-/**
- * Parse image data from element to create SelectedImage
- */
-export function parseImageData(element, id, currentBrightness, currentBlur) {
-    const isBackground = element.hasAttribute('data-background-image-component') ||
-        element.hasAttribute('data-background-image-id');
-    const { currentSrc, actualImgElement } = getImageSource(element, isBackground);
-    if (!currentSrc) {
-        console.error('[GlobalImageEditor] No image source found for element');
-        return null;
-    }
-    // Get semantic ID
-    const semanticId = element.getAttribute('data-image-id') ||
-        element.getAttribute('data-background-image-id') ||
-        id;
-    // Parse brightness and blur from data attributes or filter style
-    let brightness = currentBrightness !== null && currentBrightness !== void 0 ? currentBrightness : 100;
-    let blur = currentBlur !== null && currentBlur !== void 0 ? currentBlur : 0;
-    const dataBrightness = element.getAttribute('data-brightness');
-    const dataBlur = element.getAttribute('data-blur');
-    if (dataBrightness) {
-        brightness = parseInt(dataBrightness);
-    }
-    else if (actualImgElement) {
-        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
-        if (filterStyle && filterStyle !== 'none') {
-            const brightnessMatch = filterStyle.match(/brightness\((\d+)%\)/);
-            if (brightnessMatch) {
-                brightness = parseInt(brightnessMatch[1]);
-            }
-        }
-    }
-    if (dataBlur) {
-        blur = parseInt(dataBlur);
-    }
-    else if (actualImgElement) {
-        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
-        if (filterStyle && filterStyle !== 'none') {
-            const blurMatch = filterStyle.match(/blur\((\d+)px\)/);
-            if (blurMatch) {
-                blur = parseInt(blurMatch[1]);
-            }
-        }
-    }
-    // Parse scale and position
-    let scale = 1.0;
-    let positionX = 0;
-    let positionY = 0;
-    const dataScale = element.getAttribute('data-scale');
-    const dataPositionX = element.getAttribute('data-position-x');
-    const dataPositionY = element.getAttribute('data-position-y');
-    if (dataScale) {
-        scale = parseFloat(dataScale);
-    }
-    else if (actualImgElement) {
-        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
-        if (imgTransform && imgTransform !== 'none') {
-            // Find container for baseScale calculation
-            const container = actualImgElement.closest('[class*="relative"]') || actualImgElement.parentElement;
-            scale = parseScaleFromTransform(imgTransform, container, actualImgElement);
-        }
-    }
-    if (dataPositionX) {
-        positionX = parseFloat(dataPositionX);
-    }
-    else if (actualImgElement) {
-        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
-        if (imgTransform && imgTransform !== 'none') {
-            const position = parsePositionFromTransform(imgTransform);
-            positionX = position.x;
-            positionY = position.y;
-        }
-    }
-    if (dataPositionY) {
-        positionY = parseFloat(dataPositionY);
-    }
-    // Detect styling
-    const styling = detectStyling(element, actualImgElement);
-    return Object.assign({ element, originalSrc: currentSrc, brightness,
-        blur,
-        scale,
-        positionX,
-        positionY,
-        isBackground }, styling);
-}

package/src/components/GlobalImageEditor/imageDetection.ts

@@ -1,160 +0,0 @@
-/**
- * Image detection and parsing utilities
- */
-
-import type { SelectedImage } from './types';
-import { parseScaleFromTransform, parsePositionFromTransform } from './transformParsing';
-import { detectStyling } from './stylingDetection';
-
-/**
- * Extract image source from element (handles Next.js Image wrapper)
- */
-export function getImageSource(element: HTMLElement, isBackground: boolean): {
-    currentSrc: string;
-    actualImgElement: HTMLImageElement | null;
-} {
-    let currentSrc = '';
-    let actualImgElement: HTMLImageElement | null = null;
-
-    if (isBackground) {
-        // For background images, look for nested Image component
-        const imgWrapper = element.querySelector('[data-image-id]');
-        if (imgWrapper) {
-            actualImgElement = imgWrapper.querySelector('img') || null;
-            if (actualImgElement) {
-                currentSrc = actualImgElement.src;
-            } else {
-                // Fallback: try to get from background-image style
-                const bgImage = window.getComputedStyle(element).backgroundImage;
-                const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-                if (urlMatch && urlMatch[1]) {
-                    currentSrc = urlMatch[1];
-                }
-            }
-        }
-    } else {
-        // For regular images, check if element is img or wrapper
-        if (element.tagName === 'IMG') {
-            actualImgElement = element as HTMLImageElement;
-            currentSrc = actualImgElement.src;
-        } else {
-            // Next.js Image wrapper - find the actual img element
-            actualImgElement = element.querySelector('img');
-            if (actualImgElement) {
-                currentSrc = actualImgElement.src;
-            }
-        }
-    }
-
-    return { currentSrc, actualImgElement };
-}
-
-/**
- * Parse image data from element to create SelectedImage
- */
-export function parseImageData(
-    element: HTMLElement,
-    id: string,
-    currentBrightness?: number,
-    currentBlur?: number
-): SelectedImage | null {
-    const isBackground = element.hasAttribute('data-background-image-component') || 
-                        element.hasAttribute('data-background-image-id');
-
-    const { currentSrc, actualImgElement } = getImageSource(element, isBackground);
-    
-    if (!currentSrc) {
-        console.error('[GlobalImageEditor] No image source found for element');
-        return null;
-    }
-
-    // Get semantic ID
-    const semanticId = element.getAttribute('data-image-id') || 
-                      element.getAttribute('data-background-image-id') || 
-                      id;
-
-    // Parse brightness and blur from data attributes or filter style
-    let brightness = currentBrightness ?? 100;
-    let blur = currentBlur ?? 0;
-
-    const dataBrightness = element.getAttribute('data-brightness');
-    const dataBlur = element.getAttribute('data-blur');
-    
-    if (dataBrightness) {
-        brightness = parseInt(dataBrightness);
-    } else if (actualImgElement) {
-        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
-        if (filterStyle && filterStyle !== 'none') {
-            const brightnessMatch = filterStyle.match(/brightness\((\d+)%\)/);
-            if (brightnessMatch) {
-                brightness = parseInt(brightnessMatch[1]);
-            }
-        }
-    }
-
-    if (dataBlur) {
-        blur = parseInt(dataBlur);
-    } else if (actualImgElement) {
-        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
-        if (filterStyle && filterStyle !== 'none') {
-            const blurMatch = filterStyle.match(/blur\((\d+)px\)/);
-            if (blurMatch) {
-                blur = parseInt(blurMatch[1]);
-            }
-        }
-    }
-
-    // Parse scale and position
-    let scale = 1.0;
-    let positionX = 0;
-    let positionY = 0;
-
-    const dataScale = element.getAttribute('data-scale');
-    const dataPositionX = element.getAttribute('data-position-x');
-    const dataPositionY = element.getAttribute('data-position-y');
-
-    if (dataScale) {
-        scale = parseFloat(dataScale);
-    } else if (actualImgElement) {
-        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
-        if (imgTransform && imgTransform !== 'none') {
-            // Find container for baseScale calculation
-            const container = actualImgElement.closest('[class*="relative"]') || actualImgElement.parentElement;
-            scale = parseScaleFromTransform(
-                imgTransform,
-                container as HTMLElement | null,
-                actualImgElement
-            );
-        }
-    }
-
-    if (dataPositionX) {
-        positionX = parseFloat(dataPositionX);
-    } else if (actualImgElement) {
-        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
-        if (imgTransform && imgTransform !== 'none') {
-            const position = parsePositionFromTransform(imgTransform);
-            positionX = position.x;
-            positionY = position.y;
-        }
-    }
-
-    if (dataPositionY) {
-        positionY = parseFloat(dataPositionY);
-    }
-
-    // Detect styling
-    const styling = detectStyling(element, actualImgElement);
-
-    return {
-        element,
-        originalSrc: currentSrc,
-        brightness,
-        blur,
-        scale,
-        positionX,
-        positionY,
-        isBackground,
-        ...styling,
-    };
-}

package/src/components/GlobalImageEditor/imageSetup.d.ts

@@ -1,9 +0,0 @@
-/**
- * Image setup and click handlers
- */
-import type { SelectedImage } from './types';
-/**
- * Setup click handlers and hover effects for all images
- */
-export declare function setupImageHandlers(onImageClick: (image: SelectedImage) => void): () => void;
-//# sourceMappingURL=imageSetup.d.ts.map

package/src/components/GlobalImageEditor/imageSetup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"imageSetup.d.ts","sourceRoot":"","sources":["imageSetup.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,wBAAgB,kBAAkB,CAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAC7C,MAAM,IAAI,CAmSZ"}