feat: background line thickness settings created

Author: arpandaze

lib/components/canvas/_canvas_background_painter.dart

@@ -9,6 +9,7 @@ class CanvasBackgroundPainter extends CustomPainter {
     required this.backgroundColor,
     this.backgroundPattern = CanvasBackgroundPattern.none,
     required this.lineHeight,
+    required this.lineThickness,
     this.primaryColor = Colors.blue,
     this.secondaryColor = Colors.red,
     this.preview = false,
@@ -22,6 +23,7 @@ class CanvasBackgroundPainter extends CustomPainter {
 
   /// The height between each line in the background pattern
   final int lineHeight;
+  final int lineThickness;
   final Color primaryColor, secondaryColor;
 
   /// Whether to draw the background pattern in a preview mode (more opaque).
@@ -35,7 +37,7 @@ class CanvasBackgroundPainter extends CustomPainter {
     paint.color = backgroundColor.withInversion(invert);
     canvas.drawRect(canvasRect, paint);
 
-    paint.strokeWidth = 3;
+    paint.strokeWidth = lineThickness.toDouble();
     for (PatternElement element in getPatternElements(
       pattern: backgroundPattern,
       size: size,

lib/components/canvas/canvas_background_preview.dart

@@ -16,6 +16,7 @@ class CanvasBackgroundPreview extends StatelessWidget {
     this.overrideBoxFit,
     required this.pageSize,
     required this.lineHeight,
+    required this.lineThickness,
   });
 
   final bool selected;
@@ -26,6 +27,7 @@ class CanvasBackgroundPreview extends StatelessWidget {
   final BoxFit? overrideBoxFit;
   final Size pageSize;
   final int lineHeight;
+  final int lineThickness;
 
   static const double fixedWidth = 150;
 
@@ -74,6 +76,7 @@ class CanvasBackgroundPreview extends StatelessWidget {
                     }
                   }(),
                   lineHeight: lineHeight,
+                  lineThickness: lineThickness,
                   primaryColor: colorScheme.primary
                       .withSaturation(selected ? 1 : 0)
                       .withValues(alpha: selected ? 1 : 0.5),

lib/components/canvas/inner_canvas.dart

@@ -128,6 +128,7 @@ class _InnerCanvasState extends State<InnerCanvas> {
             }
           }(),
           lineHeight: widget.coreInfo.lineHeight,
+          lineThickness: widget.coreInfo.lineThickness,
           primaryColor: colorScheme.primary,
           secondaryColor: colorScheme.secondary,
         ),

lib/components/toolbar/editor_bottom_sheet.dart

@@ -19,6 +19,7 @@ class EditorBottomSheet extends StatefulWidget {
     required this.currentPageIndex,
     required this.setBackgroundPattern,
     required this.setLineHeight,
+    required this.setLineThickness,
     required this.removeBackgroundImage,
     required this.redrawImage,
     required this.clearPage,
@@ -36,6 +37,7 @@ class EditorBottomSheet extends StatefulWidget {
   final int? currentPageIndex;
   final void Function(CanvasBackgroundPattern) setBackgroundPattern;
   final void Function(int) setLineHeight;
+  final void Function(int) setLineThickness;
   final VoidCallback removeBackgroundImage;
   final VoidCallback redrawImage;
   final VoidCallback clearPage;
@@ -160,6 +162,7 @@ class _EditorBottomSheetState extends State<EditorBottomSheet> {
                             overrideBoxFit: boxFit,
                             pageSize: pageSize,
                             lineHeight: widget.coreInfo.lineHeight,
+                            lineThickness: widget.coreInfo.lineThickness,
                           ),
                           Positioned(
                             bottom: previewSize.height * 0.1,
@@ -220,6 +223,7 @@ class _EditorBottomSheetState extends State<EditorBottomSheet> {
                           backgroundImage: null, // focus on background pattern
                           pageSize: pageSize,
                           lineHeight: widget.coreInfo.lineHeight,
+                          lineThickness: widget.coreInfo.lineThickness,
                         ),
                         Positioned(
                           bottom: previewSize.height * 0.1,
@@ -263,6 +267,30 @@ class _EditorBottomSheetState extends State<EditorBottomSheet> {
                 ),
               ],
             ),
+            Text(
+              t.editor.menu.lineThickness,
+              style: Theme.of(context).textTheme.titleMedium,
+            ),
+            Text(
+              t.editor.menu.lineThicknessDescription,
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+            Row(
+              children: [
+                Text(widget.coreInfo.lineThickness.toString()),
+                Expanded(
+                  child: Slider(
+                    value: widget.coreInfo.lineThickness.toDouble(),
+                    min: 1,
+                    max: 5,
+                    divisions: 4,
+                    onChanged: (double value) => setState(() {
+                      widget.setLineThickness(value.toInt());
+                    }),
+                  ),
+                ),
+              ],
+            ),
             const SizedBox(height: 16),
             Text(
               t.editor.menu.import,

lib/data/editor/editor_core_info.dart

@@ -61,6 +61,7 @@ class EditorCoreInfo {
   Color? backgroundColor;
   CanvasBackgroundPattern backgroundPattern;
   int lineHeight;
+  int lineThickness;
   List<EditorPage> pages;
 
   /// Stores the current page index so that it can be restored when the file is reloaded.
@@ -74,6 +75,7 @@ class EditorCoreInfo {
     backgroundColor: null,
     backgroundPattern: CanvasBackgroundPattern.none,
     lineHeight: Prefs.lastLineHeight.value,
+    lineThickness: Prefs.lastLineThickness.value,
     pages: [],
     initialPageIndex: null,
     assetCache: null,
@@ -95,6 +97,7 @@ class EditorCoreInfo {
   })  : nextImageId = 0,
         backgroundPattern = Prefs.lastBackgroundPattern.value,
         lineHeight = Prefs.lastLineHeight.value,
+        lineThickness = Prefs.lastLineThickness.value,
         pages = [],
         assetCache = AssetCache();
 
@@ -106,6 +109,7 @@ class EditorCoreInfo {
     this.backgroundColor,
     required this.backgroundPattern,
     required this.lineHeight,
+    required this.lineThickness,
     required this.pages,
     required this.initialPageIndex,
     required AssetCache? assetCache,
@@ -168,6 +172,7 @@ class EditorCoreInfo {
         return CanvasBackgroundPattern.none;
       }(),
       lineHeight: json['l'] as int? ?? Prefs.lastLineHeight.value,
+      lineThickness: json['lt'] as int? ?? Prefs.lastLineThickness.value,
       pages: _parsePagesJson(
         json['z'] as List?,
         inlineAssets: inlineAssets,
@@ -202,6 +207,7 @@ class EditorCoreInfo {
   })  : nextImageId = 0,
         backgroundPattern = CanvasBackgroundPattern.none,
         lineHeight = Prefs.lastLineHeight.value,
+        lineThickness = Prefs.lastLineThickness.value,
         pages = [],
         assetCache = AssetCache() {
     _migrateOldStrokesAndImages(
@@ -468,6 +474,7 @@ class EditorCoreInfo {
       'b': backgroundColor?.toARGB32(),
       'p': backgroundPattern.name,
       'l': lineHeight,
+      'lt': lineThickness,
       'z': pages.map((EditorPage page) => page.toJson(assets)).toList(),
       'c': initialPageIndex,
     };
@@ -536,6 +543,7 @@ class EditorCoreInfo {
     Color? backgroundColor,
     CanvasBackgroundPattern? backgroundPattern,
     int? lineHeight,
+    int? lineThickness,
     QuillController? quillController,
     List<EditorPage>? pages,
   }) {
@@ -548,6 +556,7 @@ class EditorCoreInfo {
       backgroundColor: backgroundColor ?? this.backgroundColor,
       backgroundPattern: backgroundPattern ?? this.backgroundPattern,
       lineHeight: lineHeight ?? this.lineHeight,
+      lineThickness: lineThickness ?? this.lineThickness,
       pages: pages ?? this.pages,
       initialPageIndex: initialPageIndex,
       assetCache: assetCache,

lib/data/prefs.dart

@@ -119,6 +119,7 @@ abstract class Prefs {
       lastShapePenColor;
   static late final PlainPref<CanvasBackgroundPattern> lastBackgroundPattern;
   static late final PlainPref<int> lastLineHeight;
+  static late final PlainPref<int> lastLineThickness;
   static late final PlainPref<bool> lastZoomLock,
       lastSingleFingerPanLock,
       lastAxisAlignedPanLock;
@@ -247,6 +248,7 @@ abstract class Prefs {
     lastBackgroundPattern =
         PlainPref('lastBackgroundPattern', CanvasBackgroundPattern.none);
     lastLineHeight = PlainPref('lastLineHeight', 40);
+    lastLineThickness = PlainPref('lastLineThickness', 3);
     lastZoomLock = PlainPref('lastZoomLock', false);
     lastSingleFingerPanLock = PlainPref('lastSingleFingerPanLock', false,
         historicalKeys: const ['lastPanLock']);

lib/i18n/strings.i18n.yaml

@@ -300,6 +300,8 @@ editor:
     deletePage: Delete page
     lineHeight: Line height
     lineHeightDescription: Also controls the text size for typed notes
+    lineThickness: Line thickness
+    lineThicknessDescription: Background line thickness
     backgroundImageFit: Background image fit
     backgroundPattern: Background pattern
     import: Import

lib/i18n/strings_en.g.dart

@@ -710,6 +710,8 @@ class TranslationsEditorMenuEn {
 	String get deletePage => 'Delete page';
 	String get lineHeight => 'Line height';
 	String get lineHeightDescription => 'Also controls the text size for typed notes';
+	String get lineThickness => 'Line thickness';
+	String get lineThicknessDescription => 'Background line thickness';
 	String get backgroundImageFit => 'Background image fit';
 	String get backgroundPattern => 'Background pattern';
 	String get import => 'Import';

lib/pages/editor/editor.dart

@@ -1768,6 +1768,12 @@ class EditorState extends State<Editor> {
         Prefs.lastLineHeight.value = lineHeight;
         autosaveAfterDelay();
       }),
+      setLineThickness: (lineThickness) => setState(() {
+        if (coreInfo.readOnly) return;
+        coreInfo.lineThickness = lineThickness;
+        Prefs.lastLineThickness.value = lineThickness;
+        autosaveAfterDelay();
+      }),
       removeBackgroundImage: () => setState(() {
         if (coreInfo.readOnly) return;