@jhits/plugin-images 0.0.7 → 0.0.9

package/src/components/GlobalImageEditor/saveLogic.js

@@ -1,99 +0,0 @@
-/**
- * Save logic for image transforms and effects
- */
-/**
- * Normalize position values - convert -50% (centering value) to 0
- */
-export function normalizePosition(position) {
-    return position === -50 ? 0 : position;
-}
-/**
- * Get filename from element or API
- */
-export async function getFilename(semanticId, selectedImage) {
-    var _a, _b;
-    try {
-        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(semanticId)}`);
-        if (response.ok) {
-            const data = await response.json();
-            return data.filename || semanticId;
-        }
-        else {
-            // If not found, try to extract from element
-            const { element } = selectedImage;
-            if (selectedImage.isBackground) {
-                const imgWrapper = element.querySelector('[data-image-id]');
-                if (imgWrapper) {
-                    const img = imgWrapper.querySelector('img');
-                    if (img && img.src) {
-                        return ((_a = img.src.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || semanticId;
-                    }
-                }
-            }
-            else {
-                const img = element.tagName === 'IMG' ? element : element.querySelector('img');
-                if (img && img.src) {
-                    return ((_b = img.src.split('/api/uploads/')[1]) === null || _b === void 0 ? void 0 : _b.split('?')[0]) || semanticId;
-                }
-            }
-        }
-    }
-    catch (error) {
-        console.error('Failed to get filename:', error);
-    }
-    return null;
-}
-/**
- * Save image transform to API
- */
-export async function saveTransformToAPI(semanticId, filename, scale, positionX, positionY, brightness, blur) {
-    try {
-        const response = await fetch('/api/plugin-images/resolve', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                id: semanticId,
-                filename,
-                brightness,
-                blur,
-                scale,
-                positionX: normalizePosition(positionX),
-                positionY: normalizePosition(positionY),
-            }),
-        });
-        if (response.ok) {
-            // Dispatch event to notify Image components
-            window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-                detail: {
-                    id: semanticId,
-                    filename,
-                    brightness,
-                    blur,
-                    scale,
-                    positionX: normalizePosition(positionX),
-                    positionY: normalizePosition(positionY),
-                }
-            }));
-            return true;
-        }
-    }
-    catch (error) {
-        console.error('Failed to save transform:', error);
-    }
-    return false;
-}
-/**
- * Flush pending save immediately
- */
-export async function flushPendingSave(pending, selectedImage) {
-    const normalizedPositionX = normalizePosition(pending.positionX);
-    const normalizedPositionY = normalizePosition(pending.positionY);
-    await saveTransformToAPI(pending.semanticId, pending.filename, pending.scale, normalizedPositionX, normalizedPositionY, selectedImage.brightness, selectedImage.blur);
-}
-/**
- * Save image transform with debouncing support
- * This is a wrapper that handles the debouncing logic
- */
-export async function saveImageTransform(semanticId, filename, scale, positionX, positionY, brightness, blur) {
-    await saveTransformToAPI(semanticId, filename, scale, positionX, positionY, brightness, blur);
-}

package/src/components/GlobalImageEditor/saveLogic.ts

@@ -1,133 +0,0 @@
-/**
- * Save logic for image transforms and effects
- */
-
-import type { SelectedImage, PendingTransform } from './types';
-
-/**
- * Normalize position values - convert -50% (centering value) to 0
- */
-export function normalizePosition(position: number): number {
-    return position === -50 ? 0 : position;
-}
-
-/**
- * Get filename from element or API
- */
-export async function getFilename(
-    semanticId: string,
-    selectedImage: SelectedImage
-): Promise<string | null> {
-    try {
-        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(semanticId)}`);
-        if (response.ok) {
-            const data = await response.json();
-            return data.filename || semanticId;
-        } else {
-            // If not found, try to extract from element
-            const { element } = selectedImage;
-            if (selectedImage.isBackground) {
-                const imgWrapper = element.querySelector('[data-image-id]');
-                if (imgWrapper) {
-                    const img = imgWrapper.querySelector('img');
-                    if (img && img.src) {
-                        return img.src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                    }
-                }
-            } else {
-                const img = element.tagName === 'IMG' ? element as HTMLImageElement : element.querySelector('img');
-                if (img && img.src) {
-                    return img.src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
-                }
-            }
-        }
-    } catch (error) {
-        console.error('Failed to get filename:', error);
-    }
-    return null;
-}
-
-/**
- * Save image transform to API
- */
-export async function saveTransformToAPI(
-    semanticId: string,
-    filename: string,
-    scale: number,
-    positionX: number,
-    positionY: number,
-    brightness: number,
-    blur: number
-): Promise<boolean> {
-    try {
-        const response = await fetch('/api/plugin-images/resolve', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ 
-                id: semanticId, 
-                filename,
-                brightness,
-                blur,
-                scale,
-                positionX: normalizePosition(positionX),
-                positionY: normalizePosition(positionY),
-            }),
-        });
-        
-        if (response.ok) {
-            // Dispatch event to notify Image components
-            window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-                detail: { 
-                    id: semanticId, 
-                    filename, 
-                    brightness, 
-                    blur,
-                    scale,
-                    positionX: normalizePosition(positionX),
-                    positionY: normalizePosition(positionY),
-                }
-            }));
-            return true;
-        }
-    } catch (error) {
-        console.error('Failed to save transform:', error);
-    }
-    return false;
-}
-
-/**
- * Flush pending save immediately
- */
-export async function flushPendingSave(
-    pending: PendingTransform,
-    selectedImage: SelectedImage
-): Promise<void> {
-    const normalizedPositionX = normalizePosition(pending.positionX);
-    const normalizedPositionY = normalizePosition(pending.positionY);
-
-    await saveTransformToAPI(
-        pending.semanticId,
-        pending.filename,
-        pending.scale,
-        normalizedPositionX,
-        normalizedPositionY,
-        selectedImage.brightness,
-        selectedImage.blur
-    );
-}
-
-/**
- * Save image transform with debouncing support
- * This is a wrapper that handles the debouncing logic
- */
-export async function saveImageTransform(
-    semanticId: string,
-    filename: string,
-    scale: number,
-    positionX: number,
-    positionY: number,
-    brightness: number,
-    blur: number
-): Promise<void> {
-    await saveTransformToAPI(semanticId, filename, scale, positionX, positionY, brightness, blur);
-}

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

@@ -1,9 +0,0 @@
-/**
- * Utilities for detecting styling from DOM elements
- */
-import type { DetectedStyling } from './types';
-/**
- * Detect styling properties from an element and its parent containers
- */
-export declare function detectStyling(element: HTMLElement, imgElement: HTMLImageElement | null): DetectedStyling;
-//# sourceMappingURL=stylingDetection.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"stylingDetection.d.ts","sourceRoot":"","sources":["stylingDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,wBAAgB,aAAa,CACzB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,gBAAgB,GAAG,IAAI,GACpC,eAAe,CA6GjB"}

package/src/components/GlobalImageEditor/stylingDetection.js

@@ -1,110 +0,0 @@
-/**
- * Utilities for detecting styling from DOM elements
- */
-/**
- * Detect styling properties from an element and its parent containers
- */
-export function detectStyling(element, imgElement) {
-    // Find the container element (could be the element itself or a parent)
-    let container = element;
-    let parent = element.parentElement;
-    // Look for styling in parent containers (up to 3 levels)
-    for (let i = 0; i < 3 && parent; i++) {
-        const classes = parent.className || '';
-        const computedStyle = window.getComputedStyle(parent);
-        // Check for rounded-full (circular)
-        if (classes.includes('rounded-full')) {
-            container = parent;
-            break;
-        }
-        parent = parent.parentElement;
-    }
-    const containerClasses = container.className || '';
-    const containerStyle = window.getComputedStyle(container);
-    const imgStyle = imgElement ? window.getComputedStyle(imgElement) : null;
-    // Detect border radius
-    let borderRadius = 'rounded-xl'; // default
-    if (containerClasses.includes('rounded-full')) {
-        borderRadius = 'rounded-full';
-    }
-    else if (containerClasses.includes('rounded-3xl')) {
-        borderRadius = 'rounded-3xl';
-    }
-    else if (containerClasses.includes('rounded-2xl')) {
-        borderRadius = 'rounded-2xl';
-    }
-    else if (containerClasses.includes('rounded-xl')) {
-        borderRadius = 'rounded-xl';
-    }
-    else if (containerClasses.includes('rounded-lg')) {
-        borderRadius = 'rounded-lg';
-    }
-    // Detect aspect ratio
-    let aspectRatio = '16/9'; // default
-    // First check the container's computed style
-    const aspectRatioStyle = containerStyle.aspectRatio;
-    if (aspectRatioStyle && aspectRatioStyle !== 'auto') {
-        // Convert CSS aspect-ratio (e.g., "1 / 1") to our format ("1/1")
-        aspectRatio = aspectRatioStyle.replace(/\s+/g, '');
-    }
-    else {
-        // Check for Tailwind aspect ratio classes in container or parents
-        let currentElement = container;
-        let foundAspectRatio = false;
-        // Check up to 3 parent levels for aspect ratio
-        for (let i = 0; i < 3 && currentElement && !foundAspectRatio; i++) {
-            const classes = currentElement.className || '';
-            const computedStyle = window.getComputedStyle(currentElement);
-            // Check computed style first
-            if (computedStyle.aspectRatio && computedStyle.aspectRatio !== 'auto') {
-                aspectRatio = computedStyle.aspectRatio.replace(/\s+/g, '');
-                foundAspectRatio = true;
-                break;
-            }
-            // Check for Tailwind aspect ratio classes (aspect-*, aspect-square, aspect-video, etc.)
-            const aspectMatch = classes.match(/aspect-(\d+\/\d+)|aspect-square|aspect-video/);
-            if (aspectMatch) {
-                if (aspectMatch[1]) {
-                    // Matched aspect-4/5, aspect-16/9, etc.
-                    aspectRatio = aspectMatch[1];
-                }
-                else if (aspectMatch[0] === 'aspect-square') {
-                    aspectRatio = '1/1';
-                }
-                else if (aspectMatch[0] === 'aspect-video') {
-                    aspectRatio = '16/9';
-                }
-                foundAspectRatio = true;
-                break;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        // Fallback checks
-        if (!foundAspectRatio) {
-            if (containerClasses.includes('rounded-full')) {
-                // Circular images are typically 1:1
-                aspectRatio = '1/1';
-            }
-            else {
-                // Try to detect from size classes
-                if (containerClasses.includes('size-') || containerClasses.match(/w-\d+.*h-\d+/)) {
-                    aspectRatio = '1/1';
-                }
-            }
-        }
-    }
-    // Detect object-fit
-    let objectFit = 'cover';
-    if (imgStyle) {
-        const objectFitValue = imgStyle.objectFit || containerStyle.objectFit;
-        if (objectFitValue && ['cover', 'contain', 'fill', 'none', 'scale-down'].includes(objectFitValue)) {
-            objectFit = objectFitValue;
-        }
-    }
-    // Detect object-position
-    let objectPosition = 'center';
-    if (imgStyle) {
-        objectPosition = imgStyle.objectPosition || containerStyle.objectPosition || 'center';
-    }
-    return { aspectRatio, borderRadius, objectFit, objectPosition };
-}

package/src/components/GlobalImageEditor/stylingDetection.ts

@@ -1,122 +0,0 @@
-/**
- * Utilities for detecting styling from DOM elements
- */
-
-import type { DetectedStyling } from './types';
-
-/**
- * Detect styling properties from an element and its parent containers
- */
-export function detectStyling(
-    element: HTMLElement,
-    imgElement: HTMLImageElement | null
-): DetectedStyling {
-    // Find the container element (could be the element itself or a parent)
-    let container = element;
-    let parent = element.parentElement;
-    
-    // Look for styling in parent containers (up to 3 levels)
-    for (let i = 0; i < 3 && parent; i++) {
-        const classes = parent.className || '';
-        const computedStyle = window.getComputedStyle(parent);
-        
-        // Check for rounded-full (circular)
-        if (classes.includes('rounded-full')) {
-            container = parent;
-            break;
-        }
-        parent = parent.parentElement;
-    }
-    
-    const containerClasses = container.className || '';
-    const containerStyle = window.getComputedStyle(container);
-    const imgStyle = imgElement ? window.getComputedStyle(imgElement) : null;
-    
-    // Detect border radius
-    let borderRadius = 'rounded-xl'; // default
-    if (containerClasses.includes('rounded-full')) {
-        borderRadius = 'rounded-full';
-    } else if (containerClasses.includes('rounded-3xl')) {
-        borderRadius = 'rounded-3xl';
-    } else if (containerClasses.includes('rounded-2xl')) {
-        borderRadius = 'rounded-2xl';
-    } else if (containerClasses.includes('rounded-xl')) {
-        borderRadius = 'rounded-xl';
-    } else if (containerClasses.includes('rounded-lg')) {
-        borderRadius = 'rounded-lg';
-    }
-    
-    // Detect aspect ratio
-    let aspectRatio = '16/9'; // default
-    
-    // First check the container's computed style
-    const aspectRatioStyle = containerStyle.aspectRatio;
-    if (aspectRatioStyle && aspectRatioStyle !== 'auto') {
-        // Convert CSS aspect-ratio (e.g., "1 / 1") to our format ("1/1")
-        aspectRatio = aspectRatioStyle.replace(/\s+/g, '');
-    } else {
-        // Check for Tailwind aspect ratio classes in container or parents
-        let currentElement: HTMLElement | null = container;
-        let foundAspectRatio = false;
-        
-        // Check up to 3 parent levels for aspect ratio
-        for (let i = 0; i < 3 && currentElement && !foundAspectRatio; i++) {
-            const classes = currentElement.className || '';
-            const computedStyle = window.getComputedStyle(currentElement);
-            
-            // Check computed style first
-            if (computedStyle.aspectRatio && computedStyle.aspectRatio !== 'auto') {
-                aspectRatio = computedStyle.aspectRatio.replace(/\s+/g, '');
-                foundAspectRatio = true;
-                break;
-            }
-            
-            // Check for Tailwind aspect ratio classes (aspect-*, aspect-square, aspect-video, etc.)
-            const aspectMatch = classes.match(/aspect-(\d+\/\d+)|aspect-square|aspect-video/);
-            if (aspectMatch) {
-                if (aspectMatch[1]) {
-                    // Matched aspect-4/5, aspect-16/9, etc.
-                    aspectRatio = aspectMatch[1];
-                } else if (aspectMatch[0] === 'aspect-square') {
-                    aspectRatio = '1/1';
-                } else if (aspectMatch[0] === 'aspect-video') {
-                    aspectRatio = '16/9';
-                }
-                foundAspectRatio = true;
-                break;
-            }
-            
-            currentElement = currentElement.parentElement;
-        }
-        
-        // Fallback checks
-        if (!foundAspectRatio) {
-            if (containerClasses.includes('rounded-full')) {
-                // Circular images are typically 1:1
-                aspectRatio = '1/1';
-            } else {
-                // Try to detect from size classes
-                if (containerClasses.includes('size-') || containerClasses.match(/w-\d+.*h-\d+/)) {
-                    aspectRatio = '1/1';
-                }
-            }
-        }
-    }
-    
-    // Detect object-fit
-    let objectFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
-    if (imgStyle) {
-        const objectFitValue = imgStyle.objectFit || containerStyle.objectFit;
-        if (objectFitValue && ['cover', 'contain', 'fill', 'none', 'scale-down'].includes(objectFitValue)) {
-            objectFit = objectFitValue as 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-        }
-    }
-    
-    // Detect object-position
-    let objectPosition = 'center';
-    if (imgStyle) {
-        objectPosition = imgStyle.objectPosition || containerStyle.objectPosition || 'center';
-    }
-    
-    return { aspectRatio, borderRadius, objectFit, objectPosition };
-}

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

@@ -1,16 +0,0 @@
-/**
- * Utilities for parsing CSS transforms to extract scale and position values
- */
-/**
- * Parse scale from CSS transform string
- */
-export declare function parseScaleFromTransform(transform: string, container: HTMLElement | null, imgElement: HTMLImageElement | null): number;
-/**
- * Parse position (X, Y) from CSS transform string
- * Returns container-relative percentages
- */
-export declare function parsePositionFromTransform(transform: string): {
-    x: number;
-    y: number;
-};
-//# sourceMappingURL=transformParsing.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"transformParsing.d.ts","sourceRoot":"","sources":["transformParsing.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,uBAAuB,CACnC,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,UAAU,EAAE,gBAAgB,GAAG,IAAI,GACpC,MAAM,CA+BR;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAkCtF"}

package/src/components/GlobalImageEditor/transformParsing.js

@@ -1,68 +0,0 @@
-/**
- * Utilities for parsing CSS transforms to extract scale and position values
- */
-/**
- * Parse scale from CSS transform string
- */
-export function parseScaleFromTransform(transform, container, imgElement) {
-    const scaleMatch = transform.match(/scale\(([\d.]+)\)/);
-    if (!scaleMatch)
-        return 1.0;
-    const totalScale = parseFloat(scaleMatch[1]);
-    // If totalScale is very small (< 0.1), it's likely wrong
-    if (totalScale < 0.1) {
-        return 1.0;
-    }
-    // Calculate baseScale to extract the actual user scale
-    if (container && imgElement && imgElement.naturalWidth > 0 && imgElement.naturalHeight > 0) {
-        const containerWidth = container.clientWidth || container.offsetWidth;
-        const containerHeight = container.clientHeight || container.offsetHeight;
-        if (containerWidth > 0 && containerHeight > 0) {
-            const widthRatio = containerWidth / imgElement.naturalWidth;
-            const heightRatio = containerHeight / imgElement.naturalHeight;
-            const baseScale = Math.max(widthRatio, heightRatio);
-            if (baseScale > 0 && baseScale < 1) {
-                // Extract the actual scale by dividing totalScale by baseScale
-                const scale = totalScale / baseScale;
-                // Clamp to valid range
-                return Math.max(0.1, Math.min(5.0, scale));
-            }
-        }
-    }
-    return 1.0;
-}
-/**
- * Parse position (X, Y) from CSS transform string
- * Returns container-relative percentages
- */
-export function parsePositionFromTransform(transform) {
-    // Match all translate() calls - skip the first one if it's the centering translate(-50%, -50%)
-    const allTranslates = transform.matchAll(/translate\(([-\d.]+)%,?\s*([-\d.]+)?%?\)/g);
-    const translateArray = Array.from(allTranslates);
-    let positionX = 0;
-    let positionY = 0;
-    if (translateArray.length > 1) {
-        // Use the second translate (the position offset)
-        const positionTranslate = translateArray[1];
-        const appliedX = parseFloat(positionTranslate[1] || '0');
-        const appliedY = parseFloat(positionTranslate[2] || '0');
-        // Only use if it's not the centering translate (safety check)
-        if (appliedX !== -50 || appliedY !== -50) {
-            // With new system, applied value IS the stored value (container-relative)
-            positionX = appliedX;
-            positionY = appliedY;
-        }
-    }
-    else if (translateArray.length === 1) {
-        // Only one translate - check if it's the centering one
-        const translate = translateArray[0];
-        const appliedX = parseFloat(translate[1] || '0');
-        const appliedY = parseFloat(translate[2] || '0');
-        // If it's not the centering translate, use it as position
-        if (appliedX !== -50 || appliedY !== -50) {
-            positionX = appliedX;
-            positionY = appliedY;
-        }
-    }
-    return { x: positionX, y: positionY };
-}

package/src/components/GlobalImageEditor/transformParsing.ts

@@ -1,83 +0,0 @@
-/**
- * Utilities for parsing CSS transforms to extract scale and position values
- */
-
-/**
- * Parse scale from CSS transform string
- */
-export function parseScaleFromTransform(
-    transform: string,
-    container: HTMLElement | null,
-    imgElement: HTMLImageElement | null
-): number {
-    const scaleMatch = transform.match(/scale\(([\d.]+)\)/);
-    if (!scaleMatch) return 1.0;
-
-    const totalScale = parseFloat(scaleMatch[1]);
-    
-    // If totalScale is very small (< 0.1), it's likely wrong
-    if (totalScale < 0.1) {
-        return 1.0;
-    }
-
-    // Calculate baseScale to extract the actual user scale
-    if (container && imgElement && imgElement.naturalWidth > 0 && imgElement.naturalHeight > 0) {
-        const containerWidth = container.clientWidth || container.offsetWidth;
-        const containerHeight = container.clientHeight || container.offsetHeight;
-        
-        if (containerWidth > 0 && containerHeight > 0) {
-            const widthRatio = containerWidth / imgElement.naturalWidth;
-            const heightRatio = containerHeight / imgElement.naturalHeight;
-            const baseScale = Math.max(widthRatio, heightRatio);
-            
-            if (baseScale > 0 && baseScale < 1) {
-                // Extract the actual scale by dividing totalScale by baseScale
-                const scale = totalScale / baseScale;
-                // Clamp to valid range
-                return Math.max(0.1, Math.min(5.0, scale));
-            }
-        }
-    }
-
-    return 1.0;
-}
-
-/**
- * Parse position (X, Y) from CSS transform string
- * Returns container-relative percentages
- */
-export function parsePositionFromTransform(transform: string): { x: number; y: number } {
-    // Match all translate() calls - skip the first one if it's the centering translate(-50%, -50%)
-    const allTranslates = transform.matchAll(/translate\(([-\d.]+)%,?\s*([-\d.]+)?%?\)/g);
-    const translateArray = Array.from(allTranslates);
-    
-    let positionX = 0;
-    let positionY = 0;
-    
-    if (translateArray.length > 1) {
-        // Use the second translate (the position offset)
-        const positionTranslate = translateArray[1];
-        const appliedX = parseFloat(positionTranslate[1] || '0');
-        const appliedY = parseFloat(positionTranslate[2] || '0');
-        
-        // Only use if it's not the centering translate (safety check)
-        if (appliedX !== -50 || appliedY !== -50) {
-            // With new system, applied value IS the stored value (container-relative)
-            positionX = appliedX;
-            positionY = appliedY;
-        }
-    } else if (translateArray.length === 1) {
-        // Only one translate - check if it's the centering one
-        const translate = translateArray[0];
-        const appliedX = parseFloat(translate[1] || '0');
-        const appliedY = parseFloat(translate[2] || '0');
-        
-        // If it's not the centering translate, use it as position
-        if (appliedX !== -50 || appliedY !== -50) {
-            positionX = appliedX;
-            positionY = appliedY;
-        }
-    }
-    
-    return { x: positionX, y: positionY };
-}