fix: preset file selection + FS access fallback bugs (save + delete)

[grMLEqomlkkU5Eeinz4brIrOVCUCkJuN]

Description

Fixes 3 reported bugs. One is a cross platform regression in the "new file" preset window. The other three are all in the fallback file system path used by browser without the file system access API (various browsers).

Motivation

Issue	Bug
#1653, #1630	Selecting a model/texture in "New File" does nothing
#1669 (1)	Folders can't be deleted in Safari/Firefox
#1667	Saved files don't persist on Android

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[outercloudstudio]

Sorry for the late review. Been busy with work :)

Some things I'm noticing in the PR that would need to be changed before this is merged:

You reference a input field like this:

const input = document.getElementById(`preset-file-input-${fieldId}`)

This isn't standard in Vue and I'd recommend changing it to a template ref. This is the documentation for it: https://vuejs.org/guide/essentials/template-refs

Regarding the data cloning issue:

config: this.project.config ? JSON.parse(JSON.stringify(this.project.config)) : this.project.config,

I think it might be a good idea to investigate why the object is not a plain object before attempting this fix.

Everything else looks good here though, so just resolve those and I can merge this in.

[outercloudstudio]

See note

[grMLEqomlkkU5Eeinz4brIrOVCUCkJuN]

i accidentally re requested a review

[grMLEqomlkkU5Eeinz4brIrOVCUCkJuN]

my bad i was thinking of using the shortcut by fetching from the id directly. Ill make sure to be careful about the vue lifecycle in the future 💀💀💀

for the object part it is already in my commit message. The handoff from vue reactive to the dash compiler (specifically a proxy). And because it uses postMessage (serializes with structured clone), it can't clone a proxy. I actually made an assumption about safari, which is that safari is stricter, so it throws an error message about cloning.

@outercloudstudio

ill make changes when i reach home im on a bus now 🚌🚌🚌🚌

[outercloudstudio]

I see. Can we just toRaw or markRaw or whatever the vue API is to extract the raw object from the ref instead?

[grMLEqomlkkU5Eeinz4brIrOVCUCkJuN]

I see. Can we just toRaw or markRaw or whatever the vue API is to extract the raw object from the ref instead?

we can, but that's kinda lazy and it isn't really figuring out why it isn't a plain obj to begin with. Don't worry, ill clean this up. :>

[grMLEqomlkkU5Eeinz4brIrOVCUCkJuN]

@outercloudstudio I got a Macbook from a friend to tried testing it appears that the original dataclone issue might be a red herring (likely in the setup payload somewhere). I could not replicate it an honestly plain objects were fine.

for the vue template ref part, since it renders inside a v-for, i used a function ref instead that collects into a lookup, which uses key ids