SwiftUI Navigator

Shared/Sources/Document/Documents/Document/VODesignDocument+UIKit.swift

@@ -4,7 +4,7 @@ public typealias AppleDocument = UIDocument
 import Combine
 import Artboard
 
-public class VODesignDocument: AppleDocument, VODesignDocumentProtocol {
+public class VODesignDocument: AppleDocument   , VODesignDocumentProtocol {
 
     // MARK: - Data
     public var elements: [any ArtboardElement] = []

Shared/Sources/NavigatorSwiftUI/Navigator.swift

@@ -1,19 +1,67 @@
 import SwiftUI
 import Artboard
 
+struct HierarchicalElement: Identifiable { //Structure creating element (similarity of a binary tree node)
+    var element: any ArtboardElement
+    var indentationLevel: Int
+    var isParent: Bool
+    var id: UUID { element.id }
+}
+
 public struct NavigatorView: View {
-
     @ObservedObject var frame: Frame
-
+    @State private var hierarchicalElements: [HierarchicalElement]
+
     public init(frame: Frame) {
         self.frame = frame
+        _hierarchicalElements = State(initialValue: frame.elements.map {
+            HierarchicalElement(element: $0, indentationLevel: 0, isParent: false)
+        })
     }
 
     public var body: some View {
         Text(frame.label)
-        List(frame.elements, id: \.id) { frame in
-            Text(frame.label)
-            // TODO: Add detalisation for elements inside frame
+        List {
+            ForEach($hierarchicalElements, id: \.element.id) { $element in
+                HStack {
+                    Image(systemName: element.isParent ? "folder" : "doc") // Images for creating hiererchy folders
+                        .onTapGesture {
+                            element.isParent.toggle()
+                        }
+                    Text(element.element.label)
+                }
+                .padding(.leading, CGFloat(element.indentationLevel * 20))
+                .onDrag {
+                    return NSItemProvider(object: String(element.id.uuidString) as NSString) //Data encapsulation
+                }
+            }
+            .onMove(perform: move)
+        }
+        .toolbar {
+            EditButton()
+        }
+    }
+
+    func move(from source: IndexSet, to destination: Int) {
+        hierarchicalElements.move(fromOffsets: source, toOffset: destination)
+
+        updateIndentationLevels()
+    }
+
+    func updateIndentationLevels() {
+        var currentIndentationLevel = 0
+        var isPreviousElementParent = false
+
+        for index in hierarchicalElements.indices {
+            if isPreviousElementParent {
+                currentIndentationLevel += 1
+            } else {
+                currentIndentationLevel = 0
+            }
+
+            hierarchicalElements[index].indentationLevel = currentIndentationLevel
+            isPreviousElementParent = hierarchicalElements[index].isParent
         }
     }
 }
+

VoiceOver Preview/VoiceOver Preview/BrowserViewController.swift

@@ -27,7 +27,7 @@ class DocumentBrowserViewController: UIDocumentBrowserViewController, UIDocument
         super.viewDidAppear(animated)
 
 #if targetEnvironment(simulator) && (os(visionOS) || os(iOS)) // Fake document for simulaton, drag'n'drop won't work
-        presentDocumentModally(url: URL(filePath: "/Users/mikhail/Library/Mobile Documents/iCloud~com~akaDuality~VoiceOver-Designer/Documents/Drinkit Product Card.vodesign"), animated: true)
+        presentDocumentModally(url: URL(filePath: "/Users/mac/Projects/Drinkit Product Card.vodesign"), animated: true)
 #endif
     }