Layer inspector: do not go out of bounds with a multifield output (#639)

StitchDesign · Dec 12, 2024 · 1e58990 · 1e58990
1 parent a2023d9
commit 1e58990
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 10 deletions.
diff --git a/Stitch/Graph/LayerInspector/LayerInspectorView.swift b/Stitch/Graph/LayerInspector/LayerInspectorView.swift
@@ -133,6 +133,7 @@ struct LayerInspectorView: View {
                 #if targetEnvironment(macCatalyst)
                 .padding(.trailing, LAYER_INSPECTOR_ROW_SPACING + LAYER_INSPECTOR_ROW_ICON_LENGTH)
                 #endif
+                .padding(.bottom)
 
             } // List
             .listSectionSpacing(.compact) // reduce spacing between sections

diff --git a/Stitch/Graph/Node/Port/View/Field/InputValueEntry.swift b/Stitch/Graph/Node/Port/View/Field/InputValueEntry.swift
@@ -347,13 +347,16 @@ struct InputValueView: View {
                               isSelectedInspectorRow: isSelectedInspectorRow,
                               isPressed: $isButtonPressed)
 
-                // TODO: is this relevant for multiselect?
+            // TODO: is this relevant for multiselect?
+            // Note: can an input EVER really have a 'read-only' value? Isn't this fieldValue case just for outputs?
             case .readOnly(let string):
                 ReadOnlyValueEntry(value: string,
                                    alignment: .leading,
                                    fontColor: STITCH_FONT_GRAY_COLOR,
-                                   isSelectedInspectorRow: isSelectedInspectorRow)
-            }            
+                                   isSelectedInspectorRow: isSelectedInspectorRow,
+                                   forPropertySidebar: forPropertySidebar,
+                                   isFieldInMultifieldInput: isFieldInMultifieldInput)
+            }
         // }
     }
 }
diff --git a/Stitch/Graph/Node/Port/View/Field/InputView/ReadOnlyEntry.swift b/Stitch/Graph/Node/Port/View/Field/InputView/ReadOnlyEntry.swift
@@ -22,13 +22,25 @@ struct ReadOnlyValueEntry: View {
     let alignment: Alignment // = .trailing
     var fontColor: Color = STITCH_FONT_GRAY_COLOR
     let isSelectedInspectorRow: Bool
+
+    let forPropertySidebar: Bool
+    let isFieldInMultifieldInput: Bool
+
+    @MainActor
+    var fieldWidth: CGFloat {
+         if isFieldInMultifieldInput && forPropertySidebar {
+            return INSPECTOR_MULTIFIELD_INDIVIDUAL_FIELD_WIDTH
+        } else {
+            return NODE_INPUT_OR_OUTPUT_WIDTH
+        }
+    }
 
     var body: some View {
         StitchTextView(string: value,
                        fontColor: isSelectedInspectorRow ? theme.fontColor : fontColor)
             // Monospacing prevents jittery node widths if values change on graphstep
             .monospacedDigit()
-            .frame(width: NODE_INPUT_OR_OUTPUT_WIDTH,
+            .frame(width: fieldWidth,
                    alignment: alignment)
     }
 }

diff --git a/Stitch/Graph/Node/Port/View/Field/OutputValueView.swift b/Stitch/Graph/Node/Port/View/Field/OutputValueView.swift
@@ -19,6 +19,7 @@ struct OutputValueEntry: View {
     let isCanvasItemSelected: Bool
     let forPropertySidebar: Bool
     let propertyIsAlreadyOnGraph: Bool
+    let isFieldInMultifieldInput: Bool
     let isSelectedInspectorRow: Bool
 
     // Used by button view to determine if some button has been pressed.
@@ -45,6 +46,7 @@ struct OutputValueEntry: View {
                         isCanvasItemSelected: isCanvasItemSelected,
                         forPropertySidebar: forPropertySidebar,
                         propertyIsAlreadyOnGraph: propertyIsAlreadyOnGraph,
+                        isFieldInMultifieldInput: isFieldInMultifieldInput,
                         isSelectedInspectorRow: isSelectedInspectorRow,
                         isButtonPressed: $isButtonPressed)
             .font(STITCH_FONT)
@@ -74,6 +76,7 @@ struct OutputValueView: View {
     let isCanvasItemSelected: Bool
     let forPropertySidebar: Bool
     let propertyIsAlreadyOnGraph: Bool
+    let isFieldInMultifieldInput: Bool
     let isSelectedInspectorRow: Bool
 
     @Binding var isButtonPressed: Bool
@@ -111,13 +114,17 @@ struct OutputValueView: View {
                 ReadOnlyValueEntry(value: string.string,
                                    alignment: outputAlignment,
                                    fontColor: STITCH_FONT_GRAY_COLOR,
-                                   isSelectedInspectorRow: isSelectedInspectorRow)
+                                   isSelectedInspectorRow: isSelectedInspectorRow,
+                                   forPropertySidebar: forPropertySidebar,
+                                   isFieldInMultifieldInput: isFieldInMultifieldInput)
 
             case .number, .layerDimension, .spacing:
                 ReadOnlyValueEntry(value: fieldValue.stringValue,
                                    alignment: outputAlignment,
                                    fontColor: STITCH_FONT_GRAY_COLOR,
-                                   isSelectedInspectorRow: isSelectedInspectorRow)
+                                   isSelectedInspectorRow: isSelectedInspectorRow,
+                                   forPropertySidebar: forPropertySidebar,
+                                   isFieldInMultifieldInput: isFieldInMultifieldInput)
 
             case .bool(let bool):
                 BoolCheckboxView(id: nil,
@@ -131,7 +138,9 @@ struct OutputValueView: View {
                 ReadOnlyValueEntry(value: choiceDisplay,
                                    alignment: outputAlignment,
                                    fontColor: STITCH_FONT_GRAY_COLOR,
-                                   isSelectedInspectorRow: isSelectedInspectorRow)
+                                   isSelectedInspectorRow: isSelectedInspectorRow,
+                                   forPropertySidebar: forPropertySidebar,
+                                   isFieldInMultifieldInput: isFieldInMultifieldInput)
 
             case .textFontDropdown(let stitchFont):
                 StitchFontDropdown(input: coordinate,
@@ -232,7 +241,9 @@ struct OutputValueView: View {
                 ReadOnlyValueEntry(value: string,
                                    alignment: outputAlignment,
                                    fontColor: STITCH_FONT_GRAY_COLOR,
-                                   isSelectedInspectorRow: isSelectedInspectorRow)
+                                   isSelectedInspectorRow: isSelectedInspectorRow,
+                                   forPropertySidebar: forPropertySidebar,
+                                   isFieldInMultifieldInput: isFieldInMultifieldInput)
             }
 //        }
     }

diff --git a/Stitch/Graph/Node/Port/View/NodeInputOutputView.swift b/Stitch/Graph/Node/Port/View/NodeInputOutputView.swift
@@ -297,6 +297,7 @@ struct NodeOutputView: View {
                          isCanvasItemSelected: isCanvasItemSelected,
                          forPropertySidebar: forPropertySidebar,
                          propertyIsAlreadyOnGraph: propertyIsAlreadyOnGraph,
+                         isFieldInMultifieldInput: isMultiField,
                          isSelectedInspectorRow: propertyIsSelected)
     }
 
@@ -305,6 +306,7 @@ struct NodeOutputView: View {
             // Property sidebar always shows labels on left side, never right
             if forPropertySidebar {
                 labelView
+                Spacer()
             }
 
             // Hide outputs for value node

diff --git a/Stitch/Graph/PrototypePreview/Layer/Model/PreviewGridData.swift b/Stitch/Graph/PrototypePreview/Layer/Model/PreviewGridData.swift
@@ -97,8 +97,9 @@ extension LayerNodeViewModel {
     }
 }
 
-// TODO: Need a smarter way of handling this. Blocked and unblocked fields should be by loop-index, but inputs on inspector and canvas items are not displayed by loop-index
-// e.g. suppose a layer node's SizingScenario has a loop of `[.constrainHeight, .constrainWidth]` -- why inputs should be blocked?
+// TODO: Need a smarter way of handling this. Blocked and unblocked fields should be by loop-index, but inputs on inspector and canvas items are not displayed by loop-index;
+// e.g. suppose a layer node's SizingScenario has a loop of `[.constrainHeight, .constrainWidth]` -- which inputs should be blocked?
+// ... Should it be according to activeIndex ?
 extension LayerNodeViewModel {
 
     @MainActor