generate hide all & gues one notes

Author: krmanik

ts/image-occlusion/generate.ts

@@ -5,6 +5,7 @@ import { get } from "svelte/store";
 
 import { addImageOcclusionNotes } from "./lib";
 import { noteFieldsData, tagsWritable } from "./store";
+import { getQuestionMaskColor } from "./tools/lib";
 
 const divData = [
     "angle",
@@ -36,10 +37,8 @@ export function generate(): string {
 
     let occlusionNotes = "";
     let clozeData = "";
-    let count = 0;
 
     canvasObjects.forEach((object, index) => {
-        count++;
         const obJson = object.toJSON();
         if (obJson.type === "group") {
             clozeData += getGroupCloze(object, index);
@@ -53,30 +52,39 @@ export function generate(): string {
     return occlusionNotes;
 }
 
-const getCloze = (object, index, relativePos) => {
+const getCloze = (object, index, relativePos): string => {
     const obJson = object.toJSON();
     let clozeData = "";
 
-    Object.keys(obJson).forEach(function (key) {
+    Object.keys(obJson).forEach(function(key) {
         if (divData.includes(key)) {
-            if (key === "points") {
-                const points = JSON.stringify(obJson[key]);
-                clozeData += `:${key}='${points}'`;
+            if (key === "type") {
+                clozeData += `:${obJson[key]}`;
+            } else if (key === "points") {
+                const points = obJson[key];
+                let pnts = "";
+                points.forEach((point: { x: number; y: number }) => {
+                    pnts += point.x.toFixed(2) + "," + point.y.toFixed(2) + " ";
+                });
+                clozeData += `:${key}=${pnts.trim()}`;
             } else if (relativePos && key === "top") {
-                clozeData += `:top="${relativePos.top}" `;
+                clozeData += `:top=${relativePos.top}`;
             } else if (relativePos && key === "left") {
-                clozeData += `:left="${relativePos.left}" `;
+                clozeData += `:left=${relativePos.left}`;
             } else {
-                clozeData += `:${key}="${obJson[key]}"`;
+                clozeData += `:${key}=${obJson[key]}`;
             }
         }
     });
 
-    clozeData = `{{c${index + 1}::image-occlusion:${clozeData}}}\n`;
+    // question mask color, on front side asking for cloze
+    clozeData += `:quesmaskcolor=${getQuestionMaskColor()}`;
+
+    clozeData = `{{c${index + 1}::image-occlusion${clozeData}}}\n`;
     return clozeData;
 };
 
-const getGroupCloze = (group, index) => {
+const getGroupCloze = (group, index): string => {
     let clozeData = "";
     const objects = group._objects;
 
@@ -88,35 +96,33 @@ const getGroupCloze = (group, index) => {
     return clozeData;
 };
 
-const getObjectPositionInGroup = (group, object) => {
+const getObjectPositionInGroup = (group, object): { top: number; left: number } => {
     let left = object.left + group.left + group.width / 2;
     let top = object.top + group.top + group.height / 2;
     left = left.toFixed(2);
     top = top.toFixed(2);
     return { top, left };
 };
 
-const saveImageNotes = async function (
+export const saveImageNotes = async function(
     imagePath: string,
-    occlusions: string,
     deckId: number,
-    count: number,
-) {
+): Promise<void> {
+    const occlusions = generate();
     const fieldsData = get(noteFieldsData);
     const tags = get(tagsWritable);
     let header = fieldsData["header"];
-    let notes = fieldsData["notes"];
+    let notes = fieldsData["back-extra"];
 
     if (header === undefined) {
         const textArea = document.getElementById("img-occ-html-header")! as HTMLTextAreaElement;
         header = textArea.value;
     }
 
     if (notes === undefined) {
-        const textArea = document.getElementById("img-occ-html-notes")! as HTMLTextAreaElement;
+        const textArea = document.getElementById("img-occ-html-back-extra")! as HTMLTextAreaElement;
         notes = textArea.value;
     }
 
     await addImageOcclusionNotes(imagePath, deckId, occlusions, header, notes, tags);
 };
-