From 539b836d39ef68c71d532cd042ca4926a1d30f2e Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Tue, 3 Feb 2026 23:38:01 +0500
Subject: [PATCH] fix: resolve crop errors

---
 src/components/ImageCropper.svelte | 42 ++++++++++++++++++++++--------
 src/components/ImageUpload.svelte  | 12 ++++++++-
 src/components/PanelPreview.svelte |  8 +++---
 src/routes/+page.svelte            | 25 +++++++-----------
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/components/ImageCropper.svelte b/src/components/ImageCropper.svelte
index 9dfedcd..1fc731b 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/ImageCropper.svelte
@@ -6,12 +6,16 @@
   import { ImageService } from "../lib/services/imageService";
   import { uiStore, setLoading } from "../stores/uiStore";
   
-  let Cropper: any = $state(undefined);
+  let Cropper: any;
 
   onMount(async () => {
     if (browser) {
+      console.log("Loading cropperjs module");
       const cropperModule = await import("cropperjs");
-      Cropper = cropperModule.default;
+      console.log("cropperjs module loaded:", cropperModule);
+      Cropper = cropperModule.default || cropperModule;
+      console.log("Cropper class:", Cropper);
+      console.log("Cropper.getCroppedCanvas:", typeof Cropper?.prototype?.getCroppedCanvas);
       
       // Импортируем стили только на клиенте
 
@@ -44,8 +48,13 @@
   });
 
   function initializeCropper() {
-    if (!imageElement || !Cropper) return;
+    console.log("initializeCropper called, imageElement:", !!imageElement, "Cropper:", !!Cropper);
+    if (!imageElement || !Cropper) {
+      console.error("Cannot initialize cropper: imageElement:", !!imageElement, "Cropper:", !!Cropper);
+      return;
+    }
 
+    console.log("Creating new Cropper instance");
     cropper = new Cropper(imageElement, {
       aspectRatio: NaN, // Allow any aspect ratio
       viewMode: 1,
@@ -62,27 +71,38 @@
       minCropBoxHeight: 50,
       responsive: true,
     });
+    console.log("Cropper instance created:", cropper);
+    console.log("cropper.getCroppedCanvas:", typeof cropper?.getCroppedCanvas);
+    console.log("cropper methods:", Object.getOwnPropertyNames(Object.getPrototypeOf(cropper)));
   }
 
   async function handleCrop() {
-    if (!cropper) return;
+    console.log("handleCrop called, cropper:", cropper);
+    if (!cropper) {
+      console.error("Cropper is not initialized");
+      return;
+    }
 
     try {
       isProcessing = true;
       errorMessage = null;
       setLoading(true);
 
-      const canvas = cropper.getCroppedCanvas({
-        width: 320,
-        imageSmoothingEnabled: true,
-        imageSmoothingQuality: "high",
-      });
+      console.log("Calling getCropperImage");
+      const image = cropper.getCropperImage();
+      console.log("Image result:", image);
+      console.log("Image type:", typeof image);
 
-      if (!canvas) {
+      if (!image) {
         throw new Error("Не удалось получить обрезанное изображение");
       }
 
-      const croppedImage = canvas.toDataURL("image/png");
+      // Проверяем, есть ли у image метод toDataURL
+      if (typeof image.toDataURL === "function") {
+        const croppedImage = image.toDataURL("image/png");
+      } else {
+        throw new Error("Изображение не имеет метода toDataURL");
+      }
 
       // Validate cropped image
       const cropResult: ImageCropResult = {
diff --git a/src/components/ImageUpload.svelte b/src/components/ImageUpload.svelte
index 21281ee..997de21 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/ImageUpload.svelte
@@ -8,6 +8,8 @@
 
   let imageService = new ImageService();
 
+  let { onImageSelect }: { onImageSelect: (image: string) => void } = $props();
+
   let dropZone = $state<HTMLElement | null>(null);
   let fileInput = $state<HTMLInputElement | null>(null);
   let urlInput = $state<HTMLInputElement | null>(null);
@@ -66,14 +68,18 @@
   }
 
   async function handleFileUpload(file: File) {
+    console.log("handleFileUpload called with file:", file.name, "size:", file.size);
     try {
       setLoading(true);
       clearError();
-
+      console.log("Calling imageService.handleFileUpload");
       const result: ImageUploadResult = await imageService.handleFileUpload(file);
+      console.log("Image upload result - success:", result.success, "has image:", !!result.image);
 
       if (result.success && result.image) {
         uploadedImage = result.image;
+        console.log("Calling onImageSelect with image length:", result.image.length);
+        onImageSelect(result.image);
         setCurrentStep("crop");
       } else {
         errorMessage = result.error || "Ошибка загрузки файла";
@@ -96,6 +102,8 @@
 
       if (result.success && result.image) {
         uploadedImage = result.image;
+        console.log("Calling onImageSelect with image length:", result.image.length);
+        onImageSelect(result.image);
         setCurrentStep("crop");
       } else {
         errorMessage = result.error || "Ошибка вставки изображения";
@@ -120,6 +128,8 @@
 
       if (result.success && result.image) {
         uploadedImage = result.image;
+        console.log("Calling onImageSelect with image length:", result.image.length);
+        onImageSelect(result.image);
         setCurrentStep("crop");
         showUrlInput = false;
       } else {
diff --git a/src/components/PanelPreview.svelte b/src/components/PanelPreview.svelte
index f9ded5a..0d49860 100644
--- a/src/components/PanelPreview.svelte
+++ b/src/components/PanelPreview.svelte
@@ -10,10 +10,10 @@
     onDownload?: () => void;
   } = $props();
 
-  let Stage: any = $state(undefined);
-  let Layer: any = $state(undefined);
-  let Image: any = $state(undefined);
-  let Text: any = $state(undefined);
+  let Stage: any;
+  let Layer: any;
+  let Image: any;
+  let Text: any;
 
   let currentPanel = $state<Panel | null>(null);
   let backgroundImage: HTMLImageElement | undefined = $state(undefined);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4184ddb..237e7d3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,3 @@
-
 <script lang="ts">
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
@@ -45,9 +44,12 @@
   });
 
   function handleImageUpload(image: string) {
+    console.log("handleImageUpload called with image length:", image.length);
     uploadedImage = image;
     errorMessage = null;
-    uiStore.setCurrentStep("crop");
+    console.log("Setting current step to crop");
+    setCurrentStep("crop");
+    console.log("Current step after setting:", $uiStore.currentStep);
   }
 
   function handleCropComplete(croppedImage: string) {
@@ -143,27 +145,22 @@
       {#if $uiStore.currentStep === "upload"}
         {#if ImageUpload}
           {@const Upload = ImageUpload.default}
-          <svelte:component this={Upload} onImageSelect={handleImageUpload} />
+          <Upload onImageSelect={handleImageUpload} />
         {/if}
       {:else if $uiStore.currentStep === "crop" && uploadedImage}
         {#if ImageCropper}
           {@const Cropper = ImageCropper.default}
-          <svelte:component 
-            this={Cropper}
-            imageSrc={uploadedImage}
-            onCropComplete={handleCropComplete}
-            onCancel={handleCropCancel}
-          />
+          <Cropper imageSrc={uploadedImage} onCropComplete={handleCropComplete} onCancel={handleCropCancel} />
         {/if}
       {:else if $uiStore.currentStep === "text"}
         {#if TextManager}
           {@const Manager = TextManager.default}
-          <svelte:component this={Manager} onTextUpdate={handleTextUpdate} />
+          <Manager onTextUpdate={handleTextUpdate} />
         {/if}
       {:else if $uiStore.currentStep === "preview"}
         {#if PanelPreview}
           {@const Preview = PanelPreview.default}
-          <svelte:component this={Preview} onDownload={handleDownload} />
+          <Preview onDownload={handleDownload} />
         {/if}
       {/if}
     </div>
@@ -171,11 +168,7 @@
     <div class="sidebar">
       {#if PanelList}
         {@const List = PanelList.default}
-        <svelte:component 
-          this={List}
-          onPanelSelect={handlePanelSelect}
-          onPanelDelete={handlePanelDelete}
-        />
+        <List onPanelSelect={handlePanelSelect} onPanelDelete={handlePanelDelete} />
       {/if}
     </div>
   </div>