fix: reset image button in io note editor (#2602)

ts/editor/NoteEditor.svelte

@@ -42,6 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { bridgeCommand } from "@tslib/bridgecommand";
     import * as tr from "@tslib/ftl";
+    import { resetIOImage } from "image-occlusion/mask-editor";
     import { onMount, tick } from "svelte";
     import { get, writable } from "svelte/store";
 
@@ -402,6 +403,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         imageOcclusionMode = options.mode;
         if (options.mode.kind === "add") {
             fieldStores[1].set(options.html);
+
+            // new image is being added
+            if (isIOImageLoaded) {
+                resetIOImage(options.mode.imagePath);
+            }
         } else {
             const clozeNote = get(fieldStores[0]);
             if (clozeNote.includes("oi=1")) {

ts/image-occlusion/MaskEditor.svelte

@@ -5,10 +5,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import type { PanZoom } from "panzoom";
     import panzoom from "panzoom";
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
     import type { IOMode } from "./lib";
-    import { setupMaskEditor, setupMaskEditorForEdit } from "./mask-editor";
+    import {
+        setCanvasZoomRatio,
+        setupMaskEditor,
+        setupMaskEditorForEdit,
+    } from "./mask-editor";
     import Toolbar from "./Toolbar.svelte";
 
     export let mode: IOMode;
@@ -44,6 +48,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             });
         }
     }
+
+    onMount(() => {
+        window.addEventListener("resize", () => {
+            setCanvasZoomRatio(canvas, instance);
+        });
+    });
+
+    onDestroy(() => {
+        window.removeEventListener("resize", () => {
+            setCanvasZoomRatio(canvas, instance);
+        });
+    });
 </script>
 
 <Toolbar {canvas} {instance} {iconSize} activeTool={startingTool} />

ts/image-occlusion/Toolbar.svelte

@@ -18,7 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         mdiSquare,
         mdiViewDashboard,
     } from "./icons";
-    import { setupMaskEditor } from "./mask-editor";
     import { hideAllGuessOne } from "./store";
     import { drawEllipse, drawPolygon, drawRectangle } from "./tools/index";
     import { makeMaskTransparent } from "./tools/lib";
@@ -78,11 +77,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         canvas.selectionColor = "rgba(100, 100, 255, 0.3)";
     };
 
-    const resetIOImage = (path) => {
-        setupMaskEditor(path, instance);
-    };
-    globalThis.resetIOImage = resetIOImage;
-
     const setOcclusionFieldForDesktop = () => {
         const clist = document.body.classList;
         if (

ts/image-occlusion/mask-editor.ts

@@ -102,7 +102,7 @@ const getImageData = (imageData): string => {
     return "data:image/png;base64," + b64encoded;
 };
 
-const setCanvasZoomRatio = (
+export const setCanvasZoomRatio = (
     canvas: fabric.Canvas,
     instance: PanZoom,
 ): void => {
@@ -140,3 +140,22 @@ function containerSize(): Size {
         height: container.clientHeight,
     };
 }
+
+export async function resetIOImage(path) {
+    const imageData = await getImageForOcclusion({ path });
+    const image = document.getElementById("image") as HTMLImageElement;
+    image.src = getImageData(imageData.data!);
+    const canvas = globalThis.canvas;
+
+    image.onload = function() {
+        const size = optimumCssSizeForCanvas(
+            { width: image.naturalWidth, height: image.naturalHeight },
+            containerSize(),
+        );
+        canvas.setWidth(size.width);
+        canvas.setHeight(size.height);
+        image.height = size.height;
+        image.width = size.width;
+    };
+}
+globalThis.resetIOImage = resetIOImage;