From 799912cfe3bc4e3245cbe31801681ce64d093c7d Mon Sep 17 00:00:00 2001
From: Pedro Schreiber <schreiber.mmb@gmail.com>
Date: Sat, 20 Jul 2024 07:48:37 -0300
Subject: [PATCH] keep-text-in-occlusion (#3277)

---
 ts/routes/image-occlusion/review.ts | 40 ++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/ts/routes/image-occlusion/review.ts b/ts/routes/image-occlusion/review.ts
index 3be8af7fa..9a479fed5 100644
--- a/ts/routes/image-occlusion/review.ts
+++ b/ts/routes/image-occlusion/review.ts
@@ -159,7 +159,7 @@ async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOption
         window.addEventListener("keydown", (event) => {
             const button = document.getElementById("toggle");
             if (button && button.style.display !== "none" && event.key === "M") {
-                toggleMasks();
+                toggleMasks(setupOptions);
             }
         });
         oneTimeSetupDone = true;
@@ -169,7 +169,7 @@ async function setupImageOcclusionInner(setupOptions?: SetupImageOcclusionOption
     const button = document.getElementById("toggle");
     if (button) {
         if (document.querySelector("[data-occludeinactive=\"1\"]")) {
-            button.addEventListener("click", toggleMasks);
+            button.addEventListener("click", () => toggleMasks(setupOptions));
         } else {
             button.style.display = "none";
         }
@@ -182,13 +182,16 @@ function drawShapes(
     canvas: HTMLCanvasElement,
     onWillDrawShapes?: DrawShapesFilter,
     onDidDrawShapes?: DrawShapesCallback,
+    allowedShapes?: Array<typeof Shape>,
 ): void {
     const context: CanvasRenderingContext2D = canvas.getContext("2d")!;
     const size = canvas;
+    const filterByAllowedShapes = (el: Shape) =>
+        (allowedShapes && allowedShapes.length > 0) ? allowedShapes.some(s => el instanceof s) : true;
 
-    let activeShapes = extractShapesFromRenderedClozes(".cloze");
-    let inactiveShapes = extractShapesFromRenderedClozes(".cloze-inactive");
-    let highlightShapes = extractShapesFromRenderedClozes(".cloze-highlight");
+    let activeShapes = extractShapesFromRenderedClozes(".cloze").filter(filterByAllowedShapes);
+    let inactiveShapes = extractShapesFromRenderedClozes(".cloze-inactive").filter(filterByAllowedShapes);
+    let highlightShapes = extractShapesFromRenderedClozes(".cloze-highlight").filter(filterByAllowedShapes);
     let properties = getShapeProperties();
 
     const processed = onWillDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
@@ -230,7 +233,12 @@ function drawShapes(
         });
     }
 
-    onDidDrawShapes?.({ activeShapes, inactiveShapes, highlightShapes, properties }, context);
+    onDidDrawShapes?.({
+        activeShapes,
+        inactiveShapes,
+        highlightShapes,
+        properties,
+    }, context);
 }
 
 interface DrawShapeParameters {
@@ -452,14 +460,16 @@ function getShapeProperties(): ShapeProperties {
     }
 }
 
-const toggleMasks = (): void => {
-    const canvas = document.getElementById(
-        "image-occlusion-canvas",
-    ) as HTMLCanvasElement;
-    const display = canvas.style.display;
-    if (display === "none") {
-        canvas.style.display = "unset";
-    } else {
-        canvas.style.display = "none";
+let hide = false;
+const toggleMasks = (setupOptions?: SetupImageOcclusionOptions): void => {
+    const canvas = document.getElementById("image-occlusion-canvas") as HTMLCanvasElement;
+    const context = canvas.getContext("2d")!;
+
+    hide = !hide;
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    if (hide) {
+        drawShapes(canvas, setupOptions?.onWillDrawShapes, setupOptions?.onDidDrawShapes, [Text]);
+        return;
     }
+    drawShapes(canvas, setupOptions?.onWillDrawShapes, setupOptions?.onDidDrawShapes);
 };