Scene Editor Development: SwiftUI Navigation Issues

I have the following main view in the scene:

struct ContentView: View {
  @Binding var document: Level
    
  var body: some View {
    NavigationView {
      SceneGraph(document: $document)
      SpriteView(scene: document.scene)
      Inspector(node: SKNode())
    }
  }
}

When selecting an item from the scene graph, I want to show the details in the inspector. I created a navigation link to do this.

List {
  ForEach(gameScene.children, id: \.self) { node in
    NavigationLink(destination: Inspector(node: node), tag: node, 
      selection: $selection) {
                            
      Text(node.name ?? "Node")
    }
  }
}

The problem is that when I select an item from the scene graph, the inspector replaces the sprite view.

I took a look at the new NavigationSplitView view Apple added in iOS 16 and macOS 13 to handle the navigation. But I found the three column view doesn’t suit this app.

The behavior of a three column split view is that selecting an item from the first column affects the second column, and selecting an item from the second column affects the third column.

But I don’t want someone to have to select an item from the sprite view (scene canvas) to view it in the inspector. Selecting an item from the scene graph should show the details in the inspector.

Workaround

The workaround is to move the sprite view from the center column to the left column. Now the navigation link from the scene graph to the inspector works the way I want it to work.

For now I’m sticking with NavigationView to support iOS 15, which has a version of Swift Playgrounds that can make apps. It also allows me to support macOS 11+. But I may switch to a two column navigation split view if I need it.

Get the Swift Dev Journal Newsletter

Subscribe and get exclusive articles, a free guide on moving from tutorials to making your first app, notices of sales on books, and anything I decide to add in the future.

    We won't send you spam. Unsubscribe at any time.