dpage

src/pages/editor/components/EditorCanvas.tsx

@@ -23,6 +23,11 @@ import ZoomControls from "./ZoomControls";
 import EditorCanvasToolbar from "./EditorCanvasToolbar";
 import { createScopedId } from "../store/editorStore.helpers";
 import { getKonvaGradientProps } from "../utils/gradient";
+import { STICKER_DRAG_MIME } from "../types/IconTypes";
+import {
+  createStickerObject,
+  scaleStickerDimensions,
+} from "../utils/stickerUtils";
 
 type EditorCanvasProps = {
   catalogSize?: string;
@@ -50,6 +55,9 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     setLayerRef,
     setGuides,
     zoom,
+    addObject,
+    setSelectedObjectId,
+    setTool,
   } = useEditorStore();
   const isSmartGuideEnabled = documentSettings.smartGuide;
   const currentPage = pages.find((page) => page.id === currentPageId);
@@ -360,6 +368,39 @@ 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;
+    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);
+    setTool("select");
+  };
+
+  const handleStickerDrop = (e: React.DragEvent) => {
+    const imageUrl = e.dataTransfer.getData(STICKER_DRAG_MIME);
+    if (!imageUrl || !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 img = new Image();
+    img.onload = () => {
+      const { width, height } = scaleStickerDimensions(img.naturalWidth, img.naturalHeight);
+      placeStickerAt(imageUrl, stageX, stageY, width, height);
+    };
+    img.onerror = () => {
+      placeStickerAt(imageUrl, stageX, stageY, 100, 100);
+    };
+    img.src = imageUrl;
+  };
   const backgroundGradientProps = getKonvaGradientProps(
     currentPage?.backgroundType === "gradient" ? "gradient" : "solid",
     bgGradient,
@@ -410,7 +451,12 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
             title="Drag to create horizontal guide"
           />
           <div className="absolute -top-6 -left-6 w-6 h-6 bg-slate-200 border border-slate-300" />
-          <div ref={stageWrapRef} className="shadow-lg">
+          <div
+            ref={stageWrapRef}
+            className="shadow-lg"
+            onDragOver={handleStickerDragOver}
+            onDrop={handleStickerDrop}
+          >
             <Stage
               ref={stageRef}
               width={stageSize.width * finalScale}