editor: fix bugginess

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

Makefile

@@ -29,8 +29,9 @@ build-js-production:
 	rm -f js/* && npm run build
 
 patch-external:
-	patch -p1 < patches/scroller-perf.patch
-	patch -p1 < patches/scroller-sticky.patch
+	patch -p1 -N < patches/scroller-perf.patch || true
+	patch -p1 -N < patches/scroller-sticky.patch || true
+	bash ./patches/filerobot-patch.sh
 
 watch-js:
 	npm run watch

patches/filerobot-loadImage.js

@@ -0,0 +1,22 @@
+/**
+ * Filerobot has issues with loading images from HTML elements.
+ * We need to wait for the react object to be created properly before loading.
+ * This is a monkey patch to select an existing image using a global, but after wait.
+ */
+
+import loadImageOriginal from './loadImageOriginal.js';
+
+var loadImage = function() {
+    const image = globalThis._fileRobotOverrideImage;
+    if (image) {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve(image);
+            }, 0);
+        });
+    }
+
+    return loadImageOriginal.apply(this, arguments);
+}
+
+export default loadImage;

patches/filerobot-patch.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+target="node_modules/react-filerobot-image-editor/lib/utils"
+
+if [ -f $target/loadImageOriginal.js ]; then
+    echo "Filerobot is already patched, copying patch again ..."
+else
+    if [ ! -f $target/loadImage.js ]; then
+        echo "Filerobot not installed or patch outdated"
+        exit 1
+    fi
+
+    echo "Patching filerobot-image-editor ..."
+    cp $target/loadImage.js $target/loadImageOriginal.js
+fi
+
+cp patches/filerobot-loadImage.js $target/loadImage.js

src/components/viewer/ImageEditor.vue

@@ -52,7 +52,10 @@ export default defineComponent({
   computed: {
     config(): FilerobotImageEditorConfig & { theme: any } {
       return {
-        source: "nonexistent",
+        source:
+          this.photo.h && this.photo.w
+            ? utils.getPreviewUrl(this.photo, false, "screen")
+            : API.IMAGE_DECODABLE(this.photo.fileid, this.photo.etag),
 
         defaultSavedImageName: this.defaultSavedImageName,
         defaultSavedImageType: this.defaultSavedImageType,
@@ -145,10 +148,9 @@ export default defineComponent({
   async mounted() {
     await loadFilerobot();
 
-    const div = <HTMLElement>this.$refs.editor;
-    const config = this.config;
-    config.source = await this.getImg();
+    globalThis._fileRobotOverrideImage = await this.getImage();
 
+    const div = <HTMLElement>this.$refs.editor;
     this.imageEditor = new FilerobotImageEditor(div, this.config);
     this.imageEditor.render();
 
@@ -160,29 +162,25 @@ export default defineComponent({
     if (this.imageEditor) {
       this.imageEditor.terminate();
     }
+    globalThis._fileRobotOverrideImage = undefined;
     window.removeEventListener("keydown", this.handleKeydown, true);
   },
 
   methods: {
-    async getImg(): Promise<any> {
-      if (this.photo.w && this.photo.h) {
-        // Fetch the image to a blob
-        const preview = utils.getPreviewUrl(this.photo, false, 2048);
-
-        // Fetch preview image
+    async getImage(): Promise<HTMLImageElement> {
       const img = new Image();
-        img.height = this.photo.h;
-        img.width = this.photo.w;
+
       await new Promise(async (resolve) => {
         img.onload = resolve;
-          img.src = await fetchImage(preview);
+        img.src = await fetchImage(<string>this.config.source);
       });
 
-        return img;
+      if (this.photo.w && this.photo.h) {
+        img.height = this.photo.h;
+        img.width = this.photo.w;
       }
 
-      // If we don't have the size, we need to use the original image
-      return API.IMAGE_DECODABLE(this.photo.fileid, this.photo.etag);
+      return img;
     },
 
     onClose(closingReason, haveNotSavedChanges) {
@@ -241,13 +239,9 @@ export default defineComponent({
         // Success, emit an appropriate event
         showSuccess(this.t("memories", "Image saved successfully"));
 
-        console.log(state);
-
         if (fileid !== this.photo.fileid) {
-          console.log("Fileid changed", fileid);
           emit("files:file:created", { fileid });
         } else {
-          console.log("Fileid unchanged", fileid);
           emit("files:file:updated", { fileid });
         }
         this.onClose(undefined, false);

src/components/viewer/Viewer.vue

@@ -779,10 +779,7 @@ export default defineComponent({
 
     /** Get base data object */
     getItemData(photo: IPhoto) {
-      const sw = Math.floor(screen.width * devicePixelRatio);
-      const sh = Math.floor(screen.height * devicePixelRatio);
-      let previewUrl = utils.getPreviewUrl(photo, false, [sw, sh]);
-
+      let previewUrl = utils.getPreviewUrl(photo, false, "screen");
       const isvideo = photo.flag & this.c.FLAG_IS_VIDEO;
 
       // Preview aren't animated

src/services/utils/helpers.ts

@@ -5,8 +5,16 @@ import { API } from "../API";
 export function getPreviewUrl(
   photo: IPhoto,
   square: boolean,
-  size: number | [number, number]
+  size: number | [number, number] | "screen"
 ) {
+  // Screen-appropriate size
+  if (size === "screen") {
+    const sw = Math.floor(screen.width * devicePixelRatio);
+    const sh = Math.floor(screen.height * devicePixelRatio);
+    size = [sw, sh];
+  }
+
+  // Convert to array
   const [x, y] = typeof size === "number" ? [size, size] : size;
 
   return API.Q(API.IMAGE_PREVIEW(photo.fileid), {