From 80c14aa6e91eb913ac46be255d845a29a21db043 Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Wed, 7 Feb 2024 06:42:47 +0300
Subject: [PATCH] Maintain original IO cloze order in editing mode (#2987)

* Maintain original IO cloze order in editing mode

* Fix ordinal propery name
---
 proto/anki/image_occlusion.proto        |  1 +
 rslib/src/cloze.rs                      |  7 +++++--
 ts/image-occlusion/shapes/base.ts       |  5 +++--
 ts/image-occlusion/shapes/from-cloze.ts |  5 ++++-
 ts/image-occlusion/shapes/to-cloze.ts   | 15 +++++++++------
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/proto/anki/image_occlusion.proto b/proto/anki/image_occlusion.proto
index 01caf00ca..91e50ad92 100644
--- a/proto/anki/image_occlusion.proto
+++ b/proto/anki/image_occlusion.proto
@@ -66,6 +66,7 @@ message GetImageOcclusionNoteResponse {
 
   message ImageOcclusion {
     repeated ImageOcclusionShape shapes = 1;
+    uint32 ordinal = 2;
   }
 
   message ImageOcclusionNote {
diff --git a/rslib/src/cloze.rs b/rslib/src/cloze.rs
index c1f73b15f..7a0b22d03 100644
--- a/rslib/src/cloze.rs
+++ b/rslib/src/cloze.rs
@@ -331,8 +331,11 @@ pub fn parse_image_occlusions(text: &str) -> Vec<ImageOcclusion> {
     }
 
     occlusions
-        .values()
-        .map(|v| ImageOcclusion { shapes: v.to_vec() })
+        .iter()
+        .map(|(k, v)| ImageOcclusion {
+            ordinal: *k as u32,
+            shapes: v.to_vec(),
+        })
         .collect()
 }
 
diff --git a/ts/image-occlusion/shapes/base.ts b/ts/image-occlusion/shapes/base.ts
index 92806a923..1c6955632 100644
--- a/ts/image-occlusion/shapes/base.ts
+++ b/ts/image-occlusion/shapes/base.ts
@@ -24,10 +24,11 @@ export class Shape {
      */
     occludeInactive?: boolean;
     /* Cloze ordinal */
-    ordinal = 0;
+    ordinal: number | undefined;
 
     constructor(
-        { left = 0, top = 0, fill = SHAPE_MASK_COLOR, occludeInactive, ordinal = 0 }: ConstructorParams<Shape> = {},
+        { left = 0, top = 0, fill = SHAPE_MASK_COLOR, occludeInactive, ordinal = undefined }: ConstructorParams<Shape> =
+            {},
     ) {
         this.left = left;
         this.top = top;
diff --git a/ts/image-occlusion/shapes/from-cloze.ts b/ts/image-occlusion/shapes/from-cloze.ts
index 74a335b4b..bff1332fa 100644
--- a/ts/image-occlusion/shapes/from-cloze.ts
+++ b/ts/image-occlusion/shapes/from-cloze.ts
@@ -21,7 +21,10 @@ export function extractShapesFromClozedField(
         const group: Shape[] = [];
         for (const shape of occlusion.shapes) {
             if (isValidType(shape.shape)) {
-                const props = Object.fromEntries(shape.properties.map(prop => [prop.name, prop.value]));
+                const props: Record<string, any> = Object.fromEntries(
+                    shape.properties.map(prop => [prop.name, prop.value]),
+                );
+                props.ordinal = occlusion.ordinal;
                 group.push(buildShape(shape.shape, props));
             }
         }
diff --git a/ts/image-occlusion/shapes/to-cloze.ts b/ts/image-occlusion/shapes/to-cloze.ts
index 1923dab6d..ac0aeaf08 100644
--- a/ts/image-occlusion/shapes/to-cloze.ts
+++ b/ts/image-occlusion/shapes/to-cloze.ts
@@ -148,13 +148,16 @@ function shapeOrShapesToCloze(
         addKeyValue("oi", "1");
     }
 
-    let ordinal: number;
-    if (type === "text") {
-        ordinal = 0;
-    } else {
-        ordinal = index + 1;
+    // Maintain existing ordinal in editing mode
+    let ordinal = shapeOrShapes.ordinal;
+    if (ordinal === undefined) {
+        if (type === "text") {
+            ordinal = 0;
+        } else {
+            ordinal = index + 1;
+        }
+        shapeOrShapes.ordinal = ordinal;
     }
-    shapeOrShapes.ordinal = ordinal;
     text = `{{c${ordinal}::image-occlusion:${type}${text}}}<br>`;
 
     return text;