feat: remove browser check to simplicity (AI dumb)

2026-02-04 03:06:50 +05:00
parent 24b4c41039
commit e9c9dc1d69
6 changed files with 110 additions and 169 deletions
@@ -1,34 +1,22 @@
-
 <script lang="ts">
  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
+  import CropperJS from "cropperjs";
  import type { ImageCropResult } from "../lib/types/panel";
  import { ImageService } from "../lib/services/imageService";
  import { uiStore, setLoading } from "../stores/uiStore";
-  
-  let Cropper = $state.raw<any>(undefined);

-  onMount(async () => {
-    if (browser) {
-      const cropperModule = await import("cropperjs");
-      Cropper = cropperModule.default || cropperModule;
-      
-      // Импортируем стили только на клиенте
-
-      
-      // Инициализируем cropper после загрузки
-      initializeCropper();
-    }
-  });
-
-  let { imageSrc, onCropComplete, onCancel }: {
+  let {
+    imageSrc,
+    onCropComplete,
+    onCancel,
+  }: {
    imageSrc: string;
    onCropComplete: (croppedImage: string) => void;
    onCancel: () => void;
  } = $props();

  let imageElement: HTMLImageElement;
-  let cropper: Cropper | null = null;
+  let cropper: CropperJS | null = null;
  let isProcessing = $state(false);
  let errorMessage = $state<string | null>(null);

@@ -44,27 +32,12 @@
  });

  function initializeCropper() {
-    console.log("initializeCropper called, imageElement:", !!imageElement, "Cropper:", !!Cropper);
-    if (!imageElement || !Cropper) {
+    console.log("initializeCropper called, imageElement:", !!imageElement, "CropperJS:", !!CropperJS);
+    if (!imageElement || !CropperJS) {
      return;
    }

-    cropper = new Cropper(imageElement, {
-      aspectRatio: NaN, // Allow any aspect ratio
-      viewMode: 1,
-      dragMode: "move",
-      autoCropArea: 1,
-      restore: false,
-      guides: true,
-      center: true,
-      highlight: false,
-      cropBoxMovable: true,
-      cropBoxResizable: true,
-      toggleDragModeOnDblclick: false,
-      minCropBoxWidth: 320,
-      minCropBoxHeight: 50,
-      responsive: true,
-    });
+    cropper = new CropperJS(imageElement);
  }

  async function handleCrop() {
@@ -89,8 +62,6 @@
      // Используем метод $toCanvas для получения HTMLCanvasElement
      const canvas = await cropperCanvasElement.$toCanvas({
        width: 320,
-        imageSmoothingEnabled: true,
-        imageSmoothingQuality: "high",
      });

      if (!canvas) {
@@ -125,33 +96,19 @@

 <div class="cropper-container">
  <div class="cropper-wrapper">
-    <img
-      bind:this={imageElement}
-      src={imageSrc}
-      alt=""
-      class="cropper-image"
-    />
+    <img bind:this={imageElement} src={imageSrc} alt="" class="cropper-image" />
  </div>

  {#if errorMessage}
    <div class="error-message">
-      <strong>Ошибка:</strong> {errorMessage}
+      <strong>Ошибка:</strong>
+      {errorMessage}
    </div>
  {/if}

  <div class="cropper-actions">
-    <button
-      class="btn btn-secondary"
-      onclick={handleCancel}
-      disabled={isProcessing}
-    >
-      Отмена
-    </button>
-    <button
-      class="btn btn-primary"
-      onclick={handleCrop}
-      disabled={isProcessing}
-    >
+    <button class="btn btn-secondary" onclick={handleCancel} disabled={isProcessing}> Отмена </button>
+    <button class="btn btn-primary" onclick={handleCrop} disabled={isProcessing}>
      {isProcessing ? "Обработка..." : "Применить"}
    </button>
  </div>
@@ -255,4 +212,55 @@
  :global(.cropper-point) {
    background-color: #007bff;
  }
+
+  /* Базовые стили для cropperjs */
+  :global(.cropper-container) {
+    direction: ltr;
+    font-size: 0;
+    line-height: 0;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+  }
+
+  :global(.cropper-container img) {
+    display: block;
+    height: 100%;
+    image-orientation: 0deg;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+  }
+
+  :global(.cropper-wrap-box,
+  .cropper-canvas,
+  .cropper-drag-box,
+  .cropper-crop-box,
+  .cropper-modal) {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  :global(.cropper-wrap-box,
+  .cropper-canvas) {
+    overflow: hidden;
+  }
+
+  :global(.cropper-drag-box) {
+    background-color: #fff;
+    opacity: 0;
+  }
+
+  :global(.cropper-modal) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  :global(.cropper-crop-box) {
+    border-color: rgba(0, 123, 255, 0.5);
+  }
 </style>
@@ -1,40 +1,25 @@
-
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
  import { panelStore } from "../stores/panelStore";
+  import type { TextItem } from "../lib/types/panel";
+  import { Stage, Layer, Image, Text } from "svelte-konva";

-  let { onDownload }: {
+  let {
+    onDownload,
+  }: {
    onDownload?: () => void;
  } = $props();

-  let Stage = $state.raw<any>(undefined);
-  let Layer = $state.raw<any>(undefined);
-  let KonvaImage = $state.raw<any>(undefined);
-  let Text = $state.raw<any>(undefined);
-
  let backgroundImage: HTMLImageElement | undefined = $state(undefined);

  $effect(() => {
-    if (!browser) return;
    const panel = $panelStore;
    if (panel?.backgroundImage && panel.backgroundImage !== backgroundImage?.src) {
      loadImage(panel.backgroundImage);
    }
  });

-  onMount(async () => {
-    if (browser) {
-      const svelteKonva = await import("svelte-konva");
-      Stage = svelteKonva.Stage;
-      Layer = svelteKonva.Layer;
-      KonvaImage = svelteKonva.Image;
-      Text = svelteKonva.Text;
-    }
-  });
-
  function loadImage(src: string) {
-    const img = new Image();
+    const img = document.createElement("img");
    img.onload = () => {
      backgroundImage = img;
    };
@@ -47,7 +32,7 @@
    }
  }

-  function getTextPosition(textItem: any) {
+  function getTextPosition(textItem: TextItem) {
    const panel = $panelStore;
    if (!panel) return { x: 0, y: 0 };
    const panelWidth = 320;
@@ -71,13 +56,11 @@
  <div class="preview-header">
    <h2>Предпросмотр панели</h2>
    {#if $panelStore}
-      <button class="btn btn-primary" onclick={handleDownload}>
-        Скачать
-      </button>
+      <button class="btn btn-primary" onclick={handleDownload}> Скачать </button>
    {/if}
  </div>

-  {#if $panelStore && Stage}
+  {#if $panelStore}
    <div class="preview-sections">
      <!-- Превью чистой картинки -->
      <div class="preview-section">
@@ -86,11 +69,7 @@
          <Stage width={320} height={$panelStore.height}>
            <Layer>
              {#if backgroundImage}
-                <KonvaImage
-                  image={backgroundImage}
-                  width={320}
-                  height={$panelStore.height}
-                />
+                <Image image={backgroundImage} width={320} height={$panelStore.height} />
              {/if}
            </Layer>
          </Stage>
@@ -102,29 +81,25 @@
        <h3>С текстом</h3>
        <div class="canvas-container">
          <Stage width={320} height={$panelStore.height}>
-        <Layer>
-          {#if backgroundImage}
-            <KonvaImage
-              image={backgroundImage}
-              width={320}
-              height={$panelStore.height}
-            />
-          {/if}
-          {#each $panelStore.texts || [] as textItem (textItem.id)}
-            {@const textPosition = getTextPosition(textItem)}
-            <Text
-              text={textItem.text}
-              fontSize={textItem.fontSize}
-              fill={textItem.color}
-              fontFamily={textItem.fontFamily}
-              x={textPosition.x}
-              y={textPosition.y}
-              align={textItem.textAlign}
-              width={320 - (textItem.paddingX * 2)}
-            />
-          {/each}
-        </Layer>
-      </Stage>
+            <Layer>
+              {#if backgroundImage}
+                <Image image={backgroundImage} width={320} height={$panelStore.height} />
+              {/if}
+              {#each $panelStore.texts || [] as textItem (textItem.id)}
+                {@const textPosition = getTextPosition(textItem)}
+                <Text
+                  text={textItem.text}
+                  fontSize={textItem.fontSize}
+                  fill={textItem.color}
+                  fontFamily={textItem.fontFamily}
+                  x={textPosition.x}
+                  y={textPosition.y}
+                  align={textItem.textAlign}
+                  width={320 - textItem.paddingX * 2}
+                />
+              {/each}
+            </Layer>
+          </Stage>
        </div>
      </div>
    </div>
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { browser } from "$app/environment";
  import type { TextItem } from "../lib/types/panel";
  import { panelStore } from "../stores/panelStore";
+  import { Stage, Layer, Image, Text } from "svelte-konva";

  let {
    textItem,
@@ -12,32 +11,17 @@
    height: number;
  } = $props();

-  let Stage = $state.raw<any>(undefined);
-  let Layer = $state.raw<any>(undefined);
-  let KonvaImage = $state.raw<any>(undefined);
-  let Text = $state.raw<any>(undefined);
  let bgImage: HTMLImageElement | undefined = $state(undefined);
  let currentPanel = $state($panelStore);

-  onMount(async () => {
-    if (browser) {
-      const svelteKonva = await import("svelte-konva");
-      Stage = svelteKonva.Stage;
-      Layer = svelteKonva.Layer;
-      KonvaImage = svelteKonva.Image;
-      Text = svelteKonva.Text;
-    }
-  });
-
  $effect(() => {
-    if (!browser) return;
    if (currentPanel?.backgroundImage && currentPanel.backgroundImage !== bgImage?.src) {
      loadImage(currentPanel.backgroundImage);
    }
  });

  function loadImage(src: string) {
-    const img = new Image();
+    const img = document.createElement("img");
    img.onload = () => {
      bgImage = img;
    };
@@ -66,11 +50,11 @@
 </script>

 <div class="text-preview">
-  {#if Stage && bgImage}
+  {#if bgImage}
    <div class="canvas-container">
      <Stage width={320} {height}>
        <Layer>
-          <KonvaImage image={bgImage} width={320} {height} />
+          <Image image={bgImage} width={320} {height} />
          <Text
            text={textItem.text}
            fontSize={textItem.fontSize}