feat: apply image background to component (#2508)

* feat: input image background

* update tw merge

Author: spartan-vutrannguyen

apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx

@@ -21,14 +21,15 @@ import { FontWeightSelector } from './text-inputs/font/font-weight';
 import { TextColor } from './text-inputs/text-color';
 import { AdvancedTypography } from './text-inputs/advanced-typography';
 import { TextAlignSelector } from './text-inputs/text-align';
+import { InputImage } from './inputs/input-image';
 
 // Group definitions for the div-selected toolbar
 export const DIV_SELECTED_GROUPS = [
 
     {
         key: 'base',
         label: 'Base',
-        components: [<ColorBackground />, <Border />, <BorderColor />, <Radius />],
+        components: [<ColorBackground />, <InputImage />, <Border />, <BorderColor />, <Radius />],
     },
     {
         key: 'layout',

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-background-image-update.ts

@@ -0,0 +1,162 @@
+import type { EditorEngine } from '@/components/store/editor/engine';
+import { toast } from '@onlook/ui/sonner';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export enum ImageFit {
+    FILL = 'fill',
+    FIT = 'fit',
+    STRETCH = 'stretch',
+    CENTER = 'center',
+    TILE = 'tile',
+    AUTO = 'auto',
+}
+
+export const IMAGE_FIT_OPTIONS = [
+    { value: ImageFit.FILL, label: 'Fill' },
+    { value: ImageFit.FIT, label: 'Fit' },
+    { value: ImageFit.STRETCH, label: 'Stretch' },
+    { value: ImageFit.CENTER, label: 'Center' },
+    { value: ImageFit.TILE, label: 'Tile' },
+    { value: ImageFit.AUTO, label: 'Auto' },
+] as const;
+
+const FitToStyle: Record<ImageFit, Record<string, string>> = {
+    [ImageFit.FILL]: {
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    },
+    [ImageFit.FIT]: {
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    },
+    [ImageFit.STRETCH]: {
+        backgroundSize: '100% 100%',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    },
+    [ImageFit.CENTER]: {
+        backgroundSize: 'auto',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    },
+    [ImageFit.TILE]: {
+        backgroundSize: 'auto',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'repeat',
+    },
+    [ImageFit.AUTO]: {
+        backgroundSize: 'auto',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+    },
+};
+
+const cssToImageFit = (backgroundSize: string, backgroundRepeat: string): ImageFit => {
+    if (backgroundSize === 'cover') return ImageFit.FILL;
+    if (backgroundSize === 'contain') return ImageFit.FIT;
+    if (backgroundSize === '100% 100%') return ImageFit.STRETCH;
+    if (backgroundSize === 'auto' && backgroundRepeat === 'repeat') return ImageFit.TILE;
+    if (backgroundSize === 'auto') return ImageFit.CENTER;
+    return ImageFit.AUTO;
+};
+
+export const useBackgroundImage = (editorEngine: EditorEngine) => {
+    const [fillOption, setFillOption] = useState<ImageFit>(ImageFit.FILL);
+
+    const currentBackgroundImage = useMemo(() => {
+        const selectedImage = editorEngine.style.selectedStyle?.styles.computed.backgroundImage;
+        if (selectedImage && selectedImage !== 'none') {
+            return selectedImage;
+        }
+        return null;
+    }, [editorEngine.style.selectedStyle?.styles.computed.backgroundImage]);
+
+    const currentBackgroundSize = useMemo(() => {
+        const selectedStyle = editorEngine.style.selectedStyle?.styles.computed.backgroundSize;
+        const selectedRepeat = editorEngine.style.selectedStyle?.styles.computed.backgroundRepeat;
+
+        if (!selectedStyle) return null;
+
+        return cssToImageFit(selectedStyle, selectedRepeat ?? 'no-repeat');
+    }, [
+        editorEngine.style.selectedStyle?.styles.computed.backgroundSize,
+        editorEngine.style.selectedStyle?.styles.computed.backgroundRepeat,
+    ]);
+
+    const applyFillOption = useCallback(
+        (fillOptionValue: ImageFit) => {
+            try {
+                const selected = editorEngine.elements.selected;
+
+                if (!selected || selected.length === 0) {
+                    console.warn('No elements selected to apply fill option');
+                    return;
+                }
+
+                const cssStyles = FitToStyle[fillOptionValue];
+                editorEngine.style.updateMultiple(cssStyles);
+            } catch (error) {
+                console.error('Failed to apply fill option:', error);
+                toast.error('Failed to apply fill option', {
+                    description: error instanceof Error ? error.message : String(error),
+                });
+            }
+        },
+        [],
+    );
+
+    const handleFillOptionChange = useCallback(
+        (option: ImageFit) => {
+            setFillOption(option);
+            applyFillOption(option);
+        },
+        [applyFillOption],
+    );
+
+    const removeBackground = useCallback(async () => {
+        try {
+            const styles = {
+                backgroundImage: 'none',
+                backgroundSize: 'auto',
+                backgroundRepeat: 'repeat',
+                backgroundPosition: 'auto',
+            };
+
+            editorEngine.style.updateMultiple(styles);
+            editorEngine.image.setSelectedImage(null);
+            editorEngine.image.setPreviewImage(null);
+        } catch (error) {
+            console.error('Failed to remove background:', error);
+            toast.error('Failed to remove background', {
+                description: error instanceof Error ? error.message : String(error),
+            });
+        }
+    }, [editorEngine]);
+
+    useEffect(() => {
+        if (currentBackgroundSize) {
+            setFillOption(currentBackgroundSize);
+        }
+    }, [currentBackgroundSize]);
+
+    useEffect(() => {
+        return () => {
+            if (editorEngine.image.isSelectingImage) {
+                editorEngine.image.setIsSelectingImage(false);
+                editorEngine.image.setSelectedImage(null);
+                editorEngine.image.setPreviewImage(null);
+            }
+        };
+    }, [editorEngine]);
+
+    return {
+        fillOption,
+        currentBackgroundImage,
+        handleFillOptionChange,
+        removeBackground,
+        ImageFit,
+        IMAGE_FIT_OPTIONS,
+    };
+};