Using the Fields, Cards, or Deck Selection button causes IO editor to blank out

[glutanimate]

Steps to reproduce:

1. Either by creating a new note or editing an existing one, switch to the mask editor state in AddCards or EditCurrent
2. Use either one of the following buttons: Fields, Cards, Deck selector
3. Close the respective dialog that pops up

Expected behavior:

Editor is in the same state as before opening up the dialog.

Actual behavior:

Editor is blank. Switching to a different note type restores the field editor, but switching back to Image Occlusion creates a blank state again. To use the mask editor again, you will have to close the current AddCards/EditCurrent instance and open another one.

Screencast-2023-08-23_19.06.57.mp4

---

Tested against main with 70506ae reverted

[glutanimate]

CC @dae @krmanik

This seems to be along the same lines as the previous blanking issues, where we somehow reach an inconsistent state in NoteEditor: #2596 (comment)

All of the paths described above call NoteEditor.saveNow() either directly or indirectly, so I assume the inconsistency is produced by saving the note. With the latest changes, we do reset imageOcclusionMode on saving, but it seems like that is insufficient to maintain a consistent state.

Was not able to look into this further yet, as I'm still on the add-on API work. If one of you has time and would like to pick this up, I'd very much appreciate it 🙏

[dae]

With the merge of #2598 this can now be triggered on the main branch. Hopefully will look into it tomorrow, if nobody beats me to it.

[dae]

A call to imageOcclusionMode = undefined was added in #2600, and the problem goes away when I remove it. Mani, do you remember why you added this?

[glutanimate]

On a related note, would it perhaps make sense to revisit the various IO states in Svelte and look into whether we can simplify them? I'm having a bit of a hard time following how the various states like imageOcclusionMode, $ioMaskEditorVisible, isImageOcclusion, isIOImageLoaded all interact and translate to different UI states. It feels like these developed naturally over the course of native IO becoming more complex, but now likely contribute to creating UI inconsistency in some scenarios. Maybe we can refactor some of that complexity away now.

[dae]

It might be possible to unify imageOcclusionMode and isImageOcclusion? I'm not sure whether the other two could be removed, as I think we need to keep track of whether the mask editor or fields are shown, and need to know whether to show the select image button or show the mask editor

[hikaru-y]

I too find the current I/O mode-related code a bit hard to follow.

imageOcclusionMode, $ioMaskEditorVisible, isImageOcclusion, isIOImageLoaded

Maybe we can reduce those four and isEditMode to two (imageOcclusionMode and $ioMaskEditorVisible)? I made a quick PoC(#2624), though it's only been a few days since I started looking at the I/O code, so I may have missed something.

[krmanik]

I have imageOcclusionMode = undefined because in browse mode the mask and canvas not loaded. After adding those line, occlusion shapes changes.