From b2849017a0474cc79919a89d0da3cbb15481cda0 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 13 Feb 2024 17:00:34 -0500
Subject: [PATCH] Nothing to see here

---
 src/pages/viewer/ThumbnailBody.svelte         | 15 ++++++--
 .../viewer/stories/ModifyImage.stories.svelte | 35 +++++++++++++++++++
 .../stories/ThumbnailBody.stories.svelte      | 15 ++++++++
 src/viewer/modification/modifySpec.test.js    |  2 +-
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/viewer/stories/ModifyImage.stories.svelte
 create mode 100644 src/pages/viewer/stories/ThumbnailBody.stories.svelte

diff --git a/src/pages/viewer/ThumbnailBody.svelte b/src/pages/viewer/ThumbnailBody.svelte
index 1105b43d8..f37bffda1 100644
--- a/src/pages/viewer/ThumbnailBody.svelte
+++ b/src/pages/viewer/ThumbnailBody.svelte
@@ -20,16 +20,23 @@
   let containerHeight = null;
   let container = null;
   let containerScrollTop = 0;
+
   const itemWidth = 144;
   const itemHeight = 179;
+
+  const MAX_THUMB_WIDTH = 84;
+  const MAX_THUMB_HEIGHT = 119;
+
   $: itemsPerRow =
     containerWidth == null
       ? null
       : Math.max(Math.floor((containerWidth - 60) / itemWidth), 1);
+
   $: paddingLeft =
     containerWidth == null || itemsPerRow == null
       ? 0
       : (containerWidth - itemsPerRow * itemWidth) / 2 + (modify ? -5 : -15);
+
   $: paddingTop =
     startPage == null || itemsPerRow == null
       ? 0
@@ -48,6 +55,7 @@
       );
     }
   }
+
   $: startPage =
     itemsPerRow == null
       ? null
@@ -55,6 +63,7 @@
           Math.floor(containerScrollTop / itemHeight) * itemsPerRow,
           $modification.pageCount,
         );
+
   $: endPage =
     itemsPerRow == null || containerHeight == null
       ? null
@@ -63,14 +72,17 @@
             itemsPerRow,
           $modification.pageCount,
         );
+
   $: overallHeight =
     itemsPerRow == null
       ? null
       : Math.ceil($modification.pageCount / itemsPerRow) * itemHeight;
+
   $: paddingBottom =
     overallHeight == null || endPage == null || itemsPerRow == null
       ? 0
       : overallHeight - Math.ceil(endPage / itemsPerRow) * itemHeight;
+
   $: pages =
     startPage == null ||
     endPage == null ||
@@ -130,9 +142,6 @@
       [page]: selectState,
     };
   }
-
-  const MAX_THUMB_WIDTH = 84;
-  const MAX_THUMB_HEIGHT = 119;
 </script>
 
 <ActionPane bind:actionHeight />
diff --git a/src/pages/viewer/stories/ModifyImage.stories.svelte b/src/pages/viewer/stories/ModifyImage.stories.svelte
new file mode 100644
index 000000000..9d66df899
--- /dev/null
+++ b/src/pages/viewer/stories/ModifyImage.stories.svelte
@@ -0,0 +1,35 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ModifyImage from "../ModifyImage.svelte";
+
+  import { Document } from "@/structure/document.js";
+  import { viewer } from "@/viewer/viewer.js";
+  import { ModificationDescriptor } from "@/viewer/modification/modifySpec.js";
+
+  import document from "../fixtures/document.json";
+
+  viewer.doc = new Document(document);
+
+  export const meta = {
+    title: "Viewer / Modify Image",
+    component: ModifyImage,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  const MAX_THUMB_WIDTH = 84;
+  const MAX_THUMB_HEIGHT = 119;
+
+  const args = {
+    id: document.id,
+    size: 140,
+    maxThumb: [MAX_THUMB_WIDTH, MAX_THUMB_HEIGHT],
+    descriptor: new ModificationDescriptor(),
+  };
+</script>
+
+<Template let:args>
+  <ModifyImage {...args} />
+</Template>
+
+<Story name="default" {args} />
diff --git a/src/pages/viewer/stories/ThumbnailBody.stories.svelte b/src/pages/viewer/stories/ThumbnailBody.stories.svelte
new file mode 100644
index 000000000..a26dc9ab7
--- /dev/null
+++ b/src/pages/viewer/stories/ThumbnailBody.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ThumbnailBody from "../ThumbnailBody.svelte";
+
+  export const meta = {
+    title: "Viewer / Thumbnail Body",
+    component: ThumbnailBody,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <ThumbnailBody />
+</Story>
diff --git a/src/viewer/modification/modifySpec.test.js b/src/viewer/modification/modifySpec.test.js
index 25a9344e5..9473b1627 100644
--- a/src/viewer/modification/modifySpec.test.js
+++ b/src/viewer/modification/modifySpec.test.js
@@ -7,7 +7,7 @@ import {
   CLOCKWISE,
   COUNTER_CLOCKWISE,
   HALFWAY,
-} from "./modifySpec";
+} from "./modifySpec.js";
 
 function runspec(pgNumbers) {
   return runify(pgNumbers).spec();