From 4c904b0c1b964455644867f13e9e3807bb6da1dd Mon Sep 17 00:00:00 2001
From: dspillebeen <danilo.spillebeen@student.uclouvain.be>
Date: Fri, 26 Sep 2025 15:34:44 +0200
Subject: [PATCH] remember translucency

Adding myself to contributors

Added braces surrounding if statement to comply with ninja checks
---
 CONTRIBUTORS                             | 1 +
 ts/routes/image-occlusion/Toolbar.svelte | 3 ++-
 ts/routes/image-occlusion/mask-editor.ts | 5 +++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index d8ac8caf5..a6334b0d9 100644
--- a/CONTRIBUTORS
+++ b/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>
 
 ********************
 
diff --git a/ts/routes/image-occlusion/Toolbar.svelte b/ts/routes/image-occlusion/Toolbar.svelte
index 5b627ffdf..b00e42087 100644
--- a/ts/routes/image-occlusion/Toolbar.svelte
+++ b/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),
diff --git a/ts/routes/image-occlusion/mask-editor.ts b/ts/routes/image-occlusion/mask-editor.ts
index 6d4d0d284..6e34de442 100644
--- a/ts/routes/image-occlusion/mask-editor.ts
+++ b/ts/routes/image-occlusion/mask-editor.ts
@@ -8,10 +8,10 @@ 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 +83,7 @@ export const setupMaskEditorForEdit = async (
         window.requestAnimationFrame(() => {
             onImageLoaded({ noteId: BigInt(noteId) });
         });
+        if (get(opacityStateStore)) { makeMaskTransparent(canvas, true); }
     };
 
     return canvas;