feat: add image filters, update some logic and workflow

src/components/panel/Preview.svelte

@@ -14,7 +14,6 @@
   let x = $derived(textConfigState.paddingX);
   let y = $derived(textConfigState.offsetY);
   let width = $derived(PANEL_SETTINGS.PANEL_WIDTH - 2 * textConfigState.paddingX);
-  let height = PANEL_SETTINGS.PANEL_HEIGHT_DEFAULT;
 </script>
 
 <Stage
@@ -23,20 +22,17 @@
   bind:this={stage}
 >
   <Layer>
-    <Image image={imageState.croppedImage}></Image>
+    <Image image={imageState.masterImage} listening={false} />
     <Text
       {text}
       {x}
       {y}
       {width}
-      {height}
       fontSize={textConfigState.fontSize}
       stroke={textConfigState.outlined ? textConfigState.color : "transparent"}
       fill={textConfigState.outlined ? "transparent" : textConfigState.color}
       fontFamily={textConfigState.fontFamily}
       align={textConfigState.align}
-      wrap="none"
-      ellipsis={true}
     />
   </Layer>
 </Stage>

src/components/panel/PreviewManager.svelte

@@ -4,11 +4,13 @@
   import Button from "$components/ui/Button.svelte";
   import { PANEL_SETTINGS, TRANSITION_DURATION, type SlideDirectionType } from "$lib/constants";
   import { downloadService, type DownloadItem } from "$services/downloadService";
+  import { imageState } from "$states/image.svelte";
   import { konvaAllStagesState } from "$states/konvaAllStages.svelte";
   import { konvaStageState } from "$states/konvaStage.svelte";
   import { textsState } from "$states/texts.svelte";
   import { fly } from "svelte/transition";
   import Download from "~icons/lucide/download";
+  import Loader from "~icons/lucide/loader";
   import StickyNote from "~icons/lucide/sticky-note";
   import Preview from "./Preview.svelte";
   import PreviewAll from "./PreviewAll.svelte";
@@ -67,6 +69,9 @@
             in:fly={{ x: xDirection, duration: TRANSITION_DURATION }}
             out:fly={{ x: -xDirection, duration: TRANSITION_DURATION }}
           >
+            <div class="loader" class:loading={imageState.isReady === false}>
+              <Loader />
+            </div>
             <Preview {text} bind:stage={konvaStageState.stage} />
           </div>
         {/key}
@@ -141,4 +146,29 @@
     justify-content: center;
     align-items: center;
   }
+
+  .loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.3s;
+    opacity: 0;
+    &.loading {
+      opacity: 1;
+      animation: spin 3s linear infinite;
+    }
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 </style>