Rocky
38e5ad570d
Offline English lexicon suggestions with autocapitalization, plus a same-height Chinese more-candidates grid over the key area.
507 lines
19 KiB
Swift
507 lines
19 KiB
Swift
// TypingRootView.swift
|
|
// OSGKeyboard · Keyboard Extension
|
|
//
|
|
// Typing surface: candidate bar + QWERTY / 123 / symbols.
|
|
// Top-leading control returns to the voice surface.
|
|
|
|
import SwiftUI
|
|
import OSGKeyboardShared
|
|
|
|
enum TypingLayoutMetrics {
|
|
static let outerPaddingTop: CGFloat = 4
|
|
static let outerPaddingBottom: CGFloat = 4
|
|
static let topRegionHeight: CGFloat = KeyboardTopBarMetrics.height
|
|
static let keyRowHeight: CGFloat = 50
|
|
static let keyRowSpacing: CGFloat = 7
|
|
static let keyHorizontalSpacing: CGFloat = 6
|
|
static let bottomRowHeight: CGFloat = KeyboardChromeLayout.actionKeyHeight
|
|
static let verticalKeySpacing: CGFloat = 8
|
|
static let secondRowInset: CGFloat = 18
|
|
static let keyCornerRadius: CGFloat = KeyboardChromeLayout.actionKeyCornerRadius
|
|
/// Match the voice surface: compact side keys and a flexible center key.
|
|
static let bottomSideKeyWidth: CGFloat = KeyboardChromeLayout.sideActionKeyWidth
|
|
/// Shared top row + three 50 pt key rows + native spacing + bottom row.
|
|
static let totalHeight: CGFloat = KeyboardChromeLayout.totalHeight
|
|
/// Collapsed candidate strip: keep this small so ScrollView doesn't fight ▼.
|
|
static let collapsedBarCandidateLimit = 10
|
|
/// Trailing ▼/▲ control (visual chip + hit pad); lives in an HStack, not over text.
|
|
static let expandChevronHitWidth: CGFloat = 44
|
|
static let expandChevronVisualSize: CGFloat = 34
|
|
static let expandGridColumns = 5
|
|
static let expandCellHeight: CGFloat = 42
|
|
}
|
|
|
|
struct TypingRootView: View {
|
|
@Environment(\.colorScheme) private var colorScheme
|
|
@ObservedObject var state: KeyboardState
|
|
@ObservedObject var typing: TypingSessionController
|
|
|
|
var onInsert: (String) -> Void
|
|
var onDeleteBackward: () -> Void
|
|
|
|
/// After the first expand, keep the panel tree mounted and only toggle
|
|
/// opacity so subsequent ▼/▲ taps stay cheap.
|
|
@State private var candidatePanelMounted = false
|
|
|
|
static let totalHeight: CGFloat = TypingLayoutMetrics.totalHeight
|
|
|
|
private var palette: ThemePalette {
|
|
colorScheme == .dark ? Palette.dark : Palette.light
|
|
}
|
|
|
|
var body: some View {
|
|
let expanded = typing.isCandidatePanelExpanded
|
|
VStack(spacing: 0) {
|
|
topRegion
|
|
.frame(height: TypingLayoutMetrics.topRegionHeight)
|
|
|
|
// Keep the QWERTY tree mounted; only toggle visibility so ▼/▲
|
|
// does not destroy GeometryReader key rows every time.
|
|
ZStack(alignment: .top) {
|
|
VStack(spacing: 0) {
|
|
keyGrid
|
|
.padding(.top, TypingLayoutMetrics.verticalKeySpacing)
|
|
|
|
bottomRow
|
|
.frame(height: TypingLayoutMetrics.bottomRowHeight)
|
|
.padding(.top, TypingLayoutMetrics.keyRowSpacing)
|
|
}
|
|
.opacity(expanded ? 0 : 1)
|
|
.allowsHitTesting(!expanded)
|
|
.accessibilityHidden(expanded)
|
|
|
|
if expanded || candidatePanelMounted {
|
|
expandedCandidatePanel
|
|
.padding(.top, TypingLayoutMetrics.verticalKeySpacing)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
.opacity(expanded ? 1 : 0)
|
|
.allowsHitTesting(expanded)
|
|
.accessibilityHidden(!expanded)
|
|
.transition(.identity)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
.padding(.top, TypingLayoutMetrics.outerPaddingTop)
|
|
.padding(.bottom, TypingLayoutMetrics.outerPaddingBottom)
|
|
.padding(.horizontal, KeyboardChromeLayout.horizontalInset)
|
|
.frame(maxWidth: .infinity)
|
|
.frame(height: Self.totalHeight)
|
|
.background(Color.clear)
|
|
.environment(\.themePalette, palette)
|
|
.onAppear { typing.enterTypingMode() }
|
|
.onChange(of: typing.isCandidatePanelExpanded) { _, isExpanded in
|
|
if isExpanded { candidatePanelMounted = true }
|
|
}
|
|
.onChange(of: hasCandidateContent) { _, hasContent in
|
|
if !hasContent { candidatePanelMounted = false }
|
|
}
|
|
}
|
|
|
|
// MARK: - Shared top region
|
|
|
|
@ViewBuilder
|
|
private var topRegion: some View {
|
|
if hasCandidateContent {
|
|
candidateBar
|
|
} else {
|
|
idleTopBar
|
|
}
|
|
}
|
|
|
|
private var hasCandidateContent: Bool {
|
|
!typing.composition.preedit.isEmpty || !typing.composition.candidates.isEmpty
|
|
}
|
|
|
|
private var idleTopBar: some View {
|
|
HStack(spacing: Spacing.xs) {
|
|
KeyboardBrandLogo(action: state.openSettings)
|
|
|
|
if let err = typing.lastError {
|
|
Text(err)
|
|
.font(.system(size: 11))
|
|
.foregroundStyle(palette.danger)
|
|
.lineLimit(1)
|
|
}
|
|
|
|
Spacer(minLength: 0)
|
|
|
|
KeyboardTopControls(
|
|
state: state,
|
|
typing: typing,
|
|
palette: palette,
|
|
onInsert: onInsert
|
|
)
|
|
}
|
|
.padding(.horizontal, KeyboardTopBarMetrics.nestedHorizontalInset)
|
|
}
|
|
|
|
// MARK: - Candidates
|
|
|
|
private var candidateBar: some View {
|
|
// HStack (not overlay / safeAreaInset): ▼ never paints over candidate text.
|
|
HStack(spacing: 0) {
|
|
ScrollView(.horizontal, showsIndicators: false) {
|
|
HStack(spacing: Spacing.xs) {
|
|
if typing.composition.candidates.isEmpty {
|
|
selectedCandidateLabel(text: typing.composition.preedit)
|
|
} else if typing.isCandidatePanelExpanded {
|
|
candidateChip(text: typing.composition.candidates[0].text) {
|
|
apply(typing.selectCandidate(at: 0))
|
|
}
|
|
} else {
|
|
ForEach(
|
|
Array(
|
|
typing.composition.candidates
|
|
.prefix(TypingLayoutMetrics.collapsedBarCandidateLimit)
|
|
.enumerated()
|
|
),
|
|
id: \.element.id
|
|
) { index, candidate in
|
|
if index == 0 {
|
|
candidateChip(text: candidate.text) {
|
|
apply(typing.selectCandidate(at: index))
|
|
}
|
|
} else {
|
|
Text(candidate.text)
|
|
.font(.system(size: 20, weight: .regular))
|
|
.foregroundStyle(palette.textPrimary)
|
|
.padding(.horizontal, 10)
|
|
.frame(height: 40)
|
|
.contentShape(Rectangle())
|
|
.onTapGesture {
|
|
apply(typing.selectCandidate(at: index))
|
|
}
|
|
.accessibilityAddTraits(.isButton)
|
|
.accessibilityLabel(candidate.text)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding(.leading, KeyboardTopBarMetrics.nestedHorizontalInset)
|
|
.padding(.trailing, Spacing.xs)
|
|
}
|
|
.scrollBounceBehavior(.basedOnSize, axes: .horizontal)
|
|
|
|
if typing.canExpandCandidatePanel {
|
|
expandChevronButton
|
|
} else {
|
|
Color.clear.frame(width: KeyboardTopBarMetrics.nestedHorizontalInset)
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Opaque chip like the translation control so ▼ never shares pixels with text.
|
|
private var expandChevronButton: some View {
|
|
Button {
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
typing.toggleCandidatePanelExpanded()
|
|
}
|
|
} label: {
|
|
Image(systemName: typing.isCandidatePanelExpanded ? "chevron.up" : "chevron.down")
|
|
.font(.system(size: 14, weight: .semibold))
|
|
.foregroundStyle(palette.textSecondary)
|
|
.frame(
|
|
width: TypingLayoutMetrics.expandChevronVisualSize,
|
|
height: TypingLayoutMetrics.expandChevronVisualSize
|
|
)
|
|
.background(expandChevronFill, in: Circle())
|
|
.overlay(Circle().stroke(palette.divider, lineWidth: 0.5))
|
|
.frame(
|
|
width: TypingLayoutMetrics.expandChevronHitWidth,
|
|
height: KeyboardTopBarMetrics.height
|
|
)
|
|
.contentShape(Rectangle())
|
|
}
|
|
.buttonStyle(.plain)
|
|
.padding(.trailing, KeyboardTopBarMetrics.nestedHorizontalInset)
|
|
.accessibilityLabel(typing.isCandidatePanelExpanded ? "收起候选" : "更多候选")
|
|
}
|
|
|
|
private var expandChevronFill: Color {
|
|
colorScheme == .dark ? Color(white: 0.30) : .white
|
|
}
|
|
|
|
/// UIKit-recycled labels — no SwiftUI Button per candidate.
|
|
private var expandedCandidatePanel: some View {
|
|
CandidateExpandGridView(
|
|
candidates: typing.composition.candidates,
|
|
textColor: UIColor(keyTextColor),
|
|
dividerColor: UIColor(palette.dividerStrong),
|
|
onSelect: { index in
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
apply(typing.selectCandidate(at: index))
|
|
}
|
|
}
|
|
)
|
|
.padding(.horizontal, KeyboardTopBarMetrics.nestedHorizontalInset)
|
|
}
|
|
|
|
private func candidateChip(text: String, action: @escaping () -> Void) -> some View {
|
|
selectedCandidateLabel(text: text)
|
|
.contentShape(Rectangle())
|
|
.onTapGesture(perform: action)
|
|
.accessibilityAddTraits(.isButton)
|
|
.accessibilityLabel(text)
|
|
}
|
|
|
|
private func selectedCandidateLabel(text: String) -> some View {
|
|
VStack(spacing: 0) {
|
|
Text(text)
|
|
.font(.system(size: 19, weight: .medium))
|
|
.lineLimit(1)
|
|
if !typing.composition.preedit.isEmpty {
|
|
Text(typing.composition.preedit)
|
|
.font(.system(size: 9, weight: .regular, design: .monospaced))
|
|
.foregroundStyle(palette.textSecondary)
|
|
.lineLimit(1)
|
|
}
|
|
}
|
|
.foregroundStyle(keyTextColor)
|
|
.padding(.horizontal, 12)
|
|
.frame(minWidth: 56, minHeight: 40)
|
|
.background(
|
|
selectedCandidateFill,
|
|
in: RoundedRectangle(cornerRadius: 9, style: .continuous)
|
|
)
|
|
}
|
|
|
|
// MARK: - Keys
|
|
|
|
private var keyGrid: some View {
|
|
VStack(spacing: TypingLayoutMetrics.keyRowSpacing) {
|
|
ForEach(Array(typing.keyRows.enumerated()), id: \.offset) { rowIndex, row in
|
|
GeometryReader { proxy in
|
|
let inset = rowIndex == 1 ? TypingLayoutMetrics.secondRowInset : 0
|
|
let weights = row.enumerated().map {
|
|
keyWeight(label: $0.element, index: $0.offset, rowIndex: rowIndex)
|
|
}
|
|
let spacing = TypingLayoutMetrics.keyHorizontalSpacing
|
|
* CGFloat(max(0, row.count - 1))
|
|
let availableWidth = proxy.size.width - inset * 2 - spacing
|
|
let unitWidth = availableWidth / max(1, weights.reduce(0, +))
|
|
|
|
HStack(spacing: TypingLayoutMetrics.keyHorizontalSpacing) {
|
|
ForEach(Array(row.enumerated()), id: \.offset) { keyIndex, key in
|
|
keyButton(key)
|
|
.frame(width: unitWidth * weights[keyIndex])
|
|
}
|
|
}
|
|
.padding(.horizontal, inset)
|
|
}
|
|
.frame(height: TypingLayoutMetrics.keyRowHeight)
|
|
}
|
|
}
|
|
}
|
|
|
|
@ViewBuilder
|
|
private func keyButton(_ label: String) -> some View {
|
|
if label == "⌫" {
|
|
typingDeleteKey()
|
|
} else {
|
|
let isSpecial = ["⇧", "123", "#+=", "ABC"].contains(label)
|
|
Button {
|
|
apply(typing.handleKey(label))
|
|
} label: {
|
|
keyLabel(label, isSpecial: isSpecial)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
.buttonStyle(nativeKeyStyle)
|
|
}
|
|
}
|
|
|
|
/// Shares ``RepeatingPressButton`` with the voice toolbar delete key.
|
|
private func typingDeleteKey() -> some View {
|
|
RepeatingPressButton {
|
|
apply(typing.handleKey("⌫"))
|
|
} label: { isPressed in
|
|
Image(systemName: "delete.left")
|
|
.font(.system(size: 20, weight: .medium))
|
|
.foregroundStyle(keyTextColor)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
.background(
|
|
RoundedRectangle(
|
|
cornerRadius: TypingLayoutMetrics.keyCornerRadius,
|
|
style: .continuous
|
|
)
|
|
.fill(isPressed ? keyPressedFill : keyFill)
|
|
)
|
|
.overlay(
|
|
RoundedRectangle(
|
|
cornerRadius: TypingLayoutMetrics.keyCornerRadius,
|
|
style: .continuous
|
|
)
|
|
.stroke(palette.divider, lineWidth: 0.5)
|
|
)
|
|
.shadow(
|
|
color: Color.black.opacity(isPressed ? 0.04 : 0.13),
|
|
radius: isPressed ? 0.5 : 1,
|
|
y: isPressed ? 0 : 1
|
|
)
|
|
.scaleEffect(isPressed ? 0.98 : 1)
|
|
.animation(.easeOut(duration: 0.08), value: isPressed)
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
|
|
@ViewBuilder
|
|
private func keyLabel(_ label: String, isSpecial: Bool) -> some View {
|
|
switch label {
|
|
case "⇧":
|
|
Image(systemName: typing.shiftActive || typing.capsLock ? "shift.fill" : "shift")
|
|
.font(.system(size: 19, weight: .medium))
|
|
.foregroundStyle(keyTextColor)
|
|
default:
|
|
Text(label)
|
|
.font(
|
|
.system(
|
|
size: isSpecial ? 15 : 22,
|
|
weight: isSpecial ? .semibold : .regular
|
|
)
|
|
)
|
|
.foregroundStyle(keyTextColor)
|
|
}
|
|
}
|
|
|
|
private var bottomRow: some View {
|
|
HStack(spacing: TypingLayoutMetrics.keyHorizontalSpacing) {
|
|
Button {
|
|
typing.setPage(typing.page == .letters ? .numbers : .letters)
|
|
} label: {
|
|
Text(typing.page == .letters ? "123" : "ABC")
|
|
.font(.system(size: 15, weight: .semibold))
|
|
.foregroundStyle(keyTextColor)
|
|
.frame(
|
|
width: TypingLayoutMetrics.bottomSideKeyWidth,
|
|
height: TypingLayoutMetrics.bottomRowHeight
|
|
)
|
|
}
|
|
.buttonStyle(nativeKeyStyle)
|
|
|
|
Button {
|
|
apply(typing.handleSpace())
|
|
} label: {
|
|
Text(typing.language == .chinese ? "空格" : "space")
|
|
.font(.system(size: 17, weight: .regular))
|
|
.foregroundStyle(keyTextColor)
|
|
.frame(maxWidth: .infinity)
|
|
.frame(height: TypingLayoutMetrics.bottomRowHeight)
|
|
}
|
|
.buttonStyle(nativeKeyStyle)
|
|
|
|
Button {
|
|
apply(typing.handleReturn())
|
|
} label: {
|
|
returnKeyLabel
|
|
.foregroundStyle(returnKeyTextColor)
|
|
.frame(
|
|
width: TypingLayoutMetrics.bottomSideKeyWidth,
|
|
height: TypingLayoutMetrics.bottomRowHeight
|
|
)
|
|
}
|
|
.buttonStyle(returnKeyStyle)
|
|
}
|
|
}
|
|
|
|
@ViewBuilder
|
|
private var returnKeyLabel: some View {
|
|
switch state.returnKeyRole {
|
|
case .newline:
|
|
Image(systemName: "arrow.turn.down.left")
|
|
.font(.system(size: 21, weight: .medium))
|
|
case .send:
|
|
ExtL10n.text(state.returnKeyRole.titleKey)
|
|
.font(.system(size: 15, weight: .semibold))
|
|
}
|
|
}
|
|
|
|
private func apply(_ output: TypingOutput) {
|
|
guard !output.isEmpty else {
|
|
typing.syncAutocapitalization()
|
|
return
|
|
}
|
|
if output.deleteCount > 0 {
|
|
for _ in 0..<output.deleteCount {
|
|
onDeleteBackward()
|
|
}
|
|
}
|
|
if !output.text.isEmpty {
|
|
onInsert(output.text)
|
|
}
|
|
// Proxy context is up to date after inserts/deletes — refresh Shift.
|
|
typing.syncAutocapitalization()
|
|
}
|
|
|
|
private func keyWeight(label: String, index: Int, rowIndex: Int) -> CGFloat {
|
|
if label == "⌫" || label == "⇧" || label == "#+=" {
|
|
return 1.35
|
|
}
|
|
if rowIndex == 2 && index == 0 {
|
|
// Double-pinyin semicolon occupies the normal Shift footprint.
|
|
return 1.35
|
|
}
|
|
return 1
|
|
}
|
|
|
|
private var keyFill: Color {
|
|
NativeKeyboardKeyColors.fill(for: colorScheme)
|
|
}
|
|
|
|
private var keyPressedFill: Color {
|
|
NativeKeyboardKeyColors.pressedFill(for: colorScheme)
|
|
}
|
|
|
|
private var keyTextColor: Color {
|
|
NativeKeyboardKeyColors.text(for: colorScheme)
|
|
}
|
|
|
|
private var selectedCandidateFill: Color {
|
|
colorScheme == .dark ? Color(white: 0.36) : .white
|
|
}
|
|
|
|
private var nativeKeyStyle: NativeKeyboardKeyStyle {
|
|
NativeKeyboardKeyStyle(
|
|
fill: keyFill,
|
|
pressedFill: keyPressedFill,
|
|
border: palette.divider,
|
|
cornerRadius: TypingLayoutMetrics.keyCornerRadius
|
|
)
|
|
}
|
|
|
|
private var returnKeyStyle: NativeKeyboardKeyStyle {
|
|
switch state.returnKeyRole {
|
|
case .newline:
|
|
return nativeKeyStyle
|
|
case .send:
|
|
return NativeKeyboardKeyStyle(
|
|
fill: sendKeyFill,
|
|
pressedFill: sendKeyPressedFill,
|
|
border: Color.black.opacity(colorScheme == .dark ? 0.10 : 0.08),
|
|
cornerRadius: TypingLayoutMetrics.keyCornerRadius
|
|
)
|
|
}
|
|
}
|
|
|
|
private var returnKeyTextColor: Color {
|
|
switch state.returnKeyRole {
|
|
case .newline:
|
|
return keyTextColor
|
|
case .send:
|
|
return .white
|
|
}
|
|
}
|
|
|
|
/// The send key stays recognizable in both appearances without becoming neon.
|
|
private var sendKeyFill: Color {
|
|
NativeKeyboardKeyColors.sendFill(for: colorScheme)
|
|
}
|
|
|
|
private var sendKeyPressedFill: Color {
|
|
NativeKeyboardKeyColors.sendPressedFill(for: colorScheme)
|
|
}
|
|
}
|