Handle image cropping

src/lib/components/Reader/Cropper.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { afterNavigate } from '$app/navigation';
+  import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
+  import { Button, Modal, Spinner } from 'flowbite-svelte';
+  import { onMount } from 'svelte';
+  import Cropper from 'svelte-easy-crop';
+
+  let open = false;
+  let pixels: Pixels;
+  let loading = false;
+
+  afterNavigate(() => {
+    close();
+  });
+
+  onMount(() => {
+    cropperStore.subscribe((value) => {
+      if (value) {
+        open = value.open;
+      }
+    });
+  });
+
+  function close() {
+    loading = false;
+    cropperStore.set({ open: false });
+  }
+
+  async function onCrop() {
+    if ($cropperStore?.image && $cropperStore?.sentence && pixels) {
+      loading = true;
+      const imageData = await getCroppedImg($cropperStore.image, pixels);
+      updateLastCard(imageData, $cropperStore.sentence);
+      close();
+    }
+  }
+
+  function onCropComplete(e: any) {
+    pixels = e.detail.pixels;
+  }
+</script>
+
+<Modal title="Crop image" bind:open on:{close}>
+  {#if $cropperStore?.image && !loading}
+    <div class=" flex flex-col gap-2">
+      <div class="relative w-full h-[55svh] sm:h-[70svh]">
+        <Cropper
+          zoomSpeed={0.5}
+          maxZoom={10}
+          image={$cropperStore?.image}
+          on:cropcomplete={onCropComplete}
+        />
+      </div>
+      <Button on:click={onCrop}>Crop</Button>
+      <Button on:click={close} outline color="light">Close</Button>
+    </div>
+  {:else}
+    <div class="text-center"><Spinner /></div>
+  {/if}
+</Modal>

src/lib/components/Reader/Reader.svelte

@@ -7,6 +7,7 @@
   import MangaPage from './MangaPage.svelte';
   import { ChervonDoubleLeftSolid, ChervonDoubleRightSolid } from 'flowbite-svelte-icons';
   import { afterUpdate } from 'svelte';
+  import Cropper from './Cropper.svelte';
 
   const volume = $currentVolume;
   const pages = volume?.mokuroData.pages;
@@ -94,6 +95,7 @@
 
 <svelte:window on:resize={zoomDefault} />
 {#if volume && pages}
+  <Cropper />
   <Popover placement="bottom-end" trigger="click" triggeredBy="#page-num" class="z-20">
     <div class="flex flex-col gap-3">
       <div class="flex flex-row items-center gap-5 z-10">

src/lib/components/Reader/TextBoxes.svelte

@@ -2,7 +2,7 @@
   import { clamp, promptConfirmation } from '$lib/util';
   import type { Page } from '$lib/types';
   import { settings } from '$lib/settings';
-  import { updateLastCard } from '$lib/anki-connect';
+  import { imageToWebp, showCropper, updateLastCard } from '$lib/anki-connect';
 
   export let page: Page;
   export let src: File;
@@ -41,9 +41,15 @@
 
   async function onUpdateCard(lines: string[]) {
     if ($settings.ankiConnectSettings.enabled) {
-      promptConfirmation('Add image to last created anki card?', () =>
-        updateLastCard(src, lines.join(' '))
-      );
+      const sentence = lines.join(' ');
+      if ($settings.ankiConnectSettings.cropImage) {
+        showCropper(URL.createObjectURL(src), sentence);
+      } else {
+        promptConfirmation('Add image to last created anki card?', async () => {
+          const imageData = await imageToWebp(src);
+          updateLastCard(imageData, sentence);
+        });
+      }
     }
   }
 </script>
@@ -78,14 +84,12 @@
     font-size: 16pt;
     white-space: nowrap;
     border: 1px solid rgba(0, 0, 0, 0);
-    z-index: 1000;
   }
 
   .text-box:focus,
   .text-box:hover {
     background: rgb(255, 255, 255);
     border: 1px solid rgba(0, 0, 0, 0);
-    z-index: 999 !important;
   }
 
   .text-box p {