From 96ac1122b9f448f92f991de1081007f9b4c1d1bc Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 25 Mar 2024 14:32:42 -0400
Subject: [PATCH] Debugging

---
 src/pages/viewer/ModifyImage.svelte     | 10 ++--
 src/pages/viewer/ThumbnailBody.svelte   | 44 +++++++-------
 src/pages/viewer/pane/ModifyPane.svelte | 80 ++++++++++++-------------
 src/viewer/modification/modification.ts |  5 +-
 4 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/src/pages/viewer/ModifyImage.svelte b/src/pages/viewer/ModifyImage.svelte
index 3865136d1..f4c95a2f8 100644
--- a/src/pages/viewer/ModifyImage.svelte
+++ b/src/pages/viewer/ModifyImage.svelte
@@ -19,7 +19,7 @@
       ? $viewer.document
       : $viewer.document != null && id == $viewer.document.id
         ? $viewer.document
-        : modification.documentCache[id];
+        : $modification.documentCache[id];
 
   const DEFAULT_PAGE_SIZE = 1;
   $: pageSize =
@@ -33,12 +33,12 @@
 
   $: {
     if ($viewer.document != null && id != $viewer.document.id) {
-      if (modification.documentCache[id] == null) {
-        modification.documentCache[id] = {};
+      if ($modification.documentCache[id] == null) {
+        $modification.documentCache[id] = {};
         // Update the document cache
         getDocument(id, null).then((doc) => {
-          modification.documentCache[doc.id] = doc;
-          modification.documentCache = modification.documentCache;
+          $modification.documentCache[doc.id] = doc;
+          $modification.documentCache = $modification.documentCache;
         });
       }
     }
diff --git a/src/pages/viewer/ThumbnailBody.svelte b/src/pages/viewer/ThumbnailBody.svelte
index 9c683c4fc..331c92a2d 100644
--- a/src/pages/viewer/ThumbnailBody.svelte
+++ b/src/pages/viewer/ThumbnailBody.svelte
@@ -38,12 +38,12 @@
   // Page objects
   $: {
     if (
-      modification.modifySpec == null &&
+      $modification.modifySpec == null &&
       $viewer.document != null &&
       $viewer.document.pageCount != null
     ) {
       // Init page spec
-      modification.initSpec(
+      $modification.initSpec(
         ModificationSpec.getDocument($viewer.document.pageCount),
       );
     }
@@ -53,7 +53,7 @@
       ? null
       : Math.min(
           Math.floor(containerScrollTop / itemHeight) * itemsPerRow,
-          modification.pageCount,
+          $modification.pageCount,
         );
   $: endPage =
     itemsPerRow == null || containerHeight == null
@@ -61,12 +61,12 @@
       : Math.min(
           Math.ceil((containerScrollTop + containerHeight) / itemHeight) *
             itemsPerRow,
-          modification.pageCount,
+          $modification.pageCount,
         );
   $: overallHeight =
     itemsPerRow == null
       ? null
-      : Math.ceil(modification.pageCount / itemsPerRow) * itemHeight;
+      : Math.ceil($modification.pageCount / itemsPerRow) * itemHeight;
   $: paddingBottom =
     overallHeight == null || endPage == null || itemsPerRow == null
       ? 0
@@ -75,9 +75,9 @@
     startPage == null ||
     endPage == null ||
     itemsPerRow == null ||
-    modification.modifySpec == null
+    $modification.modifySpec == null
       ? []
-      : modification.modifySpec
+      : $modification.modifySpec
           .slice(startPage, endPage - startPage + 1)
           .toDescriptors()
           .map((descriptor, i) => ({
@@ -88,8 +88,8 @@
               descriptor.id == null ? $viewer.document.id : descriptor.id,
           }));
 
-  $: showInserts = !modification.modifyHasSelection;
-  $: insertOnly = modification.hasCopyBuffer;
+  $: showInserts = !$modification.modifyHasSelection;
+  $: insertOnly = $modification.hasCopyBuffer;
 
   function handleScroll() {
     if (container == null) return;
@@ -105,19 +105,19 @@
       return;
     }
 
-    selectState = selectState || !modification.modifySelectedMap[page];
+    selectState = selectState || !$modification.modifySelectedMap[page];
     if (selectState) {
       if (shift && lastSelected != null) {
         // Shift selection
         if (lastSelected < page) {
           // Forwards selection
           for (let i = lastSelected + 1; i < page; i++) {
-            modification.modifySelectedMap[i] = true;
+            $modification.modifySelectedMap[i] = true;
           }
         } else {
           // Backwards selection
           for (let i = lastSelected - 1; i > page; i--) {
-            modification.modifySelectedMap[i] = true;
+            $modification.modifySelectedMap[i] = true;
           }
         }
       }
@@ -125,8 +125,8 @@
     } else {
       lastSelected = null;
     }
-    modification.modifySelectedMap = {
-      ...modification.modifySelectedMap,
+    $modification.modifySelectedMap = {
+      ...$modification.modifySelectedMap,
       [page]: selectState,
     };
   }
@@ -154,7 +154,7 @@
       <span class="item" style="width: {itemWidth}px; height: {itemHeight}px">
         <span
           class="imgwrap"
-          class:selected={modification.modifySelectedMap[page.index]}
+          class:selected={$modification.modifySelectedMap[page.index]}
         >
           <div class="pgnum" class:left={!modify}>
             {$_("document.pageAbbrev")}
@@ -169,17 +169,17 @@
             {/if}
             {#if showInserts}
               <div
-                on:click={() => modification.selectInsert(page.index)}
+                on:click={() => $modification.selectInsert(page.index)}
                 class="insert before"
-                class:emphasized={(insertOnly && !modification.hasInsert) ||
-                  modification.insert == page.index}
+                class:emphasized={(insertOnly && !$modification.hasInsert) ||
+                  $modification.insert == page.index}
               />
-              {#if page.index == modification.pageCount - 1}
+              {#if page.index == $modification.pageCount - 1}
                 <div
-                  on:click={() => modification.selectInsert(page.index + 1)}
+                  on:click={() => $modification.selectInsert(page.index + 1)}
                   class="insert after"
-                  class:emphasized={(insertOnly && !modification.hasInsert) ||
-                    modification.insert == page.index + 1}
+                  class:emphasized={(insertOnly && !$modification.hasInsert) ||
+                    $modification.insert == page.index + 1}
                 />
               {/if}
             {/if}
diff --git a/src/pages/viewer/pane/ModifyPane.svelte b/src/pages/viewer/pane/ModifyPane.svelte
index dc156d040..02a4c9340 100644
--- a/src/pages/viewer/pane/ModifyPane.svelte
+++ b/src/pages/viewer/pane/ModifyPane.svelte
@@ -15,65 +15,65 @@
   const MAX_THUMB_HEIGHT = 39;
 
   $: {
-    console.log(modification);
+    console.log($modification);
   }
 </script>
 
-{#if modification.modifyHasSelection}
+{#if $modification.modifyHasSelection}
   <h3>
     {$_("modifyPane.pagesSelected", {
-      values: { n: modification.modifyNumSelected },
+      values: { n: $modification.modifyNumSelected },
     })}
   </h3>
   <div class="buttonpadded">
-    {#if modification.uncommittedChanges}
+    {#if $modification.uncommittedChanges}
       <Button
         tertiary={true}
         on:click={() => {
-          modify(modification, cancelActions);
+          modify($modification, cancelActions);
         }}
       >
         {$_("modifyPane.applyModifications")}
       </Button>
     {/if}
-    <Button on:click={() => modification.copy()}
+    <Button on:click={() => $modification.copy()}
       >{$_("modifyPane.duplicate")}</Button
     >
-    {#if modification.modifyNumSelected < modification.pageCount}
-      <Button on:click={() => modification.cut()}
+    {#if $modification.modifyNumSelected < $modification.pageCount}
+      <Button on:click={() => $modification.cut()}
         >{$_("modifyPane.move")}</Button
       >
     {/if}
-    <Button on:click={() => modification.rotateClockwise()}
+    <Button on:click={() => $modification.rotateClockwise()}
       >{$_("modifyPane.rotate")}</Button
     >
-    <Button secondary={true} on:click={() => modification.modifyUnselect()}>
+    <Button secondary={true} on:click={() => $modification.modifyUnselect()}>
       {$_("modifyPane.unselect")}
     </Button>
-    {#if modification.modifyNumSelected < modification.pageCount}
-      <Button danger={true} on:click={() => modification.remove()}>
+    {#if $modification.modifyNumSelected < $modification.pageCount}
+      <Button danger={true} on:click={() => $modification.remove()}>
         {$_("modifyPane.remove")}
       </Button>
     {/if}
   </div>
-{:else if modification.hasCopyBuffer && $viewer.document != null}
+{:else if $modification.hasCopyBuffer && $viewer.document != null}
   <h3>
-    {#if modification.hasInsert}
+    {#if $modification.hasInsert}
       {$_("modifyPane.insertPages", {
-        values: { n: modification.copyBufferLength },
+        values: { n: $modification.copyBufferLength },
       })}
     {:else}
       {$_("modifyPane.pagesPending", {
-        values: { n: modification.copyBufferLength },
+        values: { n: $modification.copyBufferLength },
       })}
     {/if}
     <div class="buffer">
-      {#each modification.copyBuffer
+      {#each $modification.copyBuffer
         .slice(0, MAX_BUFFER_SIZE)
         .toDescriptors() as descriptor, i (JSON.stringify(descriptor.json()))}
         <span
           class="item"
-          class:faded={modification.copyBufferLength > MAX_BUFFER_SIZE &&
+          class:faded={$modification.copyBufferLength > MAX_BUFFER_SIZE &&
             i == MAX_BUFFER_SIZE - 1}
         >
           <Modification {descriptor}>
@@ -93,51 +93,51 @@
   </h3>
 
   <p>
-    {#if modification.hasInsert}
-      {#if modification.insert == 0}
+    {#if $modification.hasInsert}
+      {#if $modification.insert == 0}
         {$_("modifyPane.insertBegin", {
-          values: { n: modification.copyBufferLength },
+          values: { n: $modification.copyBufferLength },
         })}
-      {:else if modification.insert == modification.pageCount}
+      {:else if $modification.insert == $modification.pageCount}
         {$_("modifyPane.insertEnd", {
-          values: { n: modification.copyBufferLength },
+          values: { n: $modification.copyBufferLength },
         })}
       {:else}
         {$_("modifyPane.insertBetween", {
           values: {
-            n: modification.copyBufferLength,
-            p0: modification.insert,
-            p1: modification.insert + 1,
+            n: $modification.copyBufferLength,
+            p0: $modification.insert,
+            p1: $modification.insert + 1,
           },
         })}
       {/if}
     {:else}
       {$_("modifyPange.click", {
-        values: { n: modification.copyBufferLength },
+        values: { n: $modification.copyBufferLength },
       })}
     {/if}
   </p>
   <div class="buttonpadded">
-    {#if modification.hasInsert}
-      <Button on:click={() => modification.pasteAtInsert()}
+    {#if $modification.hasInsert}
+      <Button on:click={() => $modification.pasteAtInsert()}
         >{$_("modifyPane.insert")}</Button
       >
     {:else}
-      <Button on:click={() => modification.pasteAtEnd()}
+      <Button on:click={() => $modification.pasteAtEnd()}
         >{$_("modifyPane.insertAtEnd")}</Button
       >
     {/if}
-    <Button secondary={true} on:click={() => modification.clearCopyBuffer()}>
+    <Button secondary={true} on:click={() => $modification.clearCopyBuffer()}>
       {$_("dialog.cancel")}
     </Button>
   </div>
-{:else if modification.hasInsert}
+{:else if $modification.hasInsert}
   <h3>{$_("modifyPane.insertPosition")}</h3>
   <div class="buttonpadded">
     <Button on:click={showInsertDialog}
       >{$_("modifyPane.insertOtherDoc")}</Button
     >
-    <Button secondary={true} on:click={() => modification.clearInsertion()}>
+    <Button secondary={true} on:click={() => $modification.clearInsertion()}>
       {$_("dialog.cancel")}
     </Button>
   </div>
@@ -148,27 +148,27 @@
   </p>
 {/if}
 
-{#if modification.hasHistory && !modification.hasInsert && !modification.hasCopyBuffer && !modification.modifyHasSelection}
+{#if $modification.hasHistory && !$modification.hasInsert && !$modification.hasCopyBuffer && !$modification.modifyHasSelection}
   <div class="buttonpadded">
-    {#if modification.uncommittedChanges}
+    {#if $modification.uncommittedChanges}
       <Button
         tertiary={true}
         on:click={() => {
-          modify(modification, cancelActions);
+          modify($modification, cancelActions);
         }}
       >
         {$_("modifyPane.applyModifications")}
       </Button>
     {/if}
     <Button
-      disabled={!modification.canUndo}
+      disabled={!$modification.canUndo}
       secondary={true}
-      on:click={() => modification.undo()}>{$_("modifyPane.undo")}</Button
+      on:click={() => $modification.undo()}>{$_("modifyPane.undo")}</Button
     >
     <Button
-      disabled={!modification.canRedo}
+      disabled={!$modification.canRedo}
       secondary={true}
-      on:click={() => modification.redo()}>{$_("modifyPane.redo")}</Button
+      on:click={() => $modification.redo()}>{$_("modifyPane.redo")}</Button
     >
   </div>
 {/if}
diff --git a/src/viewer/modification/modification.ts b/src/viewer/modification/modification.ts
index eab3b9032..845d969fc 100644
--- a/src/viewer/modification/modification.ts
+++ b/src/viewer/modification/modification.ts
@@ -1,3 +1,4 @@
+import { Writable, writable } from "svelte/store";
 import {
   runify,
   Empty,
@@ -271,4 +272,6 @@ class Modification {
   }
 }
 
-export const modification = new Modification();
+export const modification: Writable<Modification> = writable(
+  new Modification(),
+);