More QOL changes

src/lib/components/Reader/Cropper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate } from '$app/navigation';
+  import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { cropperStore, getCroppedImg, updateLastCard, type Pixels } from '$lib/anki-connect';
   import { settings } from '$lib/settings';
   import { Button, Modal, Spinner } from 'flowbite-svelte';
@@ -14,6 +14,13 @@
     close();
   });
 
+  beforeNavigate((nav) => {
+    if (open) {
+      nav.cancel();
+      close();
+    }
+  });
+
   onMount(() => {
     cropperStore.subscribe((value) => {
       if (value) {
@@ -28,7 +35,7 @@
   }
 
   async function onCrop() {
-    if ($cropperStore?.image && $cropperStore?.sentence && pixels) {
+    if ($cropperStore?.image && pixels) {
       loading = true;
       const imageData = await getCroppedImg($cropperStore.image, pixels);
       updateLastCard(imageData, $cropperStore.sentence);

src/lib/components/Reader/Reader.svelte

@@ -195,8 +195,8 @@
       const { clientX, clientY } = event;
       const { scale } = $panzoomStore.getTransform();
 
-      if (scale < 0.6) {
-        $panzoomStore.zoomTo(clientX, clientY, 1.4);
+      if (scale < 1) {
+        $panzoomStore.zoomTo(clientX, clientY, 1.5);
       } else {
         zoomFitToScreen();
       }

src/lib/components/Reader/TextBoxes.svelte

@@ -45,6 +45,8 @@
   $: border = $settings.textBoxBorders ? '1px solid red' : 'none';
   $: contenteditable = $settings.textEditable;
 
+  $: triggerMethod = $settings.ankiConnectSettings.triggerMethod || 'both';
+
   async function onUpdateCard(lines: string[]) {
     if ($settings.ankiConnectSettings.enabled) {
       const sentence = lines.join(' ');
@@ -60,7 +62,14 @@
   }
 
   function onContextMenu(event: Event, lines: string[]) {
-    if ($settings.ankiConnectSettings.enabled) {
+    if (triggerMethod === 'both' || triggerMethod === 'rightClick') {
+      event.preventDefault();
+      onUpdateCard(lines);
+    }
+  }
+
+  function onDoubleTap(event: Event, lines: string[]) {
+    if (triggerMethod === 'both' || triggerMethod === 'doubleTap') {
       event.preventDefault();
       onUpdateCard(lines);
     }
@@ -81,7 +90,7 @@
     style:writing-mode={writingMode}
     role="none"
     on:contextmenu={(e) => onContextMenu(e, lines)}
-    on:dblclick={() => onUpdateCard(lines)}
+    on:dblclick={(e) => onDoubleTap(e, lines)}
     {contenteditable}
   >
     {#each lines as line}

src/lib/components/Settings/AnkiConnectSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { settings, updateAnkiSetting } from '$lib/settings';
-  import { AccordionItem, Label, Toggle, Input, Helper } from 'flowbite-svelte';
+  import { AccordionItem, Label, Toggle, Input, Helper, Select } from 'flowbite-svelte';
 
   $: disabled = !$settings.ankiConnectSettings.enabled;
 
@@ -12,18 +12,27 @@
 
   let pictureField = $settings.ankiConnectSettings.pictureField;
   let sentenceField = $settings.ankiConnectSettings.sentenceField;
+
+  let triggerMethod = $settings.ankiConnectSettings.triggerMethod;
+
+  const triggerOptions = [
+    { value: 'rightClick', name: 'Right click (long press on mobile)' },
+    { value: 'doubleTap', name: 'Double tap' },
+    { value: 'both', name: 'Both' }
+  ];
 </script>
 
 <AccordionItem>
   <span slot="header">Anki Connect</span>
   <div class="flex flex-col gap-5">
     <Helper
-      >For anki connect integration to work, you must add the reader (<code class="text-primary-500">{$page.url.origin}</code>) to your anki connect <b
-        class="text-primary-500">webCorsOriginList</b
-      > list</Helper
+      >For anki connect integration to work, you must add the reader (<code class="text-primary-500"
+        >{$page.url.origin}</code
+      >) to your anki connect <b class="text-primary-500">webCorsOriginList</b> list</Helper
     >
     <Helper>
-      To trigger the anki connect integration, double click or right click (long press on mobile) any text box.
+      To trigger the anki connect integration, double click or right click (long press on mobile)
+      any text box.
     </Helper>
     <div>
       <Toggle bind:checked={enabled} on:change={() => updateAnkiSetting('enabled', enabled)}
@@ -70,5 +79,15 @@
         on:change={() => updateAnkiSetting('grabSentence', grabSentence)}>Grab sentence</Toggle
       >
     </div>
+    <div>
+      <Label>
+        Trigger method:
+        <Select
+          on:change={() => updateAnkiSetting('triggerMethod', triggerMethod)}
+          items={triggerOptions}
+          bind:value={triggerMethod}
+        />
+      </Label>
+    </div>
   </div>
 </AccordionItem>

src/lib/settings/settings.ts

@@ -31,6 +31,7 @@ export type AnkiConnectSettings = {
   cropImage: boolean;
   overwriteImage: boolean;
   grabSentence: boolean;
+  triggerMethod: 'rightClick' | 'doubleTap' | 'both'
 }
 
 export type VolumeDefaults = {
@@ -90,7 +91,8 @@ const defaultSettings: Settings = {
     grabSentence: false,
     overwriteImage: true,
     pictureField: 'Picture',
-    sentenceField: 'Sentence'
+    sentenceField: 'Sentence',
+    triggerMethod: 'both'
   }
 };