implement text cloze and show toast after cloze generation

Author: krmanik

ftl/core/editing.ftl

@@ -78,6 +78,7 @@ editing-hide-all-guess-one = Hide All, Guess One
 editing-hide-one-guess-one = Hide One, Guess One
 editing-question-mask-color = Question Mask Color
 editing-answer-mask-color = Answer Mask Color
+editing-error-generating-cloze = Error occurred in generating image cloze
 
 ## Image Occlusion notes editing
 

rslib/src/image_occlusion/io_back_template.html

@@ -27,13 +27,16 @@
 
             if (cloze.children.length) {
                 if (cloze.children[0].className.includes("cloze-inactive")) {
-                    draw(shape, qColor);
+                    draw(shape, qColor, aColor);
+                }
+                if (shape == "i-text" && cloze.children[0].className == "cloze") {
+                    draw(shape, aColor, aColor);
                 }
             }
         }
     }
 
-    function draw(shape, color) {
+    function draw(shape, color, aColor) {
         ctx.fillStyle = color;
 
         switch (shape) {
@@ -83,6 +86,15 @@
                 ctx.closePath();
                 ctx.fill();
                 break;
+
+            case "i-text":
+                ctx.font = `${cloze.dataset.fontSize}px ${cloze.dataset.fontFamily}`;
+                if (aColor === color) {
+                    ctx.fillText(cloze.dataset.text, cloze.dataset.left, cloze.dataset.top);
+                } else {
+                    ctx.fillText("[...]", cloze.dataset.left, cloze.dataset.top);
+                }
+                break;
         }
     }
 </script>

rslib/src/image_occlusion/io_front_template.html

@@ -83,6 +83,11 @@
                 ctx.closePath();
                 ctx.fill();
                 break;
+
+            case "i-text":
+                ctx.font = `${cloze.dataset.fontSize}px ${cloze.dataset.fontFamily}`;
+                ctx.fillText("[...]", cloze.dataset.left, cloze.dataset.top);
+                break;       
         }
     }
 </script>

ts/image-occlusion/Toast.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import IconButton from "../components/IconButton.svelte";
+    import { mdiClose } from "./icons";
+
+    export let type: "success" | "error" = "success";
+    export let message;
+    export let showToast = false;
+
+    const closeToast = () => {
+        showToast = false;
+    };
+</script>
+
+{#if showToast}
+    <div class="toast-container">
+        <div class="toast {type === 'success' ? 'success' : 'error'}">
+            {message}
+            <IconButton iconSize={96} on:click={closeToast} class="toast-icon">
+                {@html mdiClose}</IconButton
+            >
+        </div>
+    </div>
+{/if}
+
+<style>
+    .toast-container {
+        position: fixed;
+        bottom: 3rem;
+        z-index: 100;
+        width: 100%;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+    }
+
+    .toast {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        background-color: #fff;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+        width: 60%;
+        justify-content: space-between;
+    }
+
+    .success {
+        background: #66bb6a;
+        color: white;
+    }
+
+    .error {
+        background: #ef5350;
+        color: white;
+    }
+
+    :global(.toast-icon) {
+        background: unset !important;
+        color: white !important;
+        border: none !important;
+    }
+</style>

ts/image-occlusion/generate.ts

@@ -2,17 +2,24 @@ import { addImageOcclusionNotes } from "./lib";
 import { getAnswerMaskColor } from "./tools/lib";
 import { noteFieldsData, tagsWritable } from "./store";
 import { get } from "svelte/store";
+import Toast from "./Toast.svelte";
+import * as tr from "@tslib/ftl";
 
-let divData = ["type", "left", "top", "width", "height", "fill", "stroke", "strokeWidth", "angle", "radius", "startAngle", "endAngle", "rx", "ry", "points"];
+let divData = ["type", "left", "top", "width", "height", "fill", "stroke", "strokeWidth", "angle", "radius", "startAngle", "endAngle", "rx", "ry", "points", "text", "fontSize", "fontFamily"];
 
 export function generate(imagePath: string, generateTye: string, deckId: number): void {
     let canvas = globalThis.canvas;
     let canvasObjects = canvas.getObjects();
+    if (canvasObjects.length < 1) {
+        return;
+    }
 
     let occlusionNotes = `<div id='io_cloze' data-answer-mask-color='${getAnswerMaskColor()}'>`;
     let clozeDiv = "";
+    let count = 0;
 
     canvasObjects.forEach((object, index) => {
+        count++;
         let obJson = object.toJSON();
         if (obJson.type === "group") {
             clozeDiv += getGroupCloze(object, index, generateTye);
@@ -24,7 +31,7 @@ export function generate(imagePath: string, generateTye: string, deckId: number)
     occlusionNotes += clozeDiv + "</div>";
     console.log(occlusionNotes);
 
-    saveImageNotes(imagePath, occlusionNotes, deckId);
+    saveImageNotes(imagePath, occlusionNotes, deckId, count);
 }
 
 const getCloze = (object, index, generateTye, relativePos) => {
@@ -74,6 +81,7 @@ const saveImageNotes = async function (
     imagePath: string,
     occlusions: string,
     deckId: number,
+    count: number,
 ) {
     const fieldsData = get(noteFieldsData);
     const tags = get(tagsWritable);
@@ -90,5 +98,25 @@ const saveImageNotes = async function (
         notes = textArea.value;;
     }
 
-    await addImageOcclusionNotes(imagePath, deckId, occlusions, header, notes, tags);
+    let result = await addImageOcclusionNotes(imagePath, deckId, occlusions, header, notes, tags);
+    showResult(result, count);
 };
+
+// show toast message
+const showResult = (result, count) => {
+    const toastComponent = new Toast({
+        target: document.body,
+        props: {
+            message: "",
+            type: "error",
+        }
+    });
+
+    if (result.note) {
+        let msg = tr.importingNoteAdded({ count: count });
+        toastComponent.$set({ message: msg, type: "success", showToast: true });
+    } else {
+        let msg = tr.editingErrorGeneratingCloze();
+        toastComponent.$set({ message: msg, showToast: true });
+    }
+}

ts/image-occlusion/icons.ts

@@ -47,3 +47,4 @@ export { default as mdiFormatHeaderPound } from "@mdi/svg/svg/format-header-poun
 export { default as mdiFormatParagraph } from "@mdi/svg/svg/format-paragraph.svg";
 export { default as mdiCodeTags } from "@mdi/svg/svg/code-tags.svg";
 export { default as mdiMinus } from "@mdi/svg/svg/minus.svg";
+export { default as mdiClose } from "@mdi/svg/svg/close.svg";