Merge pull request #195 from pacien/scroll-zoom

viewer/LdPicture: implement mousewheel and pinch zoom

9 files changed, 211 insertions, 42 deletions

diff --git a/compiler/src/Processors.hs b/compiler/src/Processors.hs
index b1b688a..02db325 100644
--- a/compiler/src/Processors.hs
+++ b/compiler/src/Processors.hs
@@ -138,6 +138,17 @@ getImageResolution fsPath =
         (Just w, Just h) -> return $ Resolution w h
         _ -> throwIO $ ProcessingException fsPath "Unable to read image resolution."
 
+getPictureProps :: ItemDescriber
+getPictureProps fsPath resource =
+      getImageResolution fsPath
+  >>= return . Picture resource
+
+
+type ItemDescriber =
+     FilePath
+  -> Resource
+  -> IO GalleryItemProps
+
 
 type ItemFileProcessor =
      FileName        -- ^ Input base path
@@ -147,19 +158,20 @@ type ItemFileProcessor =
 
 itemFileProcessor :: Maybe Resolution -> Cache -> ItemFileProcessor
 itemFileProcessor maxResolution cached inputBase outputBase resClass inputRes =
-  cached processor inPath outPath
-  >> resourceAt outPath relOutPath
-  >>= return . props
+      cached processor inPath outPath
+  >>  resourceAt outPath relOutPath
+  >>= descriptor outPath
   where
     relOutPath = resClass /> inputRes
     inPath = localPath $ inputBase /> inputRes
     outPath = localPath $ outputBase /> relOutPath
-    (processor, props) = processorFor maxResolution $ formatFromPath inputRes
+    (processor, descriptor) = processorFor (formatFromPath inputRes) maxResolution
 
-    processorFor :: Maybe Resolution -> Format -> (FileProcessor, Resource -> GalleryItemProps)
-    processorFor (Just maxRes) PictureFormat = (resizePictureUpTo maxRes, Picture)
-    processorFor Nothing PictureFormat = (copyFileProcessor, Picture)
-    processorFor _ Unknown = (copyFileProcessor, Other) -- TODO: handle video reencoding and others?
+    processorFor :: Format -> Maybe Resolution -> (FileProcessor, ItemDescriber)
+    processorFor PictureFormat (Just maxRes) = (resizePictureUpTo maxRes, getPictureProps)
+    processorFor PictureFormat Nothing = (copyFileProcessor, getPictureProps)
+    -- TODO: handle video reencoding and others?
+    processorFor Unknown _ = (copyFileProcessor, const $ return . Other)
 
 
 type ThumbnailFileProcessor =
diff --git a/compiler/src/Resource.hs b/compiler/src/Resource.hs
index b2a6bbf..e134468 100644
--- a/compiler/src/Resource.hs
+++ b/compiler/src/Resource.hs
@@ -72,7 +72,9 @@ instance ToJSON Resource where
 
 data GalleryItemProps =
     Directory { items :: [GalleryItem] }
-  | Picture { resource :: Resource }
+  | Picture
+    { resource :: Resource
+    , resolution :: Resolution }
   | Other { resource :: Resource }
   deriving (Generic, Show)
 
diff --git a/readme.md b/readme.md
index ff51ef4..dc370a2 100644
--- a/readme.md
+++ b/readme.md
@@ -54,6 +54,8 @@ Builds of this software embed and make use of the following libraries:
   * fortawesome/vue-fontawesome, licensed under the MIT License
   * buefy, licensed under the MIT License
   * core-js, licensed under the MIT License
+  * resize-observer-polyfill, licensed under the MIT License
+  * hammerjs, licensed under the MIT License
   * v-lazy-image, licensed under the MIT License
   * vue, licensed under the MIT License
   * vue-class-component, licensed under the MIT License
diff --git a/viewer/package-lock.json b/viewer/package-lock.json
index 228788d..d4a5fb0 100644
--- a/viewer/package-lock.json
+++ b/viewer/package-lock.json
@@ -1232,6 +1232,11 @@
         "@types/node": "*"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz",
+      "integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ=="
+    },
     "@types/json-schema": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -6487,6 +6492,11 @@
         "pify": "^4.0.1"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -10464,6 +10474,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",
diff --git a/viewer/package.json b/viewer/package.json
index 40a91ba..bc63dfd 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -13,8 +13,11 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@types/hammerjs": "^2.0.36",
     "buefy": "^0.8.15",
     "core-js": "^3.6.4",
+    "hammerjs": "^2.0.8",
+    "resize-observer-polyfill": "^1.5.1",
     "v-lazy-image": "^1.4.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index de1c0dd..956ab6b 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -49,12 +49,17 @@ declare namespace Gallery {
         thumbnail?: Thumbnail
         properties: OtherProperties | PictureProperties | DirectoryProperties,
     }
+    interface Resolution {
+        width: number,
+        height: number,
+    }
     interface OtherProperties {
         type: "other",
     }
     interface PictureProperties {
         type: "picture",
         resource: string,
+        resolution: Resolution
     }
     interface DirectoryProperties {
         type: "directory",
@@ -62,10 +67,7 @@ declare namespace Gallery {
     }
     interface Thumbnail {
         resource: string,
-        resolution: {
-            width: number,
-            height: number,
-        }
+        resolution: Resolution
     }
     type RawTag = string;
     type ItemType = "other" | "picture" | "directory";
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 3170c81..de46bcb 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -18,17 +18,21 @@
 -->
 
 <template>
+  <!-- FIXME: v-dragscroll interferes with pinch-to-zoom -->
   <div
+    ref="containerElement"
     v-dragscroll
-    class="scrollbar"
-    :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
+    class="scrollbar ld-picture-container"
     @click.capture="e => dragScrollClickFix.onClickCapture(e)"
-    @click="$uiStore.toggleFullscreen()"
+    @dblclick="$uiStore.toggleFullscreen()"
+    @dragstart.prevent
     @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
+      ref="imageElement"
       :src="pictureSrc(picture.properties.resource)"
+      class="ld-picture-element"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
       @load="clearSlowLoading"
@@ -38,12 +42,15 @@