@jhits/plugin-images 0.0.3 → 0.0.5

package/src/components/GlobalImageEditor/stylingDetection.ts

@@ -0,0 +1,122 @@
+/**
+ * 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.ts

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

package/src/components/GlobalImageEditor/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Types for GlobalImageEditor component
+ */
+
+export interface SelectedImage {
+    element: HTMLElement;
+    originalSrc: string;
+    brightness: number;
+    blur: number;
+    scale: number;
+    positionX: number;
+    positionY: number;
+    isBackground: boolean;
+    aspectRatio?: string;
+    borderRadius?: string;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+}
+
+export interface PluginConfig {
+    enabled: boolean;
+    className?: string;
+    overlayClassName?: string;
+}
+
+export interface DetectedStyling {
+    aspectRatio: string;
+    borderRadius: string;
+    objectFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    objectPosition: string;
+}
+
+export interface PendingTransform {
+    scale: number;
+    positionX: number;
+    positionY: number;
+    semanticId: string;
+    filename: string;
+}