render keyboard based on JSON def

Author: eagleoflqj

.gitmodules

@@ -25,3 +25,6 @@
 [submodule "ios-cmake"]
 	path = ios-cmake
 	url = https://github.com/leetal/ios-cmake
+[submodule "fcitx5-keyboard-layouts"]
+	path = fcitx5-keyboard-layouts
+	url = https://github.com/fcitx-contrib/fcitx5-keyboard-layouts

common/util.swift

@@ -92,6 +92,16 @@ public func removeFile(_ file: URL) -> Bool {
   }
 }
 
+public func readJSON(_ file: URL) -> Any? {
+  guard let stream = InputStream(url: file) else {
+    return nil
+  }
+  stream.open()
+  let j = try? JSONSerialization.jsonObject(with: stream)
+  stream.close()
+  return j
+}
+
 // Call on both app and keyboard to initialize input method list after install.
 public func initProfile() {
   mkdirP(appGroupConfig.path)

fcitx5-keyboard-layouts

@@ -131,6 +131,8 @@ if (RIME)
     copy_share_to_keyboard(copy_directory "rime-data")
 endif()
 
+copy_to_keyboard(copy_directory "${PROJECT_SOURCE_DIR}/fcitx5-keyboard-layouts/layout" "share/layout")
+
 # Embed keyboard.appex in app.
 copy_to_app(copy_directory "${PROJECT_BINARY_DIR}/keyboard/$<CONFIG>-${SDK_NAME}/keyboard.appex" "PlugIns/keyboard.appex")
 # Copy share directory, icon and profile.

src/CMakeLists.txt

@@ -15,15 +15,17 @@ set_target_properties(KeyboardUI PROPERTIES Swift_MODULE_NAME KeyboardUI)
 target_compile_options(KeyboardUI PUBLIC "$<$<COMPILE_LANGUAGE:Swift>:-cxx-interoperability-mode=default>")
 target_include_directories(KeyboardUI PUBLIC
     "${CMAKE_CURRENT_SOURCE_DIR}"
+    "${PROJECT_SOURCE_DIR}/common"
     "${PROJECT_BINARY_DIR}/protocol/$<CONFIG>-${SDK_NAME}"
+    "${PROJECT_BINARY_DIR}/common/$<CONFIG>-${SDK_NAME}"
 )
-target_link_libraries(KeyboardUI FcitxProtocol)
+target_link_libraries(KeyboardUI FcitxProtocol FcitxCommon SwiftUtil)
 
 _swift_generate_cxx_header(
     KeyboardUI
     "${CMAKE_CURRENT_BINARY_DIR}/include/keyboardui-swift.h"
     SOURCES "${CMAKE_CURRENT_SOURCE_DIR}/keyboardui.swift"
-    SEARCH_PATHS "${CMAKE_CURRENT_SOURCE_DIR};${PROJECT_BINARY_DIR}/protocol/$<CONFIG>-${SDK_NAME}"
+    SEARCH_PATHS "${CMAKE_CURRENT_SOURCE_DIR};${PROJECT_SOURCE_DIR}/common;${PROJECT_BINARY_DIR}/protocol/$<CONFIG>-${SDK_NAME};${PROJECT_BINARY_DIR}/common/$<CONFIG>-${SDK_NAME}"
 )
 
 add_fcitx5_addon(uipanel uipanel.cpp)

uipanel/CMakeLists.txt

@@ -111,7 +111,7 @@ struct EditView: View {
         .foregroundColor(.black)
         .cornerRadius(r)
     }.buttonStyle(PlainButtonStyle())
-      .shadow(color: Color.black.opacity(0.3), radius: 1, x: 0, y: 1)
+      .shadow(color: Color.gray, radius: 0, x: 0, y: 1)
       .frame(width: w, height: h)
       .overlay(
         RoundedRectangle(cornerRadius: r)

uipanel/Edit.swift

@@ -1,20 +1,71 @@
 import SwiftUI
 
+extension View {
+  func commonContentStyle(width: CGFloat, height: CGFloat, background: Color) -> some View {
+    self.frame(width: width - columnGap, height: height - rowGap)
+      .background(background)
+      .cornerRadius(keyCornerRadius)
+      .foregroundColor(.black)
+      .overlay(
+        RoundedRectangle(cornerRadius: keyCornerRadius)
+          .stroke(Color.clear, lineWidth: 0)
+      )
+  }
+
+  func commonContainerStyle(width: CGFloat, height: CGFloat) -> some View {
+    self.shadow(color: Color.gray, radius: 0, x: 0, y: 1)
+      .frame(width: width, height: height)
+  }
+}
+
 struct KeyView: View {
   let label: String
+  let key: String
+  let width: CGFloat
+  let height: CGFloat
 
   var body: some View {
     Button {
-      client.keyPressed(label, "")
+      client.keyPressed(key, "")
     } label: {
       Text(label)
-        .frame(width: label == " " ? 100 : 35, height: 40)
-        .background(Color.white)
-        .cornerRadius(5)
-        .overlay(
-          RoundedRectangle(cornerRadius: 5)
-            .stroke(Color.gray, lineWidth: 1)
-        )
-    }
+        .font(.system(size: height * 0.5).weight(.light))
+        .commonContentStyle(width: width, height: height, background: normalBackground)
+    }.commonContainerStyle(width: width, height: height)
+  }
+}
+
+struct SpaceView: View {
+  let label: String
+  let width: CGFloat
+  let height: CGFloat
+
+  var body: some View {
+    Button {
+      client.keyPressed(" ", "")
+    } label: {
+      Text(label)
+        .font(.system(size: height * 0.4))
+        .commonContentStyle(width: width, height: height, background: normalBackground)
+    }.commonContainerStyle(width: width, height: height)
+  }
+}
+
+struct BackspaceView: View {
+  let width: CGFloat
+  let height: CGFloat
+
+  var body: some View {
+    Button {
+      client.keyPressed("", "Backspace")
+    } label: {
+      VStack {
+        Image(systemName: "delete.left")
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .frame(height: height * 0.4)
+      }
+      .commonContentStyle(width: width, height: height, background: functionBackground)
+    }.commonContainerStyle(width: width, height: height)
   }
 }

uipanel/Key.swift

@@ -1,23 +1,75 @@
 import SwiftUI
+import SwiftUtil
+
+private func getFlexes(_ keys: [[String: Any]]) -> [CGFloat] {
+  return keys.map({ key in
+    if let flex = key["flex"] as? String,
+      let value = Double(flex)
+    {
+      return CGFloat(value)
+    }
+    return 1
+  })
+}
 
 struct KeyboardView: View {
-  let keys: [[String]] = [
-    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
-    ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
-    ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
-    ["`", "z", "x", "c", "v", "b", "n", "m"],
-    [",", " ", "."],
-  ]
+  @Binding var spaceLabel: String
+  @State private var rows: [[String: Any]] = []
 
   var body: some View {
-    VStack(spacing: 8) {
-      ForEach(keys, id: \.self) { row in
-        HStack(spacing: 6) {
-          ForEach(row, id: \.self) { key in
-            KeyView(label: key)
-          }
+    GeometryReader { geometry in
+      let width = geometry.size.width
+      let height = keyboardHeight / CGFloat(rows.count)
+      VStack(spacing: 0) {
+        ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
+          renderRow(row, width, height)
         }
       }
+      .onAppear {
+        setLayout()
+      }
     }.frame(height: keyboardHeight)
   }
+
+  func setLayout() {
+    let layoutUrl = Bundle.main.bundleURL.appendingPathComponent("share/layout/qwerty.json")
+    guard let content = readJSON(layoutUrl) as? [String: Any],
+      let layers = content["layers"] as? [[String: Any]],
+      let defaultLayer = layers.first,
+      let rows = defaultLayer["rows"] as? [[String: Any]]
+    else {
+      return
+    }
+    self.rows = rows
+  }
+
+  func renderRow(_ row: [String: Any], _ width: CGFloat, _ height: CGFloat) -> some View {
+    guard let keys = row["keys"] as? [[String: Any]] else {
+      return AnyView(EmptyView())
+    }
+    let flexes = getFlexes(keys)
+    let unit = width / flexes.reduce(0, +)
+    return AnyView(
+      HStack(spacing: 0) {
+        ForEach(Array(keys.enumerated()), id: \.offset) { i, key in
+          let keyWidth = flexes[i] * unit
+          if let type = key["type"] as? String {
+            switch type {
+            case "key":
+              if let label = key["label"] as? String,
+                let k = key["key"] as? String
+              {
+                KeyView(label: label, key: k, width: keyWidth, height: height)
+              }
+            case "space":
+              SpaceView(label: spaceLabel, width: keyWidth, height: height)
+            case "backspace":
+              BackspaceView(width: keyWidth, height: height)
+            default:
+              VStack {}.frame(width: keyWidth, height: height)
+            }
+          }
+        }
+      }.frame(width: width, height: height))
+  }
 }

uipanel/Keyboard.swift

@@ -1,5 +1,6 @@
 import FcitxProtocol
 import SwiftUI
+import SwiftUtil
 
 public enum DisplayMode {
   case initial
@@ -12,6 +13,7 @@ private class ViewModel: ObservableObject {
   @Published var mode: DisplayMode = .initial
   @Published var candidates: [String] = []
   @Published var actions = [StatusAreaAction]()
+  @Published var spaceLabel = ""
 }
 
 public struct VirtualKeyboardView: View {
@@ -29,7 +31,7 @@ public struct VirtualKeyboardView: View {
       } else if viewModel.mode == .edit {
         EditView()
       } else {
-        KeyboardView()
+        KeyboardView(spaceLabel: $viewModel.spaceLabel)
       }
     }.background(lightBackground)
   }
@@ -47,8 +49,16 @@ public struct VirtualKeyboardView: View {
     viewModel.candidates = candidates
   }
 
-  public func setActions(_ actions: [StatusAreaAction]) {
+  public func setStatusArea(
+    _ actions: [StatusAreaAction], _ currentInputMethod: String, _ inputMethods: [InputMethod]
+  ) {
     viewModel.actions = actions
+    for inputMethod in inputMethods {
+      if inputMethod.name == currentInputMethod {
+        viewModel.spaceLabel = inputMethod.displayName
+        break
+      }
+    }
   }
 }
 

uipanel/VirtualKeyboard.swift

@@ -1,5 +1,7 @@
+import FcitxCommon
 import FcitxProtocol
 import SwiftUI
+import SwiftUtil
 
 var client: FcitxProtocol!
 
@@ -34,8 +36,9 @@ public struct StatusAreaAction: Identifiable {
   }
 }
 
-public func setStatusAreaActionsAsync(_ actions: [StatusAreaAction]) {
+public func setStatusAreaAsync(_ actions: [StatusAreaAction], _ currentInputMethod: String) {
   DispatchQueue.main.async {
-    virtualKeyboardView.setActions(actions)
+    virtualKeyboardView.setStatusArea(
+      actions, currentInputMethod, deserialize([InputMethod].self, String(getInputMethods())))
   }
 }