Merge branch 'main' into pr-4370

CONTRIBUTORS

@@ -246,6 +246,7 @@ Aldlss <ayaldlss@gmail.com>
 Hanna Nilsén <hanni614@student.liu.se>
 Elias Johansson Lara <elias.johanssonlara@gmail.com>
 Toby Penner <tobypenner01@gmail.com>
+Danilo Spillebeen <spillebeendanilo@gmail.com>
 
 ********************
 

ts/routes/image-occlusion/Toolbar.svelte

@@ -32,6 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         saveNeededStore,
         opacityStateStore,
     } from "./store";
+    import { get } from "svelte/store";
     import { drawEllipse, drawPolygon, drawRectangle, drawText } from "./tools/index";
     import { makeMaskTransparent, SHAPE_MASK_COLOR } from "./tools/lib";
     import { enableSelectable, stopDraw } from "./tools/lib";
@@ -233,7 +234,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     onMount(() => {
-        opacityStateStore.set(maskOpacity);
+        maskOpacity = get(opacityStateStore);
         removeHandlers = singleCallback(
             on(document, "click", onClick),
             on(window, "mousemove", onMousemove),

ts/routes/image-occlusion/mask-editor.ts

@@ -8,10 +8,22 @@ import { fabric } from "fabric";
 import { get } from "svelte/store";
 
 import { optimumCssSizeForCanvas } from "./canvas-scale";
-import { hideAllGuessOne, notesDataStore, saveNeededStore, tagsWritable, textEditingState } from "./store";
+import {
+    hideAllGuessOne,
+    notesDataStore,
+    opacityStateStore,
+    saveNeededStore,
+    tagsWritable,
+    textEditingState,
+} from "./store";
 import Toast from "./Toast.svelte";
 import { addShapesToCanvasFromCloze } from "./tools/add-from-cloze";
-import { enableSelectable, makeShapesRemainInCanvas, moveShapeToCanvasBoundaries } from "./tools/lib";
+import {
+    enableSelectable,
+    makeMaskTransparent,
+    makeShapesRemainInCanvas,
+    moveShapeToCanvasBoundaries,
+} from "./tools/lib";
 import { modifiedPolygon } from "./tools/tool-polygon";
 import { undoStack } from "./tools/tool-undo-redo";
 import { enablePinchZoom, onResize, setCanvasSize } from "./tools/tool-zoom";
@@ -83,6 +95,7 @@ export const setupMaskEditorForEdit = async (
         window.requestAnimationFrame(() => {
             onImageLoaded({ noteId: BigInt(noteId) });
         });
+        if (get(opacityStateStore)) { makeMaskTransparent(canvas, true); }
     };
 
     return canvas;