fix for polygon points, add br in cloze strings, & toogle masks button

- fix shapes at edges
- toggle masks button to show/hide masks
- hide clozes string, it contains <br>
- set height for div container (used 'relative' in css)

Author: krmanik

ftl/core/notetypes.ftl

@@ -43,6 +43,7 @@ notetypes-occlusion = Occlusion
 notetypes-occlusion-mask = Mask
 notetypes-occlusion-note = Note
 notetypes-comments-field = Comments
+notetypes-toggle-masks = Toggle Masks
 notetypes-image-occlusion-name = Image Occlusion
 notetypes-hide-all-guess-one = Hide All, Guess One
 notetypes-hide-one-guess-one = Hide One, Guess One

rslib/src/image_occlusion/imagedata.rs

@@ -208,7 +208,7 @@ impl Collection {
         let comments = tr.notetypes_comments_field();
         nt.add_field(comments.as_ref());
         let qfmt = format!(
-            "{{{{cloze:{}}}}}
+            "<div style=\"display: none\">{{{{cloze:{}}}}}</div>
 <div id=container>
     {{{{{}}}}}
     <canvas id=\"canvas\" class=\"image-occlusion-canvas\"></canvas>
@@ -227,8 +227,18 @@ try {{
             tr.notetypes_error_loading_image_occlusion(),
         );
         let afmt = format!(
-            "{{{{{}}}}}\n{}\n{{{{{}}}}}\n{{{{{}}}}}",
-            header, qfmt, back_extra, comments
+            "{{{{{}}}}}
+{}
+<button id=\"toggle\">{}</button>
+<br>
+{{{{{}}}}}
+<br>
+{{{{{}}}}}",
+            header,
+            qfmt,
+            tr.notetypes_toggle_masks(),
+            back_extra,
+            comments,
         );
         nt.add_template(nt.name.clone(), qfmt, afmt);
         nt

rslib/src/image_occlusion/imageocclusion.rs

@@ -1,6 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+use std::fmt::Write;
+
 // split following
 // text = "rect:399.01,99.52,167.09,33.78:fill=#0a2cee:stroke=1"
 // with
@@ -52,12 +54,12 @@ pub fn get_image_cloze_data(text: &str) -> String {
                     }
                     "points" => {
                         if !values[1].is_empty() {
-                            let points_vec: Vec<&str> = values[1].split(' ').collect();
                             let mut point_str = String::new();
-                            for point in &points_vec {
-                                let xy: Vec<&str> = point.split(',').collect();
-                                point_str.push_str(&format!("[{},{}],", xy[0], xy[1]));
+                            for point_pair in values[1].split(' ') {
+                                let Some((x, y)) = point_pair.split_once(',') else { continue };
+                                write!(&mut point_str, "[{},{}],", x, y).unwrap();
                             }
+                            // remove the trailing comma
                             point_str.pop();
                             if !point_str.is_empty() {
                                 result.push_str(&format!("data-points=\"[{}]\" ", point_str));

ts/image-occlusion/generate.ts

@@ -83,7 +83,7 @@ const getCloze = (object, index, relativePos, hideInactive): string => {
     });
 
     clozeData += `:hideinactive=${hideInactive}`;
-    clozeData = `{{c${index + 1}::image-occlusion${clozeData}}}\n`;
+    clozeData = `{{c${index + 1}::image-occlusion${clozeData}}}<br>`;
     return clozeData;
 };
 

ts/image-occlusion/tools/tool-ellipse.ts

@@ -48,6 +48,8 @@ export const drawEllipse = (canvas: fabric.Canvas): void => {
         const pointer = canvas.getPointer(o.e);
         let rx = Math.abs(origX - pointer.x) / 2;
         let ry = Math.abs(origY - pointer.y) / 2;
+        const x = pointer.x;
+        const y = pointer.y;
 
         if (rx > ellipse.strokeWidth) {
             rx -= ellipse.strokeWidth / 2;
@@ -56,30 +58,30 @@ export const drawEllipse = (canvas: fabric.Canvas): void => {
             ry -= ellipse.strokeWidth / 2;
         }
 
-        if (pointer.x < origX) {
+        if (x < origX) {
             ellipse.set({ originX: "right" });
         } else {
             ellipse.set({ originX: "left" });
         }
 
-        if (pointer.y < origY) {
+        if (y < origY) {
             ellipse.set({ originY: "bottom" });
         } else {
             ellipse.set({ originY: "top" });
         }
 
         // do not draw outside of canvas
-        if (pointer.x < ellipse.strokeWidth) {
-            rx = origX / 2;
+        if (x < ellipse.strokeWidth) {
+            rx = (origX + ellipse.strokeWidth + 0.5) / 2;
         }
-        if (pointer.y < ellipse.strokeWidth) {
-            ry = origY / 2;
+        if (y < ellipse.strokeWidth) {
+            ry = (origY + ellipse.strokeWidth + 0.5) / 2;
         }
-        if (pointer.x >= canvas.width - ellipse.strokeWidth) {
-            rx = (canvas.width - origX) / 2;
+        if (x >= canvas.width - ellipse.strokeWidth) {
+            rx = (canvas.width - origX) / 2 - ellipse.strokeWidth + 0.5;
         }
-        if (pointer.y > canvas.height - ellipse.strokeWidth) {
-            ry = (canvas.height - origY) / 2;
+        if (y > canvas.height - ellipse.strokeWidth) {
+            ry = (canvas.height - origY) / 2 - ellipse.strokeWidth + 0.5;
         }
 
         ellipse.set({ rx: rx, ry: ry });

ts/image-occlusion/tools/tool-rect.ts

@@ -63,16 +63,16 @@ export const drawRectangle = (canvas: fabric.Canvas): void => {
 
         // do not draw outside of canvas
         if (x < rect.strokeWidth) {
-            x = 0;
+            x = -rect.strokeWidth + 0.5;
         }
         if (y < rect.strokeWidth) {
-            y = 0;
+            y = -rect.strokeWidth + 0.5;
         }
         if (x >= canvas.width - rect.strokeWidth) {
-            x = canvas.width;
+            x = canvas.width - rect.strokeWidth + 0.5;
         }
         if (y >= canvas.height - rect.strokeWidth) {
-            y = canvas.height;
+            y = canvas.height - rect.strokeWidth + 0.5;
         }
 
         rect.set({

ts/reviewer/image_occlusion.ts

@@ -15,6 +15,17 @@ export function setupImageCloze(): void {
     const size = limitSize({ width: image.naturalWidth, height: image.naturalHeight });
     canvas.width = size.width;
     canvas.height = size.height;
+
+    // set height for div container (used 'relative' in css)
+    const container = document.getElementById("container") as HTMLDivElement;
+    container.style.height = `${image.height}px`;
+
+    // setup button for toggle image occlusion
+    const button = document.getElementById("toggle");
+    if (button) {
+        button.addEventListener("click", toggleMasks);
+    }
+
     drawShapes(ctx);
 }
 
@@ -171,3 +182,13 @@ function getShapeProperty(): {
         };
     }
 }
+
+const toggleMasks = (): void => {
+    const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+    const display = canvas.style.display;
+    if (display === "none") {
+        canvas.style.display = "unset";
+    } else {
+        canvas.style.display = "none";
+    }
+};