auto select and edit

2025-07-15 12:40:39 +03:30
parent 66b1dc15d8
commit 558d03533b
38 changed files with 5269 additions and 296 deletions
@@ -1,13 +1,31 @@
 import { FC } from 'react'
-import { ImageType, ImageSize, HorizontalAlignment, VerticalAlignment } from '../types/Types'
+import { ImageType, ImageSize, HorizontalAlignment, VerticalAlignment, ElementType, PersonalityDataType } from '../types/Types'
+import { usePersonalityStore } from '../store/Store'

 interface ImageRendererProps {
    images: ImageType[]
+    itemId: string
+    sectionKey: keyof PersonalityDataType
 }

-const ImageRenderer: FC<ImageRendererProps> = ({ images }) => {
+const ImageRenderer: FC<ImageRendererProps> = ({ images, itemId, sectionKey }) => {
+    const { selectedElement, setSelectedElement } = usePersonalityStore()
+
    if (!images || images.length === 0) return null

+    const handleImageClick = (e: React.MouseEvent, imageId: string) => {
+        // جلوگیری از propagation به parent handlers
+        e.stopPropagation()
+        e.preventDefault()
+        console.log('Image clicked:', imageId)
+        setSelectedElement({
+            type: ElementType.IMAGE,
+            elementId: imageId,
+            itemId,
+            sectionKey,
+        })
+    }
+
    // تابع‌های helper برای تبدیل enum به string
    const getHorizontalAlign = (alignment?: HorizontalAlignment) => {
        switch (alignment) {
@@ -37,7 +55,8 @@ const ImageRenderer: FC<ImageRendererProps> = ({ images }) => {
        return {
            width: image.width || '100%',
            height: image.height || 'auto',
-            border: '0'
+            border: '0',
+            pointerEvents: 'none' as const // Prevent double click handling
        }
    }

@@ -80,47 +99,60 @@ const ImageRenderer: FC<ImageRendererProps> = ({ images }) => {
    }

    const renderImage = (image: ImageType) => {
-        if (shouldUseBackgroundImage(image.size)) {
-            // برای pattern های repeat از background استفاده می‌کنیم
-            return (
-                <div style={getBackgroundStyle(image)}>
-                    &nbsp;
-                </div>
-            )
-        }
-
-        // برای تصاویر عادی
-        if (image.size === ImageSize.CONTAIN) {
-            // برای contain از table wrapper استفاده می‌کنیم تا نسبت حفظ شود
-            return (
-                <table width={image.width || '100%'} cellPadding="0" cellSpacing="0" border={0}>
-                    <tbody>
-                        <tr>
-                            <td align="center" valign="middle" style={{ textAlign: 'center' }}>
-                                <img
-                                    src={image.src}
-                                    alt={image.alt || 'تصویر آپلود شده'}
-                                    width={image.width || '100%'}
-                                    height={image.height || 'auto'}
-                                    style={{ border: '0' }}
-                                />
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            )
-        }
-
-        // برای cover و auto
-        return (
-            <img
-                src={image.src}
-                alt={image.alt || 'تصویر آپلود شده'}
-                width={image.width || '100%'}
-                height={image.height || 'auto'}
-                style={getImageStyle(image)}
-            />
+        const imageWrapper = (
+            <div
+                data-element-type="image"
+                onClick={(e) => handleImageClick(e, image.id)}
+                style={{
+                    cursor: 'pointer',
+                    outline: selectedElement?.elementId === image.id ? '2px dashed #0038FF' : 'none',
+                    outlineOffset: '2px',
+                    borderRadius: '4px',
+                    padding: '2px',
+                    display: 'inline-block',
+                    minWidth: '20px',
+                    minHeight: '20px'
+                }}
+            >
+                {shouldUseBackgroundImage(image.size) ? (
+                    // برای pattern های repeat از background استفاده می‌کنیم
+                    <div style={getBackgroundStyle(image)}>
+                        &nbsp;
+                    </div>
+                ) : (
+                    // برای تصاویر عادی
+                    image.size === ImageSize.CONTAIN ? (
+                        // برای contain از table wrapper استفاده می‌کنیم تا نسبت حفظ شود
+                        <table width={image.width || '100%'} cellPadding="0" cellSpacing="0" border={0}>
+                            <tbody>
+                                <tr>
+                                    <td align="center" valign="middle" style={{ textAlign: 'center' }}>
+                                        <img
+                                            src={image.src}
+                                            alt={image.alt || 'تصویر آپلود شده'}
+                                            width={image.width || '100%'}
+                                            height={image.height || 'auto'}
+                                            style={getImageStyle(image)}
+                                        />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    ) : (
+                        // برای cover و auto
+                        <img
+                            src={image.src}
+                            alt={image.alt || 'تصویر آپلود شده'}
+                            width={image.width || '100%'}
+                            height={image.height || 'auto'}
+                            style={getImageStyle(image)}
+                        />
+                    )
+                )}
+            </div>
        )
+
+        return imageWrapper
    }

    return (