Improve pen input experience

CodeDoctorDE · CodeDoctorDE · commit f96668cfeadc · 2026-01-23T23:40:52.000+01:00
diff --git a/app/lib/cubits/current_index.dart b/app/lib/cubits/current_index.dart
@@ -88,8 +88,19 @@ sealed class CurrentIndex with _$CurrentIndex {
     @Default(NavigatorPage.waypoints) NavigatorPage navigatorPage,
     @Default(false) bool isCreating,
     @Default('') String userName,
+    @Default(false) bool penDetected,
+    @Default(false) bool sessionPenOnlyInput,
   }) = _CurrentIndex;
 
+  /// Returns the effective pen-only input state.
+  /// If the setting is null (auto), uses the session-based state.
+  /// Otherwise uses the persisted setting.
+  bool get effectivePenOnlyInput {
+    final setting = settingsCubit.state.penOnlyInput;
+    if (setting != null) return setting;
+    return sessionPenOnlyInput;
+  }
+
   bool get moveEnabled =>
       (settingsCubit.state.inputGestures && pointers.length > 1) &&
       settingsCubit.state.moveOnGesture;
@@ -178,6 +189,28 @@ class CurrentIndexCubit extends Cubit<CurrentIndex> {
     state.networkingService.setup(bloc);
   }
 
+  void setPenDetected(bool detected) {
+    if (state.penDetected == detected) return;
+    // When pen is detected and setting is auto (null), enable session pen-only
+    final shouldEnableSessionPenOnly =
+        detected &&
+        state.settingsCubit.state.penOnlyInput == null &&
+        !state.sessionPenOnlyInput;
+    emit(
+      state.copyWith(
+        penDetected: detected,
+        sessionPenOnlyInput: shouldEnableSessionPenOnly
+            ? true
+            : state.sessionPenOnlyInput,
+      ),
+    );
+  }
+
+  void setSessionPenOnlyInput(bool value) {
+    if (state.sessionPenOnlyInput == value) return;
+    emit(state.copyWith(sessionPenOnlyInput: value));
+  }
+
   Future<void> _updateOnVisible(
     CameraViewport newViewport,
     DocumentLoaded blocState,
diff --git a/app/lib/cubits/current_index.freezed.dart b/app/lib/cubits/current_index.freezed.dart
diff --git a/app/lib/cubits/settings.dart b/app/lib/cubits/settings.dart
@@ -309,7 +309,8 @@ sealed class ButterflySettings with _$ButterflySettings, LeapSettings {
     @Default(1) double touchSensitivity,
     @Default(1) double selectSensitivity,
     @Default(1) double scrollSensitivity,
-    @Default(false) bool penOnlyInput,
+    bool? penOnlyInput,
+    @Default(true) bool showPenOnlyToggle,
     @Default(true) bool inputGestures,
     @Default('') String design,
     @Default(BannerVisibility.always) BannerVisibility bannerVisibility,
@@ -378,7 +379,10 @@ sealed class ButterflySettings with _$ButterflySettings, LeapSettings {
         const [];
     return ButterflySettings(
       localeTag: prefs.getString('locale') ?? '',
-      penOnlyInput: prefs.getBool('pen_only_input') ?? false,
+      penOnlyInput: prefs.containsKey('pen_only_input')
+          ? prefs.getBool('pen_only_input')
+          : null,
+      showPenOnlyToggle: prefs.getBool('show_pen_only_toggle') ?? true,
       inputGestures: prefs.getBool('input_gestures') ?? true,
       documentPath: prefs.getString('document_path') ?? '',
       theme: prefs.containsKey('theme_mode')
@@ -538,7 +542,10 @@ sealed class ButterflySettings with _$ButterflySettings, LeapSettings {
     await prefs.setString('theme_mode', theme.name);
     await prefs.setString('theme_density', density.name);
     await prefs.setString('locale', localeTag);
-    await prefs.setBool('pen_only_input', penOnlyInput);
+    if (penOnlyInput != null) {
+      await prefs.setBool('pen_only_input', penOnlyInput!);
+    }
+    await prefs.setBool('show_pen_only_toggle', showPenOnlyToggle);
     await prefs.setBool('input_gestures', inputGestures);
     await prefs.setString('document_path', documentPath);
     await prefs.setDouble('touch_sensitivity', touchSensitivity);
@@ -736,13 +743,19 @@ class SettingsCubit extends Cubit<ButterflySettings>
     return save();
   }
 
-  Future<void> changePenOnlyInput(bool penOnlyInput) {
+  Future<void> changePenOnlyInput(bool? penOnlyInput) {
     emit(state.copyWith(penOnlyInput: penOnlyInput));
     return save();
   }
 
-  Future<void> resetPenOnlyInput() {
-    emit(state.copyWith(penOnlyInput: false));
+  Future<void> resetPenOnlyInput() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove('pen_only_input');
+    emit(state.copyWith(penOnlyInput: null));
+  }
+
+  Future<void> changeShowPenOnlyToggle(bool showPenOnlyToggle) {
+    emit(state.copyWith(showPenOnlyToggle: showPenOnlyToggle));
     return save();
   }
 
diff --git a/app/lib/cubits/settings.freezed.dart b/app/lib/cubits/settings.freezed.dart
diff --git a/app/lib/cubits/settings.g.dart b/app/lib/cubits/settings.g.dart
diff --git a/app/lib/handlers/laser.dart b/app/lib/handlers/laser.dart
@@ -123,8 +123,7 @@ class LaserHandler extends Handler<LaserTool> with ColoredHandler {
     final currentIndexCubit = context.read<CurrentIndexCubit>();
     final transform = context.read<TransformCubit>().state;
     final state = bloc.state as DocumentLoadSuccess;
-    final settings = context.read<SettingsCubit>().state;
-    final penOnlyInput = settings.penOnlyInput;
+    final penOnlyInput = currentIndexCubit.state.effectivePenOnlyInput;
     localPosition = PointerManipulationHandler.calculatePointerPosition(
       currentIndexCubit.state,
       localPosition,
diff --git a/app/lib/handlers/pen.dart b/app/lib/handlers/pen.dart
@@ -127,7 +127,7 @@ class PenHandler extends Handler<PenTool> with ColoredHandler {
     if (!bloc.isInBounds(globalPos)) return;
     final state = bloc.state as DocumentLoadSuccess;
     final settings = context.read<SettingsCubit>().state;
-    final penOnlyInput = settings.penOnlyInput;
+    final penOnlyInput = currentIndexCubit.state.effectivePenOnlyInput;
     if (lastPosition[pointer] == localPos) return;
     lastPosition[pointer] = localPos;
     if (penOnlyInput &&
diff --git a/app/lib/l10n/app_en.arb b/app/lib/l10n/app_en.arb
@@ -594,6 +594,19 @@
   "folderSynced": "Folder synced",
   "syncRootDirectory": "Sync root directory",
   "penOnlyInput": "Pen only input",
+  "@penOnlyInput": {
+    "description": "Setting to enable pen only input mode"
+  },
+  "penOnlyInputAutoDescription": "Automatically enables pen-only mode when a stylus is detected. This setting only lasts for the current session.",
+  "penOnlyInputOnDescription": "Always reject touch and mouse input, only accept stylus input.",
+  "penOnlyInputOffDescription": "Accept all input types including touch, mouse, and stylus.",
+  "automatic": "Automatic",
+  "alwaysOn": "Always on",
+  "alwaysOff": "Always off",
+  "showPenOnlyToggle": "Show pen only toggle",
+  "@showPenOnlyToggle": {
+    "description": "Setting to show pen only toggle button when pen is detected"
+  },
   "inputGestures": "Input gestures",
   "nativeTitleBar": "Native title bar",
   "syncMode": "Sync mode",
diff --git a/app/lib/settings/inputs/pen.dart b/app/lib/settings/inputs/pen.dart
@@ -12,6 +12,13 @@ import '../../cubits/settings.dart';
 class PenInputSettings extends StatelessWidget {
   const PenInputSettings({super.key});
 
+  String _getPenOnlyInputName(bool? value, BuildContext context) {
+    if (value == null) return AppLocalizations.of(context).automatic;
+    return value
+        ? AppLocalizations.of(context).alwaysOn
+        : AppLocalizations.of(context).alwaysOff;
+  }
+
   String _getIgnorePressureName(
     IgnorePressure ignorePressure,
     BuildContext context,
@@ -53,17 +60,88 @@ class PenInputSettings extends StatelessWidget {
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.stretch,
                         children: [
-                          SwitchListTile(
-                            value: state.penOnlyInput,
+                          ListTile(
                             title: Text(
                               AppLocalizations.of(context).penOnlyInput,
                             ),
-                            secondary: const PhosphorIcon(
+                            subtitle: Text(
+                              _getPenOnlyInputName(state.penOnlyInput, context),
+                            ),
+                            leading: const PhosphorIcon(
                               PhosphorIconsLight.pencilSimpleLine,
                             ),
+                            onTap: () {
+                              final cubit = context.read<SettingsCubit>();
+                              final current = cubit.state.penOnlyInput;
+
+                              showLeapBottomSheet(
+                                context: context,
+                                titleBuilder: (context) => Text(
+                                  AppLocalizations.of(context).penOnlyInput,
+                                ),
+                                childrenBuilder: (context) {
+                                  return [
+                                    ListTile(
+                                      title: Text(
+                                        AppLocalizations.of(context).automatic,
+                                      ),
+                                      subtitle: Text(
+                                        AppLocalizations.of(
+                                          context,
+                                        ).penOnlyInputAutoDescription,
+                                      ),
+                                      selected: current == null,
+                                      onTap: () {
+                                        cubit.changePenOnlyInput(null);
+                                        Navigator.of(context).pop();
+                                      },
+                                    ),
+                                    ListTile(
+                                      title: Text(
+                                        AppLocalizations.of(context).alwaysOn,
+                                      ),
+                                      subtitle: Text(
+                                        AppLocalizations.of(
+                                          context,
+                                        ).penOnlyInputOnDescription,
+                                      ),
+                                      selected: current == true,
+                                      onTap: () {
+                                        cubit.changePenOnlyInput(true);
+                                        Navigator.of(context).pop();
+                                      },
+                                    ),
+                                    ListTile(
+                                      title: Text(
+                                        AppLocalizations.of(context).alwaysOff,
+                                      ),
+                                      subtitle: Text(
+                                        AppLocalizations.of(
+                                          context,
+                                        ).penOnlyInputOffDescription,
+                                      ),
+                                      selected: current == false,
+                                      onTap: () {
+                                        cubit.changePenOnlyInput(false);
+                                        Navigator.of(context).pop();
+                                      },
+                                    ),
+                                  ];
+                                },
+                              );
+                            },
+                          ),
+                          SwitchListTile(
+                            value: state.showPenOnlyToggle,
+                            title: Text(
+                              AppLocalizations.of(context).showPenOnlyToggle,
+                            ),
+                            secondary: const PhosphorIcon(
+                              PhosphorIconsLight.toggleRight,
+                            ),
                             onChanged: (value) => context
                                 .read<SettingsCubit>()
-                                .changePenOnlyInput(value),
+                                .changeShowPenOnlyToggle(value),
                           ),
                           ListTile(
                             title: Text(
diff --git a/app/lib/views/main.dart b/app/lib/views/main.dart
@@ -34,6 +34,7 @@ import '../actions/color_palette.dart';
 import '../models/viewport.dart';
 import '../services/asset.dart';
 import '../api/changes.dart';
+import 'pen_only_toggle.dart';
 import 'view.dart';
 import 'zoom.dart';
 
@@ -565,7 +566,19 @@ class _MainBody extends StatelessWidget {
                                             crossAxisAlignment:
                                                 CrossAxisAlignment.end,
                                             children: [
-                                              ZoomView(isMobile: isMobile),
+                                              Row(
+                                                mainAxisAlignment:
+                                                    MainAxisAlignment.end,
+                                                children: [
+                                                  const PenOnlyToggle(),
+                                                  const SizedBox(width: 8),
+                                                  Expanded(
+                                                    child: ZoomView(
+                                                      isMobile: isMobile,
+                                                    ),
+                                                  ),
+                                                ],
+                                              ),
                                               if (currentIndex.hideUi ==
                                                   HideState.touch)
                                                 FloatingActionButton.small(
diff --git a/app/lib/views/pen_only_toggle.dart b/app/lib/views/pen_only_toggle.dart
@@ -0,0 +1,84 @@
+import 'package:butterfly/bloc/document_bloc.dart';
+import 'package:butterfly/cubits/current_index.dart';
+import 'package:butterfly/cubits/settings.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:butterfly/src/generated/i18n/app_localizations.dart';
+import 'package:phosphor_flutter/phosphor_flutter.dart';
+
+/// A toggle button that appears when a pen/stylus is detected,
+/// allowing the user to quickly toggle pen-only input mode.
+class PenOnlyToggle extends StatelessWidget {
+  const PenOnlyToggle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<DocumentBloc, DocumentState>(
+      buildWhen: (previous, current) =>
+          previous.runtimeType != current.runtimeType,
+      builder: (context, docState) => BlocBuilder<CurrentIndexCubit, CurrentIndex>(
+        buildWhen: (previous, current) =>
+            previous.penDetected != current.penDetected ||
+            previous.hideUi != current.hideUi ||
+            previous.sessionPenOnlyInput != current.sessionPenOnlyInput,
+        builder: (context, currentIndex) =>
+            BlocBuilder<SettingsCubit, ButterflySettings>(
+              buildWhen: (previous, current) =>
+                  previous.penOnlyInput != current.penOnlyInput ||
+                  previous.showPenOnlyToggle != current.showPenOnlyToggle,
+              builder: (context, settings) {
+                // Don't show if:
+                // - No pen has been detected
+                // - UI is hidden
+                // - Setting to show toggle is disabled
+                // - Document is not loaded
+                if (!currentIndex.penDetected ||
+                    currentIndex.hideUi != HideState.visible ||
+                    !settings.showPenOnlyToggle ||
+                    docState is! DocumentLoadSuccess) {
+                  return const SizedBox.shrink();
+                }
+
+                // Use effective pen-only state (considers both setting and session)
+                final penOnlyEnabled = currentIndex.effectivePenOnlyInput;
+                final isAutoMode = settings.penOnlyInput == null;
+
+                return Tooltip(
+                  message: AppLocalizations.of(context).penOnlyInput,
+                  child: IconButton.filled(
+                    style: IconButton.styleFrom(
+                      backgroundColor: penOnlyEnabled
+                          ? Theme.of(context).colorScheme.primaryContainer
+                          : Theme.of(
+                              context,
+                            ).colorScheme.surfaceContainerHighest,
+                      foregroundColor: penOnlyEnabled
+                          ? Theme.of(context).colorScheme.onPrimaryContainer
+                          : Theme.of(context).colorScheme.onSurfaceVariant,
+                    ),
+                    icon: PhosphorIcon(
+                      penOnlyEnabled
+                          ? PhosphorIconsFill.pen
+                          : PhosphorIconsLight.pen,
+                    ),
+                    onPressed: () {
+                      if (isAutoMode) {
+                        // In auto mode, toggle the session state
+                        context
+                            .read<CurrentIndexCubit>()
+                            .setSessionPenOnlyInput(!penOnlyEnabled);
+                      } else {
+                        // In explicit mode, toggle the persisted setting
+                        context.read<SettingsCubit>().changePenOnlyInput(
+                          !penOnlyEnabled,
+                        );
+                      }
+                    },
+                  ),
+                );
+              },
+            ),
+      ),
+    );
+  }
+}
diff --git a/app/lib/views/view.dart b/app/lib/views/view.dart
@@ -405,6 +405,14 @@ class _MainViewViewportState extends State<MainViewViewport>
                                   },
                                   onPointerDown:
                                       (PointerDownEvent event) async {
+                                        // Detect pen/stylus input
+                                        if (event.kind ==
+                                                PointerDeviceKind.stylus ||
+                                            event.kind ==
+                                                PointerDeviceKind
+                                                    .invertedStylus) {
+                                          cubit.setPenDetected(true);
+                                        }
                                         _isScalingDisabled =
                                             event.kind ==
                                                 PointerDeviceKind.trackpad
diff --git a/metadata/en-US/changelogs/166.txt b/metadata/en-US/changelogs/166.txt
