gallery:

2026-05-25 09:35:57 +03:30
parent cbdc7edbf5
commit 83b2fd809c
19 changed files with 413 additions and 163 deletions
@@ -1,7 +1,6 @@
-import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
-import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { type ToolType } from "@/pages/editor/store/editorStore";
 import {
-    ImageUpload,
+    ImageGallery,
    VideoInput,
    LinkInput,
    SelectInstruction,
@@ -18,39 +17,8 @@ type ToolInstructionsProps = {
 };

 const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
-    const { addObject, setSelectedObjectId, setTool } = useEditorStore();
-    const { mutateAsync: uploadFile } = useSingleUpload();
-
-    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-        try {
-            const result = await uploadFile(file);
-            const imageUrl = result?.data?.url;
-            if (!imageUrl) return;
-            const img = new Image();
-            img.onload = () => {
-                const newImage = {
-                    id: `image-${Date.now()}`,
-                    type: "image" as ToolType,
-                    x: 100,
-                    y: 100,
-                    width: img.width,
-                    height: img.height,
-                    imageUrl,
-                };
-                addObject(newImage);
-                setSelectedObjectId(newImage.id);
-                setTool("select");
-            };
-            img.src = imageUrl;
-        } catch {
-            // TODO: show error toast
-        }
-    };
-
    if (tool === "image") {
-        return <ImageUpload onImageUpload={handleImageUpload} />;
+        return <ImageGallery />;
    }

    if (tool === "video") {
@@ -18,7 +18,7 @@ const tools: Array<{ icon: (color: string, variant?: "Bold" | "Outline" | "Broke
    { icon: (color, variant) => <Shapes size={20} color={color} variant={variant} />, tool: "rectangle", label: "مستطیل" },
    { icon: (color, variant) => <Text size={20} color={color} variant={variant} />, tool: "text", label: "متن" },
    { icon: (color, variant) => <Grid8 size={20} color={color} variant={variant} />, tool: "grid", label: "گرید" },
-    { icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "تصویر" },
+    { icon: (color, variant) => <Gallery size={20} color={color} variant={variant} />, tool: "image", label: "گالری" },
    { icon: (color, variant) => <Link2 size={20} color={color} variant={variant} />, tool: "link", label: "لینک" },
    { icon: (color, variant) => <VideoSquare size={20} color={color} variant={variant} />, tool: "video", label: "ویدیو" },
    { icon: (color, variant) => <ArrowLeft size={20} color={color} variant={variant} />, tool: "arrow", label: "پیکان" },
@@ -0,0 +1,105 @@
+import { type FC, useState } from "react";
+import { Trash } from "iconsax-react";
+import UploadBoxDraggble from "@/components/UploadBoxDraggble";
+import { useEditorStore } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { createScopedId } from "@/pages/editor/store/editorStore.helpers";
+import { GALLERY_DRAG_MIME } from "@/pages/editor/types/GalleryTypes";
+
+const ImageGallery: FC = () => {
+    const { gallery, addGalleryItem, removeGalleryItem } = useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
+    const [isUploading, setIsUploading] = useState(false);
+
+    const handleFileChange = async (files: File[]) => {
+        if (files.length === 0) return;
+
+        setIsUploading(true);
+        try {
+            for (const file of files) {
+                const result = await uploadFile(file);
+                const imageUrl = result?.data?.url;
+                if (!imageUrl) continue;
+
+                const dimensions = await loadImageDimensions(imageUrl);
+                addGalleryItem({
+                    id: createScopedId("gallery"),
+                    url: imageUrl,
+                    width: dimensions.width,
+                    height: dimensions.height,
+                });
+            }
+        } catch {
+            // TODO: show error toast
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const handleDragStart = (e: React.DragEvent<HTMLImageElement>, url: string) => {
+        e.dataTransfer.setData(GALLERY_DRAG_MIME, url);
+        e.dataTransfer.effectAllowed = "copy";
+    };
+
+    return (
+        <div className="space-y-3">
+            <div className="text-base font-bold">گالری</div>
+            <p className="text-sm text-gray-600">
+                تصویر را آپلود کنید، سپس از گالری بکشید و روی صفحه رها کنید
+            </p>
+
+            <UploadBoxDraggble
+                label="تصویر مورد نظر را آپلود کنید"
+                onChange={handleFileChange}
+                isMultiple={true}
+                hidePreview
+                isLoading={isUploading}
+            />
+
+            {gallery.length === 0 && !isUploading && (
+                <p className="text-sm text-gray-500">گالری خالی است</p>
+            )}
+
+            {gallery.length > 0 && (
+                <div className="grid grid-cols-3 gap-2 max-h-[320px] overflow-y-auto">
+                    {gallery.map((item) => (
+                        <div
+                            key={item.id}
+                            className="group relative flex aspect-square items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-1 hover:border-blue-300 hover:bg-blue-50 transition-colors"
+                        >
+                            <img
+                                src={item.url}
+                                alt=""
+                                draggable
+                                onDragStart={(e) => handleDragStart(e, item.url)}
+                                className="max-h-full max-w-full object-contain cursor-grab active:cursor-grabbing"
+                            />
+                            <button
+                                type="button"
+                                onClick={() => removeGalleryItem(item.id)}
+                                className="absolute -left-1 -top-1 hidden size-5 items-center justify-center rounded-full bg-white shadow group-hover:flex"
+                                title="حذف از گالری"
+                            >
+                                <Trash size={12} color="#ef4444" variant="Bold" />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+const loadImageDimensions = (url: string): Promise<{ width: number; height: number }> =>
+    new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.onerror = () => {
+            resolve({ width: 100, height: 100 });
+        };
+        img.src = url;
+    });
+
+export default ImageGallery;
@@ -1,67 +1 @@
-import { type FC, useState, useRef } from "react";
-import UploadBoxDraggble from "@/components/UploadBoxDraggble";
-
-type ImageUploadProps = {
-    onImageUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
-};
-
-const ImageUpload: FC<ImageUploadProps> = ({ onImageUpload }) => {
-    const [uploadedImages, setUploadedImages] = useState<string[]>([]);
-    const previousFilesCountRef = useRef<number>(0);
-
-    const handleFileChange = (files: File[]) => {
-        // Update ref to track current files count
-        if (files.length > previousFilesCountRef.current) {
-            // Process only new files
-            const newFiles = files.slice(previousFilesCountRef.current);
-
-            newFiles.forEach((file) => {
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                    const imageUrl = event.target?.result as string;
-                    setUploadedImages((prev) => [...prev, imageUrl]);
-
-                    // Create a synthetic event for onImageUpload
-                    const syntheticEvent = {
-                        target: {
-                            files: [file],
-                        },
-                    } as unknown as React.ChangeEvent<HTMLInputElement>;
-
-                    onImageUpload(syntheticEvent);
-                };
-                reader.readAsDataURL(file);
-            });
-        }
-
-        // Always update ref to track current files count
-        previousFilesCountRef.current = files.length;
-    };
-
-    const handlePreviewChange = (previews: string[]) => {
-        setUploadedImages(previews);
-        // Update ref when previews change (e.g., when files are deleted)
-        previousFilesCountRef.current = previews.length;
-    };
-
-    return (
-        <div>
-            <div className="text-base font-bold mb-4">تصویر</div>
-            <UploadBoxDraggble
-                label="تصویر مورد نظر را آپلود کنید"
-                onChange={handleFileChange}
-                isMultiple={true}
-                preview={uploadedImages}
-                onChangePreview={handlePreviewChange}
-            />
-            {uploadedImages.length > 0 && (
-                <div className="mt-4 text-description text-xs">
-                    تصویر های آپلود شده
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default ImageUpload;
-
+export { default } from "./ImageGallery";
@@ -1,3 +1,4 @@
+export { default as ImageGallery } from "./ImageGallery";
 export { default as ImageUpload } from "./ImageUpload";
 export { default as DocumentUpload } from "./DocumentUpload";
 export { default as VideoInput } from "./VideoInput";