From 94060630effc8af5cc42899a8e4d7d65365b536f Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Mon, 9 Feb 2026 10:12:54 +0500
Subject: [PATCH] fix: resolve - first draw dont show preview image

---
 src/components/panel/Preview.svelte |  4 +-
 src/routes/+layout.svelte           |  8 ++-
 src/states/imageConfig.svelte.ts    | 86 ++++++++---------------------
 3 files changed, 31 insertions(+), 67 deletions(-)

diff --git a/src/components/panel/Preview.svelte b/src/components/panel/Preview.svelte
index 538f0b8..6d2bf34 100644
--- a/src/components/panel/Preview.svelte
+++ b/src/components/panel/Preview.svelte
@@ -11,8 +11,6 @@
 
   let { text, stage = $bindable() }: Props = $props();
 
-  let image: HTMLImageElement | undefined = imageConfigState.image;
-
   let x = $derived(textConfigState.paddingX);
   let y = $derived(10 + textConfigState.offsetY);
   let width = $derived(PANEL_SETTINGS.PANEL_WIDTH - 2 * textConfigState.paddingX);
@@ -21,7 +19,7 @@
 
 <Stage width={320} height={100} bind:this={stage}>
   <Layer>
-    <Image {image}></Image>
+    <Image image={imageConfigState.image}></Image>
     <Text
       {text}
       {x}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 750b3aa..98e58dc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import AppHeader from "$components/layout/AppHeader.svelte";
+  import { PANEL_SETTINGS } from "$lib/constants";
+  import { imageConfigState } from "$states/imageConfig.svelte";
   import { themeState } from "$states/theme.svelte";
-  import type { Snippet } from "svelte";
+  import { onMount, type Snippet } from "svelte";
 
   interface Props {
     children: Snippet;
@@ -14,6 +16,10 @@
   });
 
   let { children }: Props = $props();
+
+  onMount(async () => {
+    await imageConfigState.uploadImageByLink(PANEL_SETTINGS.DEFAULT_BACKGROUND_IMAGE);
+  });
 </script>
 
 <div class="container">
diff --git a/src/states/imageConfig.svelte.ts b/src/states/imageConfig.svelte.ts
index 14b4e1c..48b3dfe 100644
--- a/src/states/imageConfig.svelte.ts
+++ b/src/states/imageConfig.svelte.ts
@@ -1,5 +1,3 @@
-import { PANEL_SETTINGS } from "$lib/constants";
-
 export type ImageConfig = {
   image: HTMLImageElement | undefined;
   imageLink: string;
@@ -11,72 +9,35 @@ export type ImageConfig = {
 };
 
 export class ImageConfigState {
-  #state: ImageConfig = $state({
-    image: undefined,
-    imageLink: "",
-    imageReady: false,
-    cropLeft: 0,
-    cropTop: 0,
-    cropRight: 0,
-    cropBottom: 0,
-  });
+  image = $state<HTMLImageElement | undefined>(undefined);
+  imageLink = $state("");
+  imageReady = $state(false);
+  cropLeft = $state(0);
+  cropTop = $state(0);
+  cropRight = $state(0);
+  cropBottom = $state(0);
 
   #currentAbortController: AbortController | null = null;
 
-  get image() {
-    return this.#state.image;
-  }
-  get imageReady() {
-    return this.#state.imageReady;
-  }
-  get imageLink() {
-    return this.#state.imageLink;
-  }
-  get cropLeft() {
-    return this.#state.cropLeft;
-  }
-  get cropTop() {
-    return this.#state.cropTop;
-  }
-  get cropRight() {
-    return this.#state.cropRight;
-  }
-  get cropBottom() {
-    return this.#state.cropBottom;
-  }
-
-  set cropLeft(v) {
-    this.#state.cropLeft = v;
-  }
-  set cropTop(v) {
-    this.#state.cropTop = v;
-  }
-  set cropRight(v) {
-    this.#state.cropRight = v;
-  }
-  set cropBottom(v) {
-    this.#state.cropBottom = v;
-  }
-
   private cleanup() {
     if (this.#currentAbortController) {
       this.#currentAbortController.abort();
       this.#currentAbortController = null;
     }
 
-    if (this.#state.image) {
-      this.#state.image.onload = null;
-      this.#state.image.onerror = null;
-      this.#state.image.src = "";
-      this.#state.image = undefined;
+    if (this.image) {
+      this.image.onload = null;
+      this.image.onerror = null;
+      this.image.src = "";
+      this.image = undefined;
     }
   }
 
   async uploadImageByLink(link: string): Promise<void> {
     this.cleanup();
 
-    this.#state.imageReady = false;
-    this.#state.imageLink = link;
+    this.imageReady = false;
+    this.imageLink = link;
 
     this.#currentAbortController = new AbortController();
     const { signal } = this.#currentAbortController;
@@ -93,15 +54,15 @@ export class ImageConfigState {
       img.onload = () => {
         if (signal.aborted) return;
         onFinished();
-        this.#state.image = img;
-        this.#state.imageReady = true;
+        this.image = img;
+        this.imageReady = true;
         resolve();
       };
 
       img.onerror = () => {
         if (signal.aborted) return;
         onFinished();
-        this.#state.imageReady = false;
+        this.imageReady = false;
         reject(new Error(`Failed to load image: ${link}`));
       };
 
@@ -121,12 +82,12 @@ export class ImageConfigState {
 
   reset() {
     this.cleanup();
-    this.#state.imageLink = "";
-    this.#state.imageReady = false;
-    this.#state.cropLeft = 0;
-    this.#state.cropTop = 0;
-    this.#state.cropRight = 0;
-    this.#state.cropBottom = 0;
+    this.imageLink = "";
+    this.imageReady = false;
+    this.cropLeft = 0;
+    this.cropTop = 0;
+    this.cropRight = 0;
+    this.cropBottom = 0;
   }
 
   destroy() {
@@ -135,4 +96,3 @@ export class ImageConfigState {
 }
 
 export const imageConfigState = new ImageConfigState();
-imageConfigState.uploadImageByLink(PANEL_SETTINGS.DEFAULT_BACKGROUND_IMAGE).catch(() => {});