Improve responsiveness of looped-values preview (#605)

StitchDesign · Nov 22, 2024 · 9d96377 · 9d96377
1 parent 6980e71
commit 9d96377
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/Stitch/Graph/Node/Port/View/NodeInputOutputView.swift b/Stitch/Graph/Node/Port/View/NodeInputOutputView.swift
@@ -385,7 +385,7 @@ struct NodeRowPortView<NodeRowObserverType: NodeRowObserver>: View {
     @Bindable var rowObserver: NodeRowObserverType
     @Bindable var rowViewModel: NodeRowObserverType.RowViewModelType
 
-    @Binding var showPopover: Bool
+    @State private var showPopover: Bool = false
 
     var coordinate: NodeIOPortType {
         self.rowObserver.id.portType
@@ -430,12 +430,11 @@ struct NodeRowPortView<NodeRowObserverType: NodeRowObserver>: View {
             }
         }
         // TODO: get popover to work with all values
-        .popover(isPresented: $showPopover) {
-            // Conditional is a hack that cuts down on perf
-            if showPopover {
-                PortValuesPreviewView(rowObserver: rowObserver,
-                                      nodeIO: nodeIO)
-            }
+        .popover(isPresented: self.$showPopover) {
+            // Note: there is a bug where the first time this view-closure would fire (when `self.showPopover` set `true`), the closure's `self.showPopover` was somehow still `false`, so the popover opened with an `EmptyView`
+            // Perf-wise, we do not need the `if self.showPopover` check because `PortValuesPreviewView` only re-renders when the popover is open.
+            PortValuesPreviewView(rowObserver: rowObserver,
+                                  nodeIO: nodeIO)
         }
     }
 }
diff --git a/Stitch/Graph/Node/Port/View/PortView.swift b/Stitch/Graph/Node/Port/View/PortView.swift
@@ -31,8 +31,7 @@ struct PortEntryView<NodeRowViewModelType: NodeRowViewModel>: View {
         rowViewModel.portColor.color(theme)
     }
 
-    var body: some View {
-
+    var body: some View {        
         Rectangle().fill(portColor)
         //            Rectangle().fill(portBodyColor)
         //                .overlay {

diff --git a/Stitch/Graph/Node/View/NodeViewType.swift b/Stitch/Graph/Node/View/NodeViewType.swift
@@ -103,7 +103,6 @@ struct NodeTypeView: View {
 }
 
 struct DefaultNodeInputView: View {
-    @State private var showPopover: Bool = false
 
     @Bindable var graph: GraphState
     @Bindable var node: NodeViewModel
@@ -125,8 +124,7 @@ struct DefaultNodeInputView: View {
                 HStack {
                     NodeRowPortView(graph: graph,
                                     rowObserver: rowObserver,
-                                    rowViewModel: rowViewModel,
-                                    showPopover: $showPopover)
+                                    rowViewModel: rowViewModel)
 
                     NodeInputView(graph: graph,
                                   nodeId: node.id,
@@ -150,7 +148,6 @@ struct DefaultNodeInputView: View {
 }
 
 struct DefaultNodeOutputView: View {
-    @State private var showPopover: Bool = false
 
     @Bindable var graph: GraphState
     @Bindable var node: NodeViewModel
@@ -177,8 +174,7 @@ struct DefaultNodeOutputView: View {
 
                     NodeRowPortView(graph: graph,
                                     rowObserver: rowObserver,
-                                    rowViewModel: rowViewModel,
-                                    showPopover: $showPopover)
+                                    rowViewModel: rowViewModel)
                 }
                 .modifier(EdgeEditModeOutputHoverViewModifier(
                     graph: graph,