Display content of utility network container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
// Copyright 2023 Esri
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import ArcGIS
import SwiftUI

struct DisplayContentOfUtilityNetworkContainerView: View {
    /// The display scale of this environment.
    @Environment(\.displayScale) private var displayScale

    /// The view model for the sample.
    @StateObject private var model = Model()

    /// A Boolean value indicating whether the map view interaction is enabled.
    @State private var isMapViewUserInteractionEnabled = true

    /// A Boolean value indicating whether the legends are shown.
    @State private var isShowingLegend = false

    /// A Boolean value indicating whether the content within the container is shown.
    @State private var isShowingContainer = false

    /// The map point where the map was tapped.
    @State private var mapPoint: Point?

    /// The point to identify a graphic.
    @State private var screenPoint: CGPoint?

    /// The viewpoint before the map view zooms into the container's extent.
    @State private var previousViewpoint: Viewpoint?

    /// The current viewpoint of the map view.
    @State private var viewpoint = Viewpoint(latitude: 41.80, longitude: -88.16, scale: 4e3)

    var body: some View {
        MapViewReader { proxy in
            MapView(map: model.map, graphicsOverlays: [model.graphicsOverlay])
                .interactionModes(isMapViewUserInteractionEnabled ? .all : [])
                .onViewpointChanged(kind: .boundingGeometry) { viewpoint = $0 }
                .onSingleTapGesture { screenPoint, mapPoint in
                    self.screenPoint = screenPoint
                    self.mapPoint = mapPoint
                }
                .overlay(alignment: .top) {
                    Text(model.statusMessage)
                        .padding(.vertical, 6)
                        .frame(maxWidth: .infinity)
                        .background(.thinMaterial, ignoresSafeAreaEdges: .horizontal)
                }
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button("Show Legend") {
                            isShowingLegend = true
                        }
                        .disabled(model.legendItems.isEmpty)
                        .popover(isPresented: $isShowingLegend) {
                            sheetContent
                                .presentationDetents([.fraction(0.5)])
                                .frame(idealWidth: 320, idealHeight: 380)
                        }
                        .task(id: displayScale) {
                            // Updates the legend info when display scale changes.
                            await model.updateLegendInfoItems(displayScale: displayScale)
                        }
                        Spacer()
                        Button("Exit Container View") {
                            resetMapView(proxy)
                            model.statusMessage = "Tap on a container to see its content."
                        }
                        .disabled(!isShowingContainer)
                    }
                }
                .task {
                    // Loads the utility network.
                    do {
                        try await model.loadUtilityNetwork()
                        model.statusMessage = "Tap on a container to see its content."
                    } catch {
                        model.statusMessage = "An error occurred while loading the network."
                    }
                }
                .task(id: screenPoint) {
                    guard let screenPoint else { return }
                    // The identify results from the touch point.
                    guard let identifyResults = try? await proxy.identifyLayers(screenPoint: screenPoint, tolerance: 5) else { return }
                    // The features identified are as part of its sublayer's result.
                    guard let layerResult = identifyResults.first(where: { $0.layerContent is SubtypeFeatureLayer }) else { return }
                    // The top selected feature.
                    guard let containerFeature = (layerResult.sublayerResults
                        .lazy
                        .flatMap { $0.geoElements.compactMap { $0 as? ArcGISFeature } })
                        .first
                    else {
                        return
                    }

                    do {
                        // Displays the container feature's content.
                        try await model.handleIdentifiedFeature(containerFeature)
                    } catch {
                        model.statusMessage = "An error occurred while getting the associations."
                        resetMapView(proxy)
                        return
                    }

                    // Sets UI states to focus on the container's content.
                    model.setOperationalLayersVisibility(isVisible: false)
                    // Turns off user interaction to avoid straying away from the container view.
                    isMapViewUserInteractionEnabled = false
                    previousViewpoint = viewpoint
                    if let extent = model.graphicsOverlay.extent {
                        await proxy.setViewpointGeometry(extent, padding: 20)
                        isShowingContainer = true
                    }
                }
        }
    }

    /// A helper method to reset the map view.
    /// - Parameter proxy: The map view proxy.
    private func resetMapView(_ proxy: MapViewProxy) {
        model.setOperationalLayersVisibility(isVisible: true)
        model.graphicsOverlay.removeAllGraphics()
        isShowingContainer = false
        isMapViewUserInteractionEnabled = true
        Task {
            if let previousViewpoint {
                await proxy.setViewpoint(previousViewpoint)
            }
        }
    }

    /// The legends list.
    private var sheetContent: some View {
        NavigationStack {
            List(model.legendItems, id: \.name) { legend in
                Label {
                    Text(legend.name)
                } icon: {
                    Image(uiImage: legend.image)
                }
            }
            .navigationTitle("Legend")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .confirmationAction) {
                    Button("Done") {
                        isShowingLegend = false
                    }
                }
            }
        }
        .frame(idealWidth: 320, idealHeight: 428)
    }
}

#Preview {
    NavigationStack {
        DisplayContentOfUtilityNetworkContainerView()
    }
}