Align iOS landscape layout editor with gameplay

Author: J1coding

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

@@ -57,8 +57,10 @@ struct PadLayoutEditView: View {
                     compactToolbar
                     Spacer()
                 }
+                .padding(.top, 50)
             }
         }
+        .ignoresSafeArea()
         .navigationBarHidden(true)
         .statusBarHidden()
         .persistentSystemOverlays(.hidden)
@@ -81,20 +83,6 @@ struct PadLayoutEditView: View {
             Color.clear
                 .allowsHitTesting(false)
 
-            // Subtle safe zone guide
-            let margin: CGFloat = 0.05
-            let guideRect = CGRect(
-                x: width * margin,
-                y: height * margin,
-                width: width * (1 - margin * 2),
-                height: height * (1 - margin * 2)
-            )
-            Rectangle()
-                .stroke(style: StrokeStyle(lineWidth: 1, dash: [6, 4]))
-                .foregroundStyle(.yellow.opacity(0.3))
-                .frame(width: guideRect.width, height: guideRect.height)
-                .position(x: guideRect.midX, y: guideRect.midY)
-
             customSkinPreview(isLandscape: true, width: width, height: height)
 
             editorContent(areaW: width, areaH: height)
@@ -271,14 +259,15 @@ 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, onBeginEdit: pushSnapshot)
+                DraggableGroup(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, analogStickScale: stickScale, onBeginEdit: pushSnapshot)
             }
         }
         .environment(\.padSkin, settings.virtualPadSkin)
@@ -288,14 +277,15 @@ struct PadLayoutEditView: View {
 
     @ViewBuilder
     private func editorPortraitContent(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, onBeginEdit: pushSnapshot)
+                DraggableGroup(id: id, areaW: areaW, areaH: areaH, isLandscape: editLandscape, analogStickScale: stickScale, onBeginEdit: pushSnapshot)
             }
         }
         .environment(\.padSkin, settings.virtualPadSkin)
@@ -334,6 +324,7 @@ private struct DraggableGroup: View {
     let areaW: CGFloat
     let areaH: CGFloat
     let isLandscape: Bool
+    let analogStickScale: CGFloat
     let onBeginEdit: () -> Void
 
     @State private var layout = PadLayoutStore.shared
@@ -434,40 +425,53 @@ private struct DraggableGroup: View {
 
     private var groupSize: CGSize {
         switch id {
-        case "dpad":   return CGSize(width: 120, height: 120)
-        case "action": return CGSize(width: 120, height: 120)
-        case "l1":     return CGSize(width: 110, height: 36)
-        case "l2":     return CGSize(width: 120, height: 48)
-        case "r1":     return CGSize(width: 110, height: 36)
-        case "r2":     return CGSize(width: 120, height: 48)
-        case "lstick", "rstick": return CGSize(width: 80, height: 90)
-        case "select": return CGSize(width: 50, height: 28)
-        case "start":  return CGSize(width: 56, height: 28)
-        default:       return CGSize(width: 60, height: 40)
+        case "dpad":
+            let s = isLandscape ? VirtualPadButtonOffset.dpadLandscapeSize : VirtualPadButtonOffset.dpadPortraitSize
+            return CGSize(width: s, height: s)
+        case "action":
+            let s = VirtualPadButtonOffset.actionButtonSize * 3.2
+            return CGSize(width: s, height: s)
+        case "l1":
+            return CGSize(width: 120, height: 32)
+        case "l2":
+            return CGSize(width: 130, height: 44)
+        case "r1":
+            return CGSize(width: 120, height: 32)
+        case "r2":
+            return CGSize(width: 130, height: 44)
+        case "lstick", "rstick":
+            let s = 68 * min(max(analogStickScale, 0.8), 1.6)
+            return CGSize(width: s, height: s)
+        case "select":
+            return CGSize(width: 40, height: 22)
+        case "start":
+            return CGSize(width: 48, height: 22)
+        default:
+            return CGSize(width: 60, height: 40)
         }
     }
 
     @ViewBuilder
     private var groupContent: some View {
         switch id {
         case "dpad":
-            DPadView(size: 100)
+            DPadView(size: isLandscape ? VirtualPadButtonOffset.dpadLandscapeSize : VirtualPadButtonOffset.dpadPortraitSize)
         case "action":
-            ActionButtonsView(size: 42)
+            ActionButtonsView(size: VirtualPadButtonOffset.actionButtonSize)
         case "l1":
-            PadBtn(label: "L1", w: 100, h: 30, btn: .L1)
+            PadBtn(label: "L1", w: 120, h: 32, btn: .L1)
         case "l2":
-            PadBtn(label: "L2", w: 110, h: 40, btn: .L2)
+            PadBtn(label: "L2", w: 130, h: 44, btn: .L2)
         case "r1":
-            PadBtn(label: "R1", w: 100, h: 30, btn: .R1)
+            PadBtn(label: "R1", w: 120, h: 32, btn: .R1)
         case "r2":
-            PadBtn(label: "R2", w: 110, h: 40, btn: .R2)
+            PadBtn(label: "R2", w: 130, h: 44, btn: .R2)
         case "lstick":
-            StickView(isLeft: true, sizeScale: 1.0)
+            StickView(isLeft: true, sizeScale: analogStickScale)
         case "rstick":
-            StickView(isLeft: false, sizeScale: 1.0)
+            StickView(isLeft: false, sizeScale: analogStickScale)
         case "select":
-            PadBtn(label: "SEL", w: 42, h: 22, btn: .select)
+            PadBtn(label: "SEL", w: 40, h: 22, btn: .select)
         case "start":
             PadBtn(label: "START", w: 48, h: 22, btn: .start)
         default: