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

@@ -66,6 +66,7 @@ message GetImageOcclusionNoteResponse {
 
   message ImageOcclusion {
     repeated ImageOcclusionShape shapes = 1;
+    uint32 ordinal = 2;
   }
 
   message ImageOcclusionNote {

rslib/src/cloze.rs

@@ -331,8 +331,11 @@ pub fn parse_image_occlusions(text: &str) -> Vec<ImageOcclusion> {
     }
 
     occlusions
-        .values()
+        .iter()
-        .map(|v| ImageOcclusion { shapes: v.to_vec() })
+        .map(|(k, v)| ImageOcclusion {
+            ordinal: *k as u32,
+            shapes: v.to_vec(),
+        })
         .collect()
 }
 

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;

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));
             }
         }

ts/image-occlusion/shapes/to-cloze.ts

@@ -148,13 +148,16 @@ function shapeOrShapesToCloze(
         addKeyValue("oi", "1");
     }
 
-    let ordinal: number;
+    // 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;
+    }
     text = `{{c${ordinal}::image-occlusion:${type}${text}}}<br>`;
 
     return text;