unify edit button impl with key; reuse backspace

eagleoflqj · eagleoflqj · commit cc2b56362c3e · 2025-08-30T19:38:54.000-04:00
diff --git a/uipanel/Edit.swift b/uipanel/Edit.swift
@@ -1,5 +1,8 @@
 import SwiftUI
 
+let editKeyCornerRadius: CGFloat = 8
+let editKeyGap: CGFloat = 8
+
 struct EditView: View {
   @Environment(\.colorScheme) var colorScheme
   let totalWidth: CGFloat
@@ -12,136 +15,111 @@ struct EditView: View {
 
       ZStack {
         button(
-          image: "arrowtriangle.left.fill", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrowtriangle.left.fill", shrink: 15, normal: true,
           index: 0, width: width, height: height * 3
         ) {
           client.keyPressed("", "ArrowLeft")
         }
         button(
-          image: "arrowtriangle.up.fill", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrowtriangle.up.fill", shrink: 15, normal: true,
           index: 1, width: width, height: height * 1.5
         ) {
           client.keyPressed("", "ArrowUp")
         }
         button(
-          image: "arrowtriangle.right.fill", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrowtriangle.right.fill", shrink: 15, normal: true,
           index: 2, width: width, height: height * 3
         ) {
           client.keyPressed("", "ArrowRight")
         }
         button(
-          image: "scissors", shrink: 10,
-          background: getFunctionBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "scissors", shrink: 10, normal: false,
           index: 3, width: width, height: height
         ) {
           client.cut()
         }
         button(
-          image: "doc.on.doc", shrink: 10,
-          background: getFunctionBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "doc.on.doc", shrink: 10, normal: false,
           index: 7, width: width, height: height
         ) {
           client.copy()
         }
         button(
-          image: "arrowtriangle.down.fill", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrowtriangle.down.fill", shrink: 15, normal: true,
           index: 5, width: width, height: height * 1.5
         ) {
           client.keyPressed("", "ArrowDown")
         }
         button(
-          image: "doc.on.clipboard", shrink: 10,
-          background: getFunctionBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "doc.on.clipboard", shrink: 10, normal: false,
           index: 11, width: width, height: height
         ) {
           client.paste()
         }
         button(
-          image: "arrow.left.to.line", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrow.left.to.line", shrink: 15, normal: true,
           index: 12, width: width * 1.5, height: height
         ) {
           client.keyPressed("", "Home")
         }
         button(
-          image: "arrow.right.to.line", shrink: 15,
-          background: getNormalBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "arrow.right.to.line", shrink: 15, normal: true,
           index: 13, width: width * 1.5, height: height
         ) {
           client.keyPressed("", "End")
         }
         button(
-          image: "delete.left", shrink: 10,
-          background: getFunctionBackground(colorScheme),
-          foreground: getNormalForeground(colorScheme),
-          shadow: getShadow(colorScheme),
+          image: "delete.left", shrink: 10, normal: false,
           index: 15, width: width, height: height
-        ) {
-          client.keyPressed("", "Backspace")
-        }
+        ) {}
       }
     }
   }
 
   private func position(_ index: Int, _ width: CGFloat, _ height: CGFloat) -> CGPoint {
     let row = index / 4
     let col = index % 4
-    return CGPoint(x: (CGFloat(col) + 0.5) * width, y: (CGFloat(row) + 0.5) * height)
+    return CGPoint(x: CGFloat(col) * width, y: CGFloat(row) * height)
   }
 
   private func button(
-    image: String, shrink: CGFloat, background: Color, foreground: Color, shadow: Color,
+    image: String, shrink: CGFloat, normal: Bool,
     index: Int, width: CGFloat, height: CGFloat, action: @escaping () -> Void
   ) -> some View {
-    let w = width - 8
-    let h = height - 8
-    let r: CGFloat = 8
-    return Button {
-      action()
-    } label: {
-      VStack {
-        let symbol = Image(systemName: image)
-          .resizable()
-          .aspectRatio(contentMode: .fit)
-          .foregroundColor(foreground)
-        let size = keyboardHeight / shrink
-        if image == "arrowtriangle.up.fill" || image == "arrowtriangle.down.fill" {
-          symbol.frame(width: size)
-        } else {
-          symbol.frame(height: size)
-        }
-      }.frame(width: w, height: h)
-        .background(background)
-        .foregroundColor(.black)
-        .cornerRadius(r)
-    }.buttonStyle(PlainButtonStyle())
-      .shadow(color: shadow, radius: 0, x: 0, y: 1)
-      .frame(width: w, height: h)
-      .overlay(
-        RoundedRectangle(cornerRadius: r)
-          .stroke(Color.clear, lineWidth: 1)
-      ).position(position(index, width, height))
+    let background = normal ? getNormalBackground(colorScheme) : getFunctionBackground(colorScheme)
+    let pressedBackground =
+      normal ? getFunctionBackground(colorScheme) : getNormalBackground(colorScheme)
+    let foreground = getNormalForeground(colorScheme)
+    let p = position(index, width, height)
+    let size = keyboardHeight / shrink
+    let useWidth = image == "arrowtriangle.up.fill" || image == "arrowtriangle.down.fill"
+    let symbol = Image(systemName: image)
+      .resizable()
+      .aspectRatio(contentMode: .fit)
+      .condition(useWidth) {
+        $0.frame(width: size)
+      }
+      .condition(!useWidth) {
+        $0.frame(height: size)
+      }
+    if image == "delete.left" {
+      return AnyView(
+        BackspaceView(
+          x: p.x, y: p.y, width: width, height: height, hMargin: editKeyGap, vMargin: editKeyGap,
+          radius: editKeyCornerRadius))
+    }
+    return AnyView(
+      symbol.keyProperties(
+        x: p.x, y: p.y, width: width, height: height, hMargin: editKeyGap, vMargin: editKeyGap,
+        radius: editKeyCornerRadius,
+        background: background,
+        pressedBackground: pressedBackground,
+        foreground: foreground,
+        shadow: getShadow(colorScheme),
+        action: GestureAction(
+          onTap: {
+            action()
+          }))
+    )
   }
 }
diff --git a/uipanel/Key.swift b/uipanel/Key.swift
@@ -102,6 +102,9 @@ struct BackspaceView: View {
   let y: CGFloat
   let width: CGFloat
   let height: CGFloat
+  var hMargin: CGFloat? = nil
+  var vMargin: CGFloat? = nil
+  var radius: CGFloat? = nil
 
   var body: some View {
     Image(systemName: "delete.left")
@@ -110,6 +113,9 @@ struct BackspaceView: View {
       .frame(height: height * 0.4)
       .keyProperties(
         x: x, y: y, width: width, height: height,
+        hMargin: hMargin ?? columnGap,
+        vMargin: vMargin ?? rowGap,
+        radius: radius ?? keyCornerRadius,
         background: getFunctionBackground(colorScheme),
         pressedBackground: getNormalBackground(colorScheme),
         foreground: getNormalForeground(colorScheme),
diff --git a/uipanel/KeyModifier.swift b/uipanel/KeyModifier.swift
@@ -39,6 +39,9 @@ struct KeyModifier: ViewModifier {
   let y: CGFloat
   let width: CGFloat
   let height: CGFloat
+  let hMargin: CGFloat
+  let vMargin: CGFloat
+  let radius: CGFloat
   let background: Color
   let pressedBackground: Color
   let foreground: Color
@@ -57,9 +60,9 @@ struct KeyModifier: ViewModifier {
       } else {
         content
       }
-    }.frame(width: width - columnGap, height: height - rowGap)
+    }.frame(width: width - hMargin, height: height - rowGap)
       .background(isPressed ? pressedBackground : background)
-      .cornerRadius(keyCornerRadius)
+      .cornerRadius(radius)
       .foregroundColor(isPressed ? pressedForeground : foreground)
       .shadow(color: shadow, radius: 0, x: 0, y: 1)
       .condition(topRight != nil) {
@@ -75,7 +78,7 @@ struct KeyModifier: ViewModifier {
           .onChanged { value in
             let bubbleX = x + width / 2
             let bubbleY = y + height / 2
-            let bubbleWidth = width - columnGap
+            let bubbleWidth = width - hMargin
             let bubbleHeight = height - rowGap
 
             if !isPressed {  // touch start
@@ -187,15 +190,17 @@ extension View {
 
   func keyProperties(
     x: CGFloat = 0, y: CGFloat = 0,
-    width: CGFloat, height: CGFloat, background: Color, pressedBackground: Color, foreground: Color,
-    shadow: Color, action: GestureAction, pressedForeground: Color? = nil,
+    width: CGFloat, height: CGFloat, hMargin: CGFloat = columnGap, vMargin: CGFloat = rowGap,
+    radius: CGFloat = keyCornerRadius, background: Color, pressedBackground: Color,
+    foreground: Color, shadow: Color, action: GestureAction, pressedForeground: Color? = nil,
     pressedView: (any View)? = nil, topRight: String? = nil, bubbleLabel: String? = nil,
     swipeUpLabel: String? = nil
   ) -> some View {
     self.modifier(
       KeyModifier(
-        x: x, y: y, width: width, height: height, background: background,
-        pressedBackground: pressedBackground,
+        x: x, y: y, width: width, height: height, hMargin: hMargin, vMargin: vMargin,
+        radius: radius,
+        background: background, pressedBackground: pressedBackground,
         foreground: foreground, pressedForeground: pressedForeground ?? foreground,
         shadow: shadow, action: action, pressedView: pressedView, topRight: topRight,
         bubbleLabel: bubbleLabel, swipeUpLabel: swipeUpLabel
