gallery:

src/pages/editor/components/EditorCanvas.tsx

@@ -24,10 +24,15 @@ import EditorCanvasToolbar from "./EditorCanvasToolbar";
 import { createScopedId } from "../store/editorStore.helpers";
 import { getKonvaGradientProps } from "../utils/gradient";
 import { STICKER_DRAG_MIME } from "../types/IconTypes";
+import { GALLERY_DRAG_MIME } from "../types/GalleryTypes";
 import {
   createStickerObject,
   scaleStickerDimensions,
 } from "../utils/stickerUtils";
+import {
+  createImageObject,
+  scaleImageDimensions,
+} from "../utils/imageUtils";
 
 type EditorCanvasProps = {
   catalogSize?: string;
@@ -369,35 +374,69 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const scaledW = stageSize.width * finalScale;
   const scaledH = stageSize.height * finalScale;
 
-  const handleStickerDragOver = (e: React.DragEvent) => {
-    if (!e.dataTransfer.types.includes(STICKER_DRAG_MIME)) return;
+  const SIDEBAR_DRAG_MIMES = [STICKER_DRAG_MIME, GALLERY_DRAG_MIME];
+
+  const handleSidebarDragOver = (e: React.DragEvent) => {
+    if (!SIDEBAR_DRAG_MIMES.some((mime) => e.dataTransfer.types.includes(mime))) return;
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   };
 
-  const placeStickerAt = (imageUrl: string, stageX: number, stageY: number, width: number, height: number) => {
-    const sticker = createStickerObject(imageUrl, stageX, stageY, width, height);
-    addObject(sticker);
-    setSelectedObjectId(sticker.id);
+  const placeObjectAt = (
+    imageUrl: string,
+    stageX: number,
+    stageY: number,
+    width: number,
+    height: number,
+    type: "sticker" | "image",
+  ) => {
+    const object =
+      type === "sticker"
+        ? createStickerObject(
+            imageUrl,
+            stageX,
+            stageY,
+            width,
+            height,
+            stageSize.width,
+            stageSize.height,
+          )
+        : createImageObject(
+            imageUrl,
+            stageX,
+            stageY,
+            width,
+            height,
+            stageSize.width,
+            stageSize.height,
+          );
+    addObject(object);
+    setSelectedObjectId(object.id);
     setTool("select");
   };
 
-  const handleStickerDrop = (e: React.DragEvent) => {
-    const imageUrl = e.dataTransfer.getData(STICKER_DRAG_MIME);
-    if (!imageUrl || !stageWrapRef.current) return;
+  const handleSidebarDrop = (e: React.DragEvent) => {
+    const stickerUrl = e.dataTransfer.getData(STICKER_DRAG_MIME);
+    const galleryUrl = e.dataTransfer.getData(GALLERY_DRAG_MIME);
+    const imageUrl = stickerUrl || galleryUrl;
+    const dropType = stickerUrl ? "sticker" : galleryUrl ? "image" : null;
+    if (!imageUrl || !dropType || !stageWrapRef.current) return;
     e.preventDefault();
 
     const rect = stageWrapRef.current.getBoundingClientRect();
     const stageX = (e.clientX - rect.left) / finalScale;
     const stageY = (e.clientY - rect.top) / finalScale;
 
+    const scaleFn =
+      dropType === "sticker" ? scaleStickerDimensions : scaleImageDimensions;
+
     const img = new Image();
     img.onload = () => {
-      const { width, height } = scaleStickerDimensions(img.naturalWidth, img.naturalHeight);
-      placeStickerAt(imageUrl, stageX, stageY, width, height);
+      const { width, height } = scaleFn(img.naturalWidth, img.naturalHeight);
+      placeObjectAt(imageUrl, stageX, stageY, width, height, dropType);
     };
     img.onerror = () => {
-      placeStickerAt(imageUrl, stageX, stageY, 100, 100);
+      placeObjectAt(imageUrl, stageX, stageY, 100, 100, dropType);
     };
     img.src = imageUrl;
   };
@@ -454,8 +493,8 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
           <div
             ref={stageWrapRef}
             className="shadow-lg"
-            onDragOver={handleStickerDragOver}
-            onDrop={handleStickerDrop}
+            onDragOver={handleSidebarDragOver}
+            onDrop={handleSidebarDrop}
           >
             <Stage
               ref={stageRef}
@@ -510,6 +549,8 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                 onCellDblClick={handleCellDblClick}
                 onGroup={handleGroupWithMask}
                 onUngroup={handleUngroupFromMask}
+                stageWidth={stageSize.width}
+                stageHeight={stageSize.height}
               />
               <GuidesLayer
                 guides={guides}