fix: resolve deprecated warnings

2026-02-03 22:25:58 +05:00
parent fd19f2c7ba
commit c18ea19316
3 changed files with 38 additions and 24 deletions
@@ -113,7 +113,7 @@
    <img
      bind:this={imageElement}
      src={imageSrc}
-      alt="Image to crop"
+      alt=""
      class="cropper-image"
    />
  </div>
@@ -8,10 +8,10 @@

  let imageService = new ImageService();

-  let dropZone: HTMLElement;
-  let fileInput: HTMLInputElement;
-  let urlInput: HTMLInputElement;
-  let urlForm: HTMLFormElement;
+  let dropZone = $state<HTMLElement | null>(null);
+  let fileInput = $state<HTMLInputElement | null>(null);
+  let urlInput = $state<HTMLInputElement | null>(null);
+  let urlForm = $state<HTMLFormElement | null>(null);

  let isDragOver = $state(false);
  let showUrlInput = $state(false);
@@ -68,13 +68,13 @@
  async function handleFileUpload(file: File) {
    try {
      setLoading(true);
-      uiStore.clearError();
+      clearError();

      const result: ImageUploadResult = await imageService.handleFileUpload(file);

      if (result.success && result.image) {
        uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
      } else {
        errorMessage = result.error || "Ошибка загрузки файла";
      }
@@ -90,13 +90,13 @@

    try {
      setLoading(true);
-      uiStore.clearError();
+      clearError();

      const result: ImageUploadResult = await imageService.handlePasteUpload(e);

      if (result.success && result.image) {
        uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
      } else {
        errorMessage = result.error || "Ошибка вставки изображения";
      }
@@ -114,13 +114,13 @@

    try {
      setLoading(true);
-      uiStore.clearError();
+      clearError();

      const result: ImageUploadResult = await imageService.handleUrlUpload(urlInput.value.trim());

      if (result.success && result.image) {
        uploadedImage = result.image;
-        uiStore.setCurrentStep("crop");
+        setCurrentStep("crop");
        showUrlInput = false;
      } else {
        errorMessage = result.error || "Ошибка загрузки изображения";
@@ -140,7 +140,7 @@
    uploadedImage = null;
    errorMessage = null;
    showUrlInput = false;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
  }
 </script>

@@ -156,7 +156,15 @@
    <div
      bind:this={dropZone}
      class="drop-zone {isDragOver ? 'drag-over' : ''} {uiError ? 'error' : ''}"
+      role="button"
+      tabindex="0"
      onclick={triggerFileInput}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          triggerFileInput();
+        }
+      }}
    >
      <div class="drop-zone-content">
        <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -169,7 +177,7 @@
        <p>Перетащите файл сюда, нажмите для выбора, или вставьте через Ctrl+V</p>

        <div class="upload-methods">
-          <button class="btn btn-primary" onclick={triggerFileInput}> Выбрать файл </button>
+          <button class="btn btn-primary" onclick={(e) => { e.stopPropagation(); triggerFileInput(); }}> Выбрать файл </button>

          <button class="btn btn-secondary" onclick={() => (showUrlInput = !showUrlInput)}>
            {showUrlInput ? "Скрыть" : "По URL"}
@@ -3,7 +3,7 @@
  import { onMount } from "svelte";
  import { browser } from "$app/environment";
  import { panelStore, createEmptyPanel } from "../stores/panelStore";
-  import { uiStore, setLoading } from "../stores/uiStore";
+  import { uiStore, setLoading, setCurrentStep } from "../stores/uiStore";
  import { panelStorage } from "../lib/utils/panelStorage";
  import { exportService } from "../lib/services/exportService";
  import type { Panel } from "../lib/types/panel";
@@ -47,6 +47,7 @@
  function handleImageUpload(image: string) {
    uploadedImage = image;
    errorMessage = null;
+    uiStore.setCurrentStep("crop");
  }

  function handleCropComplete(croppedImage: string) {
@@ -62,12 +63,12 @@
    // Сохраняем панель
    panelStorage.savePanel(newPanel);

-    uiStore.setCurrentStep("text");
+    setCurrentStep("text");
  }

  function handleCropCancel() {
    uploadedImage = null;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
  }

  function handleTextUpdate(texts: Panel["texts"]) {
@@ -85,14 +86,14 @@
  function handlePanelSelect(panel: Panel) {
    panelStore.set(panel);
    currentPanel = panel;
-    uiStore.setCurrentStep("preview");
+    setCurrentStep("preview");
  }

  function handlePanelDelete(panelId: string) {
    if (currentPanel?.id === panelId) {
      panelStore.set(null);
      currentPanel = null;
-      uiStore.setCurrentStep("upload");
+      setCurrentStep("upload");
    }
  }

@@ -121,7 +122,7 @@
    currentPanel = null;
    uploadedImage = null;
    croppedImage = null;
-    uiStore.setCurrentStep("upload");
+    setCurrentStep("upload");
  }
 </script>

@@ -141,12 +142,14 @@
    <div class="main-section">
      {#if $uiStore.currentStep === "upload"}
        {#if ImageUpload}
-          <svelte:component this={ImageUpload.default} onImageSelect={handleImageUpload} />
+          {@const Upload = ImageUpload.default}
+          <svelte:component this={Upload} onImageSelect={handleImageUpload} />
        {/if}
      {:else if $uiStore.currentStep === "crop" && uploadedImage}
        {#if ImageCropper}
+          {@const Cropper = ImageCropper.default}
          <svelte:component 
-            this={ImageCropper.default}
+            this={Cropper}
            imageSrc={uploadedImage}
            onCropComplete={handleCropComplete}
            onCancel={handleCropCancel}
@@ -154,19 +157,22 @@
        {/if}
      {:else if $uiStore.currentStep === "text"}
        {#if TextManager}
-          <svelte:component this={TextManager.default} onTextUpdate={handleTextUpdate} />
+          {@const Manager = TextManager.default}
+          <svelte:component this={Manager} onTextUpdate={handleTextUpdate} />
        {/if}
      {:else if $uiStore.currentStep === "preview"}
        {#if PanelPreview}
-          <svelte:component this={PanelPreview.default} onDownload={handleDownload} />
+          {@const Preview = PanelPreview.default}
+          <svelte:component this={Preview} onDownload={handleDownload} />
        {/if}
      {/if}
    </div>

    <div class="sidebar">
      {#if PanelList}
+        {@const List = PanelList.default}
        <svelte:component 
-          this={PanelList.default}
+          this={List}
          onPanelSelect={handlePanelSelect}
          onPanelDelete={handlePanelDelete}
        />