Fix iOS layout editor chrome and state rollback

Author: J1coding

app/src/main/swift/Views/Settings/PadLayoutEditView.swift

@@ -10,6 +10,7 @@ private struct PadLayoutSnapshot {
     let perButtonPortrait: [String: PadGroupPosition]
     let perButtonLandscape: [String: PadGroupPosition]
     let controlVisibility: [String: Bool]
+    let skin: VirtualPadSkin
 }
 
 struct PadLayoutEditView: View {
@@ -19,48 +20,54 @@ struct PadLayoutEditView: View {
     @State private var editLandscape = false
     @State private var undoStack: [PadLayoutSnapshot] = []
     @State private var originalSnapshot: PadLayoutSnapshot? = nil
+    @State private var didInitializeOrientation = false
 
     var body: some View {
         GeometryReader { geo in
             let isActuallyLandscape = geo.size.width > geo.size.height
-            let safeAreaTop = geo.safeAreaInsets.top
-            let safeAreaBottom = geo.safeAreaInsets.bottom
             let isMismatch = isActuallyLandscape != editLandscape
-            let chromeAlignment: Alignment = isActuallyLandscape ? .top : .bottom
-            ZStack {
-                // Canvas
+            ZStack(alignment: .top) {
+                Color.clear
+                    .contentShape(Rectangle())
+                    .onTapGesture {}
+                    .gesture(DragGesture(minimumDistance: 0))
+
                 if isActuallyLandscape {
                     landscapeEditorCanvas(isEditable: !isMismatch)
                 } else {
                     portraitEditorCanvas(width: geo.size.width, height: geo.size.height, isEditable: !isMismatch)
                 }
 
-                // Orientation mismatch overlay
-                if isMismatch {
-                    orientationMismatchView(isLandscape: isActuallyLandscape)
-                        .zIndex(1)
-                        .allowsHitTesting(false)
+                VStack(spacing: 0) {
+                    editorToolbar()
+                        .padding(.top, max(geo.safeAreaInsets.top, 8))
+                        .padding(.horizontal, max(max(geo.safeAreaInsets.leading, geo.safeAreaInsets.trailing), 8))
+
+                    if isMismatch {
+                        orientationMismatchView()
+                    } else {
+                        Spacer(minLength: 0)
+                    }
                 }
+                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+                .zIndex(2)
             }
-            .overlay(alignment: chromeAlignment) {
-                editorChrome(
-                    isLandscape: isActuallyLandscape,
-                    safeAreaTop: safeAreaTop,
-                    safeAreaBottom: safeAreaBottom
-                )
+            .frame(width: geo.size.width, height: geo.size.height, alignment: .top)
+            .onAppear {
+                if originalSnapshot == nil {
+                    originalSnapshot = captureSnapshot()
+                }
+                if !didInitializeOrientation {
+                    editLandscape = isActuallyLandscape
+                    didInitializeOrientation = true
+                }
             }
         }
         .navigationBarHidden(true)
         .statusBarHidden()
         .persistentSystemOverlays(.hidden)
-        .onAppear {
-            if originalSnapshot == nil {
-                originalSnapshot = captureSnapshot()
-            }
-            let bounds = UIScreen.main.bounds
-            editLandscape = bounds.width > bounds.height
-        }
         .onDisappear {
+            rollbackUnsavedChanges()
             NSLog("@@PAD_LAYOUT@@ disappear")
             NotificationCenter.default.post(name: Notification.Name("ARMSX2iOSPadLayoutEditorDismissed"), object: nil)
         }
@@ -77,7 +84,7 @@ struct PadLayoutEditView: View {
 
                 if isEditable {
                     customSkinPreview(isLandscape: true, width: width, height: height)
-                    editorContent(areaW: width, areaH: height)
+                    editorControls(areaW: width, areaH: height, isLandscape: true)
                 }
             }
             .contentShape(Rectangle())
@@ -100,66 +107,48 @@ struct PadLayoutEditView: View {
                 Color.black.opacity(0.85)
                 if isEditable {
                     customSkinPreview(isLandscape: false, width: width, height: padHeight)
-                    editorPortraitContent(areaW: width, areaH: padHeight)
+                    editorControls(areaW: width, areaH: padHeight, isLandscape: false)
                 }
             }
             .frame(height: padHeight)
             .clipped()
         }
     }
 
-    // MARK: - Editor toolbar
-    private func editorChrome(isLandscape: Bool, safeAreaTop: CGFloat, safeAreaBottom: CGFloat) -> some View {
-        editorToolbar(isLandscape: isLandscape)
-            .padding(.top, isLandscape ? max(safeAreaTop, 8) : 0)
-            .padding(.bottom, isLandscape ? 0 : max(safeAreaBottom, 8))
-    }
-
-    private func editorToolbar(isLandscape: Bool) -> some View {
-        HStack(spacing: isLandscape ? 8 : 12) {
-            // Cancel
+    private func editorToolbar() -> some View {
+        HStack(spacing: 6) {
             Button {
-                if let snapshot = originalSnapshot {
-                    restore(snapshot: snapshot)
-                }
+                rollbackUnsavedChanges()
                 onDismiss()
             } label: {
                 Image(systemName: "xmark.circle.fill")
-                    .font(isLandscape ? .title3 : .title2)
+                    .font(.title3)
                     .foregroundStyle(.white)
+                    .frame(width: 28, height: 28)
             }
 
-            // Undo
             Button {
                 guard let snapshot = undoStack.popLast() else { return }
                 restore(snapshot: snapshot)
             } label: {
                 Image(systemName: "arrow.uturn.backward.circle")
-                    .font(isLandscape ? .title3 : .title2)
+                    .font(.title3)
                     .foregroundStyle(undoStack.isEmpty ? .white.opacity(0.3) : .white)
+                    .frame(width: 28, height: 28)
             }
             .disabled(undoStack.isEmpty)
 
-            Spacer()
-
-            // Portrait / Landscape
             Picker("", selection: $editLandscape) {
-                Text("Portrait").tag(false)
-                Text("Landscape").tag(true)
+                Text("Port.").tag(false)
+                Text("Land.").tag(true)
             }
             .pickerStyle(.segmented)
-            .frame(width: 160)
+            .frame(width: 112)
             .background(.black.opacity(0.3), in: RoundedRectangle(cornerRadius: 8))
 
-            Spacer()
-
-            // Skin picker
-            skinPickerMenuButton(isLandscape: isLandscape)
-
-            // Options (visibility + reset)
-            optionsMenuButton(isLandscape: isLandscape)
+            skinPickerMenuButton()
+            optionsMenuButton()
 
-            // Save
             Button {
                 NSLog("@@PAD_LAYOUT@@ save portrait=%d landscape=%d", layout.portrait.count, layout.landscape.count)
                 layout.save()
@@ -168,16 +157,17 @@ struct PadLayoutEditView: View {
                 onDismiss()
             } label: {
                 Image(systemName: "checkmark.circle.fill")
-                    .font(isLandscape ? .title3 : .title2)
+                    .font(.title3)
                     .foregroundStyle(.green)
+                    .frame(width: 28, height: 28)
             }
         }
-        .padding(.horizontal, 12)
+        .padding(.horizontal, 8)
         .padding(.vertical, 6)
         .background(.black.opacity(0.55), in: RoundedRectangle(cornerRadius: 10, style: .continuous))
     }
 
-    private func orientationMismatchView(isLandscape: Bool) -> some View {
+    private func orientationMismatchView() -> some View {
         let message = editLandscape
             ? "Rotate device to landscape to edit landscape layout"
             : "Rotate device to portrait to edit portrait layout"
@@ -206,25 +196,27 @@ struct PadLayoutEditView: View {
         .allowsHitTesting(false)
     }
 
-    private func skinPickerMenuButton(isLandscape: Bool) -> some View {
+    private func skinPickerMenuButton() -> some View {
         Menu {
             ForEach(VirtualPadSkin.allCases) { skin in
                 Button {
+                    guard settings.virtualPadSkin != skin else { return }
+                    pushSnapshot()
                     settings.virtualPadSkin = skin
                 } label: {
                     Label(settings.localized(skin.label), systemImage: settings.virtualPadSkin == skin ? "checkmark" : "circle")
                 }
             }
         } label: {
             Image(systemName: "paintpalette.fill")
-                .font(isLandscape ? .title3 : .title2)
+                .font(.title3)
                 .foregroundStyle(.white)
+                .frame(width: 28, height: 28)
         }
     }
 
-    private func optionsMenuButton(isLandscape: Bool) -> some View {
+    private func optionsMenuButton() -> some View {
         Menu {
-            // Visibility section
             Section("Visibility") {
                 ForEach(PadLayoutStore.groupIDs.filter { $0 != "action" }, id: \.self) { (id: String) in
                     visibilityMenuItem(id: id)
@@ -235,7 +227,6 @@ struct PadLayoutEditView: View {
                 visibilityMenuItem(id: "square", label: "Square")
             }
 
-            // Reset section
             Section("Reset") {
                 Button("Reset Action", role: .destructive) {
                     pushSnapshot()
@@ -256,8 +247,9 @@ struct PadLayoutEditView: View {
             }
         } label: {
             Image(systemName: "ellipsis.circle")
-                .font(isLandscape ? .title3 : .title2)
+                .font(.title3)
                 .foregroundStyle(.white)
+                .frame(width: 28, height: 28)
         }
     }
 
@@ -288,34 +280,14 @@ struct PadLayoutEditView: View {
     }
 
     @ViewBuilder
-    private func editorContent(areaW: CGFloat, areaH: CGFloat) -> some View {
-        let stickScale = min(max(CGFloat(settings.analogStickScale), 0.8), 1.6)
-        ZStack {
-            // Individual buttons for action and dpad
-            ForEach(PadLayoutStore.perButtonIDs, id: \.self) { (id: String) in
-                DraggableButton(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, onBeginEdit: pushSnapshot)
-            }
-            // Group widgets for other controls
-            ForEach(PadLayoutStore.groupIDs.filter { $0 != "action" && $0 != "dpad" }, id: \.self) { (id: String) in
-                DraggableGroup(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, analogStickScale: stickScale, onBeginEdit: pushSnapshot)
-            }
-        }
-        .environment(\.padSkin, settings.virtualPadSkin)
-        .environment(\.padOpacity, 1.0)
-        .environment(\.padUsesFullSkin, false)
-    }
-
-    @ViewBuilder
-    private func editorPortraitContent(areaW: CGFloat, areaH: CGFloat) -> some View {
+    private func editorControls(areaW: CGFloat, areaH: CGFloat, isLandscape: Bool) -> some View {
         let stickScale = min(max(CGFloat(settings.analogStickScale), 0.8), 1.6)
         ZStack {
-            // Individual buttons for action and dpad
             ForEach(PadLayoutStore.perButtonIDs, id: \.self) { (id: String) in
-                DraggableButton(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, onBeginEdit: pushSnapshot)
+                DraggableButton(id: id, areaW: areaW, areaH: areaH, isLandscape: isLandscape, onBeginEdit: pushSnapshot)
             }
-            // Group widgets for other controls
             ForEach(PadLayoutStore.groupIDs.filter { $0 != "action" && $0 != "dpad" }, id: \.self) { (id: String) in
-                DraggableGroup(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, analogStickScale: stickScale, onBeginEdit: pushSnapshot)
+                DraggableGroup(id: id, areaW: areaW, areaH: areaH, isLandscape: isLandscape, analogStickScale: stickScale, onBeginEdit: pushSnapshot)
             }
         }
         .environment(\.padSkin, settings.virtualPadSkin)
@@ -331,7 +303,8 @@ struct PadLayoutEditView: View {
             landscape: layout.landscape,
             perButtonPortrait: layout.perButtonPortrait,
             perButtonLandscape: layout.perButtonLandscape,
-            controlVisibility: layout.controlVisibility
+            controlVisibility: layout.controlVisibility,
+            skin: settings.virtualPadSkin
         )
     }
 
@@ -341,11 +314,19 @@ struct PadLayoutEditView: View {
         layout.perButtonPortrait = snapshot.perButtonPortrait
         layout.perButtonLandscape = snapshot.perButtonLandscape
         layout.controlVisibility = snapshot.controlVisibility
+        settings.virtualPadSkin = snapshot.skin
     }
 
     private func pushSnapshot() {
         undoStack.append(captureSnapshot())
     }
+
+    private func rollbackUnsavedChanges() {
+        guard let snapshot = originalSnapshot else { return }
+        restore(snapshot: snapshot)
+        undoStack.removeAll()
+        originalSnapshot = nil
+    }
 }
 
 // MARK: - Draggable group widget

app/src/main/swift/Views/VirtualControllerView.swift

@@ -701,24 +701,36 @@ struct VirtualControllerView: View {
                 let cW = cGeo.size.width
                 let cH = cGeo.size.height
 
-                PadBtn(label: "L2", w: 110, h: 40, btn: .L2)
-                    .scaleEffect(pos("l2", landscape: false).scale)
-                    .position(x: pos("l2", landscape: false).x * cW, y: pos("l2", landscape: false).y * cH)
-                PadBtn(label: "L1", w: 100, h: 30, btn: .L1)
-                    .scaleEffect(pos("l1", landscape: false).scale)
-                    .position(x: pos("l1", landscape: false).x * cW, y: pos("l1", landscape: false).y * cH)
-                PadBtn(label: "R2", w: 110, h: 40, btn: .R2)
-                    .scaleEffect(pos("r2", landscape: false).scale)
-                    .position(x: pos("r2", landscape: false).x * cW, y: pos("r2", landscape: false).y * cH)
-                PadBtn(label: "R1", w: 100, h: 30, btn: .R1)
-                    .scaleEffect(pos("r1", landscape: false).scale)
-                    .position(x: pos("r1", landscape: false).x * cW, y: pos("r1", landscape: false).y * cH)
-                PadBtn(label: "SEL", w: 42, h: 22, btn: .select)
-                    .scaleEffect(pos("select", landscape: false).scale)
-                    .position(x: pos("select", landscape: false).x * cW, y: pos("select", landscape: false).y * cH)
-                PadBtn(label: "START", w: 48, h: 22, btn: .start)
-                    .scaleEffect(pos("start", landscape: false).scale)
-                    .position(x: pos("start", landscape: false).x * cW, y: pos("start", landscape: false).y * cH)
+                if layout.isControlVisible("l2") {
+                    PadBtn(label: "L2", w: 110, h: 40, btn: .L2)
+                        .scaleEffect(pos("l2", landscape: false).scale)
+                        .position(x: pos("l2", landscape: false).x * cW, y: pos("l2", landscape: false).y * cH)
+                }
+                if layout.isControlVisible("l1") {
+                    PadBtn(label: "L1", w: 100, h: 30, btn: .L1)
+                        .scaleEffect(pos("l1", landscape: false).scale)
+                        .position(x: pos("l1", landscape: false).x * cW, y: pos("l1", landscape: false).y * cH)
+                }
+                if layout.isControlVisible("r2") {
+                    PadBtn(label: "R2", w: 110, h: 40, btn: .R2)
+                        .scaleEffect(pos("r2", landscape: false).scale)
+                        .position(x: pos("r2", landscape: false).x * cW, y: pos("r2", landscape: false).y * cH)
+                }
+                if layout.isControlVisible("r1") {
+                    PadBtn(label: "R1", w: 100, h: 30, btn: .R1)
+                        .scaleEffect(pos("r1", landscape: false).scale)
+                        .position(x: pos("r1", landscape: false).x * cW, y: pos("r1", landscape: false).y * cH)
+                }
+                if layout.isControlVisible("select") {
+                    PadBtn(label: "SEL", w: 42, h: 22, btn: .select)
+                        .scaleEffect(pos("select", landscape: false).scale)
+                        .position(x: pos("select", landscape: false).x * cW, y: pos("select", landscape: false).y * cH)
+                }
+                if layout.isControlVisible("start") {
+                    PadBtn(label: "START", w: 48, h: 22, btn: .start)
+                        .scaleEffect(pos("start", landscape: false).scale)
+                        .position(x: pos("start", landscape: false).x * cW, y: pos("start", landscape: false).y * cH)
+                }
 
                 // D-pad buttons (individual placement)
                 if layout.isControlVisible("dpad") {