Merge pull request #12 from SyedAhkam/mirror-glyphs

feat: ability to mirror glyphs
SyedAhkam · Oct 12, 2024 · 76a6a95 · 76a6a95
2 parents f08f5f9 + 4bb013e
commit 76a6a95
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 25 deletions.
diff --git a/lib/models/app_prefs.dart b/lib/models/app_prefs.dart
@@ -8,19 +8,21 @@ import 'package:path_provider/path_provider.dart';
 class AppPrefs {
   final ThemeMode themeMode;
   final bool enableHaptics;
+  final bool mirrorGlyphView;
 
-  const AppPrefs(this.themeMode, this.enableHaptics);
+  const AppPrefs(this.themeMode, this.enableHaptics, this.mirrorGlyphView);
 
   factory AppPrefs.defaults() {
-    return const AppPrefs(ThemeMode.dark, true);
+    return const AppPrefs(ThemeMode.dark, true, false);
   }
 
   static fromJson(String contents) {
     final map = jsonDecode(contents);
 
     return AppPrefs(
         ThemeMode.values.firstWhere((e) => e.name == map['theme_mode']),
-        map['enable_haptics']);
+        map['enable_haptics'],
+        map['mirror_glyph_view']);
   }
 
   static get fileName => "app_prefs.json";
@@ -34,8 +36,11 @@ class AppPrefs {
     return fromJson(fileContents);
   }
 
-  String toJson() => jsonEncode(
-      {"theme_mode": themeMode.name, "enable_haptics": enableHaptics});
+  String toJson() => jsonEncode({
+        "theme_mode": themeMode.name,
+        "enable_haptics": enableHaptics,
+        "mirror_glyph_view": mirrorGlyphView
+      });
 
   Future<void> saveToLocalStorage() async {
     final json = toJson();

diff --git a/lib/routes/prefs.dart b/lib/routes/prefs.dart
@@ -19,6 +19,11 @@ class PrefsRoute extends ConsumerWidget {
     await appPrefsNotifier.updateValues(enableHaptics: value);
   }
 
+  void switchMirrorGlyphView(BuildContext context,
+      AppPrefsNotifier appPrefsNotifier, bool value) async {
+    await appPrefsNotifier.updateValues(mirrorGlyphView: value);
+  }
+
   @override
   Widget build(BuildContext context, ref) {
     var theme = Theme.of(context);
@@ -86,6 +91,19 @@ class PrefsRoute extends ConsumerWidget {
                       switchEnableHaptics(context, appPrefsNotifier, v),
                 ),
               ),
+              ListTile(
+                title: const Text("Mirror Glyphs"),
+                trailing: Switch(
+                  thumbColor: MaterialStateProperty.all(Colors.red),
+                  trackColor: MaterialStateProperty.all(Colors.transparent),
+                  trackOutlineColor:
+                      MaterialStateProperty.all(Colors.white.withOpacity(0.64)),
+                  trackOutlineWidth: MaterialStateProperty.all(1),
+                  value: appPrefs.value?.mirrorGlyphView ?? false,
+                  onChanged: (v) =>
+                      switchMirrorGlyphView(context, appPrefsNotifier, v),
+                ),
+              ),
             ],
           ),
         ));

diff --git a/lib/state/notifiers.dart b/lib/state/notifiers.dart
@@ -26,11 +26,16 @@ class AppPrefsNotifier extends AsyncNotifier<AppPrefs> {
     }
   }
 
-  Future<void> updateValues({ThemeMode? themeMode, bool? enableHaptics}) async {
+  Future<void> updateValues(
+      {ThemeMode? themeMode,
+      bool? enableHaptics,
+      bool? mirrorGlyphView}) async {
     var current = state.value!;
 
     var new_ = AppPrefs(
-        themeMode ?? current.themeMode, enableHaptics ?? current.enableHaptics);
+        themeMode ?? current.themeMode,
+        enableHaptics ?? current.enableHaptics,
+        mirrorGlyphView ?? current.mirrorGlyphView);
 
     await new_.saveToLocalStorage();
 

diff --git a/lib/widgets/glyph_view.dart b/lib/widgets/glyph_view.dart
@@ -167,24 +167,27 @@ class _GlyphViewState extends ConsumerState<GlyphView> {
           children: widget.glyphSet.pathDefs.map((def) {
             var parsedPath = parseSvgPath(def.$2);
 
-            return ClipPath(
-                clipper: Clipper(
-                    path: parsedPath,
-                    originalHeight: widget.glyphSet.viewBoxHeight,
-                    originalWidth: widget.glyphSet.viewBoxWidth),
-                child: GestureDetector(
-                    onTap: () =>
-                        widget.onGlyphTap != null ? processTap(def.$1) : null,
-                    onTapDown: (details) => widget.onGlyphTapDown != null
-                        ? processTapDown(details, def.$1)
-                        : null,
-                    onLongPressStart: (_) => processLongPressStart(def.$1),
-                    onLongPressEnd: (_) => processLongPressEnd(def.$1),
-                    child: Container(
-                      color: highlightedGlyph == def.$1
-                          ? theme.colorScheme.secondary
-                          : Colors.grey,
-                    )));
+            return Transform.flip(
+              flipX: appPrefs?.mirrorGlyphView ?? false,
+              child: ClipPath(
+                  clipper: Clipper(
+                      path: parsedPath,
+                      originalHeight: widget.glyphSet.viewBoxHeight,
+                      originalWidth: widget.glyphSet.viewBoxWidth),
+                  child: GestureDetector(
+                      onTap: () =>
+                          widget.onGlyphTap != null ? processTap(def.$1) : null,
+                      onTapDown: (details) => widget.onGlyphTapDown != null
+                          ? processTapDown(details, def.$1)
+                          : null,
+                      onLongPressStart: (_) => processLongPressStart(def.$1),
+                      onLongPressEnd: (_) => processLongPressEnd(def.$1),
+                      child: Container(
+                        color: highlightedGlyph == def.$1
+                            ? theme.colorScheme.secondary
+                            : Colors.grey,
+                      ))),
+            );
           }).toList(),
         );
       }),