Help Needed: Sorting Nested JSON Layer Tree with SortableJS in Alpine.js and Layer Management Techniques from WebStudio

[michaelsboost]

I'm having trouble sorting my nested JSON layer tree using SortableJS in an Alpine.js application. I have a complex JSON structure representing layers, which can be nested multiple levels deep. My goal is to sort these layers and update the JSON structure accordingly.

A simplified version of my layer structure, the relevant code and demo is available on my post on StackOverflow.

I've tried several approaches to solve this issue, including:

1. Implementing SortableJS with Alpine.js to allow dragging and dropping of nested layers.
2. Utilizing the updateLayerStructure method to update the JSON structure based on the new order after sorting.
3. Implementing the findLayerById function to recursively find a layer within the nested structure by its ID.

Additionally, I came across a related Stack Overflow post where a user provided a solution using SortableJS to serialize nested lists into JSON. Here is the reference to their approach: SortableJS Get Order from Nested List.

Despite these attempts, I haven't been able to achieve the desired functionality of directly updating specific nodes from HTML to JSON. Could you please suggest any alternative approaches or solutions to make sorting nested JSON layers work correctly with SortableJS in Alpine.js?

Also, I noticed that WebStudio has implemented a similar feature for managing their layer structure, including adding blocks and sorting layers. Could you share how WebStudio handles their layer management, specifically how they add blocks to the layer structure and sort it?

Thank you for your assistance!